@media (min-width: 401px){
    .section-outer{padding-left: 25px; padding-right: 25px;}
}
@media (min-width: 501px){
    .section-outer{padding-left: 30px; padding-right: 30px;}
}
@media (min-width: 601px){
    .section-outer{padding-left: 50px; padding-right: 50px;}
}
@media (min-width: 701px){
    .section-outer{padding-left: 90px; padding-right: 90px;}
}




@media (min-width: 768px){
    .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{display: table; width: 100%;}
    .basket>div{display: table-row;}
    .basket>div>div, .basket-item>div:nth-child(4){display: table-cell; vertical-align: middle; padding: 5px; border-top: 1px dotted #ddd;}
    .basket>div>div:first-child{padding-left: 0;}
    .basket>div>div:last-child{padding-right: 0;}
    .basket-item>div:nth-child(1), .basket-item>div:nth-child(2){width: auto;}
    
    
    
    .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;}
    
    

    #topbar-distributors{display: block;}
    #navicon{display: none;}

    #topbar-phone>a>span{display: inline;}
    
    #topbar-login, #topbar-account, #topbar-logout{display: block;}
    
    #topbar-space-a{display: block;}
    #topbar-space-b{display: none;}
    
    
    
    
    #header-space{display: block; -webkit-flex-grow: 5; flex-grow: 5; -webkit-order: 4; order: 4;}
    
    #main-menu{display: block; width: auto; -webkit-order: 3; order: 3; margin-left: 40px; z-index: 510;}
    
    
    #main-menu .menu>li{display: inline-block; margin-left: 30px;}
    #main-menu .menu>li:first-child{margin-left: 0;}
    #main-menu .menu>li>ul>li{-webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -ms-column-break-inside:avoid; page-break-inside: avoid; break-inside: avoid; margin-bottom: 8px;}
    
    #main-menu>ul>li>ul a{color: #4d4d4d;}
    #main-menu .menu li li:hover>a, .menu li li.sel>a{color: #8eb40f;}
    
    .no-touchevents #main-menu .menu>li:hover ul, #main-menu .menu>li.open ul{display: block;}
    .no-touchevents #main-menu .menu>li:hover>ul, #main-menu .menu>li.open>ul{
        position: absolute;
        z-index: 510;
        top: 75%;
        left: 0;
        padding: 20px 50px 40px 50px;
        right: 0;
        background-color: #f9f9f9;
        box-shadow: 0px 0px 3px #8ea776;
        -moz-column-count: 2;
        -moz-column-gap: 70px;
        -moz-column-rule: 1px dotted #ddd;
        -webkit-column-count: 2;
        -webkit-column-gap: 70px;
        -webkit-column-rule: 1px dotted #ddd;
        column-count: 2;
        column-gap: 70px;
        column-rule: 1px dotted #ddd;
        border-top: 3px solid #8eb40f;
    }
    
    #main-menu .narrow{display: none;}
    #main-menu #mainmenu-signin, #main-menu #mainmenu-account, #main-menu #mainmenu-logout, #main-menu #mainmenu-distributors{display: none;}
    
    
    
    /* extend width of link when hovering */
    .no-touchevents #main-menu>.menu>li:hover>a{
        position: relative;
    }
    .no-touchevents #main-menu>.menu>li:hover>a:before{
        content: "";
        display: block;
        position: absolute;
        bottom: -30px;
        left: -40px;
        right: -40px;
        height: 50px;
    }
    
    /* Show TV logo in main menu */
    #main-menu-tv:after{
        content: "";
        display: block;
        width: 100px;
        height: 50px;
        background: url(/img/elements/DD_TV_image_for_menu.jpg) no-repeat;
        background-position: 0 0;
        background-size: 100px 50px;
        padding-right: 10px;
        vertical-align: middle;
    }
    
    
    #infobar-outer{display: block;}
    
    
    #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;}
    
    
    #products-top-info{justify-content: space-between; flex-direction: row;}
    #products-top-info>div{padding: 0 15px;}
    #products-top-info>div:first-child{padding-left: 0;}
    #products-top-info>div:last-child{padding-right: 0;}
}


@media (min-width: 850px){
    #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;}
}




/* Tile container */
@media (min-width: 451px) and (max-width: 700px){
    .tiles>div{width: 50%;}

}
@media (min-width: 701px) and (max-width: 900px){
    .tiles>div{width: 33.33%;}
}

@media (min-width: 901px){
    
    
    
    .tiles>div{width: 25%;}
    
    
    .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){
    #main-menu>.menu>li.open>ul, .no-touchevents #main-menu>.menu>li:hover>ul{
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    
    
    /* 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;}
}