/* CSS Document */
	/*Tavolozza. 
	- Blu #003a72 
	- Blu chiaro #004a8b 
	- Rosa #dfc5be 
	- Marrone #551012*/

						/* RESET */
* { margin: 0; padding: 0;}
html body {
	background: #dfc5be;
	font: 1.6rem/2rem "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #414141;
}

						/* GENERICI */
#container { width:100%; }
#main-wrap { width:100%; padding:0px; margin:0 auto; }
.img { width: 100%;}  
a:link, a:visited { color: #004a8b; text-decoration: none; }
a:hover	{ color: #2577c0; }
strong { font-weight: bold; color: #003a72;}



						/* HEAD */
.logo {
	width: 100%;
	height: auto;
	margin: -10px auto;
	text-align: center;
	background-image: url(./images/PROFILO-MADONNA.png);
	background-position: -155px 15px;
	background-size: contain;
	background-repeat: no-repeat;
	}
.logo img {
	width: 600px;
	height: auto;
	margin: 66px;
	}
@keyframes width {
	0% { width:800px; opacity:0%}
	20% { opacity:0%}
	100% { width:600px; opacity:100% }
	}
.entry.head, .entry.servizi	{ 
	/* IE10 */
		background-image: -ms-linear-gradient(top right, #003a72 0%, #004a8b 100%);
	/* Mozilla Firefox */
		background-image: -moz-linear-gradient(top right, #003a72 0%, #004a8b 100%);
	/* Opera */
		background-image: -o-linear-gradient(top right, #003a72 0%, #004a8b 100%);
	/* Webkit (Safari/Chrome 10) */
		background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #003a72), color-stop(1, #004a8b));
	/* Webkit (Chrome 11+) */
		background-image: -webkit-linear-gradient(top right, #003a72 0%, #004a8b 100%);
	/* Regola standard */
		background-image: linear-gradient(top right, #003a72 0%, #004a8b 100%);
	}

						/* altri blocchi principali */
.entry	{ width: 100%;
	padding: 10px 0;
	margin: 50px 0;
	}

.bianco{ background: #fcfbfa;}

.rosa{ background: #dfc5be;}
.entry h1, .entry h2 {
 	font-size: 2.7rem;
	line-height: 48px;
	font-family: "Playfair Display", serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	margin-bottom: 25px;
	padding-top: 5px;
	font-weight: 450;
	}

.afterline:after, .afterline:after {
	display: inline-block;
	content: "";
	height: 2px;
	width: 25%;
	margin:0 0 0 5px
}

h1.afterline:after{background:#551012;} 

h2.afterline:after{background:#ffffff;}

.entry h1 { color: #551012;}
.entry h2 { color: #ffffff;}
.entry p { padding:10px 0;}						   
.not2	{ padding: 32px;
	width: auto;
	text-align: center;
	}   .not2 h1, .not2 p {
	max-width: 900px;
	text-align: center;
	margin: 33px auto;
	}
.last { border-bottom: 16px solid #003a72; margin:0}
.not2:last-child {}
						/* foto */
.fotogallery {
	padding: 32px 0px;
	width: 900px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1px;
	justify-content: center;
	margin: auto;
	-webkit-transition: width 3s ease-in-out;
	-moz-transition: width 3s ease-in-out;
	-o-transition: width 3s ease-in-out;
	transition: width 3s ease-in-out;
	}

.fotox1, .fotox2 { 
	width: auto;
	display: flex;
	flex-wrap: wrap;
 	justify-content: center;
	}.fotox1 { flex-grow: 1; min-width: 15%;}
.fotox2 { flex-grow: 2; min-width: 30%;}
.fotox1 img, .fotox2 img	{
	text-align: center;
	line-height: 100px;
	height: auto;
	margin: 0 0 0 0;
	vertical-align: middle; 
	-webkit-transition: width 2s ease-in-out;
	-moz-transition: width 2s ease-in-out;
	-o-transition: width 2s ease-in-out;
	transition: width 2s ease-in-out;}
.fotox1 img{	min-width: 25%; width: 200px;}
.fotox2 img{	min-width: 50%; width: 400px;}	

/* SERVIZI */
.servizi {    color: #f4f4f4;   padding: 32px 36px;   width: auto;   display: flex;   flex-direction: row;
   flex-wrap: wrap;   gap: 25px 36px;   justify-content: center;}
.servizio	{    flex-grow: 2;    text-align: center;    line-height: 100px;    min-width: 18%;	}
.servizio img	{ width: 75px;    height: auto;   margin: 0 4px 0 0;   vertical-align: middle; 	}
.servizio span{   font-size: 17px;    font-weight: bold;    margin: auto auto auto 0px;    line-height: normal;    vertical-align: middle;    display: inline-block;   text-align: left;   width: 182px;	}

						


					/* CONTATTI */
.contattaci {
	padding: 32px 36px;
	margin: 0;
	width: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px 36px;
	justify-content: center;
	}
.contatto a {
        text-align: center;
	line-height: 90px;
	min-width: 30%;
	background: #2577c0;
	border-radius: 100px;
	display:block;
	transition: background 0.8s ease-in-out;
 	}   
.contatto a img{ width: 75px;
	height: auto;
	margin: 0 4px 0 16px;
	vertical-align: middle; 
	}
.contatto a span {
	font-size: 24px;
	font-weight: bold;
	margin: auto 36px auto 0px;
	line-height: normal;
	vertical-align: middle;
	display: inline-block;
	text-align: left;
	}   
.contatto a:link, .contatto a:visited { color: #ffffff; text-decoration: none; }
.contatto a:hover{background-color:#1b64a5}	
						/*Partner*/
.partner img {
	width: auto;
	height: 2.4em;
	margin: 1em 0.8em;
	}


						/* FOOTER*/
.footer-contatti {font-size: 1.2rem;}    
.footer-contatti img {
	width: 150px;
	height: auto;
	margin: auto;
	display: block;
	}
.footer-contatti span { display: inline-block;}
.footer-credit {
	text-align: center;
	font-size: 12px;
	} 
.footer-credit img {
	width: 200px;
	height: auto;
	margin: 3px 0 8px 4px;
	vertical-align: middle;
	}                              

						/*MEDIA QUERY*/
		/* responsive desktop*/

@media only screen and (min-width: 1201px) {
	.logo {background-position: top left;}

	.logo img { animation: width 1s ease-out 1 normal; }

	.fotogallery:hover{
	-webkit-transition: width 2s ease-in-out;
	-moz-transition: width 2s ease-in-out;
	-o-transition: width 2s ease-in-out;
	transition: width 2s ease-in-out;
	width:1000px;
	}

	.fotogallery:hover .fotox1 img, .fotogallery:hover .fotox2 img {opacity:0.5; filter: blur(2px);}
	.fotogallery:hover .fotox1 img:hover, .fotogallery:hover .fotox2 img:hover {
	opacity:1;
	filter:none;
	-webkit-transition: width 1.5s ease-in-out;
	-moz-transition: width 1.5s ease-in-out;
	-o-transition: width 1.5s ease-in-out;
	transition: width 1.5s ease-in-out;}
	}
	
	.fotogallery:hover .fotox1 img:hover{	width: 550px;
	}
	.fotogallery:hover .fotox2 img:hover { width: 800px;
	}

	

		/* responsive mobile*/
@media only screen and (max-width: 1200px) {
	html body{font-size:1.7rem;line-height:2rem;}

	.fotogallery {
	width: 100%;
	display: flex;
	flex-direction: column;
	}

	.fotox1, .fotox2 { flex-grow: 1; min-width: 100%;}
	
	.fotox1 img, .fotox2 img	{min-width: 300px;
        width: 80%;}

	.servizio span { font-size:2rem; line-height:2.3rem; width: 330px;}

	.contatto a span { font-size:3rem; line-height:2.1rem;}
	

	.footer-contatti { line-height:3rem; }    

	.footer-contatti span strong { font-size:2.6rem; line-height:4rem; display:block}


						/* Altro*/

.not2 { padding: 25px 38px;
	margin-bottom: 55px;	}   
.contatto { min-width: 85%; }
.contatto a{ padding:16px; }
	.servizi {padding:32px 3px;gap: 25px;}
	.servizio img {width:120px;}
	.servizio {min-width: 40%;flex-grow: 0;}
	.footer-contatti span {display:block}
	span.hidden-br {display:none}
	.footer-credit img{width:400px}
	.footer-contatti img{width:100px}
}