@import "settings.css";

@media only screen and (max-width: 1350px) {
    .container{
        width: 90%;
    }
}

/* #Tablet (Landscape)
================================================== */

@media only screen and (max-width: 1100px) {
    /* Page Width */
    .container{
        width: 920px;
    }

    /* Vertical Menu */
    .vertical-menu-outer {
        display: none;
    }
   
    .responsive-menu-wrap {
        display: block;
    }

}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */

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

    /* Page Width */
    .container{
        width: 700px;
    }

    .responsive-menu-wrap {
        display: block;
    }
}
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    /* Page Width */
    .container{
        width: 90%;
    }

    .container-wrapper {
        margin-top: 65px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .responsive-mobile-menu ul.mtree,
    .mobile-social-header .social-header-wrap {
        width: 100%;
    }
    
    .logo-menu-wrap {
        display: none;
    }
    .outer-header-wrap {
        border: 0;
    }
   
    #footer .social-header-wrap {
        float: none;
        margin-right: 0;
        text-align: center;
    }
    #footer .social-header-wrap a {
        text-align: center;
    }
    /* Display Responsive Menu */
    #toggle-menu {
        display: none;
    }
    .vertical-menu-outer {
        display: none;
    }
    .responsive-menu-wrap {
        display: block;
    }
    
    .vertical-menu {
        display: none;
    }
    
    .vertical-menu ul.mtree a,
    .responsive-mobile-menu ul.mtree a {
        font-size: 18px;
        line-height: 18px;
    }
    
    .responsive-mobile-menu ul.mtree .sub-menu a{
        font-size: 16px;
        line-height: 16px;
    }

    .responsive-menu-overlay {
        display: none !important;
        -webkit-transition: none;
        transition: none;
    }
    .responsive-mobile-menu {
        left: -99999px;
        width: 100%;
        max-width: 100%;
    }
    .menu-is-onscreen .responsive-mobile-menu {
        left: 0;
    }
    
    .featuredlinks h6{
        color: var(--color_white-7);
        padding-bottom: 10px;
        font-size: 20px;
    }
    .featuredlinks ul li {
        display: inline-block;
        padding: 0;
        color: var(--color_white-3);
    }

    .featuredlinks ul li a {
        position: relative;
        display: inline-block;
        line-height: 38px;
        color: var(--color_white-3);
        font-size: 16px;
        text-decoration: none;
        -webkit-transition: .2s;
        transition: .2s;
        padding-right: 8px;
    }
    
    .featuredlinks ul li a:hover {
        color: var(--color_white-7);
    }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {


    /* Page Width */
    .container {
        width: 90%;
    }
    .container-wrapper {
        margin-top: 65px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .responsive-menu-wrap {
        display: block;
    }

    .container-wrapper {
        padding-top: 68px;
    }
    .vertical-menu ul.mtree a,
    .responsive-mobile-menu ul.mtree a {
        font-size: 16px;
        line-height: 16px;
    }

    .responsive-mobile-menu {
        left: -99999px;
        width: 100%;
        max-width: 100%;
    }
    .menu-is-onscreen .responsive-mobile-menu {
        left: 0;
    }
}
/* iPhone 5 (Portrait) */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {

    /* Page Width */
    .container {
        width: 90%;
    }
}
/* iPhone 6 Portrait */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {

    /* Page Width */
    .container {
        width: 90%;
    }
}
/* iPhone 6 landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {

    /* Page Width */
    .container {
        width: 90%;
    }
}
/* iPhone 6+ Portrait */

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {

    /* Page Width */
    .container {
        width: 90%;
    }
}