* {margin: 0; padding: 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/age-verification-back.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 h1 {position: relative; font-size: 50px; font-weight: 400; text-transform: capitalize; padding-bottom: 20px; margin-bottom: 30px;}

#ageVerification .wrapper .logo h1:before {width: 100px; height: 6px; border-radius: 6px; background: rgba(255, 240, 0, 0.5); left: 50%; bottom: 0; transform: translateX(-50%); position: absolute; content: "";}
#ageVerification .wrapper .logo h1:after {width: 40px; height: 12px; border-radius: 6px; background: #fff000; left: 50%; bottom: -3px; transform: translateX(-50%); position: absolute; content: "";}

#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);}
}

@media only screen and (min-width: 0px) and (max-width: 575px) {
    #ageVerification .wrapper {padding: 20px;}
    #ageVerification .wrapper h1 {font-size: 25px;}
}

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