/*** Top Major Banner ***/
div.top-major-banner {
    position: relative;
    width: 100%;
    padding-top: 45.8%;
    background-image: url('https://www.yogaforguys.com/Images/Images/home/home-major-banner.png');
    background-size: cover;
}

    div.top-major-banner .top-major-banner-container {
        position: absolute;
        left: 0;
        top: 31.2%;
        right: 0;
        bottom: 0;
    }

        div.top-major-banner .top-major-banner-container .overlay {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        div.top-major-banner .top-major-banner-container .slide-arrow-down {
            position: absolute;
            bottom: 10%;
            left: 0;
            right: 0;
        }

    div.top-major-banner .top-major-banner-title {
        position: absolute;
        left: 0;
        top: 24%;
        right: 0;
        text-align: center;
    }

    div.top-major-banner .top-major-banner-subtitle {
        position: absolute;
        left: 0;
        top: 56%;
        right: 0;
        text-align: center;
    }

    div.top-major-banner .top-major-banner-button {
        position: absolute;
        left: 0;
        top: 67%;
        right: 0;
        display: flex;
        justify-content: center;
    }

        div.top-major-banner .top-major-banner-button a {
            width: 30.0rem;
        }

@media only screen and (max-width: 59.375em) {
    div.top-major-banner {
        margin-bottom: 7.2rem;
    }

        div .top-major-banner .slide-arrow-down {
            display: none;
        }

        div.top-major-banner .top-major-banner-title {
            position: absolute;
            left: 0;
            top: 30%;
            right: 0;
            text-align: center;
        }

            div.top-major-banner .top-major-banner-title h1.major-banner-title {
                font-size: 4.2vw;
            }

        div .top-major-banner .top-major-banner-subtitle {
            position: absolute;
            left: 0;
            top: 66%;
            right: 0;
            text-align: center;
        }

            div .top-major-banner .top-major-banner-subtitle h5.tiny-banner-subtitle {
                font-size: 3.1vw;
            }

        div.top-major-banner .top-major-banner-button {
            position: absolute;
            left: 0;
            top: 99%;
            right: 0;
            display: flex;
            justify-content: center;
        }

            div.top-major-banner .top-major-banner-button a {
                width: 25rem;
                height: 5rem;
                font-size: 1.8rem;
            }
}

/*** Top Major Banner - Smaller ***/
div.top-major-banner-smaller {
    position: relative;
    width: 100%;
    padding-top: 27.7%;
    background-image: url('https://www.yogaforguys.com/Images/Images/home/banner-slim.png');
    background-size: cover;
}

    div.top-major-banner-smaller .top-major-banner-smaller-container {
        position: absolute;
        left: 0;
        top: 31.2%;
        right: 0;
        bottom: 0;
    }

        div.top-major-banner-smaller .top-major-banner-smaller-container .overlay {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

    div.top-major-banner-smaller .top-major-banner-smaller-title {
        position: absolute;
        left: 0;
        top: 40%;
        right: 0;
        text-align: center;
    }

    div.top-major-banner-smaller .top-major-banner-smaller-subtitle {
        position: absolute;
        left: 0;
        top: 56%;
        right: 0;
        text-align: center;
    }

    div.top-major-banner-smaller .top-major-banner-smaller-button {
        position: absolute;
        left: 0;
        top: 67%;
        right: 0;
        display: flex;
        justify-content: center;
    }

        div.top-major-banner-smaller .top-major-banner-smaller-button a {
            width: 20.0rem;
        }

@media only screen and (max-width: 59.375em) {
    div.top-major-banner-smaller {
        margin-bottom: 11rem;
    }

        div.top-major-banner-smaller .top-major-banner-smaller-container {
        }

            div.top-major-banner-smaller .top-major-banner-smaller-container .overlay {
            }

        div.top-major-banner-smaller .top-major-banner-smaller-title {
            top: 40%;
        }

        div.top-major-banner-smaller .top-major-banner-smaller-subtitle {
            top: 65%;
        }

        div.top-major-banner-smaller .top-major-banner-smaller-button {
            top: 120%;
        }

            div.top-major-banner-smaller .top-major-banner-smaller-button a {
                font-size: 1.8rem;
                width: 17.0rem;
                height: 5.2rem;
            }
}

/*** Checkered Pane (opposing image & text & alternating) ***/
div.checkered-panes {
    display: table;
    width: 100%;
}

    div.checkered-panes .checkered-panes-row {
        display: table-row;
    }

    div.checkered-panes .checkered-panes-image-cell {
        display: table-cell;
        width: 50%;
    }

        div.checkered-panes .checkered-panes-image-cell img {
            width: 100%;
            height: auto;
        }

    div.checkered-panes .checkered-panes-text-cell-right {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        padding-left: 12.0rem;
        padding-right: 12.0rem;
    }

        div.checkered-panes .checkered-panes-text-cell-right .page-info-title {
        }

        div.checkered-panes .checkered-panes-text-cell-right .page-info-subtitle {
            margin-top: 3.0rem;
        }

        div.checkered-panes .checkered-panes-text-cell-right .page-info-button {
            max-width: 17.4rem;
            margin-top: 2.0rem;
        }

    div.checkered-panes .checkered-panes-text-cell-left {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        padding-left: 12.0rem;
        padding-right: 12.0rem;
    }

        div.checkered-panes .checkered-panes-text-cell-left .page-info-title {
        }

        div.checkered-panes .checkered-panes-text-cell-left .page-info-subtitle {
            margin-top: 3.0rem;
        }

        div.checkered-panes .checkered-panes-text-cell-left .button {
            width: 30rem;
            margin-top: 2.0rem;
        }

@media only screen and (max-width: 59.375em) {
    div.checkered-panes {
        display: block;
        width: 100%;
    }

        div.checkered-panes .checkered-panes-row {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            margin-bottom: 15rem;
        }

        div.checkered-panes .checkered-panes-image-cell {
            width: 100%;
        }

            div.checkered-panes .checkered-panes-image-cell img {
                width: 100%;
                height: auto;
            }

        div.checkered-panes .checkered-panes-text-cell-right {
            position: absolute;
            left: 5rem;
            top: 20rem;
            background-color: var(--main-background-color);
            right: 5rem;
            display: block;
            vertical-align: auto;
            text-align: center;
            padding-left: 0;
            padding-right: 0;
            width: auto;
        }

            div.checkered-panes .checkered-panes-text-cell-right .page-info-title {
            }

            div.checkered-panes .checkered-panes-text-cell-right .page-info-subtitle {
                margin-top: 1rem;
            }

            div.checkered-panes .checkered-panes-text-cell-right .page-info-button {
                max-width: 17.4rem;
                margin-top: 2.0rem;
            }

        div.checkered-panes .checkered-panes-text-cell-left {
            position: absolute;
            left: 5rem;
            top: 20rem;
            background-color: var(--main-background-color);
            right: 5rem;
            display: block;
            vertical-align: auto;
            text-align: center;
            padding-left: 0;
            padding-right: 0;
            width: auto;
        }

            div.checkered-panes .checkered-panes-text-cell-left .page-info-title {
            }

            div.checkered-panes .checkered-panes-text-cell-left .page-info-subtitle {
                margin-top: 1rem;
            }

            div.checkered-panes .checkered-panes-text-cell-left .button {
                width: 25rem;
                height: 5rem;
                font-size: 1.8rem;
                margin: 2.0rem auto 0 auto;
            }
}

/*** Join Now Options ***/
div.join-now-options {
    background-color: var(--highlighted-background-color);
    border: 0.2rem solid var(--highlighted-background-border-color);
    text-align: center;
}

    div.join-now-options .page-info-title {
        margin-top: 11.0rem;
    }

    div.join-now-options .page-info-tiny-subtitle {
        margin-top: 3.5rem;
    }

    div.join-now-options .join-now-options-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 6.5rem;
        margin-bottom: 11.0rem;
    }

    div.join-now-options .join-now-options-1 {
        position: relative;
        width: 39.3rem;
        height: 48.0rem;
        border: 0.2rem solid var(--strong-border-color);
        border-right: 0;
    }

    div.join-now-options .join-now-options-2 {
        position: relative;
        width: 39.3rem;
        height: 56.0rem;
        background-color: var(--strong-highlighted-background-color);
        color: var(--main-background-color);
    }

    div.join-now-options .join-now-options-3 {
        position: relative;
        width: 39.3rem;
        height: 48.0rem;
        border: 0.2rem solid var(--strong-border-color);
        border-left: 0;
    }

    div.join-now-options .option-title {
        margin-top: 3.8rem;
        font-size: 2.5rem;
        font-weight: 400;
    }

    div.join-now-options .join-now-options-2 .option-title {
        margin-top: 7.8rem;
        font-weight: 600;
    }

    div.join-now-options .option-price {
        height: 12.0rem;
    }

    div.join-now-options .option-price-sign {
        font-size: 2.5rem;
        font-weight: 600;
    }

    div.join-now-options .option-price-amount {
        font-size: 7.0rem;
        font-weight: 600;
    }

    div.join-now-options .option-price-time {
        font-size: 2.5rem;
        font-weight: 600;
    }

    div.join-now-options .option-price-note {
        margin-top: -1.2rem;
    }

    div.join-now-options .option-features {
        margin-top: 1.5rem;
        height: 15.0rem;
        /*background-color: #80808080;*/

        text-align: left;
    }

        div.join-now-options .option-features li {
            /* originally: 17.4 x 12*/
            display: block;
            background-image: url(/img/vector/checkmark.svg);
            background-repeat: no-repeat;
            background-position-x: 0.2em;
            background-position-y: 0.7rem;
            padding-left: 2.8rem;
            padding-top: 0.5rem;
            margin-left: 2.0rem;
            margin-right: 1.5rem;
        }

    div.join-now-options .option-join-now {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    div.join-now-options .button {
        margin-top: 2.0rem;
        width: 20rem;
    }

    div.join-now-options .join-now-banner {
        position: absolute;
        top: 0;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 11.8rem;
        height: 3.4rem;
        background-image: url(/img/vector/popularbanner.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

@media only screen and (max-width: 59.375em) {
    div.join-now-options {  
        margin-top: 24rem;
    }

        div.join-now-options .page-info-title {
            margin-top: 3.0rem;
        }

        div.join-now-options .page-info-tiny-subtitle {
            margin-top: 1.5rem;
        }

        div.join-now-options .join-now-options-container {
            justify-content: flex-start;
            margin-top: 3.5rem;
            margin-bottom: 8.0rem;
            overflow-x: scroll;
            /* Hide scrollbar for IE, Edge and Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }

            /* Hide scrollbar for Chrome, Safari and Opera */
            div.join-now-options .join-now-options-container::-webkit-scrollbar {
                display: none;
            }

        div.join-now-options .join-now-options-1 {
            height: 49.0rem;
            min-width: 25.0rem;
        }

        div.join-now-options .join-now-options-2 {
            height: 53.0rem;
            min-width: 25.0rem;
        }

        div.join-now-options .join-now-options-3 {
            height: 49.0rem;
            min-width: 25.0rem;
        }

        div.join-now-options .option-title {
            margin-top: 3.8rem;
            font-size: 2.5rem;
        }

        div.join-now-options .join-now-options-2 .option-title {
            margin-top: 7.8rem;
            font-weight: 600;
        }

        div.join-now-options .option-price {
            height: 12.0rem;
        }

        div.join-now-options .option-price-sign {
            font-size: 2.5rem;
            font-weight: 600;
        }

        div.join-now-options .option-price-amount {
            font-size: 7.0rem;
            font-weight: 600;
        }

        div.join-now-options .option-price-time {
            font-size: 2.5rem;
            font-weight: 600;
        }

        div.join-now-options .option-price-note {
            margin-top: -1.2rem;
        }

        div.join-now-options .option-features {
            margin-top: 1.5rem;
            height: 15.0rem;
            /*background-color: #80808080;*/

            text-align: left;
        }

            div.join-now-options .option-features li {
                /* originally: 17.4 x 12*/
                display: block;
                background-image: url(/img/vector/checkmark.svg);
                background-repeat: no-repeat;
                background-position-x: 0.2rem;
                background-position-y: 0.7rem;
                padding-left: 2.8rem;
                padding-top: 0.5rem;
                margin-left: 1.0rem;
                margin-right: 1.5rem;
                font-size: 1.1rem;
            }

        div.join-now-options .option-join-now {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        div.join-now-options .button {
            margin: 3.8rem 3rem 0 3rem;
            width: 15rem;
            height: 6rem;
            font-size: 1.8rem;
        }

        div.join-now-options .join-now-banner {
            position: absolute;
            top: 0;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            width: 11.8rem;
            height: 3.4rem;
            background-image: url(/img/vector/popularbanner.svg);
            background-repeat: no-repeat;
            background-size: cover;
        }
}

/*** Join Now Options - Join Now Page ***/
div.join-now-options-select {
    background-color: var(--highlighted-background-color);
    border: 0.2rem solid var(--highlighted-background-border-color);
    text-align: center;
}

    div.join-now-options-select .page-info-title {
        margin-top: 11.0rem;
    }

    div.join-now-options-select .page-info-tiny-subtitle {
        margin-top: 3.5rem;
    }

    div.join-now-options-select .join-now-options-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 6.5rem;
        margin-bottom: 11.0rem;
    }

    div.join-now-options-select .join-now-options-1 {
        position: relative;
        width: 39.3rem;
        height: 48.0rem;
        border: 0.2rem solid var(--strong-border-color);
        border-right: 0;
    }

    div.join-now-options-select .join-now-options-2 {
        position: relative;
        width: 39.3rem;
        height: 56.0rem;
        background-color: var(--strong-highlighted-background-color);
        color: var(--main-background-color);
    }

    div.join-now-options-select .join-now-options-3 {
        position: relative;
        width: 39.3rem;
        height: 48.0rem;
        border: 0.2rem solid var(--strong-border-color);
        border-left: 0;
    }

    div.join-now-options-select .option-title {
        margin-top: 3.8rem;
        font-size: 2.5rem;
        font-weight: 400;
    }

    div.join-now-options-select .join-now-options-2 .option-title {
        margin-top: 7.8rem;
        font-weight: 600;
    }

    div.join-now-options-select .option-price {
        height: 12.0rem;
    }

    div.join-now-options-select .option-price-sign {
        font-size: 2.5rem;
        font-weight: 600;
    }

    div.join-now-options-select .option-price-amount {
        font-size: 7.0rem;
        font-weight: 600;
    }

    div.join-now-options-select .option-price-time {
        font-size: 2.5rem;
        font-weight: 600;
    }

    div.join-now-options-select .option-price-note {
        margin-top: -1.2rem;
    }

    div.join-now-options-select .option-features {
        margin-top: 1.5rem;
        height: 15.0rem;
        /*background-color: #80808080;*/

        text-align: left;
    }

        div.join-now-options-select .option-features li {
            /* originally: 17.4 x 12*/
            display: block;
            background-image: url(/img/vector/checkmark.svg);
            background-repeat: no-repeat;
            background-position-x: 0.2em;
            background-position-y: 0.7rem;
            padding-left: 2.8rem;
            padding-top: 0.5rem;
            margin-left: 2.0rem;
            margin-right: 1.5rem;
        }

    div.join-now-options-select .option-join-now {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    div.join-now-options-select .button {
        margin-top: 2.0rem;
        width: 20rem;
    }

    div.join-now-options-select .join-now-banner {
        position: absolute;
        top: 0;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 11.8rem;
        height: 3.4rem;
        background-image: url(/img/vector/popularbanner.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

@media only screen and (max-width: 59.375em) {
    div.join-now-options-select {
        margin-top: 0rem;
    }

        div.join-now-options-select .page-info-title {
            margin-top: 3.0rem;
        }

        div.join-now-options-select .page-info-tiny-subtitle {
            margin-top: 1.5rem;
        }

        div.join-now-options-select .join-now-options-container {
            justify-content: flex-start;
            flex-direction: column;
            margin-top: 3.5rem;
            margin-bottom: 8.0rem;
            /*overflow-x: scroll;*/
            /* Hide scrollbar for IE, Edge and Firefox */
            /*-ms-overflow-style: none;*/ /* IE and Edge */
            /*scrollbar-width: none;*/ /* Firefox */
        }

            /* Hide scrollbar for Chrome, Safari and Opera */
            div.join-now-options-select .join-now-options-container::-webkit-scrollbar {
                /*display: none;*/
            }

        div.join-now-options-select .join-now-options-1 {
            height: 40.5rem;
            min-width: 25.0rem;
            order: 2;
        }

        div.join-now-options-select .join-now-options-2 {
            height: 44.0rem;
            min-width: 25.0rem;
            order: 1;
        }

        div.join-now-options-select .join-now-options-3 {
            height: 40.5rem;
            min-width: 25.0rem;
            order: 3;
        }

        div.join-now-options-select .option-title {
            margin-top: 3.8rem;
            font-size: 2.5rem;
        }

        div.join-now-options-select .join-now-options-2 .option-title {
            margin-top: 7.8rem;
            font-weight: 600;
        }

        div.join-now-options-select .option-price {
            height: 12.0rem;
        }

        div.join-now-options-select .option-price-sign {
            font-size: 2.5rem;
            font-weight: 600;
        }

        div.join-now-options-select .option-price-amount {
            font-size: 7.0rem;
            font-weight: 600;
        }

        div.join-now-options-select .option-price-time {
            font-size: 2.5rem;
            font-weight: 600;
        }

        div.join-now-options-select .option-price-note {
            margin-top: -1.2rem;
        }

        div.join-now-options-select .option-features {
            margin-top: 0rem;
            height: 6.0rem;
            /*background-color: #80808080;*/
            margin-left: 3.5rem;
            text-align: left;
        }

            div.join-now-options-select .option-features li {
                /* originally: 17.4 x 12*/
                display: block;
                background-image: url(/img/vector/checkmark.svg);
                background-repeat: no-repeat;
                background-position-x: 0.2rem;
                background-position-y: 0.7rem;
                padding-left: 2.8rem;
                padding-top: 0.5rem;
                margin-left: 1.0rem;
                margin-right: 1.5rem;
                font-size: 1.1rem;
            }

        div.join-now-options-select .option-join-now {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        div.join-now-options-select .button {
            margin: 3.8rem 3rem 0 3rem;
            width: 15rem;
            height: 6rem;
            font-size: 1.8rem;
        }

        div.join-now-options-select .join-now-banner {
            position: absolute;
            top: 0;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            width: 11.8rem;
            height: 3.4rem;
            background-image: url(/img/vector/popularbanner.svg);
            background-repeat: no-repeat;
            background-size: cover;
        }
}

/*** Interior Major Banner ***/
div.interior-major-banner {
    position: relative;
    width: 100%;
    padding-top: 45.8%;
    background-image: url('https://www.yogaforguys.com/Images/Images/home/home-interior-major-banner.png');
    background-size: cover;
}

    div.interior-major-banner .interior-major-banner-container {
        position: absolute;
        left: 0;
        top: 31.2%;
        right: 0;
        bottom: 0;
    }

    div.interior-major-banner .interior-major-banner-title {
        position: absolute;
        left: 0;
        top: 30%;
        right: 0;
        text-align: center;
    }

        div.interior-major-banner .interior-major-banner-title .major-banner-title {
            font-weight: 600;
            line-height: 1.76;
        }

    div .interior-major-banner .interior-major-banner-subtitle {
        position: absolute;
        left: 0;
        top: 64%;
        right: 0;
        text-align: center;
    }

    div.interior-major-banner .interior-major-banner-button {
        position: absolute;
        left: 0;
        top: 74%;
        right: 0;
        display: flex;
        justify-content: center;
    }

        div.interior-major-banner .interior-major-banner-button a {
            width: 19.4rem;
        }

@media only screen and (max-width: 59.375em) {
    div.interior-major-banner {
        margin-top: 2rem;
    }

        div.interior-major-banner .interior-major-banner-container {
            display: none;
        }
            div.interior-major-banner .interior-major-banner-container .slide-arrow-down {
                display: none;
            }

        div.interior-major-banner .interior-major-banner-title {
            position: absolute;
            left: 0;
            top: 15%;
            right: 0;
            text-align: center;
        }

            div.interior-major-banner .interior-major-banner-title .major-banner-title {
                font-weight: 600;
                line-height: 1.76;
                font-size: 1.3rem;
            }

        div .interior-major-banner .interior-major-banner-subtitle {
            position: absolute;
            left: 0;
            top: 51%;
            right: 0;
            text-align: center;
        }

            div .interior-major-banner .interior-major-banner-subtitle h5.tiny-banner-subtitle {
                font-size: 1.2rem;
            }

        div.interior-major-banner .interior-major-banner-button {
            position: absolute;
            left: 0;
            top: 105%;
            right: 0;
            display: flex;
            justify-content: center;
        }

            div.interior-major-banner .interior-major-banner-button a {
                width: 16rem;
                height: 5rem;
                font-size: 1.8rem;
            }
}    

/*** Text Banner ***/
div.text-banner {
    background-color: var(--highlighted-background-color);
    width: 80%;
    margin: 0 auto;
    padding: 4.0rem 0 9.0rem 0;
}

    div.text-banner .text-banner-header {
        text-align: center;
        margin-top: 6.0rem;
    }

        div.text-banner .text-banner-header .page-info-tiny-subtitle {
            margin-top: 1.5rem;
        }

    div .text-banner .text-banner-button {
        margin-top: 2.0rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

        div.text-banner .text-banner-button .button {
            width: 30.0rem;
        }

@media only screen and (max-width: 59.375em) {
    div.text-banner {
        width: 100%;
        margin: 0;
        padding: 1.0rem 0 3.0rem 0;
    }

        div.text-banner .text-banner-header {
            margin-top: 2.0rem;
        }

        div.text-banner .text-banner-button .button {
            width: 25.0rem;
            height: 5rem;
            font-size: 1.8rem;
        }
}

div.text-banner-smaller {
    background-color: var(--highlighted-background-color);
    width: 80%;
    margin: 0 auto;
    padding: 3.0rem 0 3.0rem 0;
}

    div.text-banner-smaller .text-banner-header {
        text-align: center;
        margin-top: 0rem;
    }

        div.text-banner-smaller .text-banner-header .page-info-tiny-subtitle {
            margin-top: 1.5rem;
        }

    div.text-banner-smaller .text-banner-button {
        margin-top: 2.0rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

        div.text-banner-smaller .text-banner-button .button {
            width: 28.0rem;
        }

@media only screen and (max-width: 59.375em) {
    div.text-banner-smaller {
        width: 100%;
        margin: 0;
        padding: 1.5rem 0 1.5rem 0;
    }

        div.text-banner-smaller .text-banner-header {
            margin-top: 0rem;
        }

        div.text-banner-smaller .text-banner-button .button {
            width: 28.0rem;
            height: 5rem;
            font-size: 1.8rem;
        }
}


.ydl div.join-now-options .option-features li {
   
    background-image: url(/img/vector/checkmark-purple.svg);
   
}

.ydl div.join-now-options .join-now-banner {
    background-image: url(/img/vector/popularbanner-purple.svg);
}