﻿@media all and (max-width: 1200px) {
    header #bgContainer {
        width: 100%;
    }
}

@media all and (max-width: 910px) and (min-width: 641px) {
    #bodyResources img {
        max-width: 100%;
    }
}

@media (max-width: 880px) {
    .Page.Page-Slots .Slots_Wrapper {
        width: 80%;
    }
}

@media (max-width: 805px) {
    .carousel {
        width: 100%;
    }

    .Page.Page-Slots #headerResources {
        position: absolute;
    }

    .Page.Page-Slots #bodyResources {
        width: 100% !important;
        float: unset;
    }

        .Page.Page-Slots .h2Left.TextResource {
            margin: 90px 0 0 25px;
        }

    .Page.Page-Slots .Slots_Wrapper {
        padding: 0 25px;
    }
}

@media (max-width: 900px) {
    div.TextResource {
        max-width: 340px !important;
    }
}

@media all and (max-width: 805px) and (min-width: 641px) {
    .Page.Page-Slots #bodyResources {
        width: 100% !important;
        float: unset;
    }
    
    .Page.Page-Slots #bodyResources .leftSpaceText.TextResource {
        margin: 30px 0 0 310px;
    }
}

@media (max-width: 697px) {
    .Page.Page-Slots #bodyResources {
        width: 100%!important;
        float: unset;
        
    }

        .leftSpaceText .Page.Page-Slots #bodyResources .TextResources {
            margin-left: 300px;
        }
}

/* anything larger than a phone */
@media all and (min-width: 641px) {
    .Desktop {
        display: block !important;
    }

    .Mobile {
        display: none !important;
    }

    ul.Mainnav {
        position: absolute;
        height: 45px;
        width: 910px;
        bottom: 0;
        margin: 0 auto;
        padding: 0;
    }

        ul.Mainnav li {
            display: inline-block;
            width: 150px;
            height: 45px;
            float: left;
            border-right: 2px solid rgb(35,31,31);
        }

            ul.Mainnav li a {
                display: block;
                width: 100%;
                line-height: 45px;
                font-family: mission_gothicregular;
                text-align: center;
                overflow: auto;
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5f6d62, endColorstr=#231f1f);
                background: -webkit-linear-gradient(top, rgb(39,38,16) 0%, rgb(35,31,31) 50%, rgb(95,96,98) 54%, rgb(56,42,47) 100%);
                background: -o-linear-gradient(top, rgb(39,38,16) 0%, rgb(35,31,31) 50%, rgb(95,96,98) 54%, rgb(56,42,47) 100%);
                background: -ms-linear-gradient(top, rgb(39,38,16) 0%, rgb(35,31,31) 50%, rgb(95,96,98) 54%, rgb(56,42,47) 100%);
                background: -moz-linear-gradient(top, rgb(39,38,16) 0%, rgb(35,31,31) 50%, rgb(95,96,98) 54%, rgb(56,42,47) 100%);
                background: linear-gradient(to top, rgb(39,38,16) 0%, rgb(35,31,31) 50%, rgb(95,96,98) 54%, rgb(56,42,47) 100%);
            }

                ul.Mainnav li a:hover {
                    color: #FFF;
                }

            ul.Mainnav li.Mainnav-slots a {
                border-top-left-radius: 10px;
            }

                ul.Mainnav li.Mainnav-slots a.Selected,
                ul.Mainnav li.Mainnav-slots a:hover {
                    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#98253a, endColorstr=#370c11);
                    background: -webkit-linear-gradient(top, rgb(64,15,09) 0%, rgb(55,12,17) 50%, rgb(152,37,58) 54%, rgb(92,23,33) 100%);
                    background: -o-linear-gradient(top, rgb(64,15,09) 0%, rgb(55,12,17) 50%, rgb(152,37,58) 54%, rgb(92,23,33) 100%);
                    background: -ms-linear-gradient(top, rgb(64,15,09) 0%, rgb(55,12,17) 50%, rgb(152,37,58) 54%, rgb(92,23,33) 100%);
                    background: -moz-linear-gradient(top, rgb(64,15,09) 0%, rgb(55,12,17) 50%, rgb(152,37,58) 54%, rgb(92,23,33) 100%);
                    background: linear-gradient(to top, rgb(64,15,09) 0%, rgb(55,12,17) 50%, rgb(152,37,58) 54%, rgb(92,23,33) 100%);
                }

            ul.Mainnav li.Mainnav-bingo a.Selected,
            ul.Mainnav li.Mainnav-bingo a:hover {
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#542248, endColorstr=#1f0c16);
                background: -webkit-linear-gradient(top, rgb(50,20,43) 0%, rgb(31,12,22) 50%, rgb(84,34,72) 54%, rgb(36,16,10) 100%);
                background: -o-linear-gradient(top, rgb(50,20,43) 0%, rgb(31,12,22) 50%, rgb(84,34,72) 54%, rgb(36,16,10) 100%);
                background: -ms-linear-gradient(top, rgb(50,20,43) 0%, rgb(31,12,22) 50%, rgb(84,34,72) 54%, rgb(36,16,10) 100%);
                background: -moz-linear-gradient(top, rgb(50,20,43) 0%, rgb(31,12,22) 50%, rgb(84,34,72) 54%, rgb(36,16,10) 100%);
                background: linear-gradient(to top, rgb(50,20,43) 0%, rgb(31,12,22) 50%, rgb(84,34,72) 54%, rgb(36,16,10) 100%);
            }

            ul.Mainnav li.Mainnav-oneclub a.Selected,
            ul.Mainnav li.Mainnav-oneclub a:hover {
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7e3372, endColorstr=#2d1023);
                background: -webkit-linear-gradient(top, rgb(78,30,70) 0%, rgb(45,16,35) 50%, rgb(126,51,114) 54%, rgb(53,21,16) 100%);
                background: -o-linear-gradient(top, rgb(78,30,70) 0%, rgb(45,16,35) 50%, rgb(126,51,114) 54%, rgb(53,21,16) 100%);
                background: -ms-linear-gradient(top, rgb(78,30,70) 0%, rgb(45,16,35) 50%, rgb(126,51,114) 54%, rgb(53,21,16) 100%);
                background: -moz-linear-gradient(top, rgb(78,30,70) 0%, rgb(45,16,35) 50%, rgb(126,51,114) 54%, rgb(53,21,16) 100%);
                background: linear-gradient(to top, rgb(78,30,70) 0%, rgb(45,16,35) 50%, rgb(126,51,114) 54%, rgb(53,21,16) 100%);
            }

            ul.Mainnav li.Mainnav-promotions a.Selected,
            ul.Mainnav li.Mainnav-promotions a:hover {
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a78626, endColorstr=#3c290a);
                background: -webkit-linear-gradient(top, rgb(99,77,22) 0%, rgb(60,41,10) 50%, rgb(167,134,38) 54%, rgb(71,54,6) 100%);
                background: -o-linear-gradient(top, rgb(99,77,22) 0%, rgb(60,41,10) 50%, rgb(167,134,38) 54%, rgb(71,54,6) 100%);
                background: -ms-linear-gradient(top, rgb(99,77,22) 0%, rgb(60,41,10) 50%, rgb(167,134,38) 54%, rgb(71,54,6) 100%);
                background: -moz-linear-gradient(top, rgb(99,77,22) 0%, rgb(60,41,10) 50%, rgb(167,134,38) 54%, rgb(71,54,6) 100%);
                background: linear-gradient(to top, rgb(99,77,22) 0%, rgb(60,41,10) 50%, rgb(167,134,38) 54%, rgb(71,54,6) 100%);
            }


            ul.Mainnav li.Mainnav-bingobar a.Selected,
            ul.Mainnav li.Mainnav-bingobar a:hover {
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0094E0, endColorstr=#3c290a);
                background: -webkit-linear-gradient(top, rgb(0, 112, 170) 0%, rgb(60,41,10) 50%, rgb(0, 148, 224) 54%, rgb(36,16,10) 100%);
                background: -o-linear-gradient(top, rgb(0, 112, 170) 0%, rgb(60,41,10) 50%, rgb(0, 148, 224) 54%, rgb(36,16,10) 100%);
                background: -ms-linear-gradient(top, rgb(0, 112, 170) 0%, rgb(60,41,10) 50%, rgb(0, 148, 224) 54%, rgb(36,16,10) 100%);
                background: -moz-linear-gradient(top, rgb(0, 112, 170) 0%, rgb(60,41,10) 50%, rgb(0, 148, 224) 54%, rgb(36,16,10) 100%);
                background: linear-gradient(to top, rgb(0, 112, 170) 0%, rgb(60,41,10) 50%, rgb(0, 148, 224) 54%, rgb(36,16,10) 100%);
            }

            ul.Mainnav li.Mainnav-deli {
                border-right: none;
            }

                ul.Mainnav li.Mainnav-deli a {
                    border-top-right-radius: 10px;
                }

                    ul.Mainnav li.Mainnav-deli a.Selected,
                    ul.Mainnav li.Mainnav-deli a:hover {
                        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#387f95, endColorstr=#122923);
                        background: -webkit-linear-gradient(top, rgb(32,74,87) 0%, rgb(18,41,47) 50%, rgb(56,127,149) 54%, rgb(19,47,37) 100%);
                        background: -o-linear-gradient(top, rgb(32,74,87) 0%, rgb(18,41,47) 50%, rgb(56,127,149) 54%, rgb(19,47,37) 100%);
                        background: -moz-linear-gradient(top, rgb(32,74,87) 0%, rgb(18,41,47) 50%, rgb(56,127,149) 54%, rgb(19,47,37) 100%);
                        background: linear-gradient(to top, rgb(32,74,87) 0%, rgb(18,41,47) 50%, rgb(56,127,149) 54%, rgb(19,47,37) 100%);
                    }

    /* nav */
    div#colorbar {
        position: absolute;
        height: 30px;
        width: 910px;
        top: 0;
        margin: 0 auto;
        z-index: 1;
        box-shadow: none;
        background-color: transparent !important;
        background-repeat: no-repeat;
    }
}


/* iPhone 6 */
@media all and (max-width: 640px) {
    .Desktop {
        display: none !important;
    }

    .Mobile {
        display: block !important;
    }

    html, body {
        overflow-x: hidden;
    }

    header {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 0 auto;
        background: #414141;
    }

        header #innerheader {
            height: 50px;
            width: 100%;
        }

            header #innerheader #menuContainer {
                width: 50px;
                height: 50px;
                cursor: pointer;
                background: #808080;
            }

            header #innerheader #logoContainer {
                position: absolute;
                width: 205px;
                height: 50px;
                left: 50px;
                background: #EAEAEA;
            }

                header #innerheader #logoContainer a,
                header #innerheader #logoContainer a img {
                    display: block;
                    height: 100%;
                    width: 100%;
                    padding: 0;
                }

            header #innerheader .CalendarContainer {
                width: 100%;
                height: 50px;
                left: 255px;
                bottom: auto;
                background: #313332;
                color: #EAEAEA;
            }

                header #innerheader .CalendarContainer a {
                    display: block;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    margin: 0 auto;
                    padding-bottom: 21px;
                    font-size: 24pt;
                    color: #EAEAEA;
                }

                header #innerheader .CalendarContainer img {
                    position: relative;
                    float: left;
                }

                header #innerheader .CalendarContainer span {
                    position: relative;
                }

            header #innerheader .covid19 {
                width: 244px;
                top: 70px;
                margin-left: calc(50% - 122px);
                z-index: 2;
            }

    .menu-trigger span, .menu-trigger span:before, .menu-trigger span:after {
        cursor: pointer;
        height: 4px;
        width: 25px;
        top: 16px;
        left: 11px;
        background: #414141;
        position: absolute;
        display: block;
        content: '';
    }

        .menu-trigger span:before {
            top: 7.5px;
            left: 0;
        }

        .menu-trigger span:after {
            left: 0;
        }

        .menu-trigger span, .menu-trigger span:before, .menu-trigger span:after {
            transition: all 500ms ease-out;
        }

    .menu-trigger.active span {
        top: 22.5px;
        left: 18px;
        transform: rotate(90deg);
    }

    /*.menu-trigger.active span:before {
            top: 7.5px;
        }

        .menu-trigger.active span:after {
            top: -7.5px;
        }*/

    body {
        width: 100%;
        height: 450px;
    }

    .Page.Page-Slots .Slots_Wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    .Page.Page-Slots #headerResources {
        position: relative;
        clear: both;
    }

    .Page.Page-Slots .h2Left.TextResource {
        margin: 30px 0 0 0;
    }

    .Page.Page-Slots #bodyResources .leftSpaceText.TextResource {
        margin: 30px 0 0 0;
    }

    footer ul {
        padding: 0;
    }

        footer ul.ContactInformation {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

            footer ul.ContactInformation li {
                float: none;
                display: inline-block;
            }

        footer ul.FooterNavigation {
            width: 300px;
            margin: 10px 40px;
        }

        footer ul li {
            display: inline-block;
            text-align: center;
        }

    footer p {
        margin: 0;
        text-align: center;
    }

    footer #bingoball {
        display: none;
    }

    footer #contentContainer {
        height: 100%;
        width: 100%;
        left: auto;
        padding: 10px 0;
        overflow: hidden;
    }

    footer #innerfooter {
        width: 100%;
        padding-top: 0;
        line-height: 12pt;
        overflow: hidden;
    }

    footer #contentContainer #logos {
        width: 106px;
        margin: 16px auto;
        overflow: hidden;
    }

        footer #contentContainer #logos #whale {
            width: 57px;
            height: 40px;
            margin-right: 20px;
            float: left;
        }

        footer #contentContainer #logos #facebook {
            width: 25px;
            height: 25px;
            float: left;
        }

    footer #copyrightWrapper {
        left: auto;
        position: relative;
    }

    .ftEnvironment {
        left: auto;
    }

    ul.Mainnav {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #919191;
    }

        ul.Mainnav li::before {
            position: absolute;
            left: 10px;
            z-index: -1;
            color: rgba(0,0,0,0.2);
            line-height: 3.5;
        }

        ul.Mainnav li {
            border-right: none;
            background-image: url('images/Mobile_NavigationRightArrow.png');
            background-position: 95% 22px;
            background-repeat: no-repeat;
            background-size: 10px 20px;
        }

            ul.Mainnav li > a {
                padding-left: 50px;
            }

                ul.Mainnav li > a:hover {
                    color: #fff;
                    background: #414141;
                }

            ul.Mainnav li > a {
                display: block;
                min-width: 320px;
                width: 100%;
                height: 70px;
                line-height: 70px;
                outline: none;
                font-size: 16pt;
            }

                ul.Mainnav li > a.Selected {
                    width: auto;
                    min-width: 0;
                    background: #414141;
                    border-bottom: 3px solid #F4B213;
                }

            ul.Mainnav li.Mainnav-slots a {
                border-radius: 0;
            }

                ul.Mainnav li.Mainnav-slots a.Selected,
                ul.Mainnav li.Mainnav-slots a:hover {
                    border-bottom: 3px solid #ed1c24;
                }

            ul.Mainnav li.Mainnav-bingo a.Selected,
            ul.Mainnav li.Mainnav-bingo a:hover {
                border-bottom: 3px solid #2E1B2A;
            }

            ul.Mainnav li.Mainnav-oneclub a.Selected,
            ul.Mainnav li.Mainnav-oneclub a:hover {
                border-bottom: 3px solid #36112b;
            }

            ul.Mainnav li.Mainnav-promotions a.Selected,
            ul.Mainnav li.Mainnav-promotions a:hover {
                border-bottom: 3px solid #f4b213;
            }

            ul.Mainnav li.Mainnav-bingobar a.Selected,
            ul.Mainnav li.Mainnav-bingobar a:hover {
                border-bottom: 3px solid #0094E0;
            }

            ul.Mainnav li.Mainnav-deli a {
                border-radius: 0;
            }

                ul.Mainnav li.Mainnav-deli a.Selected,
                ul.Mainnav li.Mainnav-deli a:hover {
                    border-bottom: 3px solid #1e859e;
                }

    div.scroller,
    div.scroller-inner {
        max-width: 640px;
        width: auto;
    }

    div.Page {
        min-height: 400px;
        padding-top: 0;
    }

        div.Page.Index #headerResources {
            left: 0;
            height: auto;
        }

        div.Page.Index #bodyResources {
            display: none;
        }

        div.Page .MediaResource img,
        div.Page:not(.Index) .HeaderImage img,
        .PromoItem a img {
            float: none;
        }

    .HeaderImage,
    .HeaderImage img {
        width: 100%;
        height: auto;
    }

    .HeaderPDF {
        padding-left: 30px;
    }

    #headerResources {
        width: 100%;
        padding-right: 0;
        overflow: hidden;
    }

        #headerResources .HeaderImage {
            padding: 0;
            float: none;
        }

    #bodyResources {
        width: 90%;
        margin: 30px 5%;
    }

    .TextResource {
        width: 100%;
    }

    /* IE Specific */
    .lte9 div.Page {
        position: relative;
        top: 450px;
        background: #3D002C;
    }

    .lte9 footer {
        margin-top: 450px;
    }

        .lte9 footer #contentContainer {
            left: auto;
        }

    /* ONEClub page */
    div.Page.Page-ONEClub .MembershipBenefits {
        width: 375px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
    }

        div.Page.Page-ONEClub .MembershipBenefits ul {
            margin: 10px;
            width: 375px;
        }

        div.Page.Page-ONEClub .MembershipBenefits div.TextHeader,
        div.Page.Page-ONEClub .MembershipBenefits div.Text {
            width: 200px;
        }

        div.Page.Page-ONEClub .MembershipBenefits div.Tier1Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier1 {
            margin-left: calc(100%-375px);
        }

        div.Page.Page-ONEClub .MembershipBenefits div.Tier1Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier2Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier3Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier1,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier2,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier3 {
            width: 45px;
        }

            div.Page.Page-ONEClub .MembershipBenefits div.Tier1Header span:first-of-type,
            div.Page.Page-ONEClub .MembershipBenefits div.Tier2Header span:first-of-type,
            div.Page.Page-ONEClub .MembershipBenefits div.Tier3Header span:first-of-type {
                display: none;
            }

        div.Page.Page-ONEClub .MembershipBenefits ul li img {
            height: 1px;
            width: 355px;
            margin: 0 auto;
        }
    /* Promotions page */
    div.Page.Page-Promotions {
        width: auto;
        padding: 30px;
    }

    div.Page.Page-Promotions .PromotionResource {
        width: 100%;
        min-height: 0;
        padding-bottom: 30px;
    }

    div.Page.Page-Promotions .PromotionResource .PromotionImage {
        width: 90px;
        height: 90px;
    }

    div.Page.Page-Promotions .PromotionResource .PromotionImage img {
        width: 100%;
        height: 100%;
    }

    div.Page.Page-Promotions .PromotionResource .PromotionText {
        height: auto;
        min-height: 0;
        width: 100%;
        margin-left: 0;
    }

    div.Page.Page-Promotions .PromotionResource .PromotionText h2,
    div.Page.Page-Promotions .PromotionResource .PromotionText h2 + p {
        margin: 0;
    }

    div.Page.Page-Promotions .PromotionResource .PromotionText p.Description {
        margin-top: 0;
        clear: both;
    }

    p.Description {
        transition: margin .4s;
        margin-left: 0px;
    }

    /* Deli page */
    .TextResource.DeliMenu {
        float: left;
    }

    /* Events page */
    div.Page.Page-Events {
        position: relative;
        top: 8px;
    }

        div.Page.Page-Events #bodyResources {
            display: none;
        }

        div.Page.Page-Events h1 {
            display: none;
        }

    div#colorbar {
        position: absolute;
        top: 0;
        margin: 0 auto;
        height: 8px;
        width: 100%;
        box-shadow: 0 5px 10px 0;
        background-image: none !important;
        color: initial;
        z-index: 1;
    }

    #slotsInnerMenu ul {
        width: 339px !important;
        height: 52px !important;
        margin: 0 0 0 0% !important;
    }
}

@media all and (max-width: 480px) {
    .menu-trigger span {
        top: 15px;
    }

    div.Page.Page-ONEClub .MembershipBenefits {
        width: 270px;
    }

        div.Page.Page-ONEClub .MembershipBenefits ul {
            width: 250px;
        }

        div.Page.Page-ONEClub .MembershipBenefits div.Text {
            width: 155px;
        }

        div.Page.Page-ONEClub .MembershipBenefits div.TextHeader {
            width: 155px;
            line-height: 14pt;
        }

        div.Page.Page-ONEClub .MembershipBenefits ul li img {
            width: 250px;
        }

        div.Page.Page-ONEClub .MembershipBenefits div.Tier1Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier2Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier3Header,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier1,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier2,
        div.Page.Page-ONEClub .MembershipBenefits div.Tier3 {
            width: 25px;
        }

    #slotsInnerMenu ul {
        width: 339px !important;
        height: 52px !important;
        margin: 0 0 0 0% !important;
    }
}

@media all and (max-width: 415px) {
    .Page.Page-Slots .Slots_Wrapper {
        max-width: 350px;
        width: 100%;
        padding: 0;
    }
    
    .Page.Page-Slots .Slots_Wrapper .Slot {
        float: none;
        width: 200px;
        margin: 0 auto;
    }

    .Page.Page-Slots .Slots_Wrapper .Slot img {
        width: 200px;
        margin: 0 auto;
    }
}


@media all and (max-width: 375px) {
    html, body {
        overflow: auto;
    }

    header #innerheader #menuContainer {
        z-index: 2;
    }

    header #innerheader #logoContainer {
        z-index: 1;
    }

        header #innerheader #logoContainer img {
            position: absolute;
            left: -25px;
        }

    header #innerheader .CalendarContainer {
        left: 205px;
        z-index: 2;
    }

    div.Page.Page-ONEClub .MembershipBenefits {
        margin-left: 0;
        margin-right: 0;
    }

    #slotsInnerMenu ul {
        width: 339px !important;
        height: 52px !important;
        margin: 0 0 0 0% !important;
    }
}
