@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');


/* -------------------------------------------------------------------------- */
/* global
/* -------------------------------------------------------------------------- */

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

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

body,
p { font-family: "ClarendonURW-Reg"; }

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

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





/* -------------------------------------------------------------------------- */
/* mobile-only, so hide on desktop
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px)
{
  .mobile-only,
  .nav-mobile,
  .mobile-menu-modal,
  .hero-mobile,
  .flower-mobile,
  .visit-mobile,
  .footer-mobile,
  .footer-midres__row { display: none; }
}





/* -------------------------------------------------------------------------- */
/* variables
/* -------------------------------------------------------------------------- */

:root {
  --page-container-width: 1440px; /* works out to 1920 because of the 20px padding on each side */
  
  --orange: #FF5A35;
  --orange-faded: #FFB295;
  --yellow: #E2E734;
  --teal: #70DFC0;
  --bg-light-color: #E5E1CB;

  --box-shadow: 8px 8px 0px #000000;

  --footer-border-style: 2px solid #f8f7f1; 
}





/* -------------------------------------------------------------------------- */
/* fonts
/* -------------------------------------------------------------------------- */


.issue__text { font-family: "ClarendonURW-Reg"; font-weight: bold; font-size: 32px; letter-spacing: .5px;  }



.strain__percent-number { font-size: 24px; font-family: "AlternateGothicPro-No2"; color: black; }




.where__individual-province {  font-family: "PalmerLakePrint-Regular"; font-size: 40px; color: var(--orange); line-height: .7; }








/* -------------------------------------------------------------------------- */
/* reusable pieces
/* -------------------------------------------------------------------------- */

.heading { font-size: 38px; font-weight: bold; margin-bottom: .3em; font-family: "Futura-ExtBol"; }

.paragraph { font-size: 20px; line-height: 1.4; font-family: "ClarendonURW-Reg"; letter-spacing: -0.7px; margin-bottom: .5em; }

/* buttons */

.button { display: inline-block; } /* this is the a tag, needed as a wrapper to prevent jitter when this buttom moves */

.button__content { display: inline-block; min-width: 234px; background-color: var(--orange); border: 3px solid black; color: white; padding: 16px 16px 26px; /* needs extra bottom padding because the font sits "low" in its line-height */ text-align: center;  box-shadow: var(--box-shadow); font-family: "PalmerLakePrint-Regular"; font-size: 50px; letter-spacing: .5px; line-height: .5; }

.button__content--hero { min-width: 320px; }

.button__content--flagship { min-width: 260px; }

.button__content--disabled { background-color: var(--orange-faded); box-shadow: none; cursor: default; }

/* hover over buttons, move the button__content a bit (sink it into its dropshadow) */
.button:not(.button--disabled):hover .button__content { animation: buttonhovered .1s forwards; }
.button:not(.button--disabled):active .button__content { background: #C1320E; }

/*.button--disabled:hover { cursor: default; }*/

@keyframes buttonhovered
{
  to { box-shadow: none; transform: translate(8px, 8px); }
}

.clickable:hover { cursor: pointer; }


.no-wrap { white-space: nowrap; }



/* -------------------------------------------------------------------------- */
/* body
/* -------------------------------------------------------------------------- */

body { position: relative; background: url(/img/bg-dark.jpg?v=4) top center repeat black; padding: 30px; }





/* -------------------------------------------------------------------------- */
/* the sticky borders that "follow" you down the page
/* -------------------------------------------------------------------------- */

.sticky-border { left: -30px; /* to counter the body's 30px border (so that this still touches the left and right of the browser) */ height: 30px; width: calc(100% + 30px); /* to counter the body's 30px border (so that this still touches the left and right of the browser) */ position: fixed; background: url(/img/bg-dark.jpg?v=3); z-index: 10; }

.sticky-border--top { top: 0; }

.sticky-border--bottom { bottom: 0; }







/* -------------------------------------------------------------------------- */
/* page container
/* -------------------------------------------------------------------------- */

.page-container { margin: 0 auto; max-width: var(--page-container-width); }







/* -------------------------------------------------------------------------- */
/* header (including mobile header)
/* -------------------------------------------------------------------------- */


.header { margin-bottom: 26px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; }

.header__left { flex: 1; display: flex; justify-content: left; align-items: center; borders:solid 1px red; }
.header__middle { flex: 0 1; display: flex; justify-content: center; align-items: center; borders:solid 1px red; }
.header__right { flex: 1; display: flex; justify-content: flex-end; align-items: center; borders:solid 1px red; padding-bottom: 10px; /* makes it appear to be vertically-centered better */ }

.header__social-icon { flex: 0 0 27px; margin-right: 10px; }
.header__ppp-container { flex: 0 1; margin-left: 20px; borders:solid 1px red; padding-bottom: 8px; /* makes it appear to be vertically-centered better */ }

.header__sign-up { font-family: "PalmerLakePrint-Regular"; font-size: 34px; letter-spacing: 0.5px; line-height: .5em; color: white; }
.header__sign-up-newsletter { color: #e2e735; }
.header__ppp-image { min-width: 210px; }
.header__pass { color: #d5dd23; -webkit-text-stroke: 0; }
.header__paragraph { margin-bottom: 40px; font-size: 24px; }

.header__social-icon-image { max-width: 100%; }

.header__bzam { width: 206px; }
.header__bzam-image {  }

.header__link { font-family: "PalmerLakePrint-Regular"; font-size: 42px; letter-spacing: 0.5px; line-height: .4em; color: white; }

.header-mobile { display: none; }

@media only screen and (max-width: 991px)
{
  .header { display: none; }
  
  .header-mobile { display: flex; flex-flow: row wrap; }

  .header-mobile__top { flex: 0 0 100%; padding: 10px 20px 0px; display: flex; justify-content: center; }
  .header-mobile__bottom { flex: 0 0 100%; padding: 6px 20px 20px; display: flex; justify-content: space-between; align-items: flex-end; }

  /* __top */
  .header-mobile__bzam { flex: 0 0 200px; }

  /* __bottom */
  .header-mobile__left { flex: 0 0 60%; display: flex; justify-content: flex-start; align-items: flex-end; }
  .header-mobile__right { flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; }

  /* __left */  
  .header-mobile__ppp-container {  }
  .header-mobile__sign-up { font-family: "PalmerLakePrint-Regular"; font-size: 34px; letter-spacing: 0.5px; line-height: .5em; color: white; margin-bottom: 3px; }
  .header-mobile__sign-up-newsletter { color: var(--orange); }
  .header-mobile__ppp-image { width: 200px; }

  /* __right */
  .header-mobile__link { font-family: "PalmerLakePrint-Regular"; font-size: 42px; letter-spacing: 0.5px; line-height: .65em; /* this sets its bottom-alignment correctly */ color: white; }
}

/* we've lost the 30px top spacer now */
@media only screen and (max-width: 768px)
{
  .header-mobile__top { padding: 30px 20px 10px; }

  .header-mobile__bzam { flex: 0 0 160px; }
}

@media only screen and (max-width: 600px)
{
  .header-mobile__bzam { flex: 0 0 140px; }
}

@media only screen and (max-width: 420px)
{
  .header-mobile__bzam { flex: 0 0 120px; }
  
  .header-mobile__sign-up { font-size: 28px;  }
  .header-mobile__ppp-image { width: 160px; }
  .header-mobile__link { font-size: 34px; line-height: .75em; /* this sets its bottom-alignment correctly */ }
}

@media only screen and (max-width: 360px)
{
  .header-mobile__sign-up { font-size: 26px;  }
  .header-mobile__ppp-image { width: 144px; }
  .header-mobile__link { font-size: 30px; line-height: .85em; /* this sets its bottom-alignment correctly */ }

}






/* -------------------------------------------------------------------------- */
/* new "banner" section above the hero
/* -------------------------------------------------------------------------- */

.banner { background: url('/img/banner-bg.jpg') repeat top center / 740px; text-align: center; padding: 4px 30px 18px; font-family: "PalmerLakePrint-Regular"; font-size: 50px; letter-spacing: 0.5px; line-height: .5em; color: black; }

.banner__orange-text { color: var(--orange); }
.banner__hours-br { display: none; }
.banner__hours-slash { color: #ffffff; }



@media only screen and (max-width: 1100px)
{
  .banner__br { display: inline; }
}

@media only screen and (min-width: 769px) and (max-width: 860px)
{
  .banner { font-size: 42px; }
}

@media only screen and (max-width: 768px)
{
  .banner { font-size: 40px; padding-bottom: 14px; /* padding-bottom needs to shrink to keep it vertically-centered */ }
}

@media only screen and (max-width: 650px)
{
  .banner__hours-slash--2 { display: none; }
  .banner__hours-br--2 { display: inline; }
}

@media only screen and (max-width: 510px)
{
  .banner__hours-slash--1 { display: none; }
  .banner__hours-br--1 { display: inline; }

  .banner__hours-slash--2 { display: inline; }
  .banner__hours-br--2 { display: none; }
}

@media only screen and (max-width: 480px)
{
  .banner { /*font-size: 34px;*/ }
}

@media only screen and (max-width: 400px)
{
  .banner__br { display: none; }
}

@media only screen and (max-width: 360px)
{
  .banner__hours-slash--2 { display: none; }
  .banner__hours-br--2 { display: inline; }
}




/* -------------------------------------------------------------------------- */
/* hero
/* -------------------------------------------------------------------------- */



@media only screen and (max-width: 600px)
{
  #nav-mobile { padding-top: 20px; }
  body:not(.age-gate-page) .bzam-logo { width: 120px; }

  .hero { margin-top: 20px; }
}

@media only screen and (max-width: 600px)
{
  #nav-mobile { padding-top: 14px; }
  .hamburger { top: 20px; }
}


.hero { margin-bottom: 40px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; }


.hero__inner { margin: 0 auto; width: calc(100%); height: 0; padding: 0; color: #000; text-align: center; font-family: 'Arial', sans-serif; font-size: 72px; line-height: 1.1; display: flex; flex-flow: column nowrap; }

/* old hero__bubble css: position: absolute; width: calc(100%); bottom: 0; display: flex; justify-content: center; */

.hero__bubble-inner { /*flex: 0 0 59%;*/ height: 194px; background: url(/img/hero__bubble.svg) no-repeat center top; padding: 2.4% 2% 40px; text-align: center; }

.hero__bubble-text { font-family: "PalmerLakePrint-Regular"; font-size: 62px; letter-spacing: 0.5px; line-height: .65; }
.hero__bubble-text--small { margin-top: 8px; font-size: 42px; }

.hero__bubble-text-fancy { font-family: "PalmerLakeScript-Regular"; color: var(--orange); letter-spacing: 1.5px; }
.hero__bubble-text-coloured { color: var(--orange); }

.hero__button { max-width: 320px; margin-left: auto; margin-right: auto; }


.hero__pin { margin: 40px auto 0; display: block; width: 120px;  }
.hero__pin-image { width: 100%; animation: heropin 1s ease-in-out infinite; }

@keyframes heropin
{
  0%   { transform: translateY(-20px); }
  50%  { transform: translateY(0px); }
  100% { transform: translateY(-20px); }
}


@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  /*.hero { height: calc(129vw - 80px); }*/ /* hero bg image is 129% taller than it is wide, and now that it takes the full width, we can set its height based on vw */
  /*.hero__bubble-text { font-size: 2.9vw; }*/
}

@media only screen and (max-width: 1340px)
{
  /*.hero__bubble-inner { height: 174px; }
  .hero__bubble-text { font-size: 38px; }*/
  .hero__pin { width: 100px; }
}
@media only screen and (max-width: 1240px)
{
  .hero__bubble-inner { height: 154px; }
  .hero__bubble-text { font-size: 48px; }
  .hero__bubble-text--small { margin-top: 0; font-size: 40px; }
  .hero__pin { width: 90px; }
}
@media only screen and (max-width: 1140px)
{
  .hero__bubble-inner { height: 154px; }
  .hero__bubble-text { font-size: 48px; }
  .hero__bubble-text--small { margin-top: 0; font-size: 40px; }
  .hero__pin { width: 60px; }
}
@media only screen and (max-width: 1040px)
{
  .hero__bubble-inner { height: 118px; padding-top: 2.8%; }
  .hero__bubble-text { font-size: 38px; line-height: 0.6em; }
  .hero__bubble-text--small { margin-top: 0; font-size: 34px; }
  .hero__pin { width: 60px; }
}
@media only screen and (max-width: 940px)
{
  /* move GET DIRECTIONS below the pin so everything fits */
  /*.hero__button { order: 1; }*/
  /*.hero__bubble-text { font-size: 38px; line-height: 0.6em; }
  .hero__bubble-text--small { margin-top: 0; font-size: 34px; }
  .hero__pin { width: 60px; }*/
}



.hero__map-bg { width: 100%; }


.hero__lottie { position: absolute; width: 300px; height: 300px; top: 444px; left: 50%; margin-left: -150px; margin-top: -150px; }
.hero__lottie:hover { cursor: pointer; }

/* tooltip */
.ui-tooltip,
.arrow:after {
  background: black;
  border: none !important;
  /*border: 1px solid white;*/
}
.ui-tooltip {
  padding: 14px 20px !important;
  color: white;
  border-radius: 0 !important;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  box-shadow: none !important;
  transform: translate(40px);
  background: rgb(37, 44, 62) !important;
  color: white !important;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  /*box-shadow: 6px 5px 9px -9px black;*/
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}




.hero__OLDOLDOLD { position: relative; width: 100%; height: calc(var(--page-container-width) * 1.29); background: url(/img/hero__bg.jpg?v=3) no-repeat center top; background-size: cover; display: flex; flex-flow: row wrap; justify-content: flex-end; }


.hero__OLDOLDOLD__headings { flex: 0 0 76%; margin-top: 93px; margin-right: 42px; }

.hero__OLDOLDOLD__the-moment {  }
.hero__OLDOLDOLD__to-exponentially { width: 52.3%; margin-left: 14%; margin-top: 30px; }


.hero__OLDOLDOLD__bubble { position: absolute; width: calc(100%); bottom: 0; display: flex; justify-content: center; } /* can't flex this because it's absolutely positioned instead (can flex its contents though) */

.hero__OLDOLDOLD__bubble-inner { flex: 0 0 59%; background: url(/img/hero__bubble.svg) no-repeat center top; padding: 1.8% 2% 50px; heights: 158px; text-align: center; }

.hero__OLDOLDOLD__bubble-text { font-family: "PalmerLakePrint-Regular"; font-size: 44px; line-height: .65; }
.hero__OLDOLDOLD__bubble-text-fancy { font-family: "PalmerLakeScript-Regular"; color: var(--orange); }
.hero__OLDOLDOLD__bubble-text-coloured { color: var(--orange); }


@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  .hero__OLDOLDOLD { height: calc(129vw - 80px); } /* hero bg image is 129% taller than it is wide, and now that it takes the full width, we can set its height based on vw */
  .hero__OLDOLDOLD__bubble-text { font-size: 2.9vw; }
}





/* -------------------------------------------------------------------------- */
/* main content
/* -------------------------------------------------------------------------- */

.main-content { margin-top: 40px; background: url(/img/bg-light.jpg?v=4) center top repeat; }
.main-content--last { padding-bottom: 66px; }

/* this is needed so we can have double-bgs */
.main-content-inner { background: url(/img/bg-hand.png?v=1) center 90%/cover repeat; padding: 0 50px 32px; }


@media only screen and (max-width: 600px)
{
  .main-content-inner { padding: 0 20px 32px; }
}




/* -------------------------------------------------------------------------- */
/* mail
/* -------------------------------------------------------------------------- */

.mail { margin-tops: -16px; }

.mail__top { transform: translateY(-6px); height: 200px; borders:solid 1px red; background: url(/img/mail__line.svg) no-repeat center center/contain; display: flex; justify-content: flex-end; }
.mail__bottom { transform: translateY(-10px); display: flex; justify-content: center; }

.mail__lottie-container { transform: translateY(-12px); flex: 0 0 500px; margin-right: 60px; borders:solid 1px red; height: 240px; display: flex; align-items: center; }
.mail__lottie-left { flex: 0 0 52%; padding-top: 12px; }
.mail__lottie-right { flex: 0 0 60%; transform: translateX(-72px); } /* these two add up to more than 100% but it's OK because this doesn't wrap */

.mail__left-spacer { flex: 0 0 3%; borders:solid 1px blue; }
.mail__image-container { flex: 0 0 58.5%; borders:solid 1px red; }
.mail__content-container { flex: 1; padding: 0 10px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; borders:solid 1px red; }
.mail__right-spacer { flex: 0 0 3%; borders:solid 1px blue; }

.mail__image { width: 100%; }

.mail__heading { margin: 0 0 30px; text-align: center; font-family: "Futura-ExtBol"; font-size: 34px; }

@media only screen and (max-width: 991px)
{
  .mail {  }

  .mail__top { background-image: url(/img/mobile/mail__line.png); justify-content: center; }
  .mail__bottom { flex-flow: row wrap; }

  .mail__lottie-container { flex: 0 0 80%; max-width: 460px; height: 220px; margin-right: 0; }
  .mail__lottie-left {  }
  .mail__lottie-right {  } /* these two add up to more than 100% but it's OK because this doesn't wrap */

  .mail__left-spacer { display: none; }
  .mail__image-container { flex: 0 0 100%; margin-bottom: 30px; }
  .mail__content-container { flex: 0 0 100%; }
  .mail__right-spacer { display: none; }

  .mail__image {  }

  .mail__heading {  }
}
@media only screen and (max-width: 600px)
{
  .mail__top { height: 33vw; }
  .mail__lottie-container { flex: 0 0 80%; height: 34vw; margin-right: 0; transform: translateX(3vw); /* keep it relatively centered despite the negative translateX below */ } 

  .mail__lottie-right { transform: translateX(-10vw); /* so the two lotties overlap */ } 

}




/* -------------------------------------------------------------------------- */
/* puff (puff puff pass)
/* -------------------------------------------------------------------------- */

/* remember! if you edit this section you're also editing the puff-puff-pass page too */

.puff-container { position: relative; z-index: 2; padding-top: 1px; padding-bottom: 1px; background: url(/img/bg-light.jpg?v=4) center top repeat; }

.puff { position: relative; z-index: 2; /* "position" is necessary to make z-index work */ margin: 30px; display: flex; flex-flow: row wrap; justify-content: space-between; borders: solid 1px red; }

/* top border */
.puff__border-top { flex: 0 0 100%; height: 3px; display: flex; align-items: center; }
.puff__border-top-left { flex: 0 0 3%; height: 3px; background: url(/img/puff__border-horizontal.png) repeat-x; }
.puff__border-top-middle { flex: 0 0 42px; margin: 0 10px; height: 42px; }
.puff__border-top-right { flex: 1; height: 3px; background: url(/img/puff__border-horizontal.png) repeat-x; }
.puff__scissors { max-width: 42px; }

/* content grid (everything between top and bottom border) */
.puff__content-grid { flex: 0 0 100%; display: flex; flex-flow: row wrap; justify-content: space-between; }

/* border left and right */
.puff__border-left,
.puff__border-right { flex: 0 0 3px; background: url(/img/puff__border-vertical.png) repeat-y; }


.puff__content-container { flex: 1; padding: 18px 10% 18px 10%; borders: solid 1px red; /*display: flex; flex-flow: row wrap; justify-content: space-between;*/ /* hidden on jan-06-2022 because we're using this for dislaimer instead */ }

.puff__text-and-button { flex: 0 0 32%; }

.puff__sign-up { margin: 16px 0 16px; font-family: "PalmerLakePrint-Regular"; font-size: 62px; letter-spacing: 0.5px; line-height: 0.5em; }
body.user-is-on-mac .puff__sign-up { margin-bottom: 26px !important; }
.puff__ppp { margin-bottom: 24px; font-family: "Futura-ExtBol"; font-size: 94px; color: #d5dd23; line-height: 0.85; -webkit-text-stroke: 4px black; }
.puff__pass { color: #f05d3b; }
.puff__paragraph { margin-bottom: 40px; font-size: 24px; }

.puff__image-container { flex: 0 0 63%; margin-top: 24px; border: 3px solid #000; background: url(/img/puff__image-container-bg.jpg) no-repeat center center/cover; box-shadow: var(--box-shadow); padding: 84px; display: flex; align-items: center; justify-content: center; }

.puff__lottie { flex: 0 0 100%; }

/* bottom border */
.puff__border-bottom { flex: 0 0 100%; height: 3px; display: flex; align-items: center; }
.puff__border-bottom-left { flex: 0 0 46.2%; height: 3px; background: url(/img/puff__border-horizontal.png) repeat-x; }
.puff__border-bottom-middle { flex: 1; margin: 0 20px; height: 40px; display: flex; align-items: center; }
.puff__border-bottom-right { flex: 1; height: 3px; background: url(/img/puff__border-horizontal.png) repeat-x; }
.puff__border-bottom-full-width { flex: 1; height: 3px; background: url(/img/puff__border-horizontal.png) repeat-x; }
.puff__we-may { font-family: "PalmerLakePrint-Regular"; font-size: 38px; letter-spacing: -0.5px; transform: translateY(-5px); /* doesn't center vertically otherwise because this text sites "low" in its line-height */ text-align: center; line-height: .75em; margin-bottom: .6em; }
.puff__we-may--highlighted { background-color: #e2e735; padding: 0 5px 10px;  }
.puff__we-may--last { margin-bottom: 0; }



/* hide the mobile stuff by default */
.puff__ppp--mobile { display: none; }
.puff__border-bottom-middle--mobile { display: none; }

@media only screen and (max-width: 1518px)
{
  /* center the "WE MAY OR MAY NOT... text now */
  .puff__border-bottom-left { flex: 1; }
  .puff__border-bottom-right { flex: 1; }
}

@media only screen and (max-width: 1200px)
{
  .puff__image-container { padding: 30px; }
}

@media only screen and (max-width: 991px)
{
  /*.puff { margin-top: 126px; }
  
  .puff__content-container { padding-bottom: 40px; }

  .puff__text-and-button { flex: 0 0 100%; order: 1; }
  .puff__image-container { flex: 0 0 100%; }
  
  .puff__sign-up { margin-top: 26px; margin-bottom: 6px; }
  
  .puff__ppp--desktop { display: none; } 
  .puff__ppp--mobile { display: block; font-size: 13.3vw; -webkit-text-stroke: 2px #000000; } 

  .puff__paragraph { margin-bottom: 30px; }*/
}

@media only screen and (max-width: 768px)
{
  .puff__sign-up { margin-top: 20px; font-size: 54px; }


  /* "WE MAY OR MAY NOT..." switch to mobile element, which allows line-breaks */
  .puff__border-bottom-middle--desktop { display: none; }
  .puff__border-bottom-middle--mobile { display: block; text-align: center; flex: 0 0 50vw; margin: 0 10px; }

  /*.puff__we-may { text-align: center; font-size: 32px; line-height: 0.6em; }*/
}

@media only screen and (max-width: 600px)
{
  /* shrink scissors */
  .puff__border-top-left { flex-basis: 9%; }
  .puff__border-top-middle { flex-basis: 36px; height: 36px; margin: 0 10px; }

  /* fixed left/right padding now (not vw based or it gets too skinny) */
  .puff__content-container { padding-left: 18px; padding-right: 14px; }

  .puff__sign-up { margin-top: 20px; font-size: 9vw; }
}

@media only screen and (max-width: 400px)
{
  .puff__sign-up { margin-top: 20px; font-size: 32px; }
  body.user-is-on-mac .puff__sign-up { margin-bottom: 18px !important; }

  .puff__ppp--mobile { font-size: 13vw; }
}






/* -------------------------------------------------------------------------- */
/* inhale (inhale to activate)
/* -------------------------------------------------------------------------- */

.inhale { margin: 255px auto 40px; }

.inhale__lottie { margin: 0 auto; max-width: 1168px; }
.inhale__heading {  margin-top: -45px; margin-bottom: 24px; position: relative; z-index: 2; /* position needed for z-index to work */ text-align: center; font-family: "Futura-ExtBol"; font-size: 34px; }
.inhale__disclaimer { text-align: center; font-size: 13px; z-index: 2; }

@media only screen and (max-width: 991px)
{
  .inhale { margin-top: 126px; }
  
  .inhale__heading { margin-top: -20px; }
}

@media only screen and (max-width: 600px)
{
  .inhale__lottie { width: 100%; /*margin-left: -10%;*/ }
}


/* -------------------------------------------------------------------------- */
/* open (open for you)
/* -------------------------------------------------------------------------- */

.open { margin-top: 215px; margin-bottom: 215px; display: flex; flex-flow: row wrap; justify-content: space-between; borders:solid 1px red; }

.open__lottie-container { position: relative; z-index: 2; flex: 0 0 36.5%; borders:solid 1px red; }
.open__image-container { position: relative; z-index: 1; flex: 1; position: relative; borders:solid 1px red; display: flex; flex-flow: row wrap; justify-content: flex-end; }

/*.open__lottie { width: 122%; margin: 14px 0 96px; } */ /* old, when we used <lottie> tags  */
.open__lottie { width: 148%; margin: 74px 0 42px; }

.open__image { box-shadow: 8px 0px 0px #000000; }

.open__image-left { flex: 0 0 calc(100% - 8px); overflow: hidden; background: url(/img/open__image.png) no-repeat bottom right/contain; }
.open__image-right { flex: 0 0 8px; borders:solid 1px red; height: calc(100% - 8px); transform: translateY(8px); background: #000; }


.open__hours { position: absolute; bottom: 25px; right: 25px; border: 3px solid black; padding: 0 12px 11px; font-family: "PalmerLakePrint-Regular"; background: white; font-size: 45px; line-height: 20px; box-shadow: 4px 4px 0px #000000; }
.open__hours--1 { bottom: 82px; }
.open__hours--2 { bottom: calc(82px - 46px); }
.open__hours--3 { bottom: calc(82px - (46px * 2)); }

.open__hours--mobile { display: none; }


/* simulates the bottom dropshadow; must be done this way because this is an angled image, so box-shadow won't work */
.open__image-shadow-bottom { flex: 0 0 calc(82% - 4px); height: 8px; background: #000; }



.open__image--mobile-only { display: none; }

@media only screen and (max-width: 1500px)
{
  .open__lottie { margin: 45px 0 45px; }
}
@media only screen and (max-width: 1140px)
{
  .open__lottie { margin: 37px 0 37px; }
}
@media only screen and (max-width: 1023px)
{
  .open__lottie { margin: 27px 0 27px; }
}

/* stack things vertically */
@media only screen and (max-width: 991px)
{
  .open { margin-top: 50px; margin-bottom: 30px; }

  .open__lottie-container, 
  .open__image-container { flex: 0 0 100%; }
  
  .open__lottie { width: 100%; margin: 70px 0 42px; }


  .open__image--mobile-only { display: block; /* so it vertical-aligns bottom (this is an imag but no benefit to inline) */ max-width: 100%; border: 3px solid #000; }

  .open__hours { bottom: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; /* undo the old positioning so we can top-center */ width: 254px; top: -18px; text-align: center; }
  .open__hours--1,
  .open__hours--2,
  .open__hours--3 { display: none; }

  .open__hours--mobile { display: block; width: clamp(254px, 90%, 480px); line-height: 24px; font-size: 40px; }

  .open__hours-br { display: none; }

  /* the image is a rectangle now so the simulated-dropshadow width is different */
  .open__image-shadow-bottom { flex: 0 0 calc(100% - 8px); }
}
@media only screen and (max-width: 800px)
{
  .open__lottie { margin: 60px 0 42px; }
}
@media only screen and (max-width:  768px)
{
  .open__image-right { flex-basis: 4px; height: calc(100% - 4px); transform: translateY(4px); /* this simulates box-shadow and we're now at 4px */ }
  .open__image-shadow-bottom { height: 4px; }
}
@media only screen and (max-width: 640px)
{
  .open__hours--mobile { font-size: 36px; }
}
@media only screen and (max-width: 600px)
{
  .open__lottie { margin: 30px 0 32px; }
}

@media only screen and (max-width: 530px)
{
  .open__hours-slash--2 { display: none; }
  .open__hours-br--2 { display: inline; }
}
@media only screen and (max-width: 420px)
{
  .open__hours--mobile { width: 180px; }
  .open__hours-slash--1 { display: none; }
  .open__hours-br--1 { display: inline; }
}

@media only screen and (max-width: 340px)
{
  .open__hours { /*font-size: 38px; width: 219px;*/ }
  .open__hours--mobile { width: 180px; }
}




/* -------------------------------------------------------------------------- */
/* contact (we opened a store...) */
/* -------------------------------------------------------------------------- */

.contact { margin-top: 200px; padding: 0 0 80px; color: #ffffff; font-size: 18px; }

.contact__heading { margin-bottom: 70px; text-align: center; font-family: "Futura-ExtBol"; font-size: 34px; color: #1e1e1e; }

.contact__form { margin-top: 30px; }

.contact__row { margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; borders:solid 1px red; }

.contact__col-left,
.contact__col-right { flex: 0 0 48%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; borders:solid 1px red; }

.contact__col-right--join-and-submit { flex-flow: row wrap; padding-top: 20px; }

.contact__join-container { flex-direction: row; padding: 24px 24px 24px 0; flex: 1; display: flex; align-items: center; }

.contact__input:not([type="checkbox"]),
.contact__textarea { width: 100%; background-color: rgba(0, 0, 0, 0.1); padding: 15px 20px; font-family: "Arial", sans-serif; font-size: 20px; line-height: 1.2; }

.contact__checkbox { flex: 0 0 24px; width: 24px; height: 24px; margin: 0 12px 0 0; }
.contact__label { font-family: "Arial", sans-serif; font-size: 22px; color: #1e1e1e; }

.contact__submit { flex: 0 1; } /* "TALK TO US" */






@media only screen and (max-width: 1100px)
{
  .contact { padding-top: 80px; padding-bottom: 80px; }
}

@media only screen and (max-width: 880px)
{
  .contact h2 br { display: none; }
}



/* single column */
@media only screen and (max-width: 600px)
{
  .contact { padding-left: 20px; padding-right: 20px; }
  .contact {  font-size: 20px; }
  
  .contact__form { margin-top: 10px; }
  
  .contact__form .flex { padding: 0 20px; }

  .contact__form .flex .left,
  .contact__form .flex .right { flex: 0 0 100%; }

  .contact__form .flex .left input { margin-bottom: 20px; }

  .contact__form .talk-to-us { padding-top: 40px; }
}





/* -------------------------------------------------------------------------- */
/* dotted divider (scissors and line)
/* -------------------------------------------------------------------------- */


.dotted-divider { margin-bottom: 40px; flex: 0 0 100%; height: 3px; display: flex; align-items: center; }
.dotted-divider__left { flex: 0 0 45px; margin-right: 5px; height: 40px; }
.dotted-divider__right { flex: 1; height: 3px; background: url(/img/dotted-divider__line.png) repeat-x; }
.dotted-divider__scissors { max-width: 50px; }

@media only screen and (max-width: 991px)
{
  .dotted-divider { padding: 20px 0 40px; background: url(/img/dotted-divider__scissors.svg?v=1) 22px 34px/38px no-repeat; margin-bottom: 0; }
  .dotted-divider__left { flex-basis: 30px; height: 25px; }
  .dotted-divider__scissors { max-width: 30px; }
}


/*.dotted-divider { background: url(/img/dotted-divider__scissors.svg?v=1) left/38px no-repeat; padding: 50px 0; }

.dotted-divider__line { margin-left: 48px; width: calc(100% - 48px); height: 2px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='4%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); /* this dotted bg is from: https://kovart.github.io/dashed-border-generator/ */ /*}*/





/* -------------------------------------------------------------------------- */
/* footer
/* -------------------------------------------------------------------------- */

.footer { border: 1px solid #1e1e1e; }

/* fonts */
.footer__heading, 
.footer__paragraph { font-size: 16.5px; letter-spacing: .5px; color: #1e1e1e; }
body.user-is-on-mac .footer__heading,
body.user-is-on-mac .footer__paragraph { letter-spacing: 0; }

.footer__heading { font-family: "KorolevRoughCompressed-Bold"; line-height: 1.1; margin-bottom: 0; }
.footer__heading--social-media { margin-bottom: 2px; }

.footer__paragraph { font-family: "KorolevRoughCompressed-Light"; line-height: 1.1; text-transform: uppercase; margin-bottom: 6px; }
.footer__paragraph--bold { font-weight: bold; }

.footer__link { color: #1e1e1e; }
.footer__link--available { color: var(--orange); font-weight: bold; }


/* rows */
.footer__row { borders:solid 1px red; display: flex; flex-flow: row wrap; align-items: flex-start; }


/* columns */
.footer__col { borders:solid 1px red; }
.footer__col--bzam { flex: 0 0 280px; }
.footer__col--privacy-and-terms { flex: 0 0 28%; padding: 8px 0 0 0; transform: translateX(-40px); }
.footer__col--social-media { flex: 1; padding: 8px 25px 2px 0; display: flex; flex-flow: row nowrap; }
/*body.user-is-on-mac .footer__col--social-media { padding-right: 15px; }*/


/* in the columns */
.footer__bzam { width: 78%; margin: -1px 0 -6px -2px; /* this weirdness is needed to prevent any blank space round this image (so this image "touches" [actually overlaps] the borders */ }


/* "AVAILABLE ON..." and social media icons section */
.footer__available-left { flex: 0 0 30%; margin-right: 6%; }
.footer__available-right { flex: 1; }
.footer__instagram { width: 100%; margin-right: 4%; }
.footer__facebook { width: 92%; }


.footer__social-media-left { flex: 0 1 100%; padding-right: 4px; }
.footer__social-media-right { flex: 1 0 262px; display: flex; justify-content: flex-end; }

.footer__instagram,
.footer__facebook { width: 120px; max-height: 52px; }


/* sits below the footer, only used on mid-width layouts */
.subfooter { display: none; }

.footer-mobile { display: none; }


/* at this width we use a lot of position: absolute (instead of flex) so we can properly center the AVAILABLE FOR INTERACTIONS part (because that's nearly impossible to do with these flexes because the BZAM one must be "too wide" for it to properly fit which means we use translateX(-4%) and blah; so re-did this at this width using absolute instead of flexes */
@media only screen and (min-width: 992px) and (max-width: 1420px)
{
  .footer__row { position: relative; }
  
  .footer__col--privacy-and-terms { display: none; }
  
  .footer__col--social-media { position: absolute; width: 100%; left: 0; right: 0; padding-right: 10px; }
  
  .footer__social-media-left { position: absolute; width: 500px; left: 0; right: 0; margin: auto; }
  .footer__social-media-right { position: absolute; width: 280px; right: 25px; margin: auto; }

/*  .footer__social-media-left { flex: 1; }
  .footer__social-media-right { flex: 0 0 256px; }
*/
  .footer__social-media-left { /*display: flex; flex-flow: column wrap; justify-content: center; text-align: center; padding: 0 66px;*/ }

  .footer__social-media-left p { flex: 1; text-align: center; }
  .footer__social-media-left br { display: none; }



  .footer__link--email { /*margin-left: 20px;*/ }

  .subfooter { display: flex; text-align: center; font-weight: bold; line-height: 1.3; margin-top: 20px; }
  .subfooter__paragraph { flex: 0 0 100%; font-family: "KorolevRoughCompressed-Light"; text-transform: uppercase; margin-bottom: 6px; font-size: 18px; font-weight: 400; }
}

@media only screen and (max-width: 1200px)
{
  .footer__social-media-left { padding: 0; }

}

@media only screen and (max-width: 1120px)
{
  .footer__instagram,
  .footer__facebook { width: 90px; margin-top: 8px; }
}

@media only screen and (max-width: 991px)
{

  .footer { display: none; }

  .footer-mobile,
  .footer-mobile__top,
  .footer-mobile__bottom { display: flex; flex-flow: row wrap; borders:solid 1px red; flex: 0 0 100%; }

  /* for some inexplicable reason, this must be done like this, because if it's display flex then the BZAM logo isn't 100% wide but ONLY on Mac */
  .footer-mobile__middle { display: block; width: 100%; }
  
  .footer-mobile {  }
  
  /* rows */
  .footer-mobile__top { justify-content: space-between; align-items: center; margin-bottom: 30px; text-align: center; line-height: 1.3; }
  .footer-mobile__middle { text-align: center; margin-bottom: 20px; }
  .footer-mobile__bottom { text-align: center; font-weight: bold; line-height: 1.3; }
  
  /* __top cols */
  .footer-mobile__instagram { flex: 0 0 31%; borders:solid 1px red; }
  .footer-mobile__available { flex: 1; borders:solid 1px red; }
  .footer-mobile__facebook { flex: 0 0 31%; borders:solid 1px red; }
  
  /* __ top content */
  .footer-mobile__instagram-image { width: 100%; max-height: 86px; }
  
  .footer-mobile__heading { flex: 0 0 100%; font-family: "KorolevRoughCompressed-Bold"; margin-bottom: 0; font-size: 18px; }
  .footer-mobile__paragraph { flex: 0 0 100%; font-family: "KorolevRoughCompressed-Light"; text-transform: uppercase; margin-bottom: 6px; font-size: 18px; font-weight: bold; padding: 0 4px; }
  .footer-mobile__link { color: var(--orange); }

  .footer-mobile__facebook-image { width: 100%; max-height: 86px; }
  
  /* __middle */
  .footer-mobile__bzam-image { flex: 0 0 100%; width: 100%; }
  
  /* __bottom */
  .footer__paragraph {  }

}

@media only screen and (max-width: 600px)
{
  /* __top cols */
  .footer-mobile__instagram { flex: 0 0 30%; }
  .footer-mobile__available {  }
  .footer-mobile__facebook { flex: 0 0 30%; }
}

@media only screen and (max-width: 500px)
{
  /* rows */
  .footer-mobile__top,
  .footer-mobile__bottom { line-height: 1.2; }
  
  /* __top cols */
  .footer-mobile__instagram { flex: 0 0 25%; }
  .footer-mobile__facebook { flex: 0 0 25%; }
}

@media only screen and (max-width: 420px)
{
  /* text */
  .footer-mobile__heading,
  .footer-mobile__paragraph { font-size: 16px; }
}

@media only screen and (max-width: 420px)
{
  /* text */
  .footer-mobile__heading,
  .footer-mobile__paragraph { font-size: 14px; }
}






























































/* -------------------------------------------------------------------------- */
/* issue - "ISSUE 01 / VOL . 1"
/* -------------------------------------------------------------------------- */

.issue { text-align: center; }
.issue__text { margin-top: 40px; font-family: "ClarendonURW-Reg"; font-weight: bold; font-size: 32px; letter-spacing: .5px; }
.issue__underline { margin: 22px auto 0; width: 200px; border-bottom: 3px solid black; }




/* -------------------------------------------------------------------------- */
/* strain card (everything from the image down to DIRECTIONS FOR PEAK)
/* -------------------------------------------------------------------------- */

.strain { max-width: 980px; margin: 94px auto 0; }

.strain__row { display: flex; flex-flow: row wrap; margin-bottom: 18px; }
.strain__row--1 { margin-bottom: 6px; }
.strain__row--2 { justify-content: space-between; }
.strain__row--3 { border: 3px solid black; justify-content: space-between; }
.strain__row--4 { margin-top: 114px; display: flex; justify-content: space-between; align-items: center; } /* only shows ONCE on the page, after the last strain */


/* these are the bits that sit on the left */
/* TODO: turn this into strain__col--image etc, like the footer, because that's more logical */
.strain__col--image,
.strain__col--where { flex: 0 0 34%; margin-right: 36px; }

/* these are the bits that sit on the right */
.strain__col--description,
.strain__col--flavour-and-terpenes { flex: 1; }

.strain__col--flavour-and-terpenes { display: flex; justify-content: flex-start; padding: 6px 0; }

.strain__image { width: 100%; box-shadow: 8px 8px 0px #000000; }

.strain__name { margin-top: -16px; /* so strain name top-aligns with image*/ margin-bottom: 22px; margin-left: -4px; /* so it left-aligns with the highlight below */ font-family: "Futura-ExtBol"; font-size: 94px; line-height: .84; }
.strain__name--nut-butter     { color: var(--orange); }
.strain__name--sour-og-cheese { color: #7db29e; }
.strain__name--magic-melon    { color: #e2667e; }
.strain__name--banana-daze    { color: #d73439; }

.strain__highlight { display: flex; align-items: center; }

.strain__highlight-text { display: inline-block; margin-right: 14px; padding: 4px 11px 9px; font-family: "Futura-ExtBol"; font-size: 33px; line-height: 1; }
.strain__highlight-text--nut-butter     { background-color: var(--yellow); }
.strain__highlight-text--sour-og-cheese { background-color: #d06129; }
.strain__highlight-text--magic-melon    { background-color: #86b34e; }
.strain__highlight-text--banana-daze    { background-color: #c9b63d; }

.strain__highlight-image { height: 44px; }

.strain__paragraph { margin-top: 30px; }


/* "WHERE TO BUY" row */

.strain__flavour,
.strain__terpenes { flex: 0 0 30%; borders:solid 1px red; }
.strain__col--where { display: flex; align-items: center; justify-content: center; } /* so we can center the "WHERE TO BUY" button */
.strain__flavour { margin-right: 8%; }
.strain__terpenes { flex: 0 0 40%; } /* extra wide so the "*Terpene result may" text doesn't go to three lines */

.strain__mini-heading { font-family: "AlternateGothicPro-No2"; font-size: 25px; }

.strain__list { margin-top: 4px; font-family: "Futura-ExtBol"; font-size: 32px; font-weight: bold; }


.strain__disclaimer { font-family: "AlternateGothicPro-No2"; font-size: 12px; }
.strain__disclaimer--terpenes { margin-top: 6px; }




/* "TOTAL TERPENE PERCENTAGE" row */

.strain__col--total-terpene { flex: 0 0 19.1%; padding: 18px; display: flex; flex-flow: column; justify-content: center; /* vertically center its contents */ }
.strain__col--terpene-percentages { flex: 0 0 36.3%; border-left: 3px solid black; border-right: 3px solid black; padding: 6px 8px 6px 10px; }
.strain__col--lineage-and-appearance { flex: 1; }


.strain__total-terpene-heading { text-align: center; font-family:"AlternateGothicPro-No2"; font-size: 25px; line-height: 1; margin-bottom: 3px; }
.strain__total-terpene-text { text-align: center; font-family:"AlternateGothicPro-No2"; font-size: 90px; letter-spacing: -4px; }

.strain__percent-wrapper { height: 28px; width: 98%; margin: 3px 0 4px; position: relative; border: 1px solid black; }

.strain__percent-filled { height: 100%; }

.strain__percent-filled--nut-butter-myrcene  { background-color: var(--yellow); width: 95%; }
.strain__percent-filled--nut-butter-limonene { background-color: var(--orange); width: 35%; }
.strain__percent-filled--nut-butter-linalool { background-color: var(--teal); width: 16%; }

.strain__percent-filled--sour-og-cheese-limonene      { background-color: #d06129; width: 74%; }
.strain__percent-filled--sour-og-cheese-caryophyllene { background-color: #7db29e; width: 52%; }
.strain__percent-filled--sour-og-cheese-linalool      { background-color: #bebd47; width: 26%; }

.strain__percent-filled--magic-melon-terpineolene  { background-color: #e2667e; width: 100%; }
.strain__percent-filled--magic-melon-caryophyllene { background-color: #86b34e; width: 100%; }
.strain__percent-filled--magic-melon-myrcene       { background-color: #d4d553; width: 100%; }

.strain__percent-filled--banana-daze-pinene        { background-color: #d73439; width: 100%; }
.strain__percent-filled--banana-daze-caryophyllene { background-color: #d67643; width: 100%; }
.strain__percent-filled--banana-daze-myrcene       { background-color: #c9b63d; width: 100%; }




.strain__percent-number { position: absolute; top: 1px; right: 10px; }

.strain__lineage,
.strain__appearance { padding: 10px 22px; }

.strain__lineage { padding-bottom: 16px; } /* extra space under "MENDOBREATH F2 & THE WHITE" */
.strain__appearance { border-top: 3px solid black; }

.strain__lineage-and-appearance-text { margin-top: 3px; font-family: "Futura-ExtBol"; font-size: 22px; line-height: 1.2;  }






/* "HEADQUARTERED IN" row */

/* grid */
.strain__col--headquartered,
.strain__col--proper, 
.strain__col--inhale,
.strain__col--directions { text-align: center; padding: 0 4px; }

.strain__col--headquartered { flex: 0 0 17%; padding-left: 0; }
.strain__col--proper  { flex: 0 0 26%; }
.strain__col--inhale { flex: 0 0 31%; display: flex; justify-content: space-around; align-items: center; }
.strain__col--directions { flex: 0 0 24%; padding-right: 0; }

/* just the sun/inhale/hand section */
.strain__sun { height: 38px; }
.strain__inhale { height: 17px; }
.strain__hand { height: 38px; margin-top: -6px; }





/* "DRIED FLOWER" */

.flower { position: relative; display: flex; background: url(/img/flower__bg.jpg?v=2) center top/cover no-repeat; padding: 108px; height: calc(var(--page-container-width) * .42); }


.flower__content { position: absolute; left: 51.2%; width: 520px; }

.flower__heading {  }

.flower__paragraph { margin-bottom: 30px; }

.flower__button { margin: 6px 0 0 92px; }


.flower__left,
.flower__right { flex: 0 0 50% }

.flower__left img,
.flower__right img { width: 100%; }





/* "SEE HOW THE MAGIC HAPPENS" */

.magic { position: absolute; width: 160px; right: 98px; margin-top: -14px; }

.magic__see-how { width: 97%; margin-bottom: 14px; border: none; box-shadow: none; }

.magic__button { display: inline-block; margin-bottom: 46px; }

.magic__image { width: 100%; max-width: 152px; border: 2px solid black; box-shadow: var(--box-shadow); cursor: pointer; }

.magic__text { display: inline-block; width: 100%; margin: 8px 0 0; text-align: center; font-family: "PalmerLakePrint-Regular"; font-size: 45px; line-height: .5; color: black; }

/* hover effects */
.magic__button:hover .magic__image { animation: buttonhovered .1s forwards; }
.magic__button:hover .magic__text { color: var(--orange); }


/* "OUR MISSION" and "CULTIVATION & PROCESSING" */

.mission-and-cultivation { padding: 98px 106px 92px 106px; background: url(/img/bg-light.jpg?v=4) center top repeat; }

.about { display: flex; flex-flow: row wrap; width: 76%; margin-bottom: 16px; }
.about--cultivation { margin-bottom: 16px; }

.about__left { flex: 0 0 52%; margin-right: 20px; }
.about__left--mission { margin-bottom: 20px; } /* prevent taco image (that sits below this button) from getting too close when we responsive-ise */
.about__left--cultivation { flex: 0 0 48%; margin-right: 0; }

.about__right { flex: 1; }
.about__right--cultivation { flex: 1 0 50%; /* this adds to more than 100% but since we're flexing it's OK */  text-align: right; }


.about__heading { margin-top: 54px; }
.about__heading--cultivation { margin-top: 5%; }

.about__button { margin-top: 24px; }

.about__image { max-width: 100% }
.about__image--cultivation { max-width: 120%; margin-left: -40px; }





/* -------------------------------------------------------------------------- */
/* "WHERE TO BUY"
/* -------------------------------------------------------------------------- */

.where { position: relative; padding: 102px 60px 56px; background: url('/img/where__bg.png?v=1') center top/cover no-repeat; text-align: center; }

.where__heading { max-width: 42%; margin-bottom: 24px; }

.where__paragraph {  }


.where__province { margin: 35px auto; text-align: left; width: 100%; max-width: 65%; }

.where__province-inner { position: relative; flex: 1; color: white; }




/*.province a { color: rgb(156, 29, 100); }*/
/*.province .btn-province-dropdown img { width: 20px; }*/


.where__province-dropdown-trigger { display: block; padding: 6px 26px 12px; background-color: white; border: 3px solid black; font-family: "PalmerLakePrint-Regular"; font-size: 48px; color: var(--orange); cursor: default; /* just for now, while this isn't clickable because it's "COMING SOON" */}

.where__province-dropdown-arrow { width: 102px; height: 72px; background: url(/img/where__province-dropdown-arrow.svg?v=1) center center/29% no-repeat var(--orange); box-shadow: var(--box-shadow); position: absolute; top: 0; right: 0; border: 3px solid black; z-index: 3; }

.where__province-dropdown { display: none; position: absolute; width: calc(100% - 68px); width: 100%; margin-top: 50px; margin-bottom: 20px; top: 0; left: 0; background-color: white; border: 3px solid black; border-top: none; /* so it's always above MM / DD / YYYY even if they're shaking */ z-index: 2; }

.where__individual-province { display: block; padding: 0 26px 8px; }
.where__individual-province:hover { background-color: var(--orange); color: white; }

/*
.where__province-dropdown a[href="#"] { text-decoration: line-through; color: rgba(156, 29, 100, .3); }
*/





/* -------------------------------------------------------------------------- */
/* "Visit Our SECRET HEADQUARTERS"
/* -------------------------------------------------------------------------- */

.visit { position: relative; padding: 98px 60px; background: url(/img/visit__bg.jpg?v=1) center top/cover no-repeat; text-align: center; height: 200px; height: calc(var(--page-container-width) * .4); }

.visit__content { position: absolute; left: 59.3%; width: 32%; }

.visit__heading { margin-bottom: 20px; }

.visit__paragraph { margin-bottom: 30px; }

.visit__address { font-family: "Futura-ExtBol"; font-size: 22px; line-height: 1.4; }

.visit__flagship { position: absolute; bottom: 85px; width: calc(100% - 120px); }




@media only screen and (max-width: 1280px)
{
  .visit { height: 40vw; } /* flower bg image is 40% as tall as wide, and now that it takes the full width, we can set its height based on vw */
}










/* -------------------------------------------------------------------------- */
/* hacks for Mac computers / Apple phone and tablets
/* -------------------------------------------------------------------------- */

body.user-is-on-mac .nav__button { padding: 12px 0 6px; }

body.user-is-on-mac .strain__highlight-text { padding: 9px 11px 2px; } /* on mac, we basically REVERSE the top and bottom padding to make "INDICA 20-26% THC" centered vertically in its highlight, because for some reason, on Windows (in all browsers), this text sits really "high" in its line-height, and on Mac (in all browsers) it does the opposite */

/* desktop-only rules */
@media only screen and (min-width: 769px)
{
  body.user-is-on-mac .strain__name { margin-top: 2px; margin-bottom: 14px; } /* on mac, "Nut Butter" needs to be pushed down to line up vertically with the strain image (opposite of PC which needs it pushed UP a bunch ) */
}










/* -------------------------------------------------------------------------- */
/* our grow page
/* -------------------------------------------------------------------------- */

.grow-container { background: url(/img/bg-light.jpg?v=4) center top repeat; }
.grow-container-inner { position: relative; background: url(/img/bg-hand.png?v=2) center -40px/contain repeat-y; padding: 20px 0 1px; }

.grow { margin: 84px auto 110px; max-width: 970px; padding: 0 30px; }

.grow__heading { text-align: center; letter-spacing: -0.5px; }

.grow__status { margin: 26px auto 68px; display: flex; flex-flow: row wrap; border: 1px solid black; width: 310px; height: 50px; }
.grow__status--indoor { width: 400px; }

.grow__status-left { flex: 0 0 100px; border-right: 1px solid black; display: flex; align-items: center; justify-content: center; }
.grow__status-right { flex: 1; display: flex; align-items: center; justify-content: center; }

.grow__status-left-text { font-family: "AlternateGothicPro-No2"; font-size: 25px; }
.grow__status-right-text { font-size: 14px; letter-spacing: 1px; line-height: 1.4; }

.grow__double-image-container { position: relative; margin-bottom: 18px; }
.grow__single-image-container { position: relative; margin-bottom: 54px; }

.grow__image { max-width: 100%; }

.grow__location { position: absolute; border: 3px solid black; padding: 0 12px 11px; font-family: "PalmerLakePrint-Regular"; background: white; font-size: 45px; line-height: 20px; box-shadow: 4px 4px 0px #000000; }
.grow__location--top-left { top: 25px; left: 25px; }
.grow__location--top-right { top: 25px; right: 25px; }
.grow__location--bottom-left { bottom: 25px; left: 25px; }
.grow__location--bottom-right { bottom: 25px; right: 25px; }

.grow__paragraph { margin-top: 50px; text-align: center; }

/* only used around "PROCESSING HUB", so we can have the "INHALE TO ACTIVATE" bg */
.grow-wrapper-with-bg-inhale { background: url(/img/bg-inhale.png) left 15%/90% no-repeat; }





/* -------------------------------------------------------------------------- */
/* legal modal
/* -------------------------------------------------------------------------- */

.legal-modal { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.9); z-index: 1000; }

.legal-modal.is-showing { display: block; }

.legal-modal__content { position: fixed; left: 50%; margin-left: -600px; top: 10%; width: 90%; max-width: 1200px; height: 80%; background: url(/img/bg-dark.jpg?v=3) top center repeat black; overflow-ys: scroll; z-index: 1001; }

.legal-modal__text { width: 100%; height: 100%; padding: 40px; overflow-y: scroll; }

.modal-close { position: absolute; top: -50px; right: 0; background: url(/img/bg-light.jpg?v=4) center top var(--bg-light-color); width: 42px; height: 42px; border-radiuss: 21px; text-align: center; margin: 0; font-weight: bold; font-size: 22px; display: flex; align-items: center; justify-content: center; }

.modal-close { font-family: "KorolevRoughCompressed-Bold"; font-size: 37px; color: black; } /* todo: bemify this; was too short on time */

.legal-modal__heading,
.legal-modal p,
.legal-modal li { color: white; margin-bottom: 18px; letter-spacing: 1px; } 

.legal-modal__heading { font-family: "AlternateGothicPro-No2"; font-size: 32px; line-height: 1.2; }
.legal-modal p { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; }
.legal-modal li { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
.legal-modal li:last-child { margin-bottom: 18px; } 
.legal-modal strong { font-weight: bold; }
/* above I'm cheating, not using BEM here with this "p" tag, because it'd be SO many <p> tags with class="legal-modal__paragraph  paragraph" otherwise */





/* -------------------------------------------------------------------------- */
/* newsletter modal
/* -------------------------------------------------------------------------- */

.newsletter-modal { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.9); z-index: 999; }

.newsletter-modal.is-showing { display: block; }

/* "x" */
.newsletter-modal__close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radiuss: 21px; text-align: center; margin: 0; font-weight: bold; font-size: 22px; display: flex; align-items: center; justify-content: center; color: #000000; }

.newsletter-modal__close-image { max-width: 100%; }

.newsletter-modal__content { position: fixed; left: 50%; margin-left: -300px; top: 10%; width: 90%; heights: 80%; max-width: 600px; background: url(/img/newsletter-modal__bg.jpg) center center/cover var(--orange); overflow-ys: scroll; z-index: 999; display: flex; flex-flow: column nowrap; }

.newsletter-modal__content-inner { height: 100%; overflow-y: auto; padding-bottom: 40px; } /* needed for scroll-ability when browser is short (vertically) */


.newsletter-modal__panel--form { padding-bottom: 40px; }


/* bubble */
.newsletter-modal__bubble { background: url(/img/newsletter-modal__bubble.jpg) no-repeat center bottom/cover; padding: 23px 2% 52px; text-align: center; }
.newsletter-modal__bubble-text { font-family: "PalmerLakePrint-Regular"; font-size: 40px; letter-spacing: 0.5px; line-height: .65; }





/* -------------------------------------------------------------------------- */
/* newsletter form
/* -------------------------------------------------------------------------- */
/* this is its own block because it's used in two places: on the newsletter modal and on the newsletter page, so note that any changes you make to the code below affects both of those places */

.newsletter-form__form { max-width: 480px; margin: 0 auto; padding: 0 30px; font-family: "PalmerLakePrint-Regular"; font-size: 40px; letter-spacing: 0.5px; line-height: .65; padding-top: 40px; }

/* UNSUBSCRIBE ANYTIME! */
.newsletter-form__unsubscribe { margin: 10px 0 20px; font-family: "PalmerLakePrint-Regular"; font-size: 40px; letter-spacing: 0.5px; line-height: .65; text-align: center; color: #f1efd9; }

/* EMAIL ADDRESS */
.newsletter-form__input { width: 100%; margin-bottom: 20px; letter-spacing: 1px; text-align: center; background-color: #f1efd9; border-radius: 0; border: 3px solid black; text-align: left; padding: 0 14px 10px 14px; font-family: "PalmerLakePrint-Regular"; font-size: 40px; letter-spacing: 0.5px; }
.newsletter-form__input::placeholder { color: black; }

/* province container (for the toggle, dropdown, and each province) */
.newsletter-form__province-container { position: relative; -ms-flex: 1; flex: 1; color: #f1efd9; flex: 0 0 60%; }

/* "--PROVINCE--" toggle (shows province-name after user chooses province) */
.newsletter-form__toggle-province-dropdown { display: flex; justify-content: center; align-items: stretch; background-color: #f1efd9; text-decoration: none; min-height: 59px; color: #000000; border: 3px solid black; text-align: left; }
.newsletter-form__toggle-province-dropdown-left { padding: 14px 20px 24px; flex: 1; line-height: .5; }
.newsletter-form__toggle-province-dropdown-right { flex: 0 1 50px; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; /* this padding is needed to have it appear to be vertically-centered */ background: black; color: #f1efd9; font-family: sans-serif; font-size: 25px; }

/* dropdown with list of provinces */
.newsletter-form__province-dropdown { display: none; position: absolute; width: 100%; margin-top: 56px; margin-bottom: 20px; top: 0; left: 0; background-color: #f1efd9; z-index: 11; /* so it's always visible, above the "bottom border" thing */ border: 3px solid black; border-top: none; text-align: left; }

/* individual provinces */
.newsletter-form__province-item { display: block; padding: 2px 16px 8px; text-decoration: none; line-height: 22px; color: #000000; }
.newsletter-form__province-item--last { margin-bottom: 18px; }
.newsletter-form__province-item:hover { background-color: #f15c3b; color: #f1efd9; }

/* REQUIRED text */
.newsletter-form__required { margin-top: 10px; font-family: "PalmerLakePrint-Regular"; font-size: 40px; letter-spacing: 0.5px; line-height: .65; text-align: left; color: #000000; }


/* checkboxes */
.newsletter-form__checkbox-paragraph { font-family: "ClarendonURW-Reg"; font-size: 14px; line-height: 1.2; margin-bottom: 12px; display: flex; }
.newsletter-form__checkbox-paragraph--error { display: none; text-align: center; background-color: #000000; color: #f1efd9; padding: 8px; }
.newsletter-form__checkbox { width: 16px; height: 16px; flex:  0 0 16px; vertical-align: middle; color: white; margin: 0 8px 0 0; }
.newsletter-form__checkbox-link { color: #000000; text-decoration: underline; }

/* "ACTIVATE" container and button */
.newsletter-form__button-container { text-align: center; margin-top: 20px; }
.newsletter-modal .newsletter-form__button-container { text-align: center; /*margin-top: 20px;*/ } /* this one override doesn't use BEM (two class names); this only affects the modal */
.button__content--newsletter-button { background-color: #d5dd23; color: black; }

/* Success message - only show after successful form completion */
.newsletter-form__success { display: none; font-family: "PalmerLakePrint-Regular"; text-align: center; font-size: 34px; line-height: .6; }


/* -------------------------------------------------------------------------- */
/* contest page (BZAM Pins Official Contest Rules)
/* -------------------------------------------------------------------------- */

.contest { padding: 40px; }

.contest__heading,
.contest p { color: white; margin-bottom: 18px; line-height: 1.2; letter-spacing: 1px; } 
/* above I'm cheating, not using BEM here with this "p" tag, because it'd be SO many <p> tags with class="contest__paragraph  paragraph" otherwise */

.contest__heading { font-family: "AlternateGothicPro-No2"; font-size: 32px; }
.contest p { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; }
.contest strong { font-weight: bold; }






/* -------------------------------------------------------------------------- */
/* basic info block, can be used on multiple pages (for plain-looking FAQ page or Privacy Policy)
/* -------------------------------------------------------------------------- */

/* currently used on Privacy Policy page  */
.basic-info { padding-top: 76px; padding-bottom: 76px; max-width: 1080px; margin-left: auto; margin-right: auto; }

.basic-info__heading { text-align: center; font-family: "Futura-ExtBol"; font-size: 34px; margin-bottom: 40px; }

.basic-info__subheading { font-family: "PalmerLakePrint-Regular"; font-size: 62px; letter-spacing: 0.5px; line-height: .4em; margin-bottom: 22px; }
.basic-info__subheading--special { color: var(--orange); }

.basic-info__paragraph { font-size: 24px; margin-bottom: 4px; }
.basic-info__paragraph--special { color: var(--orange); }


.basic-info__list-item { list-style-type: decimal; margin-left: 20px; margin-bottom: 20px; }

.basic-info__link { color: #000000; text-decoration: underline; }

.basic-info__spacer { height: 34px; }