﻿/*==============spceifically for mfest=====================*/

.full-banner .banner-wrapper .banner-images .banner-background {
    width: 100%;
    max-height: 700px;
    height: 700px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.mfest .banner-wrapper .banner-header {
    left: calc(100% - 13%);
    top: calc(100% - 37%);
    transform: translate(-100%, -100%);
}

@media only screen and (max-width: 1550px) {
    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 5%);
    }
}

@media only screen and (max-width: 1450px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 575px;
        height: 575px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 10%);
    }
}

@media only screen and (max-width: 1336px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 575px;
        height: 575px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 8%);
        top: calc(100% - 37%);
        transform: translate(-100%, -100%);
    }
}

@media only screen and (max-width: 1280px) {
    .full-banner .banner-wrapper {
        height: auto;
        /*position: relative;*/
    }

    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 500px;
        height: 500px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 8%);
    }
}

@media only screen and (max-width: 1180px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 450px;
        height: 450px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 8%);
    }
}

@media only screen and (max-width: 1024px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 450px;
        height: 450px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 5%);
        top: calc(100% - 37%);
        transform: translate(-100%, -100%);
    }

    .slick-track {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 1010px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 420px;
        height: 420px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 7%);
        top: calc(100% - 35%);
        transform: translate(-100%, -100%);
    }
}

@media only screen and (max-width: 1023px) {
    .mfest .banner-wrapper .banner-header {
        position: static;
    }

    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 420px;
        height: 420px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url('/Content/images/banners/new/mfest.jpg') !important;
    }

    .fr .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        background-image: url('/Content/images/banners/new/mfest-fr.jpg') !important;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 4%);
        top: calc(100% - 30%);
        transform: translate(0, 0);
        width: auto;
    }

    .mfest .banner-wrapper .banner-buttons {
        margin: 17px auto auto;
    }
}

@media only screen and (max-width: 860px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 380px;
        height: 380px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        left: calc(100% - 8%);
    }
}

@media only screen and (max-width: 860px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 310px;
        height: 310px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 620px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 275px;
        height: 275px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 569px) {
    .mfest .banner-wrapper .banner-header {
        position: static;
    }

    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 240px;
        height: 240px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mfest .banner-wrapper .banner-header {
        /*left: calc(100% - 4%);
        top: calc(100% - 30%);
        transform: translate(0, 0);
        width: auto;*/
    }
}

@media only screen and (max-width: 500px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 210px;
        height: 210px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 430px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 190px;
        height: 190px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 375px) {
    .mfest.full-banner .banner-wrapper .banner-images .banner-background {
        width: 100%;
        max-height: 175px;
        height: 175px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/*=======================full image background (no-grid)============================*/
/*banner backgrounds without a grid to be uploaded @ 1380 x 550 or close to*/
.no-grid .banner-wrapper .banner-images .banner-background {
    max-height: 700px;
    height: 700px;
}

@media only screen and (max-width: 1450px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 575px;
        height: 575px;
    }
}

@media only screen and (max-width: 1336px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 575px;
        height: 575px;
    }
}

@media only screen and (max-width: 1280px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 500px;
        height: 500px;
    }
}

@media only screen and (max-width: 1180px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 450px;
        height: 450px;
    }
}

@media only screen and (max-width: 1024px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 450px;
        height: 450px;
    }
}

@media only screen and (max-width: 1010px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 420px;
        height: 420px;
    }
}

@media only screen and (max-width: 1023px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 420px;
        height: 420px;
    }
}

@media only screen and (max-width: 860px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 380px;
        height: 380px;
    }
}

@media only screen and (max-width: 860px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 310px;
        height: 310px;
    }
}

@media only screen and (max-width: 620px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 275px;
        height: 275px;
    }
}

@media only screen and (max-width: 569px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 240px;
        height: 240px;
    }
}

@media only screen and (max-width: 500px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 210px;
        height: 210px;
    }
}

@media only screen and (max-width: 430px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 190px;
        height: 190px;
    }
}

@media only screen and (max-width: 375px) {
    .no-grid .banner-wrapper .banner-images .banner-background {
        max-height: 175px;
        height: 175px;
    }
}
/*=======================banner where no car iamge is used (no-car)============================*/
/*banners that follow the old format - to be uploaded at 1679 x 483 */
.no-car .banner-wrapper .banner-images .banner-background {
    max-height: 516px;
    height: 516px;
    background-position: 100% center;
}

.no-car .banner-wrapper .banner-grid .grid-wrap {
    padding: 20px 0;
}

@media only screen and (max-width: 1336px) {
}

@media only screen and (max-width: 1336px) {
    .no-car .banner-wrapper .banner-images .banner-background {
        max-height: 384px;
        height: 384px;
    }
}

@media only screen and (max-width: 1024px) {
    .no-car .banner-wrapper .banner-images .banner-background {
        max-height: 384px;
        height: 384px;
    }

    .no-car .banner-wrapper .banner-images .banner-background {
        background-position-x: 15%;
    }

    .banner-wrapper .banner-header {
        left: 4%;
    }
}

@media only screen and (max-width: 768px) {
    .no-car .banner-wrapper .banner-images .banner-background {
        max-height: 300px;
        height: 300px;
    }

    .no-car .banner-wrapper .banner-grid .grid-wrap {
        padding: 0;
    }
}

@media only screen and (max-width: 600px) {
    .no-car .banner-wrapper .banner-images .banner-background {
        max-height: 185px;
        height: 185px;
    }
}

@media only screen and (max-width: 400px) {
    .no-car .banner-wrapper .banner-images .banner-background {
        max-height: 145px;
        height: 145px;
    }
}

/*=====================banner background to be left justified (background-left)=====================*/
.background-left .banner-wrapper .banner-images .banner-background {
    background-position: 0% center;
}

/*=====================banner background to be right justified (background-right) =====================*/
.background-right .banner-wrapper .banner-images .banner-background {
    background-position: 100% center;
}

/*=====================banner background to be left justified (background-left-mobile)=====================*/
@media (max-width: 768px) {
    .background-left-mobile .banner-wrapper .banner-images .banner-background {
        background-position: 0% center;
    }
}

/*=====================banner background to be right justified (background-right-mobile) =====================*/
@media (max-width: 768px) {
    .background-right-mobile .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}

/*========================banner where text overlaps thead car, drop text down form ipad landscape to copy portrait================================*/

@media (max-width: 1024px) {
    .ipad-dropdown .banner-on-mobile {
        display: block;
    }

    .ipad-dropdown .banner-on-desktop {
        display: none;
    }

    .ipad-dropdown .banner-wrapper .banner-header {
        position: static;
        width: 100%;
    }

        .ipad-dropdown .banner-wrapper .banner-header .banner-title {
            color: white;
            position: static;
            top: 0;
            left: 4%;
            width: 100%;
            text-shadow: none;
            text-align: center;
            margin: 25px 0;
        }

            .ipad-dropdown .banner-wrapper .banner-header .banner-title h1 {
                font-size: 42px;
                margin-bottom: 0;
                color: #222;
                text-shadow: none;
            }

            .ipad-dropdown .banner-wrapper .banner-header .banner-title h2 {
                font-size: 24px;
                margin-top: 0;
                margin-bottom: 10px;
                color: #222;
                text-shadow: none;
            }

    .ipad-dropdown .banner-wrapper .banner-title-container {
        position: absolute;
        top: 2%;
        left: 10%;
    }

    .ipad-dropdown .banner-wrapper .banner-buttons {
        width: 70%;
        margin: 17px auto auto;
    }

    .ipad-dropdown .hero-banner-container .Button_LegalOpenButton {
        bottom: 0;
    }
}

.background-0 .banner-wrapper .banner-images .banner-background {
    background-position: 0% center;
}

.background-10 .banner-wrapper .banner-images .banner-background {
    background-position: 10% center;
}

.background-20 .banner-wrapper .banner-images .banner-background {
    background-position: 20% center;
}

.background-30 .banner-wrapper .banner-images .banner-background {
    background-position: 30% center;
}

.background-40 .banner-wrapper .banner-images .banner-background {
    background-position: 40% center;
}

.background-50 .banner-wrapper .banner-images .banner-background {
    background-position: 50% center;
}

.background-60 .banner-wrapper .banner-images .banner-background {
    background-position: 60% center;
}

.background-70 .banner-wrapper .banner-images .banner-background {
    background-position: 70% center;
}

.background-80 .banner-wrapper .banner-images .banner-background {
    background-position: 80% center;
}

.background-90 .banner-wrapper .banner-images .banner-background {
    background-position: 90% center;
}

.background-100 .banner-wrapper .banner-images .banner-background {
    background-position: 100% center;
}

@media (min-width: 1280px) {
    .background-desktop-0 .banner-wrapper .banner-images .banner-background {
        background-position: 0% center;
    }

    .background-desktop-10 .banner-wrapper .banner-images .banner-background {
        background-position: 10% center;
    }

    .background-desktop-20 .banner-wrapper .banner-images .banner-background {
        background-position: 20% center;
    }

    .background-desktop-30 .banner-wrapper .banner-images .banner-background {
        background-position: 30% center;
    }

    .background-desktop-40 .banner-wrapper .banner-images .banner-background {
        background-position: 40% center;
    }

    .background-desktop-50 .banner-wrapper .banner-images .banner-background {
        background-position: 50% center;
    }

    .background-desktop-60 .banner-wrapper .banner-images .banner-background {
        background-position: 60% center;
    }

    .background-desktop-70 .banner-wrapper .banner-images .banner-background {
        background-position: 70% center;
    }

    .background-desktop-80 .banner-wrapper .banner-images .banner-background {
        background-position: 80% center;
    }

    .background-desktop-90 .banner-wrapper .banner-images .banner-background {
        background-position: 90% center;
    }

    .background-desktop-100 .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}

@media (max-width: 1280px) and (min-width: 1024px) {
    .background-laptop-0 .banner-wrapper .banner-images .banner-background {
        background-position: 00% center;
    }

    .background-laptop-10 .banner-wrapper .banner-images .banner-background {
        background-position: 10% center;
    }

    .background-laptop-20 .banner-wrapper .banner-images .banner-background {
        background-position: 20% center;
    }

    .background-laptop-30 .banner-wrapper .banner-images .banner-background {
        background-position: 30% center;
    }

    .background-laptop-40 .banner-wrapper .banner-images .banner-background {
        background-position: 40% center;
    }

    .background-laptop-50 .banner-wrapper .banner-images .banner-background {
        background-position: 50% center;
    }

    .background-laptop-60 .banner-wrapper .banner-images .banner-background {
        background-position: 60% center;
    }

    .background-laptop-70 .banner-wrapper .banner-images .banner-background {
        background-position: 70% center;
    }

    .background-laptop-80 .banner-wrapper .banner-images .banner-background {
        background-position: 80% center;
    }

    .background-laptop-90 .banner-wrapper .banner-images .banner-background {
        background-position: 90% center;
    }

    .background-laptop-100 .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .background-ipad-landscape-0 .banner-wrapper .banner-images .banner-background {
        background-position: 0% center;
    }

    .background-ipad-landscape-10 .banner-wrapper .banner-images .banner-background {
        background-position: 10% center;
    }

    .background-ipad-landscape-20 .banner-wrapper .banner-images .banner-background {
        background-position: 20% center;
    }

    .background-ipad-landscape-30 .banner-wrapper .banner-images .banner-background {
        background-position: 30% center;
    }

    .background-ipad-landscape-40 .banner-wrapper .banner-images .banner-background {
        background-position: 40% center;
    }

    .background-ipad-landscape-50 .banner-wrapper .banner-images .banner-background {
        background-position: 50% center;
    }

    .background-ipad-landscape-60 .banner-wrapper .banner-images .banner-background {
        background-position: 60% center;
    }

    .background-ipad-landscape-70 .banner-wrapper .banner-images .banner-background {
        background-position: 70% center;
    }

    .background-ipad-landscape-80 .banner-wrapper .banner-images .banner-background {
        background-position: 80% center;
    }

    .background-ipad-landscape-90 .banner-wrapper .banner-images .banner-background {
        background-position: 90% center;
    }

    .background-ipad-landscape-100 .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}

@media (max-width: 768px) and (min-width: 600px) {
    .background-ipad-portrait-0 .banner-wrapper .banner-images .banner-background {
        background-position: 0% center;
    }

    .background-ipad-portrait-10 .banner-wrapper .banner-images .banner-background {
        background-position: 10% center;
    }

    .background-ipad-portrait-20 .banner-wrapper .banner-images .banner-background {
        background-position: 20% center;
    }

    .background-ipad-portrait-30 .banner-wrapper .banner-images .banner-background {
        background-position: 30% center;
    }

    .background-ipad-portrait-40 .banner-wrapper .banner-images .banner-background {
        background-position: 40% center;
    }

    .background-ipad-portrait-50 .banner-wrapper .banner-images .banner-background {
        background-position: 50% center;
    }

    .background-ipad-portrait-60 .banner-wrapper .banner-images .banner-background {
        background-position: 60% center;
    }

    .background-ipad-portrait-70 .banner-wrapper .banner-images .banner-background {
        background-position: 70% center;
    }

    .background-ipad-portrait-80 .banner-wrapper .banner-images .banner-background {
        background-position: 80% center;
    }

    .background-ipad-portrait-90 .banner-wrapper .banner-images .banner-background {
        background-position: 90% center;
    }

    .background-ipad-portrait-100 .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}

@media (max-width: 600px) {
    .background-mobile-0 .banner-wrapper .banner-images .banner-background {
        background-position: 0% center;
    }

    .background-mobile-10 .banner-wrapper .banner-images .banner-background {
        background-position: 10% center;
    }

    .background-mobile-20 .banner-wrapper .banner-images .banner-background {
        background-position: 20% center;
    }

    .background-mobile-30 .banner-wrapper .banner-images .banner-background {
        background-position: 30% center;
    }

    .background-mobile-40 .banner-wrapper .banner-images .banner-background {
        background-position: 40% center;
    }

    .background-mobile-50 .banner-wrapper .banner-images .banner-background {
        background-position: 50% center;
    }

    .background-mobile-60 .banner-wrapper .banner-images .banner-background {
        background-position: 60% center;
    }

    .background-mobile-70 .banner-wrapper .banner-images .banner-background {
        background-position: 70% center;
    }

    .background-mobile-80 .banner-wrapper .banner-images .banner-background {
        background-position: 80% center;
    }

    .background-mobile-90 .banner-wrapper .banner-images .banner-background {
        background-position: 90% center;
    }

    .background-mobile-100 .banner-wrapper .banner-images .banner-background {
        background-position: 100% center;
    }
}


/*====================custom class for banner=======================*/
.grid1-custom .grid-block:nth-child(1) {
}

.grid2-custom .grid-block:nth-child(2) {
}

.grid3-custom .grid-block:nth-child(3) {
}

    .grid3-custom .grid-block:nth-child(3) .inner {
        justify-content: center;
    }

.grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-top {
    font-size: 2em;
    display: block;
    position: relative;
    text-align: center;
    font-weight: normal;
    line-height: 1.2em;
}

.grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-center {
    display: none;
}

.grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-bottom {
    font-size: 1.4em;
    display: block;
    position: relative;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
}

@media (max-width: 1024px) and (min-width: 600px) {
    .grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-top {
        font-size: 1.8em !important;
        line-height: 1.2em;
    }

    .grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-bottom {
        font-size: 1.2em;
        line-height: 1.3em;
    }
}

@media (max-width: 600px) {
    .grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-top {
        font-size: 1.7em !important;
        line-height: 1.2em;
    }

    .grid3-custom .banner-wrapper .banner-grid .grid-wrap .grid-block:nth-child(3) .grid-bottom {
        font-size: 1.3em !important;
        line-height: 1.3em;
    }
}

.grid4-custom .grid-block:nth-child(4) {
}


/*====================3 line logo banner=======================*/
.three-line-header {
    font-size: 1em !important;
    line-height: 1em;
}

    .three-line-header .smaller-header {
        font-size: 0.5em !important;
        width: 100%;
        text-align: center;
    }

.left-header .banner-header .banner-buttons {
    text-align: left !important;
}

/*===============Set Banner Background image for LNY =================*/

.lny-background-image .banner-wrapper .banner-header {
    left: 5% !important;
    top: 10% !important;
}

.lny-background-image .banner-wrapper .banner-images .banner-background {
    background-size: contain;
    background-position: 50% top;
}

@media (min-width: 1790px) {
    .lny-background-image .banner-wrapper .banner-images .banner-background {
        background-size: cover;
        background-position: 50% top;
    }
}

/*=======================banner with longer height (x model)============================*/
.temp-for-x .banner-wrapper .banner-images .banner-background {
    max-height: 650px;
    height: 650px;
}

@media only screen and (max-width: 1336px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 384px;
        height: 384px;
    }
}

@media only screen and (max-width: 1336px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 384px;
        height: 384px;
        background-position: 100% 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 384px;
        height: 384px;
    }
}

@media only screen and (max-width: 768px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 300px;
        height: 300px;
    }
}

@media only screen and (max-width: 600px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 185px;
        height: 185px;
    }
}

@media only screen and (max-width: 400px) {
    .temp-for-x .banner-wrapper .banner-images .banner-background {
        max-height: 145px;
        height: 145px;
    }
}


/*=======================================*/
.banner-background-position-x-right .banner-wrapper .banner-images .banner-background {
    background-position-x: right;
}
