.agegate{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    background-color:#006939;
    width:100%;
    will-change:transform;
    z-index:1;
    transition:all .45s cubic-bezier(.77,0,.175,1);
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.agegate--enabled{
    display:block;
    overflow:hidden;
    width:100%
}
.agegate p{
    color:#fff
}
.agegate__birthday-groups,.agegate__content,.agegate__inner{
    width:100%;
    height:100%;
}
.agegate__inner{
    position:static;
    padding-bottom:25px;
    overflow-y:scroll;
    height:100%;
    top:0
}
.agegate__show-message{
    display:block;
    width:100%
}
.agegate__logo-container{
    padding:25px 20px 10px;
    text-align:center
}
.agegate__logo-container .logo{
    width:100px;
    height:55px
}
.agegate__instruction{
    margin:30px 10px 25px;
    font-size:20px
}
.agegate__dropdown{
    position:relative
}
.agegate__dropdown .label{
    display:inline-block;
    overflow:hidden;
    padding:0 50px 3px 10px;
    width:100%;
    min-height:45px;
    transition:background-color .2s ease-in-out;
    background-color:#006939;
    color:#fff;
    border-bottom:5px solid #fff;
    font-weight:700;
    letter-spacing:2px;
    z-index:4;
    cursor:pointer
}
.agegate__dropdown .label:after{
    content:"";
    position:absolute;
    top:8px;
    right:10px;
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTS0xLTFoNTgydjQwMkgtMXoiLz48Zz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDUwdjUwSDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTQ3LjI1IDE1bC0yLjA4Ni0yLjA4NkwyNSAzMy4wNzggNC44MzYgMTIuOTE0IDIuNzUgMTUgMjUgMzcuMjV6Ii8+PC9nPjwvc3ZnPg==);
    background-size:20px;
    background-repeat:no-repeat;
    transition:-webkit-transform .6s cubic-bezier(.19,1,.22,1);
    transition:transform .6s cubic-bezier(.19,1,.22,1);
    transition:transform .6s cubic-bezier(.19,1,.22,1),-webkit-transform .6s cubic-bezier(.19,1,.22,1);
    width:20px;
    height:20px
}
.agegate__dropdown .list{
    position:absolute;
    top:100%;
    list-style:none;
    flex-direction:column;
    padding:0;
    height:auto;
    max-height:330px;
    width:100%;
    margin:0 auto;
    background:#006939;
    box-shadow:0 5px 5px 0 rgba(50,50,50,.5);
    overflow-y:scroll;
    overflow-x:hidden;
    opacity:0;
    z-index:3;
    pointer-events:none
}
.agegate__dropdown .list .item{
    padding:15px 10px;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:left;
    transition:background-color .25s linear;
    cursor:pointer;
    pointer-events:none
}
.agegate__dropdown .list .item:first-of-type{
    margin-top:10px
}
.agegate__dropdown .list .item a{
    display:block;
    color:#fff
}
.agegate__dropdown--open .label{
    box-shadow:0 0 5px 0 rgba(50,50,50,.5);
    transition:box-shadow .2s ease-in-out;
    background-color:#01522d!important
}
.agegate__dropdown--open .label:after{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg)
}
.agegate__dropdown--open .list{
    -webkit-animation:fadeInDown .4s cubic-bezier(.39,.575,.565,1) both;
    animation:fadeInDown .4s cubic-bezier(.39,.575,.565,1) both;
    transition:box-shadow .2s ease-in-out!important;
    pointer-events:visible
}
.agegate__dropdown--open .list .item{
    pointer-events:visible!important
}
.agegate__border{
    padding:15px;
    border:5px solid #fff
}
.agegate__border--day,.agegate__border--month{
    width:175px;
    margin:auto
}
.agegate__birthday-group--invalid .agegate__border{
    border-color:#b02c30
}
.agegate__birthday-group--success .agegate__border{
    border-color:#fff
}
.agegate__markets{
    text-align:center;
    padding:15px 15px 0
}
.agegate__markets .market-text,.agegate__markets .welcome-text{
    color:#fff;
    text-align:center;
    padding:0;
    margin-bottom:25px
}
.agegate__markets .market-text-wrapper{
    display:block;
    margin-top:25px
}
.agegate__birthday-groups{
    position:relative;
    overflow:hidden;
    height:250px
}
.agegate__birthday-groups .inner{
    position:absolute;
    z-index:2;
    height:450px;
    width:2000px;
    transition:left .45s cubic-bezier(.77,0,.175,1);
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.agegate__birthday-group{
    float:left;
    margin-top:25px;
    margin-right:50px;
    visibility:hidden;
    text-align:center;
    font-size:0
}
.agegate__birthday-group--year{
    width:308px
}
.agegate__birthday-group--visible{
    visibility:visible
}
.agegate__birthday-group .instruction{
    margin:15px 0;
    opacity:0;
    transition:opacity .15s ease-in-out
}
.agegate__birthday-group .instruction .agegate__birthday-group--current{
    opacity:1
}
.agegate__birthday-group--border{
    display:flex;
    border:5px solid #fff
}
.agegate__date-box{
    display:inline-block;
    width:57px;
    height:81px;
    position:relative;
    background-color:#01522d;
    margin:0 5px;
    transition:border .15s ease-in-out;
    zoom:1;
    color:#fff
}
.agegate__date-box--focus:after{
    content:"";
    position:absolute;
    bottom:10px;
    left:50%;
    width:70%;
    height:5px;
    background:#fff;
    color:#fff;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    -webkit-animation-name:fade-in-out;
    animation-name:fade-in-out;
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    visibility:visible;
    pointer-events:none
}
.agegate__date-box--valid .placeholder{
    display:none
}
.agegate__date-box--valid:after{
    visibility:hidden
}
.agegate__date-box .input,.agegate__date-box .placeholder,.agegate__date-box .value{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1;
    width:57px;
    height:80px;
    line-height:71px;
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.agegate__date-box .placeholder,.agegate__date-box .value{
    font-size:45px;
    font-weight:700
}
.agegate__date-box .input{
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    border:none;
    z-index:3;
    background:transparent;
    color:transparent;
    cursor:none;
    text-align:left;
    font-size:0;
    height:170px;
    -webkit-transform:scale(0);
    transform:scale(0);
    outline:none
}
.agegate__date-box .input:focus{
    text-indent:-9999em
}
.agegate__date-box .placeholder{
    z-index:2
}
.agegate__feedback{
    position:relative;
    bottom:0;
    width:100%;
    margin:0 0 25px;
    text-align:center;
    z-index:1;
    color:#fff
}
.agegate__feedback--show{
    display:block;
    opacity:1
}
.agegate__feedback .message{
    visibility:hidden;
    display:none;
    opacity:0
}
.agegate__feedback .message--show{
    display:block;
    visibility:visible;
    -webkit-animation:fadeInUp .4s cubic-bezier(.39,.575,.565,1) both;
    animation:fadeInUp .4s cubic-bezier(.39,.575,.565,1) both
}
.agegate__terms{
    text-align:left;
    margin-top:25px;
    padding-left:15px;
}
.agegate__terms .link{
    color:#fff;
    text-decoration:underline
}
.agegate__terms .link:visited{
    color:#fff
}
.agegate__checkbox{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 35px
}
.agegate__checkbox .label{
    display:inline-flex;
    align-items:center;
    cursor:pointer
}
.agegate__checkbox .faux{
    display:inline-block;
    width:25px;
    height:25px;
    border:2px solid #fff;
    vertical-align:middle;
    background:transparent;
    background-size:15px;
    background-position:50%;
    background-repeat:no-repeat
}
.agegate__checkbox .text{
    display:inline-block;
    width:80%;
    margin:0;
    line-height:1.2;
    vertical-align:middle;
    padding:0 0 0 15px;
    font-size:12px
}
.agegate__checkbox--invalid .input:not(:checked)+.faux{
    transition:border-color .2s ease-in-out;
    border-color:#b02c30
}
.agegate__checkbox .input{
    display:none
}
.agegate__checkbox .input:checked+.faux{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTS0xLTFoNTgydjQwMkgtMXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAxMWwyLTIgNSA1TDE4IDNsMiAyTDcgMThsLTctN3oiLz48L3N2Zz4=)
}

@media (min-width:768px){
    .agegate__terms{
        text-align:center;
        max-width:77%;
        margin:-9px auto
    }
    .agegate__birthday-groups {
        height: 22vh;
    }
    .agegate__inner{
        position:relative;
        top:0
    }
    .agegate__logo-container{
        padding:50px 20px 70px
    }
    .agegate__instruction{
        font-size:26px;
        margin:30px 10px 40px
    }
    .agegate__dropdown .label:after{
        position:absolute;
        top:10px;
        right:10px
    }
    .agegate__dropdown .list .item:hover{
        background-color:#01522d
    }
    .agegate__border--day,.agegate__border--month{
        width:315px
    }
    .agegate__markets .market-text,.agegate__markets .welcome-text{
        margin-bottom:0
    }
    .agegate__markets .market-text-wrapper{
        display:inline-flex
    }
    .agegate__birthday-groups{
        height:380px
    }
    .agegate__birthday-group{
        margin-top:30px
    }
    .agegate__birthday-group--year{
        width:588px
    }
    .agegate__date-box{
        width:127px;
        height:180px
    }
    .agegate__date-box--focus:after{
        height:12px;
        bottom:20px
    }
    .agegate__date-box .input,.agegate__date-box .placeholder,.agegate__date-box .value{
        width:117px;
        height:170px;
        line-height:170px
    }
    .agegate__date-box .placeholder,.agegate__date-box .value{
        font-size:100px;
        font-weight:700
    }
    .agegate__date-box .input{
        font-size:1px
    }
    .agegate__feedback{
        margin:25px 0
    }
    .agegate__checkbox .text{
        width:100%;
        font-size:16px
    }
}
@media (min-width:992px){
    .agegate__dropdown .label{
        text-align:left
    }
    .agegate__markets{
        padding:15px 0 0
    }
}
@media screen and (min-width:1px) and (max-width:1219px) and (orientation:landscape){
    .agegate__inner{
        position:static
    }
}