@import url('https://fonts.googleapis.com/css2?family=Asap:wght@700&family=Titillium+Web:ital,wght@0,200;0,400;0,700;1,400;1,700&display=swap');
body {padding: 0px;margin: 0px; color:#000;font-family: 'Titillium Web', sans-serif;font-size:16px}*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}img{ border:0;}a{text-decoration: none; color:#000}.clearBoth {clear:both;}.spazio{ width:100%; height:70px}
::-webkit-scrollbar {width: 7px;}::-webkit-scrollbar-track { background: #ccc;}::-webkit-scrollbar-thumb {background: #666;}::-webkit-scrollbar-thumb:hover {background: #000;}
.wrapper_progress{width:100px; position: fixed;bottom: 280px;left:5%;z-index: 1;transform: rotate(90deg);  background:#F40408; margin-left:-50px;}
.progress-container {width: 100%;height: 2px;background: #f1f1f1;}        
.progress-bar {height: 2px;background: #333;width: 0%;}

.fre_progress{ background:#fff; width:46px; height:46px;border-radius:50%; text-align:center; padding-top:10px; transition: all 0.3s ease-out;position: fixed;bottom: 160px;left:5%;z-index: 5;margin-left:-23px; border:1px solid #BCAD6B}
.fre_progress:hover{background:#BCAD6B;}
.scrolla{transition: all 0.3s ease-out; opacity:0;}
.viewscroll{opacity:1; transition: all 0.3s ease-out;}
		
.cursor{position: fixed; width: 5px;height: 5px;border-radius: 50%;background-color: #0c5994;pointer-events: none;mix-blend-mode: difference;z-index: 99999999;
  transition: transform 0.2s;}.cursor2{ position: fixed; width: 40px; height: 40px; border-radius: 50%; background:none; border:1px solid #7abc1d; pointer-events: none;mix-blend-mode: difference; z-index: 99999999; transition: transform 0.8s;}

.contieni_hearder{ width:100%; height:auto; position: fixed; /*background:#fff;*/ z-index:99;transition: all 0.3s ease-out;}
.bagrhearder{background:#fff;transition: all 0.3s ease-out;}
.wrap_herder{ width:80%; height:auto;  margin:0 auto; padding:0px 25px}
.herder_logo{ width:201px; height:auto; float:left; padding:25px 20px 25px 10px; position:relative}
.cognosinda{font-size:40px; line-height: 0; font-style: italic;font-weight:700; position: absolute; top: 40px;color: #042945}
.nomesinda{font-size:20px; line-height: 0; font-style: italic;font-weight:700;position: absolute; top: 22px; left: 40px;color: #042945}
.sindasinda{font-size:10px; line-height: 0; font-weight:700;position: absolute; top: 65px; left: 47px; text-transform: uppercase;letter-spacing:2px; color: #7abc1d}

.img_intro{ width: 100%; height: 100vh; overflow: hidden; position: relative; /*background-color: #000*/}
.img_intro img{ width: 100%;height: 100vh; object-fit: cover;}
.testo_intro{font-family: 'Asap', sans-serif; font-style: italic; font-size: 50px; font-weight: 700; color: #8b7c6d; position: absolute; top:40%; left: 10%;	width: 50%; height: auto; z-index: 9}
.testo_intro span{color:#fff}
.at_marce {writing-mode: vertical-rl;position: absolute;bottom: 40%;right: 36px;font-size: 18px;z-index: 99;font-family: 'Asap', sans-serif; font-style: italic;  font-weight: 700; color: #fff;}
.at_marce span{color:#7abc1d}

.herder_menu{ width:calc(100% - 261px); height:auto;  float:left; /*background:#666;*/ display:table;}
.menu{ width:100%; height:80px;position:relative; font-size:14px; text-transform:uppercase; font-weight:700;display: table-cell; vertical-align: middle;}
.menu ul{padding: 0px;margin:0px;position: relative; list-style: none; width:auto;display: block;}
.menu ul li{display: inline; margin:0px 0px 0px 40px;}
.menu ul li a{ color:#042945}

.wrap_page{ width:80%; height:auto;  margin:0 auto; /*background:#ccc;*/ padding:20px; }

.wrap_titolo{width: 100%; height: auto; padding-bottom: 40px;text-align: center}
.titolo_sez{font-size: 60px; font-weight: 700; font-style: italic;}
.sott_titolo_sez{font-size: 16px;font-style: italic; color: #999}

#chisono{width: 100%; min-height: 700px; padding: 120px 0px 60px 0px;}
#lettera{width: 100%; min-height: 700px; padding: 60px 0px 60px 0px;}
#coalizione{width: 100%; min-height: 700px; padding: 60px 0px 60px 0px;}
#contatti{width: 100%; min-height: 700px; padding: 60px 0px 60px 0px;}
.colo1{width: 50%;height: auto;float: left;}
.colo2{width: 50%;min-height: 700px;float: left;display: table;}
.colo3{width: 100%;height: auto;padding: 0px;line-height: 28px; font-size: 16px}
.colo4{width: 100%;height: auto;padding: 40px 0px 0px 0px;}

.align_blocco {display: table-cell;vertical-align: middle;width: 100%;padding: 0px 20px;line-height: 28px; font-size: 16px}
.align_blocco strong{font-style: italic}
.fullimg{width: 100%; min-height:700px; padding-right: 20px}.fullimg img{width: 100%;height:700px; object-fit: cover;}
.fullimg2{width: 100%; min-height:1050px; padding-right: 20px}.fullimg2 img{width: 100%;height:1050px; object-fit: cover;}
.intermezzo{width: 100%; height: 450px; background-color: #494539; position: relative;clip-path: polygon(0 0, 95% 20%, 90% 90%, 0 100%);}
.intermezzo img{width: 100%;height:450px; object-fit: cover; opacity: 0.6}
.testo_intermezzo{width: 100%;padding: 0px 20px;line-height: 32px;font-size: 40px; color:#fff; text-align: center; position: absolute; top:45%; font-weight: 700; font-style: italic; z-index: 9}

.box_coal{width: 12.5%; height: auto; /*background-color: #000;*/ float: left; padding: 5px; text-align: center}
.box_coal img{ width: 100%; height: auto; border-radius: 50%; border: 5px solid #fff}
.box_coal img:hover{border: 5px solid #ccc}
.box_coal a img{transition: all 0.3s ease-out;}
.box_coal a img:hover{opacity: 0.8}

.obli_top_b {width: 100%;height: 100px;clip-path: polygon(0 0, 100% 100%, 0 100%, 0 100%);background: #0c5994;}
.obli_top_v {width: 100%;height: 100px;clip-path: polygon(100% 0, 100% 0%, 100% 100%, 40% 100%);background: #7abc1d;margin-bottom: -100px}
.obli_top_v2 {width: 100%;height: 450px;clip-path: polygon(40% 30%, 100% 0%, 100% 100%, 0% 90%);background: #7abc1d;margin-bottom: -450px}

.wrap_footer{ width:100%; height:auto; background:#0c5994; font-style: italic;}

.cont_footer{ width:80%; height:auto;  margin:0 auto; color:#ccc; padding:0px 0px 40px 0px; line-height:22px;}
.cont_footer span{ color:#fff; font-weight: 800}

.box_social{ background:#7abc1d; width:36px; height:36px;border-radius:50%; text-align:center; padding-top:8px; float:left; margin-right:7px;transition: all 0.3s ease-out;}
.box_social:hover{background:#BCAD6B}


@media (min-width: 769px) and (max-width: 1024px) {
	.wrap_herder{height:80px;}
	.herder_logo{width:calc(100% - 60px);}
	.herder_menu{ display:none}
	.at_marce {bottom: 5%;}
	.colo1{width: 100%;}
	.colo2{width: 100%; min-height: auto}
	.align_blocco {padding:0px;}
	.fullimg{min-height:300px; padding: 0px}.fullimg img{height:300px;}
	.fullimg2{min-height:300px; padding: 0px}.fullimg2 img{height:300px;}
	.box_coal{width: 25%;}
	.testo_intermezzo{font-size: 30px;}
	
}
@media (min-width: 426px) and (max-width: 768px) {
	.wrap_herder{ width:100%; height:80px;padding:0px 25px}
	.herder_logo{width:calc(100% - 60px);}
	.herder_menu{ display:none;}
	.testo_intro{font-size: 30px; position: absolute; top:35%; left: 10%;}
	.at_marce {display: none}
	.colo1{width: 100%;}
	.colo2{width: 100%; min-height: auto}
	.align_blocco {padding:0px;}
	.fullimg{min-height:300px; padding: 0px}.fullimg img{height:300px;}
	.fullimg2{min-height:300px; padding: 0px}.fullimg2 img{height:300px;}
	.intermezzo{ display: none}
	.obli_top_v2{ display: none}
	.box_coal{width: 25%;}
	
}
@media (max-width: 425px) {
	.wrap_herder{ width:100%; height:80px;padding:0px 25px}
	.herder_logo{width:calc(100% - 60px);}
	.herder_menu{ display:none}
	.wrapper_progress{left:8%;}
	.fre_progress{ background:#fff; width:36px; height:36px; padding-top:5px;left:8%;z-index: 1;margin-left:-18px;bottom: 180px;}
	.testo_intro{font-size: 20px; position: absolute; top: 70%; left: 15%;width: 65%; height:130px;}
	.img_intro img{object-position: 60% bottom}
	.at_marce {display: none}
	.colo1{width: 100%;}
	.colo2{width: 100%; min-height: auto}
	.align_blocco {padding:0px;}
	.fullimg{min-height:300px; padding: 0px}.fullimg img{height:300px;}
	.fullimg2{min-height:300px; padding: 0px}.fullimg2 img{height:300px;}
	.intermezzo{ display: none}
	.obli_top_v2{ display: none}
	.box_coal{width: 50%;}
}