/* ----------------------------------------------- HERO IMAGES ----------------------------------------------- */

.sale-hero-banner {
    background-image: url('/assets/images/Sale_Page/20191218_EOY_Sale/1200x400_beartooth_mtn_oak_10040735.jpg');
    background-position: bottom center;
}

.sp-cat-hero.hardwood-hero {
    background-image: url('/assets/images/Sale_Page/20191218_EOY_Sale/1200x460_red_cumaru_10047052.jpg');
}

.sp-cat-hero.waterproof-hero {
    background-image: url('/assets/images/Sale_Page/20191218_EOY_Sale/1200x460_rose_canyon_pine_10043266.jpg');
}

.sp-cat-hero.laminate-hero {
    background-image: url('/assets/images/Sale_Page/20191218_EOY_Sale/1200x460_riverside_hickory_10046855.jpg');

}

.sp-cat-hero.bamboo-hero {
    background-image: url('/assets/images/Sale_Page/20191218_EOY_Sale/1200x460_vintage_java_10042980.jpg');
}

.hp-heading .edlp-hero-banner {
    background-image: url('/assets/images/canada/Big_Box/1200x400_canada_aquaseal_bkgrnd_new.jpg');
}

/*DON'T CHANGE*/
/* -- waterproof story background -- */
a.sp-hero-story.waterproof-hero-story {
    background: url('/assets/images/Sale_Page/20191001_Start_Finish/385x300_splash_bkgrnd.jpg');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 80px;
}

/* -- accessories hero image -- */
.sp-cat-hero.accessories-hero {
    background-image: url('/assets/images/Sale_Page/img-common/accessories/1200x460_accessories_room.jpg');
}

/* ----------------------------------------------- BP GENERAL ------------------------------------------------ */

body {
    font-size: 14px;
}

.caps {
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------- SALE HERO BANNER ------------ */

.sale-hero-banner {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 420px;
    position: relative;
    text-align: center;
}

.sale-hero-banner a,
.sale-hero-banner a:hover {
    text-decoration: none;
}

.sale-hero-banner .top {
    height: 130px;
    padding: 23px 18% 0;
    ;
    overflow: hidden;
    position: relative;
    text-align: center;
    top: 200px;
}

.sale-hero-banner .top .vert {
    display: none;
}

.sale-hero-banner .top .horiz {
    display: block;
}

.sale-hero-banner #countdownText {
    color: #fff;
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.sale-hero-banner .bottom {
    position: relative;
    top: 200px;
}

.hp-heading .edlp-hero-banner .button-wrap,
.sale-hero-banner .button-wrap {
    display: block;
    height: 40px;
    margin: 0 auto;
    width: 140px;
}

.hp-heading .edlp-hero-banner .button-left,
.sale-hero-banner .button-left {
    margin-right: 15px;
}

.hp-heading .edlp-hero-banner .button,
.sale-hero-banner .button {
    display: block;
}

.sale-hero-banner .floor-label {
    bottom: 15px;
    color: #fff;
    position: absolute;
    right: 15px;
}

/* - homepage overrides - */

.hp-heading .sale-hero-banner {
    height: 450px;
    margin-bottom: 15px;
}

.hp-heading .sale-hero-banner .top {
    top: 180px;
}

.hp-heading #countdownText {
    color: #fff;
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.hp-heading .countdown {
    position: relative;
    top: 200px;
}

.hp-heading .edlp-hero-banner .button-wrap,
.hp-heading .sale-hero-banner .button-wrap {
    margin: 0 auto;
    width: 332px;
}

.hp-heading .edlp-hero-banner .button,
.hp-heading .sale-hero-banner .button {
    display: block;
    float: left;
    width: 150px;
}

.hp-heading .edlp-hero-banner .button-left,
.hp-heading .sale-hero-banner .button-left {
    margin-right: 15px;
}

/* --------------- Canada ------------- */

.hp-heading .edlp-hero-banner {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    font-family: avenir;
    height: 400px;
    padding-top: 140px;
}

.hp-heading .edlp-hero-banner .top {
    padding-bottom: 10px;
    text-align: center;
}

.hp-heading .edlp-hero-banner .top img {
    margin: 0 auto;
    width: 590px;
}

.hp-heading .edlp-hero-banner .middle {
    font-family: avenir;
    font-weight: bold;
    font-size: 27px;
    padding-bottom: 15px;
    text-align: center;
}

.hp-heading .edlp-hero-banner .bottom {
    width: 100%;
}


/* ----------------------------------------------------------------------------- FINANCING BANNER ------------- */

.financing-banner {
    background: #fff;
    color: #777;
    font-family: avenir;
    padding: 20px 40px 20px 40px;
    text-align: center;
}

.financing-banner a,
.financing-banner a:hover {
    color: #777;
    text-decoration: none;
}

.financing-banner .ban-line0 {
    color: #333;
    font-size: 25px;
    line-height: 26px;
    padding-top: 10px;
}

.financing-banner .ban-line1 {
    color: #bf0c26;
    font-size: 38px;
    font-weight: bold;
    line-height: 38px;
    margin-top: 15px;
    text-transform: uppercase;
}

.financing-banner .ban-line2,
.financing-banner .ban-line3 {
    font-size: 13px;
    line-height: 20px;
    padding: 0 100px 0 100px;
}

/* financing-offer */

.financing-banner a.financing-offer,
.financing-banner a.financing-offer:hover {
    background: #bf0c26;
    color: #fff !important;
    display: block;
    font-size: 22px;
    text-align: center;
    margin-top: 15px;
    text-decoration: none;
    width: 100%;
}

.financing-offer .inner-text {
    font-weight: bold;
    padding: 15px 0 15px 0;
}

.financing-offer .inner-text span {
    font-size: 16px;
    text-decoration: underline;
    font-weight: normal;
}

.hp-heading .financing-banner {
    padding: 0 40px 20px 40px;
}

.fin-image img {
    width: 170px;
}

/* ------------------------------------------------------------------------- Unique ------------- */

.sp-cat-hero-headline {
    margin-bottom: 26px;
}

.accessories-section a.sp-cat-hero {
    padding-top: 180px;
}

/* ------------------------------------------ RESPONSIVE BREAKPOINTS ----------------------------------------- */
/* ------------------------------------------------ BREAKPOINT DESKTOP --------------------------------------- */
@media screen and (min-width: 1217px) {
    .sale-bamboo .customNavigation {
        display: none;
    }
}

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

    /* ------------------------------------------------------------------------- FINANCING BANNER ------------- */
    .sale-hero-banner .top {
        padding: 0 10%;
    }

    .financing-banner .ban-line2,
    .financing-banner .ban-line3 {
        padding: 0 50px 0 50px;
    }

    .visualizer-banner .banner-button {
        margin: -62px 20px 0 0;
    }

}

/* ----------------------------------------------- BREAKPOINT TABLET ------------------------------------------ */

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

    /* ------------------------------------------------------------------------- HB SALE HERO (Tablet) -------- */

    .sale-hero-banner {
        height: 360px;
    }

    .sale-hero-banner .top {
        padding: 0 7%;
        top: 170px;
    }

    .sale-hero-banner .bottom {
        top: 140px;
    }

    .sale-hero-banner #countdownText {
        padding-bottom: 5px;
    }

    /* HP overrides */

    .hp-heading #countdownText {
        margin-bottom: 0;
    }

    .hp-heading .sale-hero-banner {
        height: 460px;
    }

    .hp-heading .sale-hero-banner .top {
        padding: 0 7%;
        top: 240px;
    }

    .hp-heading .sale-hero-banner .countdown {
        top: 180px;
    }

    .hp-heading .sale-hero-banner .bottom {
        top: 190px;

    }

    /* ------------------------------------------------------------------------- FINANCING BANNER (Tablet) ---- */

    .financing-banner .ban-line1 {
        font-size: 30px;
        line-height: 30px;
    }

    .financing-banner .ban-line2,
    .financing-banner .ban-line3 {
        font-size: 11px;
        line-height: 18px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .financing-offer .inner-text {
        font-weight: bold;
        padding: 15px 20px 15px 20px;
    }


    /* ------------------------------------------------------------------------- SUBCAT (Tablet) -------------- */

    .sp-cat-subcat .subcat-link {
        padding: 25px 30px 25px 30px;
    }

    .sp-cat-footer {
        margin-bottom: 10px;
        margin-top: 0;
    }

    .sp-cat-footer .col-xs-12 {
        padding-bottom: 40px;
    }
}

/* ------------------------------------------------ BREAKPOINT MOBILE ----------------------------------------- */

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

    .hp-heading .edlp-hero-banner .top img {
        width: 430px;
    }

    .hp-heading .edlp-hero-banner .middle {
        font-size: 23px;
    }
}

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

    .row.no-gutters {
        margin-right: -21px;
        margin-left: -12px;
    }

    /* ------------------------------------------------------------------------- HB SALE HERO (Tablet) -------- */

    .sale-hero-banner {
        margin-bottom: 20px;
    }

    .sale-hero-banner .top .vert {
        display: block;
    }

    .sale-hero-banner .top .horiz {
        display: none;
    }

    .sale-hero-banner .top {
        height: 180px;
        padding: 0 15%;
        top: 90px;
    }

    .sale-hero-banner .bottom {
        top: 80px;
    }

    .sale-hero-banner #countdownText {
        font-size: 20px;
    }

    .sale-hero-banner .floor-label {
        bottom: 15px;
        right: auto;
        text-align: center;
        width: 100%;
    }

    .hp-heading .sale-hero-banner {
        height: 400px;
    }

    .hp-heading .sale-hero-banner .top {
        top: 100px;
    }

    .hp-heading .sale-hero-banner .countdown {
        top: 80px;
    }

    .hp-heading .sale-hero-banner .bottom {
        top: 95px;
    }

    .hp-heading .edlp-hero-banner .top img {
        width: 300px;
    }

    /* ---- CANADA ---- */

    .hp-heading .edlp-hero-banner .middle {
        padding: 0 8px;
    }

    /* ------------------------------------------------------------------------- FINANCING BANNER (Mobile) ---- */

    .financing-banner {
        margin-bottom: 15px;
    }

    .financing-banner .ban-line1 {
        font-size: 27px;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0;
    }

    .financing-banner .ban-line2,
    .financing-banner .ban-line3 {
        padding-left: 5%;
        padding-right: 5%;
    }

    div[class^="col-"].financing-banner,
    div[class*="col-"].financing-banner {
        padding-bottom: 0;
    }

    /* ------------------------------------------------------------------ CATEGORY HERO (Mobile) -------------- */

    .sp-cat-hero .sponsor-icon {
        bottom: 285px;
        right: 20px;
    }

    /* ------------------------------------------------------------------------- JUMP NAV (Mobile) ------------ */

    .ul.sp-nav {
        width: auto;
    }

    /* ------------------------------------------------------------------------- SUBCAT (Mobile) -------------- */

    .sp-cat-subcat .subcat-link {
        padding: 25px 30px 25px 30px;
    }

    /* ------------------------------------------------------------------------- CAROUSEL (Mobile) ----------- */

    .sp-cat-products .sp-cat-header h2 {
        padding-left: 10px;
        padding-right: 10px;
    }

}

/* ----------------------------------------------- BREAKPOINT MOBILE SM ------------------------------------- */

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

    /* Sale Hero */

    .sale-hero-banner,
    .hp-heading .sale-hero-banner {
        font-weight: bold;
        margin: 0 10px 0 0;
    }

    .sale-hero-banner {
        height: 320px;
    }

    .sale-hero-banner .top,
    .sale-hero-banner .bottom {
        width: 100%;
    }

    .sale-hero-banner .bottom {
        top: 40px;
    }

    .hp-heading .edlp-hero-banner .button,
    .sale-hero-banner .button {
        display: block;
        margin: 0 auto 10px auto;
    }

    .hp-heading .edlp-hero-banner .button-wrap,
    .sale-hero-banner .button-wrap {
        margin-bottom: 8px;
    }

    .hp-heading .sale-hero-banner {
        height: 380px;
    }

    .hp-heading .sale-hero-banner .top {
        padding: 0 10%;
        top: 50px;
    }

    .hp-heading .sale-hero-banner .countdown {
        top: 25px;
    }

    .hp-heading .sale-hero-banner .bottom {
        top: 40px;
    }

    .hp-heading #countdownText {
        font-size: 15px;
    }


    .hp-heading .edlp-hero-banner .button-wrap,
    .hp-heading .sale-hero-banner .button-wrap {
        height: 90px;
        margin: 0 auto;
        width: 240px;
    }

    .hp-heading .edlp-hero-banner .button,
    .hp-heading .sale-hero-banner .button {
        /* - HP - */
        clear: left;
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 215px;
    }

}

/* ----------------------------------------------- BREAKPOINT MOBILE XS -------------------------------------- */

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

    .col-xs-12,
    .col-sm-12,
    .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    div[class^="col-"].sale-hero-banner,
    div[class*="col-"].sale-hero-banner {
        padding-left: 15px;
    }

    .hp-heading .sale-hero-banner {
        height: 340px;
    }

    .hp-heading .sale-hero-banner .top {
        padding: 0 5%;
        top: 30px;
    }

    .hp-heading .sale-hero-banner .countdown {
        top: -15px;
    }

    .hp-heading .sale-hero-banner .bottom {
        top: -5px;
    }

    .hp-heading .edlp-hero-banner .button-wrap,
    .hp-heading .sale-hero-banner .button-wrap {
        height: 90px;
        margin: 0 auto;
        width: 240px;
    }

    .hp-heading .edlp-hero-banner .button,
    .hp-heading .sale-hero-banner .button {
        clear: left;
        float: none;
        width: 215px;
    }

    .financing-banner .ban-line0 {
        margin: 0 0 10px 12px;
        width: 93%;
    }

}