/* LESS Document */

@import (less) "parametri.less";

.container {width: 95%; .centrato; .relative; max-width:1284px;}

@gap : 15px;

.row {.flex; gap:30px; align-items: center;
	@media @1280 {align-items: stretch}
	
	&.gap14 {gap:14px;}
	&.start {align-items: flex-start;}
	&.stretch {align-items: stretch;}
}
.md-wrap {
	@media @769 {flex-wrap: wrap;  gap:0px; column-gap: 0; grid-row-gap: 30px;}
}
.sd-wrap {
	@media @769 {flex-wrap: wrap;  gap:0px; column-gap: 0; grid-row-gap: 30px;}
}

.col1 {width: calc(100% - @gap)}
.col2 {width: calc(100% / 12 * 2  - @gap)}
.col3 {width: calc(25% - @gap)}
.col4 {width: calc(100% / 12 * 4  - @gap)}
.col5 {width: calc(100% / 12 * 5 - @gap)}
.col6 {width: calc(50% - @gap)}
.col7 {width: calc(100% / 12 * 7 - @gap)}
.col8 {width: calc(100% / 12 * 8  - @gap)}

.md-col1 {
	@media @769 {width: 100%}
}
.md-col4 {
	@media @769 {width: calc(100% / 12 * 4  - @gap)}
}
.md-col8 {
	@media @769 {width: calc(100% / 12 * 8  - @gap)}
}

.sd-col1 {
	@media @750 {width: 100%}
}
.sd-col6 {
	@media @750 {width: calc(50% - @gap)}
}
.pt25 {padding-top: 25px !important;}
.mt66 {margin-top: 66px !important;}
.mt50 {margin-top: 50px !important;}
.mt20 {margin-top: 20px !important;}
.mb60 {margin-bottom: 60px !important;}

.md-mt0 {
	@media @769 {margin-top: 0px !important;}
}

h2 {.jakartaextra; line-height: 40px; font-size: 35px;color: @darkgreen;
	@media @750 {text-align: center}
}
h3 {.jakartabold; font-size: 24px; color: @darkgreen;}
h4 {.jakartabold; font-size: 20px; color: @darkgreen;}
p {color: @textprimary; line-height: 24px; font-size: 18px; margin-top: 30px;
	.evi {.jakartabold; color: @green}
}

/* Customize the label (the container) */
.containerradio { display: block; position: relative; padding-left: 45px; margin-bottom: 11px; cursor: pointer; .jakarta; color: @textprimary; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default checkbox */
.containerradio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}

/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: @white;}

/* On mouse-over, add a grey background color */
.containerradio:hover input ~ .checkmark { background-color: @green3;}

/* When the checkbox is checked, add a blue background */
.containerradio input:checked ~ .checkmark { background-color: @green3;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.containerradio input:checked ~ .checkmark:after { display: block;}

/* Style the checkmark/indicator */
.containerradio .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

input[type=text], input[type=email],  textarea {padding: 18px 35px; border: 0; background-color: white; border-radius: 10px; width: 100%; .jakarta; color: @textprimary; font-size: 20px; }


.custom-select { position: relative; .jakarta; width: 100%; font-size: 20px}

.custom-select select { display: none; /*hide original SELECT element: */}

.select-selected { background-color: @white; color: @textprimary;}

/* Style the arrow inside the select element: */
.select-selected:after { position: absolute; content: ""; top: 21px; right: 28px; width: 12px; height: 12px; border-bottom: 2px solid @darkgrey; border-right: 2px solid @darkgrey; -webkit-transform: rotate(45deg); transform: rotate(45deg); 
}
.select-selected.select-arrow-active {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.select-selected.select-arrow-active:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 27px }

/* Point the arrow upwards when the select box is open (active): */
/*.select-selected.select-arrow-active:after { border-color: transparent transparent @textprimary transparent; top: 7px;}*/

/* style the items (options), including the selected item: */
.select-items div,.select-selected { color: @darkgrey; padding: 18px 35px; border-radius: 10px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer;}
.select-items div {color: @textprimary; border-radius: 0}
/* Style items (options): */
.select-items {     position: absolute; background-color: #fff; top: calc(100% - 2px); left: 0; right: 0; z-index: 99; padding: 15px 36px;}

/* Hide the items when the select box is closed: */
.select-hide { display: none;}

.select-items div:hover, .same-as-selected { background-color: @lightgreen; border-radius: 0;}

::placeholder { color: @darkgrey; opacity: 1; }

::-ms-input-placeholder { color: @darkgrey;}

.sottotitolo {color: @darkgrey; .jakartabold; font-size: 20px;
	@media @750 {text-align: center;}
}

section {margin-top: 100px}

.pulsante {color: @white; .jakartabold; font-size: 22px; .textcenter; .inline-block; min-width: 232px; padding: 18px 10px; border-radius: 64px; background-color: @green3; border:0; .pointer}

header {.fixed; top: 0; right: 0; width: 100%; .boxshadow (0px, 4px, 4px, 0px, 0.25); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: 2; background-color: @white;
	.conthead {padding: 25.5px 0; max-width: 1413px; .centrato; .flex;  justify-content: space-between;  align-items: center;
		.logo {padding-left: 39px;
			img {
				@media @750 {max-width: 160px;}
			}
		}
		.menu {
			@media @1024 {.none}
			ul {
				li {.inline-block; padding: 0 30px;
					a {color: @darkgreen; .jakartabold; .size(18px); line-height: 44px;}
					&.evidenziato {background-color: @orange; border-radius: 80px; margin-left: 30px; margin-right: 0;
						a {color: @white}
					}
				}
			}
		}
		.menumobile {.none; padding: 0 30px; .relative;
			@media @1024 {.block}
			ul {.none; .absolute;  background-color: @white; padding: 10px; top: 100%; .boxshadow (0px, 4px, 4px, 0px, 0.25); border-radius: 15px; right: 10px;  min-width: 204px;
				li {.block; padding: 10px 20px;
					a {color: @darkgreen; .jakartabold; .size(18px); }
				}
			}
		}
	}
}

.visual {width: 100%; margin-top: 127px; background-image:url("/immagini/bisarche.png"); background-repeat: no-repeat; background-position: right 144px; height: 878px;
	@media @1024 {background-position: right bottom;}
	@media @750 {background-size: 80%; height: 885px; background-image: none}
	@media @736 {height: 1608px;}
	.contclaim {max-width: 1280px; top: 144px; .centrato; .relative; width: 95%;
		@media @750 {text-align: center; top: 80px}
		h2 {
			img {margin-left: 12px;}
		}
		.sottotitolo {color: @green3; .jakartabold; .size(18px); margin-top: 10px;
			span {.inline-block;
				@media @413 {.block}
				&:last-child {margin-left: 41px;
					@media @413 {margin-left: 0}
				}
				&::before {content: url("/immagini/check.svg"); margin-right: 4px; top: 4px;  .relative;}
			}
		}
	}
}

.perche {margin-top: 50px; align-items: flex-start;
	.col4 {text-align: center;
		img {height: 171px; width: auto; margin-bottom: 30px}
	}
}
.come {margin-top: 50px; align-items: flex-start;
	.col4 {text-align: center;
		.number {color: @darkgreen;.jakartabold; font-size: 22px; .textcenter; height: 50px; width: 50px; background-color: @lightgreen; line-height: 50px; .inline-block; border-radius: 25px; .boxshadow (0px, 4px, 4px, 0px, 0.25); margin-bottom: 20px}
		p {margin-top: 20px}
	}
}
.boxgreen {background-color: @green2;  .boxshadow (0px, 4px, 4px, 0px, 0.25); width: 100%; padding: 33px 46px; .flex; column-gap: 32px; border-radius: 10px; align-items: flex-start;
	@media @413 {padding: 33px 20px;}
	h4 {color: @green; font-size: 22px;}
	p {margin-top: 12px;}
}
.servizi {margin-top: 50px; align-items: flex-start;
	@media @750 {text-align: center;}
	.col4 {
		img {margin-bottom: 16px}
	}
}
.contattaci {
	@media @413 {gap:0}
	span {.inline-block; font-size: 20px; .jakartabold; color: @green3; margin-right: 20px;
		@media @413 {margin-right: 0; margin-bottom: 10px; .block;}
	}
	.pulsante {min-width: 171px;}
	.textright {
		@media @413 {text-align: center !important}
	}
	.col1 {
		@media @413 {width: 100%}
	}
}
.review {
	.slide {background-color: @white; .boxshadow (0px, 4px, 4px, 0px, 0.25); padding: 42px; border-radius: 10px; margin: 10px 5px; border: 1px solid @grey; transform: scale(0.8); transition: transform 0.3s; .textcenter; min-height: 487px;
		
		&.slick-center {transform: scale(1);}
		.stelline {.centrato; .inline-block; margin-bottom: 50px; }
		p {margin-top: 50px;}
	}
	.slick-arrow {.absolute; .forzacentrav; height: 38px; width: 38px; background-color: @lightgreen; border-radius: 19px; .textcenter; z-index: 1; .pointer;
		&.slick-prev {left: 0;}
		&.slick-next {right: 0}
		img {.relative; .forzacentrav;}
	}
}
.contform {background-color: @lightgreen; .boxshadow (0px, 4px, 4px, 0px, 0.25); border-radius: 20px; padding: 47px 75px 3px;
	@media @750 {padding: 30px 34px 3px;}
	.row {margin-bottom: 15px;}
}
.contindirizzo {padding-left: 170px;
	@media @769 {padding: 0}
	.row {margin-bottom: 20px;}
	.col1 {.flex; column-gap: 21px; align-items: center;}
	a {color: @textprimary}
}

footer {width: 100%; background-color: @darkgreen; margin-top: 172px; padding: 80px 0;
	@media @414 {padding: 80px 0 119px;}
	@media @413 {margin-top: 80px;}
	.footercontainer {max-width: 1413px; width: 95%; .centrato; color: @white;
		a {color: @white; font-size: 14px;}
		.row {gap:157px; align-items: flex-start;
			@media @769 {gap:30px;}
		}
		p {font-size: 14px; color: @white}
		h4 {color: @white}
		nav {margin-top: 16px;
			ul {margin: 0; padding: 0;
				li {.block; margin: 12px 0;}
			}
		}
		.indfooter {.flex;  column-gap: 21px;  align-items: center; margin: 10px 0;
			
			.ico img {filter: brightness(100)}
			.testo {font-size: 14px; color: @white}
		}
	}
}
.preventivatoreiframe {width: 100%;  max-width: 650px;  margin-top: 21px;  min-height: 613px;
	@media @736 {max-width: 400px; min-height: 1318px;}
	@media @414 {}
}
.whatsappbox {.fixed; right:51px; bottom: 20px; .flex; border:1px solid @grey; color: @textprimary; font-size: 18px; border-radius: 10px; padding: 12px 17px 3px 25px; column-gap: 6px; background-color: @white; z-index: 2;
	@media @414 {right: 20px;}
	a {color: @textprimary;}
}