/*************************************
   TABLET / MOBILE (992px and below)
**************************************/

@media (max-width:992px){

    .nav-menu > li > a{
        padding:10px 15px !important;
        white-space:normal;
    }


    /* SHOW HAMBURGER */
    #menuToggle{

        display:flex !important;

        align-items:center;
        justify-content:center;

        z-index:10001;

        background:none;
        border:none;
        cursor:pointer;
    }


    /* MOBILE SLIDE MENU */

    .nav-menu{

        position:fixed;

        top:0;
        right:0;

        width:260px;
        height:100dvh;

        background:#fff;

        transform:translateX(100%);

        transition:transform .35s ease;

        z-index:9998;

        display:flex;

        flex-direction:column;

        padding:60px 0 20px;

        margin:0;

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior:contain;
    }


    .nav-menu.active{

        transform:translateX(0);

    }


    .nav-menu li,
    .nav-menu ul{

        margin:0;
        padding:0;

        list-style:none;
    }


    .nav-menu a{

        display:block;

        padding:10px 15px;

        line-height:1.2;
    }


 /* MOBILE SUBMENU */

.nav-menu > li{
    position:relative;
}

.nav-menu .submenu{

    display:none;

    position:static;

    width:100%;

    margin:0;

    padding:0;

    list-style:none;

    background:#f7f7f7;
}

.nav-menu .submenu.active{

    display:block;
}

.nav-menu .submenu li{

    display:block;

    width:100%;

    margin:0;

    padding:0;
}

.nav-menu .submenu li a{

    display:block;

    width:100%;

    padding:10px 20px 10px 35px;

    font-size:15px;

    text-align:left;

    border-bottom:1px solid #ececec;

    background:#f7f7f7;
}
    body.menu-open #menuToggle{

        display:none !important;

    }

}



/*************************************
   MOBILE LANDSCAPE
**************************************/

/*@media (max-width:992px) and (orientation:landscape){*/

/*    .nav-menu > li > a{*/

/*        padding:8px 15px !important;*/

/*        font-size:13px;*/
/*    }*/


/*    .nav-menu{*/

/*        padding-top:25px;*/

/*        padding-bottom:15px;*/

/*    }*/


/*    .nav-menu,*/
/*    .nav-menu .submenu{*/

/*        background:#fff;*/

/*    }*/


/*    .nav-menu .submenu a{*/

/*        background:transparent;*/

/*    }*/

/*.nav-menu > li > a{*/

/*    text-align:left;*/

/*    display:block;*/

/*}*/

/*.nav-menu .submenu li a{*/

/*    text-align:left;*/

/*    display:block;*/

/*}*/
/*}*/
@media (max-width:992px) and (orientation:landscape){

    .nav-menu{

        padding-top:25px;

        padding-bottom:15px;

        background:#fff;

    }

    .nav-menu > li > a{

        display:block;

        padding:10px 20px;

        font-size:15px;

        text-align:left;
    }

    .nav-menu .submenu{

        background:#f7f7f7;
    }

    .nav-menu .submenu li a{

        display:block;

        padding:10px 20px 10px 35px;

        font-size:15px;

        text-align:left;
    }

.nav-menu{
    align-items: stretch !important;
}

.nav-menu > li{
    width: 100%;
}

.nav-menu > li > a{
    width: 100%;
    text-align: left !important;
    justify-content: flex-start;
    display: block;
}
}


/*************************************
   PHONES (768px and below)
**************************************/

@media(max-width:768px){
.nav-menu > li {
    position: relative;
}

    .navbar{

        padding:10px 30px;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        height:auto;
    }


    .nav-logo{

        align-items:center;

        gap:12px;

        margin-bottom:12px;
    }


    .nav-logo img{

        width:40px;

    }


    .nav-logo a{

        font-size:18px;

    }


    .menu-toggle{

        display:block;

        margin-left:20px;

        z-index:1002;

        background:none;

        border:none;

        cursor:pointer;

        color:#0054A6;

        font-size:28px;

    }


    .nav-menu{

        width:300px;

        right:-320px;

        flex-direction:column;

        align-items:stretch;

        padding-top:0;

        margin-top:0;

        background:#fff;

        box-shadow:-5px 0 20px rgba(0,0,0,.15);

    }


    .nav-menu.active{

        right:0;

    }


    .nav-menu > li{

        width:100%;

    }


    .nav-menu > li > a{

        padding:16px 20px;

        text-align:left;

        border-bottom:1px solid #eee;

        line-height:1.2;
    }



    /* SUBMENU */

    .submenu{

        position:static;

        width:100%;

        min-width:100%;

        border-top:none;

        box-shadow:none;

        background:#f7f7f7;

    }


    .submenu.active{

        display:block;

    }


    .submenu li a{

        padding:12px 30px;

    }


    /*.nav-menu li:hover .submenu{*/

    /*    display:block;*/

    /*}*/



    /* OVERLAY */

    .menu-overlay{

        display:block;

        position:fixed;

        top:0;

        left:0;

        width:100%;

        height:100%;

        background:rgba(0,0,0,.5);

        opacity:0;

        visibility:hidden;

        transition:.3s;

        z-index:1000;
    }



    /* HERO */

    .hero-banner{

        height:220px;

    }



    /* CONTENT */

    .content,
    .product{

        padding:30px 15px;

    }


    .content{

        font-size:16px;

        line-height:1.7;

    }


    .content h1,
    .product h1{

        font-size:28px;

        line-height:1.3;

    }



    /* NORMAL TABLE */

    table{

        display:block;

        width:100%;

        overflow-x:auto;

        white-space:nowrap;

    }


    table th,
    table td{

        padding:10px;

    }



    /* GALLERY */

    .gallery{

        grid-template-columns:1fr;

        gap:15px;

    }


    .gallery img:hover{

        transform:none;

    }



    /* FOOTER */

    .footer-container{

        padding:30px 15px;

    }


    .footer-products{

        justify-content:center;

        gap:8px;

    }


    .footer-products a{

        font-size:13px;

        padding:6px 8px;

    }


    .footer-info{

        font-size:13px;

    }

}




/*************************************
   SMALL TABLETS / LARGE PHONES
**************************************/

@media(max-width:600px){


    .page-title{

        font-size:1.6rem;

        margin:15px 0;

    }

}



/*************************************
   SMALL PHONES (480px and below)
**************************************/

@media(max-width:480px){


    .navbar{

        padding:15px;

    }


    .nav-logo img{

        width:35px;

    }


    .nav-logo a{

        font-size:16px;

    }


    .hero-banner{

        height:180px;

    }


    .content,
    .product{

        padding:45px 32px;

    }


    .content{

        font-size:17px;

    }


    .content h1,
    .product h1{

        font-size:24px;

        margin-bottom:15px;

    }


    .footer-products{

        flex-direction:column;

        width:100%;

    }


    .footer-products a{

        width:100%;

        text-align:center;

    }


    .footer-info{

        font-size:12px;

        line-height:1.7;

    }


    .footer-bottom{

        font-size:12px;

        padding:12px;

    }

}



/*************************************
   MOBILE ONLY
**************************************/

.mobile-only{

    display:none;

}


@media(max-width:768px){

    .mobile-only{

        display:block;

    }

}



/*************************************
   PRODUCT TABLE MOBILE SPEC MODE
**************************************/

@media(max-width:768px){


    .product-table thead{

        display:none;

    }


    .product-table,
    .product-table tbody,
    .product-table tr{

        display:block;

        width:100%;

    }


    .product-table tr{

        background:#fff;

        border:1px solid #ddd;

        border-radius:10px;

        margin-bottom:12px;

        padding:12px 14px;

        box-shadow:0 1px 2px rgba(0,0,0,.05);

    }


    .product-table td{

        display:flex;

        justify-content:space-between;

        gap:12px;

        padding:6px 0;

        border:none;

        font-size:14px;

        line-height:1.4;

        word-break:break-word;

        overflow-wrap:anywhere;

    }


    .product-table td::before{

        content:attr(data-label);

        font-weight:600;

        color:#333;

        flex:0 0 45%;

    }

}



/*************************************
   PRODUCT TABLE SMALL MOBILE
**************************************/

@media(max-width:600px){


    .product-table{

        border:0;

        width:100%;

    }


    .product-table tr{

        background:#f8f8f8;

        border-bottom:3px solid #ddd;

    }


    .product-table td{

        text-align:right;

        position:relative;

        padding-left:50%;

        border-bottom:1px solid #ddd;

    }


    .product-table td::before{

        color:#0066cc;

        position:absolute;

        left:0;

        width:45%;

        padding-left:.625em;

        text-align:left;

        text-transform:uppercase;

        font-weight:bold;

    }


    .product-table td:last-child{

        border-bottom:0;

    }

}

@media (max-width:992px) and (orientation:landscape){

    body{
        font-size:14px;
        line-height:1.5;
    }

    .content,
    .product{
        font-size:14px;
        line-height:1.5;
        padding:20px 15px;
    }

    h1{
        font-size:22px;
    }

    h2{
        font-size:18px;
    }

    h3{
        font-size:16px;
    }

    .page-title{
        font-size:20px;
        margin:10px 0;
    }

    table th,
    table td{
        font-size:13px;
        padding:8px;
    }
}