/*
 * Only GENERIC (default) styling for each separate slider
 * derivative should go here. Any styling/customization of the default
 * components within a specific context such as; on the home page should
 * go in the respective css NOT HERE. In the case of the home page
 * it would be within index_page.css under the cms_page directory. It should
 * go without saying that these components and specifically the slider SHOULD
 * remain reusable across the entire site NOT just the home page.
 */


/*
 * ------------------------------------------------
 * Slick home page slider
 * ------------------------------------------------
 */

.shinola-slider-instance-container .slide .video-container video {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.shinola-slider-instance-container .slide .image-container img {
    max-width: 100%;
    height: auto;
}

.shinola-slider-instance-container .slide .image-container .default-image {
    display: block;
}

.shinola-slider-instance-container .slide .image-container .mobile-image {
    display: none;
}

.shinola-slider-instance-container .pager-component {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shinola-slider-instance-container .pager-component li {
    display: inline-block;
    width: auto;
}

.shinola-slider-instance-container .slide .cta-btn {
    position: absolute;
    z-index: 1000;
}

.shinola-slider-instance-container .slide-container-context {
    /*
     * Positioning context for cta and other absolute positioned elements.
     */
    position: relative;
}


@media all and (max-width: 699px) {

    .shinola-grid-instance-container {
        position: relative;
        margin-bottom: 42px;
    }

    .shinola-slider-instance-container .pager-component {
        display: none;
    }

    .shinola-slider-instance-container .slide.has-mobile-image .image-container .default-image {
        display: none;
    }

    .shinola-slider-instance-container .slide.has-mobile-image .image-container .mobile-image {
        display: block;
    }

}

/*
 * ------------------------------------------------
 * Alternating grid base styles
 * ------------------------------------------------
 */
.alternating-orientation-grid .grid-row {

    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;

}

.alternating-orientation-grid .grid-item {
    overflow: hidden;
}

.alternating-orientation-grid .item-first {
    float: left;
    width: 648px;
}

.alternating-orientation-grid .item-last {
    float: right;
    width: 318px;
}

.alternating-orientation-grid .grid-item .image-container .default-image {
    display: block;
}

.alternating-orientation-grid .grid-item .image-container .mobile-image {
    display: none;
}

.alternating-orientation-grid.reverse .item-first {
    float: right;
}

.alternating-orientation-grid.reverse .item-last {
    float: left;
}

@media all and (max-width: 699px) {

    .alternating-orientation-grid .grid-item .image-container .default-image {
        display: none;
    }

    .alternating-orientation-grid .grid-item .image-container .mobile-image {
        display: block;
    }

    .alternating-orientation-grid .grid-header {
        /*display: none;*/
        position: absolute;
        width: 48%;
        height: 50%;
        bottom: 0;
        top: auto;
    }

    .alternating-orientation-grid.reverse .grid-header {
        left: auto;
        right: 0;
    }

    .alternating-orientation-grid .grid-header .grid-heading {
        font-size: 20px!important;
    }

    .alternating-orientation-grid .grid-header .grid-heading:after {
        content: '';
        position: absolute;
        width: 92%;
        height: 3px;
        background: #ddd;
        bottom: 0px;
        left: 15px;
    }

    .alternating-orientation-grid.reverse .grid-header .grid-heading:after {
        left: auto;
        right: 15px;
    }

    .alternating-orientation-grid .grid-header .grid-heading a {
        position: absolute;
        height: 100px;
        left: 15px;
        top: 50%;
        width: 90%;
        line-height: 100px;
        margin-top: -50px;
        z-index: 1;
    }

    .alternating-orientation-grid.reverse .grid-header .grid-heading a {
        left: auto;
        right: 15px;
    }

    .alternating-orientation-grid .grid-item {
        width: 100%;
    }

    .alternating-orientation-grid .item-first {
        margin-bottom: 20px;
    }

    .alternating-orientation-grid .item-first,
    .alternating-orientation-grid .item-last {
        float: none
    }

    .alternating-orientation-grid .row-0 .item-last {
        clear: both;
    }

    .alternating-orientation-grid .row-0 .item-last .image-container {
        width: 48%;
        float: right;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .alternating-orientation-grid.reverse .row-0 .item-last .image-container {
        float: left;
    }

    .alternating-orientation-grid .row-0 .item-last {
        float: none;
        overflow: hidden;
        position: relative;
    }

    .alternating-orientation-grid .row-0 .item-last:after {
        /*content: attr(data-title);*/
        font-size: 16px;
        display: block;
        width: 47%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #ccc;
        text-align: center;
    }

    .alternating-orientation-grid.reverse .row-0 .item-last:after {
        /*content: attr(data-title);*/
        font-size: 16px;
        display: block;
        width: 47%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        left: auto;
        border-bottom: 2px solid #ccc;
        text-align: center;
    }

}

/*
 * -----------------------------------------------------------
 * Three column grid
 * -----------------------------------------------------------
 */
.three-column-grid .grid-component {
}

.three-column-grid .grid-row {
    overflow: hidden;
    text-align: center;
}

.three-column-grid .grid-item {
    display: inline-block;
    vertical-align: top;
    width: 318px;
    margin-right: 13px;
    float: left;
}

.three-column-grid .grid-item.item-last {
    float: right;
    margin: 0;
}

.three-column-grid .grid-item .image-container .default-image {
    display: block;
}

.three-column-grid .grid-item .image-container .mobile-image {
    display: none;
}

@media all and (max-width: 699px) {

    /*
     * Shared between all variants.
     */
    .three-column-grid .grid-item .image-container .default-image {
        display: none;
    }

    .three-column-grid .grid-item .image-container .mobile-image {
        display: block;
    }

    .three-column-grid .grid-item {
        margin: 0;
    }

    .three-column-grid .grid-item .image-container {
        overflow: auto;
    }

    /*
     * Default
     */
    .three-column-grid.default .grid-header {
        /*display: none;*/
        position: absolute;
        width: 48%;
        height: 50%;
        bottom: 0;
        top: auto;
    }

    .three-column-grid.default .grid-header .grid-heading {
        font-size: 20px!important;
    }

    .three-column-grid.default .grid-header .grid-heading a {
        position: absolute;
        height: 100px;
        left: 0;
        top: 50%;
        width: 100%;
        line-height: 100px;
        margin-top: -50px;
        z-index: 1;
    }

    .three-column-grid.default .grid-header .grid-heading:after {
        content: '';
        position: absolute;
        width: 92%;
        height: 3px;
        background: #ddd;
        bottom: 3px;
        left: 15px;
    }

    .three-column-grid.default .grid-item {
        display: block;
        width: auto;
    }

    .three-column-grid.default .grid-item {
        width: 48%;
    }

    .three-column-grid.default .row-0 .item-first {
        float: left;
        margin-bottom: 4%;
    }

    .three-column-grid.default .row-0 .item-1 {
        float: right;
    }

    .three-column-grid.default .row-0 .item-last {
        width: auto;
        float: none;
        clear: both;
        position: relative;
        overflow: hidden;
    }

    .three-column-grid.default .row-0 .item-last .image-container {
        width: 48%;
        float: right;
    }

    .three-column-grid.default .row-0 .item-last:before {
        /*content: attr(data-title);*/
        font-size: 16px;
        display: block;
        width: 47%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #ccc;
    }

    .three-column-grid .grid-item.item-first .image-container .default-image img {
        float: left;
    }

    .three-column-grid .grid-item.item-last .image-container .default-image img {
        float: right;
    }

    .three-column-grid .shinola-grid-instance-container .grid-item .merch-container > h3 {
        float: left;
        width: 100%;
    }

    /*
     * Variant 1
     * - Collapse to 2 columns (first|last)
     */
    .three-column-grid.variant-1 .grid-item {
        display: none;
        width: 49%;
    }

    .three-column-grid.variant-1 .grid-row {
        overflow: hidden;
    }

    .three-column-grid.variant-1 .item-first {
        float: left;
        width: 48%;
        display: block;
    }

    .three-column-grid.variant-1 .item-last {
        float: right;
        width: 48%;
        display: block;
    }

    /*
     * Variant 2
     * - Collapse to 1 column (first)
     */
    .three-column-grid.variant-2 .grid-item {
        display: none;
        width: 100%;
    }

    .three-column-grid.variant-2 .item-first {
        display: block;
    }

}

/*
 * -----------------------------------------------------------
 * IE8
 * -----------------------------------------------------------
 */

.cms-index-page .ie8 div[data-slider-title^="HP Our Story"] .grid-item .image-container > a:after {
    display: none;
}