/* todo: this whole file needs to be cleaned up and it and age-gate.php need to be BEM-ified */

:root {
  --age-gate-color: #F3F0D8;
}




a:not(.modal-close) { color: color: var(--age-gate-color); text-decoration: underline; }

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

.age-gate {  }

.age-gate,
.age-gate *:not(a) { font-family: "PalmerLakePrint-Regular"; font-size: 38px; color: black; font-weight: 100; }


.age-gate .age-gate-form { max-width: 440px; margin: 0 auto; font-size: 15px; }

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

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


.age-gate p { text-align: center; }

.age-gate .province-container a,
input { letter-spacing: 1px; }

.age-gate p.please-enter { line-height: .8; margin: 0 auto 28px; color: var(--age-gate-color); font-size: 44px; }

.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; 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: #FF5A34; color: black; text-decoration: none; letter-spacing: 1px; padding-bottom: 8px; }


.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: var(--age-gate-color); z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */ }

.province-container .btn-province-dropdown { display: flex; justify-content: center; align-items: center; padding: 6px 20px 14px; background-color: var(--age-gate-color); text-decoration: none; height: 59px; }

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

.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: 2px 16px 8px; text-decoration: none; line-height: 22px; }

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

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

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

.province-container a { padding: 0 8px; }

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


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

.birthdate-container input { width: 27%;  text-align: center; background-color: var(--age-gate-color); border-radius: 0; }

.inp-rounded { padding: 6px 16px 16px; border: none; height: 58px; }




.age-gate .by-entering-and-remember-me p:first-child { padding-top: 50px; padding-bottom: 28px; line-height: 0.4; }

.age-gate .by-entering-and-remember-me label { color: var(--age-gate-color) !important; font-size: 30px; }


.age-gate p.by-entering { line-height: .8; padding-bottom: 40px; color: var(--age-gate-color); font-size: 30px; }



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

.rats { display: none; font-size: 44px !important; margin-top: 60px; color: var(--age-gate-color) !important; }














/* 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: var(--age-gate-color); }

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




@media only screen and (max-width: 500px)
{
  .age-gate,
  .age-gate *:not(a) { font-size: 32px; }
}