﻿/*Small Computer*/
@media (max-width: 1024px) {
 
}


@media (min-width: 991px) AND (max-width: 1199px) {

        .product-section .benefit:nth-child(4) {
            clear: left;
        }
}



/*TABLET*/
@media (max-width: 991px) {
    .footer-input-group {
        width: 310px;
    }

    ul.anchors {
        display: none;
    }

    .section.product-section .productimage {
        width: 100%;
    }

    .product-section .benefit {
        margin-right: 55px;
    }


@media (max-width : 767px) {

    .alert-info {
        right: 0px;
        width: 100%;
    }
    .content-header h1 {
        font-size: 20px;
        margin-top: 110px;
        margin-bottom: 60px;
    }
    .allproducts span {
        display: none;
    }

    h1{ font-size: 34px; letter-spacing: 3px; }
    h1.sub {
        font-size: 20px;
        letter-spacing: 2px;
    }
    h2 {
        font-size: 24px;
        letter-spacing: 6px;
    }
    h3 {
        font-size: 16px;
        letter-spacing: 4px;
    }

    .popout-menu{ width: 100%; text-align: center; left: -100%; }

    .store-locator .store-locator-header h1 {
        font-size: 20px;
    }

    .home-slick.slick-slider {
        text-align: center;
    }
    .home-slick.slick-slider .text-right,
    .home-slick.slick-slider .text-center,
    .home-slick.slick-slider .text-left {
        text-align: center;
    }
    .home-slick.slick-initialized .slick-slide p {
        padding-right: 0%;
    }
        .home-slick.slick-initialized .slick-slide p br{
            display: none;
        }
        .home-slick.slick-initialized .slick-slide.text-right p {
            padding-left: 0%;
            padding-right: 0%;
        }
    .home-slick.slick-initialized .slick-slide p {
        width: 100%;
    }
    .all-products .product-holder {
        /*-webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: scroll;*/ /* has to be scroll, not auto */
        /*-webkit-overflow-scrolling: touch;
        margin-left: -15px;
        margin-right: -15px;*/
        display: block;
        flex-wrap: nowrap;
        height: auto;
        margin: 0px -15px;
    }
        .all-products .product-holder .slick-slide {
            height: auto;
        }
    .all-products .product-holder .products {
        flex: none;
        max-width: initial;
    }
        .all-products .product-holder .products.hide {
            display: block;
            width: 0px !important;
        }

        .all-products .benefits {
            position: relative;
            padding-left: 0px;
            cursor: pointer;
            padding-top: 13px;
        }
        .all-products .benefits span {
            font-size: 16px;
            margin-left: 3px;
        }
            .all-products .benefits span:hover:after{
                content: none;
            }
    .all-products .title{
        font-size: 25px;
    }

    .all-products .sizes {
        margin-left: 0px;
        margin-top: 0px;
        position: absolute;
        top: 60px;
        z-index: 5;
    }
            .all-products .sizes img {
                height: 15px;
            }

    .contact-us {
        padding-top: 100px;
        padding-bottom: 60px;
        text-align: center;
    }
        .contact-us input[type=submit] {
            width: 100%;
        }
        .contact-us .address-text{
            margin-bottom: 70px;
        }

    ul.anchors{ display: none; }

    #map {
        display: none;
    }
    .store-locator {
        position: relative;
        top: inherit;
        left: initial;
        background-color: transparent;
        width: auto;
        padding-top: 60px;
    }
        .store-locator .store-locator-header {
            background-color: transparent;
        }
        .store-locator input[type=text] {
            background-color: #ffffff;
        }
    .store-locator-results > div {
        color: #ffffff;
    }
    .store-locator-results {
        max-height: initial;
    }
    .grid-section{
        text-align: center;
    }
    .section.product-top{
        height: 100vh;
    }
        .section.product-top.hasvideo {
            height: 0px;
            padding-bottom: 70%;
        }
    section.panelled-section {
        min-height: 300px;
        height: 100vh;
    }
        section.panelled-section .benefit {
            width: 100% !important;
            min-height: 95px !important;
            position: relative;
            top: 0px !important;
            left: 0px !important;
            padding: 0px 20px;
        }
        section.panelled-section[data-count="4"] .benefit {
            height: 25% !important;
        }
        section.panelled-section[data-count="5"] .benefit {
            height: 20% !important;
        }
        section.panelled-section[data-count="6"] .benefit {
            height: 16.66666666666667% !important;
        }
        section.panelled-section .benefit .benefit-more {
            bottom: initial;
            top: 50%;
            transform: translateY(-50%);
            right: 20px;
            left: initial;
        }
        section.panelled-section .benefit p {
            max-width: 100px;
            position: absolute;
            top: 50%;
            margin-bottom: 0px;
            transform: translateY(-50%);
            left: 100px;
            font-size: 14px;
        }
        section.panelled-section .benefit > span{
            position: absolute;
            top: 50%;
            margin-bottom: 0px;
            transform: translateY(-50%);
        }
    section.panelled-section .benefit {
        border: none;
        border-bottom: 1px solid #e2e2e2;
    }
    .benefit-details-slick.slick-slider {
        position: absolute;
    }
    .benefit-details-slick .benefit-details {
        padding-left: 15px;
        padding-right: 15px;
    }
    .benefit-details-slick .slick-arrow {
        top: initial;
        bottom: -45px;
    }
    section.image-panels > div{
        pointer-events: none;
    }
    .product-panel-image {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 187px;
        padding-top: initial;
        display: flex;
        flex-direction: column-reverse;
        min-height: initial;
        height: initial;
    }
        .product-panel-image h3{
            font-size: 25px;
            cursor: pointer;
        }
        .product-panel-bottom {
            display: none;
        }
    section.product-panel {
        min-height: 600px;
    }
    .product-panel-bottom-mobile {
        display: block;
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        padding: 25px;
        padding-bottom: 0px;
        text-align: center;
    }
    .mobile-colour-picker{ padding: 0px 40px; margin-bottom: 5px; }
    .product-panel-bottom-mobile .form-group{
        margin-bottom: 0px;
    }
    .mobile-size-picker{ margin-bottom: 25px;}
    .mobile-size-picker img {
        height: 21px;
        filter: invert(1) contrast(2);
    }
    .mobile-size-picker .size-select{ display: inline-block; margin: 7px; opacity: 0.6; cursor: pointer; }
    .mobile-size-picker .size-select.selected{ opacity: 1; }
    .mobile-size-picker .mobile-size-name {
        font-family: AvantGardeGothic, Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: 200;
        font-size: 12px;
    }
    .mobile-buttons a.button {
        padding: 6px 15px 6px 15px;
        vertical-align: bottom;
        margin-right: -4px;
    }
        .mobile-buttons input[type="button"]{
            padding: 5px 15px 5px 15px;
        }
            .product-panel-bottom-mobile div[data-muivalue="product"] {
        display: inline-block;
    }
    input#mobileAddToBasket {
        padding: 6px 15px 6px 15px;
        vertical-align: bottom;
        width: auto;
    }

    section.image-panels > div {
        width: 100%;
        padding-bottom: 64%;
    }
    .image-panel-slick-holder .slick-initialized .slick-slide{
        padding: 15px;
    }
    .product-panel-categories {
        position: fixed;
        top: 100%;
        left: 0px;
        z-index: 20;
        width: 100%;
        height: 100%;
        background-color: rgba(26, 26, 26, 0.94);
        transition: ease-out 0.4s top;
    }
        .product-panel-categories h3 {
            display: block;
        }
    .product-panel-categories.slidein {
        top: 0%;
    }
    .product-panel-categories h3 {
        top: 52px;
        left: 0px;
        width: 100%;
        text-align: center;
        position: absolute;
        font-size: 25px;
    }
        .product-panel-categories ul {
            text-align: center;
            font-size: 25px;
            top: 50%;
            position: absolute;
            width: 100%;
            transform: translateY(-50%);
        }
            .product-panel-categories ul li{
                margin: 10px 0;
            }
                .product-panel-categories ul li a {
                    font-size: 25px;
                    letter-spacing: 8px;
                }


            .footer-input-group {
                width: 100%;
            }
    .falsefooter .footerhalfpanel {
        padding: 30px 15px;
    }
        .falsefooter .footerhalfpanel:first-child {
            border-right: none;
        }
        .falsefooter .footerhalfpanel:last-child {
            border-top: none;
            margin-left: -1px;
            border-left: 0px;
            padding-top: 0px;
        }
    footer{ font-size: 11px; }
        footer .text-left{ margin-bottom: 10px; }
        footer .text-left, footer .text-right {
            text-align: center;
        }

    section.related-products {
        padding-top: 75px;
        padding-bottom: 10px;
    }
        section.related-products h3 {
            padding-bottom: 50px;
        }
    .product-box-list .row {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: visible;
        overflow-x: scroll;
        display: -webkit-flex;
        display: flex;
    }
    .section.product-section .productimage {
        width: 100%;
        padding: 0px 30px;
        position: relative;
        top: 0px;
        transform: none;
    }

    .relatedVariance {
        flex: 1 0 200px;
        max-width: 200px;
        padding: 20px;
    }
    .product-section h2 {
        /*margin-top: 60px;*/
        margin-bottom: 40px;
    }
    .product-section .container {
        position: absolute;
        top: initial;
        left: initial;
        transform: none;
        text-align: center;
        height: 100%;
        width: 100%;
    }
    .product-details p{
        margin-bottom: 20px;
        display: none;
    }
    .product-section .container .col-xs-12 {
        height: 100%;
    }
    .product-section .benefits {
        display: none;
    }
    .product-section .price {
        width: auto;
        font-size: 26px;
        padding-left: 10px;
    }
    
    .product-section .original-price,
    .product-section .sale-price {
        width: auto;
        font-size: 26px;
        padding-left: 10px;
        margin-right: 0px;
    }
    .product-section .original-price {
        font-size: 22px;
    }

    .product-panel-image img.prod-image {
        max-width: 100%;
        height: auto;
        padding: 0px;
    }
    .product-section .product-image-mobile{
        width: 100%;
    }

    .product-panel-image > div {
        position: relative;
        bottom: initial;
    }

    section.related-products a:hover img {
        transform: translateY(-19px);
    }
    .scrollmagic-pin-spacer .container {
        pointer-events: none;
    }
    section.related-products a p {
        transform: translateY(-10px);
    }
    .product-section .product-details {
        position: absolute;
        width: 100%;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        padding-bottom: 96px;
    }
    .price-and-button {
        position: absolute;
        width: 100%;
        bottom: 0px;
        left: 0px;
        z-index: 10;
        pointer-events: all;
    }

    table.mui-basket tbody tr td, .basket-summary table tbody tr td,
    .basket.invoice-summary table tbody tr td, table.salesreceipt tbody tr td {
        padding: 5px;
        font-size: 13px;
    }
    table.mui-basket thead tr th, .basket-summary table thead tr th,
    .basket.invoice-summary table thead tr th, table.salesreceipt thead tr th {
        padding: 10px 5px;
        font-size: 14px;
    }
    table.mui-basket tfoot tr td, .basket-summary table tfoot tr td,
    .basket.invoice-summary table tfoot td th, table.salesreceipt tfoot tr td {
        padding: 10px 5px;
        font-size: 14px;
    }
    input[type=number] {
        width: 43px;
        padding-left: 0px;
    }
    table.mui-basket tbody tr td b{
        display: none;
    }
    table.mui-basket tbody tr.subtotal td {
        padding: 15px 5px;
    }
    table.mui-basket tbody tr td .product-image {
        width: 50px;
    }
    .basket-summary .panel-body {
        padding: 0px 10px;
    }
    #all-products .all-products {
        padding-right: 15px;
    }
    .basket.hidebasket{
        display: none;
    }
    .contact-holder .col-sm-6, .contact-holder .col-xs-12 {
        padding-right: 10px;
        padding-left: 10px;
    }
    .product-section .container.mast__header{
        position: absolute;
    }
    /*#all-products .product-holder .products {
        flex: none;
        max-width: 200px;
        padding: 20px;
    }
    .all-products .product-holder {
        display: block;
    }
    #all-products .slick-slide{
        height: auto;
    }*/

    #cookiepopup{
        text-align: center;
    }
    #cookiepopup .pull-right {
        width: 100%;
        margin-top: 30px;
    }
}



@media (max-height: 600px){
    .product-section .product-details {
        padding-bottom: 20px;
    }
    .product-section h2 {
        margin-bottom: 20px;
    }
}


/*MOBILE*/
@media (max-width : 325px) {

    table.mui-basket tbody tr td, .basket-summary table tbody tr td,
    .basket.invoice-summary table tbody tr td, table.salesreceipt tbody tr td {
        padding: 5px;
        font-size: 11px;
    }

    table.mui-basket thead tr th, .basket-summary table thead tr th,
    .basket.invoice-summary table thead tr th, table.salesreceipt thead tr th {
        padding: 10px 5px;
        font-size: 13px;
    }

    table.mui-basket tfoot tr td, .basket-summary table tfoot tr td,
    .basket.invoice-summary table tfoot tr td, table.salesreceipt tfoot tr td {
        padding: 5px;
        font-size: 13px;
    }
}