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





/* -------------------------------------------------------------------------- */
/* 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--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(10px, 10px); }
}

.clickable:hover { cursor: pointer; }




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

body { position: relative; background: url(/img/bg-dark.jpg?v=3) 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); }






/* -------------------------------------------------------------------------- */
/* 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: 2; display: flex; flex-flow: row wrap; justify-content: space-between; pointer-events: none; /* so we can click through this emptyness to the buttons below */ }


.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) */ }
.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 black; 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: black; }

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

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



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

@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=3) no-repeat center top; background-size: cover; display: flex; flex-flow: row wrap; justify-content: flex-end; }


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

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


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





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

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

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




/* -------------------------------------------------------------------------- */
/* 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 { borders:solid 1px red; display: flex; justify-content: space-between; align-items: center; }


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

.strain__name { margin-top: -16px; /* so "Nut Butter" top-aligns with the 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; color: var(--orange); }

.strain__highlight { display: flex; align-items: center; }
.strain__highlight-text { display: inline-block; margin-right: 14px; background: var(--yellow); padding: 4px 11px 9px; font-family: "Futura-ExtBol"; font-size: 33px; line-height: 1; }
.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--myrcene { background: var(--yellow); width: 95%; }
.strain__percent-filled--limonene { background: var(--orange); width: 35%; }
.strain__percent-filled--linalool { background: var(--teal); width: 16%; }

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






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

.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 { 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's be SO many <p> tags with class="legal-modal__paragraph  paragraph" otherwise */

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