/* Category Pages & Search Pages */

/* Sidebar
-------------------------------------------------------------- */

/* Categories */

.block-vertnav .block-title { display: none; }

/* Filtered Navigation */

.sidebar .block-layered-nav,
.sidebar .mobile-layered-wrapper { display: none; }

/* Category Banners
-------------------------------------------------------------- */

.category-image img,
.zblock-category-content-top img {
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
}
.category-title-box { display: none; }
.catalogsearch-result-index .page-title h1 {
    margin-top: 0;
    margin-bottom: 15px;
}

/* Toolbar 
-------------------------------------------------------------- */

.toolbar {
    position: relative;
    float: left;
    display: block;
    width: 100%;
    min-height: 25px;
    padding: 10px 0;
    background: #eeeeef;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #1a1818;
}
.mobile-layered-btn { display: none; }

.filter-label {
    float: left;
    margin-left: 15px;
    margin-right: 7px;
    line-height: 25px;
}
.filter-label .icon-arrow-right { display: none; }
.filter {
    position: relative;
    z-index: 1;
    float: left;
    min-height: 11px;
    margin-right: 5px;
}
    .filter > li {
        float: left;
        margin: 0;
        height: 11px;
        padding: 6px 7px 7px;
        border: solid 1px transparent;
        cursor: pointer;
        line-height: 11px;
        color: #1a1818;
        -webkit-transition: background-color .3s ease;
        -moz-transition: background-color .3s ease;
        -o-transition: background-color .3s ease;
        -ms-transition: background-color .3s ease;
        transition: background-color .3s ease;
    }
    .filter .name {
        padding: 0 5px;
        line-height: 11px;
        text-align: center;
    }
    .filter > li:last-child {
        margin-right: 0;
    }
    .filter .name:after {
        content: 'd';
        margin-left: 5px;
        font-size: 9px;
        font-family: "fredericks" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .filter > li:hover {
        background-color: #fff;
        border: solid 1px #d1d1d1;
        border-bottom: none;
        color: #c20f25;
        z-index: 4000;
    }

    /* dropdown nav*/

    .filter ol {
        display: none;
        position: absolute;
        z-index: -1;
        top: 0;
        width: 170px;
        margin-top: 24px;
        margin-left: -8px;
        background: #fff;
        border: solid 1px #d1d1d1;
        font-weight: 400;
    }
        .filter li:hover ol { display: block; }
        .filter ol li { display: block; }
        .filter ol li a {
            float: left;
            width: 120px;
            padding: 7px;
            font-size: 11px;
            line-height: 11px;
            color: #474747;
            text-decoration: none;
        }
        .filter ol li .count {
            float: right;
            width: 30px;
            text-align: center;
            font-size: 8px;
            color: #666;
            line-height: 25px;
            padding: 0;    
        }
        .filter ol li:hover a {
            color: #c20f25;
        }
    /* Filtered Navigation - Currently */ 

    .filter > li.currently-label {
        cursor: default;
    }
    .filter > li.currently-label:hover {
        color: #1a1818;
        background: none;
        border: solid 1px transparent;
    }
    .filter > li.active {
        color: #1a1818;
        border: solid 1px #d1d1d1;
        background-image: none;
        padding-right: 5px;
        font-weight: 400;
    }
        .filter > li.active:before {
            display: none;
        }
        .filter > li.active span {
            float: left;
        }
        .filter > li.active span.label {
            margin-right: 5px;
        }
        .filter > li.active .btn-remove {
            margin: 0px;
            float: left;
            width: 11px;
            height: 11px;
            margin-right: 5px;
            opacity: 1;
            text-align: center;
        }
        .filter > li.active .btn-remove:before {
            float: left;
            content: 'x';
            color: #1a1818;
            text-indent: 0;
            font-size: 8px;
            width: 11px;
            line-height: 11px;
            font-family: "fredericks" !important; 
            font-style: normal !important; 
            font-weight: normal !important; 
            font-variant: normal !important; 
            text-transform: none !important; 
            speak: none;  
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale;
        }
        .filter > li.active:hover {
            color: #c20f25;
        }
        .filter > li.active:hover .btn-remove:before {
            color: #c20f25;
            opacity: 1;
        }
        .filter > li.active:after {
            display: none;
        }
    .filter > li.actions {
        float: left;
        width: auto;
        padding: 0;
        background: none;
        border: none;
    }
        .filter > li.actions:before {
            display: none;
        }
        .filter > li.actions a {
            color: #1a1818;
            border: solid 5px transparent;
            border-bottom: dotted 1px #e0dfe5;
            padding: 0;
            font-size: 8px;
            margin: 0;
            float: left;
            line-height: 15px;
            -webkit-transition: background-color .3s ease;
            -moz-transition: background-color .3s ease;
            -o-transition: background-color .3s ease;
            -ms-transition: background-color .3s ease;
            transition: background-color .3s ease;
        }
        .filter > li.actions a:hover {
            color: #c20f25;
            background: none;
        }
        .filter .actions:after {
            display: none;
        }

/* Sorter */

.sorter {
    position: relative;
    z-index: 1;
    float: left;
    margin-left: 15px;
}
    .sorter label {
        float: left;
        margin-right: 7px;
        line-height: 25px;
        color: #1a1818;   
    }
    .sorter ul.dropdown {
        position: relative;
        float: left;
        z-index: 1;
    }

    /* level 0 */

    .sorter ul.dropdown > li {
        position: relative;
        z-index: 1;
        float: left;
        height: 11px;
        padding: 6px 7px;
        border: solid 1px transparent;
        background: transparent;
        color: #1a1818;
        cursor: pointer;
    }
        .sorter ul.dropdown > li > .name {
            float: left;
            line-height: 11px;  
        }
        .sorter ul.dropdown > li.active > .name:after {
            content: 'd';
            margin-left: 5px;
            font-size: 9px;
            font-family: "fredericks" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;    
        }
        .sorter ul.dropdown > li:hover {
            background-color: #fff;
            border: solid 1px #d1d1d1;
            border-bottom: none;
            color: #c20f25;
            z-index: 4000;    
        }

    /* dropdown ul */

    .sorter ul.dropdown ul {
        display: none;
        position: absolute;
        z-index: -1;
        top: 0;
        width: 100px;
        margin-top: 23px;
        margin-left: -8px;
        background: #fff;
        border: solid 1px #d1d1d1;
        font-weight: 400;
    }
        .sorter ul.dropdown > li:hover ul {
            display: block;
        }
        .sorter ul.dropdown ul li {
            float: left;
            clear: both;
            width: 100%;
        }
        .sorter ul.dropdown ul li a {
            float: left;
            width: 90px;
            padding: 7px;
            font-size: 11px;
            line-height: 11px;
            color: #474747;
            text-decoration: none;
        }
        .sorter ul.dropdown ul li:hover a {
            color: #c20f25;
        }
    .sorter .category-asc,
    .sorter .category-desc {
        display: none;
    }

.toolbar-right {
    float: right;
    margin-right: 15px;
}

/* Limiter */

.limiter {
    float: left;
}
.limiter label { 
    float: left;
    margin-right: 7px;
    line-height: 25px; 
    color: #1a1818;
}
.limiter ul {
    float: right;
    font-weight: 400;
}
.limiter li {
    float: left;
    margin: 0 0 0 5px;
}
.limiter a {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    line-height: 25px;
    color: #1a1818;
    text-decoration: none;
}
.limiter a:hover { color: #c20f25; }
.limiter li.active a { border-bottom: solid 1px #d1d1d1; }
.limiter .per-page { display: none; }

/* Pager */

.pages {
    float: right;
    min-height: 25px;
    margin-left: 15px;
    margin-right: 15px;;
    color: #1a1818;
}
.pages .current {
    float: left;
    margin-right: 7px;
    line-height: 25px;
}
.pages .previous,
.pages .next {
    display: inline-block;
    width: 25px;
    text-indent: -808080em;    
    background-repeat: no-repeat;
    text-align: center;
    text-decoration: none;
}
.pages a span {
    display: none;
}
.pages .previous:before,
.pages .next:before {
    display: block;
    font-size: 12px;
    text-indent: 0;
    color: #1a1818;
    font-family: "fredericks" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 25px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    -ms-transition: color .3s ease;
    transition: color .3s ease;
}
.pages .previous:hover:before,
.pages .next:hover:before {
    color: #c20f25;
}
.pages .previous.disabled,
.pages .next.disabled {
    display: none;
}
.pages .previous:before { content: 'l'; }
.pages .next:before { content: 'r'; }

/* bottom toolbar */

.btm-pager .toolbar {
    clear: both;
    background: none;
}
.btm-pager h1,
.btm-pager .mobile-layered-wrapper,
.btm-pager .limiter,
.btm-pager .sorter { display: none; }

/* Products Grid 
-------------------------------------------------------------- */

.category-products .category-title-box h1 {
    float: left;
    width: 100%;
    margin-top: 25px;
}
.products-grid-wrapper {
    width: 94.202898550725%;
    margin-left: 2.8985507246375%;
}
.products-grid {
    text-transform: uppercase;
    width: 100%;
    margin: 15px 0 0;
    padding: 0;
    clear: both;
    float: left;
}

/* Item
-------------------------------------------------------------- */

.products-grid .item {
    float: left;
    width: 32.413793103448%;
    margin-right: 1.379310344828%;
    margin-bottom: 50px;
    padding: 0;
    position: relative;
}

.products-grid .item:nth-child(4n+1) { clear: none !important; }
.products-grid .item:nth-child(3n+1) { clear: left !important; }
.products-grid .item:nth-child(3n) { margin-right: 0; }

/* image */

.products-grid .item .image-wrapper {
    float: left;
    width: 100%;
}
.products-grid .product-image img {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
/* info */

.products-grid .product-info {
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    text-align: center;
}
.products-grid .product-info a {
    text-decoration: none;
}
.products-grid .product-name {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    color: #474747;
    text-transform: uppercase;
}
.products-grid .price-box {
    font-size: 12px;
    color: #474747;
}
.products-grid .item:hover .product-name,
.products-grid .item:hover .price-box {
    color: #c20f25;
}

/* quickview */

.products-grid .item div.btn-quickview {
    display: none !important;
}
.products-grid .item button.btn-quickview {
    display: none !important;
    position: absolute;
    left: 25%;
    top: -50px;
    width: 50%;
    padding: 5px 0;
    background: #eeeeef;
    font-weight: 700;
    color: #666;
    border: none;
    text-transform: uppercase;
    opacity: 0;
    cursor: pointer;
}
.products-grid .item:hover .btn-quickview {
    opacity: 1;
}
.products-grid .item .btn-quickview:hover {
    color: #1a1818;
}

.products-grid .item .color-swatches {
    float: left;
    width: 100%;
    visibility: hidden;
    height: 0;
}
.products-grid .item:hover .color-swatches {
    height: auto;
    visibility: visible;
}
.products-grid .item .color-swatches li {
    float: left;
    margin-right: 5px;
}
.products-grid .item .color-swatches li a {
    float: left;
}
/* Product Banners */

.products-grid .item .banner {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    margin: 5px;
    pointer-events: none;
    background: #999;
    opacity: .75;
    border-radius: 50px;
    padding: 5px 5px 5px;
}
.products-grid .item .banner span {
    display: none;
    color: #fff;
    font-size: 7px;
    font-weight: bold;
    line-height: 9px;
    padding-top: 14px;
}
.products-grid .item.editors-pick .banner,
.products-grid .item.editors-pick .banner span.editors-pick,
.products-grid .item.new .banner,
.products-grid .item.new .banner span.new,
.products-grid .item.sale .banner,
.products-grid .item.sale .banner span.sale,
.products-grid .item.new-color .banner,
.products-grid .item.new-color .banner span.new-color,
.products-grid .item.best-seller .banner,
.products-grid .item.best-seller .banner span.best-seller {
    display: block;
}

/* Responsive
-------------------------------------------------------------- */
/* Widescreen [[ Blue ]] */
@media only screen and (min-width: 1110px)  {}
/* Small Desktops [[ Brown ]] */
@media only screen and (min-width: 960px) and (max-width: 1109px) {
}
/* Tablet (Portrait) [[ Yellow ]] */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* Mobile Universal [[ Orange Border ]] */
@media only screen and (max-width: 767px) {    
    .catalog-category-view .col-left.sidebar,
    .catalogsearch-result-index .col-left.sidebar {
        margin-bottom: 0;
    }
    /* Sidebar Navigation */

    .block-vertnav {
        display: block !important;
        width: 100%;
        float: left;
    }
    .block-vertnav .block-title {
        display: block;
        float: left;
        width: 98%;
        margin: 10px auto;
        padding-left: 2%;
        color: #1a1818;
        background: #eeeeef;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 35px;
        cursor: pointer;
    }
    .block-vertnav .block-title:hover{ color: #c20f25; }
    .block-vertnav .block-title span:after {
        content: 'd';
        float: right;
        width: 30px;
        height: 30px;
        margin-left: 10px;
        color: #1a1818;
        line-height: 35px;
        font-size: 14px;
        font-family: "fredericks" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .block-vertnav .block-title:hover span:after {
        color: #c20f25;
    }
    .block-vertnav .block-title.is-on span:after { content: 'u'; }
    .block-vertnav .block-content { display: none; }
    .block-vertnav ul {
        font-size: 14px;
    }
    .block-vertnav ul li {
        border-bottom: solid 1px #d1d1d1;
    }
    .block-vertnav ul li a {
        line-height: 30px;
    }
    .block-vertnav ul li li {
       margin-bottom: 0px;    
       border-bottom: none;
    }
    .block-vertnav .block-title.is-on + .block-content {
        display: block !important;
    }
    .catalog-category-view .grid-col2-main,
    .catalogsearch-result-index .grid-col2-main {
        margin-right: 0;
    }
    .category-title-box {
        margin-left: 0;
    }
    .toolbar {
        width: 100%;
        margin-left: 0;
        padding: 0;
        background: transparent;
    }
    /* filter */

    .mobile-layered-btn {
        display: block;
        height: 30px;
        width: 165px;
        margin: 10px auto;
        padding-left: 10px;
        color: #1a1818;
        border-top: solid 2px #000;
        border-bottom: solid 1px #000;
        background: #fff;
        font-size: 14px;
        line-height: 30px;
        font-weight: normal;
        cursor: pointer;
    }
    .mobile-layered-btn:hover { color: #c20f25; }
    .mobile-layered-btn:after {
        content: 'd';
        float: right;
        width: 30px;
        height: 30px;
        margin-left: 10px;
        font-size: 14px;
        line-height: 30px;
        font-family: "fredericks" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .mobile-layered-btn.is-on:after {
        content: 'u';
    }
    .mobile-layered-wrapper { 
        display: none; 
        width: 100%;
    }
    .mobile-layered-btn.is-on ~ .mobile-layered-wrapper {
        display: block;
    }
    .filter-label { display: none; }
    
    .filter-container {
        display: block;
        width: 100%;
    }
    .filter {
        margin: 0;
        width: 100%;
        border-top: solid 1px #d1d1d1;
    }
    .filter > li {
        clear: both;
        width: 100%;
        height: auto;
        padding: 0;
        border: none;
        border-bottom: solid 1px #d1d1d1 !important;    
        background: #eeeeef;
        color: #1a1818;
        font-size: 12px;
        line-height: 1;
    }
    .filter .name {
        float: left;
        width: 80%;
        padding: 12px 5px;
        text-align: left;
    }
    .filter .name:after {
        display: none;
    }
    .filter .opener {
        float: right;
        width: 30px;
        height: 30px;
        text-align: center;
        cursor: pointer;
        margin: 0;
    }
    .filter .opener:before {
        content: 'd';
        width: 30px;        
        height: 30px;
        float: left;
        margin: 10px 0 0;
        font-size: 10px;
        color: #1a1818;
        font-family: "fredericks" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .filter .opener.is-on:before {
        content: 'u';
    }
    .filter > li:hover {
        color: #c20f25;
        border: none;
    }
    .filter > li:hover .opener:before {
        color: #c20f25;
    }
    .filter ol {
        display: none !important;
        position: static;
        clear: both;
        float: left;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        border: none;
    }
    .filter .opener.is-on + ol {
        display: block !important;
    }        
    .filter ol li {
        float: left;
        clear: both;
        width: 100%;
        border-top: solid 1px #d1d1d1;
        font-weight: normal;
    }
    .filter ol li a {
        clear: both;
        width: 92%;
        margin-right: -50px;
        padding: 0 4%;
        line-height: 35px;
    }
    .filter ol li .count {
        margin-top: 0px;
        width: 50px;
        font-size: 10px;
        text-align: center;
        line-height: 35px;
    }
    .filter ol li:hover a,
    .filter ol li:hover .count {
        color: #c20f25;
    }
    
    /* Currently */

    .filter > li.currently-label {
        width: 92%;
        padding: 12px 4%;
        background: #fff;
        border: none;
        text-align: center;
    }
    .filter > li.currently-label:hover { border: none; }
    .filter > li.active {
        padding-right: 0;
        border: none;
        background: none;
    }
    .filter > li.active:hover { color: #c20f25; }
    .filter > li.active .btn-remove { margin: 10px 15px 10px 10px; }
    .filter > li.active .btn-remove:before { font-size: 12px; }
    .filter > li.active span { line-height: 30px; }

    /* actions */

    .filter > li.actions {
        width: 50%;
        padding-left: 25%;
        border-bottom: none;
    }
    .filter > li.actions a {
        display: block;
        float: none;
        margin: 10px auto;
        background: #eeeeef;
        font-size: 12px;
        line-height: 30px;        
        text-align: center;
    }
    .sorter,
    .limiter {
        display: none;
    }
    .toolbar-right {
        clear: both;
        width: 100%;
        margin-left: 0;
    }
    .pages {
        position: relative;
        float: left;
        clear: both;
        width: 100%;
        margin-left: 0;
    }
    .pages .previous,
    .pages .next {
        position: absolute;
    }
    .pages .previous:before,
    .pages .next:before {
        font-size: 25px;
    }
    .pages .previous { left: 10px; }
    .pages .next { right: 10px; }
    .pages .current {
        float: none !important;
        display: block;
        margin: 0 !important;
        font-size: 12px;
        position: absolute;
        left: 44%;
    }
    .toolbar .pages { display: none; }
    .btm-pager .toolbar .pages { display: block; }

    .products-grid .item {
        width: 49%;
        margin-right: 2%;
    }
    .products-grid .item img {
        width: 100%;
    }
    .products-grid .item .color-swatches img {
        width: 15px;
    }
    .products-grid .item:nth-child(3n+1) {
        clear: none !important;
    }
    .products-grid .item:nth-child(2n+1) {
        clear: left !important;
    }
    .products-grid .item:nth-child(3n) {
        margin-right: 2%;
    }
    .products-grid .item:nth-child(2n) {
        margin-right: 0;
    }
    .products-grid .item .product-info {
        opacity: 1;
    }
    .product-info .btn,
    .product-info .separator {
        display: none;
    }
    .btm-pager .mobile-layered-btn { display: none; }
    .btm-pager .pages { display: block; }
    .btn-quickview { display: none !important; }
    .products-grid .item .btn-quickview { display: none !important; }
}
/* Mobile (Landscape) [[ Pink ]] */
@media only screen and (min-width: 480px) and (max-width: 639px) {}
/* Mobile (Landscape - Large Mobile, iPhone 5, etc.) [[ Purple ]] */
@media only screen and (min-width: 640px) and (max-width: 767px) {}
/* Mobile (Portrait) [[ Gray ]] */
@media only screen and (min-width: 320px) and (max-width: 479px) {}