/*
 * Theme Name: Vetisfy
 * Description: Starter Theme to use with Timber
 * Author: HumusDesign
*/

html{scroll-behavior: smooth;}

body {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #082C38;
}

.metodo_lottie *{font-family: 'Space Grotesk', sans-serif !important;}

.absolute{position: absolute;}
.fixed{position: fixed;}
.relative {position: relative;}

h1{font-size: 32px;}
h2{font-size: 28px; font-weight: 700;}
h3{font-size: 22px;}
h4{font-size: 18px;}

a, a:hover, a:visited{text-decoration: none; color: #9596FF;}

.testo_bianco{color:#ffffff;}
.testo_lilla{color:#9596FF;}
/*.testo_viola{color:#070723;}*/
.testo_viola{color:#1E1775;}
.testo_nero{color:#000;}

.mini_text{font-size:10px;}

.bg_bianco{background-color: #fff;}
.bg_lilla{background-color:#9596FF;}
.bg_lilla_chiaro{background-color: #E4E2FF;}
.bg_viola{background-color: #070723; color:#fff;}
.bg_viola_chiaro{background-color: #363089; color:#fff;}
.bg_panna{background-color: #EFEEEC;}

.circle{border-radius: 50%;}
.bordered{border: 5px solid #fff;}

.btn {
    border-radius: 30px;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    padding: 8px 30px;
    letter-spacing: 2px;
}
.btn:hover{background-color: #9596FF; color:#fff;}
.btn:active, .btn:focus{outline: none;box-shadow: none;}
.btn-bianco{background-color: #ffffff; color: #070723;}
.btn-viola{background-color: #1E1775; color: #D4D5FF;}

.uppercase {text-transform: uppercase;}
.italic {font-style: italic;}

.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
.extrabold {font-weight: 800;}
.black {font-weight: 6900;}

.overflow-h{overflow: hidden;}

header.sticky{transition: max-height 0.3s ease-out;}
header.sticky .logo{transition: width 0.3s ease-out;}

.mega-menu ul{list-style: none; font-size: 1.8rem;}
.mega-menu .menu a{color:#fff;}
.mega-menu nav{margin-top: 100px;}

.mega-menu {
    transition: .3s ease-in-out;
    position: fixed;
    padding-bottom: 78px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    display: none;
    overflow-y: auto;
}
.mega-menu nav {
    padding-top: 70px
}
.mega-menu.reveal {
    opacity: 1;
}
.close-menu {
    height: 30px;
    cursor: pointer;
    display: none;
}

.header{background-image: url("static/img/sfumatura_menu.svg"); background-position: top; background-size: contain; background-repeat: repeat-x; color: #fff; z-index: 10;}
.header a, .header a:visited{color:#fff;}
.header a:hover{color:#9596FF;}
.header ul{margin-bottom: 0;}
.header ul li{display: inline-block; margin-right: 20px;}
.header ul li:last-child{margin-right: 0; background-color: #9596FF; border-radius: 30px; padding:2px 20px;}
.header ul li:last-child a:hover{color:#fff;}

.main_image{height: 100vh; /*background-size:cover; background-position: top -150px center; background-repeat: no-repeat; background-image: url("static/img/pelosa.svg");*/}
.main_image .container{position: relative; z-index: 2;}
.main_image .img_pelosa{top:-20%; z-index: 1;}

.testo_biggest{font-size:90px; line-height: 94px;}
.testo_mid{font-size: 21px; line-height: 26px;}

.totop_div{right: 5%; bottom:5%; z-index: 5;}

.footer{position: relative; z-index: 1;}
.footer .social_footer{list-style: none; margin-bottom: 0; padding-left: 0;}

.z_up{position: relative; z-index: 2;}

.titoletto{text-transform: uppercase; font-size: 18px; line-height: 20px; font-weight: 600; letter-spacing: 2px;}
.titolo{font-size: 40px; line-height: 42px; font-weight: 700;}

.foto_onda .onda_3{margin-top: 8%;}

#linea_mobile_1{width: 100%; max-height: 240px; transform: translateY(-120px);}

.staff_icona img{max-height: 100px;}
.staff_titolo{font-size: 22px; line-height: 24px;}

.cosa_facciamo .descrizione{font-size: 20px; line-height: 22px;}

/*.chi_siamo{background-image: url("static/img/chisiamo_linea.svg"); background-position: center; background-size: contain; background-repeat: no-repeat;}*/
.chi_siamo_bg_div{top:0; left:0; width:100%; height: 100%;}
.professionisti_linea_mobile{top:0; left:0; width:100%; height: 100%;}

.recensioni .swiper_arrows{height: 50px;}
.recensioni .swiper-button-prev{width: 60px;}
.recensioni .swiper-button-next{left:50px; right: auto; width:200px;}
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {content:url('static/img/freccia_dx.svg');}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {content:url('static/img/freccia_sx.svg');}

.contatti .contatti_foto{z-index: 1;}
.contatti .contatto{font-weight: 600; text-decoration: underline; font-size: 25px;}
.contatti .label_contatto{font-size: 21px;}

.mega-menu .v_logo{margin-top: -5px; margin-left: 1px;}
.mega-menu .close-menu{margin-top: 5px;}

.totopdiv{display: none;}



    /*MOBILE*/
    @media screen and (max-width: 480px) {
      .header{background-size: 190%;}

      .testo_biggest{font-size:70px; line-height: 74px;}
      /*.foto_onda .onda_3{margin-top:30%;}*/

      .main_image{overflow: hidden;}
      .main_image .img_pelosa{top:10%; width: 140% !important; left:-20%;}
      .testo_mid {font-size: 19px;}

      /*.totopdiv{width: 110px; height: 110px; text-align: center; padding-top: 14px; background-size: contain; background-position:center; background-image: url("static/img/radial_bg_totop.svg");}*/

      .chi_siamo_bg_div{z-index: 3;}

      .professionisti_linea_mobile{height: auto; top: 140px; z-index: 3;}

      .contatti{overflow: hidden;}
      .contatti .contatti_foto{width: 120% !important; left: -20%; display: block;}
      .contatti .contatto{font-size: 22px;}
      .contatti .label_contatto{font-size: 19px;}

      .totop_div{right: 1%;}


      .foto_onda .onda_3{margin-top: 75%;}

      #cosa_facciamo, .inner_chi_siamo .titoletto{padding-top: 40px;}
      .chi_siamo_bg_div{transform: translateY(40px);}
    }

    @media screen and (min-width: 768px) {
      .contatti_foto{margin-top: -140px !important;}
      .recensioni{padding-top:150px !important; margin-top:-150px;}
      .container_img_prof{margin-top: -40px;}
    }