@charset "UTF-8";
/* CSS Document */

body,
h1,
h2,
h3,
h4,
h5,
p {
   font-family: "Montserrat", sans-serif;
}

// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.rozha-one-regular {
  font-family: "Rozha One", serif;
  font-weight: 400;
  font-style: normal;
}
.nav-flot{
  padding: 2rem;
}
.navbar{
  background-color: #fff!important;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 10px 0px #1e1e1e6b;
}
.logo-nav{
  max-width: 150px;
  min-width: 150px
}

.nav-link {
    font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #1e1e1e;
    font-weight: 600;
    text-decoration: none;
    margin-right: 2rem;
    margin-left: 2rem;
}
.link-dx {
    font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #1e1e1e;
    font-weight: 600;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

/*-----------------------------------Video Back----------------------------------------------*/
.box-video{
  padding: 15rem;
  transition-duration: 2s;
  padding-top: 8rem;
  padding-bottom: 0px;
}
.box-video.scrolled {
  padding-left: 0rem;
  padding-right: 0rem;
  transition-duration: 2s;
  margin-top:-30rem;
  padding-bottom: 0px;
  
}

.video-background-holder {
    position: relative;
    background-color: #222222;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
    border-radius:0rem;
   transition-duration: 2s;
}
.video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.video-background-content {
    position: relative;
    z-index: 2;
}
.video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    z-index: 1;
}

.sfumatura{
  position: absolute;
  bottom:0px;
}
.partner{
  max-width: 50%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/*-----------------------------------Fine Video Back----------------------------------------------*/
.box-title{
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 14%;
}
.txt-intro{
  font-size: calc(24px + ( 54 - 24)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(26px + ( 60 - 26)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  text-transform: uppercase;
}


.sfondo-intro{
  background-image: url(../img/sfondo-intro.svg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.sfondo-scritte{
  background-image: url(../img/sfondo-scritte.svg);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.box-foto{
  padding-top: 5%;
  padding-left: 10%;
}
.box-foto2{
  padding-top: 20%;
}
.box-txt{
  padding-top: 5%;
  padding-right: 10%;
  padding-left: 3%;

}
.txt{
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  font-size: calc(16px + ( 22 - 16)*((100vw - 300px) /(1920 - 300)));
  color: #1e1e1e;
}
.call{
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  font-size: calc(16px + ( 22 - 16)*((100vw - 300px) /(1920 - 300)));
  color: #1e1e1e;
  font-weight: 600;
}
.btn-call{
  background-color: #d8f074;
  border: 0px solid #d8f074;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  color:#1e1e1e;
}
.title-h1{
  font-size: calc(14px + ( 24 - 14)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 28 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 600;
  text-transform: uppercase;
}
.title-h2{
  text-align: center;
  font-size: calc(20px + ( 54 - 20)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 60 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  text-transform: uppercase;
}
.box-titolo{
  padding-top: 10%;
  padding-bottom: 10%;
}
.centro{
  max-width: 90%;

}
.sx{
  max-width: 70%;
  
}
.sp-marchi{
  padding-top: 3rem;
  padding-bottom:1rem
}
.txt-sez{
  font-size: calc(16px + ( 54 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 60 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  text-transform: uppercase;
  padding-left: 3rem;
}
.txt-sez-sx{
  font-size: calc(16px + ( 54 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 60 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  text-transform: uppercase;
  padding-top: 20%;
}

.dx{
  max-width: 55%;
}

.txt-sez-dx{
  font-size: calc(16px + ( 54 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 60 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  text-transform: uppercase;
  padding-top: 50%;
}
.voce-riga{
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  font-size: calc(16px + ( 22 - 16)*((100vw - 300px) /(1920 - 300)));
  color: #1e1e1e;
  border-bottom: 2px solid #1e1e1e;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  transition-duration: 1s;
}
.voce-riga:hover{
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  font-size: calc(16px + ( 22 - 16)*((100vw - 300px) /(1920 - 300)));
  color: #d8f074;
  border-bottom: 2px solid #d8f074;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 4rem;
  transition-duration: 1s;
}
.sp-righe{
  padding-top: 6rem;
}
.sp-righe:hover{
  padding-top: 6rem;
}

.fr{
  opacity:0;
  transition-duration: 1s;
}
.voce-riga:hover >.fr{
  opacity:1;
  transition-duration: 1s;
}

.box-title-pag {
    padding-left: 4%;
    padding-right: 10%;
    padding-top: 8%;
}

.box-img-pag {
    padding-left: 10%;
    padding-right: 0%;
    padding-top: 4%;
}


.box-title-pag2{
    padding-left: 10%;
    padding-right: 4%;
    padding-top: 8%;
}

.box-img-pag2 {
    padding-left: 0%;
    padding-right: 10%;
    padding-top: 4%;
}


.sp-varilux{
  padding-top:5%
}
.sp-gallery{
  padding-top: 4rem;
  padding-bottom: 4rem;
}













.back-foot{
  background-color: #d8f074;
  padding-top: 4rem;
    background-image: url(../img/nome-foot.svg);
  background-position: bottom left;
  background-size: 100%;
  background-repeat: no-repeat;
}
.logo-footer{
 
  max-width: 70%;
}
.sp-logo-foot{
  padding-top:10rem;
}

.tit-foot{
 
  font-size: calc(16px + ( 30 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 24 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 600;
  padding-bottom: 1rem;
}
.txt-foot{
  font-size: calc(16px + ( 22 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 24 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  margin-bottom: 0.7rem;
}
.dati{
  font-size: calc(16px + ( 16 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + ( 16 - 20)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
  font-weight: 300;
  margin-bottom: 0.7rem;
  padding-top: 4rem;
}
.form-control {
    margin-top: 1rem;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
    color:#1e1e1e;
    font-weight: 400;
    line-height: 1.5;
    background-color: transparent;
    background-clip: padding-box;
    border:0px;
    border-bottom: 3px solid #1e1e1e;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input::placeholder {
  opacity: 1;
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e!important;
  font-weight: 400;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 1;
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e!important;
  font-weight: 400;
}
.form-control:focus {
    font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  color:#1e1e1e;
    background-color: transparent;
    border-color: #1e1e1e;
    outline: 0;
    box-shadow: 0 0 0 0;
}




.btn-blu{
  background-color:#1e1e1e;
  border-radius: 8rem;
  color:#d8f074;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  padding: 0.4rem 2rem;
}
.btn-blu:hover{
  background-color:#a5b07c;
  border-radius: 8rem;
  color:#d8f074;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: calc(16px + ( 18 - 16)*((100vw - 300px) /(1920 - 300)));
  padding: 0.4rem 2rem;
}


.white{
  color:#fff
}
a{
  color:#000;
  text-decoration: none;
}
a:hover{
  color:#000;
  text-decoration: none;
}

@media only screen and (max-width: 1500px) {}

@media only screen and (max-width: 840px) {}

@media only screen and (max-width: 850px) {
.box-foto {
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}
.nav-flot {
    padding: 0.8rem;
}

.logo-nav {
    max-width: 80px;
    min-width: 80px;
}
.box-title {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 14%;
}
.sp-righe {
    padding-top: 2rem;
}
.box-txt {
    padding-top: 5%;
    padding-right: 5%;
    padding-left: 5%;
}
.btn-call {
  margin-top: 0.5rem;
}
.sx {
    max-width: 100%;
}
.dx {
    max-width: 100%;
}
.txt-sez-dx {
    font-size: calc(16px + (54 - 16) * ((100vw - 300px) / (1920 - 300)));
    line-height: calc(20px + (60 - 20) * ((100vw - 300px) / (1920 - 300)));
    color: #1e1e1e;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 10%;
}
.nav-link {
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: #1e1e1e;
    font-weight: 600;
    text-decoration: none;
    margin-right: 0rem;
    margin-left: 0rem;
}
.txt-sez-sx {
    font-size: calc(16px + (54 - 16) * ((100vw - 300px) / (1920 - 300)));
    line-height: calc(20px + (60 - 20) * ((100vw - 300px) / (1920 - 300)));
    color: #1e1e1e;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 20%;
}
.box-title-pag {
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 8%;
}

.box-img-pag {
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 4%;
}


.box-title-pag2{
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 8%;
}

.box-img-pag2 {
    padding-left: 6%;
    padding-right: 6%;
   padding-top: 4%;
}
}