/* ======================================================
   Global
   ====================================================== */

/* 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: rgb(181, 35, 114);
}

body.splash-page {
  background-color: rgb(243, 240, 217);
}

body,
p,
input {
  font-family: Bookmania-Regular;
}

a {
  text-decoration: none;
  color: rgb(182, 179, 225);
}

a:active,
a:focus {
  outline: 0;
  -moz-outline-style: none;
}

.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}



/* ======================================================
   Everything else
   ====================================================== */

.container {
  
  max-width: 960px;
  margin: 20px auto;
  
  padding: 0 20px;
  
  /* if we want this as a popup in future: 
  display: none; 
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(97, 82, 63, .85); 
  z-index: 999;*/
}



.tac-and-privacy {
  margin-top: 60px;
  max-width: 1000px; /* this sets a max-width of 960 because theere's padding on this too (20px each side) */
  color: rgb(243, 240, 217);
}

.tac-and-privacy .home img {
  width: 130px;  
}
  
.tac-and-privacy h2 {
  text-align: center;
  font-size: 24px;
  margin: 80px 0 40px;
}

.tac-and-privacy h3 {
  font-size: 18px;
  margin: 26px 0 16px;
}

.tac-and-privacy p,
.tac-and-privacy li {
  line-height: 1.3em;  
  font-size: 15px;
}

.tac-and-privacy p,
.tac-and-privacy ul {
  margin-bottom: 15px;
}

.tac-and-privacy p.no-bottom-margin {
  margin-bottom: 0;
}


.tac-and-privacy ul li {
  list-style-type: disc; 
}

.tac-and-privacy ol li {
  list-style-type: decimal; 
  margin-bottom: 15px;
}

.tac-and-privacy ol li ol li {
  list-style-type: lower-roman; 
  margin-bottom: 2px;
}

.tac-and-privacy li {
  margin-left: 20px;
}
  
.tac-and-privacy a {
  color: rgb(243, 240, 217);
}

.tac-and-privacy strong {
  font-weight: bold;
}
  
  
  
  
  
  
.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;*/
}

.explore-your-ness {
  margin: 60px 0;
  text-align: center;
}

.explore-your-ness img {
  width: 130px;
}


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

.age-gate .province-container a,
input {
  color: rgb(181, 35, 114);
}

.age-gate p.hey-there {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 40px;
  margin: 0 auto 12px;
}

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


.age-gate .province-and-birthdate-container .province-container {
  position: relative;
      -ms-flex: 1;
          flex: 1;
  /*background-color: rgb(243, 240, 217);*/
  color: white;
}

.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: rgb(243, 240, 217);
  border-radius: 0 0 20px 20px;
  z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */
}

.province-container a.btn-province-dropdown {
  display: block;
  padding: 16px;
  border-radius: 20px;
  background-color: rgb(243, 240, 217);
}

.birthdate-container { position: relative; }


.province-container a.btn-province-dropdown.dropdown-showing {
  border-radius: 20px 20px 0 0; /* square off the bottom */
}

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

/* 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: rgb(243, 240, 217);*/
  padding: 0 8px;
  /*border-radius: 30px;*/
}

#province-dropdown a:hover {
  background-color: rgb(212, 209, 192);
}


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

.birthdate-container input {
  width: 30%;
  /*margin: 0 10px;*/
  text-align: center;
  background-color: rgb(243, 240, 217);
}

.birthdate-container input::placeholder {
  color: rgb(181, 35, 114);
}

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

/* 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: rgb(243, 240, 217); }

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

.age-gate .verify-and-arrow .btn-verify img {
  vertical-align: middle;
}

.age-gate .verify-and-arrow .btn-verify img.verify {
  width: 90px;
}

.age-gate .verify-and-arrow .btn-verify img.arrow {
  width: 50px;
}

a:hover img.bounce-right-when-hovered,
a:active img.bounce-right-when-hovered {
  -webkit-animation : bounce_right .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_right .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_right .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_right .15s ease-in-out 0s 2 alternate;
  animation         : bounce_right .15s ease-in-out 0s 2 alternate;
}

a:hover img.bounce-left-when-hovered,
a:active img.bounce-left-when-hovered {
  -webkit-animation : bounce_left .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_left .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_left .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_left .15s ease-in-out 0s 2 alternate;
  animation         : bounce_left .15s ease-in-out 0s 2 alternate;
}

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

.age-gate p.by-entering {
  margin: 28px 0 8px;
  font-size: 13px;
  line-height: 18px;
}

.age-gate p.by-entering-your-email {
  line-height: 18px;
  margin-bottom: 8px;
}

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

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



.age-gate .purchase-alls-well {
  padding: 0 58px;
}

/* retina-fy all the images by making them 50% size */
.age-gate .purchase-alls-well .indigo-etc img {
  height: 35px;
}

.age-gate .purchase-alls-well p:first-child {
  padding-left: 4px;
  margin-bottom: 20px;
}

.age-gate .close-order-popup {
  text-align: right;
  margin-right: 20px;
}

.age-gate .close-order-popup img {
  width: 17px;
}



img.rats {
  max-width: 370px;
  display: block;
  margin: 160px auto 0;
  
}

/* obfuscate / hide email from bots uses this fallback for non-js browsers */
#hide-email-from-bots b { display:none; }


@-webkit-keyframes bounce_right /* Safari and Chrome */ {
  from {
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}
@keyframes bounce_right {
  from {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}


@-webkit-keyframes bounce_left /* Safari and Chrome */ {
  from {
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}
@keyframes bounce_left {
  from {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -webkit-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
}



/* on iphones or any device between 320 and 480px wide (this fires even if we're in landscape mode because it's based on device-width instead of width) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  
  /* prevent the iphone-blowup-text-at-random-on-landcape-mode bug (https://www.sitepoint.com/community/t/iphone-font-size-gets-bigger-on-orientation-chg/19892) */
  body { -webkit-text-size-adjust: none; }
  
  /* bigger fonts if we're on a phone*/
  .inp-rounded,
  .age-gate .age-gate-form {
    font-size: 18px !important;
  }
  
  /* bigger fonts if we're on a phone*/
  .privacy-policy p {
    font-size: 14px !important;
  }
  
}