body {
    --fullWSize: 100%;
    --halfWsize: 50%;
    --boxedWidth: 60%;
    --flexDisplay: flex;
    --bbDarkestColor: #000;
    --bbLightestColor: #dfdad1;
    --bbHighlightColor: #960005;
    --mainFont: Orbitron, sans-serif;
    --textCase: uppercase;
    --letterSpace5: 5px;
    --letterSpace3: 3px;
    --standardFontSize: 2em;
    --smallerFontSize: 1.75em;
    --smallestFontSize: .6em
}
.colops {
    margin-left: 2%;
        margin-right: 2%;
}
span.download {
    background-color: var(--bbHighlightColor);
    color: var(--bbLightestColor);
    padding: 15px;
    font-family: Helvetica, sans-serif;
    font-size: var(--smallestFontSize);
    letter-spacing: var(--letterSpace3);
    text-transform: var(--textCase);
}

span.download:hover {
    box-shadow: 0 0 10px grey(0, 0, 0, 0.5);
    border: 2px solid grey;
}

.color_options {
    margin-top: -25px;
    text-align: center;
    padding-bottom: 50px;
    background-color: #dbd8d4;
}

.color_options p.title {
    padding-top: 50px;
    padding-bottom: 50px;
    text-transform: var(--textCase);
    font-family: var(--mainFont);
    letter-spacing: var(--letterSpace5);
    color: var(--bbDarkestColor);
    font-size: var(--standardFontSize);
}

.color_options p.names {
    padding-top: 50px;
    padding-bottom: 50px;
    text-transform: var(--textCase);
    font-family: var(--mainFont);
    letter-spacing: var(--letterSpace3);
    color: var(--bbDarkestColor);
    font-size: calc(var(--smallestFontSize)+4);
}

div.features {
    margin-top: -25px;
}

.brandcallout p,
.featuresList,
div.features p {
    letter-spacing: var(--letterSpace3)
}

.tip_top,
div.content,
div.head,
div.openTheBM8 {
    justify-content: center;
    display: var(--flexDisplay)
}

.headProductStatement,
.tip_top,
div.foot {
    display: var(--flexDisplay)
}

.tip_top,
body,
div.content,
div.openTheBM8,
html {
    background-color: var(--bbDarkestColor)
}

.featuresList,
div.features p {
    color: var(--bbDarkestColor)
}

.bbcol,
.container,
.headProductStatement p,
div.features p {
    text-align: center
}

.big_statement p,
.brandcallout p,
.featuresList,
.final_overview p,
.openseq p,
div.features p,
p.adapt {
    text-transform: var(--textCase);
    font-family: var(--mainFont);
    margin-bottom: 25px;
}

.big_statement p,
.brandcallout p,
.featuresList,
.headProductStatement p,
div.features p,
p.brand_statement,
p.kore_loc {
    font-family: var(--mainFont)
}

body,
div,
html {
    margin: 0;
    padding: 0
}

body,
html {
    height: 100%;
    width: var(--fullWSize)
}

.container {
    width: var(--boxedWidth)
}

.tip_top {
    height: 50px
}

div.head {
    background: url('../images/backgrounds/Black-Bunker-BM8-hbg.jpg') center/cover no-repeat;
    position: relative;
    padding-top: 200px
}

div.openTheBM8 {
    padding: 200px 0 20px
}

div.features {
    /* margin-top: -25px; */
    background-color: var(--bbDarkestColor);
    padding: 150px 0;
    background: url('../images/backgrounds/gry-txtr.jpg') top center/cover no-repeat var(--bbLightestColor)
}

div.foot {
    padding-top: 50px;
    background: url('https://black-bunker.com/black-bunker/images/backgrounds/Black-Bunker-BM8-hbg2.jpg') top center /cover no-repeat var(--bbLightestColor);
    justify-content: center
}

div.foot-iframe {
    padding-top: 50px;
    background: url('https://black-bunker.com/black-bunker/images/backgrounds/Black-Bunker-BM8-hbg2.jpg') top center /cover no-repeat var(--bbLightestColor);
    justify-content: center
}

div.features p {
    font-size: var(--standardFontSize);
    width: var(--fullWSize)
}

div.features div.fintxtfeature {
    width: var(--fullWSize);
    text-align: center
}

.featuresList {
    /* margin-top: 50px; */
    width: var(--fullWSize);
    font-size: .8em;
    font-weight: 700
}

.featuresList .feature {
    width: 80%
}

.clear {
    clear: both
}

.tip_top .bm8tnSm {
    float: left;
    margin: 15px
}

.bm8tnSm img {
    max-height: 20px
}

.tip_top .brandcallout {
    float: right
}

.brandcallout p {
    color: var(--bbLightestColor);
    margin: 20px 15px 15px;
    font-size: .7em
}

.big_bm8,
.headProductViewLeft {
    float: left;
    width: var(--halfWsize)
}

.big_bm8 img {
    max-width: 90%
}

.big_statement,
.headProductStatement {
    float: right;
    width: var(--halfWsize)
}

.openBlackBM8 {
    padding: inherit
}

.openBlackBM8,
.openseq {
    width: 98%
}

.openseq {
    padding-bottom: 50px;
}

.big_statement p {
    font-size: var(--smallerFontSize);
    color: var(--bbDarkestColor);
    letter-spacing: var(--letterSpace5)
}

.headProductViewLeft {
    padding-top: 100px;
    height: 600px
}

.headProductViewLeft img,
.openBlackBM8 img {
    max-width: var(--fullWSize)
}

.headProductStatement {
    height: 600px
}

.headProductStatement p {
    display: inline-block;
    align-self: flex-end;
    letter-spacing: var(--letterSpace3);
    font-size: .75em;
    color: var(--bbLightestColor);
    width: 80%;
    line-height: 1.8em
}

.final_overview p,
.openseq p,
p.adapt {
    letter-spacing: var(--letterSpace5)
}

#imagesequence,
.openseq img {
    width: var(--fullWSize)
}

.openseq {
    /* margin-top: 100px */
}

.openseq p {
    color: var(--bbLightestColor);
    font-size: var(--standardFontSize)
}

.final_overview {
    background: url('../images/logos/bm8-color-30-opacity.png') top center /contain no-repeat;
    padding-top: 140px
}

.final_overview p {
    font-size: .8em;
    color: var(--bbDarkestColor)
}

.blackbunker_foot_logo {
    max-width: 400px;
    margin-bottom: 20px
}

.kore_foot_logo {
    max-height: 50px;
    margin-top: 50px
}

.foot_text {
    padding-left: 15%;
    padding-right: 15%;
    font-weight: bold;
}

p.adapt {
    font-size: 1.2em;
    color: var(--bbHighlightColor);
    font-weight: 700
}

p.brand_statement {
    font-size: .8em;
    color: #fff
}

p.kore_loc {
    font-size: var(--smallestFontSize);
    color: var(--bbLightestColor);
    margin-bottom: 100px
}

.desktop {
    display: inline-block
}

.mobile {
    display: none
}

#imagesequence img {
    display: block;
    min-width: 90%;
    margin: 0 auto
}

.spacer.s2 {
    min-height: 1px
}

.buy-button {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--bbHighlightColor);
    padding: 10px 20px;
    text-transform: var(--textCase);
    font-family: var(--mainFont);
    letter-spacing: var(--letterSpace3);
    color: var(--bbHighlightColor);
    font-size: calc(var(--smallestFontSize)+4);
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
  }

  .buy-button:hover {
    box-shadow: 0 0 10px grey(0, 0, 0, 0.5);
    border: 2px solid grey;
    color: grey;
  }

  .pre-order-button{
    position: relative;
    background-color: transparent;
    border: 2px solid var(--bbHighlightColor);
    padding: 10px 20px;
    text-transform: var(--textCase);
    font-family: var(--mainFont);
    letter-spacing: var(--letterSpace3);
    color: var(--bbHighlightColor);
    font-size: 1.5em;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
    top:50px;
  }

  .pre-order-button:hover {
    box-shadow: 0 0 10px grey(0, 0, 0, 0.5);
    border: 2px solid grey;
    color: grey;
  }

@media only screen and (max-width:1800px) {
    .container {
        width: 90%
    }
}

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

    .final_overview p,
    p.adapt,
    p.brand_statement,
    p.kore_loc {
        font-family: var(--mainFont)
    }

    .final_overview p,
    p.adapt {
        text-transform: var(--textCase);
        letter-spacing: var(--letterSpace5)
    }
    
    .final_overview {
    background-size: contain;
    }
    
    .desktop {
        display: none
    }

    .mobile {
        display: inline-block
    }

    .container {
        width: 90%
    }

    .big_bm8,
    .big_statement,
    .headProductStatement,
    .headProductViewLeft {
        float: none;
        width: var(--fullWSize)
    }

    .headProductViewLeft img {
        max-height: 450px
    }

    .headProductStatement {
        display: inline-block;
        height: auto
    }

    .headProductStatement p {
        align-self: auto
    }

    .openBlackBM8 img {
        margin-top: 50px
    }

    div.foot {
        margin-top: 0;
        padding-top: 10px
    }

    div.foot .container {
        width: var(--fullWSize)
    }

    .foot_text {
        padding-left: 5px;
        padding-right: 5px
    }

    .final_overview {
        padding-top: 40px
    }

    .openseq img.one {
        margin-top: 50px;
        width: var(--halfWsize)
    }

    .openseq img.three,
    .openseq img.two {
        width: 90%;
        margin-top: 50px
    }

    .openseq {
        /* margin-bottom: 50px */
    }

    .blackbunker_foot_logo {
        max-width: 80%
    }

    .final_overview p {
        font-size: var(--smallestFontSize);
        color: var(--bbDarkestColor)
    }

    p.adapt {
        font-size: 1.2em !important;
        color: var(--bbHighlightColor) !important;
        font-weight: 700
    }

    p.brand_statement {
        font-size: .8em !important;
        color: #fff !important
    }

    p.kore_loc {
        font-size: var(--smallestFontSize) !important;
        color: var(--bbLightestColor) !important;
        margin-bottom: 100px
    }

    .bbcolGap {
        padding-bottom: 100px
    }
}