:root {
    --header-height: 3rem;
    --white-color: #ffffff;
    --primary-color: #000;
    --second-color: #FFDDB8;
    --rosso-color: #E50915;

    --biggest-font-size: 3.5rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;

    --z-back: -1;
    --z-normal: 10;
    --z-fixed2: 40;
    --z-fixed: 50;
    --z-modal: 1000;
}
.z_top{
    z-index:  90;
}
.z_top2{
    z-index: 100;
}
.z_bottom{
    z-index: var(--z-back);
}
.about_img_size{
height: 30px;
font-size: 2px;
}
@media screen and (min-width: 768px) {
    :root {
        --biggest-font-size: 7rem;
        --h2-font-size: 1.5rem;
        --normal-font-size: .938rem;
    }
}

*, ::before, ::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    
background-color: var(--rosso-color) !important;
}
.sfondo_secondario{
    background-color: var(--second-color);
}

.container_tasto{
    width: 500px;
}
.altezza100{
    height: 100vh;
}
.altezza100about{
    height: 100vh;
}
.larghezza100{
    width: 100vw;
}
/* immagini */
.home-parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* immagini */
.home-parallax-img1 { 
    background-image: url('griglia_1.gif'); z-index: var(--z-back); }
.home-parallax-img2 {
     background-image: url('matteo_iafrate.svg'); z-index: var(--z-tooltip); }
/*.home-parallax-img3 { background-image: url('https://i.postimg.cc/90tCJGP0/imgm3.png'); z-index: var(--z-fixed); }*/
.home-parallax-img4 { background-image: url('https://i.postimg.cc/QCsr9FL3/imgm4.png'); z-index: var(--z-fixed); }


    .home-title {
        position: absolute;
        z-index: var(--z-normal);
    }




/*SECTION*/


.luce_scale{
    height: 53vw;

  }
  .bread_scale{
   /* transform: scale(0.7); */
  
   height: 18vw;
  }
 .traslate_tostapane{
    transform: translate(0, 25vh);

  }
  .dimensione_tostapane{
    width: 50vw;
  }
.matteo_iafrate{
    width: 93vw;
}

.card_lavoro{
    height: 23vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-filter: brightness(100%);
  }
  .card_lavoro:hover{
-webkit-filter: brightness(70%);
    z-index: 2;
    background-color: red;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.03);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.03);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.03);
    transition: all 200ms ease-in-out;
    transform: scale(1.03);
 } 


 .dim_scontrino{
    width: 60%;
  }
  
  .scroll_hidden{
    overflow-y: hidden;
  }
  .titolone{
    line-height: 150px;
    font-size: 150px;
 }
 .about_me_text {
    width: 50% ;
}
p{
    font-size: 20px;
    
}
.altezza_testo_about{
    height: 100%;
}
.scontrino {
    width: 52vw ;
    height: 100%;
}


   .modal-fullscreen .modal-content{

      height: auto !important;
     width: 92vw !important;
  
  }
  .foto_interna_carosello{
    height: 70vh;
  }
  @media screen and (max-width:1400px){
  
  .foto_interna_carosello{
    height: 50vh;
  }
    .modal-fullscreen .modal-content{

      height: auto !important;
     width: 92vw !important;
  
  }
  }
@media screen and (max-width: 768px) {
   
  .red_mobile{
    background-color: var(--rosso-color);
   }
    .scontrino{
        width: 100vw; 
       height: 100%;
     
     }
    .nav-menu {
        position: fixed;
        left: 0;
        top: -100%;
        background-color: rgba(0, 0, 0, .9);
        width: 100%;
        height: 40%;
        padding: 2rem;
        text-align: center;
        z-index: var(--z-fixed);
        transition: .3s;
    }
  

    .show { top: var(--header-height); }
    .luce_scale{
        height: 80vw;
    
      }
      .bread_scale{
       /* transform: scale(0.7); */
      
       height: 29vw;
      }
      .traslate_tostapane{
        transform: translate(0, 10vh);
    
      }
      .dimensione_tostapane{
        width: 88vw;
      }
      .altezza100{
        height: 70vh;
      }
      .matteo_iafrate{
        width: 100vw;
    }
    .card_lavoro{
        height: 56vw;
      
      }
      .dim_scontrino{
        width: 100%;
      }
      .titolone{
        line-height: 100px;
        font-size: 70px;
     }
     .about_me_text {
        width: 100%;
    }
    p{
        font-size: 20px;
        
    }
    .line_height_paragraph{
        line-height: 25px;
    }
    .mt_mobile{
        height: 100px;
    }
    .modal-fullscreen{
        width: 100vw  !important;
        height: 95% !important;
    }
 
   .modal-fullscreen .modal-content{

      height: 90vh !important;
     width: 97vw !important;
  
  }
   
}
.modal-backdrop {
    --bs-backdrop-opacity: 0.8 !important;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 

.ipad_mini{
width: 46%;
}
.titolone{
    font-size: 73px;
 
}
.line_height_paragraph{
    line-height: 22px;
}
}
.modal-body{
    align-items: start !important;
}

.btn-danger {
    background-color: var(--rosso-color) !important;
}
.btn-danger:hover {
    background-color: #ba2020 !important;
}
 


/*rotazione*/
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        
    }
}

.rotating {
    -webkit-animation: rotating 35s linear infinite;
 
}

#myDiv {
    
   /* background-color: #4CAF50;*/
    transform: scale(0.7); /* Scala iniziale */
    transition: transform 0.1s ease-out; /* Animazione fluida */
  }
 

 

  .raleway-uniquifier {
    font-family: "Raleway", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
  }

  .karantina-light {
    font-family: "Karantina", serif;
    font-weight: 300;
    font-style: normal;
   
  }
  
  .karantina-regular {
    font-family: "Karantina", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;

  }
 
  
  .karantina-bold {
    font-family: "Karantina", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .sfondo_rosso{
background-color: var(--rosso-color);

  }
.outline{
   
  text-shadow: -1px -1px 0 #FFDDB8, 1px -1px 0 #FFDDB8, -1px 1px 0 #FFDDB8, 1px 1px 0 #FFDDB8;
}
  .testo_tasto{
    font-size: 25px;

  }
  a.testo_tasto {
    font-size: 30px;
  }
  .testo_rosso{
   
    color: var(--rosso-color);
  }
  .card_snack{
    background-image: url(Progetti/bigbabol/big_bableV2.webp);
  }
  .card_bounty{
    background-image: url(Progetti/uni_italia/immagine_copertinaV2.webp);
  }
  .card_finish{
    background-image: url(Progetti/si_viaggiare/cover.webp);
  }
  .card_bigbabol{
    background-image: url(Progetti/eppoi/Cover_eppoi2.gif);
  }
  .card_gestalt{
    background-image: url(Progetti/Gestalt/gestalt\ cover.webp);
  }
   .card_bucaneve{
    background-image: url(Progetti/bucaneve/bucaneve_cover.png);
  }

  .translate{
    transform: translate(0, -50px);
z-index: var(--z-back);
  }

  
 /*prova -----------------------------*/
 #loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #loader .spinner-border {
    width: 3rem;
    height: 3rem;
  }

  /* Modal Custom Animation */
  .modal.fullscreen-modal {
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
  }

  .modal.fullscreen-modal.show {
    transform: translateY(0);
  }

  .modal.fullscreen-modal.closing {
    transform: translateY(100%);
  }



  .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
    font-size: 1.5rem;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
  }

  .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .colore_loadingpage {
          background-color: #E50915;
      }
      .margin_bottom_about{
margin-bottom: 130px;
      }
     
      .carousel-thumbnails {
        display: flex;
        justify-content: center;
        gap: 10px;
   
      }
  
      .carousel-thumbnail {
        width: 120px;
        height: 80px;
        object-fit: cover;
        opacity: 0.6;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s ease;
      }
  
      .carousel-thumbnail.active {
        opacity: 1;
        border-color: #E50915; /* colore evidenziato Bootstrap */
      }
      

      .carousel_portfolio{
        width: 50%;
      }

      .border_red{
            border: var(--bs-border-width) var(--bs-border-style) var(--rosso-color) !important;
        
      }
   .carousel-control{
  
 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    
   }
   .quadrato{
opacity: .7;
    width: 50px;
    height: 50px;
    background-color: rgb(98, 98, 98);
   }

    .quadrato:hover{

opacity: .9;
    transition: opacity .15s ease;
    }
.scroll_horizontal{
  overflow: auto;
overflow-y: hidden;
}
   
   .background_Color{
    background-color: var(--second-color);
  
   }


    /* Stile per il loader a schermo intero */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--rosso-color);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.8s ease;
    }

    #loader.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    /* Spinner di Bootstrap */
    .spinner-border {
      width: 3rem;
      height: 3rem;
    }
    body.loading {
  overflow: hidden;
  height: 100vh; /* blocca lo scroll e impedisce sfarfallii */
}

/* Tutti gli elementi che devono essere animati sono invisibili all'inizio */
.pre-animate {
  opacity: 0;
}