﻿/* CAROUSELS AND PRODUCT SPOTLIGHTS */
.carouselHolder {
    position: relative;
    overflow: hidden;
    padding-bottom: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 0 21px 0 20px;
}

.flat.carouselHolder{
    padding:0;
}

.listPrevious, .listNext {
    position: absolute;
    top: 0;
}

.listPrevious {
    position: absolute;
    left: 3px;
}

.listNext {
    position: absolute;
    right: 3px;
}

.flat .listNext, .flat .listPrevious {
    display: none;
}

.carouselFrame {
    position: relative;
    overflow: hidden;
}

.flat .carouselFrame {
    height: auto !important;
    text-align: justify; /* for non-flex browsers */
}

    .flat .carouselFrame ul {
        display:flex;
        flex-flow:row wrap;
        justify-content:space-around;
    }

.flat .productSpotlightFrame {
    flex-basis: 200px;
}

    /* for non-flex browsers */
    .flat .carouselFrame ul:after { 
        content: '';
        display: inline-block;
        width: 100%;
    }


.productSpotlightFrame {
    overflow: hidden;
}

li.productSpotlightFrame {
    list-style: none;
}

.flat .productSpotlightFrame {
    margin: 0 0 12px;
    padding-bottom: 12px;
    display: inline-block;
    border-bottom: solid 1px #dbdbdb;
}

.noMoreItems .listPrevious, .noMoreItems .listNext {
    visibility: hidden;
}

.listPrevious, .listNext,
.carouselFrame, .productSpotlightFrame {
    height: 182px;
}

.canPurchase .listPrevious, .canPurchase .listNext,
.canPurchase .carouselFrame, .canPurchase .productSpotlightFrame {
    height: 210px;
}

.listPrevious, .listNext,
.carouselFrame {
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
}
.listPrevious, .listNext {
    width: 25px;
    background-repeat: no-repeat;
}
.listPrevious {
    background-image: url(/images/resources/arrow-line-left.png);
    background-position: right 50%;
}

.listNext {
    background-image: url(/images/resources/arrow-line-right.png);
    background-position: left 50%;
}



#ResultsColumn .listPrevious, #ResultsColum .listNext {
    width: 22px;
}

@media screen and (max-width:600px){
    .flat .productSpotlightFrame {
        flex-basis: 150px;
        height:150px;
    }
    .flat .productSpotlight {
        width:140px;
    }

    .flat.canPurchase .productSpotlightFrame{
        height:195px;
    }
}