@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,
input,
textarea { font-family: "ClarendonURW-Reg"; }

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

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




/* -------------------------------------------------------------------------- */
/* fix for the apple momentum scroll problem
/* -------------------------------------------------------------------------- */
/* from https://greensock.com/forums/topic/24624-scrolltrigger-scrollto-timeline-animation/ */

/* technically this fixes the problem of page jumping to random place after inertia(momentum) scroll stops, but this also means that we can't detect if user is scrolling up/down page in iOS so we can't hide the nav properly 


// this fix causes more problems than it solves: 


html { position: fixed; width: 100%; height: 100%; overflow: hidden; }
body { overflow: auto; position: relative; height: 100%; }
*/
/*
// this fix causes more problems than it solves: 

html, body { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
*/






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


.flower-mobile { display: none; }


@media only screen and (min-width: 769px)
{
  .mobile-only,
  .nav-mobile,
  .mobile-menu-modal,
  .hero-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 #1e1e1e;

  --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: #1e1e1e; }




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








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

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

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

/* 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 #1e1e1e; 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--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; }


/* text rectangle with the dropshadow (caption)*/
.text-rectangle { border: 3px solid #1e1e1e; padding: 0 12px 11px; color: #1e1e1e; font-family: "PalmerLakePrint-Regular"; background: white; font-size: 45px; line-height: 20px; box-shadow: 4px 4px 0px #1e1e1e; }

.text-rectangle__trademark { font-size: 22px; padding-left: 3px; vertical-align: top; } 

/* hello@bzam.com - style the "a" tag that is auto-generated by JS */
.hide-email-from-bots a,
.hide-email-from-bots a:hover,
.hide-email-from-bots a:active,
.hide-email-from-bots a:visited { color: #1e1e1e; text-decoration: underline; }



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

body { position: relative; background: url(/img/bg-dark.jpg?v=4) top center repeat #1e1e1e; 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=4); 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); }






/* -------------------------------------------------------------------------- */
/* the sticky nav and stamp ("AVAILABLE AT") container
/* -------------------------------------------------------------------------- */

.nav-and-stamp { position: fixed; top: 70px; width: 100%; margin: 0 auto; max-width: var(--page-container-width); borders:solid 1px red; padding: 0 40px; z-index: 20; display: flex; flex-flow: row wrap; justify-content: space-between; pointer-events: none; /* so we can click through this emptiness to the buttons below */ align-items: flex-start; /* so that the nav only takes up its required height (not 100% of the height), otherwise the strain cards are sometimes visible behind it */ }



/* ---------------------------------- */
/* nav  */
/* ---------------------------------- */

.nav { flex: 0 0 200px; borders:solid 1px red; pointer-events: auto; /* to counter the "none" that we added to this thing's container (nav-and-stamp) */ position: relative; }

/* buttons (these sit "on top" of the strain cards) */

.nav__buttons { z-index: 20; position: relative; }

.nav__logo { width: 100%; display: block; /* to fix that weird problem of images having a tiny bit of space below */ }
.nav__image { width: 100%; display: block; /* to fix that weird problem of images having a tiny bit of space below */ margin-top: -3px; }

.nav__button { display: block; border: 4px solid #1e1e1e; border-bottom: none; padding: 10px 0; text-align: center; font-family: "Futura-ExtBol"; font-size: 29px; background: url(/img/bg-light.jpg?v=4) top center no-repeat; color: #1e1e1e; }

.nav__button:hover { color: var(--orange); }

.nav__button.is-active:not(.js-is-menu-button) { background: var(--orange); }
.nav__button.is-active:not(.js-is-menu-button):hover { color: #000; cursor: default; }

.nav__button--first { margin-top: -4px; }
.nav__button--last { border-bottom: 4px solid #1e1e1e; }



/* ---------------------------------- */
/* strain cards */
/* ---------------------------------- */

.nav__strain-cards { z-index: 0; position: absolute; top: 0; left: 0; height: 88%; min-heights: 110px; }

.nav__strain-card { top: 0; left: 0; width: 100%; height: 100%; borders: solid 1px red; background: url(/img/bg-light.jpg?v=4) top center no-repeat; z-index: -1; width: 200px; border: 4px solid #1e1e1e; display: flex; flex-flow: column nowrap; overflow: hidden; position: absolute; /* position necessary for z-index to work [z-index added by JS] */ }

.nav__strain-card:hover { cursor: pointer; }


.nav__strain-card-image { max-width: 100%; vertical-align: bottom; }

.nav__strain-card-text { flex: 1; text-align: center; border-top: 4px solid #1e1e1e; display: flex; flex-flow: column nowrap; align-items: space-around; justify-content: center; padding: 10px; user-select: none; /* so people can't highlight this text accidentally when clicking cards and they animate while mouse still held down */ position: relative; }

.nav__strain-card-heading { font-family: "Futura-ExtBol"; font-size: 27px; margin-bottom: 12px; z-index: 2; }
.nav__strain-card-subheading { font-family: "Futura-ExtBol"; font-size: 16px; line-height: 1.3; z-index: 2; }

.nav__strain-card-star { z-index: 1; position: absolute; top: 0; left: 0; width: 90%; height: 90%; margin-top: 5%; margin-left: 5%; /* -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; rotation hidden as of Oct 27 2021 */ }



/* ---------------------------------- */
/* stamp  */
/* ---------------------------------- */

.stamp { flex: 0 0 87px; }
.stamp__image { max-width: 100%; }


/* ---------------------------------- */
/* responsiveness */
/* ---------------------------------- */

@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  .nav-and-stamp { width: calc(100vw - 77px); } /* 77 because we have 30px padding on each site (so 60px total) + 17px for scroll bar */
  body.user-is-on-mac .nav-and-stamp { width: calc(100vw - 60px); } /* 60 because we have 30px padding on each site (so 60px total) and ZERO for scrollbar because Mac scrollbar "hovers" over the content */
}






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

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


.hero__headings { flex: 0 0 67%; margin-top: 115px; margin-right: 11.2%; z-index: 2; }

.hero__the-moment { max-width: 100%; }
.hero__to-exponentially { width: 52.3%; margin-left: 14%; margin-top: 30px; }

.hero__bedroom { position: absolute; bottom: -7%; left: 0; }
.hero__bedroom-image { max-width: 100%; }


.hero__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__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__bubble-text { font-family: "PalmerLakePrint-Regular"; font-size: 44px; line-height: .65; }
.hero__bubble-text-fancy { font-family: "PalmerLakeScript-Regular"; color: var(--orange); }
.hero__bubble-text-coloured { color: var(--orange); }


@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  .hero { height: calc(129vw - 97px); } /* 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: 1220px)
{
  /* "The Moment" - prevent from ending up behind nav  */
  .hero__headings { flex: 0 0 67%; margin-right: 8.4%; }
}





/* -------------------------------------------------------------------------- */
/* issue / strain section
/* -------------------------------------------------------------------------- */

.issue-and-strain { background: url(/img/bg-light.jpg?v=4) center top repeat; }
.issue-and-strain--last { padding-bottom: 66px; }

/* this is needed so we can have double-bgs */
.issue-and-strain-inner { background: url(/img/bg-hand.png?v=1) center 90%/cover repeat; padding: 20px 30px 22px; }




/* -------------------------------------------------------------------------- */
/* 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; }
.underline { margin: 22px auto 0; width: 200px; border-bottom: 3px solid #1e1e1e; }




/* -------------------------------------------------------------------------- */
/* individual strain info (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 #1e1e1e; justify-content: space-between; }
.strain__row--4 { margin-top: 30px; 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 #1e1e1e; }

.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__name--macslurry      { color: #a13169; }


/* strain-highlight is its own bem-block because it's used on multiple pages */
.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__text--macslurry      { background-color: #aebdc7; }

.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 #1e1e1e; border-right: 3px solid #1e1e1e; 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 #1e1e1e; }

.strain__percent-filled { height: 100%; }

.strain__percent-filled--nut-butter-myrcene  { background-color: var(--yellow); width: 0; /* JS animates this to its final width based on the data params in the HTML */ }
.strain__percent-filled--nut-butter-caryophyllene { background-color: var(--orange); width: 0; }
.strain__percent-filled--nut-butter-limonene { background-color: var(--teal); width: 0; }

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

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

.strain__percent-filled--banana-daze-limonene      { background-color: #d73439; width: 0; }
.strain__percent-filled--banana-daze-caryophyllene { background-color: #d67643; width: 0; }
.strain__percent-filled--banana-daze-myrcene       { background-color: #c9b63d; width: 0; }

.strain__percent-filled--macslurry-caryophyllene { background-color: #a13169; width: 0; }
.strain__percent-filled--macslurry-limonene      { background-color: #64a0a4; width: 0; }
.strain__percent-filled--macslurry-farnesene     { background-color: #aebdc7; width: 0; }




.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 #1e1e1e; }

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










/* -------------------------------------------------------------------------- */
/* team - "MEET THE WHOLE TEAM"
/* -------------------------------------------------------------------------- */


.team { padding-top: 80px; padding-bottom: 40px; overflow: hidden; /* so the stars, when spinning, can't cause page to become wider than it should be */ }
.team--strains-page { padding-left: 30px; padding-right: 30px; }

.team__heading { font-family: "Futura-ExtBol"; font-weight: bold; font-size: 32px; text-align: center; }

.team__grid { margin-top: 42px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }

.team__panel { flex: 0 0 26%; margin: 30px 30px 60px; min-width: 200px; borders:solid 1px red; z-index: 3; /* so that these are always above dried flower section */ position: relative; /* so we can absolute-position the star */ height: 210px; /* needs hardcoded height so the stars are the same height and perfectly centered vertically */ display: flex; }

.team__image { max-width: 100%; z-index: 2; position: relative; /* so z-index works */ align-self: center; /* so images don't stretch to fill the height but keep aspect-ratio instead */ }
.team__image--banana-daze { max-width: 110%; margin-left: -5%; }

.team__star { position: absolute; top: 0; left: 0; width: 100%; margin-top: -22%; margin-bottom: auto; z-index: 1; /* -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; rotation hidden as of Oct 27 2021 */ pointer-events: none; /* necesasry so mouse doesn't end up inadvertently hoverivg over a spinning star causing it to not shrink back to home when you hover away */ displays: none; opacity: 0; /* JS shows it when hover */ }


@media only screen and (max-width: 1500px)
{
  .team__panel { height: 14vw; /* needs hardcoded height so the stars are the same height and perfectly centered vertically; this way the height can shrink as browser gets naroower so vertical space between these remains same */ margin-bottom: 3vw; /* so margin reduces as browser width reduces */ }
}

@media only screen and (max-width: 768px)
{
  .team__col { flex-basis: 26%; margin: 10px; }  

  .team__panel { margin-bottom: 30px; height: 110px }
}







/* -------------------------------------------------------------------------- */
/* "DRIED FLOWER / VAPES" */
/* -------------------------------------------------------------------------- */

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

.flower__grid { display: flex; }

.flower__panel { display: flex; borders:solid 1px red; }
.flower__panel--left   { flex: 1; flex-flow: column nowrap; z-index: 2; }
.flower__panel--middle { flex: 0 0 30%; margin: 0 70px 0 30px; flex-flow: column nowrap; }
.flower__panel--right  { flex: 1; flex-flow: column nowrap; z-index: 2; }


.flower__heading { margin-bottom: 18px; }
.flower__text-rectangle { display: inline-block; align-self: flex-start; /* so it's not 100% wide */ margin-bottom: 24px; } /* also see global rules "text-rectangle" */

.flower__paragraph { margin-bottom: 30px; }
.flower__available-in { font-family: "PalmerLakePrint-Regular"; font-size: 44px; line-height: .66; }

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

/* middle col content */
.flower__image { max-width: 182%; margin-left: -60%; /* so it spills out of its container evenly on both sides */ align-self: center; margin-top: 80px; z-index: 2; /* only needed for the float experiment, so todo: remove this pre-launch */ }


.flower__image--tablet { display: none; }
.flower__image-mobile { display: none; }


@media only screen and (max-width: 1500px)
{
  .flower { height: auto; min-height: calc( (100vw - 60px) * .648 ); padding: 8% 76px 7%; }

  .flower__panel--middle { flex: 0 0 40%; margin: 0 20px 0 20px; }

  .flower__image--desktop { display: none; }
  .flower__image--tablet { display: inline; max-width: 100%; margin-left: -4%; }

}

@media only screen and (max-width: 1400px)
{
  /*.flower__panel--middle { flex-basis: 38%; }*/
  /*.flower__image { max-width: 230%; margin-top: 120px; }*/
}

/*@media only screen and (max-width: 1310px)
{
  .flower { height: calc( (100vw - 60px) * .748 ) }
  .flower__panel--middle { flex-basis: 38%; }
  .flower__image { max-width: 185%; margin-top: 150px }
}*/

@media only screen and (max-width: 1300px)
{
  /* we need more width now */
  /*.flower { padding: 5% 30px 5%; }
  .flower__panel--middle { flex-basis: 36%; margin: 0 60px; }
  .flower__image { max-width: 155%; margin-top: 140px; margin-left: 20%; }*/
}

@media only screen and (max-width: 1200px)
{
  .flower { displays: none; background: url(/img/bg-hand.png?v=1) center 90%/cover repeat; padding: 0; height: auto; }

  .flower__grid { flex-flow: row wrap; }

  .flower__panel { flex: 0 0 100%; position: relative; }
  .flower__panel--left { flex: 0 0 100%; background: url(/img/mobile/flower__flower-bg.jpg) center center/cover; }
  .flower__panel--middle { display: none; }
  .flower__panel--right { flex: 0 0 100%; background: url(/img/mobile/flower__vapes-bg.jpg) center center/cover; }

  .flower__panel-inner { max-widths: 600px; margin: 10px auto 110px; padding: 70px 200px 100px 70px; }

  .flower__text-rectangle { display: inline-block; }

  .flower__image-mobile { display: inline; max-width: 50%; max-height: 400px; position: absolute; right: 0; bottom: 20px; }
  .flower__image-mobile--vapes { max-height: 460px; }

}


@media only screen and (max-width: 1000px)
{
  .flower__panel-inner { padding-right: 22vw; }
  .flower__panel-inner--flower { margin-bottom: 22vw; }
}

@media only screen and (max-width: 768px)
{
  .flower__panel-inner--flower { margin-bottom: 15vw; }
}

@media only screen and (max-width: 660px)
{
  .flower__panel-inner { padding-top: 40px; padding-right: 20vw; }
  .flower__panel-inner--vapes { padding-right: 26vw; }
}

@media only screen and (max-width: 500px)
{
  .flower__panel-inner { padding-left: 30px; }
  .flower__panel-inner--flower { padding-right: 30px; margin-bottom: 18vw; }
}

@media only screen and (max-width: 440px)
{
  .flower__panel-inner--flower { margin-bottom: 12vw; }
}







/* "SEE HOW THE MAGIC HAPPENS" */

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

.magic__border { flex: 0 0 3px; margin-right: 40px; display: flex; flex-direction: column; borders:solid 1px red; }
.magic__border-scissors { flex: 0 0 38px; width: 20px; margin-left: -10px; margin-right: 5px; height: 40px; borders:solid 1px red; }
.magic__border-scissors-image { width: 36px; margin-left: -10px; vertical-align: baseline; transform: rotate(80deg); }
.magic__border-dots { flex: 1; width: 3px; background: url(/img/magic__border-dots.png) repeat-y; display: flex; borders:solid 1px red; }


.magic__content { flex: 1; margin-top: 20px; }


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

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

.magic__image { width: 100%; max-width: 152px; border: 2px solid #1e1e1e; 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: #1e1e1e; }

/* 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 { position: relative; 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 */ display: flex; flex-flow: column; justify-content: center; } 
.about__left--cultivation { flex: 0 0 48%; margin-right: 0; display: flex; }

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

.about__heading {  }
.about__heading--cultivation {  }

.about__button { margin-top: 24px; }

.about__image { max-width: 100%; align-self: center; /* so we can vertically-center the images without stretching them */ }
.about__image--cultivation { max-width: 120%; margin-left: -40px; }





/* -------------------------------------------------------------------------- */
/* "WHERE TO BUY" ; also some of this is shared with CONTACT page (the where__province stuff); maybe split that up
/* -------------------------------------------------------------------------- */

.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 { max-width: 65%; margin-left: auto; margin-right: auto; }

.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 #1e1e1e; font-family: "PalmerLakePrint-Regular"; font-size: 48px; color: var(--orange); }

.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 #1e1e1e; z-index: 4; }

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

@media only screen and (max-width: 768px)
{
  .where__province-dropdown { margin-top: 48px; }
}

.where__individual-province { display: block; padding: 0 26px 8px; }

.where__unavailable { opacity: .3; position: relative; }
.where__unavailable:after { border-top: 2px solid var(--orange); position: absolute; content: ""; right: 0; top: 60%; left: 0; display: inline; }

@media only screen and (max-width: 410px)
{
  /* strikethrough - the makeshift strikethrough doesn't work when NEWF & LAB takes two lines so just remove it and reduce opacity further for other provinces as indicator they're unavailable */
  .where__unavailable { opacity: .2; }
  .where__unavailable:after { border: none; }
}

@media only screen and (max-width: 370px)
{
  .where__choose-a { display: none; }
}

.where__individual-province:hover { cursor: default; }
.where__individual-province--is-available:hover { background-color: var(--orange); color: white; cursor: pointer; }

/*
.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 */
}






/* -------------------------------------------------------------------------- */
/* scissors and line
/* -------------------------------------------------------------------------- */

.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: var(--footer-border-style); }

.footer__row { borders:solid 1px red; display: flex; flex-flow: row wrap; align-items: center }
.footer__row--2 { border-top: var(--footer-border-style); }

/* columns */
.footer__col { borders:solid 1px red; }

/* columns in row 1 */
.footer__col--available { flex: 0 0 21.6%; padding: 12px 1.2% 8px; display: flex; flex-flow: row wrap; }
.footer__col--looking { flex: 1; display: flex; flex-flow: row wrap; border-left: var(--footer-border-style); }

/* columns in row 2 */
.footer__col--bzam { flex: 0 0 21.6%; }
.footer__col--please { flex: 0 0 30%; padding: 3px 25px 2px; }
.footer__col--communicate { flex: 1; padding: 3px 25px 2px 0; display: flex; flex-flow: row wrap; }


/* footer - fonts */
.footer__heading, 
.footer__paragraph { font-size: 17px; letter-spacing: 1px; color: #f8f7f1; }

.footer__heading { font-family: "KorolevRoughCompressed-Bold"; line-height: 1; margin-bottom: 6px; }
.footer__heading--please,
.footer__heading--communicate { margin-bottom: 2px; }
.footer__paragraph { font-family: "KorolevRoughCompressed-Light"; line-height: 1.1; text-transform: uppercase; margin-bottom: 6px; }

.footer__link { color: white; font-weight: bold; }
.footer__link--instagram,
.footer__link--facebook { color: #00AAE2; }
.footer__link--ness { color: #B52372; }
.footer__link--table-top { color: #EEBC1B; }
.footer__link--email { color: #FF5B35; } /* SECRET CODE: HELLO@BZAM.COM */
.footer__link--privacy,
.footer__link--terms { font-weight: normal; }



/* "AVAILABLE ON" section */
.footer__available-left { flex: 0 0 30%; margin-right: 6%; }
.footer__available-right { flex: 1; }
.footer__instagram { width: 100%; }
.footer__facebook { width: 92%; margin: 12px 0 0 14px; }

/* "LOOKING FOR SOMETHING A LITTLE DIFFERENT?" section */
.footer__looking { flex: 0 0 100%; margin: 14px 0; text-align: center; }
.footer__looking-image { max-width: 67%; }

.footer__other-brand { display: flex; flex-flow: row wrap; }
.footer__other-brand--ness { flex: 0 0 53%; border-right: var(--footer-border-style); }
.footer__other-brand--table-top { flex: 0 0 47%; }

.footer__other-brand-left { flex: 0 0 27.2%; padding: 6px 0 0 3.4%; }
.footer__other-brand-left--table-top { flex: 0 0 37%; padding: 16px 10px 10px 29px; /* trying to make Table Top logo roughly same size as -ness, but it's squatter, so centering it vertically compared to ness */ }
.footer__other-brand-right { flex: 1; padding: 0px 28px 10px 18px; }
.footer__other-brand-right--table-top { padding-rights: 190px }

.footer__other-brand-logo { width: 100%; }
.footer__other-brand-logo--ness { width: 100%; margin-top: -20px; /* ness logo has lots of whitespace so need to shove it upwards to top-align properly */ } 


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


/* "COMMUNICATE ELECTRONICALLY!" */
.footer__communicate-left { flex: 0 0 86%; padding-right: 20px; }
.footer__communicate-right { flex: 1; }
.footer__satellite { width: 100%; margin-top: -56px; }







/* -------------------------------------------------------------------------- */
/* 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
/* -------------------------------------------------------------------------- */

/* needs double-containers because there's two stacked bg images  */
.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 #1e1e1e; width: 310px; height: 50px; }
.grow__status--indoor { width: 400px; }

.grow__status-left { flex: 0 0 100px; border-right: 1px solid #1e1e1e; 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; } /* see global rules for "text-rectangle" */
.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; }








/* -------------------------------------------------------------------------- */
/* mission page
/* -------------------------------------------------------------------------- */

/*

  in mission.css 

*/





/* -------------------------------------------------------------------------- */
/* 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=4) top center repeat #1e1e1e; 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: #1e1e1e; } /* 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 */





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





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