@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700');

body { margin:0; padding: 0; color: #333; font-family: 'Poppins', sans-serif; }
.container { max-width: 1420px; margin: 0 auto; padding: 0 1%; position: relative; }
ul, li, h1, h2, h3, h4, h5, p { padding: 0; margin: 0; list-style: none; }
h1 {
	font-size: clamp(35px, 5vw, 50px);
}
h2 { font-size: clamp(30px, 4vw, 40px);
    line-height: 1.2;
    margin: 0 0 20px; }
a { text-decoration: none; color: #333 }
p {  font-size: 16px; line-height: 2 }
button { background-color: transparent; border: none; }
.center { text-align: center; }
.clear { clear: both; }
.upper { text-transform: uppercase; }
.light { font-weight: 500 }
.blu {color: #40b1dd}
.yellow {color: #222e76}
.bgblue {background-color: #0302f5}
.active {color: #40b1dd; font-weight: bolder;}
.active-page { background-color: #40b1dd }
.fff {color: #fff}
.font { font-weight: bold; }

.sticky { position: fixed !important; top: 1%!important; right: 0.5%!important; width: auto; z-index: 1000!important }
.sticky .menu { display: inline-block; }
/* .sticky .menu_responsive { height: 60px; width: 60px; border-radius: 50% }
.sticky .menu_responsive #trigger-overlay { padding-top: 7px } */
.fa-bars { margin-top: -4px }
/* .sticky .menu_responsive #trigger-overlay p { font-size: 16px } */

.top_img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 300px;
	position: relative;
}

#header-index {
	.top_img {
		height: 600px;

		.txt_abs {
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			left: 0;
			z-index: 2;
			text-align: left;
            width: 100%;

			.title {
				max-width: 1420px;
				margin: 0 auto;
				padding: 0 1% 50px;

				h1 {
					font-size: clamp(35px, 5vw, 50px);
					line-height: 1.2;
                    margin: 0 0 30px;
					
					span {
						font-size: clamp(30px, 4vw, 40px);
						color: #333;
						text-transform: none;
					}
				}
			}
		}
	}
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.fascia_menu {
	padding: 15px 0 0;
	background: #b3f1ff;

	.container {
		.flex {
			display: flex;
			flex-wrap: wrap;

			.logo {
				img {
					width: 200px;
					height: auto;
					aspect-ratio: 200 / 129;
					object-fit: contain;
					max-width: 100%;
				}
			}

			ul.menu {
				width: calc(100% - 200px);
                align-items: center;
				justify-content: flex-end;
				display: none;

				@media screen and (min-width: 1025px) {
					display: flex;
				}

				li {
					height: 100%;
					display: flex;
    				align-items: center;

					a {
						display: flex;
						height: 100%;
						align-items: center;
						padding: 0 20px;
					}
				}
			}

			.menu_responsive {
				display: flex;
				width: calc(100% - 200px);
                align-items: center;
				justify-content: flex-end;

				@media screen and (min-width: 1025px) {
					display: none;
				}
			}
		}
	}
}

.first {
	text-align: center;
	padding: 0 0 100px;

	h1 {
		font-size: clamp(35px, 5vw, 50px);
	}
}


.intro_home {
	.flex {
		gap: 50px;

		.bl {
			width: 100%;

			@media screen and (min-width:580px) {
				width: calc(50% - 25px);
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

.body { padding: 110px 0 60px; -webkit-box-shadow: 0px -8px 45px -14px rgba(0,0,0,0.55);
-moz-box-shadow: 0px -8px 45px -14px rgba(0,0,0,0.55);
box-shadow: 0px -8px 45px -14px rgba(0,0,0,0.55); background-color: #fff; width: 100%; position: relative; z-index: 300;}

.body .main .txt {-webkit-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75); position: relative; z-index: 2; background-color: #40b1dd; padding: 3%; color: #fff; width: 50%; margin: 0 3%}
.body .main .txt p { font-weight: 300; font-size: 17px }
.body .main .img { position: absolute; top: 120px; right: 0.5%; }
.body .main .img img { width: 100% }
.body .main .button { transition: all 1s ease 0s;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    background: #3a4693;
    padding: 10px 30px;
    font-size: 16px;
    margin: 50px 0 0;
    display: inline-block; }
.body .main .button:hover { background-color: #0302f5 }
.body .divisorio { width: 100%; margin: 130px 0 50px }
.body .divisorio img { width: 100% }

.icon { margin: 40px 0 0 }
.icon .txt { width: 80%; margin: 0 auto 40px }
.icon .box { width: 21%; padding: 20px 1%; display: inline-block; vertical-align: top; }
.icon .box:hover { background-color: #f2f2f2 }
.icon .box h3 {font-weight: lighter; font-size: 1.3vw; margin: 10px 0 ; line-height: 1}
.icon .box .line { background-image: url(../images/shape-small.png); width: 100%; height: 10px; margin: 10px 0; background-size: contain; background-repeat: no-repeat; }
.icon .box p { font-size: 14px }

/* #scrolling { z-index: -200; top: 26.5vw; text-align: center; } */

.menu_responsive2 { display: none; }

.parallax-window {
	min-height: 400px;
    background: transparent; overflow: hidden;}

.parallax-prefooter {
    background: transparent; overflow: hidden; padding: 100px 0;}

.circle { background-color: #40b1dd; padding: 23px; border-radius: 50%; width: 280px; height: 280px; margin: 0 auto }
.circle .contact { -webkit-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75); background-color: #fff; border-radius: 50%; height: 100% ; width: 100% }
.circle .contact p { padding-top: 30% }
.circle .contact h3 { color: #40b1dd; font-size: 35px; font-weight: 500; }

/*page*/
ul.breadcrumbs {
	    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    margin: 60px 0 20px;
    gap: 5px;
}

.bg-page { position: absolute; top: 80px; z-index: -1; left: 0; width: 20% }

.main-page { padding: 80px 0; }
.main-page .txt { width: 100%; margin: 0 0 40px }
.main-page .txt img { width: 120px }

.main2-page .txt { -webkit-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75);
box-shadow: 0px 0px 45px -14px rgba(0,0,0,0.75); position: relative; z-index: 2; background-color: #40b1dd; padding: 3% 3% 5%; color: #fff; width: 35%; float: right; text-align: right; }
.main2-page .txt p { margin-top: 20px }
.main2-page .txt .button { font-weight: 300; text-transform: uppercase; color: #fff; position: absolute; background: #3a4693; right: 7.5%; bottom: -10%; padding: 10px 30px; }
.main2-page .txt .button:hover { background-color: #0302f5 }
.main2-page .img1 { float: right;
width: 32%;
margin: 60px -30px; }
.main2-page .img2 { float: right; width: 23%; }

.divisorio { width: 100% }

.main3-page { margin: 30px 0 }
.main3-page ul { border-left: 5px solid #222e76; }
.main3-page ul li { margin-left: 10px }
.main3-page .button { color: #fff; background-color: #222e76; padding: 15px 20px; margin: 30px 0; display: inline-block; }
.main3-page .button:hover { background-color:#0302f5  }

.cms {     margin-bottom: 2%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px 0;}
.cms .box {position: relative;
    width: 25%;
    overflow: hidden;
    padding: 0 1%;
    box-sizing: border-box;}
.cms .box .img { transition: all 1s ease 0s; width: 100%; z-index: 2; position: relative;}
.cms .box .img:hover { opacity: 0.5 }
.cms .box .txt { text-align: center; background-color: #fff; padding: 10px 0; width: 100%; margin-top: -20px; z-index: 2; position: relative; }
.line {background-image: url(../images/shape-small.png);
width: 100%;
height: 10px;
margin: 5px 0 0;
background-size: contain;
background-repeat: no-repeat;}
.cms .box h2 {font-weight: lighter;
font-size: clamp(22px, 3vw, 30px);
line-height: 1;}
.cms .box p { font-size: 16px }
.cms .box .logo { position: absolute; top: 15%; width: 60%; left: 0;right: 0; margin: 0 auto; z-index: 1; width: 200px}

.percorso { float: right; margin: -80px 13px; font-size: 12px }
.dettaglio { margin: 30px 0 120px }
.dettaglio .brush { width: 140px; margin: 5px 0 20px}
.dettaglio .img { width: 100%; text-align: center; }
.dettaglio .img .gallery img { width: 23.5%; display: inline-block; margin: 0.5% }
.dettaglio .txt { text-align: left; width: 100%; margin: 0 0 20px }

.main2-page.appalti, .main2-page.form { margin-bottom: 50px }
.main2-page.appalti .txt .button { bottom: -5% }
.main2-page.appalti .img3 { float: right; width: 52%; margin: 80px -30px; }
.main2-page.form .img3 { float: right; width: 52%; margin: 120px -30px; }
.main2-page.form .txt .button { bottom: -5% }
.main2-page.form h2 { margin-bottom: 10px }
.form input, .form textarea { font-size: 14px; font-family: 'Poppins', sans-serif; margin-bottom: 5px; background-color: rgba(255,255,255,0.8); padding: 5px 1%; width: 98%; border:none; border-radius: 3px }
.form textarea { height: 100px }
.form #checkbox input { float: left; width: 5%; vertical-align: top; margin-top: 3px }
.form #checkbox p { font-size: 14px }

.maps { width: 95%; margin: 0 auto 40px }

.margin { padding: 50px; background-color: rgba(64,177,221,0.2); margin: 50px 0 }
.margin li:hover {color:#40b1dd}

footer { margin-top: -20px; padding: 50px 0 0; color: #fff; background-color: #40b1dd; -webkit-box-shadow: inset 0px 28px 52px -24px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 28px 52px -24px rgba(0,0,0,0.75);
box-shadow: inset 0px 28px 52px -24px rgba(0,0,0,0.75);}
footer a { color: #fff }
footer .cl-33 { width: 33.33%; float: left; }
footer .logo-footer { text-align: center; }
footer .logo-footer img { width: 50%; }
footer .txt-r { text-align: right; }
footer .info { background-color: rgba(0,0,0,0.1); margin-top: 30px; padding: 10px 0; font-size: 14px }

.popup { text-align: center; padding: 40px; }
.popup h1 { font-size: 28px;line-height: 1.2; }
.popup img { width: 100%; margin: 20px 0 }
.popup p { font-size: 15px; }
.popup .cta { padding: 10px 30px; transition: all 1s ease 0s; color: #fff; display: inline-block; margin: 20px 2px 0}
.popup .cta:hover { background-color: #0302f5!important; }
#data { width: 50%; max-width: 600px;  }

@media screen and (max-width: 1200px) {
	.parallax-window { min-height: auto }
	.body { padding: 50px 0 }
	.body .divisorio { margin: 7% 0 5% }
	.body .main .img { top: 80px }
}

@media screen and (max-width: 1024px) {
	.icon .box { width: 30% }
	.icon .box h3 { font-size: 1.8vw }
	.main-page .txt { text-align: center; margin: 20px auto 40px; float: none; }
	.main2-page { padding: 10px 0 40px }
	.main2-page .txt { width: 45% }
	.main3-page { text-align: center; }
	.main3-page ul { text-align: left; }
	.cms .box { width: 33.3% }
	.popup { padding: 20px }
}

@media screen and (max-width: 900px){
	#header .menu { display: none; }
	.menu_responsive2 { display: inline-block; text-align: center; position: fixed; top: 10px; right: 10px; 
    background-color: #3a4693;
    height: 60px;
    width: 60px;
    border-radius: 50%; z-index: 10000;}
    .menu_responsive2 #trigger-overlay { padding-top: 7px }
    .menu_responsive2 #trigger-overlay p { font-size: 13px }
    .bg-page { top: 10px}
    #header .logo { text-align: center; width: 100% }
    .main-page .txt { margin-top: 60px }
    .main2-page.appalti .img3 { margin: 0; float: none; width: 80% }
    .main2-page.appalti, .main2-page.form { text-align: center; padding: 0!important; margin-bottom: 30px }
    .main2-page.form .img3 { margin: 0; float: none; width: 80% }
    .main2-page.form .txt .button { position: relative; display: inline-block; margin: 10px 0 0 }
    .percorso { float: none; margin: 20px 0 0; text-align: center; }
}

@media screen and (max-width: 768px) {
	.body .main .txt { width: 88%; text-align: center; }
	.body .main .button { position: relative; left: 0; right: 0; margin: 0 auto; width: 100px; bottom: -28px }
	.body .main .img { position: relative; margin: -130px 0 100px; text-align: center; }
	.body .main .img img { width: 80% }
	.icon .box { width: 46% }
	.icon .box h3 { font-size: 2.4vw }
	footer .cl-33 { text-align: center; width: 100%; float: none; }
	footer .logo-footer img { width: 200px; margin: 30px 0 }
	.parallax-prefooter { padding: 30px 0 50px }
	.circle .contact h3 { font-size: 25px }
	.circle { padding: 14px; width: 200px; height: 200px }
	.circle .contact p { padding-top: 25% }
	.main2-page .txt { width: 85%; float: none; margin: 0 auto; text-align: center; }
	.main2-page .txt .button { left: 0; right: 0; margin: 0 auto; width: 100px }
	.main2-page .img1 { margin: 70px 2% 0 -30px; width: 60% }
	.main2-page .img2 { margin: 25% -4% 0 0; width: 46% }
	.cms .box { width: 50% }
	.dettaglio .img .gallery img { width: 30% }
	.margin { padding: 50px 1% }
	.margin h1, .margin h2 { font-size: 17px }
	
	#data { width: 80% }
}

@media screen and (max-width: 480px) {
	.icon .box { width: 96% }
	.icon .box h3 { font-size: 5vw }
	.icon .box .line { background-size: cover; background-position: center; }
	.icon .txt { width: 90% }
	.mail { font-size: 14px!important; font-weight: bolder; }
	.dettaglio .img .gallery img { width: 48% }

	.cms .box { width: 100% }

	.popup { padding: 10px; }
	.popup p {font-size: 14px}
}