@media (max-width:1200px) {
    .navigation .menu ul > li > a {
        padding: 5px 8px;
        display: block;
        color: #333;
        text-transform: capitalize;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        font-size: 14px;
        background: none;
    }

    .navigation_bar.stricky-fixed .menu ul > li > a {
        padding: 5px 4px;
        font-size: 15px;
    }

}

@media (max-width:1023px) {
    .nav-menu {
        width: 100%;
    }

    .navigation .navbar {
        display: inline-block;
        padding-left: 0;
        margin-left: 0px;
        padding: 0px 0px;
        right: 0px;
        float: right;
    }

    .navigation {
        position: absolute;
        top: -170px;
        z-index: 0;
        height: 0px;
        right: 0px;
        border-top: 0px;
    }

    .navigation > .menu {
        width: 100%;
        position: absolute;
        top: 100%;
        left: 15px;
        background: #423f3f;
        left: 0;
        height: 400px;
        top: 40px;
    }

    .navigation .menu {
        display: none;
        overflow: hidden;
        overflow-y: visible;
        position: relative;
        z-index: 9999;
        background: #f1f3f6;
        width: 100%;
    }

    .navigation > .menu ul > li {
        float: none;
        padding: 0 !important;
        padding-bottom: 0;
        display: block !important;
    }

    .navigation .menu ul > li > a {
        padding: 8px 15px;
        font-size: 15px;
        border-right: 1px dashed transparent;
        background: #eee;
    }

    .navigation > .menu {
        width: 100%;
        position: absolute;
        top: 40px;
        left: 15px;
        background: #636c78;
        left: 0;
    }

    .navigation > .menu ul > li > .pd-dropdown {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        top: auto !important;
        left: auto !important;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        width: 100%;
        display: none;
        transition: none !important;
    }

    .navigation > .menu ul > li > ul.pd-dropdown,
    .navigation > .menu ul > li > ul.pd-dropdown > li > .pd-dropdown {
        padding-top: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        display: none;
        transition: none;
        padding-right: 0px;
        width: 100% !important;
    }

    .menu ul {
        padding-bottom: 5px;
    }

    .menu ul > li > a {
        border-bottom: 1px solid #cccccc !important;
        color: #fff;
        display: block;
        font-size: 14px;
        padding: 0px 15px;
    }

    .menu ul .pd-submenu > a {
        position: relative;
    }

    .menu ul .pd-submenu > a > .button {
        display: block;
        position: absolute;
        top: 9px;
        right: 15px;
        background: #7fa409 none repeat;
        border: 1px solid #c4cab3;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        height: 30px;
        outline: medium none;
        width: 30px;
        padding: 0;
        text-align: center;
        line-height: 15px;
    }

    .menu ul .pd-submenu > a > .button {
        display: block;
        position: absolute;
        top: 2px;
        right: 15px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 5px;
        color: #999;
        font-size: 13px;
        height: 30px;
        outline: medium none;
        width: 30px;
        padding: 0;
        text-align: center;
        line-height: 40px;
    }

    .navigation_bar.stricky-fixed .logo {
        position: absolute;
        z-index: 9;
        width: 190px;
        top: 0px;
        margin: 0px;
        left: 10px;
    }

    .navbar {
        min-height: 40px;
        /*background: #fff !important;*/
        margin-bottom: 5px !important;
    }

    .navigation_bar.stricky-fixed {
        padding: 0px 0px;
        position: relative
    }

    .navigation_bar.stricky-fixed .navbar {
        background: #fff !important;
        box-shadow: none !important;
    }

    .navigation_bar.stricky-fixed .dn-fxds {
        display: none
    }

    .navigation_bar.stricky-fixed .navigation {
        border-top: 0px;
    }

    .navigation_bar.stricky-fixed .navigation {
        position: relative;
        top: 0px !important;
        z-index: 0;
        height: 0px;
        right: 20px;
        margin: 0px 0px;
        background: transparent;
    }

    .tophead {
        width: 100%;
    }

    .header {
        width: 100%;
    }
}

@media (max-width:980px) {
    .navigation .menu ul {
        float: right;
        width: 100%;
        text-align: left;
    }

    .nav-menu {
        margin-top: -60px;
    }

    .navigation > .menu ul > li {
        float: left;
        width: 100%;
        padding: 0 !important;
        padding-bottom: 0;
        display: block !important;
    }

    .navigation > .menu ul > li > ul.pd-dropdown,
    .navigation > .menu ul > li > ul.pd-dropdown > li > .pd-dropdown {
        padding-top: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        display: none;
        transition: none;
        padding-right: 0px;
        width: 100% !important;
        background: #c8202d;
    }

    .menu ul {
        padding-bottom: 0px;
    }

    .navigation .menu ul > li ul.pd-dropdown li {
        border: 0;
        width: 100% !important;
    }

    .navigation .menu ul > li ul.pd-dropdown li a {
        color: #fff;
        display: block;
        font-size: 14px;
        padding: 8px 15px;
        border-bottom: 1px solid #ba028d;
    }

    .navigation_bar.stricky-fixed .menu ul > li > a {
        padding: 8px 15px;
    }

    .navigation .menu ul > li ul.pd-dropdown li a {
        background: #a33d25;
    }

    .navigation .menu ul > li ul.pd-dropdown li a:hover {
        background: #ef682f;
        color: #fff;
    }

    .navigation .menu ul > li:hover a

    /*, .navigation .menu ul > li.active a*/
        {
        color: #fff;
        background: #c8202d;
    }

    .menu ul li.has-submenu > a > button {
        display: block;
        position: absolute;
        top: 6px;
        right: 15px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 5px;
        color: #fff;
        font-size: 13px;
        height: 30px;
        outline: medium none;
        width: 30px;
        padding: 0;
        text-align: center;
        line-height: 15px;
    }

    .navigation .menu ul > li ul.pd-dropdown li:hover > a {
        color: #fff;
        background: #ef682f;
    }

}

@media (max-width:768px) {
    .navigation > .menu ul > li {
        float: left;
        width: 100%;
        padding: 0 !important;
        padding-bottom: 0;
        display: block !important;
    }

    .navigation {
        position: absolute;
        top: -125px;
        z-index: 0;
        height: 0px;
        right: 10px;
    }

    .top-social li a {
        font-size: 12px;
    }

    .top-social li a i {
        font-size: 16px;
    }

    #home_services {
        margin-top: 50px;
    }


    .nav_menutop {
        float: right;
        margin: 5px auto 0px;
        width: 100%;
        text-align: right;
    }

    .nav_menutop > ul > li > a {
        color: #000;
    }

    .nav_menutop > ul > li i {
        color: #a9afb7;
        font-size: 20px;
    }

    .nav_menutop > ul > li > a .cart-cap-text {
        top: -10px !important;
        left: 12px !important;
    }

    .navigation_bar .logo {
        width: 150px;
        margin: 10px 0px;
    }

    .nav_menutop > ul > li {
        padding: 5px 2px 5px;
        margin: 0px;
    }

    .navbar {
        min-height: 40px;
        /*background: #fff !important;*/
        margin-bottom: 5px !important;
    }

    .navigation_bar.stricky-fixed .navbar {
        background: #fff !important;
        box-shadow: none !important
    }
}

@media (max-width:767px) {
    .navigation {
        position: absolute;
        top: -165px;
        z-index: 0;
        height: 0px;
        right: 0px !important;
        margin: 0px !important
    }

    .navigation > .menu ul > li {
        float: left;
        width: 100%;
        padding: 0 !important;
        padding-bottom: 0;
        display: block !important;
    }

    @media (max-width:767px) {
        .navigation > .menu ul > li {
            float: left;
            width: 100%;
            padding: 0 !important;
            padding-bottom: 0;
            display: block !important;
        }

        .thw100 {
            width: 100%;
        }
    }

    @media (max-width:650px) {
        .header {
            float: left;
            width: 100%;
            position: relative;
            z-index: 9;

        }

        .nav-menu {
            width: 100%;
            margin-top: -60px;
        }

        .navigation > .menu ul > li {
            float: left;
            width: 100%;
            padding: 0 !important;
            padding-bottom: 0;
            display: block !important;
        }

        .cart_left table {
            border: 0;
        }

        .cart_left table thead {
            display: none;
        }

        .cart_left table tr {
            float: left;
            width: 100%;
            margin-bottom: 10px;
            display: block;
            border-bottom: 1px solid #ddd;
            padding: 0;
        }

        .cart_left table tbody th {
            display: none;
        }

        .cart_left table th:last-child {
            border-bottom: 0;
        }

        .cart_left table th:before {
            content: attr(data-label);
            float: left;
            text-transform: uppercase;
            font-weight: bold;
            color: #183883;
        }

        .cart_left table td {
            display: block;
            text-align: left;
            font-size: 13px;
            border-bottom: 1px dotted #ccc;
            float: left;
            width: 100%;
        }

        .cart_left table td::before {
            content: attr(data-label);
            float: left;
            text-transform: uppercase;
            font-weight: bold;
            color: #fff;
            width: 100%;
            text-align: left;
            background: #a33d25;
            padding: 5px 5px;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .cart_info {
            float: left;
            text-align: left;
        }

        .cart_image a img {
            width: 100%
        }
    }

    @media (max-width:480px) {

        .header .topbar ul.top-nav li {
            padding: 0px;
            font-size: 11px;
            border: 0;
            font-weight: 600;
        }

        .navigation > .menu {
            width: 100%;
            position: absolute;
            top: 100%;
            left: 15px;
            background: #423f3f;
            left: 0;
            height: 400px;
            top: 40px;
        }

        .lgw {
            width: 100%;
        }

        .nav-menu {
            width: 100%;
        }

        .navigation > .menu ul > li {
            float: left;
            width: 100%;
            padding: 0 !important;
            padding-bottom: 0;
            display: block !important;
            width: 100% !important;
        }

        .navigation .menu ul > li {
            display: block;
        }

        .navigation_bar .logo {
            /*position: absolute;*/
            top: 6px;
            z-index: 100;
            margin: 10px 0px;
        }

        .navigation_bar.stricky-fixed .logo {
            width: 160px;
            margin: 5px 0px 0px;
            position: absolute;
            left: 20px;
            top: 0px;
        }

        .navigation_bar.stricky-fixed .nav_menutop {
            display: none
        }

        .nav_menutop > ul > #search-btn button {
            border-bottom: 0px;
        }

        .navigation_bar .logo img {
            width: 115px;
        }

        .navigation .menu ul > li:hover a,
        .navigation .menu ul > li.active a {
            color: #fff;
            background: #666;
        }

        .navigation .menu ul > li > ul.pd-dropdown > li > ul.pd-dropdown {
            left: 100%;
            margin-top: 0px !important;
        }
        .login-area .login-form{
            padding: 0px;
        }
        .app-figure{
            height: 300px;
            margin-bottom: 10px;
        }


    }

    @media (min-width:300px) and (max-width:677px) {
        .tophead {
            padding: 5px 0px;
        }

        .header {
            margin-top: 00px;
        }

        .nav_menutop {
            margin-top: 0px;
        }
    }

    @media (min-width:480px) and (max-width:677px) {

        .upload-pres,
        .tcrel {
            margin-top: 25px;
        }

        .upload-pres {
            margin-top: 0px;
        }

        .top-social li a {
            font-size: 12px !important;
        }
    }

    @media (min-width:678px) and (max-width:896px) {
        .tophead {
            position: fixed
        }

        .upload-pres {
            margin-top: 25px;
        }

        .top-social li a {
            font-size: 13px;
        }
    }

    @media (max-width:900px) {

        .nav_menutop > ul > li #search-btn input,
        .nav_menutop > ul > li #search-btn select {
            width: 240px !important;
        }

        .upload-pres {
            padding-top: 25px
        }

    }
    
    @media (min-width:300px) and (max-width:320px) {
      .top-social li a {
        font-size: 11px;
          padding: 0px;
    }
        .upload-pres{
            width: 140px;
            font-size: 11px;
            padding: 0px;
        }
        .upload-pres .prescription-btn{
            width: 150px;
        }
    }
    
    @media(min-width:300px)and (max-width:480px){
        .upload-pres{  padding-top: 0px;
        }
    }
} /* closes @media (max-width:767px) opened above; it was left unclosed in the original file */

/* ============================================================
   App-like mobile UI: drawer (sidebar) + bottom tab bar
   ============================================================ */

.togbtn {
    z-index: 9002;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
}

.sidebar-overlay.show {
    display: block;
}

.sidebar {
    top: 0;
    z-index: 9001;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #2a3f35;
}

.sidebar-logo {
    width: 130px;
}

.sidebar-close {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 5px 8px;
}

.navi ul.sidebar-quicklinks {
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #4a6b5b;
}

.sidebar-quicklinks li {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-quicklinks li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-quicklinks li a i {
    width: 20px;
    display: inline-block;
    text-align: center;
}

.sidebar-quicklinks li a:hover,
.sidebar-quicklinks li a:focus {
    background: #2a3f35;
    color: #fff;
    text-decoration: none;
}

.sidebar-section-title {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 12px 14px 4px;
    opacity: .85;
}

.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
}

.mbn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 2px 6px;
    color: #777;
    text-decoration: none;
    font-size: 10px;
    line-height: 1.4;
}

.mbn-item i {
    font-size: 19px;
    margin-bottom: 2px;
}

.mbn-item:hover,
.mbn-item:focus,
.mbn-item.active {
    color: #4a6b5b;
    text-decoration: none;
}

.mbn-icon-wrap {
    position: relative;
    display: inline-block;
}

.mbn-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #a33d25;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    padding: 0 3px;
}

@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* body has a JS-set fixed height with overflow-y:auto (a mobile
       viewport-height hack), which makes the browser scroll the real
       viewport instead of body per the overflow-propagation quirk - so
       padding-bottom on body itself lands at the edge of that small fixed
       box, not at the page's actual visual end. Target footer instead,
       which lays out normally and really does sit at the bottom of the
       page, so the copyright text isn't hidden behind the bottom nav. */
    /* .foot-mid's own bottom padding (20px on the div + 20px on the p,
       meant for desktop breathing room) is what's leaving the remaining
       dead space once the bottom nav/back-to-top are also accounted for.
       Shrink it on mobile so the copyright line sits close to the button. */
    .foot-mid.copyright {
        padding-bottom: 8px;
    }

    .copyright p {
        padding-bottom: 4px;
    }

    footer {
        /* Clears the 52px bottom nav plus the back-to-top button that
           floats just above it (button is ~46px tall). */
        padding-bottom: calc(52px + 4px + 46px + env(safe-area-inset-bottom));
    }

    .back-to-top {
        bottom: calc(52px + 4px + env(safe-area-inset-bottom));
    }

    /* Bottom tab bar already covers these (Categories tab opens the same
       drawer; Cart/Wishlist/Login are their own tabs), so hide the
       duplicate floating hamburger and the quicklinks list in the drawer. */
    .togbtn {
        display: none;
    }

    .navi ul.sidebar-quicklinks {
        display: none;
    }

    /* The mobile search bar (li.searchblock) fixes input to 75% width and
       lets the button float right at its intrinsic width, leaving a gap of
       bare #search-btn background between them. Flexbox makes the input
       fill exactly what the button doesn't use, no gap regardless of width. */
    .nav_menutop > ul > li.searchblock #search-btn {
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .nav_menutop > ul > li.searchblock #search-btn input {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        float: none;
    }

    .nav_menutop > ul > li.searchblock #search-btn button {
        flex: 0 0 auto;
        float: none;
    }

    /* Pin-Location to the far left, Register/Login to the far right of the top bar. */
    .tophead ul.top-social {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    /* Cart and Wishlist icons sit right next to each other with almost no
       gap; add breathing room between them (but not before the first item). */
    .nav_menutop.pull-right > ul > li + li {
        margin-left: 20px !important;
    }

    /* Logo column has a Bootstrap gutter that leaves it slightly off the
       true edge; pin it flush to the left on mobile. */
    .header > .container > .col-xs-6:first-child {
        padding-left: 0;
    }

    /* "Shop by category" cards: tighten the column gutter and card
       padding so 4-per-row cards sit closer together and the product
       image (width:100% of its box) has more room to render at a
       bigger size, instead of shrinking inside a lot of empty padding. */
    .shop-by-cat-outer .col-xs-3 {
        padding: 0 4px;
    }

    .shop-by-category .shop-cat-box {
        padding: 6px 6px;
        margin: 4px 0;
    }
}