/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

html, body {
  height: 100%;
}

.age-gate-wrapper {
  height: 100%;
  background-size: cover;
  position: relative;

}

.age-gate-wrapper h1 {
  margin: 0;
  padding: 0;
}

.age-gate {
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.age-gate-form {
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
  background: #fff;
  padding: 50px 20px;

  
}

.age-gate-form ul {
  margin: 0;
}

.age-gate-form label {
  cursor: pointer;
}

.age-gate-form li, #registerform li {
  display: inline-block;
  margin: 0 0 20px;
}

.age-gate-form input, .age-gate-form select,
#registerform li input, #registerform li select {
  text-align: center;
}
.age-gate-form input#dob-day, .age-gate-form input#dob-month, .age-gate-form input#dob-year,
#registerform input#dob-day, #registerform input#dob-month, #registerform input#dob-year {
  max-width: 80px;
}

.age-gate-form select#dob-day, .age-gate-form select#dob-month,
#registerform select#dob-day, #registerform select#dob-month {
  min-width: 60px;
}

.age-gate-form select#dob-year,
#registerform select#dob-year {
  min-width: 80px;
}

.age-gate .error {
  /*background: #c00;*/
  color: #c00;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 20px;

}

.age-gate-wrapper .additional-information {
  font-size: 70%;
  padding-top: 30px;
}

.age-gate-wrapper .additional-information p:last-of-type { margin: 0;}
.age-gate-wrapper .additional-information a {
  text-decoration: underline;
}

.age-gate .error p {
  margin: 0;
}

.age-gate-form button[name="confirm"] {
  margin-bottom: 20px;
}

#registerform legend {
  color: #72777c;
  font-size: 14px;
}

#registerform fieldset {
  border: none;
}

#registerform li label {
  display: block;
}

#registerform select {
  background: #fbfbfb;
  padding: 3px;
  height: 36px;
}

#registerform .terms {
  margin: 2px 6px 16px 0;
  display: block;
}