/* border box everything (https://www.paulirish.com/2012/box-sizing-border-box-ftw/) */
html { 
  -webkit-box-sizing: border-box; 
          box-sizing: border-box;
}

*,
*:before,
*:after { 
  -webkit-box-sizing: inherit; 
          box-sizing: inherit;
}

body {
  background-color: #f15c3b; /* orange */
  font-family: 'Arial', sans-serif;
}

a { color: #ffffff; text-decoration: underline; }

.container {
  
  max-width: 960px;
  margin: 20px auto;
  
  padding: 0 20px;

}


  
.age-gate {
  
  margin-top: 60px;
  
  /*position: fixed;*/
  /*width: 580px;*/
  /*height: 580px;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*margin-top: -290px;*/
  /*margin-left: -290px;*/
}

.age-gate .age-gate-form {
  
  max-width: 440px;
  margin: 0 auto;
  font-size: 15px;
  
  /*padding: 20px;*/
  /*width: 580px;*/
  /*height: 412px;*/
}

.bzam-logo {
  margin: 60px 0;
  text-align: center;
}

.bzam-logo img {
  width: 100%;
  max-width: 430px;
}


.age-gate p {
  color: white;
  /*font-size: 114%;*/
  /*line-height: 1.4;*/
  text-align: center;
}

.age-gate .province-container a,
input {
  color: #9c9c9c;
  font-weight: bold;
  letter-spacing: 1px;
}

.age-gate p.please-enter {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 auto 12px;
}

.age-gate .province-and-birthdate-container {
  margin-top: 12px;
  text-align: left;
  width: 100%;
  max-width: 360px;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
}


.age-gate .province-and-birthdate-container .province-container {
  position: relative;
      -ms-flex: 1;
          flex: 1;
  /*background-color: #ffffff;*/
  color: white;

  flex: 0 0 60%;
}

.age-gate .province-and-birthdate-container .verify-container { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; background-color: #405b58; color: #ffffff; text-decoration: none; font-weight: bold; letter-spacing: 1px; }


.age-gate .province-and-birthdate-container .province-container #province-dropdown {
  display: none;
  position: absolute;
  width: 100%; 
  margin-top: 47px;
  margin-bottom: 20px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */
}

.province-container .btn-province-dropdown {
  display: flex;
  padding: 16px;
  background-color: #ffffff;
  text-decoration: none;
}

.province-container .btn-province-dropdown .left { flex: 1; }

.province-container .btn-province-dropdown .right { flex: 0 0 10px; text-align: right; }

.birthdate-container { position: relative; }


.province-container .btn-province-dropdown.dropdown-showing {
}

#province-dropdown a {
  display: block;
  padding: 4px 16px;
  text-decoration: none;
}

/* display:none because it's hidden at first because it's already selected */
#province-dropdown a:first-child { 
  /*display: none; */
}

#province-dropdown a:last-child { 
  margin-bottom: 18px;
}

.province-container img {
  position: absolute;
  top: 19px;
  right: 16px;
}

.province-container a {
  /*background-color: #ffffff;*/
  padding: 0 8px;
}

#province-dropdown a:hover {
  /*background-color: #f15c3b;*/
  color: #f15c3b;
}


.birthdate-container { 
  display: flex;
  justify-content: space-between;
  max-width: 360px;
  margin: 20px auto 20px auto;
}

.birthdate-container input {
  width: 30%;
  /*margin: 0 10px;*/
  text-align: center;
  background-color: #ffffff;
  border-radius: 0;
}

.inp-rounded {
  padding: 16px;
  border: none;
  font-size: 15px;
  height: 47px;
}




.age-gate .by-entering-and-remember-me p {
  padding-top: 50px;
  font-size: 13px;
}


.age-gate p.by-entering {
  
  font-size: 13px;
  line-height: 18px;
  padding-bottom: 40px;
}

/*.age-gate p.by-entering a {
  color: rgb(182, 179, 225);
}*/

#remember-me {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}



.rats { font-size: 20px; margin-top: 60px; }














/* hide up/down arrows on <input type="number"> fields - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* hide up/down arrows on <input type="number"> fields - Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input:focus,
textarea:focus {
    outline: none;
}

/* email address input box */
.age-gate #email-input-wrapper { margin: 20px auto 0 auto; max-width: 360px; }
.age-gate #email-input-wrapper input { width: 100%; background-color: #ffffff; }

/* VERIFY --> */
.age-gate .verify-and-arrow {
  text-align: right;
  max-width: 360px;
  margin: 24px auto;
}