﻿@media screen and (min-width:1025px) {
    #header-nav {
        display: block;
        width: 1024px;
        margin: 0px auto;
    }

    #menu {
        display: block;
    }
}


@media screen and (min-width:1024px) {
    .skip-links {
        border: 0px none;
        float: right;
    }

    #header-search {
        display: none !important;
    }

    #nav {
        display: none;
    }

    .nav-primary li.level0, .nav-primary a.level0 {
        display: inline-block;
    }

        .nav-primary li.level0 > a {
            color: #FFF;
            padding: 0 5px;
        }


    .nav-primary li.level0, .nav-primary a.level0 {
        display: inline-block;
    }

    #header-nav {
        display: block;
    }

    .nav-primary li:last-child > a::after {
        content: "";
        padding: 0px 9px;
        color: #C0C0C0;
        font-weight: 300;
    }

    /*.nav-primary li > a::after, .menu ol li.product .main-nav-dd li > a::after {
        content: ".";
        padding: 0px 3px 0px 6px;
        color: #999;
        font-weight: 300;
    }*/



    .nav-primary > li:hover > .arrow {
        border-bottom: 8px solid #fff;
        border-left: 8px solid #000;
        border-right: 8px solid #000;
        font-size: 0;
        font-size: 0rem;
        height: 0;
        left: 50%;
        line-height: 0;
        margin-left: -18px;
        position: absolute;
        top: 42px;
        width: 0;
    }

    .nav-primary > li.product:hover > .arrow {
        border-bottom: 8px solid #fff;
        border-left: 8px solid #000;
        border-right: 8px solid #000;
        font-size: 0;
        font-size: 0rem;
        height: 0;
        left: 50%;
        line-height: 0;
        margin-left: -18px;
        position: absolute;
        top: 42px;
        width: 0;
    }

    #white-box > ul > li:nth-child(4n) .inner {
        margin-right: 0;
    }
}

@media screen and (min-width:1023px) {
    .nav-primary {
        display: block;
        max-width: 1024px;
        margin: 0px auto;
    }
   
}




@media screen and (min-width: 768px) {

    .headertop {
        display: block;
    }

    .header-top-background {
        background-color: #1A1917;
    }

        .header-top-background .header-top-container {
            content: "";
            display: table;
            clear: both;
            margin: 0px auto;
            width: 100%;
            padding: 17px 0px;
            max-width: 1080px;
        }

        .header-top-background .top-links {
            float: left;
            /*padding-left: 20px;*/
        }

            .header-top-background .top-links a {
                color: #FFF;
                display: inline-block;
                font-family: "Roboto",arial,sans-serif;
                font-size: 1.2em;
            }

            .header-top-background .top-links li {
                display: inline-block;
                float: left;
                line-height: 50px;
                margin: 0px 0px 0px 34px;
            }

                .header-top-background .top-links li:first-child {
                    margin: 0px;
                }

            .header-top-background .top-links a.nearest-store:before, .header-top-background .top-links a.telephone:before {
                font-size: 1.3em;
                margin: 0 3px;
            }

            .header-top-background .top-links a.account, .header-top-background .top-links a.nearest-store, .header-top-background .top-links a.telephone {
                text-transform: uppercase;
            }

            .header-top-background .top-links .form {
                margin: 5px 0px;
            }

            .header-top-background .top-links .form-search {
                content: "";
                display: table;
                clear: both;
                background-color: #FFF;
            }

            .header-top-background .top-links input[type="text"] {
                border: 0px none;
                float: left;
                height: 40px;
                line-height: 40px !important;
                width: 576px;
                /*width: 290px;*/
            }

            .header-top-background .top-links .btn-search {
                border-left: 1px solid #888;
                float: right;
                height: 32px;
                margin: 4px 4px 4px 0px;
                width: 32px;
                padding: 0;
                background-color: #fff;
            }

                .header-top-background .top-links .btn-search:before {
                    font-size: 0.8em;
                    color: #888;
                    line-height: 1.5em;
                }

    .skip-nav, .skip-search {
        text-align: left;
        padding-left: 10px;
    }

    #header-search input {
        width: 710px;
    }
}




@media screen and (min-width: 771px) {
    .logo .large {
        display: none;
    }

    .logo .small {
        display: block;
    }
}

@media screen and (min-width:670px) {
    .products-grid > li {
        width: 33.33%;
        /*border-right: 1px solid #dfdfdf;*/
        padding: 10px;
        margin-bottom: 0;
        margin-right: 0;
        min-height: 390px;
        padding-bottom: 0;
    }

    .products-grid li:nth-of-type(3n+3) {
        margin-right: 0;
        border-right: 0;
    }
}



@media screen and (max-width: 767px) {
    .headertop {
        display: none;
    }
    .header-top-background {
        background-color: #1A1917;
    }

        .header-top-background .top-links {
            display: none;
        }

    .package {
        display: block;
    }

    .header-top-background .logo {
        float: none;
        padding: 10px 0px;
        margin: 0px auto;
    }

    .skip-link .label, .skip-custom-link .label {
        display: none;
    }

    .products-grid > li {
        min-height: 330px;
    }

    .products-grid .product-image img {
        max-width: 100%;
        max-height: 100%;
    }
}

@media screen and (max-width:670px) {
    .products-grid > li {
        min-height: 360px;
    }
}

@media screen and (max-width: 930px) {
    #white-box > ul > li {
        width: 33.3%;
    }

        #white-box > ul > li:nth-child(4n) .inner {
            margin-right: 5px;
        }

        #white-box > ul > li:nth-child(3n) .inner {
            margin-right: 0;
        }



    #youtube-block iframe {
        min-height: 480px;
    }

    .tabs {
        display: none;
    }

    .tab_drawer_heading {
        background-color: #f4f4f4;
        border-top: 1px solid #eee;
        margin: 0;
        padding: 10px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .d_active {
        background-color: #f4f4f4;
    }

    #product-social {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 820px) {
    #white-box > ul > li {
        width: 50%;
    }

        #white-box > ul > li:nth-child(3n) .inner, #white-box > ul > li:nth-child(4n) .inner {
            margin-right: 5px;
        }

        #white-box > ul > li:nth-child(2n) .inner {
            margin-right: 0;
        }



        #white-box > ul > li .inner .image, #white-box > ul > li .inner .list {
            width: 50%;
            float: left;
            display: inline-block;
        }

        #white-box > ul > li .inner .list {
            padding: 0 10px;
        }

    #youtube-block iframe {
        min-height: 425px;
    }
}


@media screen and (max-width: 550px) {
    #white-box > ul > li {
        width: 100%;
        border: none;
    }



    .products-grid > li {
        min-height: 330px;
    }

    #youtube-block iframe {
        min-height: 280px;
    }

    #product-image {
        float: none;
        width: auto;
    }

    #product-shop, #product-accessories, #product-social {
        float: none;
        width: 100%;
    }

    #mainContentPlaceHolder_divPhanTrang a {
        margin-bottom: 10px;
    }

    #white-box > ul > li .inner {
        margin-right: 0;
    }

    #product-accessories {
        padding: 0;
    }
}

@media screen and (max-width: 400px) {
    .products-grid > li {
        min-height: 281px;
    }

    #youtube-block iframe {
        min-height: 210px;
    }

    .products-grid .product-image img {
        max-width: 100%;
        max-height: 100%;
    }

    .products-grid .product-image {
        min-height: 170px;
    }

    .products-grid > li > .inner {
        min-height: 300px;
    }

    .price-origin {
        float: none;
        margin-top: 2px;
    }
}

@media screen and (max-width:350px) {
    .products-grid .product-image img {
        max-width: 100%;
        max-height: 100%;
    }

    .products-grid .product-image {
        min-height: 140px;
    }
}

@media screen and (max-width: 1080px) {

    #feature-slider, #feature-video {
        float: none;
        max-width: none;
    }

    #feature-video {
        margin-top: 20px;
    }

    #col-main, #col-left {
        max-width: none;
    }

    #col-left {
        padding: 0;
        margin: 0 0 15px 0;
    }

        #col-left .inner {
            border: 1px solid #dfdfdf;
        }

    .title-filter {
        display: block;
    }

    .filter {
        display: none;
    }

    ul.level0 > li > label:after, label.filter-news:after {
        font-family: Flaticon !important;
        font-style: normal;
        content: "\e00d";
        display: inline-block;
        float: right;
        color: #7f8c8d;
    }

    #col-left ul li input[type=checkbox]:checked ~ label:after, input[type=checkbox]:checked ~ label.filter-news:after {
        content: "\e013";
    }

    ul.level0 > li {
        margin-bottom: 1px;
    }
}

@media screen and (max-width: 1023px) {
    .header-top-background .top-links .top-search {
        display: none;
    }

    .skip-links {
        display: block;
        clear: both;
    }

    .skip-tel, .skip-store {
        display: block;
    }

    .nav-primary > li {
        border-bottom: 1px solid #CCC;
    }

    .nav-primary a.level0, .nav-primary a {
        line-height: 40px;
        text-align: left;
        padding: 0px 15px 0px 25px;
        color: #666;
    }

        .nav-primary a.has-children:before, .nav-primary a.flaticon-keyboard53:before {
            float: right;
            font-size: 0.5em;
        }

        .nav-primary a.level0, .nav-primary a {
            padding: 0px 15px;
        }

            .nav-primary a.level0 {
                background: #FFF none repeat scroll 0% 0%;
            }

    .nav-primary .has-children, .nav-primary li.menu-active > a, .nav-primary li.sub-menu-active > a, .nav-primary .arrow {
        background-position: 97% center !important;
    }


    .nav-primary li.level0 ul {
        display: none;
    }

    .nav-primary li.level0 li {
        padding: 0px;
    }

        .nav-primary li.level0 li > a {
            padding: 0px 15px 0px 40px;
        }

    .nav-primary li.level1 a {
        padding: 0px 15px 0px 25px;
        font-family: "Roboto",arial,sans-serif;
        font-size: 1em;
        background: #F2F2F2 none repeat scroll 0% 0%;
    }

    .nav-primary .arrow {
        background-image: url("http://www.dawsons.co.uk/skin/frontend/dawsons114/shop/images/menu/arrow.png") !important;
    }

    .nav-primary li.level0 li li > a {
        padding: 0px 15px 0px 55px;
    }

    .nav-primary li.level0 li li li > a {
        padding: 0px 15px 0px 70px;
    }
}

@media screen and (max-width: 1024px) {
    .header-top-background .header-top-container {
        padding: 17px 10px;
    }

    #menu {
        display: none;
    }

    .main-container {
        width: 100%;
        padding: 0px 10px 10px;
    }
}
