﻿/*Controller Specific CSS With Media Queries */


/*Fixes shifting on contact card*/
body div.modal.fade.show, body.modal-open {
    padding-right: 0px !important;
}
/*Image Accordion*/
.img-section.img-accordion-banner-v1 {
    width: 100%;
}


/*Benefits of membership Images*/

.reasons-to-join-div {
    transition: opacity 0.6s;
}

    .reasons-to-join-div:hover,
    .reasons-to-join-div:focus {
        opacity: 0.5;
        /* transform: scale(1.09); */
        cursor: pointer;
    }

.benefits-icon-modal-section {
    color: #f9a319;
}




/*Quote Banner*/
img.quote-img {
    max-width: 100%;
}

.three-card-summary-blurb {
}

/* Extra SM devices ONLY */
@media (max-width: 575px) {
    .img-section.img-accordion-banner-v1 {
        max-width: 80%;
        padding: 1%;
    }

        .img-section.img-accordion-banner-v1 > img {
            height: 100%;
            width: inherit;
            object-fit: cover;
            object-fit: fit;
        }

    .quote-block-text-section {
        padding: 8% 0% 0%;
    }

    div.card-image.background-image-banner {
        min-height: 420px;
        height: 420px;
        max-height: 450px;
        background-position: inherit;
        background-size: cover;
    }

    div.full-width-card-banner-text-section p:first-child {
        font-size: 3.5rem;
        font-weight: bold;
        text-align: center;
    }



    .threeCardBanner .container p.h2 {
        font-size: 1.5rem;
    }

    .three-card-banner-div {
        max-height: 210px;
        margin: 0 auto;
        max-width: 250px;
        min-height: 200px;
    }

        .three-card-banner-div > .three-card-banner-icon {
            width: 100%;
        }



    div.membership-benefits #bottomdiv div:first-child.col-12, div.membership-benefits.icons-section #bottomdiv div:first-child.col-12, div.text-box-generic-video-section #bottomdiv div:first-child.col-12 {
        order: 1;
        /*text-align: justify;*/
    }


    #bottomdiv div:first-child.col-12 h2 {
        text-align: center;
        padding-top: 2%;
    }

    #bottomdiv div:first-child.col-12 p:nth-child(2) {
        text-align: left;
    }

    div.membership-benefits #bottomdiv div:nth-of-type(2).col-12, div.text-box-generic-video-section #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 90%;
        margin: 0 auto;
    }


    div.membership-benefits #bottomdiv div:nth-of-type(2) img, div.text-box-generic-video-section #bottomdiv div:nth-of-type(2) video {
        max-width: 400px;
        width: inherit;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 40%;
        margin: 0 auto;
        padding: 3% 0%;
    }

    div.membership-benefits #bottomdiv div:nth-of-type(2) img {
        max-width: 400px;
        width: inherit;
    }

    .responsive-text-left-justify {
        text-align: left;
    }

    .uc-text-left-justify {
    }

        .uc-text-left-justify h2 {
            text-align: center;
        }

        .uc-text-left-justify p {
            text-align: left;
        }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .img-section.img-accordion-banner-v1 {
        max-height: 320px;
        padding: 2%;
    }

        .img-section.img-accordion-banner-v1 > img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    div.full-width-card-banner-text-section p:first-child {
        font-size: 3.5rem;
        font-weight: bolder;
        text-align: center;
    }

    div.full-width-card-banner-text-section p:nth-child(2) {
        text-align: justify;
    }

    .threeCardBanner .container p.h2 {
        font-size: 1.5rem;
    }

    div.card-image.background-image-banner {
        min-height: 400px;
        height: 394px;
        max-height: 480px;
        background-position: inherit;
        background-size: cover;
    }

    .img-quote-section {
        width: 93%;
        margin: 0 auto;
        max-height: 480px;
    }


    .quote-block-text-section {
        margin: 2%;
        padding: 0%;
    }

    .three-card-banner-div {
        width: calc(100% - 10%);
        max-width: 300px;
        margin: 2% auto;
    }

        .three-card-banner-div > .three-card-banner-icon {
            width: 100%;
            max-height: 200px;
        }


    div.membership-benefits #bottomdiv div:first-child.col-12 {
        order: 1;
    }

    div.membership-benefits #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 55%;
        margin: 0 auto;
        padding: 2% 0%;
    }

    div.membership-benefits #bottomdiv div:nth-of-type(2) img {
        max-width: 400px;
        max-height: 320px;
        width: inherit;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 30%;
        margin: 0 auto;
        padding: 2% 0%;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2) img {
        max-width: 150px;
        max-height: inherit;
        height: 150px;
        width: auto;
    }

    /*div.text-box-generic-video-section #bottomdiv div:first-child.col-12 h2 {
        text-align: center;
    }*/

    #bottomdiv div:first-child.col-12 h2 {
        text-align: center;
        padding-top: 2%;
    }

    #bottomdiv div:first-child.col-12 p:nth-child(2) {
        text-align: left;
    }

    div.text-box-generic-video-section #bottomdiv div:first-child.col-12 {
        order: 1;
        text-align: justify;
    }

    div.text-box-generic-video-section #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 65%;
        margin: 0 auto;
        padding: 2% 0%;
    }

    div.text-box-generic-video-section #bottomdiv div:nth-of-type(2) video {
        max-width: 415px;
        max-height: 350px;
        width: inherit;
    }

    .responsive-text-left-justify {
        text-align: left;
    }

    .uc-text-left-justify {
    }

        .uc-text-left-justify h2 {
            text-align: center;
        }

        .uc-text-left-justify p {
            text-align: left;
        }
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .img-section.img-accordion-banner-v1 {
        margin: 0 auto;
        max-width: 620px;
    }


        .img-section.img-accordion-banner-v1 > img {
            width: 100%;
        }

    .quote-block-text-section {
        margin: 3%;
        padding: 0%;
    }

    .container.quote-container {
        padding: 3%;
    }

    img.quote-img {
        max-width: 100%;
        max-height: inherit;
        object-fit: cover;
    }

    .img-quote-section {
        width: 93%;
        margin: 0 auto;
        max-height: 600px;
    }

    div.card-image.background-image-banner {
        max-height: 520px;
        height: 450px;
    }

    div.full-width-card-banner-text-section p:first-child {
        font-size: 4.5rem;
        /*text-align: center;*/
    }

    .div.full-width-card-banner-text-section {
        max-width: 80%;
        text-align: center;
        margin: 0 auto 0 0;
    }

    .threeCardBanner .container p.h2 {
        font-size: 1.5rem;
    }


    .uc.imageCard > img {
        min-height: 215px;
        object-fit: cover;
        max-height: 220px;
    }

    .three-card-banner-div {
    }

        .three-card-banner-div > .three-card-banner-icon {
        }

    div.membership-benefits #bottomdiv {
    }

        div.membership-benefits #bottomdiv div:first-child.col-12, div.text-box-generic-video-section #bottomdiv div:first-child.col-12 {
            order: 1;
            flex: 0 0 100%;
            max-width: 100%;
            /*text-align: center;*/
        }

        div.membership-benefits #bottomdiv div:nth-of-type(2).col-12, div.text-box-generic-video-section #bottomdiv div:nth-of-type(2).col-12 {
            order: 0;
            max-width: 50%;
            margin: 0 auto;
            padding: 2% 0%;
            flex: 0 0 100%;
        }

        div.membership-benefits #bottomdiv div:nth-of-type(2) img {
            /*max-width: 400px;
            max-height: 320px;
            width: inherit;*/
        }


    div.membership-benefits.icons #bottomdiv div:first-child.col-12 {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: 20%;
        margin: 0 auto;
        padding: 2% 0%;
        flex: 0 0 100%;
    }

    div.text-box-generic-video-section #bottomdiv div:nth-of-type(2) video {
        max-width: 470px;
        max-height: 350px;
        width: inherit;
    }

    #bottomdiv div:first-child.col-12 h2 {
        padding-top: 1%;
    }
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .img-section.img-accordion-banner-v1 {
        max-height: 320px;
        max-width: 50%;
        padding: 2%;
    }

        .img-section.img-accordion-banner-v1 > img {
            width: 100%;
            object-fit: cover;
        }

    div.card-image.background-image-banner {
        max-height: 540px;
        height: 520px;
    }

    div.full-width-card-banner-text-section {
        max-width: 90%;
        /*text-align: center;*/
        padding: 5%;
        margin: 0 auto 0 0;
    }

        div.full-width-card-banner-text-section p:first-child {
            font-size: 4.5rem;
        }

    div.container.quote-container {
        padding: 0;
        max-width: inherit;
        margin: 0;
    }


    .quote-block-text-section {
        width: 50%;
        align-self: center;
        padding: 3%;
        margin: 0%;
    }

    .img-quote-section {
        width: 50%;
        min-height: 500px;
        overflow: hidden;
        position: relative;
    }

    img.quote-img {
        width: 50vw;
        height: min-content;
        object-fit: cover;
    }

    .uc.imageCard > img {
        min-height: 260px;
        object-fit: cover;
        max-height: 26px;
    }

    .three-card-banner-div {
        margin: 5% auto;
    }



    .threeCardBanner .container p.h2 {
        font-size: 1.7rem;
    }

    div.membership-benefits #bottomdiv {
    }

        div.membership-benefits #bottomdiv div:first-child.col-12 {
            flex: 0 0 70%;
            align-self: center;
            max-width: initial;
            /*padding-left: 2%;*/
        }

        div.membership-benefits #bottomdiv div:nth-of-type(2).col-12 {
            order: 0;
            max-width: initial;
            margin: 0 auto;
            padding: 2% 0%;
            flex: 0 2 30%;
        }

    div.membership-benefits.icons #bottomdiv div:first-child.col-12 {
        flex: 0 0 70%;
        align-self: center;
        max-width: initial;
        padding-left: 5%;
        padding-right: 15%;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: initial;
        margin: 0 1% auto auto;
        padding: 3% 0%;
        flex: 0 2 15%;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2) img {
        max-width: initial;
        text-align: center;
    }

    div.text-box-generic-video-section #bottomdiv div:first-child.col-12 {
        flex: 0 0 50%;
        align-self: center;
        max-width: initial;
    }

    div.text-box-generic-video-section #bottomdiv div:nth-of-type(2).col-12 {
        order: 0;
        max-width: initial;
        margin: 0 auto;
        padding: 2% 0%;
        /*flex: 0 0 50%;*/
        flex: 0 0 40%;
    }

    div.membership-benefits #bottomdiv div:nth-of-type(2) img, div.membership-benefits #bottomdiv div:nth-of-type(2) video {
        flex: 0 2 60%;
        max-width: initial;
        text-align: center;
    }

    #bottomdiv div:first-child.col-12 h2 {
        text-align: left;
        padding-top: inherit;
    }

    #bottomdiv div:first-child.col-12 p:nth-child(2) {
        text-align: justify;
    }

    .responsive-text-left-justify {
        text-align: justify;
    }

    .uc-text-left-justify h2 {
        width: max-content;
        margin: 0 auto;
        text-align: Justify;
    }

    .uc-text-left-justify p {
        text-align: justify;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    div.card-image.background-image-banner {
        max-height: 550px;
        height: 540px;
        background-position: bottom;
        background-size: cover;
    }

    div.full-width-card-banner-text-section {
        max-width: 50%;
        text-align: center;
        /* padding: 5%; */
        margin: 0 auto 0 0;
    }

    div.membership-benefits.icons #bottomdiv div:nth-of-type(2) img {
        max-width: initial;
        text-align: center;
    }
}


/*4k Previously set to 2500px*/
@media (min-width: 2000px) {
    div.full-width-card-banner-text-section {
        max-width: 60%;
        text-align: center;
        margin: 0 auto 0 0;
    }

    div.card-image.background-image-banner {
        max-height: 584px;
        height: 584px;
        background-position: center;
        background-size: cover;
    }
}
