/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

   
@media screen and (min-width: 1280px) {
    
    #header,
    #heading,
    #breadcrumbs,
    #header-prod,
    #content,
    #brands-list,
    #mid,
    #articles-trio,
    #feature-article,
    .total-wrap-container,
    #top-brands,
    #home-intro,
    #news-filtering,
    #quote-section
    { width: 1125px; margin: 0 auto; float: none; }
    
    #header-wrap { float: left; width: 94%; padding: 20px 3% 18px 3%; }
    #trending-products-wrap { padding: 50px 0; }

    
    #nav ul li a { font-size: 21px; }
    #nav .main-list ul li { padding: 0 15px; }
    
    /*
    #search-form { position: absolute; top: 0; margin: 0; left: 150px; width: 550px!important;  }
    */

    #brands { width: 800px; margin: 0 auto; float: none; }
    #cat-results li { width: 18%; padding: 0 1%; }

    .carousel { width: 1080px; margin: 0 auto; }

    #nav .main-list ul { text-align: left; width: 100%; }
    #nav .main-list ul li:first-child { padding-left: 0; }

    #skip-links .scroll-inner { width: 100%; }

    #laptop-wrap { float: right; margin-top: -30px; width: 550px; height: 350px; background: url(../images/macbook-pro.png) no-repeat 0 0; background-size: 100% auto; }
    #laptop-wrap .screenshot { float: left; padding: 14px 0 0 60px; }
    #laptop-wrap .screenshot img { float: left; width: 431px; height: auto; -moz-border-radius: 2px; border-radius: 2px; }

    #quote-section-wrap { margin-bottom: 20px; }
    #quote-section .quote { float: left; width: 48%; padding: 100px 0 20px 0; background: url(../images/quote-open.png) no-repeat 0 60px; background-size: 30px auto; }
    #quote-section blockquote { width: 86%; text-align: left; padding: 0 2% 0 7%; font-size: 21px; line-height: 30px; background: url(../images/quote-close.png) no-repeat right bottom; background-size: 30px auto; }
    #quote-section blockquote .author {  }


}
@media screen and (min-width: 1120px) {
    #header #signup-wrap { display: block; }
    
    #header-prod,
    .tool-details, .blog-details { width: 980px; }
   
}
@media screen and (min-width: 1030px) {
    p span.break { float: left; width: 100%; }
    #callout-features.two-split { width: 70%; padding: 40px 15% 20px 15%; }
    #callout-features.three-split { width: 80%; padding: 40px 10% 20px 10%; }

    
    #aff-disclaimer { width: 900px; }
    #blog-article { width: 900px; margin: 0 auto; }
    #blog-articles-list { width: 900px; margin: 0 auto; }
     
    #news-articles-wrap { float: left; width: 100%; padding: 50px 0%; }
    #coming-soon p { font-size: 1.13em; }
 
}

@media screen and (max-width: 1030px) {
    
    h2.lg { font-size: 21px; line-height: 24px; }
    .total-wrap,
    .total-wrap-container
    { float: left; width: 100%; padding-left: 0; padding-right: 0; }

    #trending-products-wrap { float: left; width: 100%; padding: 30px 0; position: relative; overflow-y: hidden; }
    #trending-products-wrap h2 { float: left; width: 90%; padding: 0 5%; font-size: 21px; line-height: 24px; }
    #trending-products { float: left; width: 100%; padding: 0; position: relative; overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
    #trending-products::-webkit-scrollbar { display: none;  /* Safari and Chrome */ }
    #trending-products ul { float: left; width: 900px; padding: 0 20px; margin: 0; }
    #trending-products ul li { float: left; width: 14.5%; padding: 0 1%; margin: 0; list-style-type: none; text-align: center; position: relative; }

    #trending-products ul li .thumb { width: 120px; height: 120px; }
    #trending-products ul li .thumb img { height: auto; width: auto; max-height: 100px; max-width: 100px; }

    #top-brands-wrap { float: left; width: 100%; padding: 30px 0%; overflow-y: hidden; }
    #top-brands { position: relative; }
    #top-brands .text { float: left; width: 76%; padding: 0 12% 30px 12%; text-align: center; }
    #top-brands h2 { font-size: 21px; line-height: 24px; }

    #top-brands .top-brands-list-wrap { float: left; width: 100%; padding: 0; position: relative; overflow-y: hidden; }
    #top-brands .top-brands-list { float: left; padding: 0; width: 100%; position: relative; overflow-x: scroll; overflow-y: hidden; white-space:nowrap; -ms-overflow-style: none; scrollbar-width: none; }
    #top-brands .top-brands-list ul { float: left; width: 1190px; margin: 0; padding: 0; }
    #top-brands .top-brands-list::-webkit-scrollbar { display: none;  /* Safari and Chrome */ }

    #top-brands .top-brands-list ul li { float: left; width: auto; margin: 0; padding: 0 5px; list-style-type: none; overflow-y: hidden; text-align: center; }
    #top-brands .top-brands-list ul li a { float: left; width: 130px; height: 40px; margin: 0; padding: 5px 0; background: #fff; border: solid 1px #d5d5d5; -moz-border-radius: 6px; border-radius: 6px; }
    #top-brands .top-brands-list ul li img { width: auto; height: 40px; float: none; }
    #top-brands .top-brands-list ul li:first-child { padding-left: 30px; }
    #top-brands .top-brands-list ul li:last-child { }

    #top-brands #gradient-right { width: 25px; height: 300px; background: url(../images/gradient-right-grey.png) repeat-y right 0; position: absolute; top: 0; right: 0; }

    #news-filtering input,
    #news-filtering select
    { width: 30%; }
    
    #news-filtering .filter-buttons { float: left; width: 100%; padding-top: 10px; }
    #news-filtering h3 { float: left; width: 100%; margin: 0 0 10px 0; }

    #article-snapshot { float: left; width: 90%; padding: 50px 5%; }

}


@media screen and (max-width: 950px) {
    .mob-show { display: block; }
    .mob-hide { display: none; }
    
    #heading .thumb { margin: 0; }

    #header-wrap { padding-top: 18px; padding-bottom: 15px; }
    #header-wrap #slogan { display: none; }
    #search-form { margin-left: 7%; }

    #heading .thumb { width: 100%; }
    #heading .thumb-img { width: 100%; margin: 0 auto; }
    #heading .thumb span { float: left; width: 100%; height: auto; padding: 20px 0; }
    #heading .thumb img { max-width: 120px; max-height: 60px; }
    #heading .thumb.white span { padding-bottom: 0; padding-top: 30px; }
    
    #heading .store-heading { float: left; width: 80%; padding: 20px 10%; text-align: center; }
    #heading .results-heading { width: 80%; padding: 20px 10%; text-align: center; } 
    
    #feature { width: 400px; }
    
    #news-articles-wrap h2 { text-transform: uppercase; font-size: 15px; }
    
    
}

@media screen and (max-width: 900px) {

    body { font-size: 15px; }

    #mob-menu-btn { float: left; display: block; width: 14px; height: 14px; padding: 14px 10px; background-size: auto 14px; margin-top: 2px; }
    #mob-search-btn { float: right; margin-top: 6px; display: block; text-align: right; font-size: 17px; color: #ed0052; cursor: pointer; cursor: hand; width: 14px; height: 14px; padding: 10px; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/search-btn.png) no-repeat center center; background-size: auto 18px; -moz-border-radius: 3px; border-radius: 3px; }
    #mob-info-btn { float: right; margin-top: 1px; display: block; text-align: right; font-size: 17px; color: #ed0052; cursor: pointer; cursor: hand; width: 14px; height: 14px; padding: 10px; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/icon-info.png) no-repeat center center; background-size: auto 26px; -moz-border-radius: 3px; border-radius: 3px; }
    .expand-search-box { display: none; }
    .expand-menu-btns { display: none; }

    #header #logo-wrap { padding: 0px; }
    #header #logo { position: absolute; top: 4px; left: 50%; text-align: center; float: none; margin: 0 0 0 -90px; }
    #header #logo img { width: 180px; height: auto; margin-top: 0; }
    #header-wrap { padding-top: 10px; padding-bottom: 10px; }
    
    hr { height: 25px; margin-top: 10px; }
    
    h1  { font-size: 25px; }
    p, li { font-size: 15px; }
    h3 { font-size: 17px; line-height: 22px; margin: 0 0 0.8em 0; }
    
    h2, 
    #content .store-name, 
    #show-more .btn-showmore,
    #nav .nav-headline,
    #nav .list-heading
    { font-size: 19px; line-height: 24px; }
    
    .article p,
    #footer p, 
    #footer li
    { font-size: 15px!important; }
    
    #heading .results-num { font-size: 15px; }

    #content-wrap,
    #content-general-wrap,
    #mid-wrap,
    #footer-wrap,
    #nav-wrap
    { float: left; width: 90%; padding-left: 5%; padding-right: 5%; }

    #search-form { float: left; position: relative; top: 0; left: 0; width: 100%; margin: 0 0 7px 0; padding-top: 5px; }
    #search-form form { float: left; width: 100%; padding-left: 0; }
    #search-form form label { font-size: 15px; top: 8px; /* color: #ed0052; */}
    #search-form .search-wrap { height: 35px; margin-left: 20px; }
    #search-form fieldset { background-size: 35px auto; }
    #search-form .search { padding: 5px 8px 0 0; width: 70%; }
    #search-form p { font-size: 11px; margin: 0 0 10px 0; }
    #search-form .dropdown { width: 100px; padding-right: 20px; background: url(../images/arrow-dropdown.png) no-repeat 92% 14px; background-size: 12px auto; }
    #search-form .dropdown { height: 35px; }
    #search-form .dropdown ul li img { height: 20px; }
    #search-form .search-btn { height: 35px; }

    #nav .close { display: block; }
    
    #nav-wrap { border-bottom: none; margin-top: 5px; }
    #nav .main-list { }
    #nav .main-list ul li { }

    #nav ul li.mob-extend { width: 100%; text-align: center; }
    #nav ul li.mob-extend a { background: #fff; padding: 0; font-size: 20px!important; }
    #nav ul li.mob-divide { border-bottom: dotted 2px #ccc; padding-bottom: 12px; margin-bottom: 17px; }
    #nav .expand-more-menu {  }
    #nav .expand-more-menu span { padding-left: 18%!important; width: 66%; }
    #nav .nav-headline span { width: 100%; }
    #nav .link-list { width: 100%; } 
    #nav .reg-btns .reg { color: #ed0052; }

 
    #content-wrap
    { padding-top: 25px; }

     
    #mid-wrap #mail-list .mail-list-wrap { width: 400px; margin: 0 0 0 -160px; }
    #mid-wrap #mail-list .mail-field { width: 203px; }
    #mid-wrap #mail-list .signup-headline { font-size: 15px; width: 80%; padding: 0 10%; }
    #mid-wrap #mail-list .signup-headline-2 { font-size: 15px; width: 70%; padding: 0 15%; }
    #mid-wrap #mail-list .mail-list-wrap label { font-size: 15px; top: 9px; }
    #mid-wrap #mail-list .mail-field { font-size: 15px; padding: 8px 6px 9px 12px; }


    .bl { float: left; width: 97%; margin: 0 1% 3% 1%; }
    .bl:nth-child(even) { float: left; }

    .blog-callout-name { float: left; width: 90%; height: auto; padding: 20px 5%!important; margin-bottom: 30px; border: none; background: #666; -moz-border-radius: 5px; border-radius: 5px; }
    .blog-callout-name span {   
        float: left;
        width: 100%; 
        padding: 0;
    }
    .distributor-list .tf-text { float: right; width: 90%; padding: 0 5%; }
    #blog-article .book-list li { width: 46%; }
    
    #breadcrumbs-wrap { padding-top: 12px; padding-bottom: 12px; }
    #breadcrumbs-wrap ul li { font-size: 11px!important; padding: 0 14px 0 5px; background: url(../images/icon-breadcrumb-right-arrow.png) no-repeat right 5px; background-size: 9px auto; }

    #disclaimer-wrap { float: left; width: 92%; padding: 15px 4%; }
    #disclaimer-wrap #aff-disclaimer { text-align: left; line-height: 13px!important; }
    #disclaimer-wrap #aff-disclaimer span { font-size: 11px!important; }

    .mob-bg-grey .carousel-wrap { background: #efefef; }
    
    #header-prod-wrap { padding-top: 30px; padding-bottom: 20px; }
    #header-prod .thumb { width: 40%; padding: 10px 10%; margin: 0 20%; position: inherit; text-align: center; }
    #header-prod .thumb img { width: 100%; max-width: 200px; float: none; } 
    #header-prod .header-prod-heading { float: left; padding: 20px 5%; width: 90%; text-align: center; }

    .tool-details-wrap { float: left; width: 100%; padding: 0; }
    #tool-details-left { float: left; width: 90%; padding: 30px 5% 0 5%; border-bottom: solid 1px #ccc; background: #EEF1F4; }
    #tool-details-right, #tool-details-right-btm { float: left; width: 90%; padding: 30px 5%; }

    .blog-details-wrap { float: left; width: 100%; padding: 0; }
    #blog-details-left { float: left; width: 90%; padding: 30px 5% 0 5%; border-bottom: solid 1px #ccc; background: #EEF1F4; }
    #blog-details-right, #tool-details-right-btm { float: left; width: 90%; padding: 30px 5%; }

    #header-prod .blog-thumb { width: 100%; text-align: center; }
    #header-prod .blog-thumb img { float: none; width: auto; height: 150px; }

    
    #home-intro .text { width: 60%; padding-right: 5%; padding-top: 80px; padding-bottom: 80px; }
    
    #footer-wrap { padding-top: 40px; }
    #footer .link-list ul { width: 33%; margin: 0 0.1%!important; padding: 0!important; min-height: 105px; }
    #footer .link-list ul.padtop { padding-top: 22px!important; }
    #footer .link-list ul.divider { margin-left: 0%; }
    #footer .link-list ul.first-list { width: 100%; padding-top: 0!important; border: none; }
    #footer .link-list ul.first-list li {  }
    

}

@media screen and (max-width: 750px) {
    
    p.lg { font-size: 15px; }

    
    #feature-article-wrap,
    #articles-trio-wrap
    { padding-top: 4%; }
    
    #feature-article .thumb { float: left; width: 100%; margin: 0 0 20px 0; }
    #feature-article .txt { width: 100%; padding: 0 0 40px 0; }
    
    #articles-trio .article { width: 100%; padding: 20px 0; border-top: solid 1px #D0D0D0; }
    #articles-trio .article .thumb { width: 30%; }
    #articles-trio .article .txt { float: right; width: 65%; }
    #articles-trio .article:last-child { border-bottom: none; padding-bottom: 0; }
    
    #articles-double .article { width: 47.5%; padding: 0 5% 20px 0; }
    #articles-double .article .thumb { width: 100%; margin: 0 0 15px 0; }
    #articles-double .article .txt { width: 100%; }
    #articles-double .article:nth-child(odd) { padding-right: 0%; }
    

    #content .list-stores { width: 100%; }
    #content .list-stores li a { width: 100%; }
    
    #home-intro-wrap { width: 80%; padding: 30px 10% 0 10%; text-align: center; }
    #home-intro .text { float: left; width: 100%; padding: 0; }
    #home-intro .thumb { float: left; width: 100%; text-align: center; padding-top: 30px; }
    #home-intro .thumb img { height: 250px; width: auto; float: none; display: inline;  }

    #product-listings li { width: 50%; }

    #table-comparison {
        max-width: 100%;
        border-left: solid 1px #ccc;
        border-top: solid 1px #ccc;
        overflow-x: auto; /* Enable horizontal scrolling */
    }

    #table-comparison table {
        width: 100%;
        border-collapse: collapse;
        min-width: 700px; /* Ensures table maintains structure when scrolling */
    }

    
}


@media screen and (max-width: 650px) {
    
    .topprod-list .ticks li { background-size: 12px auto; width: 92%; padding: 0 0 0 8%; }
    #feature-heading p { font-size: 15px!important; }
    
    #nav .main-list { padding: 0; }
    #nav .main-list ul li { float: left; width: 100%; padding: 0; margin: 0; }
    #nav .main-list ul li a { float: left; width: 100%; padding: 10px 0; border-bottom: solid 1px #ccc; }
    #nav .main-list ul li:last-child a { border: none; }
    #nav .nav-headline { padding-top: 40px; padding-bottom: 20px; background-size: 20px auto; background-position: center 2px; }
    #nav .reg-btns { margin-top:0; }

    
    #about-wrap { background-size: auto 240px; }
    #about { background-size: auto 240px; padding: 180px 0 150px 0; }
    .about-center { width: 80%; padding: 0 10%; }
      
    #content-results-wrap,
    #mid-wrap,
    #footer-wrap,
    #store-right
    { padding-top: 20px; padding-bottom: 20px; }
    
    #footer-wrap { width: 96%; padding: 30px 2% 40px 2%; }
    #footer .foot-logo img { width: 150px; }
    #footer p, #footer li { font-size: 13px; }
    #footer #main-links ul li { padding: 0 4px; }
    #footer #main-links ul li a { font-size: 13px; }
    
    #contact-form fieldset input[type="text"], #contact-form fieldset input[type="password"], #contact-form fieldset textarea { width: 92%; }

    .carousel-wrap { padding-top: 20px; padding-bottom: 20px; max-height: 293px; }
    .carousel-wrap h2 { margin: 0 0 15px 0; }
    .carousel-wrap .book-box h4 { font-size: 0.9em; margin-top: 8px; max-height: 43px; }
    .carousel-wrap .book-box img { height: 160px; }

    .tf-thumb { width: 20%; padding: 1%; }
    .tf-text { width: 75%; }
 
    #news-filtering input,
    #news-filtering select
    { width: 50%; margin: 0 0 10px 0; }
    
    #news-filtering #q, #news-filtering .search-keywords { width: 100%; }
    #news-filtering #tag, #news-filtering .search-tag { width: 45%; margin: 0 5px 0 0; }
    #news-filtering select { width: 45%; margin: 0; float: right!important; }
    
    #news-articles .item .meta { font-size: 12px!important; }
    #news-articles .item .src img { margin: 0 6px 0 0; max-height: 14px; }

    #news-articles .img-wrap { float: right; width: 30%; max-width: 120px; margin: 0 0 8px 10px; }
    #news-articles .text-w-image { float: none; width: 100%; padding-left: 0px; }

    #actions #more { font-size: 15px; }
    
    #article-snapshot .img-wrap { float: right; width: 30%; max-width: 120px; margin: 0 0 8px 10px; }
    #article-snapshot .text-w-image { float: none; width: 100%; padding-left: 0px; }

}

@media screen and (max-width: 450px) {
    #content ul.brand-list li { width: 47%; padding: 0 3% 0 0; }

    #offers-wrap { padding-top: 135px; }
    .column-one, .column-two, .column-three, .column-four { width: 48%; padding: 0 0 0 2%; }
    #callout-features .callout { float: left; width: 90%!important; padding: 20px 5%!important; }

    .bl { width: 100%; margin: 0 0 2% 0; border: none; border-bottom: solid 5px #ececec; background: none; -moz-border-radius: 0; border-radius: 0; }
    .bl h2 { margin: 0 0 2px 0; max-height: none; }
    .bl .author { margin: 0 0 14px 0; }
    .bl-thumb { padding: 10px 0; }
    .bl-thumb img { height: auto; max-height: 160px; }
    .bl-info { width: 55%; padding: 5px 3% 25px 0; }
    
    #laptop-wrap { width: 320px; height: 210px; }
    #laptop-wrap .screenshot { padding: 8px 0 0 36px; }
    #laptop-wrap .screenshot img { width: 248px; }

    
}
@media screen and (max-width: 415px) {
    #search-form form label span.l01 { display: none; }
    #about-wrap { background-size: auto 200px; }
    #about { background-size: auto 200px; padding: 130px 0 100px 0; }
   
}


@media screen and (max-width: 330px) {
    #search-form form label span.l02 { display: none; }
}