/* Mobile */
@media (max-width: 360px) {
    .navbar-collapse {
        top: 23px!important;
        right: -25px!important;
        min-width: 310px!important;
        max-width: 310px!important;
    }

    #sub-menu-container {
        left: -110%!important;
        min-width: 92vw!important;
        max-width: 97vw!important;
        right: -25px!important;
        top: 13px!important;
    }

    .shop-specials-slide.customize-tools .controls, .shop-liquidsoap-slide.customize-tools .controls, .related-products-slide.customize-tools .controls, .shop-slide.customize-tools .controls {
        top: 105%!important;
        opacity: 1;
    }

    .shop-personalcare-slide.customize-tools .controls {
        top: 100%!important;
        opacity: 1;
    }

    .shop-slide.customize-tools .controls li i {
        color: #000;
        border: 1px solid #000;
    }

    .shop-section span>a {
        line-height: 30px;
        text-align: left;
        display: block;
    }

    .shop-specials-slide.customize-tools .controls .prev, .shop-liquidsoap-slide.customize-tools .controls .prev, .related-products-slide.customize-tools .controls .prev, .shop-personalcare-slide.customize-tools .controls .prev, .shop-slide.customize-tools .controls .prev {
        left: 35%;
    }

    .shop-specials-slide.customize-tools .controls .next, .shop-liquidsoap-slide.customize-tools .controls .next, .related-products-slide.customize-tools .controls .next, .shop-personalcare-slide.customize-tools .controls .next, .shop-slide.customize-tools .controls .next {
        right: 35%;
    }

    .light-grey-bg {
        padding: 10% 0;
    }

    .home-header h2 {
        font-size: 20px!important;
    }

    .home-header .carousel-control-prev, .home-header .carousel-control-next {
        bottom: 10%!important;
    }

    .carousel-caption {
        position: absolute;
        right: 15%;
        bottom: 0px;
        left: 5%;
        z-index: 10;
        padding-top: 0;
        padding-bottom: 10px!important;
    }

    .page-header {
        min-height: 300px;
    }

    .product-block .btn-primary {
        width: 67%;
    }

    .footer-newsletter h2 {
        font-size: 30px!important;
    }

    .footer .dropdown-menu {
        left: -20px!important;
    }
}

@media (max-width: 767px) {
    p, li, a {
        font-size: 16px;
        line-height: 25px;
    }

    .h1, h1 {
        font-size: 40px!important;
    }

    .h2, h2 {
        font-size: 30px!important;
    }

    .h3, h3 {
        font-size: 25px!important;
    }

    .h4, h4 {
        font-size: 18px;
    }

    .mobi-hidden {
        display: none;
    }

    .breadcrumb {
        padding: 10px 0;
    }

    .btn-primary {
        padding: 8px 15px!important;
        height: auto;
        font-size: 14px!important;
    }

    .badge-blue {
        padding: 5px 30px 5px 20px;
        line-height: 40px;
    }

    .badge-blue i {
        font-size: 25px;
        line-height: 40px!important;
    }

    .cta, .cta span, .cta:hover, .btn-primary span {
        width: 40%;
        min-width: 40%;
    }
    
    .cta .text, .btn-primary .text {
        opacity: 1;
        max-width: 30px!important;
        margin-left: 10px;
        outline: 0;
    }
    
    .cta:hover .text {
        min-width: 70px!important;
        width: auto;
    }
    
    .cta .icon, .btn-primary .icon {
        padding-left: 5px!important;
        font-size: 17px!important;
    }

    .categories-slider .carousel-item a {
        line-height: 45px;
    }

    .logo {
        max-width: 75%;
    }

    .logo img {
        width: 100%;
        padding: 0;
    }

    .header-top {
        z-index: 99999;
        margin-bottom: 0;
        padding-bottom: 5%;
    }

    #menu .menu-text a {
        font-size: 15px;
        color: #fff;
        text-transform: uppercase;
        line-height: 35px;
        vertical-align: middle;
    }

    #menu .menu-text {
        color: #000;
        padding-right: 0px;
        padding-left: 0;
    }

    .sidebar li>a>i {
        font-size: 25px;
    }

    .sidebar-items li:hover, .sidebar-items li.active {
        border-left: 3px solid #0066B2;
    }    

    #sub-menu-container {
        top: 17px;
        overflow: hidden;
        right: -25px;
        left: auto!important;
        min-width: 93vw;
        max-width: 95vw;
        width: 100%;
        box-shadow: 0px 4px 7px 1px rgb(0 0 0 / 10%);
        margin: 0 auto;
        min-height: 65vh;
    }

    .sidebar-left {
        position: absolute;
        left: 0%;
        right: 0;
        top: 0;
        z-index: 99999999;
    }

    .menu-close-btn {
        right: 0px;
        top: 7px;
    }

    .menu-close-btn i {
        font-size: 25px;
        color: #fff;
    }

    .back-btn {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99999999999;
        background-color: transparent;
        border: 0;
    }

    .back-btn i {
        font-size: 25px;
        color: #000;
    }
    
    .product-range-category.active .sidebar-right {
        z-index: 9999999;
        background-color: #fff;
    }

    .product-range-category.active .sidebar-left {
        z-index: -100;
    }

    header {
        position: relative;
    }

    .header {
        padding: 20px 0;
    }

    .navbar {
        padding: 0;
    }

    .navbar-toggler {
        padding: 0 7% 0 0;
        font-size: inherit;
        line-height: 1;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        text-align: right;
    }

    .navbar-toggler i {
        color: #000;
        font-size: 25px;
    }

    .navbar-collapse {
        position: absolute;
        top: 27px;
        left: auto;
        right: -22px;
        background-color: #0066B2;
        padding: 20px 0;
        min-width: 96vw;
        max-width: 96vw;
        width: 100%;
        text-align: center;
    }

    .navbar-nav {
        display: block!important;
    }

    .navbar-nav .nav-item {
        margin: 0;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0;
        color: #fff;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 400;
        padding: 10px 0;
        line-height: normal;
    }

    .navbar-expand-lg .navbar-nav .nav-link.active {
        color: #fff;
        border-bottom: 1px solid #fff;
        padding: 5px 0;
        margin-bottom: 5px;
        display: inline-block;
    }

    #menu .dropdown a {
        color: #fff;
        position: relative;
        display: block;
        text-align: center;
        line-height: 30px;
    }

    #menu .dropdown-menu {
        position: static;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: none;
        min-width: 10rem;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: transparent;
        background-clip: padding-box;
        border: 0;
        border-radius: 0.25rem;
    }

    header .input-group {
        background-color: #fff;
    }

    .breadcrumb-item.active, .breadcrumb-item a {
        color: #C9C9C9;
        font-size: 13px;
        line-height: 30px;
        padding-left: 0;
        padding-right: 5px;
    }

    .product-documents .badge-light {
        display: inline-block;
        padding: 10px 25px;
        font-size: 17px;
        font-weight: 100;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 26px;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        background-color: transparent;
        color: #fff;
        width: fit-content;
        border: 1px solid #FFFFFF;
        margin-bottom: 15px;
    }

    .shop-section h3, .all-products h3 {
        width: 100%;
        justify-content: revert;
        margin-bottom: 20px;
        display: block;
        line-height: 40px;
    }

    .shop-section span, .all-products span {
        float: none;
        display: block;
    }

    .shop-section span>a, .view-all-txt,  .all-products span>a {
        font-size: 15px;
        margin-left: 0;
        line-height: 20px;
        margin-top: 0;
    }

    /* Home */
    .home-header h2 {
        font-size: 22px!important;
    }

    .home-specialists .col-md-5:after {
        content: '';
        border-bottom: 1px solid #0066B2;
        position: absolute;
        top: 50%;
        left: 30%;
        z-index: 9999999;
        right: 10%;
    }

    .carousel-caption {
        position: absolute;
        right: 15%;
        bottom: 0px;
        left: 5%;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        text-align: center;
        font-weight: 100;
    }

    .carousel-control-next i, .carousel-control-prev i {
        font-size: 30px;
    }

    .carousel-control-prev {
        left: auto;
        right: 15%;
    }

    .latest-news .card-body {
        padding: 15px 0 0 0;
    }

    .brands-slide .controls, .controls {
        opacity: 1!important;
        display: block!important;
    }

    .brands-slide .controls li i,  .controls li i {
        color: #000!important;
        border: 1px solid #F0F0F0!important;
        background-color: rgb(240 240 240 / 36%);
        transition: all 0.4s;
        font-size: 18px!important;
        padding: 10px 0px!important;
        border-radius: 100%;
        text-align: center;
        vertical-align: middle;
        width: 40px!important;
        height: 40px!important;
    }

    .brands-slide.customize-tools .controls .prev, .controls .prev {
        left: -10px;
        opacity: 1!important;
        display: block!important;
    }

    .brands-slide.customize-tools .controls .next, .controls .next {
        right: -10px;
        opacity: 1!important;
        display: block!important;
    }

    .parent-products h1 {
        font-size: 35px!important;
    }

    /* News */
    .page-header {
        height: 130px;
    }

    .news-article-header .row {
        height: 400px;
    }

    .gradient-overlay {
        height: 500px;
    }

    .news-article-header h1 {
        font-size: 30px!important;
    }

    #map {
        width: 100%;
        height: 300px;
    }

    .professional-certifications .card {
        margin-right: 0;
        z-index: 999;
    }

    .accessories .card-body {
        padding: 10px;
        min-height: 180px;
    }

    .our-brands-page, .accessories, .news-article-body, .comp-policies {
        padding: 0;
    }

    .accessories .card-body {
        padding: 15px;
        min-height: 190px;
    }
    
    .chemical-products .card-body {
        padding: 15px;
        min-height: 170px;
    }

    .our-brands-page .card a, .our-brands-page .card p {
        color: #161616;
        margin-top: 1rem;
    }

    .card-img {
        height: auto;
    }

    .product-slide .card-img {
        height: auto;
        min-height: 400px;
    }

    .categories-bubbles .dropdown-toggle {
        position: relative;
        padding: 20px;
        border: 1px solid #ececec;
        border-radius: 40px;
        /* width: fit-content; */
        margin: 0 auto;
    }

    .categories-bubbles .dropdown-toggle:hover {
        cursor: pointer;
    }

    .categories-bubbles .dropdown-menu {
        right: auto;
        bottom: auto;
        margin: auto;
        position: static!important;
        float: none;
        border: 0;
        text-align: center;
    }
    #mobiCatModal ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    #mobiCatModal ul a, #mobiCatModal ul li {
        color: #000;
        line-height: 30px;
        vertical-align: middle;
    }
    
    .categories-bubbles .dropdown-menu.show {
        display: inline!important;
    }

    /* FAQs */
    .faqs .accordion h2>a {
        font-size: 15px;
        font-weight: 500;
        line-height: 10px;
    }

    .faqs .accordion .card-header {
        padding: 15px 10px;
        margin-bottom: 0px;
    }

    .faqs .accordion i {
        font-size: 18px;
        line-height: 10px;
    }

    /* Cart */
    .table td, .table th {
        padding: 5px;
        vertical-align: top;
        border-top: 0;
    }
    
    /* hide table headings */
    .table-responsive table thead {
        display: none;
    }

    /* treat rows like divs */
    .table-responsive table tr {
        display: block;
        border-top: 2px solid lightgray; /* separate row data with thicker line */
        margin-top: 5px;
    }

    /* treat columns like divs */
    .table-responsive table td {
        display: block;
        text-align: right; /* text to right */
    }

    /* this part is ugly, but necessary to show label on left */
    .table-responsive table td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        display: inline-block;
        width: 50%;
        text-align: left;
    }

    .table-responsive table td>img {
        width: 20%!important;
    }
    
    .mobi-delete {
        position: absolute;
        right: 0px;
        top: 0;
    }

    .checkout-order .list-group-item p {
        line-height: 45px;
        margin-bottom: 0;
    }

    .dashboard-pages h1 {
        font-size: 30px!important;
    }

    .dashboard-pages h1>span>a {
        font-size: 13px;
    }

    .img-overlay i {
        color: #fff;
        line-height: 103px;
        font-size: 30px;
    }

    .filters-container .dropdown-menu {
        max-width: 15rem;
    }

    .management {
        text-align: center;
        padding: 10% 0;
    }

    /* Footer */
    .footer, .footer-lower {
        text-align: center;
    }

    .footer-contact a {
        font-size: 20px;
    }

    .footer-logo img {
        width: 90%;
        height: auto;
    }

    .footer-contact small {
        font-size: 95%;
    }

    .footer-contact h5, .footer-contact h5>a {
        font-weight: 900!important;
    }

    .footer .dropdown-toggle {
        background-color: transparent;
        border: 0;
        padding: 0;
        line-height: 40px;
        vertical-align: middle;
    }

    .footer .dropdown-menu {
        position: revert;
        top: 100%;
        left: -20px!important;
        min-width: 12rem;
        padding: 0.5rem 0;
        margin: 0.125rem 0 0;
        font-size: 1rem;
        color: #212529;
        right: auto;
        box-shadow: 1px 2px 6px #cfcfcf;
    }

    .footer .dropdown-menu ul {
        margin-bottom: 0;
    }

    .footer .dropdown-toggle .sr-only {
        border: 0;
        clip: rect(0,0,0,0);
        height: 23px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: static;
        width: 30px;
        color: #000;
    }

    .footer .dropdown-toggle button:focus {
        outline: 0!important;
    }

    .footer-payment-images {
        float: left;
    }

    .footer-lower img {
        float: none!important;
    }
}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px) {
    .h-md-60 {
        height: 60px;
    }

    .h1, h1 {
        font-size: 2rem;
    }
    
    .h2, h2 {
        font-size: 30px!important;
    }

    .h4, h4 {
        font-size: 1.3rem;
    }

    .pl-md-5p {
        padding-left: 5%;
    }

    .mobi-hidden {
        display: none;
    }

    .heart {
        font-size: 20px;
    }

    .menu-body {
        max-height: 80vh;
        overflow-y: scroll;
        width: 98vw;
        background-color: #fff;
    }

    #homeHeaderSlide .h1, #homeHeaderSlide h1 {
        font-size: 2rem;
    }

    .logo img {
        width: 100%;
        height: auto;
    }

    .logo {
        max-width: 45%;
    }

    .header-links a {
        line-height: 60px;
        vertical-align: middle;
    }

    .btn-primary.dark-blue, .btn-primary {
        padding: 8px 15px;
    }

    .badge-blue {
        padding: 5px 20px 5px 20px;
        line-height: 40px;
    }

    .badge-blue i {
        line-height: 40px!important;
    }

    .cta, .cta span {
        transition: 0.5s ease-in-out;
        text-align: left;
        width: 37px;
        min-width: 37px;
        animation: 0.5s ease-in-out;
        height: 40px;
    }

    .cta .icon {
        transform: translateX(0);
        color: white;
        width: auto;
        line-height: 20px;
        vertical-align: middle;
        display: inline-block;
    }

    .cta .text {
        position: absolute;
        transform: translateX(0);
        display: inline-block;
        align-items: center;
        justify-content: center;
        opacity: 0;
        min-width: 130px;
        display: inline-block;
        line-height: 25px;
        vertical-align: middle;
    }

    #sub-menu-container, #sub-menu-container2 {
        transform: rotateX(-25deg) scale(1);
        transform-origin: 50% 7em 0em;
        box-shadow: 0 2px 7px rgb(0 0 0 / 10%), 0 2px 20px rgb(0 0 0 / 30%);
        opacity: 0;
        display: none;
        position: absolute;
        top: 0;
        min-width: 100%;
        top: -10px;
        min-width: 86vw;
        width: auto;
        min-height:45vh;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        height: 100%;
        overflow: hidden;
        right: -4px;
        left: auto;
        z-index: 999999999999999999999999999;
        background-color: #fff;
    }

    .menu-body {
        width: auto;
        z-index: 9999999999999;
        max-height: 57vh;
    }

    #sub-menu-container .h5, #sub-menu-container h5 {
        font-size: 1rem;
    }

    #menu .menu-text {
        color: #000;
        padding-right: 0px;
        padding-left: 0!important;
        line-height: 35px;
        text-transform: uppercase;
    }

    #menu .menu-text a {
        color: #fff;
        text-align: center;
    }

    .navbar-toggler {
        padding: 0;
        font-size: inherit;
        line-height: 20px;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        text-align: right;
        margin-left: 50px;
        vertical-align: middle;
    }

    .navbar-toggler i {
        color: #000;
        font-size: 30px;
        padding-top: 0;
    }

    .navbar-collapse {
        align-items: center;
        position: absolute;
        top: 0;
        left: auto;
        right: -5px;
        background-color: #0066B2;
        text-align: center;
        z-index: 9999999;
        padding: 20px 0;
        min-width: 230px;
    }

    .navbar-nav .nav-item {
        margin: 0 auto;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0;
        color: #fff;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 400;
        padding: 0;
        line-height: 40px;
    }

    header .input-group {
        background-color: #fff;
    }

    #menu .dropdown a {
        color: #fff;
        position: relative;
        display: block;
        text-align: center;
        line-height: 30px;
    }

    #menu .dropdown-menu {
        position: static;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: none;
        min-width: 10rem;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: transparent;
        background-clip: padding-box;
        border: 0;
        border-radius: 0.25rem;
    }

    .cta, .cta span {
        width: 130px;
        min-width: 130px;
    }

    .cta .text {
        opacity: 1;
        min-width: 80px;
        margin-left: 10px;
        max-width: 80px;
        height: auto;
    }

    .navbar-expand-lg .navbar-nav .nav-link.active {
        color: #fff;
        border-bottom: 1px solid #fff;
        padding: 5px 0;
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 5px 0;
        margin-bottom: 5px;
        line-height: 20px;
        text-transform: capitalize;
    }

    .header-top {
        padding: 0;
    }

    /* Home page */
    .carousel-control-next i, .carousel-control-prev i {
        font-size: 30px;
        z-index: 999999999;
    }

    .carousel-control-prev {
        left: auto;
        right: 10%;
        z-index: 999999999;
    }

    .card-img {
        height: auto;
    }

    .brands-slide.customize-tools .controls .next {
        right: 30px;
    }

    .brands-slide.customize-tools .controls .prev {
        left: 20px;
    }

    .home-specialists .col-md-5:after {
        top: 15%;
        left: 40%;
    }

    .home-specialists img {
        width: 30%;
    }

    .money-savers .media {
        width: 48%;
        float: left;
        margin-right: 10px;
    }

    .shop-slide.customize-tools .controls li i {
        font-size: 20px;
        width: 35px;
        height: 35px;
    }

    .page-header {
        height: 300px;
    }

    .img-overlay {
        height: 96%;
    }

    .img-overlay i {
        color: #fff;
        line-height: 165px;
        font-size: 30px;
    }

    .categories-slider .carousel-control-next, .categories-slider .carousel-control-next:focus, .categories-slider .carousel-control-next:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover {
        padding: 14px 10px;
        top: 3px;
    }

    .expertise .card {
        min-height: 480px;
        margin-bottom: 30px;
    }

    #map {
        width: 100%;
        height: 405px;
    }

    #map1, #map2, #map3 {
        width: 60%;
        height: 300px;
    }

    .chemical-products .card-body {
        padding: 15px 0;
        min-height: 210px;
    }

    .accessories .card a {
        left: 15px;
    }

    .accessories .card-body {
        padding: 15px 0;
    }

    .professional-certifications .card {
        margin-right: 4%;
        z-index: 999;
    }

    .professional-certifications h3 {
        font-size: 25px!important;
    }

    .our-branches #map {
        width: 100%;
        height: 480px;
    }

    .latest-news .card-body {
        padding: 0 1.25rem;
    }

    .news-article-header .row {
        height: 400px;
    }

    .news-article-header h1 {
        font-size: 35px!important;
    }

    .franchising .card-body h2 {
        font-size: 25px!important;
    }

    .product-slide .card-img {
        height: auto;
        width: 80%;
    }

    /* Footer */
    .footer-newsletter h2 {
        font-size:35px!important;
    }

    .footer li {
        line-height: 30px!important;
        vertical-align: middle;
    }

    .footer-logo img {
        width:50%;
        height: auto;
    }

    .footer-contact h5, .footer-contact h5>a {
        font-weight: 900!important;
    }

    .footer .dropdown-toggle {
        background-color: transparent;
        border: 0;
        padding: 0;
        line-height: 40px;
        vertical-align: middle;
    }

    .footer .dropdown-menu {
        position: absolute;
        top: 100%;
        left: auto;
        min-width: 10rem;
        padding: 10px;
        margin: 0.125rem 0 0;
        font-size: 1rem;
        color: #212529;
        right: auto;
        background-color: #fff;
        box-shadow: 1px 2px 6px #cfcfcf;
    }

    .footer .dropdown-toggle .sr-only {
        border: 0;
        clip: rect(0,0,0,0);
        height: 23px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: static;
        width: 30px;
        color: #000;
    }

    .footer .dropdown-toggle button:focus {
        outline: 0!important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .h1, h1 {
        font-size: 2rem;
    }

    .h2, h2 {
        font-size: 30px!important;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 20px;
    }

    .logo {
        max-width: 30%;
        min-width: 30%;
        padding-right: 0;
    }

    .logo img {
        width: 100%;
        height: auto;
    }

    .header {
        padding: 5px 0;
    }

    .navbar {
        padding: 0;
    }

    .wht-border-left {
        border-left: 1px solid #fff;
        height: auto;
        text-align: center;
    }

    .header-wishlist {
        vertical-align: middle;
        line-height: 35px;
    }

    #sub-menu-container {
        top: 83%;
        min-width: 40vw;
        width: auto;
        left: -20%;
    }

    .menu-body {
        max-height: 56vh;
        overflow-y: scroll;
        width: auto;
    }

    .menu-body .list-group a {
        font-size: 15px;
    }

    .carousel-control-next i, .carousel-control-prev i {
        font-size: 40px;
    }

    .home-header .carousel-control-prev {
        left: auto;
        right: 10%;
    }

    .home-help .card-img-overlay {
        min-width: 250px;
    }

    .home-help .card-img-overlay a, .home-help .card-img-overlay p {
        font-size: 18px;
    }

    .brands-slide.customize-tools .controls .next {
        right: 0px;
    }

    .brands-slide.customize-tools .controls .prev {
        left: 0;
    }

    .cta, .cta span {
        width: 33px;
        min-width: 33px;
        height: 33px;
    }

    .breadcrumb {
        padding: 10px 1rem;
    }

    .shop-personalcare-slide .card-text {
        color: #161616;
        line-height: 25px;
        vertical-align: middle;
        margin-top: 15px;
    }

    .product-block .qty .qty-down {
        top: -4px;
        left: 12px;
    }

    .product-block .qty .qty-down i, .product-block .qty .qty-up i {
        font-size: 20px;
    }

    .product-block i {
        font-size: 18px;
    }

    .cart-dropdown .dropdown-menu {
        top: 28px!important;
    }

    .free-delivery .alert-primary {
        margin-top: 1rem;
    }

    /* Home */
    .slider-left h1 {
        line-height: 30px;
    }

    .money-savers .media .col-9 {
        padding: 0;
    }

    .money-savers .media p {
        font-size: 13px;
    } 

    .page-header {
        height: 300px;
    }

    #map {
        width: 100%;
        height: 550px;
    }

    .img-overlay i {
        line-height: 150px;
    }

    .categories-slider .carousel-control-next, .categories-slider .carousel-control-next:focus, .categories-slider .carousel-control-next:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover {
        padding: 14px 10px;
    }

    .first-online-order h2 {
        font-size: 45px!important;
        font-weight: 300;
    }

    .expertise .card {
        min-height: 370px;
        margin-bottom: 30px;
    }

    .professional-certifications .card {
        margin-right: -10%;
        z-index: 999;
    }

    .chemical-products .card-body {
        padding: 0;
    }

    #map1, #map2, #map3 {
        width: 100%;
        height: 250px;
    }

    .locations .card {
        min-height: 250px;
        padding: 0;
    }

    .news-article-header {
        z-index: auto;
    }

    .news-article-header .row, .gradient-overlay {
        height: 400px;
    }

    #franchisee-form label {
        min-height: 45px;
        vertical-align: middle;
    }

    .chemical-products .card {
        padding: 10px 0;
    }
    
    .view-all-txt {
        min-width: 100px;
    }

    .accreditations-logos img {
        width: 80%;
        margin: 10px 0;
    }
}

/* Laptop: */
@media (min-width: 1200px) and (max-width: 1600px) {
    .header {
        padding: 10px 1%;
    }

    .breadcrumb {
        padding: 10px 0.8rem;
    }

    .home-header .carousel-control-prev {
        left: auto;
        right: 11%;
    }

    #sub-menu-container, #sub-menu-container2 {
        top: 98%;
        min-width: 56vw;
        width: auto;
        min-height:33vh;
        right: 0;
        left: auto;
    }

    .cart-dropdown .dropdown-menu {
        top: 28px!important;
    }

    .shop-specials-slide.customize-tools .controls, .shop-liquidsoap-slide.customize-tools .controls, .related-products-slide.customize-tools .controls {
        top: 30%;
    }

    .categories-slider .carousel-control-next, .categories-slider .carousel-control-next:focus, .categories-slider .carousel-control-next:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover, .categories-slider .carousel-control-prev:focus, .categories-slider .carousel-control-prev:hover {
        max-height: 32px;
    }

    .categories-slider-tools.customize-tools .controls .next, .controls .next {
        right: -15px;
    }

    .categories-slider-tools.customize-tools .controls .prev, .controls .prev {
        left: -15px;
    }

    .brands-slide.customize-tools .controls .next {
        right: 20px;
    }

    .brands-slide.customize-tools .controls .prev {
        left: 20px;
    }

    .chemical-products .card-body {
        padding: 30px 1.25rem;
    }

    .chemical-range h2 {
        font-size: 30px!important;
    }

    .page-header {
        height: 400px;
    }

    .product .product-heading {
        padding: 5% 0 0 0;
    }

    .card-img {
        height: auto;
    }

    .error-page {
        padding: 10vh 0;
    }

    .locations .card {
        min-height: 240px;
        padding: 0;
    }
}

/* 14” HD Laptop */
@media (min-width: 1291px) and (max-width: 1600px){
    #sub-menu-container, #sub-menu-container2 {
        min-height: 50vh;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-bottom: 0;
        padding-top: .5rem;
    }

    #menu .menu-text {
        line-height: 13px;
    }

    .news-article-header .row {
        height: 560px;
    }

    .professional-certifications .pl-6 {
        padding-left: 0;
    }

    .expertise .card {
        min-height: 350px;
    }

    .categories-slider-tools.customize-tools .controls .prev, .controls .prev {
        left: 15px;
    }

    .brands-slide.customize-tools .controls .next {
        right: -20px;
    }

    .brands-slide.customize-tools .controls .prev {
        left: -20px;
    }
    .accreditations-logos img {
        width: 65%;
        margin: 20px 0;
    }

    .error-page {
        padding: 15vh 0;
    }
}

@media (min-width: 1440px) and (max-width: 1600px){
    #sub-menu-container, #sub-menu-container2 {
        min-height: 40vh;
    }

    .logo img {
        width: 85%;
        height: auto;
    }
}