body{ overflow-x: hidden; background-color: #EEECE5; }
main{ padding-top: 40px; max-width:1920px; margin: auto; }
.span{font-family: "span", serif;}
.utile{font-family: "utile", sans-serif;}
.inter{font-family: "Inter", sans-serif;}
.light-blue{color: #B6E1F8;}
.blue{color: #01233F;}

/* HEADER inizio */
header{ position: fixed; top: 0; left: 0; width: 100%;  z-index: 9; background-color: #FFF;}
.header-int{ width: 90%; margin: auto; display: grid; grid-template-columns: 161px 1fr 161px; height: 40px;}
.logo{ margin-top: 14px;}
.btn-benefit{ position: absolute;}
.menu{font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; color: #000; text-transform: uppercase; text-align: center; line-height: 40px;}
.menu ul li{ display: inline-block; margin: 0 15px;}
.menu a{ text-decoration:none; color: #000;}
/* HEADER fine */

.main-home{width:100%; height:calc(100vh - 40px); position: relative; max-height: 1140px; overflow: hidden;}
.image{width:100%; min-height:calc(100vh - 40px); background-image:url('../images/main.jpg'); background-position:center; position: absolute; left: 0; top: 0; }
.logo-main{ position: relative; z-index: 2; text-align: center; padding-top: 50px;}
.logo-main img{ max-width: 86%;}
.box-main-img{ padding-top: 15%; position: relative; z-index: 2; width: 90%; max-width: 500px; margin-left: 7%;}
.box-main-img .title{font-family: "span", serif; font-size: 70px; color: #B6E1F8; line-height: 100%;}
.box-main-img .descr{font-family: "utile", sans-serif; font-size: 20px; color: #FFF; margin-top: 30px;}
.cont-chi-siamo{ padding-top: 10%;}
.grid-50-all{ display: grid; grid-template-columns: 1fr 1fr; width: 86%; margin: auto; align-items: center;}
.grid-50-all.al-top{ align-items: inherit;}
.bg-waves{ height: 200px; background: url("../images/bg-waves.png") no-repeat bottom center;}
.img-bird{ position: absolute; left: -10%; top: -10%;}
.capitol{font-family: "utile", sans-serif; text-transform: uppercase; font-size: 18px; font-weight: bold; text-align: center; color: #01233F;}
.title-all{font-family: "span", serif; text-transform: uppercase; font-size: 70px; text-align: center; color: #01233F; line-height: 100%; margin-top: 20px;}
.descr-all{font-family: "utile", sans-serif; font-size: 20px; text-align: center; color: #000; max-width: 500px; width: 80%; margin: auto;}

.capitol.white, .title-all.white, .descr-all.white{ color: #FFF;}
.capitol.light-blue, .title-all.light-blue, .descr-all.light-blue{ color: #B6E1F8;}

.spacer{ text-align: center; padding: 30px 0;}
.btn-contatti{font-family: "utile", sans-serif; text-transform: uppercase; font-size: 15px; font-weight: bold; text-align: center; color: #01233F; width: 140px; height: 40px; line-height: 40px; background-color: #B6E1F8; border-radius: 100px; margin: 50px auto 0;}
.btn-download{font-family: "utile", sans-serif; text-transform: uppercase; font-size: 15px; font-weight: bold; text-align: center; color: #FFF; width: 140px; height: 40px; line-height: 40px; background-color: #01233F; border-radius: 100px; margin: 25px auto 0;}
.btn-contatti a{display: block; color: #01233F; text-decoration: none;}
.btn-download a{display: block; color: #FFF; text-decoration: none;}
.slider-chi-siamo{ max-width: 740px; margin: auto;}
.dida-slider-chi-siamo{position: absolute; left: 10%; bottom: 10%; max-width: 40%;}
.dida-slider-chi-siamo .title{font-family: "span", serif; font-size: 30px; color: #B6E1F8; text-transform: uppercase; margin-bottom: 20px;}
.dida-slider-chi-siamo .descr{font-family: "utile", sans-serif; font-size: 15px; color: #B6E1F8; }

.slider-chi-siamo .slick-dots{ text-align: right; bottom: -35px;}
.slider-chi-siamo .slick-dots li button{ width: 45px; height: 5px;}
.slider-chi-siamo .slick-dots li button:before{ content: ""; width: 45px; height: 5px; background-color: #01233F; opacity: 1;}
.slider-chi-siamo .slick-dots li.slick-active button:before{ background-color: #B6E1F8;}
.slider-chi-siamo .slick-dots li{ width: 45px; margin: 0 0 0 10px;}

.cont-storia{ background: url('../images/big-01.jpg') no-repeat left center; }
.grid-50-all.vh100{ min-height:calc(100vh - 40px);}

.cont-prodotti{ padding: 7% 0;}
.slider-prodotti{ max-width: 645px; margin: auto;}
.slider-prodotti .slick-dots{ text-align: center; bottom: -35px;}
.slider-prodotti .slick-dots li button{ width: 45px; height: 5px;}
.slider-prodotti .slick-dots li button:before{ content: ""; width: 45px; height: 5px; background-color: #01233F; opacity: 1;}
.slider-prodotti .slick-dots li.slick-active button:before{ background-color: #B6E1F8;}
.slider-prodotti .slick-dots li{ width: 45px; margin: 0 0 0 10px;}
.slider-prodotti .title{font-family: "utile", sans-serif; font-size: 12px; color: #01233F; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; text-align: center;}
.slider-prodotti .scopri{font-family: "utile", sans-serif; font-size: 12px; color: #000; text-align: center; padding-bottom: 15px;  }
.slider-prodotti .scopri a{ color: #000; }
.modal{ position: absolute; left: 10%; right: 10%; top: 5%; bottom: 10%; background-color: #B6E1F8; text-align: center; display: none; }
.modal > .relative{ padding: 10% 5%; }
.modal img{  margin:0 auto 7%; }
.descr-slider{font-family: "utile", sans-serif; font-size: 20px; max-width: 90%; margin: 5% auto 0; }
.close-modal{ position: absolute; right: 5%; top: 5%; cursor: pointer;}



.cont-impegno{ background:#EEECE5 url('../images/big-02.jpg') no-repeat center center; background-size: cover;  min-height:calc(100vh - 40px); }

.cont-visione{ background: #EEECE5 url('../images/bg-visione.jpg') no-repeat center center; background-size: cover;  min-height:calc(100vh - 40px); padding: 7%; }
.logo-seahorse{ display: block; margin:0 auto 70px;}
.txt-more .title{font-family: "utile", sans-serif; font-size: 30px; text-transform: uppercase; color: #01233F; text-align: center; font-weight: bold; margin-top: 50px;}
.txt-more .descr{font-family: "utile", sans-serif; font-size: 14px;  color: #01233F; text-align: center; }

/* FOOTER inizio */
footer{  background-color: #FFF;}
.footer-dati{ width: 100%; padding: 3% 5% 4%; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: #01233F; font-family: "utile", sans-serif;}
.link-social a{ text-decoration: none; color: #01233F; display: inline-block; margin: 0 15px;}
.footer-riconoscimenti{ width: 90%; max-width: 1200px; padding: 30px 5% ; margin: auto; display: grid; grid-template-columns: 1fr 1fr; background-color: #FFF; font-family: "utile", sans-serif; font-size: 12px; text-transform: uppercase; color: #01233F; gap:8%;}
.footer-riconoscimenti > div:first-child{ border-right: 1px solid #000; }

/* FOOTER fine */


@media(min-width: 768px){


}

@media(max-width: 1919px) {

}

@media(max-width: 1660px) {
	.slider-chi-siamo{ max-width: 550px;}
}


@media(max-width: 1450px) {

}

@media(max-width: 1350px) {

	.slider-chi-siamo{ max-width: 500px;}
	.grid-50-all.al-top{ display: block;}
}




@media(max-width: 1023px) {

	.header-int{ grid-template-columns: 1fr 1fr;}
	.header-int > div:last-child{ text-align: right;}
	.btn-benefit{ position: static; margin-top: 5px;}
	.box-main-img .title, .title-all{ font-size: 35px;}
	.box-main-img .descr{ font-size: 16px; margin-top: 15px;}
	.logo-main{ position: absolute; bottom: 15%;}
	.grid-50-all{display: block;}
	.grid-50-all > div{margin-bottom: 30px;}

	.cont-chi-siamo{ padding-top: 18%;}

	.cont-storia{ padding: 30px 0;}

	.footer-dati, .footer-riconoscimenti{ display: block; text-align: center;}
	.footer-dati > div, .footer-riconoscimenti > div{ margin-bottom: 30px;}
	.footer-riconoscimenti > div:first-child{ border-right: 0; }

	.dida-slider-chi-siamo{ max-width: 80%;}
	.dida-slider-chi-siamo .descr{ line-height: 120%;}
	.dida-slider-chi-siamo .title{ line-height: 100%;}

}


@media(max-width: 767px) {


	.image{ background: url("../images/main-mob.jpg") no-repeat left top; background-size: 100%;}
	.logo-main{ bottom: 5%;}
	.grid-50-all.vh100.vhdefmob{ min-height: 0;}
	.cont-storia{ background: none;}
	.grid-50-all.vh100.vhdefmob .capitol.white, .grid-50-all.vh100.vhdefmob .title-all.white, .grid-50-all.vh100.vhdefmob .descr-all.white{ color:#01233F;}

	.img-bird {

		left: -7%;
		
		width: 68%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{


}




@media screen and (min-width:1024px)
{
	.hide-on-desktop{ display: none !important;}
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
	.hide-on-tablet{ display: none !important;}


}
@media screen and (min-width: 0px) and (max-width: 767px)
{
	.hide-on-mobile{ display: none !important;}
}