@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: normal;
    src: url('/bridgeorbust/fonts/LeagueSpartan-Regular.woff2') format('woff2'),
    url('/bridgeorbust/fonts/LeagueSpartan-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'League Spartan';
    font-weight: 600;
    font-style: normal;
    src: url('/bridgeorbust/fonts/LeagueSpartan-SemiBold.woff2') format('woff2'),
    url('/bridgeorbust/fonts/LeagueSpartan-SemiBold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Granstander Clean';
    font-weight: normal;
    font-style: normal;
    src: url('/bridgeorbust/fonts/GranstanderClean.woff2') format('woff2'),
    url('/bridgeorbust/fonts/GranstanderClean.woff') format('woff');
    font-display: swap;
}



/*************** Navigation bar *********************/

/* The class that sets the look of the logo on the left side. It is sort of like a button in the navbar, too. */
#bob-nav .navbar-brand {
    position: relative;
    height: 45px;
}

#bob-nav .navbar-toggler-icon{
    font-size: 0.8em;
}

#bob-nav .navbar-gray-section {
    position: absolute;
    top: -1px;
    left: 0;
    border-bottom: 46px solid #3a3a3c;
    border-left: 0 solid transparent;
    border-right: 40px solid transparent;
    height: 0;
    width: 100%;
}

#bob-nav .navbar-bottom-line {
    position: absolute;
    left: 100px;
    top: 45px;
    height: 5px;
    width: calc(100% - 100px);
    background: #bf464c;
}

#bob-nav .navbar-behind-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 90px;
    width: 100%;
    background-image: url("/bridgeorbust/assets/behind-upper-story-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    background-position: top left;
}

#bob-nav .nav-logo-product-arrow {
    position: relative;
    background-image: url("/bridgeorbust/assets/nav-product-arrow.svg");
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center center;
    width: 15px;
    height: 100%;
    background-size: 8px;
    z-index: 2;
    vertical-align: middle;
    margin-top: 1px;
}

#bob-nav .nav-logo-product {
    position: relative;
    display: inline-block;
    z-index: 2;
    height: 100%;
    vertical-align: middle;
    padding-top: 2px;
}

#bob-nav .nav-upper-story-logo {
    position: relative;
    display: inline-block;
    z-index: 2;
    height: 30px;
    vertical-align: top;
    margin-left: 4px;
}

#bob-nav .nav-upper-story-img {
    position: relative;
    left: 0;
    top: 0;
    background-image: url("/bridgeorbust/assets/upper-story-logo-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s;
}

#bob-nav .nav-upper-story-img:hover {
    background-image: url("/bridgeorbust/assets/upper-story-logo-hover.svg");
}

#bob-nav .nav-logo-product-img {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    background-image: url("/bridgeorbust/assets/nav-logo-bridgeorbust.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: 0.3s;
}

#bob-nav .nav-logo-product-img:hover {
    background-image: url("/bridgeorbust/assets/nav-logo-bridgeorbust-hover.png");
}

#bob-nav .nav-logo-product-hidden-image {
    position: relative;
    visibility: hidden;
    height: 25px;
    display: inline-block;
}

#bob-nav .nav-logo-spacer {
    position: relative;
    top: 0;
    display: inline-block;
    z-index: 2;
    width: 40px;
}

@media only screen and (max-width: 400px) {
    #bob-nav .nav-logo-product-img {
        width: 90px;
    }
    #bob-nav .nav-logo-product-arrow {
        background-size: 6px;
        width: 10px;
    }
}
@media only screen and (max-width: 380px) {
    #bob-nav .nav-logo-product-img {
        width: 70px;
    }
    #bob-nav .nav-logo-product-arrow {
        background-size: 5px;
        width: 8px;
    }
}
/* Don't draw the product name if the client space is too narrow */
@media only screen and (max-width: 350px) {
    #bob-nav .nav-logo-product-arrow {
        display: none;
    }

    #bob-nav .nav-logo-product {
        display: none;
    }

    #bob-nav .nav-upper-story-logo {
        margin-right: 10px;
    }
}

/* The class we use to set the navbar's customized properties */
.navbar-x {
    /*background-color: rgba(255,255,255,0.85);*/
    background-color: #FFFFFF;
    /*border-bottom: .25rem solid #0097b3;*/
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

#bob-nav .navbar-toggler {
    margin-right: 2rem;
}

/*
    768 px is the break point where we switch to the toggler.
    At that point, nav-link items are in the toggler menu and
    have different styling.
 */

/* Default nav-link is for less than 768 px (with toggler) */
#bob-nav .nav-link {
    margin-left: 0;
    margin-right: 0;
    padding-right: 30px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 15px;
    font-size: 14pt;
    text-align: right;
    vertical-align: center;
    background-color: #e6e7e8;
    border-bottom: solid 1px;
    border-color: #d1d3d4;
    color: #414042;
    text-transform: uppercase;
}

#bob-nav .nav-link .active {
    background-color: #bf464c;
    color: #fff;
}

#bob-nav .nav-link:hover {
    color: #bf464c;
}

#bob-nav .nav-link.disabled {
    color: #808285;
}

/* nav-link for 768 px and greater (without toggler) */
@media only screen and (min-width: 992px) {
    #bob-nav .nav-link {
        margin-left:0px;
        margin-right: 0;
        padding-right: 10px;
        padding-left: 20px;
        padding-bottom: 0;
        padding-top: 4px;
        font-size: 14pt;
        text-align: right;
        vertical-align: center;
        background-color: transparent;
        border-bottom: none;
    }

    #bob-nav .nav-link .active {
        background-color: transparent;
    }
}


#bob-nav .dropdown-item {
    background-color: white;
    color: #414042;
}

#bob-nav .dropdown-item:hover {
    color: #bf464c;
}

#bob-nav .dropdown-item.disabled {
    color: #808285;
}

#bob-nav .active {
    color: #af7732;
}

#bob-nav .navbar-order-btn {
    float: right;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

#heroVideo .embed-responsive {
    position: static;
}

/* The hero area */
#hero {
    /*color: white;
    padding-top: 0;
    overflow: hidden;
    position: relative;
    height: 80vh;
    height: -webkit-calc(100vh - 6.5rem);
    height: -moz-calc(100vh - 6.5rem);
    height: calc(100vh - 6.5rem);
    background-attachment: scroll;
    background-image: url(../assets/spintronics_video_still2.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}

#hero .hero-video-container {
    color: white;
    padding-top: 0;
    overflow: hidden;
    position: relative;
    height: 100%;/*calc(100vh - 45px);*/
    background-attachment: scroll;
    background-image: url(/spintronics/assets/spintronics_video_still2.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

#hero .hero-video {
    position: relative;
    display: block;
    height: 100%;
    width: 177.78vh;
    min-width: 100%;
    min-height: 56.25vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#hero .hero-video-dark-overlay {
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.35);
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 0rem;
}

#hero .hero-title-container {
    display: block;
    position: relative;
    /*top: 20vh;*/
    width: 100%;
    max-width: 1200px;
    height: 100%;
    text-align: center;
}
/*@media only screen and (min-aspect-ratio: 1/1) {
    #hero .hero-title-container {
        top: -50%;
        transform: translateY(50%);
    }
}*/

#hero .starburst-img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    max-height: 180%;
}
@media only screen and (min-aspect-ratio: 1/1) {
    #hero .starburst-img {

    }
}

/********************Black tint and Bridge or Bust logo**********************/

#hero .hero-content {
    position: absolute;
    background: rgba(0,0,0,0.35);
    top: 0;
    left: 0;
    width: 100%;
    height: inherit;
    text-align: center;
    padding-top: 0rem;
}

#hero #hero-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;/*calc(100vh - 45px);*/
    text-align: center;
}
/*@media only screen and (min-aspect-ratio: 1/1) {
    #hero #hero-container {
        padding-left: 10vw;
        padding-right: 10vw;
    }
}*/

.title-box
{
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    max-height: 100%;
    padding: 4vw;
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 576px) {
    .title-box {
        top: 45%;
        padding-left: 10%;
        padding-right: 10%;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .title-box {
        top: 50%;
        padding-left: 10%;
        padding-right: 10%;
    }
}


#hero .hero-pic {
    display: inline-block;
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 25vh;
}

#hero .hero-subtitle-pic {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    width: 80%;
    max-width: 1200px;
    max-height: 18vh;
}

/*@media only screen and (min-width: 768px) {
    #hero .hero-pic {
        background-image: url("../assets/spintronics-logo-en.svg");
        padding-bottom: 25%;
    }
}*/

/***************How it works button****************/

#hero .play-button {
    display: block;
    position: relative;
    margin-top: 3vh;
    width: 100%;
    padding-bottom: 0vh;
    color: white;
    text-align: center;
    margin-bottom: 3vh;
}
#hero .play-button-pic {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    transform: translateX(-50%);
    width: 35%;
    max-width: 450px;
    min-width: 170px;
    max-height: 18vh;
    object-fit: contain;
    transition: content .5s ease;
}

#hero .play-button-pic-sizing {
    display: inline-block;
    width: 35%;
    max-width: 450px;
    min-width: 170px;
    max-height: 18vh;
    opacity: 0;
    object-fit: contain;
}

#hero .play-button-hover-pic {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    transform: translateX(-50%);
    transition: opacity .5s ease;
    opacity: 0;
    width: 35%;
    max-width: 450px;
    min-width: 170px;
    max-height: 18vh;
    object-fit: contain;
}
#hero .play-button-hover-pic:hover {
    opacity: 1;
}




#hero .play-button-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
    pointer-events: none;
}
#hero .play-button-text,
.en #hero .play-button-text {
    font-size: 30px;
    margin-top: 28px;
}
.de #hero .play-button-text{
    font-size: 24px;
    margin-top: 28px;
}
.fr #hero .play-button-text{
    font-size: 21px;
    margin-top: 31px;
}
.nl #hero .play-button-text,
.it #hero .play-button-text,
.pl #hero .play-button-text,
.es #hero .play-button-text
{
    font-size: 28px;
    margin-top: 30px;
}

.order-button, .order-button:link, .order-button:visited {
    font-size: 14pt;
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    color: #fff;
}

.button {
    background-color: #bf464c;
    border-color: #bf464c;
    font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
    font-size: 14pt;
    border:none;
    color:#fff;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    border-radius:100px;
    cursor:pointer
}

.button:hover{
    background-color: #e25462;
    border-color: #e25462;
    color: #fff;
}

.thin-wood-divider{
    display: inline-block;
    height: 20px;
    width: 100%;
    max-width: 1200px;
}

.thin-wood-divider-pic{
    display: block;
    position: relative;
    left: 0px;
    top: -10px;
    height: 60px;
    width: 100%;
    max-width: 1200px;
    background-image: url("/bridgeorbust/assets/thin-wood-divider-with-arrow.png");
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: auto 60px;
    margin-top: 0vh;
    z-index: 4;
}

.thin-wood-divider-full-width{
    display: block;
    height: 2vw;
    width: 100%;
    position: relative;
}
@media only screen and (min-width: 450px) {
    .thin-wood-divider-full-width {
        height: 10px;
    }
}
@media only screen and (min-width: 600px) {
    .thin-wood-divider-full-width {
        height: 20px;
    }
}

.thin-wood-divider-pic-full-width{
    display: block;
    position: absolute;
    left: 0px;
    top: -3vw;
    height: 8vw;
    width: 100%;
    background-image: url("/bridgeorbust/assets/thin-wood-divider.png");
    background-repeat: repeat-x;
    background-size: auto 8vw;
    background-position: center center;
    margin-top: 0vh;
    z-index: 4;
}
@media only screen and (min-width: 450px) {
    .thin-wood-divider-pic-full-width {
        top: -10px;
        height: 40px;
        background-size: auto 40px;
    }
}
@media only screen and (min-width: 600px) {
    .thin-wood-divider-pic-full-width {
        top: -10px;
        height: 60px;
        background-size: auto 60px;
    }
}

.thick-wood-divider {
    position: relative;
    display: block;
    height: 38px;
    width: 100%;
}
/* aspect ratio <= 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 45px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 55px;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 76px;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 45px;
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 55px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider {
        height: 76px;
    }
}

.thick-wood-divider-pic{
    display: block;
    position: relative;
    left: 0px;
    top: -7px;
    height: 60px;
    background-image: url("/bridgeorbust/assets/thick-wood-divider-repeat.png");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 60px;
    z-index: 3;
}
/* aspect ratio < 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        top: -15px;
        height: 80px;
        background-size: auto 80px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        height: 100px;
        background-size: auto 100px;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        height: 120px;
        background-size: auto 120px;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        top: -15px;
        height: 80px;
        background-size: auto 80px;
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        height: 100px;
        background-size: auto 100px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-pic {
        height: 120px;
        background-size: auto 120px;
    }
}

.nail1 {
    position: absolute;
    display: block;
    left: 12px;
    top: 6px;
    width: 26px;
    z-index: 4;
}
/* aspect ratio < 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .nail1 {
        width: 40px;
        top: 0px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .nail1 {
        width: 60px;
        top: 0px;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .nail1 {
        width: 80px;
        top: 0px;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .nail1 {
        width: 40px;
        top: 0px;
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .nail1 {
        width: 60px;
        top: 0px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .nail1 {
        width: 80px;
        top: 0px;
    }
}

.nail2 {
    position: absolute;
    display: block;
    right: 12px;
    top: -3px;
    width: 30px;
    z-index: 4;
}
/* aspect ratio < 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .nail2 {
        width: 48px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .nail2 {
        width: 60px;
        top: -14px;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .nail2 {
        width: 80px;
        top: -14px;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .nail2 {
        width: 48px;
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .nail2 {
        width: 60px;
        top: -14px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .nail2 {
        width: 80px;
        top: -14px;
    }
}

.build-box {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

.build-frame {
    display: block;
}

/* Show if aspect-ratio is less than 1/1 */
.build-video.vertical {
    display: block;
    width: 100%;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .build-video.vertical {
        display: none;
    }
}

/* Show if aspect-ratio is greater or equal to 1/1 */
.build-video.horizontal {
    display: none;
    width: 100%;
    max-height: 70vh;
    /*min-height: 450px;*/
    max-width: 124.5vh;
    /*min-width: 800px;*/
    border-left: 6px solid #ccc;
    border-right: 6px solid #ccc;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .build-video.horizontal {
        display: block;
    }
}

.wood-background {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #eee;
    background-image: url("/bridgeorbust/assets/wood-pattern.jpg");
    background-repeat: repeat;
    opacity: 20%;
    z-index: -1;
}

.thick-wood-divider-text {
    display: inline-block;
    position: absolute;
    font-size: 20pt;
    font-family: 'Granstander Clean', sans-serif;
    font-weight: normal;
    line-height: 1.2em;
    margin-bottom: 0px;
    top: -4px;
    width: 100%;
    z-index: 4;
    text-align: center;
    transition: all 0.3s ease-in-out;
    color: #1e5f66;
}
/* aspect ratio < 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        top: -8px;
        font-size: 26pt;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        top: -10px;
        font-size: 34pt;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        font-size: 42pt;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        top: -8px;
        font-size: 26pt;
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        top: -10px;
        font-size: 34pt;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text {
        font-size: 42pt;
    }
}

.thick-wood-divider-text-shadow {
    display: inline-block;
    position: absolute;
    font-size: 20pt;
    font-family: 'Granstander Clean', sans-serif;
    font-weight: normal;
    line-height: 1.2em;
    margin-bottom: 0px;
    top: -4px;
    width: 100%;
    z-index: 4;
    text-align: center;
    transition: all 0.3s ease-in-out;
    transform: translateX(-2px) translateY(2px);
    color: #fff;
}
/* aspect ratio < 1 */
@media only screen and (min-width: 300px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        top: -8px;
        font-size: 26pt;
        transform: translateX(-3px) translateY(3px);
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        top: -10px;
        font-size: 34pt;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        font-size: 42pt;
    }
}
/* aspect ratio >= 1 */
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        top: -8px;
        font-size: 26pt;
        transform: translateX(-3px) translateY(3px);
    }
}
@media only screen and (min-height: 700px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        top: -10px;
        font-size: 34pt;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .thick-wood-divider-text-shadow {
        font-size: 42pt;
    }
}


.thick-wood-divider-text.selected {
    font-size: 30pt;
    font-family: 'Granstander Clean', sans-serif;
    font-weight: normal;
    line-height: 1.2em;
    margin-bottom: 0px;
    top: -4px;
}

.sky-frame {
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0px;
    left: 0px;
}
@media only screen and (min-width: 1200px) {
    .sky-frame {
        height: 100%;
    }
}


.sky-background {
    background-image: url("/bridgeorbust/assets/sky-water.jpg");
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: calc(1200px + 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media only screen and (min-width: 1200px) {
    .sky-background {
        background-size: calc(400px + 100%);
    }
}

.sky-spacer {
    height: 30vw;
    max-height: 250px;
    width: 100%;
    display: inline-block;
    position: relative;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sky-spacer {
        height: 20vh;
    }
}

.beach-background {
    background-image: url("/bridgeorbust/assets/beach-background.jpg");
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: calc(1200px + 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media only screen and (min-width: 1200px) {
    .beach-background {
        background-size: calc(400px + 100%);
    }
}


.sign-bottom-margin {
    margin-bottom: 24vw;
}
@media only screen and (min-width: 600px) {
    .sign-bottom-margin {
        margin-bottom: 120px;
    }
}

.sign-outer {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    transition: all 2s ease;
    container-type: size;
}

.sign-frame {
    height: 70vw;
    width: 100%;
    display: inline-block;
    position: relative;
}
@media only screen and (min-width: 600px) {
    .sign-frame {
        height: 440px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sign-frame {
        display: none;
    }
}

.sign-frame-horizontal {
    max-height: 290px;
    min-height: 150px;
    height: 25vh;
    max-width: 1200px;
    width: 100%;
    display: none;
    position: relative;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sign-frame-horizontal {
        display: block;
    }
}

.sign-frame-horizontal-tall {
    height: 45vh;
    max-height: 450px;
    min-height: 150px;
    width: 100%;
    max-width: 1200px;
    display: none;
    position: relative;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sign-frame-horizontal-tall {
        display: block;
    }
}

.big-sign-frame {
    height: 130vw;
    width: 100%;
    display: block;
    position: relative;
}
@media only screen and (min-width: 600px) {
    .big-sign-frame {
        height: 800px;
    }
}
@media only screen and (min-width: 992px) {
    .big-sign-frame {
        height: 850px;
    }
}
@media only screen and (min-width: 1200px) {
    .big-sign-frame {
        height: 1000px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .big-sign-frame {
        display: none;
    }
}

.big-sign-frame-horizontal {
    height: 130vw;
    width: 100%;
    position: relative;
    display: none;
    margin-bottom: 0px;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .big-sign-frame-horizontal {
        display: block;
        max-height: 900px;
        min-height: 250px;
        height: 75vh;
        max-width: 1200px;
    }
}

.sign-down.top{
    position: absolute;
    display: block;
    width: 85vh;
    min-width: 500px;
    max-width: 80%;/*1000px;*/
    height: 100%; /* critical for positioning */
    left: 50%;
    top: 0%;
    transform: rotateZ(-45deg) translateX(50%) translateX(10%) translateY(-20vh);
    transition: all 0.3s ease-in-out;
}

.sign-up.top{
    position: absolute;
    display: block;
    width: 85vh;
    min-width: 500px;
    max-width: 80%;/*1000px;*/
    height: 100%; /* critical for positioning */
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translateX(-65%) translateY(-65%);
    transition: all 0.3s ease-in-out;
}

.sign-down.bottom{
    position: absolute;
    display: block;
    width: 85vh;
    min-width: 500px;
    max-width: 80%;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(-45deg) translateX(-200%) translateY(200px);
    transition: all 0.3s ease-in-out;
}

.sign-up.bottom{
    position: absolute;
    display: block;
    width: 85vh;
    min-width: 500px;
    max-width: 80%;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(2deg) translateX(-35%) translateY(10%);
    transition: all 0.3s ease-in-out;
}

.sign-down.top-tall{
    position: relative;
    display: block;
    /*width: 100%;*/
    width: 45vh;
    min-width: 150px;
    max-width: 450px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform:  rotateZ(-60deg) translateX(70%) translateY(-150%);
    transition: all 0.3s ease-in-out;
}

.sign-up.top-tall{
    position: relative;
    display: block;
    /*width: 100%;*/
    width: 45vh;
    min-width: 150px;
    max-width: 450px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(-5deg) translateX(-120%) translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.sign-down.bottom-tall{
    position: relative;
    display: block;
    width: 45vh;
    min-width: 150px;
    max-width: 450px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(-45deg) translateX(-400%) translateY(100%);
    transition: all 0.3s ease-in-out;
}

.sign-up.bottom-tall{
    position: relative;
    display: block;
    /*width: 100%;*/
    width: 45vh;
    min-width: 150px;
    max-width: 450px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(2deg) translateX(0%) translateY(-40%);
    transition: all 0.3s ease-in-out;
}

.sign-down.right{
    position: absolute;
    display: block;
    width: 100%;
    right: 0px;
    transform: translateX(600px) translateY(200px) rotateZ(-90deg);
    transition: all 0.3s ease-in-out;
    max-width: 600px;
}

.sign-up.right{
    position: absolute;
    display: block;
    width: 100%;
    right: 0px;
    transform: translateX(8%) translateY(30px) rotateZ(5deg);
    transition: all 0.3s ease-in-out;
    max-width: 600px;
}

.sign-down.left{
    position: absolute;
    display: block;
    width: 100%;
    transform: translateX(-70%) translateY(200px) rotateZ(90deg);
    transition: all 0.3s ease-in-out;
    max-width: 600px;
}

.sign-up.left{
    position: absolute;
    display: block;
    width: 100%;
    transform: translateX(-16%) translateY(8vw) rotateZ(-5deg);
    transition: all 0.3s ease-in-out;
    max-width: 600px;
}
@media only screen and (min-width: 600px) {
    .sign-up.left {
        transform: translateX(-16%) translateY(8vw) rotateZ(-5deg);
    }
}


/* For the big sign with the map */
.sign-down.top-big{
    position: absolute;
    display: block;
    /*width: 100%;*/
    width: 75vh;
    min-width: 250px;
    max-width: 900px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform:  rotateZ(-60deg) translateX(200%) translateY(-200%);
    transition: all 0.3s ease-in-out;
}
.sign-up.top-big{
    position: absolute;
    display: block;
    /*width: 100%;*/
    width: 75vh;
    min-width: 250px;
    max-width: 900px;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: rotateZ(-5deg) translateX(-50%) translateY(-36%);
    transition: all 0.3s ease-in-out;
}

.sign-text-outer.right {
    position: relative;
    display: block;
    left: 8%;
    top: 8vw;
    width: 50%;
    height: 63vw;
    color: #000;
}
@media only screen and (min-width: 600px) {
    .sign-text-outer.right {
        top: 40px;
        left: 8%;
        width: 50%;
        height: 400px;
        /*background-color: white;*/
    }
}

.sign-text-inner {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #000;
    width: 100%;
    text-align: center;
}

.sign-text-outer.left{
    position: relative;
    display: block;
    left: 41%;
    top: 8vw;
    width: 50%;
    height: 63vw;
    color: #000;
}
@media only screen and (min-width: 600px) {
    .sign-text-outer.left {
        left: 41%;
        top: 40px;
        width: 50%;
        height: 400px;
        /*background-color: white;*/
    }
}

.sign-text-outer.top{
    position: relative;
    display: block;
    left: 2.5%;
    top: 76%;
    width: 95%;
    height: 58%;
    /*background-color: white;*/
    color: #000;
}

.sign-text-outer.bottom-tall {
    position: relative;
    display: block;
    left: 7%;
    top: 8%;
    width: 86%;
    height: 105%;
    /*background-color: white;*/
    color: #000;
}

.sign-text-outer.top-tall {
    position: relative;
    display: block;
    left: 7%;
    top: 71%;
    width: 86%;
    height: 105%;
    /*background-color: white;*/
    color: #000;
}

.sign-text-outer.bottom {
    position: relative;
    display: block;
    left: 2.5%;
    top: 9%;
    width: 95%;
    height: 56%;
    /*background-color: white;*/
    color: #000;
}

/* For the big sign with the map */
.sign-text-outer.top-big {
    position: relative;
    display: block;
    left: -3.8%;
    top: 51.5%;
    width: 107%;
    height: 52%;
    /*background-color: white;*/
    color: #000;
}

.horizontal-map-image {
    margin-top:0px;
    width:80%;
}

.sign-text-outer.left-big {
    position: relative;
    display: block;
    left: 43%;
    top: 4vw;
    width: 53%;
    height: 104vw;
    /*background-color: white;*/
    color: #000;
}
@media only screen and (min-width: 600px) {
    .sign-text-outer.left-big {
        left: 257px;
        top: 25px;
        width: 53%;
        height: 650px;
        padding: 5px;
        /*background-color: white;*/
    }
}

.sign-image.right {
    position: absolute;
    display: block;
    width: 100%;
    left: 0px;
    top: 0px;
}

.sign-image.left {
    position: absolute;
    display: block;
    width: 100%;
    left: 0px;
    top: 0px;
    transform: scaleX(-1);
}

/* For the big sign with the map */
.sign-image.top {
    position: absolute;
    display: block;
    /*width: 1000px;*/
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotateZ(-90deg);
}

.sign-image-horizontal.right {
    position: absolute;
    display: block;
    /*width: 1000px;
    left: 0px;
    top: 0px;*/
    width: 100%;
    left: 0px;
    top: 0px;
    transform: scaleY(-1);
}


.sign-image-horizontal.left {
    position: absolute;
    display: block;
    /*width: 1000px;
    left: 0px;
    top: 0px;*/
    width: 100%;
    left: 0px;
    top: 0px;
}

.sign-image-horizontal-tall.right {
    position: absolute;
    display: block;
    /*width: 500px;
    left: 0px;
    top: 0px;*/
    width: 100%;
    left: 0px;
    top: 0px;
    transform: scaleY(-1);
}

.sign-image-horizontal-tall.left {
    position: absolute;
    display: block;
    /*width: 500px;
    left: 0px;
    top: 0px;*/
    width: 100%;
    left: 0px;
    top: 0px;
}

.sign-text p,
.big-sign-text p,
.sign-text-inner p,
.sign-text-inner.top-tall p,
.sign-text-inner.bottom-tall p,
.sign-text-inner.top-big p

{
    display: inline-block;
    vertical-align: middle;
    font-size: 5vw;
    font-family: 'League Spartan', sans-serif;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0px;
}
@media only screen and (min-width: 550px) {
    .sign-text p, .big-sign-text p, .sign-text-inner p {
        font-size: 22pt;
    }
}
@media only screen and (min-width: 1200px) {
    .sign-text p, .big-sign-text p, .sign-text-inner p {
        font-size: 24pt;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sign-text p, .big-sign-text p, .sign-text-inner p {
        font-size: 12cqh; /* sign-outer is the container */
    }
    .sign-text-inner.top-tall p, .sign-text-inner.bottom-tall p {
        font-size: 9cqh; /* sign-outer is the container */
    }
    .sign-text-inner.top-big p {
        font-size: 5cqh; /* sign-outer is the container */
    }
}

p.sign-text-small {
    font-size: 3.5vw;
    font-family: 'League Spartan', sans-serif;
    font-weight: normal;
    line-height: 1.2;
}
@media only screen and (min-width: 600px) {
    p.sign-text-small {
        font-size: 15pt;
    }
}
@media only screen and (min-width: 1200px) {
    p.sign-text-small {
        font-size: 17pt;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .sign-text-inner.bottom-tall p.sign-text-small{
        font-size: 7cqh;
    }
}


.blueprint-scroll-horizontal {
    position: relative;
    width: 100%;
    /*height: calc(385px + 32.1vw);
    min-height: 770px;
    max-height: 870px;*/
    /*top: -15px;*/
    overflow-x: clip;
    display: none;
}
@media only screen and (min-aspect-ratio: 3/2) and (min-width: 576px), only screen and (min-width: 1200px) {
    .blueprint-scroll-horizontal {
        display: block;
    }
}

.blueprint-scroll-vertical {
    display: block;
    overflow-x: clip;
}
@media only screen and (min-aspect-ratio: 3/2) and (min-width: 576px), only screen and (min-width: 1200px){
    .blueprint-scroll-vertical {
        display: none;
    }
}

.scroll-left-pic {
    display: block;
    position: absolute;
    left: -50px;
    top: -8%;
    width: 100%;
    /*min-height: 880px;*/
    height: 116%;
    /*max-height: 980px;*/
    background-image: url("/bridgeorbust/assets/scroll-left-1200.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}

.scroll-right-pic {
    display: block;
    position: absolute;
    right: -0.5%;
    top: -6%;
    width: 100%;
    /*min-height: 880px;*/
    height: 114%;
    /*max-height: 980px;*/
    background-image: url("/bridgeorbust/assets/scroll-right-1200.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
    z-index: 3;
}

.scroll-middle-pic {
    display: block;
    position: absolute;
    background-image: url("/bridgeorbust/assets/blueprint-background-horizontal-800px.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    background-clip: content-box;
    width: 96vw;
    height: 104%;
    top: -2%;
    left: 2vw;
}

.scroll-middle-horizontal {
    /*background-image: url("/bridgeorbust/assets/blueprint-background-horizontal-800px.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    background-clip: content-box;*/
    position: relative;
    display: block;
    width: 100%;
    /*min-height: 800px;
    height: calc(400px + 33.3vw);
    max-height: 900px;*/
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
}

.scroll-content-horizontal {
    display: inline-block;
    width: 85%;
    max-width: 1200px;
}

.scroll-top {
    position: relative;
    display: block;
    height: 30px;
    width: 100%;
    max-width: 1200px;
}

.scroll-top-pic {
    display: block;
    position: relative;
    left: 0px;
    top: -13px;
    height: 80px;
    max-width: 1200px;
    background-image: url("/bridgeorbust/assets/scroll-top-1200.png");
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position: center;
    background-size: cover;
    z-index: 3;
}

.scroll-bottom {
    position: relative;
    display: block;
    height: 30px;
    width: 100%;
    max-width: 1200px;
}

.scroll-bottom-pic {
    display: block;
    position: relative;
    left: 0px;
    top: -13px;
    height: 80px;
    max-width: 1200px;
    background-image: url("/bridgeorbust/assets/scroll-bottom-1200.png");
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position: center;
    background-size: cover;
    z-index: 3;
}

.scroll-middle {
    background-image: url("/bridgeorbust/assets/blueprint-background-1200x1040.jpg");
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100%;
    position: relative;
    display: block;
    width: 100%;
}

.scroll-title {
    display: inline-block;
    position: relative;
    font-size: 21pt;
    font-family: 'Granstander Clean', sans-serif;
    font-weight: normal;
    line-height: 1.2;
    color: #FFF;
    margin-bottom: 20px;
    margin-top: 30px;
    width: 100%;
    z-index: 4;
    text-align: center;
}
/* For aspect-ratio <= 3/2 */
@media only screen and (min-width: 620px) and (max-aspect-ratio: 3/2) {
    .scroll-title {
        margin-top: 35px;
        font-size: 25pt;
    }
}
@media only screen and (min-width: 768px) and (max-aspect-ratio: 3/2) {
    .scroll-title {
        margin-top: 45px;
        font-size: 30pt;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 3/2) {
    .scroll-title {
        margin-top: 45px;
        font-size: 30pt;
        margin-bottom: 0px;
    }
}
/* For aspect-ratio >= 3/2 */
@media only screen and (min-height: 400px) and (min-aspect-ratio: 3/2) {
    .scroll-title {
        margin-top: 35px;
        font-size: 25pt;
    }
}
@media only screen and (min-height: 500px) and (min-aspect-ratio: 3/2) {
    .scroll-title {
        margin-top: 45px;
        font-size: 30pt;
        margin-bottom: 0px;
    }
}

.scroll-subtitle {
    display: inline-block;
    position: relative;
    font-size: 18pt;
    font-family: 'League Spartan', sans-serif;
    font-weight: normal;
    line-height: 1.2;
    color: #FFF;
    margin-bottom: 20px;
    margin-top: 0px;
    width: 100%;
    z-index: 4;
    text-align: center;
}
@media only screen and (min-width: 768px) and (max-aspect-ratio: 3/2) {
    .scroll-subtitle {
        margin-top: 20px;
        font-size: 25pt;
        margin-bottom: 35px;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 3/2) {
    .scroll-subtitle {
        margin-top: 0px;

    }
}
/* For aspect-ratio >= 3/2 */
@media only screen and (min-height: 400px) and (min-aspect-ratio: 3/2) {
    .scroll-subtitle {
        margin-top: 0px;
        font-size: 24pt;
        margin-bottom: 35px;
    }
}
@media only screen and (min-height: 500px) and (min-aspect-ratio: 3/2) {
    .scroll-subtitle {
        margin-top: 0px;
        font-size: 28pt;
        margin-bottom: 45px;
    }
}

.blueprint-outside-wrapper {
    display: inline-block;
}

.blueprint-image-wrapper {
    display: table-cell;
    height: 25vw;
    vertical-align: bottom;
}
/* For aspect-ratio <= 3/2 */
@media only screen and (min-width: 576px) and (max-aspect-ratio: 3/2) {
    .blueprint-image-wrapper {
        height: 20vw;
    }
}
@media only screen and (min-width: 768px) and (max-aspect-ratio: 3/2) {
    .blueprint-image-wrapper {
        height: 15vw;
    }
}
@media only screen and (min-width: 992px) and (max-aspect-ratio: 3/2) {
    .blueprint-image-wrapper {
        height: 200px;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 3/2) {
    .blueprint-image-wrapper {
        height: 170px;
    }
}
/* For aspect-ratio >= 3/2 */
@media only screen and (min-aspect-ratio: 3/2) {
    .blueprint-image-wrapper {
        height: 30vh;
        width: 40vh;
        min-height: 100px;
        min-width: 200px;
    }
}
@media only screen and (min-aspect-ratio: 3/2) and (min-width: 576px) {
    .blueprint-image-wrapper {
        /*height: 30vh;*/
        min-width: unset;
        width: 10%;
        height: 20vh;
        min-height: 150px;
        /*min-height: 100px;*/
        /*min-width: 130px;*/
    }
}
@media only screen and (min-aspect-ratio: 3/2) and (min-width: 768px) {
    .blueprint-image-wrapper {
        /*height: 30vh;*/
        min-width: unset;
        width: 10%;
        height: 20vh;
        min-height: 150px;
        /*min-height: 100px;*/
        /*min-width: 130px;*/
    }
}
@media only screen and (min-aspect-ratio: 3/2) and (min-width: 1200px) {
    .blueprint-image-wrapper {
        /*height: 30vh;*/
        width: 40vh;
        min-height: 100px;
        min-width: 200px;
    }
}


.blueprint-images {
    max-height: 25vw;
}

.exploded-box-container {
    width:100%;
    max-width: 1200px;
    background-color: #ddd;
    padding-top: 20px;
    padding-bottom: 20px;
}

.exploded-box-vertical {
    display: flex;
    flex-direction: column;
}
@media only screen and (min-aspect-ratio: 1/1),
    only screen and (max-aspect-ratio: 1/1) and (min-width: 992px) {
    .exploded-box-vertical {
        display: none;
    }
}

.exploded-box-horizontal {
    display: none;
}
@media only screen and (min-aspect-ratio: 1/1),
only screen and (max-aspect-ratio: 1/1) and (min-width: 992px) {
    .exploded-box-horizontal {
        display: flex;
    }
}

.exploded-box {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: #eee;
    padding-bottom: 30px;
    text-align: center;
}

.exploded-box-text {
    font-size: 5vw;
    font-family: 'League Spartan', sans-serif;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 8vw;
    margin-bottom: 0px;
}
/* For vertical layout */
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 50px;
        font-size: 24pt;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 0px;
        font-size: 24pt;
        padding-left: 0px;
        padding-right: 0px;
        width: 30vw;
        max-width: 400px;
    }
}
/* For horizontal layout */
@media only screen and (min-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 0px;
        font-size: 5vh;
        padding-left: 0px;
        padding-right: 0px;
        width: 20vw;
        max-width: 400px;
    }
}
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 0px;
        font-size: 20pt;
        padding-left: 0px;
        padding-right: 0px;
        width: 20vw;
        max-width: 400px;
    }
}
@media only screen and (min-height: 800px) and (min-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 0px;
        font-size: 24pt;
        padding-left: 0px;
        padding-right: 0px;
        width: 25vw;
        max-width: 400px;
    }
}
@media only screen and (min-height: 1000px) and (min-aspect-ratio: 1/1) {
    .exploded-box-text {
        margin-top: 0px;
        font-size: 26pt;
        padding-left: 0px;
        padding-right: 0px;
        width: 40vw;
        /*max-width: 400px;*/
    }
}

.banana-for-scale-arrow {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 5.5%;
    display: block;
}

.banana-for-scale-text {
    position: absolute;
    bottom: 2.2%;
    right: 5%;
    font-family: "Granstander Clean";
    font-size: 2cqh;
    display: block;

}

.banana-for-scale-wrapper {
    container-type: size;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.exploded-box-wrapper {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    margin-right: 5px;
}
/* For vertical layout */
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .exploded-box-wrapper {
        margin-left: 5vw;
        margin-right: 5vw;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .exploded-box-wrapper {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 60px;
        margin-bottom: 50px;
    }
}
/* For horizontal layout */
@media only screen and (min-aspect-ratio: 1/1) {
    .exploded-box-wrapper {
        width: 100vh;
        max-width: 900px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 1200px) {
    .exploded-box-wrapper {
        width: 60vh;
    }
}

.exploded-box-image {
    width: 100%;
    /*margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;*/
    /*max-width: 80vh;*/
}
/* For vertical layout */
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .exploded-box-image {
        /*padding-left: 5vw;
        padding-right: 5vw;*/
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .exploded-box-image {
        /*padding-left: 20px;
        padding-right: 20px;
        margin-top: 60px;
        margin-bottom: 50px;*/
    }
}
/* For horizontal layout */
@media only screen and (min-aspect-ratio: 1/1) {
    .exploded-box-image {
        /*width: 80vh;
        max-width: 900px;*/
        /*padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px;*/
    }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 1200px) {
    .exploded-box-image {
        /*width: 60vh;*/
    }
}

.how-to-play-step-container {
    width:100%;
    max-width: 1200px;
    background-color: #fff;
}
@media only screen and (min-aspect-ratio: 1/1) {
    .how-to-play-step-container {
        width: 120vh;
        max-width: 100%;
    }
}

.how-to-play-box {
    position: relative;
    width: 100%;
    background-color: #eee;
}

.how-to-play-outer {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 15vw;
}

.how-to-play-title-box {
    margin-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    z-index: 2;
    text-align: center;
    top: 0px;
    left: 0px;
    border-bottom-width: 4px;
    border-bottom-color: #ddd;
    border-bottom-style: solid;
}
@media only screen and (min-width: 1200px) {
    .how-to-play-title-box {
        margin-top: 30px;
        border-bottom-width: 0px;
        border-bottom-color: #ddd;
        border-bottom-style: solid;
        padding: 10px;
        margin-top: 0px;
    }
}

.how-to-play-title {
    font-size: 5.5vw;
    font-family: 'Granstander Clean', sans-serif;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 0.5rem;
    margin-top: 3vw;
}
@media only screen and (min-width: 400px) and (max-aspect-ratio: 1/1){
    .how-to-play-title {
        font-size: 4.5vw;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .how-to-play-title {
        font-size: 20pt;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .how-to-play-title {
        font-size: 26pt;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .how-to-play-title {
        font-size: 4.5vh;
        padding-left: 2%;
        padding-right: 2%;
        margin-bottom: 20px;
        margin-top: 0px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .how-to-play-title {
        font-size: 28pt;
        padding-left: 2%;
        padding-right: 2%;
        margin-bottom: 20px;
        margin-top: 0px;
    }
}

.how-to-play-subtitle {
    font-size: 4.5vw;
    font-family: 'League Spartan', sans-serif;
    font-weight: normal;
    line-height: 1.2;
    color: #ddd;
    margin-bottom: 20px;
}
@media only screen and (min-width: 400px) and (max-aspect-ratio: 1/1) {
    .how-to-play-subtitle {
        font-size: 4vw;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .how-to-play-subtitle {
        font-size: 20pt;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .how-to-play-subtitle {
        font-size: 25pt;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .how-to-play-subtitle {
        font-size: 3.5vh;
        padding-left: 2%;
        padding-right: 2%;
        margin-bottom: 0px;
        margin-top: 0px;
    }
}
@media only screen and (min-height: 900px) and (min-aspect-ratio: 1/1) {
    .how-to-play-subtitle {
        font-size: 26pt;
        padding-left: 2%;
        padding-right: 2%;
        margin-bottom: 0px;
        margin-top: 0px;
    }
}

.how-to-play-image {
    width: 101%;
    display: inline-block;
    position: relative;
}

.background-starburst {
    background-image: url("/bridgeorbust/assets/starburst2.svg");
    background-size: 40vw;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}
@media only screen and (min-width: 400px) {
    .background-starburst {
        background-size: 27vw;
        /*transform: translateX(-50%) translateY(-43%);*/
    }
}
@media only screen and (min-width: 1200px) {
    .background-starburst {
        background-size: contain;
        transform: translateX(-50%) translateY(-50%);
    }
}


.infinite-car-box {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .infinite-car-box {
        height: 600px;
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .infinite-car-box {
        height: 800px;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .infinite-car-box {
        height: 800px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .infinite-car-box {
        height: 80vh;
        max-height: 800px;
    }
}

.infinite-car-video {
    width: 100%;
}
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .infinite-car-video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}
@media only screen and (min-width: 900px) and (max-aspect-ratio: 1/1) {
    .infinite-car-video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-55%);
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .infinite-car-video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-62%);
    }
}
@media only screen and (min-aspect-ratio: 1/1) {
    .infinite-car-video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-65%);
    }
}



.video-overlay-dark {
    display: block;
    position: absolute;
    background: rgba(0,0,0,0.35);
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 0rem;
    transition: all 0.3s ease-in-out;
}

.how-to-play-overlay-dark {
    display: block;
    position: absolute;
    background: rgba(0,0,0,0.35);
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 0rem;
    transition: all 0.3s ease-in-out;
    z-index: 3;
}

/* The buy button on the bottom on mobile */

#buy-bottom {
    box-sizing: border-box;
    display: inline-block;
    background-color: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
    color: white;
    font-family: 'Granstander Clean', Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    z-index: 98!important;
}

.order-button3, .order-button3:link, .order-button3:visited {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    background: #bf464c;
    color: #FFFFFF;
    font-size: 28px;
    padding-top: 0.3rem;
    padding-bottom: 1.0rem;
    padding-left: 3rem;
    padding-right: 3rem;
    margin: 0;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    border-width: 3px;
    border-color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 70%;
    height: 50px;
}
.order-button3:hover {
    background: #a33c41;
}
@media only screen and (max-width: 400px) {
    #buy-bottom, #buy-bottom .order-button3 {
        font-size: 26px;
    }
}

.shop-now-button, .shop-now-button:link, .shop-now-button:visited {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #bf464c;
    color: #FFFFFF;
    font-size: 5vw;
    font-family: 'Granstander Clean', sans-serif;
    font-weight: normal;
    padding-top: 0.5rem;
    padding-bottom: 1.2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    margin: 0;
    text-decoration: none;
    border-radius: 100px;
    border-width: 3px;
    border-color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 100%;
}
.shop-now-button:hover {
    background: #a33c41;
    color: #fff;
}

/* For vertical layout */
@media only screen and (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 24pt;
    }
}
@media only screen and (min-width: 1200px) and (max-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 24pt;
    }
}
/* For horizontal layout */
@media only screen and (min-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 5vh;
        padding-top: 1vh;
        padding-bottom: 3vh;
    }
}
@media only screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 18pt;
    }
}
@media only screen and (min-height: 800px) and (min-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 20pt;
        padding-top: 1vh;
        padding-bottom: 2.8vh;
    }
}
@media only screen and (min-height: 1000px) and (min-aspect-ratio: 1/1) {
    .shop-now-button, .shop-now-button:link, .shop-now-button:visited, .shop-now-button:hover {
        font-size: 22pt;
        padding-top: 1vh;
        padding-bottom: 2.6vh;
    }
}