@media (max-width:1200px) {    

    :root {
        --wrap: 1024px;
        --margins: calc(100% - var(--wrap));
          --margin: calc(var(--margins) / 2 );
    }

    .showOnDesktop {display:none;}
    .showOnMobile {display:block;}

    .narrow {width: 100%;}

    .half.ig {width: 100%;}
    .half.f-holder {width: 100%; max-width: 600px; margin: 0 0 70px 0;}
    .flex.border_l {flex-wrap: wrap; justify-content: center;}

    .flex.border_l:after {display: none;    }

}

@media (max-width:1080px) {

    :root {
        --wrap: 90%;
        --margins: calc(100% - var(--wrap));
          --margin: calc(var(--margins) / 2 );
    }

    body.hideoverflow {overflow-y: hidden;}

    .menu {
        height: 0;
        overflow: hidden;
        display: block;
        padding: 0;
        position: fixed;
        top: 65px;
        background: white;
        width: 100vw;
        left: 0;
        transition: none;
    }
    .menu.open {height: auto; padding: 0 5%; max-height:calc(100vh - 65px); overflow-y: auto; }

    .menu li,
    .menu li:last-child {
        display: block;
        line-height: normal;
        text-align: left; 
        border-top: 1px solid var(--grey-lite2);
        padding:0;
    }
    .menu li:first-child {border-top: none; }

    .menu li a {text-transform: none; padding: 18px 0 18px 0; font-size:15px;}

    .menu_trigger {display: inline-block; width: 65px; height: 65px; background-repeat: no-repeat; background-position: center center; background-image: url(../img/hamburger.svg); position: absolute; top: 0; right: 0; }

    .open .menu_trigger {background-image: url(../img/close_menu.svg);}

    .half_wrap {
        width: calc(100%);
        padding: 50px 0;
    }

}



@media (max-width:900px) {

    .flex {
        flex-wrap: wrap;
    }

    .half, .half2 {
        width: 100%;
    }

    /* .half:first-child {
        margin-bottom: 30px;
    } */

    .inner_padding {
        padding: 0 5% 0 50px;
    }

    .flex.border_l:after {display: none;}

}




@media (max-width:767px) {

    :root {
        --wrap: 90%;
        --margins: calc(100% - var(--wrap));
          --margin: calc(var(--margins) / 2  );
    }

    h2 {
        font-size: 20px;
    }

    .hero .owl-nav {display: none;}

    .hero_desc {
        bottom: auto;
        top: 50%;
        left: var(--margin);
        width: 90%;
        text-align: center;
        transform: translateY(-50%);
    }

    .hero_desc h3 {font-size: 24px; padding-bottom: 15px; }

    .hero_desc span { font-size: 16px; padding-bottom: 30px; }

    .inner_section {padding: 40px 0;  }

    .slider .owl-carousel .owl-item img {
        height: 300px;
    }
    
}


@media (max-width:480px) {
    
}