/* -------------------------------
   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: #5c6547;           /* testo / menu */
    --testo-cover:#5c6547;
    --titoli: #5c6547;          /* titoli / icone */
    --span: #5c6547;
	--bg-header:#C7C8A7;        /* header background */
    --sezioni-bg:#E4E3E0;       /* sezioni background */
    --bordi: #C7C8A7;           /* bordi / card */
    --bordi2:#E0DCC1;
    --testo-sec: #4A4A4A;       /* testo secondario */
    --cta: #D3CFCC;             /* CTA */
    --cta-hover: #D6C418;       /* CTA hover */
    --menù-hover: #2E5784;      /* hover menu */
    --titoli-hover: #1575A8;    /* hover titoli / link evidenziati */
}
/** FINE - colori */

.bg-sezione-01{background-color: rgba(199,200,167, 0.6);}


/** ! INIZIO SEZIONVE COVER HOME PAGE */
.my--container-cover{
    min-height:100vh;
    background-color:#F6F1DF;
    position: relative;
    z-index:20;
    overflow: hidden;
    z-index:20;
}

/** Lo usiamo quando abbiamo una immagine <img> che vogliamo usare come background */
.img-res-cover{
    position: absolute;
    width:100%;
    height:120%;
    top:0;
    left:0;    
    object-fit:cover;
    object-position: bottom;
}
.overlay-header{
    position: absolute;
    width:100%;
    height:100%;
    top:0; 
    left:0;
    background-color: rgba(255,255,255, 0.6);
    z-index:20;
}

.testo-cover{color:var(--testo-cover);z-index:30;}
.testo-cover h2{font-family: "Passions Conflict", cursive;font-size:7rem;font-weight:500;line-height:5rem;}
.testo-cover h3{font-size:1.8rem; font-weight:500;}
.testo-cover h4{font-size:0.9rem; font-weight:500;}
.testo-cover h5{font-family: "Passions Conflict", cursive;font-size:5rem;font-weight:500;line-height:3rem;letter-spacing: 0;}

/** ! FINE SEZIONVE COVER HOME PAGE */

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

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

/** ! INIZIO CARD */


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


/** INIZIO GRID FLEX */
.grid--flex{display: flex;flex-wrap: wrap;}
.grid--flex-01{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.aic{align-items: center;}
.jcc{justify-content: center;}
.jcs{justify-content: space-between;}
.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;
  
}
.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:18%;}
.col-22{width:22%;}
.col-25{width:25%;}
.col-30{width:30%;}
.col-31{width:31%;}
.col-33{width:33%;}
.col-40{width:40%;}
.col-48{width:48%; margin:20px 0;}
.col-50{width:50%;}
.col-100{width:100%;}
/** FINE COL */

.pad-20{padding:20px;}
.pad-t-as-header{padding-top:100px;}

.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-t-40{margin-top: 40px;}
.mar-r-40{margin-right: 40px;}
.mar-b-40{margin-bottom: 40px;}
.mar-l-40{margin-left: 40px;}

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

.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 1px;}

/** 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;margin:20px 0;width:100%;color:var(--titoli);}

.div_titolo h2{font-family: "Passions Conflict", cursive;font-size:5rem;font-weight:500;}
.div_titolo h3{font-style: italic;font-weight:500;font-size:1.6rem;margin-top:10px;}
.div_titolo h4{font-size:1rem; font-weight:500;color:var(--testo);}

/*.div-t*/

h1, h2, h3, h4{letter-spacing: 1px;}
/*h1{}
h2{font-size:2.2rem;}
.h2_gelab{font-size:2.6rem;}*/
.my__icon{font-size:3rem;color:var(--testo);}
/*.my_icone_heart{color:#fc356e;font-size:1.3rem;}*/

p{font-size:1rem; margin:10px 0; padding:5px;color:var(--testo);}

.tac{text-align: center;}
.taj{text-align: justify;}
.tar{text-align: right;}

.upp{text-transform: uppercase;}
.cap{text-transform: capitalize;}

.c-01{color:#fff;}

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


.activeCard{text-decoration: none;}
.activeCard p{color:#20325f;}
/** 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.1;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;
}


/** 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:#7B826B;
    background-color:#D3CFCC;
}
.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:#A0A293;
}
.cta-bottoni:hover::before{width: 100%;}
.cta-bottoni:hover{color: #E4E3E0;}
/** ! 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); }

.w100{width:100%;}

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

/** INIZIO FORM */
form{width:100%;}
.form-group{padding:10px;color:var(--testo);}
.form-group-label p{font-size:1.1rem;}
  .form-group-label h5{margin:5px 0;}
.form-group-input{
  width:100%;
  border:var(--bordi) solid 1px;
  /*padding:10px 0;*/
  font-size:1.1rem;
  padding:5px;
  color:var(--testo);
}
.select-group-input{
    border:var(--bordi) solid 1px;
    font-size:1.3rem; 
    padding:5px;
    width:100%;
    font-family: "Montserrat", sans-serif;
    background-color:#fff;
    color:var(--testo);
}
.form-group-text-area{
  font-size:1.3rem;
  border:var(--bordi) solid 2px;
  width:100%;
  height:150px;
  font-family: "Montserrat", sans-serif;
  color:var(--testo);
  padding:5px;
}
/** FINE FORM */

/** INIZIO - FLASH MESSAGE */
.flash_message{
  position:fixed;
  top:5vh;
  left:5vh;
  border:#000 solid 1px;
  padding:1vh;
/*  width:300px;*/
  font-weight:600;
  font-size:0.9rem;
  letter-spacing: 1px;
  background-color:#fff;
  z-index:200;
  animation-name: shownum;
  opacity: 1;
  animation-duration: 1s;
  animation-delay: 7s;
  animation-fill-mode: forwards;
}

.flash_message_warning{color:#F28415;}
.flash_message_info{color:rgb(58, 141, 58);}


@keyframes shownum {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/** FINE - FLASH MESSAGE */

/** INIZIO GALLERIA */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.gallery-grid a{
    display:block;
    overflow:hidden;
    border:var(--bordi) solid 2px;
    border-radius: 20px;
    padding:10px;
}

.gallery-grid img{
    object-fit: cover;
    display:block;
    width:100%;
    height:100%;
    transition: transform 0.3s ease;
    border-radius: 20px;
}

.gallery-grid img:hover{
    transform: scale(1.06);
}

@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) {
    .grid--flex-01{
        /*display: flex;*/
        flex-flow: column;
        justify-content: center;
    }
    .my--container-80{width:95%;}
    .col-18{width:100%;margin:25px 0;}
    .col-33{width:100%;margin:20px 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;}

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 15px;
      padding: 20px;
    }
}


/* 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 
*/