/* Category Pages & Search Pages */

.catalog-category-view .main-container {
    margin-top: 0;
}

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

.toolbar {
    background: #4fc7e7;
    display: block;
    text-transform: uppercase;
    float: left;
    color: #fff;
    min-height: 30px;
    width: 100%;
}

/* Filtered Navigation */

#mobile-filter { display: none }
.mobile-layered-btn { display: none; }

.filter-label {
    float: left;
    font: normal 12px/30px 'spy mono', 'Lucida Console', Monaco, monospace;
    color: #fff;
    margin-left: 15px;
    letter-spacing: .1em;
}
.filter {
    float: left;
    min-height: 30px;
    margin-left: 5px;
}
.filter > li {
    display: block;
    float: left;
    margin: 7px 5px 7px 0;
    height: 16px;
    min-width: 70px;
    padding: 0 25px 0 5px;
    cursor: pointer;
    position: relative;
    color: #4fc7e7;
    background-color: #fff;
}
.filter > li:before {
    content: 'E';
    right: 2px;
    position: absolute;
    top: 2px;
    color: #4fc7e7;
    font-family: "spy-optic" !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 .name {
    float: left;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .1em;
    height: 16px;
    padding-top: 1px;
    line-height: 16px;
}
.filter > li:last-child {
    margin-right: 0;
}
.filter > li:hover {
    color: #fff;
    background-color: #000;
    z-index: 4000;
}
.filter > li:hover:before {
    color: #fff;
}
.filter ol {
    position: absolute;
    width: 200px;
    display: none;
    z-index: 1;
    background: #fff;
    border: solid 1px #4fc7e7;
    border-top: solid 1px #000;
    margin-top: 16px;
    margin-left: -5px;
}
.filter li:hover ol {
    display: block;
}
.filter ol li {
    clear: both;
    float: left;
    font-size: 12px;
    color: #4fc7e7;
    letter-spacing: .1em;
}
.filter ol li a {
    color: #4fc7e7;   
    padding: 0px 5px;
    float: left;
    width: 165px;
    padding-right: 30px;
    letter-spacing: .1em;
}
.filter ol li .count {
    float: right;
    width: 30px;
    padding: 0px 5px 0px 0;
    margin-left: -35px;
    text-align: right;
    line-height: 16px;
}
.filter ol li:hover {
    background: #000;
    color: #fff;
}
.filter ol li a:hover {
    color: #fff;
}
/* Filtered Navigation - Currently */ 

.filter > li.active {
    color: #fff;
    background-color: #4fc7e7;
    background-image: none;
    padding-right: 5px;
    font-size: 12px;
    line-height: 16px;
}
.filter > li.active:before {
    display: none;
}
.filter > li.active span {
    line-height: 16px;
    float: left;
}
.filter > li.active span.label {
    margin-right: 5px;
}
.filter > li.active .btn-remove {
    margin-right: 10px;
    margin-top: 0px;
    width: 11px;
    height: 11px;
    opacity: 1;
}
.filter > li.active .btn-remove:before {
    float: left;
    content: 'F';
    color: #fff;
    text-indent: 0;
    margin-top: 3px;
    font-size: 11px;
    font-family: "spy-optic" !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.active:hover {
    background: #000;
}
.filter > li.active:after {
    display: none;
}
.filter > li.actions {
    float: left;
    padding: 0px;
    width: auto;
    line-height: 16px;
    background-image: none;
}
.filter > li.actions:before {
    display: none;
}
.filter > li.actions a {
    line-height: 16px;
    font-size: 12px;
    color: #4fc7e7;
    float: left;
    padding: 0 5px;
}
.filter > li.actions a:hover {
    color: #fff;
    background: #000;
}
.filter .actions:after {
    display: none;
}

/* Sorter */

.sorter {
    float: left;
    margin-left: 15px;
}
.sorter label {
    float: left;
    margin-right: 5px;
    font: normal 12px/30px 'spy mono', 'Lucida Console', Monaco, monospace;
    color: #fff;
    letter-spacing: .1em;
    white-space: nowrap;
}
.sorter ul.dropdown {
    float: left;
}
.sorter ul ul {
    border-top: solid 1px #000; 
}
.sorter ul.dropdown > li {
    height: 16px;
    width: 70px;
    cursor: pointer;
    padding: 0 25px 0 5px;
    position: relative;
    color: #000;
    background: #fff;
    float: left;
    margin: 7px 0;
}
.sorter ul.dropdown > li:after {
    content: 'E';
    right: 3px;
    position: absolute;
    top: 2px;
    color: #4fc7e7;
    font-family: "spy-optic" !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: #000;
}
.sorter ul.dropdown > li .name {
    float: left;
    height: 16px;
    padding-top: 1px;
    font-size: 12px;
    line-height: 16px;
    color: #4fc7e7;
}
.sorter ul.dropdown > li:hover:after {
    color: #fff;
}
.sorter ul.dropdown > li:hover { color: #fff; z-index: 4000; }
.sorter ul.dropdown > li:hover .name { color: #fff;}

.sorter ul.dropdown ul {
    display: none;
    z-index: 1;
    background: #fff;
    margin-top: 16px;
    position: absolute;
    margin-left: -5px;  
    width: 100px;
    border: solid 1px #4fc7e7;
    border-top: solid 1px #000;
}
.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: 0px 5px;    
    color: #4fc7e7;
}
.sorter ul.dropdown ul li:hover a {
    color: #fff;
    background: #000;
}
.sorter ul.dropdown ul li.active a {
}
.sorter ul.dropdown ul li.active:hover a {
}
.sorter .category-asc,
.sorter .category-desc {
    display: none;
}

/* Pager */

.pages {
    float: right;
    height: 30px;
    margin-right: 5px;
    margin-left: 0px;
    font: normal 12px/30px 'spy mono', 'Lucida Console', Monaco, monospace;
    letter-spacing: .1em;
}
.pages .current {
    color: #fff;
    float: left;
    margin-right: 10px;
}
.pages .previous,
.pages .next {
    float: left;
    text-indent: -999em;    
    background-repeat: no-repeat;
    width: 11px;
}
.pages .previous:before,
.pages .next:before {
    font-size: 11px;
    line-height: 25px;
    padding-top: 9px;
    height: 21px;
    float: left;
    text-indent: 0;
    color: #fff;
    font-family: "spy-optic" !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;
}
.pages .previous:hover:before,
.pages .next:hover:before {
    color: #000;
}
.pages .previous.disabled:before,
.pages .previous.disabled:before:hover,
.pages .next.disabled:before,
.pages .next.disabled:before:hover {
    color: #a7e3f3;
    cursor: default;
}
.pages .previous:before {
    content: 'B';
}
.pages .next:before {
    content: 'A';
}

/* Limiter */

.limiter {
    float: right;
    line-height: 30px;
    margin-right: 15px;
}
.limiter .label { 
    float: left; 
    margin-right: 5px; 
    font: normal 12px/30px 'spy mono', 'Lucida Console', Monaco, monospace;
    color: #fff;
    letter-spacing: .1em;
}
.limiter ul { float: right; line-height: 30px; }
.limiter li { display: inline-block; margin-left: 5px;}
.limiter a {
    color: #fff;
    font: normal 12px/30px 'spy mono', 'Lucida Console', Monaco, monospace;
    letter-spacing: .1em;
}
.limiter a:hover { color: #000; }
.limiter li.active a { color: #fff; text-decoration: underline; }

.category-image-wrapper {
    margin-bottom: 15px;
}
.category-image img {
    width: 100%;
}
.category-image .category-block {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: solid 1px #000;
}
.category-image .category-block p {
    text-transform: none;
    letter-spacing: .035em;
    margin-bottom: 0;
}

/* Category Title */

.category-title-box {
    width: 100%;
    display: none;
    min-height: 40px;
    clear: both;
}
.category-title-box h1 {
    margin-left: 15px;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
}
.category-title-box .breadcrumbs {
    margin-left: 30px;  
    margin-top: 3px;
    float: right;
    width: auto;
    line-height: 40px;
}

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

.products-grid {
    text-transform: uppercase;
    text-align: center;
    width: 101%;
    margin: 0;
    padding: 0;
    clear: both;
    float: left;
}

/* Item */

.products-grid .item {
    width: 24%;
    margin-right: 1%;
    padding: 0;
    margin-top: 50px;
    margin-bottom: 10px;
    position: relative;
}
.products-grid .product-image img {
    float: left;
    width: 100%;
    max-width: 247px;
}

.products-grid .product-info {
    color: #8F8D8D;
    letter-spacing: .1em;
    clear: both;
    float: left;
    width: 100%;
}
.products-grid .product-info a {
    color: #8F8D8D;
}
.products-grid .product-info a:hover {
    color: #595959;
}

.products-grid .product-name {
    font: normal 13px 'spy sans', Helvetica, sans-serif;
    letter-spacing: .125em;
    margin-top: 5px;
}
.products-grid .product-name a { color: #f58026; }
.products-grid .product-name a:hover { color: #000; }

.products-grid .price-box {
    font-size: 12px;
}
.products-grid p.price-range-tag {
    margin-bottom: 0px;
}
.products-grid .price-range .price-label{
     display: none; 
}
.products-grid .price-box .regular-price,
.products-grid .price-box .special-price {
	
}

.products-grid .btn-quickview {
    display: none !important;
}
.products-grid .item:hover .btn-quickview {
    display: block !important;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    font-size: 10px;
    line-height: 13px;
    height: 13px;
    background: rgba(255,255,255,.8);
    border: solid 1px rgba(0,0,0,.2);
}
.products-grid .item .separator {
    display: none;
}
.products-grid .color-swatches {
    margin-left: 0;
    float: left;
    width: 100%;
    text-align: center;
    display: block;
    font-size: 0;
    margin-bottom: -5px;
}
.products-grid .color-swatches li {
    float: none;
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px;
}
.products-grid .color-swatches li img {
    width: 20px;
    height: 20px;
}
.products-grid .color-swatches li a {
    padding: 1px;
}
.products-grid .color-swatches li.more span {
        font-size: 20px;
        display: block;
        height: 23px;
        width: 25px;
        margin-top: 0;
        float: left;
    }
.products-grid .more-colors {
    clear: both;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #ababab;
    margin-top: 0;
}
.products-grid .more-colors span {
    border: solid 1px #ababab;
    padding-left: 10px;
    padding-right: 10px;
}
div.btn-quickview {
    display: none !important;
}
a.btn-quickview {
    /*display: inline !important;*/
    position: absolute;
    font-size: 0;
    font-size: 12px;
}

/* Product Banners */

.products-grid .item .banner {
    display: none;
    position: absolute;
    background: url(../images/sprite-promo-flags.gif) no-repeat 0 0;
    width: 100px;
    height: 17px;
    pointer-events: none;
    top: 10px;
    left: 13px;    
}
.products-grid .item.editors-pick .banner { background-position: 0 0; display: block; }
.products-grid .item.new .banner { background-position: 0 -17px; display: block; }
.products-grid .item.sale .banner { background-position: 0 -34px; display: block; }
.products-grid .item.new-color .banner { background-position: 0 -51px; display: block; }
.products-grid .item.best-seller .banner { background-position: 0 -68px; display: block; }

.btm-pager .toolbar { background: #fff;}
.btm-pager .filter-label,
.btm-pager .mobile-layered-wrapper,
.btm-pager .filter,
.btm-pager .sorter,
.btm-pager .limiter { display: none !important; }
.btm-pager .pages .previous:before,
.btm-pager .pages .next:before {
    color: #4fc7e7;
}
.btm-pager .pages .previous:hover:before,
.btm-pager .pages .next:hover:before {
    color: #000;
}
.btm-pager .pages .previous.disabled:before,
.btm-pager .pages .previous.disabled:before:hover,
.btm-pager .pages .next.disabled:before,
.btm-pager .pages .next.disabled:before:hover {
    color: #a7e3f3;
    cursor: default;
}
.btm-pager .pages .current {
    color: #4fc7e7;
}

/* Responsive
-------------------------------------------------------------- */

/* Widescreen [[ Blue ]] */
@media only screen and (min-width: 1280px)  {
    .products-grid .item {
        height: 235px;
    }
    .products-grid .item:hover .btn-quickview {
        top: 130px;
    }
    .products-grid .product-image {
        height: 147px;
        line-height: 147px;
    }

}
/* Small Desktops [[ Brown ]] */
@media only screen and (min-width: 960px) and (max-width: 1279px) {
    .products-grid .item {
        height: 235px;
    }
    .products-grid .item:hover .btn-quickview {
        top: 95px;
    }    
}
/* Tablet (Portrait) [[ Yellow ]] */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .products-grid .item {
        /*height: 300px;*/
    }
    .products-grid .item:hover .btn-quickview {
        top: 75px;
    }    
    .products-grid .product-name {
        font-size: 10px;
        line-height: 14px;
    }
    .products-grid .item h3 {
        font-size: 10px;
    }
    .products-grid .price-box {
        font-size: 10px;
    }
    .products-grid .product-info {
        font-size: 10px;
        line-height: 14px;
    }
}
/* Mobile Universal [[ Orange Border ]] */
@media only screen and (max-width: 767px) {    
    .category-title-box {
        margin-left: 0;
    }
    .toolbar {
        margin-left: 0;
        width: 100%;
    }
    .btm-pager .toolbar {
        margin-top: 35px;
    }
    #all-filter { display: none }
    .mobile-layered-btn {
        width: 97%;
        display: block;
        float: left;
        cursor: pointer;
        height: 25px;
        padding-left: 12px;
        padding-top: 7px;
        color: #fff;
        font-size: 14px;
        background: #f58026;
    }
    .mobile-layered-btn:hover {
        background: #000;
        color: #fff;
    }
    .mobile-layered-btn:after {
        font-family: "spy-optic" !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;
        width: 30px;
        height: 30px;
        content: 'A';
        float: right;
        margin-left: 10px;
        margin-top: 3px;
    }
    .mobile-layered-btn:hover:after {
        opacity: 1;
    }
    .mobile-layered-btn.is-on:after {
        content: 'C';
    }
    .mobile-layered-wrapper { 
        display: none; 
        float: left;
        width: 100%;
        border-top: solid 1px #404040;
        background: #b2b2b2;
    }
    .mobile-layered-btn.is-on ~ .mobile-layered-wrapper {
        display: block;
    }
    .filter-label {
        display: none;
    }
    .toolbar {
        min-height: 25px;
        height: auto;
    }
    .filter {
        margin: 0;
        float: left;
        width: 100%;
    }
    .filter > li {
        position: static;
        float: left;
        clear: both;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        border-bottom: solid 1px #ddd !important;     
        height: auto;   
        background-image: none;
        margin-bottom: 0;
        margin-top: 0;
        color: #fff;
        background: #f58026;
    }
    .filter > li.first {
        margin-left: 0;
    }
    .filter > li:hover {
        border: none;
        box-shadow: none;
        color: #000;
        background: #000;
    }
    .filter > li .name {
        float: right;
        height: 45px;
        font-size: 14px;
        line-height: 45px;
    }
    .filter > li:hover .name {
        color: #fff;
    }
    .filter > li:after {
        display: none;
    }
    .filter > li:last-child {
        border-bottom: none !important;
    }
    .filter .opener {
        float: left;
        width: 45px;
        height: 45px;
        text-align: center;
        cursor: pointer;
        margin: 0px 0 0 0;
    }
    .filter .opener:before {
        content: 'A';
        width: 45px;        
        height: 45px;
        float: left;
        margin: 13px 0 0;
        font-size: 16px;
        color: #fff;
        font-family: "spy-optic" !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: 'C';
    }
    .filter .opener:hover:before {
        opacity: 1;
    }
    .filter ol {
        float: left;
        border-top: solid 1px #eaeaea;
        position: static;
        display: none !important;   
        width: 100%;
        clear: both;
        height: auto;
        float: left;
        border: none;
        padding: 0;
        margin: 0;
        box-shadow: none;
        background: #fff;
    }
    .filter ol:hover {
        box-shadow: none;
    }
    .filter .opener.is-on + ol {
        display: block !important;
    }        
    .filter ol li {
        clear: both;
        float: left;
        width: 100% !important;
        min-height: 45px;
        line-height: 45px;
        font-size: 12px;
        border-top: solid 1px #000;
        color: #000;
    }
    .filter ol li a {
        color: #404040;
    }
    .filter ol li .count {
        margin-top: 10px;
    }
    .filter ol li:hover a {
        color: #fff;
    }
    .filter > li.active {
        margin-left: 0 !important;
        margin-right: 0;
        font-size: 13px;
        height: 45px;
        line-height: 45px;
        margin-top: 0;
    }
    .filter > li.active:hover {
        color: #fff;
    }
    .filter > li.active .btn-remove {
        margin-left: 10px;
        float: left;
        margin-right: 15px;
        margin-top: 12px;
    }
    .filter > li.active .btn-remove:before {
        width: 45px;
        height: 45px;
        font-family: "spy-optic" !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;
        content: 'F';
        float: left;
        color: #fff;
        text-indent: 0;
    }
    .filter > li.active span {
        line-height: 45px;
    }
    .filter > li.actions {
        margin-right: 0;        
        height: 45px;
        line-height: 45px;
        margin-top: 0;
        border-bottom: solid 1px #eaeaea !important;
    }
    .filter > li.actions a {
        margin-top: 0;
        margin-left: 35px;
        line-height: 45px;
        color: #fff;
    }
    .filter > li.actions:hover a {
        color: #fff;

    }
    .sorter {
        display: none;
    }
    .limiter {
        width: 37%;
        margin: 0 auto;
        float: none;
    }
    .pages {
        float: none;
        height: 54px;
        padding-top: 0px;
    }
    .pages .next {
        float: right;
        margin-right: 19px;
    }
    .pages .previous:before, .pages .next:before {
        font-size: 35px;
    }
    .filterbar .pages .current {
        float: none !important;
        display: block;
        margin: 13px 0 0 0 !important;
        font-size: 15px;
        position: absolute;
        left: 44%;
    }
    .products-grid .item .product-info {
        opacity: 1;
    }
    .product-info .btn,
    .product-info .separator {
        display: none;
    }
    .btm-pager .mobile-layered-btn {
        display: none;
    }
    .products-grid .item {width: 100% !important }
    .products-grid .item img {
        width: 100%;
        float: none;
    }
    a.btn-quickview,.products-grid .item:hover .btn-quickview {
        display: none !important;
    }
    .catalogsearch-result-index .sidebar {
        display: none;
    }
}
/* Mobile (Landscape) [[ Pink ]] */
@media only screen and (min-width: 480px) and (max-width: 639px) {
    .products-grid .item {
        height: 200px;
    }
    .filter > li > .name {
        width: 89%;
    }
}
/* Mobile (Landscape - Large Mobile, iPhone 5, etc.) [[ Purple ]] */
@media only screen and (min-width: 640px) and (max-width: 767px) {    
    .products-grid .item {
        height: 200px;
    }
    .filter > li > .name {
        width: 90%;
    }
}
/* Mobile (Portrait) [[ Gray ]] */
@media only screen and (min-width: 320px) and (max-width: 413px) {
    .products-grid .item {
        height: 200px;
    }
    .filter > li > .name {
        width: 83%;
    }
    .limiter {
        width: 50%;
        margin: 0 auto;
        float: none;
    }

}