@media (min-width: 501px){
    .section-outer{padding-left: 30px; padding-right: 30px;}
}
@media (min-width: 701px){
    #home-text-heading{display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
}
@media (min-width: 1000px){
    .section-outer{padding-left: 90px; padding-right: 90px;}
}



@media (min-width: 500px){
    .basket-item{column-gap: 40px;}
}
@media (min-width: 600px){
    .basket-item-image img{width: 150px;}
}



@media (min-width: 768px){
    .div-b, .area-b{flex-direction: row;}
    .div-b>div, .area-b>div{width: 50%;}
    
    .box{padding: 25px 35px;}
    
    .box-r{
        background-color: #fbfbfb;
        padding: 25px 35px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    .col-r{
        -moz-column-count: 2;
        -moz-column-gap: 30px;
        -webkit-column-count: 2;
        -webkit-column-gap: 30px;
        column-count: 2;
        column-gap: 30px;
    }
    
    .cols-b:after{
        content: "";
        display: block;
        clear: both;
    }
    .cols-b>div{width: 50%; box-sizing: border-box; float: left; padding-left: 15px;}
    .cols-b>div:first-child{padding-left: 0; padding-right: 15px;}
    
    .narrow{display: none;}
    .wide{display: block;}
    
    .basket-heading{font-weight: bold;}
    .basket{display: table; width: 100%;}
    .basket-item{display: table-row;}
    .basket-item>div{display: table-cell; width: auto; vertical-align: top; padding: 10px 0; border-bottom: 1px solid #ddd;}
    
    
    
    .banner-caption-a{
        background-color: rgba(30, 30, 30, 0.8);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        max-width: 350px;
    }
    .banner-caption-b{
        background-color: rgba(30, 30, 30, 0.8);
        position: absolute;
        bottom: 0;
        left: 0; 
        right: 0;
    }
    .banner-caption-c{
        background-color: rgba(30, 30, 30, 0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    
    .tabs>ul>li{display: inline-block;}
    .tabs>ul>li.sel{outline-width-top: 6px;}
    
    .menu ul li{margin: 0;}
    
    
    #header{column-gap: 30px;}
    #header-account, #header-logout, #header-country{margin-right: 25px;}
    
    
    #header>div{padding: 15px 0;}
    #navicon{display: none;}
    
    #header-shop, #header-explore, #header-contact, #header-account, #header-logout, #header-retailers{display: block; flex-basis: initial; margin-bottom: 0;}
    #header-retailers{order: 1; z-index: 4; flex-grow: 1;}
    #header-account{order: 2; z-index: 5;}
    #header-logout{order: 3; z-index: 6;}
    #header-country{order: 4;}
    #header-basket{order: 5;}
    #header-space{order: 6;}
    #logo{order: 7;}
    #header>#logo{padding-bottom: 10px;}
    #header-shop{order: 8;}
    #header-explore{order: 9;}
    #header-contact{order: 10;}
    #search{order: 12; text-align: right; z-index: initial;}
    #header::after{order: 11; flex-grow: 1; width: 1px; display: none;}
    
    
    #search-input{width: 100px;}
    
    #header-retailers>a, #header-account>a, #header-logout>a{color: #fff; text-transform: none; font-size: 0.7rem; font-weight: normal;}
    #header-retailers>a::before{content: ""; display: inline-block; vertical-align: bottom; width: 2em; height: 2em; padding-right: 2px; background-image: url("/img/icons/retailers.png"); background-size: 2em 2em; background-position: 0 0; background-repeat: no-repeat;}
    #header-account>a::before{content: ""; display: inline-block; vertical-align: bottom; width: 2em; height: 2em; padding-right: 4px; background-image: url("/img/icons/account.png"); background-size: 2em 2em; background-position: 0 0; background-repeat: no-repeat;}
    #header-logout>a::before{content: ""; display: inline-block; vertical-align: bottom; width: 2em; height: 2em; padding-right: 2px; background-image: url("/img/icons/logout.png"); background-size: 2em 2em; background-position: 0 0; background-repeat: no-repeat;}
    
    
    
    #search-suggest{left: auto; right: 0;}
    
    
    .main-menu>ul.open{
        display: initial;
    }
    
    
    @media (hover: hover) and (pointer: fine){
        .main-menu:hover>ul{
            display: initial; 
        }
    }
    
    
    
    
    
    
    
    /* extend width of link when hovering */
    #header-shop>a, #header-explore>a{position: relative;}
    #header-shop:hover>a::before, #header-explore:hover>a::before{
        content: "";
        display: block;
        position: absolute;
        bottom: -30px;
        left: -40px;
        right: -40px;
        height: 50px;
    }
    
    
    
    .main-menu>ul{
        position: absolute;
        left: 0;
        right: 0;
        transform: translateY(15px);
        height: auto;
        min-height: 30px;
        padding: 20px 50px 40px 50px;
        border-top: 3px solid #8eb40f;
        z-index: 510;
        background-color: #f9f9f9;
        box-shadow: 0px 0px 3px #8ea776;
        column-count: 2;
        column-gap: 30px;
        column-rule: 1px dotted #ddd;
    }
    #header .main-menu>ul>li>ul{display: initial;}
    #header .main-menu>ul>li>ul>li{margin-left: 20px; }
    #header .main-menu>ul>li>ul>li>a{font-weight: normal;}
    
    .main-menu>ul>li{break-inside: avoid; margin-bottom: 8px;}
    
    
    
    #header .main-menu>ul a{color: #4d4d4d; font-size: 0.8rem;}
    
    #header-shop:hover>a, #header-explore:hover>a, #header-contact:hover>a{color: #fff;}
    #header .main-menu>ul li:hover>a{color: #8eb40f;}
    
    
    
    /* Show TV logo in main menu */
    #main-menu-tv:after{
        content: "";
        display: block;
        width: 100px;
        height: 50px;
        background: url(/img/elements/main_menu_tv.jpg) no-repeat;
        background-position: 0 0;
        background-size: 100px 50px;
        padding-right: 10px;
        vertical-align: middle;
    }
    
    #main-menu-gallery:after{
        content: "";
        display: block;
        width: 100px;
        height: 50px;
        background: url(/img/elements/main_menu_gallery.jpg) no-repeat;
        background-position: 0 0;
        background-size: 100px 50px;
        padding-right: 10px;
        vertical-align: middle;
    }
    
    
    
    #infobar-outer{display: block; background-color: #f2f2f2; border-bottom: 3px solid #8eb40f;}
    #infobar{padding: 30px 0;}
    #infobar-links{
        display: -webkit-flex; /* IOS 8 */
        display: flex;
        -webkit-justify-content: space-between; /* IOS 8 */
        justify-content: space-between;
    }
    #infobar-links>div{
        position: relative;
    }
    #infobar-links>div::before{display: block; margin: auto; margin-bottom: 6px; width: 68px; height: 36px;}
    #infobar-links>div:nth-child(1)::before{content: url("/img/elements/footer/international.png");}
    #infobar-links>div:nth-child(2)::before{content: url("/img/elements/footer/service.png");}
    #infobar-links>div:nth-child(3)::before{content: url("/img/elements/footer/checkout.png");}
    #infobar-links>div:nth-child(4)::before{content: url("/img/elements/footer/delivery.png");}
    
    
    #footer .menu{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap:wrap; -webkit-justify-content: space-between; justify-content: space-between;}
    #footer .menu>li{margin-bottom: 30px;}
    #footer .menu>li>a{pointer-events: none;}
    #footer .menu ul{display: block; padding-left: 0;}
    
    #footer-top{vertical-align: top;}
    #footer-top:after{content: ""; display: block; clear: both;}
    
    
    
    
    #basket-accept-terms-inner>div:first-child>br{display: none;}
}


@media (min-width: 850px){
    #search-input{width: 180px;}
    #search-link{display: none;}
    #search{display: block; width: auto; padding-top: 0;}
    
    #mailinglist-form-inner{
        max-width: 750px;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    #mailinglist-form-inner>div{margin-top: 0;}
}




/* Tiles */
@media(min-width: 451px){
    .tiles-c-r, .tiles-r{grid-template-columns: 1fr 1fr;}
}
@media(min-width: 400px){
    #reviews-score-tiles{grid-template-columns: 1fr 1fr;}
    #reviews-social-followers{grid-template-columns: 1fr 1fr;}
    #new-retailer-info{grid-template-columns: 1fr 1fr;}
    #new-retailer-range{grid-template-columns: 1fr 1fr;}
    .trade-advertisement-tiles{grid-template-columns: 1fr 1fr;}
}
@media(min-width: 500px){
    #new-retailer-special{grid-template-columns: 1fr 1fr; column-gap: 100px;}
}
@media(min-width: 600px){
    #new-retailer-range{grid-template-columns: 1fr 1fr 1fr;}
    .trade-advertisement-tiles{grid-template-columns: 1fr 1fr 1fr;}
}
@media(min-width: 701px){
    .tiles-c-r, .tiles-r{grid-template-columns: 1fr 1fr 1fr;}
}
@media(min-width: 768px){
    #reviews-score-tiles{grid-template-columns: 1fr 1fr 1fr;}
    #reviews-social-followers{grid-template-columns: 1fr 1fr 1fr 1fr;}
}
@media(min-width: 800px){
    #new-retailer-special{grid-template-columns: 1fr 1fr 1fr;}
}
@media(min-width: 901px){
    .tiles-c-r, .tiles-r{grid-template-columns: 1fr 1fr 1fr 1fr;}
    .content-r-main .tiles-c-r, .content-r-main .tiles-r{grid-template-columns: 1fr 1fr 1fr;}
    #new-retailer-info{grid-template-columns: 1fr 1fr 1fr 1fr;}
}
@media(min-width: 1000px){
    .area-b{column-gap: 80px;}
    #new-retailer-range{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
    .trade-advertisement-tiles{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
}






@media (min-width: 901px){
    
    .content-r{display: -webkit-flex; display: flex;}
    .content-r-sidebar{width: 30%; box-sizing: border-box;}
    .content-r-main{width: 70%; box-sizing: border-box; margin-bottom: 0;}
    .content-r-tiles .content-r-sidebar{width: 25%;}
    .content-r-tiles .content-r-main{width: 75%;}
    
    .content-r-sidebar:first-child{padding-right: 13px;}
    .content-r-main:first-child{padding-right: 13px;}
    .content-r-sidebar:last-child{padding-left: 13px;}
    .content-r-main:last-child{padding-left: 13px;}
    


    .content-r-sidebar .menu .menu-sub{display: block;}
    
    /*.content-r-main .tiles:first-child{position: relative; margin-top: 0; top: -10px;}
    .content-r-main .tiles>div{width: 33.33%;}*/
    
    .content-r-wide{display: block;}
    
    
    .content-r-sidebar .menu ul{padding-left: 0;}
    .content-r-sidebar .menu>li{border-top: 1px solid #ddd; padding-top: 8px; margin-top: 8px;}
    .content-r-sidebar .menu>li:first-child{border-top: none;}
    .content-r-sidebar .arr{position: relative; padding-right: 25px;}
    .content-r-sidebar .arr:after{
        top: 8px;
        right: 0;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        border-top-color: inherit;
        border-width: 6px;
    }
    
    
    
    #main-menu .menu>div{margin-left: 40px;}

    
    #products-menu{display: block;}
    
    
    #ddtv-menu-link{display: block;}
    #ddtv-menu, #ddtv-menu ul{display: block;}
    #ddtv-menu-link>a:after{display: none;}
}


@media (max-width: 767px){
    #mobile-to-desktop>div{display: block;}
}



@media (min-width: 970px){
    .new-retailer-infotext{font-size: 1.3em;}
    
    .main-menu>ul{column-count: 4;}
    
    
    #main-menu-gallery-li{break-before: column;}
    
    
    /* product page */
    #product-top:after, #product-bottom:after{
        display: block;
        content: "";
        clear: both;
    }
    #product-top>div{float: right; width: 40%;}
    #product-top>div:nth-child(2){float: left; width: 60%; text-align: left;}
    #product-top>div:first-child h1, #product-top>div:first-child span, #product-top>div:nth-child(3)>div, #product-bottom>div:nth-child(2)>div{margin-left: 30px;}
    #product-gallery{margin-bottom: 0;}
    #product-bottom>div{float: left; width: 40%;}
    #product-bottom>div:first-child{width: 60%; padding-left: 0;}
}



@media (min-width: 1100px){
    .banner-caption{font-size: 1.3em;}
}