/* ======================================================
   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;
}

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

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



/* ======================================================
   
   ====================================================== */

/* hidden at first; activated if someone clicks ORDER */
/* if you change the background, change it on the flipbook too */
.container {
  
  max-width: 960px;
  margin: 20px auto;
  
  padding: 0 20px;
  
  /*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: 860px;
  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;  
}

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

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


.tac-and-privacy li {
  list-style-type: disc; 
  margin-left: 20px;
}
  
  
  
  
  
  
  
.age-gate {
  
  margin-top: 60px;
  
  
  /*position: fixed;*/
  /*width: 580px;*/
  /*height: 580px;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*margin-top: -290px;*/
  /*margin-left: -290px;*/
  /*background: url(../images/bg-order-popup.png) #f7f5f1 top left / 100%;*/
}

.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;
  top: 0;
  left: 0;
  background-color: rgb(243, 240, 217);
  border-radius: 0 0 20px 20px;
}

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

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

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


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


.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;
}

.age-gate .verify-and-arrow .btn-verify:hover img.arrow {
  -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;
}

.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 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 {
  width: 370px;
  display: block;
  margin: 160px auto 0;
  
}



@-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 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;
}