/* -------------------------------
   RESET BASE
--------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  font-family: "Montserrat", sans-serif;
  font-size:1rem;
  font-weight:500;
  overflow-x: hidden;
  background-color:#F7F7F7;
}


/** INIZIO - colori */
:root {  
    --testo: #20335F;           /* testo / menu */
    --titoli: #1D91D1;          /* titoli / icone */
	--bg-header:#B5DAF1;        /* header background */
    --segioni-bg:#F5F8FA;       /* sezioni background */
    --bordi: #E1E7EE;           /* bordi / card */
    --bordi2:#F9EB1B;
    --testo-sec: #4A4A4A;       /* testo secondario */
    --cta: #F9EB1B;             /* CTA */
    --cta-hover: #D6C418;       /* CTA hover */
    --menù-hover: #2E5784;      /* hover menu */
    --titoli-hover: #1575A8;    /* hover titoli / link evidenziati */
}
/** FINE - colori */

.bg-01{background-color:#D8ECFB;}
.bg-02{background-color:#fff;}

/** INIZIO FOOTER */
.footer{background-color:var(--bg-header);width:100%; min-height:80px;z-index:20;}
/** FINE FOOTER */

.my--container{
    width:100%; 
    min-height:100vh;
    position:relative;
    display:flex;
    flex-flow: column;
}

.my--container-100{
    position: relative;
    width:100%;
    flex:1;
}
.my--container-80{
    width:80%;
    margin:80px auto;
    position: relative;
    z-index:20;
    min-height:100px;
}

/** ! INIZIO CARD */
/*.card{position:relative;width:100%;min-height:50px;}*/
/** * FINE CARD */

/** INIZIO GESTIONE COVER */
.my--container-cover{
    min-height:100vh;
    background-color:#20325f;
    position: relative;
    z-index:20;
    overflow: hidden;
    z-index:20;
}

/** Lo usiamo quando abbiamo una immagine <img> che vogliamo usare come background */
.img-cover{
    position: absolute;
    width:100%;
    height:120%;
    top:0;
    left:0;    
    object-fit:cover;
    object-position: center 60%;
}
.img-logo-bg{
    position: absolute;
    width:100%;
    height:auto;
    top:0;
    left:0;
    display: block;
    object-fit:cover;
    object-position: center;
}

/*.div--img-cover{}*/

/** quando usiamo un div con un background-image */
.cover-bg{
    background: url(../immagini/img01.jpg) center center;
    position: absolute;
    top:-10%;
    left:0;
    width:100%;
    height:120%;
    z-index:10;
    background-size: cover;
    will-change: transform;
    transform: translate3d(0,0,0);
    contain: paint;            /* limita l’area di repaint a questo elemento */
    pointer-events: none;      /* micro-ottimizzazione per hit-testing */
}


.div-titoli-cover{
    position: absolute;z-index:25;
}

.overlay{
    position: absolute;
    width:100%;
    height:100%;
    top:0; 
    left:0;
    background-color: rgba(0,0,0, 0.65);
}

/** FINE GESTIONE COVER */

/** INIZIO GRID FLEX */
.grid--flex{display: flex;flex-wrap: wrap;}

.aic{align-items: center;}
.jcc{justify-content: center;}
.ffc{flex-flow: column;}
.ffr{flex-flow: row;}

.grid--flex-row{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.grid--flex-col{
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

/** INIZIO GRID FLEX STRETCH AND CARD */
.grid--flex-stretch{
    display:flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    min-height:10px;
}
.card--container-flex{
  display:flex;
  flex-direction: column;
  align-items: stretch;
}
.card--titolo-flex{text-align:center;flex:1;}

.card--testo-flex{
  display:flex;
  flex-direction: column;
  padding:10px 0;
  flex:1;
  /*margin-top:auto;*/
}
.mar-t-auto{margin-top: auto;}
/** FINE GRID FLEX STRETCH */

.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
/** FINE GRID FLEX */

/** INIZIO COL */
.col-18{width:19%;}
.col-22{width:22%;}
.col-31{width:31%;}
.col-33{width:33%;}
.col-40{width:40%;}
.col-48{width:48%; margin:20px 0;}
.col-50{width:50%;}
.col-60{width:60%;}
/** FINE COL */

.pad-20{padding:20px;}

.mar-20{margin:20px;}
.mar-40{margin:60px;}

.mar-t-20{margin-top: 20px;}
.mar-r-20{margin-right: 20px;}
.mar-b-20{margin-bottom: 20px;}
.mar-l-20{margin-left: 20px;}

.mar-l-20p{margin-left:-20%;}

.mar-t-40{margin-top: 40px;}
.mar-r-40{margin-right: 40px;}
.mar-b-40{margin-bottom: 40px;}
.mar-l-40{margin-left: 40px;}

.mar-titoli-20{margin:20px 0;}
.mar-titoli-40{margin:40px 0;}
.mar-titoli-60{margin:60px 0;}
.mar-titoli-80{margin:80px 0;}

.bor{border:#000 solid 2px;}
.bor-hidden{display: flow-root}

/** INIZIO IMMAGINI E CONTENITORI IMMAGINI */
.div_img{margin:10px 0;}
.img-res{width:100%; height:auto; display: block;}
.img-res-60{width:60%; height:auto; display: block;margin:0 auto;}
/** FINE IMMAGINI E CONTENITORI IMMAGINI */


/** INIZIO FONT e OPZIONI FONT */
.div_titolo{text-align: center;position: relative;z-index:10;}
.div_testo{position:relative;z-index:10;}
h1, h2, h3, h4{color:#1d91d1;letter-spacing: 1px;}
h1{font-size:3rem;}
h2{font-size:2.0rem;}
.h2_gelab{font-size:2.6rem;}
p{font-size:1.1rem; margin:10px 0; padding:5px;color:#20325f;}

.tac{text-align: center;}
.taj{text-align: justify;}
.upp{text-transform: uppercase;}
.cap{text-transform: capitalize;}

.c-01{color:#fff;}

.c-02{color:#f9eb1b;}
.c-03{color:#20335f;}
.c-04{color:#1d91d1;}
.c-05{color:#E98C2E}

.fw400{font-weight:400;}
.fw500{font-weight:500;}
.fw600{font-weight:600;}


.activeCard{text-decoration: none;}
.activeCard p{color:#20325f;}

    /** COLORI PER SEZIONE GABANA HOLDING */
        .colore-h1{/*color:#20335F;*/ color:#20335F;}
        .colore-testi-prim{color:#333333;}
        .colore-testi-sec{color:#8A8A8A;}
        .colore-bg{background-color:#F7FBFF;}
        .colore-overlay{
            position: absolute;
            width:100%;
            height:100%;
            top:0; 
            left:0;
            /*background: rgba(255, 255, 255, 0.85);*/
            /*background: rgba(217, 131, 43, 0.35);*/
            background: rgba(237, 180, 120, 0.9);
            /*background: rgba(181, 218, 241, 0.55);*/
            /*background: rgba(32, 51, 95, 0.20);*/

            z-index:1;
        }
        .bg-overlay{background-color: rgba(255,255,255, 0.8);}
    /** ################################# */

/** FINE FONT e OPZIONI FONT */

/* ! INIZIO ANIMAZIONE */
.fade-in{opacity: 0;transform: translateY(3rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0;transform: translateY(6rem);}
.square{width:250px;height:250px; background-color:#336699;}
/** FINE ANIMAZIONE */

/*.boxs{
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border-radius: 20px;
    padding:15px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.boxs:hover{transform: scale(1.05);}
*/
.boxs{
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border-radius: 20px;
    padding:5px;
    /*cursor: pointer;*/
}
/*.boxshov{border-radius: 20px;transition: transform 0.3s ease, box-shadow 0.3s ease;padding:10px;}
.boxshov:hover{
    transform: translateY(-25px);
    box-shadow: 0 8px 20px rgba(0,0,0,1);
}*/
.activeTranslateY:hover{box-shadow: 0 8px 20px rgba(0,0,0,1);border-radius: 20px;}

/** INIZIO PATTERN E BACKGROUND COLOR */
.patternbg01 {
  background-color: #20325f;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 20px
  );
}
.patternbg02 {
  background-color: #20325f;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.patternbg03 {
  background-color: #20335f;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 2px,
    transparent 2px,
    transparent 24px
  );
}



/** FINE PATTERN E BACKGROUND COLOR */


/** ! INIZIO DIV BOTTONI */
.div_bottoni{text-align: center;margin-top:30px;}
.div_bottoni_smartphone{display:none;}

.cta-bottoni{
    position: relative;
    display: inline-block;
    padding:10px;
    font-size: 0.80rem;
    font-weight:600;
    text-transform: uppercase;  
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    transition: color 0.3s ease;
    letter-spacing: 1px;  
    color:#20325f;
    background-color:#1d91d1;
}
.cta-bottoni::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: width 0.4s ease-in-out;
    background-color:#f9eb1b;
}
.cta-bottoni:hover::before{width: 100%;}
/*.cta-bottoni{color: #F5E8C9;}*/
/** ! FINE DIV BOTTONI */

.img-res{width:100%;height:auto;display: block;}

.scroll-top{display: none;cursor: pointer;z-index:30;}
.scroll-top i{font-size:1.4rem;}
.scroll-top-in{
    position:fixed; 
    border:var(--bordi2) solid 2px; 
    width:35px; 
    height:35px;
    z-index:30;
    text-align: center;
    background-color:var(--testo);
    border-radius: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    bottom:50px;
    right:50px;
}
.scroll-top-i{color:var(--bordi2); }

.order-1{order:1;}
.order-2{order:2;}
.order-3{order:3;}

@media (max-width: 998px){
    .my--container-80{width:98%;}
    .col-18{width:40%; margin:10px;}

    .grid--flex-stretch{justify-content: space-around;}

    .activeTranslateY:hover{box-shadow:none; border:#000 solid 0px;}
    .boxs{box-shadow: none;border:#000 solid 0px;}

    .div_bottoni_smartphone{display:block;}
}

@media (max-width: 768px) {
    .my--container-80{width:95%;}

    .col-18{width:100%;margin:25px 0;}
    .col-50{width:100%;margin:10px 0;}

    .div_img{width:60%;margin:5px auto;}
    .div-img .img-res-60{width:100%; height:auto; display:block;}
    .order-mb-1{order:1;}
    .order-mb-2{order:2;}
    .order-mb-3{order:3;}
}


/* ransition: transform 0.3s ease, box-shadow 0.3s ease; */
/*
.project-card {transition: transform 0.3s ease;}
.project-card:hover {transform: scale(1.05);}
*/
/*
transform: translateY(-25px); si alza di 15px 
box-shadow: 0 8px 20px rgba(0,0,0,1); ombra più marcata 
*/