div#ageWrapper {
    overflow-y: scroll;
    max-height: 100vh;
}
#ageWrapper {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9000;
 background-color: rgba(32,23,19,.7);
 transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out;
}

#ageWrapper.ageUnknown {
 visibility: visible;
 opacity: 1;
}
.age_section{    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    vertical-align: middle;}
#agePopUp {
    background-color: #000;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    border: 9px solid #000;
    min-height: 2000px;
    width: 100%;
    height: auto;
    position: absolute;
    color: #fff;
}
#agePopUp h1{font-size: 48px; font-weight: 600; color: red;display: flex;
    justify-content: center;
    vertical-align: middle;    margin-bottom: 20px;
    margin-top: 20px;}
#agePopUp h1 span{margin: 0 10px;
    color: #000;
    font-weight: 900;
    text-transform: uppercase;}
    #agePopUp p{margin-bottom: 10px;
    font-weight: 600;}
#agePopUp #ageOkay {
 background-color: black;
    color: white;
    padding: 15px 25px;
    display: inline-block;
    margin: 10px 15px;
    font-size: 24px;
    font-weight: bolder;
}
#agePopUp #ageOkay:hover{background-color: red;}
.age_section div#agePopUp p {
    text-align: left;
}
.age_section div#agePopUp p.para_bold {
    font-weight: 700;
    font-size: 13px !important;
    text-align: justify;
}
.age_section div#agePopUp p.top_para, .age_section div#agePopUp p.date_section {
    font-weight: 500;
    font-size: 14px !important;
    text-align: justify;
}
.content_warning_section {
    border: 1px solid;
    padding: 20px;
    margin-bottom: 20px;
}
.age_section div#agePopUp ul {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
}
.age_section div#agePopUp ul li {
    list-style-type: circle;
    font-size: 14px;
    text-align: justify;
}
div#agePopUp h2 {
    padding-bottom: 20px;
        font-size: 18px;
}
#agePopUp #ageOkay {
    background-color: #09b83e !important;
}
#agePopUp #ageOkay:hover {
    background-color: #09b83e;
}
.age_section div#agePopUp p.top_para a, a.terms_link {
    color: #fff;    text-decoration: underline;
}
#agePopUp #ageBad
{
    color: white;
    padding: 15px 25px;
    display: inline-block;
    margin: 10px 15px;
    font-size: 24px;
    font-weight: bolder;
    background: transparent;
    border: 1px solid;
}
#ageWrapper img.logo_custom_warning {
        width: 10%;    margin-bottom: 10px;
}


@media(max-width: 767px){
  #agePopUp h1{font-size: 34px; margin-top: -15px;}
  #agePopUp a{    margin-bottom: 10px; display: flex;  justify-content: center;}
   #agePopUp {
        min-height: 1000px;
    }
div#agePopUp h2 {
    padding-bottom: 10px;
    font-size: 10px;
}
#agePopUp {
    padding: 25px;
}
#agePopUp #ageOkay, #agePopUp #ageBad {
    font-size: 16px;
}
.age_section div#agePopUp p.top_para a {
    color: #fff;
    display: inline;
}
.age_section div#agePopUp p.para_bold {
    font-weight: 700;
    font-size: 11px !important;
    text-align: justify;
}
.age_section div#agePopUp p.top_para.second {
    margin-top: -20px;
}
#ageWrapper img.logo_custom_warning {
    width: 30%;   margin-top: -20px;margin-bottom: 0px;
}
.age_section div#agePopUp p.top_para a, a.terms_link {
    color: #fff;
    display: inline !important;
}
.age_section div#agePopUp ul li {
    list-style-type: circle;
    font-size: 11px;
    text-align: justify;
}
.age_section div#agePopUp p.top_para, .age_section div#agePopUp p.date_section {
    font-weight: 500;
    font-size: 11px !important;
    text-align: justify;
}

}

@media screen and (orientation: landscape) and (max-width:1024px){
    #ageWrapper{overflow-y: scroll;max-height: 100vh;}
}

@media screen and (orientation: portrait) and (max-width:1024px){
    #ageWrapper{overflow-y: scroll;max-height: 100vh;}
}