@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700&display=swap');

body {
	margin: 0;
	padding: 0;
  }


  /*************** SCROLL ***********/
  html {
    scroll-behavior: smooth;
  }
  #about {
    scroll-margin-top: 70px;
  }
  #prodotti {
    scroll-margin-top: 50px;
  }
  #contatti {
    scroll-margin-top: 80px;
  }
  /***************. SCROLL ***********/




/****** TEST DIAGONALE *********/

.omarlift-block {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #f8f8f8;
  overflow: hidden;
}

.omarlift-image-container {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.omarlift-image {
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: 0;
  left: 0;
  transform: rotate(-15deg);
  overflow: hidden;
}

.omarlift-image img {
  width: 100%;
  height: auto;
  transform: rotate(15deg);
}

.omarlift-image1 {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  z-index: 2;
}

.omarlift-image2 {
  clip-path: polygon(0 100%, 100% 0, 0 0);
  z-index: 1;
}

.omarlift-title {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.omarlift-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70%;
  font-size: 18px;
  text-align: justify;
  color: #fff;
}



/****** .TEST DIAGONALE ********/



.bg-light {
   background-color:rgba(255,255,255,1)!important;
}

.carousel-control-next, .carousel-control-prev {
	background-color: rgba(0, 0, 0, 0.0);
	border-width: 0px;
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
	background-color: rgba(0, 0, 0, 0.0);
	border-width: 0px;
}

.carousel,
.carousel-item,
.carousel-inner {
  height: 900px !important; /* aumenta l'altezza */
  width: 100% !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/******* EFFETTO HOVER SU BOOTSTRAP CAROUSEL *******/

.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 2, 2, 0.8);
    transition: transform 1s ease-in-out; /* Modificato il valore di durata a 1s */
}

.carousel-item:hover::before {
    transform: translateX(100%);
}

.carousel-item:hover::after {
    content: 'Scopri la destinazione';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    font-weight: 300;
}
	
/******* FINE EFFETTO HOVER SU CAROUSEL ******/

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.LV_valid {
    color: #9e9e9e!important;   
}

#contenitoreCaptcha {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    margin-top: 5px;
}

/********** EFFETTO NUOVO SU MENU NAVIGAZIONE *********************/

.menu-effetto {
    position: relative;
    display: inline-block;
    color: #000;
    text-decoration: none;
	background-color: transparent; /* trasparente all'inizio */
}

.menu-effetto::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #000;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.menu-effetto:hover::before {
    transform: scaleX(1);
}

/* Imposta lo sfondo del menu su trasparente */
#mynavbar {
    background-color: transparent !important;
    transition: background-color 0.8s;
  }

  /* Imposta il colore del testo del menu su bianco */
  #mynavbar .nav-link {
    color: #fff !important;
  }

  /* Imposta il colore dell'effetto al passaggio del mouse sui link del menu */
  #mynavbar .menu-effetto::before {
    background-color: #fff;
  }

  /* Imposta lo sfondo del menu su bianco quando si verifica lo scroll */
  #mynavbar.scrolled {
    background-color: #fff !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  /* Imposta il colore del testo del menu su nero quando lo sfondo è bianco */
  #mynavbar.scrolled .nav-link {
    color: #000 !important;
  }

  /* Imposta il colore dell'effetto al passaggio del mouse sui link del menu quando lo sfondo è bianco */
  #mynavbar.scrolled .menu-effetto::before {
    background-color: #000;
  }

/********** SOTTOLINEATURA MENU NAVIGAZIONE ***********************/

.navbar-collapse {
  align-items: baseline;
  width: 100%;
}

li#pulsanteMenu {
text-align:center;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	margin-top:0px;
	letter-spacing:0.5px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	padding-bottom:12px;
	border-bottom-style:solid;
	border-bottom-width:5px;
	border-bottom-color:#fff;
}

li#pulsanteMenu a{
 
	color:#444746;
		-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

li#pulsanteMenu.selezionato{
	color:#1439ab;
	border-bottom-style:solid;
	border-bottom-width:5px;
	border-bottom-color:#b7d13c; /* colore linea sottolineata */
	padding-bottom:12px;
}

li#pulsanteMenu:hover{
	color:#8f8e89;
	border-bottom-style:solid;
	border-bottom-width:5px;
	border-bottom-color:#b7d13c; /* colore linea sottolineata on hover*/
	padding-bottom:12px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

/********** FINE SOTTOLINEATURA MENU NAVIGAZIONE ***********************/

/********** ICONE SLIDER PREV NEXY *******************************/


.carousel-control-prev-icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

/********** FINE FOTO A TUTTA ALTEZZA *******************************/

#logo-mobile{
	margin-top:15px;
	width:194px;
	}

#logo-desktop{
	width:194px;
	}

.immagine-sfondo-home {
  background-image: url('/images/sfondo.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
}

/* Nascondi sui dispositivi mobile */
@media (max-width:768px) {
      .immagine-sfondo-home {
        background-image: none;
	    padding-top:0px;
        padding-bottom:0px;
    }
}

.sfondo-home-01 {
  background-image: url('images/tematel-sistemi-01.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
  height:680px;
}

@media (max-width:960px) {
      .sfondo-home-01 {
	     background-image: none;
		 margin-top: 80px;
		 margin-bottom: 80px;
		 height: 0px;
    }
}

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


@media (max-width:960px) {
    .img_mobile {
	   display:block;
    }
}

/******** CARD ********************/

.card:hover img {
    filter: grayscale(50%) brightness(70%);
    transition: all 0.8s ease-in-out;
}

.card:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease-in-out;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 0px;
    border-radius: 0rem;
}

/***************** .CARD ***************/







.sfondo-home-02 {
  background-image: url('images/tematel-sistemi-02.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
  height:680px;
}

.sfondo-azienda-01 {
  background-image: url('images/tematel-sistemi-azienda-01.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
  height:680px;
}

.sfondo-azienda-02 {
  background-image: url('/images/tematel-sistemi-azienda-02.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
  height:1000px;
}

/* Nascondi sui dispositivi mobile */
@media (max-width:768px) {
      .immagine-sfondo-azienda {
        background-image: none;
	    padding-top:0px;
        padding-bottom:0px;
    }
}

.immagine-sfondo-residential {
  background-image: url('/images/sfondo-residential.jpg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
}

@media screen and (min-width: 768px) {
  div.example {
    display: none;
  }
}

.sfondo-colonna  {
  background-image: url("/images/sfondo_muro.jpg");
  padding-top: 90px!important;
  padding-bottom: 90px!important;
}

/******************************************** LOGO DESKTOP E MOBILE *************************************/
#logo-desktop {display:block;}
#logo-mobile {display:none}

@media all and (max-width:993px) {
    #logo-desktop {display: none;}
    #logo-mobile {display: block;}
}



/********************** TASTO DISCOVER MORE ***********************************/

.discover-more {
	font-family: 'Barlow', sans-serif;
	font-size:21px;
	color:#111;
	font-weight:500;
	line-height:24px;
}

a.discover-more {
	position: relative;
	text-decoration: none;
	color:#111;
  }
  
  a.discover-more:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 19;
	left: 0;
	width: 30%;
	height: 2px;
	background-color: black;
	transition: width 0.5s ease-out;
  }
  
  a.discover-more:hover:after {
	width: 100%;
  }
  
/********************** .TASTO DISCOVER MORE ***********************************/



/********************** EFFETTO SU FOTO MOSAICO ***********************************/

.mosaic-img {
    position: relative;
}

.mosaic-img img {
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mosaic-img:hover img {
    filter: brightness(30%);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mosaic-img:hover:after {
    content: "SCOPRI";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
}

.mosaic-img:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color:#32a1aa;
    transition: all 1.3s ease-in-out;
}

.mosaic-img:hover:before {
    width: 100%;
}

/********************** .EFFETTO SU FOTO MOSAICO ***********************************/


/********************** .EFFETTO HOVER SU OWL CAROUSEL ***********************************/

.owl-carousel .owl-item {
  position: relative;
  overflow: hidden;
}

.owl-carousel .owl-item img {
  transition: transform 0.3s ease-out;
}

.owl-carousel .owl-item:hover img {
  transform: scale(1.2);
}

/********************** .EFFETTO HOVER SU OWL CAROUSEL ***********************************/






/****************************** PUNTI DI NAVIAZIONE OWL CAROUSEL **************************/
.owl-dots {
	display: flex;
	justify-content: center;
	margin-top: 20px;
  }
  
  .owl-dot {
	width: 12px!important;
	height: 12px!important;
	margin-top: 15px!important;
	margin-bottom: 35px!important;
	margin-left: 5px!important;
	margin-right: 5px!important;
	border-radius: 50%!important;
	background-color: #e0e0e0!important;
	transition: background-color 0.3s ease-in-out!important;
	border-color: #fff;
  }
  
  .owl-dot.active, .owl-dot:hover {
	background-color: #32a1aa!important;
  }

  button:focus {
    outline: dotted 1px;
    outline: -webkit-focus-ring-color auto 0px!important;
}
/****************************** PUNTI DI NAVIAZIONE OWL CAROUSEL **************************/



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

.footer {
		background: #eee;
}

.titolo-footer {
	font-family: 'Barlow', sans-serif;
	font-size:18px;
	color:#111;
	font-weight:400;
	line-height:24px;
}

.testo-footer {
	font-family: 'Barlow', sans-serif;
	font-size:12px;
	color:#333;
	font-weight:400;
	line-height:24px;
}

/* Imposta il colore delle icone */
.bi-facebook, .bi-instagram {
	color: #646464;
  }
  .bi-envelope {
	color: #646464;
  }
  
  /* Cambia la dimensione delle icone */
  .bi {
	font-size: 1.4rem;
	color: #646464;
  }

  .icon-footer i {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
  }
  
  .icon-footer i:hover {
	opacity: 0.5;
  }

/******************** .FOOTER **************/


.img-scambia {
  position: relative;
  overflow: hidden;
}



.img-scambia img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-scambia img:first-child {
  opacity: 1;
}

.img-scambia:hover img:first-child {
  opacity: 0;
}

.img-scambia:hover img:last-child {
  opacity: 1;
}

/********************** IMMAGINE A TUTTA LARGHEZZA OVERLAY ****************************/

.image-overlay {
	position: relative;
	width: 100%;
	height: auto;
  }
  
  .image-overlay img {
	display: block;
	width: 100%;
	height: auto;
  }
  
  .overlay-text {
	position: absolute;
	top: 38%;
	left: 30%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
  }
  
  .overlay-text h1 {
	font-size: 4rem;
	margin: 0;
	text-transform: uppercase;
  }
  
  .overlay-text p {
	font-size: 2.5rem;
	margin: 0;
	text-transform: uppercase;
  }

/*************************** .IMMAGINE A TUTTA LARGHEZZA OVERLAY ****************************/

h2 {
	font-family: 'Barlow', sans-serif;
	font-size:50px;
	color:#111;
	font-weight:500;
}

h3 {
	font-family: 'Barlow', sans-serif;
	font-size:35px;
	font-weight:300;
}

@media (max-width:993px) {
h2 {
	font-family: 'Barlow', sans-serif;
	font-size:30px;
	color:#111;
	font-weight:700;
}
}


.testo-mosaico {
	font-family: 'Barlow', sans-serif;
	font-size:24px;
	color:#111;
}
@media (max-width:1400px) {
.testo-mosaico {
	font-family: 'Barlow', sans-serif;
	font-size:18px;
	color:#111;
}
}

.titolo {
	font-family: 'Barlow', sans-serif;
	font-size:45px;
	color:#111;
}

@media (max-width:993px) {
.titolo {
	font-family: 'Barlow', sans-serif;
	font-size:30px;
	color:#111;
}
}

.sottotitolo {
	font-family: 'Barlow', sans-serif;
	font-size:24px;
	color:#111;
}

.testo {
	font-family: 'Barlow', sans-serif;
	font-size:14px;
	color:#111;
	font-weight:400;
	line-height:24px;
}

.titolo-blocco {
	font-family: 'Barlow', sans-serif;
	font-size:33px;
	color:#333333;
	font-weight:400;
	line-height:41px;
}

.paragrafo-blocco {
	font-family: 'Barlow', sans-serif;
	font-size:24px;
	color:#333333;
	font-weight:400;
	line-height:33px;
}

.titolo-introduzione {
	font-family: 'Barlow', sans-serif;
	font-size:45px;
	color:#333333;
	font-weight:400;
	line-height:70px;
	text-transform: uppercase;
}

.titolo-introduzione-colore {
	font-family: 'Barlow', sans-serif;
	font-size:45px;
	color:#32a1aa;
	font-weight:400;
	text-transform: uppercase;
	line-height:70px;
}

.testo-introduzione {
	font-family: 'Barlow', sans-serif;
	font-size:28px;
	color:#333333;
	font-weight:400;
	line-height:38px;
}


.titolo-icona {
	font-family: 'Barlow', sans-serif;
	font-size:19px;
	color:#111;
	font-weight:500;
	line-height:24px;
}



.vertical-line {
  border-left: 3px solid #b7d13c;
  height: 25px;
}

.testo-privacy {
	font-family: 'Barlow', sans-serif;
	font-size:14px;
	color:#b7d13c;
	font-weight:600;
}

.testo-privacy:hover { color: #0b2e9b; }

.modal-box {
	font-family: 'Barlow', sans-serif;
	font-size:13px;
	color:#111;
	font-weight:400;
	line-height:21px;
}

.testo-pulsanti {
	font-family: 'Barlow', sans-serif;
	font-size:16px;
	color:#fff;
	font-weight:700;
    text-decoration: none;
}

#chiudiCookieNonaccetto a {
    position: relative;
    width: 210px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #f1592a;
    text-align: center;
    color: #FFF;
    padding: 10px;
}

/************************************************************** FORM CONTATTI *******************************************************/

.LV_validation_message {
	color:#C00;
	font-size:12px;
	padding-left:5px;
	display:block;
}