/* CSS Document */
body {
	background-color: #000000;
	color: #FFFFFF;
}
h1, h2, h3, h4, h5, h6, li a, a {
	font-family: 'Italiana', serif;
	letter-spacing: 1px;
}
p {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
}
a:hover {
	color: inherit;
}
header {
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
header .row {
	padding: 30px 0;
	border-bottom: 2px solid #FFFFFF;
}
header nav ul li a, footer nav ul li a {
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
}
#hero::after {
	content: '';
	background-color: #000000;
	opacity: 0.7;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.carousel-inner img {
	object-fit: cover;
	object-position: center;
}
.carousel-indicators [data-bs-target] {
	width: 80px;
}
#logo {
	width: 100%;
	height: 100%;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	z-index: 1;
}
#logo svg {
	width: 250px;
	height: 160px;
}
#prenota {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	font-size: 11px;
	z-index: 2;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px;
	background-color: #000000;
	transition: all .3s ease-in;
}
#prenota:hover, .contatti:hover {
	font-weight: 700;
	color: #000000;
	background-color: #FFFFFF;
	border-color: #000000;
}
section:not(#hero), footer {
	padding-top: 50px;
}
#about-me .row, .contenitore-testo {
	width: 100%;
	padding: 30px 0;
	margin: 0;
}
.bordo-sinistro {
	border-top: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
}
.bordo-destro {
	border-bottom: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
}
#about-me .col-lg-5, #mappa .col-12:nth-of-type(1) {
	margin-bottom: 50px;
}
#about-me .testi p:nth-of-type(1) {
	margin-bottom: 20px;
}
h2 {
	margin-bottom: 30px;
	font-size: 30px;
}
#about-me img {
	width: 225px;
	height: 350px;
	object-fit: cover;
}
#servizi .col-12:nth-of-type(even) {
	margin: 50px 0;
}
h3 {
	font-size: 25px;
}
#servizi .image img {
	width: 90%;
	height: 300px;
	object-fit: cover;
}
.titolo-colonna {
	width:80%;
	margin: 20px auto;
	padding: 10px 0;
}
.bordo-sinistro-h3 {
	border-top: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
}
.bordo-destro-h3 {
	border-bottom: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 0;
	right: 0;
}
#galleria {
	padding-bottom: 50px;
}
#galleria div img {
	    width: 100%;
		height: 400px;
		object-fit: cover;
	}
#prenota-appuntamento {
	background-image: url("../image/prenota-appuntamento-mobile.jpeg");
	background-position: center center;
	background-size: cover;
	padding: 50px 0;
}
#prenota-appuntamento .sfondo-opaco-section::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
}
#prenota-appuntamento .contenitore-testo {
	position: relative;
	z-index: 1;
}
.contatti {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	font-size: 11px;
	background-color: #000000;
	padding: 5px;
	width: 50%;
	transition: all .3s ease-in;
}
#prenota-appuntamento .testi p, #prenota-appuntamento .contatti:nth-of-type(1) {
	margin-bottom: 30px;
}
#mappa .testi {
	padding: 0 5px;
}
#mappa .testi p:nth-of-type(2) {
	margin: 30px 0;
}
#mappa iframe {
	width: 100%;
}
footer {
	padding-bottom: 50px;
}
footer svg {
	width: 106px;
	height: 107px;
	margin-bottom: 30px;
}
footer .col-12 {
	margin-bottom: 30px;
}
footer h3 {
	margin-bottom: 20px;
}
footer p {
	margin-bottom: 5px;
}
footer .testi {
	margin-bottom: 0;
}
footer .cards svg {
	fill: #FFFFFF;
	width: 30px;
	height: 25px;
	margin-bottom: 0;
}
footer .social a i {
	color: #FFFFFF;
	font-size: 25px;
}
footer hr {
	height: 2px!important;
	color: #FFFFFF!important;
	opacity: 1;
	margin: 0 0 30px 0;
}
#credits .privacy {
	margin-bottom: 30px!important;
	font-size: 13px;
}



@media (min-width:375px) {
	header nav ul li a, #prenota, footer nav ul li a {
		font-size: 16px;
	}
	#logo svg {
	width: 340px;
}
	section:not(#hero), footer {
	padding-top: 100px;
}
	h2 {
		font-size: 40px;
		margin-bottom: 40px;
	}
	#about-me img {
		width: 100%;
		height: 450px;
		object-position: center -30px;
	}
	#servizi .col-12:nth-of-type(even) {
		margin: 100px 0;
	}
	h3 {
		font-size: 35px;
	}
	p {
		font-size: 18px;
	}
	#about-me .row, .contenitore-testo {
		padding: 50px 20px;
	}
	#servizi .image img {
		width: 90%;
		height: 400px;
	}
	.titolo-colonna {
		width: 75%;
	}
	#galleria {
	padding-bottom: 100px;
}
	#galleria div img {
		height: 500px;
	}
	#prenota-appuntamento {
		padding: 100px 0;
	}
	#mappa .col-12:nth-of-type(1) {
		margin-bottom: 100px;
	}
	.contatti {
		font-size: 16px;
	} 
	footer {
		padding-bottom: 100px;
	}
	footer svg {
		margin-bottom: 50px;
	}
	footer .col-12 {
	margin-bottom: 50px;
}
	footer .testi.col-md-4 {
		margin-bottom: 0;
	}
	footer .cards svg {
		width: 35px;
		height: 30px;
	}
	footer .social a i {
		font-size: 30px;
	}
	footer hr {
		margin-bottom: 50px;
	}
	#credits .privacy {
	margin-bottom: 30px!important;
	font-size: 15px;
}
}





@media (min-width:768px) {
	header .row {
	padding: 20px 0;
	}
	header .social a i {
		font-size: 20px;
		margin-right: 20px;
		color: #FFFFFF;
		transition: all .3s ease-in;
	}
	header .social a:hover .bi-facebook, footer .social a:hover .bi-facebook {
		color: #3b5998;
	}
	header .social a:hover .bi-instagram, footer .social a:hover .bi-instagram {
		color: #DD2A7B;
	}
	header nav ul li a {
		font-size: 14px;
		margin-left: 20px;
	}
	#logo svg {
	width: 640px;
	height: 300px;
}
	#about-me img {
		width: 90%;
	}
	#prenota {
		font-size: 18px;
		padding: 10px;
		bottom: 15%;
	}
	h2 {
	 font-size: 34px;
	}
	h3 {
		font-size: 22px;
	}
	p {
		font-size: 16px;
	}
	#about-me .col-lg-5 {
		margin-bottom: 0;
	}
	#servizi .col-md-4:nth-of-type(even) {
		margin: 0;
	}
	#servizi .image img {
		width: 90%;
		height: 300px;
	}
	#servizi p {
		padding: 0 5px;
	}
	.titolo-colonna {
		width: 85%;
	}
	#galleria div img {
		width: 900px!important;
	}
	.contatti {
		font-size: 18px;
		width: 20%;
	}
	#prenota-appuntamento {
		background-image: url("../image/prenota-appuntamento.jpeg");
	}
	#prenota-appuntamento .contatti:nth-of-type(1) {
		margin-bottom: 0;
	}
	#prenota-appuntamento .sfondo-opaco-div {
		padding: 100px 50px;
	}
	#prenota-appuntamento .sfondo-opaco-div::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
}
	#mappa {
		padding: 0!important;
	}
	#mappa .col-12.d-flex {
		margin-bottom: 0!important;
	}
	#mappa .testi {
		width: 85%;
	}
	footer p {
		font-size: 13px;
	}
	footer nav ul li a {
		font-size: 13px;
		margin-left: 7px;
	}
	footer .testi h3 {
		font-size: 15px;
		margin-bottom: 0!important;
	}
	footer .cards svg {
		width: 30px;
		height: 25px;
		margin-left: 20px;
	}
	footer .social a i {
		font-size: 20px;
		margin-left: 20px;
		color: #FFFFFF;
		transition: all .3s ease-in;
	}
	#credits p {
		font-size: 10px!important;
	}
	#credits .privacy {
		margin-bottom: 0!important;
	}
}





@media (min-width:994px) {
	header nav ul li a {
		font-size: 16px;
		padding: 0 15px;
		margin-left: 0;
	}
	.bordo-sinistro-link {
	width: 10px;
	height: 10px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .3s ease-in;
}
   .bordo-destro-link {
	width: 10px;
	height: 10px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: all .3s ease-in;
}
    header nav ul li:hover div, footer nav ul li:hover div {
	opacity: 1;
}
	#prenota {
		bottom: 12%;
		font-size: 16px;
	}
	h2 {
		font-size: 40px;
	}
	h3, footer .testi h3 { 
		font-size: 25px!important;
	}
	p, footer p {
		font-size: 16px!important;
	}
	#about-me .row {
		padding: 50px 50px;
	}
	#about-me .col-lg-7 {
		margin-bottom: 0;
	}
	#servizi .testi p {
		width: 90%;
	}
	#servizi .image img {
		height: 350px;
	}
	.titolo-colonna {
		width: 70%;
	}
	.contatti {
		font-size: 15px;
	}
	#prenota-appuntamento .sfondo-opaco-div {
		display: flex;
		justify-content: center;
	}
	#prenota-appuntamento .contenitore-testo {
		width: 85%;
	}
	#prenota-appuntamento .testi p {
		padding: 0 10%;
	}
	#mappa .testi {
		width: 80%;
	}
	footer nav ul li a {
		font-size: 16px;
		margin-left: 0px;
		padding: 0 12px;
	}
	#credits p {
		font-size: 14px!important;
	}
}