@media only screen and (max-width : 1440px){
    body{
        --wp--preset--font-size--medium-2: 1.375rem !important;
    }
}
@media only screen and (max-width : 1281px){

}
@media only screen and (max-width : 1181px){
    
}
@media only screen and (max-width : 1023px){
    :root{
        --navbar-height: 85px;
        --navbar-submenu-width: auto;
        --page-header-height: 40vh;
    }
    .mask #primaryNav{
        background-color: var(--joe-white);
        height: 100vh;
        left: 0;
        line-height: 4;
        padding-top: var(--navbar-height);
        position: fixed;
        top: 0;
        text-align: center;
        width: 100vw;
        z-index: 999;
    }
}
@media only screen and (max-width : 992px){
    #joeslider .js-item{
        background-attachment: scroll;
    }
    body{
        --wp--preset--font-size--medium-2: 1.25rem !important;
        --wp--preset--font-size--large-2: 2rem !important;
        --wp--preset--font-size--huge: 7rem !important;
    }
}
@media only screen and (max-width : 768px) {
    :root {
       
    }
    #joeslider .js-item{
        height: var(--main-slide-height);
    }
}
@media only screen and (max-width : 507px){
    :root {
        --logo-icon-height: 40px;
        --logo-icon-width: 44px;
        --logo-text-height: 44px;
        --logo-text-width: 150px;
        --huge-font-size: 2.35rem;
    }
    body{
        --wp--preset--font-size--medium: 1.125rem !important;
        --wp--preset--font-size--large: 1.875rem !important;
        /* --wp--preset--font-size--x-large: 42px; */
        /* --wp--preset--font-size--normal: 16px; */
        /* --wp--preset--font-size--medium-2: 1.25rem !important; */
        /* --wp--preset--font-size--medium-3: 30px; */
        /* --wp--preset--font-size--large-2: 2rem !important; */
        /* --wp--preset--font-size--large-3: 64px; */
        /* --wp--preset--font-size--huge: 7rem !important; */
    }
    #joe-header .logo {
        padding: 0.5rem;
    }
    #joe-header .navbar-collapse.show .nav-link,
    #joe-header .navbar-collapse.show+.nav-contact-info .text-white{
        color: var(--joe-dark) !important;
    }
    #joe-header .navbar-collapse ul{
        border-top: 1px solid var(--border-muted-color);
    }
    #joe-header .navbar-collapse ul li{
        border-bottom: 1px solid var(--border-muted-color);
    }
    .mask .breadcrumb{
        font-size: x-small;
    }
    blockquote:before {
        font-size: 5rem;
        margin-left: -5px;
        top: -2.5rem;
    }
}
@media only screen and (max-width : 375px){
    
}
@media only screen and (max-width : 320px){
    
}
@media only screen and (max-width: 1024px) and (max-height: 768px) and (orientation: landscape){

}