:root {

--nero: #000000;

--bianco: #ffffff;

--biancosporco: #EAEAEA;

--rosso:#D82035;

--grigiochiaro2:#EAEAEA;

--grigiochiaro:#313131;

--grigioscuro:#212121;

--font1:#212121;

--font2:#212121;

--fontFamily:'Poppins', sans-serif;

}



*,

*:before,

*:after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    list-style: none;

}

a {color: var(--nero); text-decoration: none!important;}

a:hover { text-decoration: none!important;}

*:active,

*:focus,

*.active {

   background-image: none!important;

   outline: 0!important;

   -webkit-box-shadow: none!important;

   box-shadow: none!important;

 }



html {

     scroll-behavior: smooth;

}



body {

    background-color:var(--grigiochiaro);
font-family: 'Poppins', sans-serif;
/*font-family: 'poppinsregular', sans-serif;*/

    color: rgb(26, 26, 26);

    font-size: 16px;

}

body {

  overflow-x: hidden;

}

p { margin: 0px!important; padding: 0px!important;}





#sec-slider {position:relative; padding: 0px}

#sec-nav { position: absolute; z-index: 9}

.logo-site { width: 50px; height: 50px;}

.navbar  { padding: 25px 50px; }

/* NAV */ 

.navbar-brand {display: inline-block;padding-top: 0;padding-bottom: 0;margin-right: 1rem;line-height: inherit;white-space: nowrap;}

.nav-item {}

.nav-item a, .nav-scroll {

    padding: 15px;

    padding-right: 15px!important;

    padding-left: 15px!important;

    color: var(--rosso)!important;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.2em;

    letter-spacing: 0.5px;

    cursor: pointer;

    text-transform: uppercase!important;

}

a:not([href]):not([tabindex]) {

  color: inherit;

  text-decoration: none;

}

.nav-item a:hover, .nav-item a:focus, .nav-item a:active { color: var(--rosso)!important; font-weight:900!important;}

.navbar-nav li:last-child a { padding-right: 0px!important}

.modal-dialog {

    width: 100%;

    max-width: 100%!important;

    height: 100vh;

     z-index: 9999;

    margin:0;

  }



.modal-content {

  position: relative;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-direction: column;

  flex-direction: column;

  width: 100%;

    height: 100%!important;

  pointer-events: auto;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid rgba(0,0,0,.2);

  border-radius: .0rem;

  outline: 0;

}



.modal-header {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-align: start;

  align-items: flex-start;

  -ms-flex-pack: justify;

  justify-content: space-between;

  padding: 1rem;

  border-bottom: 1px solid #FFFFFF;

  border-top-left-radius: .0rem;

  border-top-right-radius: .0rem;

}



.close {

  font-size: 36px;

  font-weight: 300;

  line-height: 1;

  color: #000;

  text-shadow: 0 1px 0 #fff;

    padding-top: 50px!important;

    padding-right: 100px!important;

}



.navbar-toggler {

font-size: 48px;

line-height: 1;

font-size: 2.5rem;

font-weight: 300;

color:var(--rosso);

padding: 0px!important;

border:0px!important;

}



.navbar-toggler:focus {

  outline: 0px dotted;

  outline: 0px auto -webkit-focus-ring-color;

}

.modal-body .navbar-nav { height: 100%}

.modal-body .nav-item { text-align: center}

.modal-body .navbar-nav li a { padding: 20px!important; font-size: 24px}



/* TOP INDIRIZZO e SCROLL DOWN */

.top-info {padding: 0px 0px 0px 0px;}



.cont-scroll { width: 120px; text-align: center; font-size: 14px; font-weight: 700; color: var(--bianco);}

.cont-scroll i, .cont-scroll .svg-inline--fa {font-size: 20px;}

.cont-indirizzo-top-info p {color: var(--bianco);font-size: 14px;font-weight: 700;line-height: 16px; text-align: center; padding-bottom: 20px!important;}

@media all and (min-width:768px) {

.top-info {padding: 0px 0px 50px 50px;}

.cont-indirizzo-top-info p { text-align: left; }

}





#arrow-down-svg { height:14px; fill:white;}

#Tracciato_613, #Rettangolo_291 { fill:white;}

.st0{fill:none;}

    

.scroll-down{

    position: absolute; left: 50px; bottom: 50px; color: #FFFFFF; z-index: 3; text-align: center; width:100px;

}

.txt-scroll-down, .txt-scroll-top{

    font-family: "Poppins", Sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 20px;

    padding-top: 5px;

}



  

@media all and (max-width:1024px) {

    .scroll-down{

        left: 25px; bottom: 25px;

    }

}



@media all and (max-width:768px) {

    .scroll-down { display: none;}

}



.top-info .scroll-down {bottom:0px!important; left: auto; right: 50px; }



/* SEC2 */



#sec-chisiamo { padding:80px 25px;} 

.c_p_effect, .c_p_noeffect { width: 100%;}    

.c_p_effect p, .c_p_noeffect p {

    color: var(--biancosporco);

    /*color: rgb(255,255,255);*/

    font-size: 32px;

    font-weight: 300;

    line-height: 46px;

    text-align: center;

}



@media all and (min-width:768px) {

    #sec-chisiamo { padding:80px 50px;} 

    .c_p_effect p {

        font-size: 35px;

        line-height: 45px;

    }

}



@media screen and (min-width:992px) {

    .c_p_effect { width: 100%;}

    .c_p_effect p {

        text-align: left;

    }      

} 



/* SEC3 */



#sec-cosafacciamo {background-color: var(--grigioscuro); padding:50px 25px 25px 25px;}

.sec_how { padding-bottom:40px;}

.tit_how h2 {color:var(--bianco); font-size: 24px;font-weight: 700; letter-spacing: 0.5px; cursor: pointer; line-height: 32px; text-align: center;}

.do-desc { opacity: 1; text-align: center}

.caption_how {color: #FFFFFF;

  font-size: 15px;

  font-weight: 700;

  line-height: 24px;

  width: 100%;

}

.caption_how p {text-align: center}

.i-do   {cursor:pointer;}

.sec_how {position:relative}

.col_caption_how {position:relative!important;}

@media screen and (min-width: 768px) {

        #sec-cosafacciamo {background-color: var(--grigioscuro); padding:50px 25px;}

}

@media screen and (min-width: 992px) {

    #sec-cosafacciamo {background-color: var(--grigioscuro); padding:80px 50px;}

    .sec_how { padding-bottom:0px;}

    .tit_how h2 {text-align: left; font-size: 28px; letter-spacing: 0.5px; line-height: 35px;}

    .caption_how {position:absolute!important; top:10px;}

    .caption_how p {text-align: right}

    .do-desc {opacity:0;}

} 

@media screen and (min-width: 992px) and (max-width: 1400px) {

    .i-do {width:50%!important;}

    .do-desc {width:50%!important;}

    .tit_how h2 { font-size:28px!important; letter-spacing:-1.1px!important; line-height: 35px;}

}

/* SEC4 */

#sec-progetti { padding: 60px 25px;}

@media screen and (min-width: 768px) {

    #sec-progetti { padding: 80px 25px;}

    #sec4-progetti { padding: 80px 65px;}

}



@media screen and (max-width: 766px) {

}



@media screen and (min-width: 1024px) {	

} 

.gallery {

	display:none;

}



@media screen and (max-width: 766px) {

}



/* CAREERS */

.slider-careers-caption { text-align: center; color: var(--bianco); }

.slider-careers-caption h1 { font-size: 45px; font-weight: 700; line-height: 55px; padding-top: 180px; padding-bottom: 70px; }

.slider-careers-caption p { font-size: 15px; font-weight: 300; line-height: 55px; padding-bottom: 120px!important; }

	

/* ---- posizioni aperte */

#secPosizioniAperte, #secFormCandidatura {

    background-color: var(--bianco); padding: 80px 25px;

}





@media screen and (min-width: 768px) {

    #secPosizioniAperte, #secFormCandidatura {

        background-color: var(--bianco); padding: 80px 50px;

    }

}



#secPosizioniAperte p, #secFormCandidatura p { font-size: 30px; line-height: 35px; color: var(--nero); text-align: center; 

}

#secPosizioniAperte .introPosizioni p, .titAccordion, #secFormCandidatura p  { padding-bottom: 50px!important;}

#secPosizioniAperte .introPosizioni p:last-child { padding-bottom: 80px!important; }



.accordion-item { border: 0px!important; }

.accordion-header .accordion-button { text-align: center!important; background-color: transparent!important;  border-top: 1px solid #707070!important;  border-radius: 0px!important; box-shadow: none!important; padding:25px 10px;}

@media screen and (min-width: 768px) {

.accordion-header .accordion-button { padding:25px;}

}



.accordion-item:last-child .accordion-header .accordion-button {  border-top: 1px solid #707070!important; border-bottom: 1px solid #707070!important;  }

.accordion-header .accordion-button p { width: 100%; font-weight: 700;}

.accordion-body { font-size:20px;}



#formCandidatura .form-control {

    display: block;

    width: 100%;

    padding: 0.5rem 0.75rem!important;

    margin-top: 0px;

    font-size: 15px;

    font-weight: 300;

    line-height: 1.5;

    color: #000000!important;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #707070!important;

    border-radius: 0px!important;

}



.submit-form, .submit-form:hover {

    background-color: var(--nero);

    font-size: 15px;

    font-weight: 700;

    color: #FFFFFF;

    border-radius: 0px;

    padding: 20px;

    width: 100%;

    max-width: 350px;

    border-color: var(--nero);

}







/* FOOTER */



footer { padding: 0px 25px 25px 25px; color: var(--bianco); font-size: 10px; text-align: center}

@media screen and (min-width: 768px) {

    footer { padding: 50px;} 

}

.middle-footer {padding: 50px 0px 0px; text-align: center} 

.bottom-footer {padding: 50px 0px 0px; text-align: center} 

.top-footer-p {color: var(--bianco); font-size: 10px;font-weight: 700; line-height: 16px; text-transform: uppercase}

.cont-middle-info, .cont-middle-info a, .cont-middle-info a:hover {color: var(--bianco); }

.cont-bottom-info { text-align: center}

.cont-bottom-info a {color: var(--bianco); font-size: 10px; font-weight: 700; line-height: 14px; }

.cont-send-mail { text-align:center; font-size: 28px; font-weight: 700; color: var(--bianco);  }







.cont-send-mail a {color: var(--bianco);  }

#toTop { cursor: pointer}

#arrow-top-svg { height: 14px; fill: white;}

.cont-scroll-top { width: 100px; text-align: center; padding-top: 20px; }





.bottom-footer p {

text-align: center;

color: var(--bianco);

font-size: 10px;

font-weight: 400;

line-height: 1.7em;

letter-spacing: 0.5px;

}



.bottom-footer a {

text-align: center;

color: var(--bianco);

}



@media screen and (min-width: 768px) {

    .middle-footer {padding: 25px 0px; }

    .bottom-footer {padding: 10px 0px 25px 0px; }

    .cont-bottom-info { text-align: left}

    .cont-send-mail { text-align:right; font-size: 35px; }

    .cont-scroll-top { padding-top: 0px; }

}



/* LOOP CAROUSEL */

.wrapper-marquee {

    width: 100%;

    height: 50px;

    background-color: #FFFFFF;

    overflow: hidden;

    position: relative;

}

.marquee {

    overflow: hidden;

    white-space: nowrap;

    position: absolute;

    font-size: 35px;

} 





/*PAGINA PROGETTO */

#sec1_progetto {height:20vh; position: relative; text-align: center;  }

.titolo_progetto { font-size:50px; font-weight: 900; color:var(--grigiochiaro2); position: absolute; bottom: -120px; left: 0px; right: 0px;   transition: transform 0.5s ease-out; /* Opzionale, per un effetto più fluido */ text-align: center; z-index: 999;  width: auto;}

@media screen and (min-width: 768px) {

    #sec1_progetto {height:30vh;}

    .titolo_progetto { font-size:110px; bottom: -170px; width: 100%; height:200px;  }

}



@media screen and (min-width:1024px) {

    #sec1_progetto {height:30vh;}

    .titolo_progetto { font-size:150px; bottom: -170px; width: 100%; height:200px;  }

}



@media screen and (min-width:1400px) {

    .titolo_progetto { font-size:200px; bottom: -250px; width: 100%; height:300px;  }

}



@media screen and (min-width:1600px) {

    .titolo_progetto { font-size:220px; bottom: -290px; width: 100%; height:350px;  }

}



.titolo_progetto {

  color: transparent;

  -webkit-text-stroke: 2px white; /* Per WebKit (Safari/Chrome) */

  text-stroke: 2px white; /* Proposta standard, non ampiamente supportata */

  -webkit-text-fill-color: transparent; /* Per WebKit (Safari/Chrome) */

}



#sec2_progetto {padding:50px 20px; position: relative;  /*margin-top: -100px;*/}



.zoom-section {

  height: auto; /* Altezza del viewport */

  display: block;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  position: relative;

  z-index: 2; 

  margin-top:0px;

}



.reel {

  height: auto; /* Altezza del viewport */

  position: relative;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  z-index: -1;

  overflow: hidden; /* Assicurati che il video non fuoriesca durante il ridimensionamento */

}



#video_presentazione {

  width: 100%;

  height:350px;

  object-fit: cover; /* Mantiene il rapporto d'aspetto del video */

}



#video_presentazione_mob {

  width: 100%;

  height:auto;

  object-fit: cover; /* Mantiene il rapporto d'aspetto del video */

}

.reel-img {

height: auto; /* Altezza del viewport */

  position: relative;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: 0px;

  z-index: -1;

  overflow: hidden; /* Assicurati che il video non fuoriesca durante il ridimensionamento */

}

    

.reel-img img {

    width:100%

}

@media screen and (min-width: 1024px) {

    

#sec2_progetto {padding:80px 50px; position: relative; /*margin-top: -100px;*/}   



    .zoom-section {

        height: 100vh; /* Altezza del viewport */

        display: flex;

        justify-content: center;

        align-items: center;

        overflow: hidden;

        position: relative;

        z-index: 2; 

        margin-top: -100px;

    }

    

    .reel {



  position: relative;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  z-index: -1;

  overflow: hidden; /* Assicurati che il video non fuoriesca durante il ridimensionamento */

}

  





#video_presentazione {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

    

}













#sec3_progetto {background-color: var(--grigioscuro); padding:50px 25px;}

.container_cards_parallax {padding:50px 0px;}

.cards_progetto_parallax {  height: auto; width: 100%; margin-bottom: 20px; text-align:center }

.cards_progetto_parallax img { height: auto; width: 100%; display: block; float:none; margin:auto; }

#sec3_progetto .c_p_effect, #sec6_progetto .c_p_effect {

    padding: 0px 0px

}

#sec-chisiamo .c_p_effect p, #sec3_progetto .c_p_effect p, #sec5_progetto .c_p_effect p {

font-size: 22px;

line-height: 28px;

}

.c_p_noeffect p {

    color:#FFFFFF!important;

    font-size: 24px;

    font-weight: 300;

    line-height: 46px;

    text-align: center;

}





.c_p_noeffect {

    margin-bottom: 20px;

}



@media screen and (min-width: 768px) {

#sec3_progetto {background-color: var(--grigioscuro); padding:50px 50px;}

#sec3_progetto .c_p_effect, #sec5_progetto .c_p_effect {

    padding: 30px 0px

}

    

#sec3_progetto .c_p_effect p, #sec5_progetto .c_p_effect p { font-size: 28px; line-height: 36px; }

    

    .c_p_noeffect { 

        margin-bottom: 0px;

    }

    .c_p_noeffect p {

        color: rgb(26, 26, 26);

        font-weight: 300;

        text-align: left;

    }

    



    #sec-chisiamo .c_p_effect p {

        font-size: 35px;

        line-height: 45px;

    }

}







#sec4_progetto {background-color: var(--grigioscuro); padding:50px 20px;}

#sec4_progetto .caption { font-size: 16px; font-weight: 900; color: var(--bianco); padding-top: 0px; padding-bottom: 20px; text-align: center}

#sec4_progetto .placeholderimg2 { margin-top:20px;}

.cards_progetto_parallax img { max-height:490px; max-width:145px;}



@media screen and (min-width: 768px) {

    #sec4_progetto {padding:80px 50px;}

    #sec4_progetto .caption { padding-top: 30px; text-align: left}

    #sec4_progetto .placeholderimg2 { margin-top: 60px;}

}



@media (max-width: 768px) {

.container_cards_parallax {padding:50px 0px!important;}

#cards_prx_img_1, #cards_prx_img_3 { }

#cards_prx_img_2 { margin-top:50px;}

#cards_prx_img_3 {margin-top:10px;}  

}

@media screen and (min-width: 1024px) {

    .container_cards_parallax {padding:0px 0px;}

}



    

    

#sec5_progetto {background-color: var(--grigioscuro); padding:50px 50px 0px 50px;}

#sec5_progetto .p_noeffect { font-size: 24px; line-height:32px; text-align: center; color: var(--bianco);}







#sec6_progetto  { background-color: #F0F0F0;}  

.scroll-container {

  position: relative;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

}



.scroll-content {

  display: flex; /* Per rendere i panel orizzontali */

}



.panel {

  min-width: 100vw;

  /*height: 100vh;*/

    height: auto;

  flex-shrink: 0; /* Mantiene i panel della loro dimensione senza restringerli */

  display: flex;

  justify-content: center;

  align-items: center;

transform-origin: center center;

    background-color: #F0F0F0;/* aba9aa */

}



.panel img {height: 100vh;}





@media (max-width: 1024px) {

#sec6_progetto  { padding-top:50px; padding-bottom:50px; background-color: #F0F0F0;} 

.scroll-content {display: block; }

.scroll-container  {width:100%;height: auto;background-color: #F0F0F0; padding: 0px 10px;  }



.panel {

    min-width: auto;

    width: 100%;

    height: auto; /* o un'altezza specifica che funzioni meglio */

    background-color: #F0F0F0;

    opacity: 0;

    transform: translateY(50px); /* Partono leggermente spostati verso il basso */

    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

    text-align:center;

    margin-bottom:20px;

}





.panel img {

    width:100%; 

    height:auto!important;

    max-width: 100%; /* Opzionale: assicura che l'immagine non esca dal pannello */

    max-height: 100%; /* Mantiene le proporzioni dell'immagine */

}



    

    

}



@media (min-width: 1024px) {

#sec6_progetto  { padding:0px 0px; scroll-behavior: smooth; background-color: #F0F0F0;}       

}









#sec_loop_project { padding:0px 0px;}













.page-transition-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #000;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.5s ease, visibility 0s linear 0.5s;

  z-index: 9999;

}



.page-transition-overlay.show {

  opacity: 1;

  visibility: visible;

  transition: opacity 0.5s ease;

}