/**/
:root{
	--latecnica-white: #FBFBFF;
	--latecnica-black: #060F15;
	--latecnica-grey: #A6A2A8;
	--latecnica-blue: #254280;
	--latecnica-alt-blue: #286EFF;
	--latecnica-bg-white: #EAE4E3;
	--latecnica-secondary: #D9D3D2;

	--latecnica-font: 'Instrument Sans', sans-serif;
	--latecnica-xxl: 144px;
	--latecnica-xl: 64px;
	--latecnica-l: 40px;
	--latecnica-m: 20px;
	--latecnica-s: 16px;
	--latecnica-xs: 12px;

	--latecnica-xxl-line: 176px;
	--latecnica-xl-line: 72px;
	--latecnica-l-line: 56px;
	--latecnica-m-line: 32px;
	--latecnica-s-line: 24px;
	--latecnica-xs-line: 16px;

	--latecnica-space: 80px;
	--latecnica-space-l: 40px;
	--latecnica-space-s: 16px;
}

/** SPACE **/
.space-pt-s{padding-top:var(--latecnica-space-s);}
.space-pb-s{padding-bottom:var(--latecnica-space-s);}

.space-pt-l{padding-top:var(--latecnica-space-l);}
.space-pb-l{padding-bottom:var(--latecnica-space-l);}

.space-pt{padding-top:var(--latecnica-space);}
.space-pb{padding-bottom:var(--latecnica-space);}

.p-lt-m{padding: 32px;}

/**** COLOR *****/
.white{color: var(--latecnica-white);}
.black{color: var(--latecnica-black);}
.grey{color: var(--latecnica-grey);}
.blue{color: var(--latecnica-blue);}
.alt-blue{color: var(--latecnica-alt-blue);}
.bg-white{background-color: var(--latecnica-bg-white);}
.bg-black{background-color: var(--latecnica-black);}
.bg-grey{background-color: var(--latecnica-secondary);}

svg.white path{
	stroke: var(--latecnica-secondary);
}
svg.black path{
	stroke: var(--latecnica-black);
}

.center{text-align: center;}

/**** Tipografia ****/
.xxl{font-size: var(--latecnica-xxl);line-height: var(--latecnica-xxl-line);}
.xl{font-size: var(--latecnica-xl);font-weight: 400;line-height: var(--latecnica-xl-line);}
.l{font-size: var(--latecnica-l);line-height: var(--latecnica-l-line);}
.m{font-size: var(--latecnica-m);line-height: var(--latecnica-m-line);}
.s{font-size: var(--latecnica-s);line-height: var(--latecnica-s-line);}
.xs{font-size: var(--latecnica-xs);line-height: var(--latecnica-xs-line);}


.line-m{line-height: var(--latecnica-m-line);}
.line-s{line-height: var(--latecnica-s-line);}
.line-xs{line-height: var(--latecnica-xs-line);}

h1,h2,h3,h4,h5,h6,p,span,body{font-family: var(--latecnica-font);}

body {
	overflow-y: visible;
	overflow-x: hidden;
	position: relative;
	height: unset;
}

html {
	overflow-y: scroll;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

html, body {
	margin: 0;
	background-color: var(--latecnica-bg-white);
}

p{font-size: var(--latecnica-s);
	line-height: var(--latecnica-s-line);
}

a{
	text-decoration: none;
	color: var(--latecnica-black);
}

p {
	margin-top: 0;
	margin-bottom: var(--latecnica-xs);
}
h4{
	margin-bottom: var(--latecnica-s);
}

.title-video{
	font-size: var(--latecnica-xl);
}

.rounder-s{
	border-radius: 16px;
}

.title-fire{
	font-size: var(--latecnica-xl);
	position: absolute;
	left: 200px;
}

/*FORM STYLE*/
.control-label{
	font-style: italic;
	padding-bottom: 8px;
}
.form-control{
	background-color: var(--latecnica-white);
	padding: 16px 32px;
	border-radius: 16px;
	border: 0px;
}
.form-control::placeholder{
	font-style: italic;
}

.form-group{
	padding-bottom: 40px;
}

/*** BUTTON ***/
.button{
	width: fit-content;
	border-radius: 28px;
	display: inline-flex;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--latecnica-black);
	text-decoration-line: none!important;
	background-color: transparent;
}

.button:hover{
	background-color: var(--latecnica-black);
	color: var(--latecnica-white);
}

.button:hover svg path {
  stroke: var(--latecnica-white)!important;
}


.button-white{
	border: 1px solid var(--latecnica-white)!important;
	color: var(--latecnica-white);
	text-decoration-line: none!important;
}
.button-white:hover{
	background-color: var(--latecnica-white)!important;
	color: var(--latecnica-black)!important;
}
.button:hover svg path {
  stroke: var(--latecnica-black);
}

.button-white:hover svg path {
  stroke: var(--latecnica-black)!important;
}

.regular-font{
	font-weight: 400;
}

.strong{
	font-weight: bold;
}

.br-mobile{
	display: none;
}

.title-page{
	position: fixed;
	transform: translate(0%, 150%);
	left: 0;
	right: 0;
	text-align: center;
	z-index: 9;
	margin: 0;
}

.corsivo{
	font-style: italic;
}
/********************/

/**SEZ.**/

.full-screen {
  display: block;
  width: 100%;
  /* height: 100vh; */
}

#intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#panels #panels-container {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}
#panels #panels-container .panel {
  align-items: center;
  position: relative;
  min-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#panels #panels-container .panel img {
  max-width: 100%;
  height: auto;
  display: block;
}
#panels #panels-container .panel .panels-navigation {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#panels #panels-container .panel .anchor-panel,
#panels #panels-container .panel .nav-panel {
  color: #000;
  text-transform: uppercase;
  margin-right: 2rem;
}
#panels #panels-container .panels-navigation {
  position: absolute;
  width: 100%;
  bottom: 2rem;
  right: 2rem;
}
.cards-wrapper{
  display:flex;
}
.card{
  width:600px;
}

/******* MENU *******/
.logo-header{
	padding-left: 80px;
	transition: filter 1s ease;
}

#menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	z-index: 99;
	width: 100vw;
	padding: 24px 0px;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	transition: background-color 1s ease, box-shadow 0.7s ease;
}

.action-menu{
	display: flex;
	align-items: center;
	gap: 40px;
	align-self: stretch;
	padding-right: 80px;
}

.open-menu{
	background: transparent;
	border: none;
}

#menusite{
	width: 25%;
	z-index: 999;
	position: fixed;
	height: 100%!important;
	background-color: var(--latecnica-bg-white);
	border-left: 1px solid var(--latecnica-black);
	top: 0;
	right: -25%;
	transition: right 0.3s ease;
}

#menusite.open {
	right: 0;
}

.nav-item:hover{
	background-color: var(--latecnica-secondary);
}

.nav-link:focus, .nav-link:hover{
	color: var(--latecnica-black);
}

.navbar-nav {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.nav-item {
	width: 100%;
	display: flex;
	align-items: center;
	height: inherit;
	border-bottom: 1px solid var(--latecnica-black);
}

.nav-link {
	padding: 0px 80px!important;
	color: var(--latecnica-black);
	text-align: end;
	width: 100%;
}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
}
/********************/

#scroll{
	position: fixed;
	bottom: 150px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 9;
	cursor: pointer;
}

#scroll a{
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

#scroll-mobile{
	position: fixed;
	bottom: 50px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 9;
	cursor: pointer;
}

#content{
	position: relative;
}

#color{
	justify-content: start;
}
#color div:first-of-type{
	padding-right: 40px;
}

/*EFFECT SCROLL MOUSE*/
.scroll-downs {
  position: absolute;
  display: contents;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  width: 24px;
  height: 36px;
}
.mousey {
  width: 2px;
  padding: 10px 12px;
  height: 20px;
  border: 2px solid var(--latecnica-white);
  border-radius: 25px;
  opacity: 1;
  box-sizing: content-box;
}
.scroller {
  width: 2.3px;
  height: 10px;
  border-radius: 25%;
  background-color: var(--latecnica-white);
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

/** Effect white/black **/
.mousey {
  border: 2px solid var(--latecnica-white);
  transition: border-color 0.5s ease; /* Aggiungi una transizione per il cambio del colore del bordo */
}

.scroller {
  background-color: var(--latecnica-white);
  transition: background-color 0.5s ease; /* Aggiungi una transizione per il cambio del colore di sfondo */
}

/* Aggiungi anche le regole per il caso con il colore nero */
.mousey.black {
  border-color: var(--latecnica-black);
}

.scroller.black {
  background-color: var(--latecnica-black);
}

/* Aggiungi la transizione per il cambio di colore dello span */
#scroll-link span {
  transition: color 0.5s ease;
}

/* Aggiungi anche le regole per il caso con il colore nero */
#scroll-link span.black {
  color: var(--latecnica-black);
}


/**/

.horizontal-scroll {
	width: 400vw;
	height: 100vh;
	display: flex;
	flex-wrap: nowrap;
}

.rollfire-bg{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-image: url('src/img/rollfire-open.webp');
	background-repeat: no-repeat;
	background-size: cover;
}

.rollfire-bg-2{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-image: url('src/img/latecnica-full.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.video-fire{
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/**/
.svg-mask {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 0;
}
.clipped-content-mask {
  width: 100vw;
  height: 100vh;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
  z-index: 0;
}

.section-pop{
	margin-top: 100px;
	display: flex;
	align-self: center;
}

.column{
	display: flex;
	height: 550px;
	flex-direction: column;
	justify-content: flex-end;
	align-items: start;
	flex-shrink: 0;
	border-radius: 20px;
	margin: 0 10px;
	background-size: cover!important;
}

.column-xl{
	display: flex;
	height: 550px;
	flex-direction: column;
	justify-content: flex-end;
	align-items: start;
	flex-shrink: 0;
	border-radius: 20px;
	margin: 0 10px;
	background-size: cover!important;
}

.section-1{
	background: url('src/img/distanziatore-sicurezza.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;
}

.section-2{
	background: url('src/img/diversi-contenuti.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;
	background-position: center;
}

.section-3{
	background: url('src/img/latecnica_Rosso.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;
	background-position-x: 12%;
}

.section-4{
	background: url('src/img/color-comple.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;/*src/img/complemento-arredo.png*/
	background-position-y: top;
}

.section-5{
	background: url('src/img/rollfire-open.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;/*src/img/diversi-colori.png*/
	background-position-y: center;
}

.section-6{
	background: url('src/img/ampia-capienza.webp'), lightgray -53.916px 0px / 203.575% 100% no-repeat;/*src/img/diversi-colori.png*/
}

.plus{
	display: flex;
	position: absolute;
	padding: 12px;
	align-items: flex-start;
	gap: 6px;
	border-radius: 18px;
	background: var(--latecnica-white);
	margin: 0px 0px 24px 24px;
}


/********************/
/******  POPUP ******/
/********************/
.popup {
	display: none;
	background-color: #fff;
	margin-top: auto;
	z-index: 1;
	border-radius: 16px;
	width: -webkit-fill-available;
}

.icon-close{
	text-align: start;
	margin-top: 15px;
}

.icon-close svg{
	border: 1px solid;
	border-radius: 100%;
	padding: 10px;
}
#closeButton{
	border: 1px solid;
	border-radius: 50px;
	padding: 10px;
}

.popup-content {
	text-align: center;
	padding: 25px 25px;
}

.text-content{
	text-align: start;
}

#openButton:hover {
	cursor: pointer;
}

#closeButton:hover {
	cursor: pointer;
}
/********************/

/********************/
/*** CARD PRODUCT ***/
/********************/

.icon-product-left-40{
	margin-left: -40px;
}
.icon-product-left-20{
	margin-left: -20px;
}

#product-info{
	margin-top: -350px;
}

.card-product{
	background-color: var(--latecnica-bg-white);
	border-radius: 16px;
	padding: 24px;
}

.card-product img{
	padding-bottom:35px;
}

.title-card-product{
	color: var(--latecnica-black);
	font-style: italic;
	font-weight: bold;
	font-size: var(--latecnica-m);
	line-height: var(--latecnica-m-line);
}
.desc-card-product{
	font-size: var(--latecnica-xs);
	line-height: var(--latecnica-xs-line);
}


#thumbnail-product .col-md-3{
	padding-bottom: 20px;
	padding-top: 20px;
}

#palette-colori{
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

/****** SEZIONE AZIENDA ******/
#azienda{
	background-color: var(--latecnica-white);
}
.expandable-video video {
	width: 100%;
	overflow: hidden;
  }
.expandable-video{
	display: flex;
	align-items: center;
	justify-content: center;
}

.after-video-azienda{
	margin-top: -200px;
}

/*** SEZIONE CONTATTI ***/

.after-image-contatti{
	margin-top: -200px;
}

/********************/
/****** FOOTER ******/
/********************/

#footer a{
	color: var(--latecnica-white);
	text-decoration-line: underline;
}

#social-footer{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-right: 20%;
}

#privacy-footer{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	align-self: stretch;
}
/********************/


/** RESPONSIVE HEIGHT**/
@media (max-height: 1100px){
	.title-page{
		top: 0px;
	}
	#scroll{
		bottom: 100px;
	}

	#product-info{
		margin-top: -200px;
	}
}

@media (max-height: 900px){
	.title-page {
		top: -80px;
	}
	#scroll{
		bottom: 50px;
	}

	#product-info{
		margin-top: -50px;
	}
}
@media (max-height: 700px){
	#product-info{
		margin-top: -50px;
	}
}
@media (max-height: 600px){
	#product-info{
		margin-top: -100px;
	}
}
@media (max-height: 500px){
	#product-info{
		margin-top: 0px;
	}
}

/** RESPONSIVE PC **/

@media (max-width:1024px){
	/**/
	:root{
		--latecnica-xxl: 144px;
		--latecnica-xl: 40px;
		--latecnica-l: 24px;
		--latecnica-m: 18px;
		--latecnica-s: 16px;
		--latecnica-xs: 14px;

		--latecnica-xxl-line: 176px;
		--latecnica-xl-line: 40px;
		--latecnica-l-line: 24px;
		--latecnica-m-line: 24px;
		--latecnica-s-line: 24px;
		--latecnica-xs-line: 20px;
	}

	.title-fire{
		font-size: var(--latecnica-xl);
		position: absolute;
		left: 150px;
	}

	.icon-product-left-40{
		margin-left: -20px;
	}
	.icon-product-left-20{
		margin-left: -40px;
	}

	/*** SEZIONE AZIENDA ***/
	.after-video-azienda{
		margin-top: -100px;
	}

	/*** SEZIONE CONTATTI ***/

	.after-image-contatti{
		margin-top: -100px;
	}
}

/** RESPONSIVE TABLET **/
@media (max-width:768px){
	/**/
	:root{
		--latecnica-xxl: 64px;
		--latecnica-xl: 40px;
		--latecnica-l: 20px;
		--latecnica-m: 16px;
		--latecnica-s: 12px;
		--latecnica-xs: 12px;

		--latecnica-xxl-line: 176px;
		--latecnica-xl-line: 72px;
		--latecnica-l-line: 56px;
		--latecnica-m-line: 32px;
		--latecnica-s-line: 24px;
		--latecnica-xs-line: 16px;

		--latecnica-space: 80px;
		--latecnica-space-l: 40px;
		--latecnica-space-s: 16px;
	}

	/********/
	.title-fire{
		position: relative;
		top: 45vh;
		left: 8px;
	}

	.title-page{
		position: absolute;
	}

	.p-md-0 {
		padding: 0 !important;
	  }

	.title-video{
		font-size: var(--latecnica-l);
	}

	#scroll{
		bottom: 20px;
	}

	.clipped-content-mask{
		clip-path: none;
	}

	/**SEZ.**/
	#panels-container{
		width: 100%!important;
	}

	#panels #panels-container{
		overflow: visible !important;
		height: 100%!important;
		display: block;
	}
	#panels #panels-container .panel{
		min-width: 100%!important;
		height: 100%!important;
	}

	#product-info{
		margin-top: var(--latecnica-space);
	}

	#panel-2{
		padding-top: 100vh!important;
	}

	.column{
		height: 380px;
		margin: 20px 10px;
	}

	.space-first-column-mobile{
		padding-top:var(--latecnica-space);
	}
	.space-last-column-mobile{
		padding-bottom: var(--latecnica-space);
	}

	/*******/

	.after-video-azienda{
		margin-top: -20px;
	}
	.after-image-contatti{
		margin-top: -20px;
	}

	.br-mobile{
		display: block;
	}
	/**********/

	.clipped-content-mask{
		margin-top: -200px;
	}

	.horizontal-scroll {
		width: 100%;
	}

	/******* MENU *******/
	#menusite{
		width: 70%!important;
	}

	.section-video{
		padding-bottom: 50px!important;
		padding-top: 50px!important;
	}
}

@media (max-height: 878px){
	.column,.column-xl{
		height: 400px;
	}
}

/** RESPONSIVE MOBILE **/
@media (max-width:430px){

	/**/
	:root{
		--latecnica-xxl: 40px;
		--latecnica-xl: 40px;
		--latecnica-l: 24px;
		--latecnica-m: 18px;
		--latecnica-s: 16px;
		--latecnica-xs: 14px;

		--latecnica-xxl-line: 56px;
		--latecnica-xl-line: 56px;
		--latecnica-l-line: 32px;
		--latecnica-m-line: 24px;
		--latecnica-s-line: 24px;
		--latecnica-xs-line: 24px;

		--latecnica-space: 40px;
		--latecnica-space-l: 20px;
		--latecnica-space-s: 12px;
	}

	/******* MENU *******/
	.logo-header{
		padding-left: 16px;
		z-index: 9999;
		position: relative;
	}
	.action-menu{
		padding-right: 16px;
	}

	#menusite{
		width: 100%!important;
	}

	.nav-link{
		padding: 16px!important;
	}

	.title-page{
		top: 100px;
	}

	.logo-footer{
		text-align: center;
	}
	#privacy-footer{
		gap: 50px;
	}
}

/** CUSTOM RESPONSIVE **/