/* General */
.breadcrumb {
    display: none;
}

/* Animation */










/******************** Main Pages ********************/

/* Main Section Wrapper */
.section {
    /* NOTE: container-type: inline-size; on the parent div is required for @container responsivness */
    container-type: inline-size;
    margin: 6rem 0;
}

.section--no_margin {
    container-type: inline-size;

    margin: 0;
}

.page_width_banner {
    img {
        width: 100%;
    }
}

/* Buttons */
.bttn_wrap {
    max-width: 25rem;
    width: 100%;
    margin: 0;
}

.bttn_wrap--full_width {
    width: 100%;
}
.bttn_wrap--center{
    margin: 0 auto;
}

.hero__bttn--vid {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
}

.bttn {
    padding: 15px 25px;
    font-size: 1.8rem;

    letter-spacing: 2px;
    font-weight: 700;
    display: block;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
    transition-duration: 0.3s;
    line-height: 1.2;
}

.bttn--wht {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;

    &:hover {
        text-decoration: none;
        background-color: #000;
        border: 1px solid #fff;
        color: #fff;
    }
}

.bttn--blk {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;

    &:hover {
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #000;
        color: #000;
    }
}

/* Headings */
.center_heading {
    margin-bottom: 3.5rem;
    text-align: center;

    h1 {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 3.5rem;
    }

    h3 {
        text-transform: uppercase;
        letter-spacing: 8px;
        font-weight: 700;
        font-size: 3.5rem;
    }

}

.column_heading {
    h3 {
        letter-spacing: 0px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 3.5rem;
    }
}



/* Fonts */
.copy--font_2 {
    font-size: 2rem;
}

.copy_wht {
    color: #fff !important;
}

.copy_blk {
    color: #000 !important;
}

/* Hero Banner */
.hero {
    height: 60vh;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    color: #fff;
    line-height: 1;


    .hero__header {
        margin-bottom: 2rem;

        h1 {
            font-family: Oswald, 'Lucida Grande', sans-serif;
            font-size: 8rem;
            font-weight: 500;
        }
    }

    .hero__subheader {
        margin-bottom: 2.3rem;
    }

    .subheader {
        font-size: 2rem;
        line-height: 1.2;
    }

    .subheader--bold {
        font-weight: 700;
    }


}

/* Video Hero */
.hero--video {
    position: relative;
    height: 100%;
    max-height: 60vh;
    overflow: hidden;

    video {
        width: 100%;
    }
}

/* Parallax Banner  */
.parallax_wrap {
    height: 40vh;
    color: #fff;
    display: flex;

    .paral {
        align-content: center;
    }

    .paral--center {
        align-content: center;
        margin: auto;
        text-align: center;
    }

    .paral__copy_wrap {
        font-size: 2rem;
        max-width: 40rem;
        margin-bottom: 2rem;
    }

    .paral__copy_heading {
        h3 {
            text-transform: uppercase;
            font-weight: 700;
            font-size: 3.5rem;
        }
    }

    .paral__copy_wrap--center {}

    .paral__heading_wrap--center {}

    .paral__copy_wrap--top_border {
        border-top: 10px #fff solid;
        padding-top: 2rem;
    }

    .paral__copy_wrap--btm_border {
        border-bottom: 10px #fff solid;
        padding-bottom: 2rem;
    }
}

/* Product Detail Table */
.tab_list {
    width: 60%;
    margin: 2rem auto 1rem auto;
    font-size: 1.8rem;

    table {
        width: 100%;
    }

    td,
    th {
        padding: 5px;
    }

    tr:nth-child(2n) {
        background-color: #e7e7e9;
    }

    .tab_list__header {
        border-bottom: 2px solid #000;
        font-weight: 700;
        padding: 5px;
    }

    .tab_list__prod {}

}


/* Product & Offer Detail */
.prod {
    display: flex;
    flex-direction: row;

    .prod__img {
        flex: 50%;
    }

    .prod__copy {
        flex: 50%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 2rem;

        .copy__para {
            padding: 3rem 0 0 0;
            align-self: center;
            font-size: 1.6rem;

            .copy__heading {
                letter-spacing: 0px;
                text-transform: uppercase;
                font-weight: 700;
                margin-bottom: 1rem;
            }

            .copy__body {}
        }

        .copy__bttn {
            align-self: flex-end;
            margin-bottom: 0;
        }
    }

    .prod__copy--center {
        align-content: center;
    }

    .prod__table {
        width: 100%;
        margin: 2rem auto 1rem auto;
        font-size: 1.8rem;

        table {
            width: 100%;
        }

        td,
        th {
            padding: 5px;
        }

        .prod__table_header {
            border-bottom: 2px solid #000;
            font-weight: 700;
            padding: 5px;
        }

        .prod__table_row--border_bottom {
            border-bottom: 1px solid #717171;
        }


    }
}

/* Logo Columns */
.logo_wrap {
    margin: 6rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .logo_wrap__item {
        align-content: center;
        /* max-width: 25%; */
        margin: 1rem;

        img {
            width: 100%;
            max-height: 5em;
        }
    }
}

/* Store/Dealer Locator is in external CSS file  */

/* Terms & Conditions Link */
.ts_and_cs_link {
    font-size: 1.6rem;
    font-weight: 600;

    a {
        cursor: pointer;
        transition-duration: 0.3s;
    }
}


/******************** Terms & Conditions Page ********************/
.terms {
    font-size: 1.5rem;

    li {
        margin-bottom: 10px;
    }

    li::marker {
        font-style: italic;
    }

    .terms__subheading {
        font-size: 1.6rem;
        border-bottom: 2px solid #000;
        font-weight: 700;
    }

    .terms__seperator {
        border-bottom: 2px solid #000;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .terms__heading {
        font-weight: 700;

    }

    .terms__body {}

    .terms__prod_table {
        width: 60%;
        margin: 2rem auto 1rem auto;

        table {
            width: 100%;

            th,
            td {
                padding: 5px;
            }
        }

        .prod_table__header {
            border-bottom: 2px solid #000;
            font-weight: 700;
        }

        tr:nth-child(2n) {
            background-color: #e7e7e9;
        }

    }
}



/******************** Responsive Styles ********************/
@container (max-width: 750px) {
    .section {
        margin: 2rem 0;
    }

    /* Buttons */
    .bttn {
        padding: 10px 20px;
        font-size: 1.6rem;
    }    
    .bttn_wrap {
        max-width: 40rem;
        margin: 0 auto;
        width: 100%;
    }

    .hero__bttn--vid {
        top: 70%;
        padding: 0 4rem;
    }

    /* Hero Banner */
    .hero {
        height: 40vh;

        .hero__header {
            h1 {
                font-size: 5rem;
            }
        }

        .subheader {
            font-size: 1.6rem;
        }
    }

    .hero--video {
        height: 100%;
    }

    /* Parallax Banner */
    .parallax_wrap {
        height: 20vh;

        .paral__copy_wrap {
            max-width: 100%;
            font-size: 1.6rem;
        }
    }

    /* Product Detail Table */
    .tab_list {
        width: 100%;
    }

    /* Product & Offer Details */
    .prod {
        flex-direction: column;

        .prod__copy {
            padding: 3rem 0 0 0;

            .copy__para {
                padding: 0 0 3rem 0;
            }
        }

        .copy__bttn {
            margin-bottom: 1.5rem;
        }
    }

    .logo_wrap {
        margin: 0;
    }

    /* Terms & Conditions Table */
    .terms {
        .terms__prod_table {
            width: 100%;
        }
    }

}

@container (max-width: 500px) {
  

    /* Buttons */
    .bttn_wrap {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}