* {margin: 0; padding: 0;}
#ageVerification.background:after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 0;}
#ageVerification {width: 100%; height: 100vh; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; overflow-y: scroll;}
#ageVerification.blackBackground {background: #000;}
#ageVerification.background {background: url(../images/image-one.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;}
#ageVerification .wrapper {background: rgba(0, 0, 0, 0.5); padding: 40px; width: 100%; max-width: 500px; margin: 15px; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#ageVerification .wrapper .logo {width: 100%; margin-bottom: 20px;}
#ageVerification .wrapper .logo img {max-width: 260px;}
#ageVerification .wrapper .logo h1 {position: relative; font-size: 50px; font-weight: 400; text-transform: capitalize; margin: 0; padding: 0;}
/* #ageVerification .wrapper .logo h1:before {width: 100px; height: 6px; border-radius: 6px; background: rgba(255, 240, 0, 0.5); left: 50%; bottom: 20px; transform: translateX(-50%); position: absolute; content: "";}
#ageVerification .wrapper .logo h1:after {width: 40px; height: 12px; border-radius: 6px; background: #fff000; left: 50%; bottom: 17px; transform: translateX(-50%); position: absolute; content: "";} */

#ageVerification .wrapper .descriptionTxt {margin-top: -30px;}
#ageVerification .wrapper .descriptionTxt p {margin: 0; padding: 0 0 20px 0; font-size: 13px; text-align: center; color: #fff; line-height: 23px;}

.ageVerifyWrapper {width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.ageVerifyWrapper ul {margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%;}
.ageVerifyWrapper ul li {margin: 0 0 10px 0; padding: 0 15px; display: inline-flex; align-items: center; flex-wrap: wrap;}
.ageVerifyWrapper ul li label {padding: 0;}
.ageVerifyWrapper p input[type="submit"] {background: #fff; border: 2px solid #fff; padding: 10px 20px; border-radius: 3px; font-size: 18px; font-weight: 400; margin-top: 10px; cursor: pointer;}
.ageVerifyWrapper p input[type="submit"]:hover {background: none; color: #fff;}

.ageVerifyWrapper ul.socialLinks {margin: 0; padding: 30px 0 0 0; list-style: none;}
.ageVerifyWrapper ul.socialLinks li a {width: 46px; height: 46px; background: rgba(255, 255, 255, 1); color: #000; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; text-decoration: none; border-radius: 100%; font-size: 24px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
.ageVerifyWrapper ul.socialLinks li a:hover {background: #000; color: #fff;}

#ageVerification .wrapper h1 {font-size: 30px; font-weight: 600; text-align: center; margin: 0; padding: 0; color: #fff; font-family: 'Nunito Sans', sans-serif; text-transform: uppercase;}
#ageVerification .wrapper label {font-size: 16px; font-weight: 600; text-align: center; margin: 0; padding: 10px 0 20px 0; color: #fff000; font-family: 'Nunito Sans', sans-serif; width: 100%; display: block;}
#ageVerification .wrapper .form {margin: 0; padding: 0;}
#ageVerification .wrapper .form ul {margin: 0; padding: 0; list-style: none; margin: 0 -5px; display: flex; align-items: flex-start; flex-wrap: wrap;}
#ageVerification .wrapper .form ul li {margin: 0; padding: 0 5px; display: inline-flex; align-items: flex-start; flex-wrap: wrap; width: calc(33.33334% - 10px);}
#ageVerification .wrapper .form ul li input[type="text"] {width: 100%; background-color: rgba(255, 255, 255, 0.05);  border: 1px solid rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); font-size: 17px; padding: 16px; outline: none; box-sizing: border-box; line-height: 20px; transition: 0.3s ease all;}
#ageVerification .wrapper .form ul li input[type="text"]:focus {background-color: rgba(255, 255, 255, 0.098); border-color: rgba(255, 255, 255, 0.2);}
#ageVerification .wrapper .form input[type="submit"] {background-color: rgba(255, 255, 255, 0.8); padding: 12px; outline: none; cursor: pointer; width: 100%; margin-top: 32px; font-size: 16px; font-weight: 700; line-height: 20px; text-align: center; color: #000; border: none; transition: 0.3s ease;}
#ageVerification .wrapper .form input[type="submit"]:hover {background: #fff000;}
#ageVerification .wrapper p {font-size: 14px; font-weight: 400; text-align: center; margin: 0; padding: 15px 0 0 0; color: #fff; font-family: 'Nunito Sans', sans-serif; width: 100%; display: block;}

.comingSoonWrapper {display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
body.comingSoon {background:#000; overflow: visible;}
.ring {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:250px; height:250px; background:transparent; border:3px solid #3c3c3c; border-radius:50%; text-align:center; line-height:250px; font-family:sans-serif; font-size:20px; color:#fff000; letter-spacing:4px; text-transform:uppercase; text-shadow:0 0 10px #fff000; box-shadow:0 0 20px rgba(0,0,0,.5);}
.ring:before {content:''; position:absolute; top:-3px; left:-3px; width:100%; height:100%; border:3px solid transparent; border-top:3px solid #fff000; border-right:3px solid #fff000; border-radius:50%; animation:animateC 2s linear infinite;}
span {display:block; position:absolute; top:calc(50% - 2px); left:50%; width:50%; height:4px; background:transparent; transform-origin:left; animation:animate 2s linear infinite;}
span:before {content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff000; top:-6px; right:-8px; box-shadow:0 0 20px #fff000;}
  
@keyframes animateC {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes animate {
  0% {transform:rotate(45deg);}
  100% {transform:rotate(405deg);}
}

/**** custom radio button css ****/
.customRadio label {padding: 0 0 0 40px !important; color: #fff !important; font-size: 21px !important; font-weight: 400 !important;     line-height: 26px !important;}
.customRadio input[type="radio"]:checked,
.customRadio input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.customRadio input[type="radio"]:checked + label,
.customRadio input[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
.customRadio input[type="radio"]:checked + label:before {
  border: 2px solid #fff !important;
}
.customRadio input[type="radio"]:checked + label:before,
.customRadio input[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #838383;
    border-radius: 100%;
    background: #000;
}
.customRadio input[type="radio"]:checked + label:after,
.customRadio input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.customRadio input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.customRadio input[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media only screen and (min-width: 0px) and (max-width: 575px) {
    #ageVerification .wrapper {padding: 15px; width: calc(100% - 70px);}
    #ageVerification .wrapper h1 {font-size: 25px;}
    #ageVerification .wrapper .logo img {max-width: 170px;}
    .ageVerifyWrapper ul.socialLinks {padding: 15px 0 0 0;}
    #ageVerification .wrapper .descriptionTxt p {line-height: 20px; margin: -10px 0px 0 0;}
    .ageVerifyWrapper ul.socialLinks {padding: 10px 0 0 0;}
    .ageVerifyWrapper ul.socialLinks li {padding: 0 8px;}
    .ageVerifyWrapper ul.socialLinks li a {width: 40px; height: 40px;}
    #ageVerification.background:after {display: none;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #ageVerification .wrapper {padding: 30px;}
    #ageVerification .wrapper h1 {font-size: 27px;}
}