body, .container-bg, .container-philosophy, .container-service{ overflow-x: hidden;}

main{}

header{ position: fixed; top: 0; left: 0; right: 0;  z-index: 11;  }
header.scroll{background: rgba(163,167,69,0.7); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
header.scroll .box-logo-hamb {width: 12%; max-width: 180px; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
.header{display: flex; position: relative; padding: 25px 0; width: 90%; margin: auto; align-items: center;}
.header nav ul li{ display: inline-block; vertical-align: middle; margin-right: 45px;font-family: 'Open Sans', sans-serif; font-size: 25px;}
.header nav ul li a{ color: #FFF; text-decoration: none;}
.header .logo{margin-bottom: -13%;}
header.scroll .header .logo{margin-bottom: 0;}
header.scroll .header{padding: 10px 0;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
.box-logo-hamb{position: relative;width:16%; max-width: 292px; text-align: right;}
.push{margin-left: auto; }


.relative{ position: relative; z-index: 0;}
.back-top{ position: fixed; right: 0; bottom: 5%; z-index: 1; }
.back-top img{ margin-top: 20px; margin-right: 5px; cursor: pointer;}
.container-bg{ background: #f4f4f4 url("../images/bg-lira.svg") no-repeat center center; background-size: 100%; }
.container-int{ width: 90%; margin: auto;  }
.box-main-top{ min-height: 100vh; background: url("../images/main.jpg") no-repeat center center; background-size: cover;position: relative;
    z-index: 2; font-family: 'Lato', sans-serif; font-size: 130px; color: #FFF; display: flex; align-items: center;}
.box-main-top p{ width: 90%; margin: auto; line-height: 100%;}
.intro-top{ display: grid; grid-template-columns: 30% 1fr; font-family: 'Open Sans', sans-serif; font-size: 30px; color: #5D5D5D; padding: 5% 0 10%;}
.intro-top .img-left img{max-width: 77%;}
.blocco-grid-50{ padding-bottom: 11%;}
.grid-50{display: grid; grid-template-columns: 1fr 1fr; grid-gap:5%; padding: 3% 0;}
.capitol-section{font-family: 'Lato', sans-serif; font-size: 25px; color: #6A8776;}
.capitol-section.right{text-align: right;}
.title-section{font-family: 'Lato', sans-serif; font-size: 70px; line-height: 110%;}
.title-section.gold{ color:#A3A745;}
.descr-section{font-family: 'Open Sans', sans-serif; font-size: 30px; color: #5D5D5D; padding-top: 60px;padding-left: 15%;}
.descr-section.no-pd{padding-left: 0;}
#blocco_3{ padding-bottom: 2%;}

.container-philosophy{  background-color: #FFF; font-size: 0;}
.phil{ padding: 5% 0;}
.onda-philosophy{ width: 100%;}
.grid-philosophy{ display: grid; grid-template-columns: 55% 1fr; grid-gap: 5%; align-items: center;}
.rounded-box{text-align: center; border: 1px solid #707070; border-radius: 500px;padding: 25% 16%; }
.rounded-box .title{font-family: 'Lato', sans-serif; font-size: 50px; color:#A3A745; }
.rounded-box .descr{font-family: 'Open Sans', sans-serif; font-size: 30px; color: #5D5D5D; padding-bottom: 10%; }
.rounded-box .descr:last-child{ padding-bottom: 0; }

.container-service{ background-color: #f4f4f4;}


.box-toggle-service{display: grid; grid-template-columns: 1fr 1fr; position: relative; margin-bottom: 11%;}
.box-toggle-service .title{font-family: 'Lato', sans-serif; font-size: 100px; line-height: 110%; color: #747474; cursor: pointer;}
.box-toggle-service .title.selected, .box-toggle-service .title:hover{ color: #A3A745;}
.box-descr-services{font-family: 'Open Sans', sans-serif; font-size: 28px; line-height: 110%; color: #747474; cursor: pointer; position: absolute; right: 0; bottom: 0; max-width: 45%; display: none; text-align: right;}
.box-descr-services p{ padding-top: 8px;}

.luoghi{ margin: 5% auto;}
.cont-contatti{ background: url("../images/bg-contatti.png") no-repeat; background-size: cover; padding: 10% 0 5%;}
.grid-contatti{  font-family: 'Open Sans', sans-serif; font-size: 50px; padding: 8% 0 5%; color: #9A9630;  }
.grid-contatti > div:first-child{ margin-bottom: 60px;}
.grid-contatti a{ color: #9A9630; }
.pd-mod-contatti{ padding: 5% 0 3%;}




/* FOOTER inizio */
footer{ display: flex; position: relative; padding: 40px 0; width: 90%; margin: auto; align-items: center;}
.rag-sociale{ text-transform: uppercase; color: #818181;font-family: 'Open Sans', sans-serif; font-size: 25px;}
.rag-sociale a{ text-decoration:none; color: #000;}
/* FOOTER fine */


@media(max-width: 1921px) {
    .header nav ul li, .title-section, .rag-sociale, .capitol-section{  font-size: 1.13vw;}

    .intro-top, .descr-section, .rounded-box .descr{  font-size: 1.36vw; }
    .title-section{font-size: 3.15vw;}
    .box-main-top{font-size: 5.90vw;}
    .rounded-box .title, .grid-contatti{font-size: 2.26vw;}
    .box-toggle-service .title{ font-size: 4.53vw;}
    .box-descr-services{font-size: 1.27vw;}
}


/*@media screen and (min-width: 1024px) and (max-width: 1300px)
{
    .header nav ul li{ font-size: 20px; margin-right: 30px;}
}*/

@media(min-width: 1024px) {
    /*.box-toggle-service .title:hover + .box-descr-services{ display: block;}*/
}

@media(max-width: 1023px) {

    .header{ display: block; padding: 20px 0 0;}
    header.scroll .header{ padding: 10px 0 10px;}
    header.scroll .header .logo{ width: 100px; margin-top: -5px; margin-bottom:-5px;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
    header.scroll .box-logo-hamb, .box-logo-hamb{ max-width: none; width: 100%; text-align: left;}
    header.scroll .hamburger{ top:-6px !important;}
    .header nav{ position: fixed; right: -100%; width: 80%; height: 100%;  background: rgba(0,0,0,.8);
        /*z-index:12;*/ top: 0;padding: 50px 0;
        text-align: center;}
    .header nav ul li{ display: block; margin: 20px auto; font-size: 20px;}
    .header nav ul li.sost{ padding-left: 0;}
    header{ top: 0; border-top: 0;}
    .header .logo{ top: 12px; width: 140px;}

    .ico-hamb{ position: absolute; right: 0; width: 45px; z-index: 1;}
    .box-logo-hamb{ width: 100%;}


    .grid-50, .intro-top, .grid-philosophy, .grid-contatti{ display: block;}

    .title-section, .capitol-section{  font-size: 13px;}
    .rag-sociale{ font-size: 10px;}
    .header nav ul li{ font-size: 20px;}

    .box-descr-services{ font-size: 14px;}
    .intro-top, .descr-section, .rounded-box .descr{  font-size: 15px; }
    .title-section{font-size: 35px;}
    .rounded-box .title, .grid-contatti{font-size: 30px;}
    .box-main-top{font-size:50px;}
    .box-toggle-service .title{ font-size: 40px;}


    .blocco-grid-50 img{ margin-bottom: 25px;}
    .intro-top{ padding-bottom: 100px;}
    .intro-top .img-left img{ max-width: 50%; margin: 20px 0;}
    .rounded-box{ margin-top: 50px;}
    .grid-contatti > div:first-child{ margin-bottom: 20px;}


    .box-toggle-service{ width: 100%; display: block; margin:5% 0 15%;}
    .box-descr-services{position: static; max-width: 100%; margin: 5% 0 10%; }
    .box-descr-services > img, .box-descr-services > p{ display: inline-block; max-width: 49%; vertical-align: middle;}
    .box-descr-services > p{ padding-left: 5%;}
    .box-toggle-service .title{ margin-bottom: 10px;}

    .container-bg{ background: #f4f4f4; }


    footer{ grid-template-columns: 40% 13% 1fr; display: grid;}
    footer img{ width: 120px;}

    /* transition CSS menu mobile*/
    .header  .menu_mobile_open{ right:0;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
    .header  .menu_mobile_close{ right:-80%;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
    /* transition CSS menu mobile*/

    .hamburger{ top: 0;}


}

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

    .capitol-section{  font-size: 20px;}
    .rag-sociale{ font-size: 15px;}
    .header nav ul li{ font-size: 35px;}
    .header .logo{ width: 250px;}
    .hamburger{ top: 32px;}

    .box-toggle-service .descr{ font-size: 18px;}
    .intro-top, .descr-section, .rounded-box .descr{  font-size: 20px; }
    .title-section{font-size: 43px;}
    .rounded-box .title, .grid-contatti{font-size: 45px;}
    .box-main-top{font-size: 75px;}
    .box-toggle-service .title{ font-size: 60px;}

    .box-descr-services > p{font-size: 23px; line-height: 110%;}




}




@media screen and (min-width:1024px)
{
    .hide-on-desktop{ display: none;}
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    .hide-on-tablet{ display: none !important;}


}
@media screen and (min-width: 0px) and (max-width: 767px)
{
    .hide-on-mobile{ display: none;}
}

[v-cloak] {display: none}



.hamburger{    width: 60px;
    position: absolute;
    right: 0;
     z-index: 1;}
.hamburger .line{
    width: 50px;
    height: 4px;
    background-color: #ecf0f1;
    display: block;
    margin: 12px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger:hover{
    cursor: pointer;
}

/* ONE */

#hamburger-1.is-active .line:nth-child(2){
    opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
    -webkit-transform: translateY(20px) rotate(45deg);
    -ms-transform: translateY(20px) rotate(45deg);
    -o-transform: translateY(20px) rotate(45deg);
    transform: translateY(20px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
    -webkit-transform: translateY(-12px) rotate(-45deg);
    -ms-transform: translateY(-12px) rotate(-45deg);
    -o-transform: translateY(-12px) rotate(-45deg);
    transform: translateY(-12px) rotate(-45deg);
}



@media(max-width: 767px) {
    .hamburger .line {
        height: 3px;
        width: 45px;
    }


    #hamburger-1.is-active .line:nth-child(1){
        -webkit-transform: translateY(18px) rotate(45deg);
        -ms-transform: translateY(18px) rotate(45deg);
        -o-transform: translateY(18px) rotate(45deg);
        transform: translateY(18px) rotate(45deg);
    }

    .cont-contatti {
        background: url(../images/bg-contatti.png) no-repeat right;
        background-size: 250%;}
}