/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* mid layout - between "desktop" (full-width) and mobile */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


@media only screen and (max-width: 1517px)
{
  .legal-modal__content { left: 10%; margin-left: 0; top: 10%; right: 10%; bottom: 10%; width: 80%; max-width: 80%; height: 80%; }
}



@media only screen and (min-width: 769px) and (max-width: 1440px)
{

  /* flower - allow this section to get wider so magic can be wider */
  .flower { padding-left: 30px; padding-right: 30px; }


  /* magic - shrink it and move it right */
  .magic { width: 100px; right: 60px; }
  .magic__text { font-size: 36px; }

  /* about sections can be wider now that magic is narrower */
  .about { width: 90%; }


  .footer__available-left { flex-basis: 25%; }
  .footer__facebook { width: 75%; }
  .footer__communicate-left { padding-right: 10px; }

  .footer__heading,
  .footer__paragraph { font-size: 14px; }

}


@media only screen and (min-width: 769px) and (max-width: 1280px)
{

  .flower { height: 42vw; padding-top: calc(7vw - 30px); } /* flower bg image is 42% as tall as wide, and now that it takes the full width, we can set its height based on vw */

}



@media only screen and (min-width: 769px) and (max-width: 1200px)
{

  /* start making nav narrower */
  .nav { flex-basis: 16.5vw; }
  .nav__button { font-size: 2.4vw; }
  .nav__button--first { margin-top: -3px; }


  /* stop the hero bubble from shrinking any more */
  .hero__bubble-inner { flex-basis: 660px; padding: 20px 22px 50px; }
  .hero__bubble-text { font-size: 34.8px; }


  /* "Nut Butter" area - allow things to start shrinking */
  .strain__name { font-size: 7.8vw; }
  .strain__highlight-text { font-size: 2.7vw; }
  .strain__highlight-image { height: 4vw; }


  /* magic - disappear it move it below */
  .magic { display: none; position: relative; right: auto; margin-top: 540px; width: 100%; border:solid 1px red; displays: flex; flex-flow: row; }

  .magic__see-how { display: none; }
  .magic__button { flex: 0 0 16%; }

  .mission-and-cultivation { padding-tops: 300px; }

  /* about sections can be full-width now that magic is gone */
  .about { width: 100%; }





  


  /* visit */

  .visit { padding: calc(6vw - 10px) 30px; } /* less padding (and tie vertical padding to a ratio) */
  .visit__content { left: 56%; width: 40%; }
  .visit__paragraph { margin-bottom: .1vw; } /* bring the address closer */
  .visit__br { display: none; } /* no extra lines breaks (need text to fill all space since space is narrow) */
  .visit__address { font-size: 20px; line-height: 1.2; }
  .visit__flagship { width: 38vw; bottom: 17vw; } /* move FLAGSHIP button to the left and up, centered-y in the left-half */


  /* footer */

  .footer__looking-image { width: 86%;; max-width: 740px; }

  .footer__other-brand { flex: 0 0 50%; border-bottom: var(--footer-border-style); border-right: none; border: none; }
  .footer__other-brand--table-top { margin-bottom: 12px; }
  .footer__other-brand--ness { border-right: var(--footer-border-style); }
  
  .footer__other-brand-left { flex: 0 0 37%; display: flex; /* to vertically center the contents */ }
  .footer__other-brand-left--table-top { flex: 0 0 40%; }
  .footer__other-brand-right { display: flex; flex-flow: column nowrap; justify-content: center; }

  .footer__col--available { order: 1; flex: 0 0 100%; justify-content: center; } /* so instagram icon is centered when it slips above the text */
  .footer__col--looking { border-left: none; }
  .footer__col--hide-under-1200px { display: none; }
  .footer__col--bzam { order: 1; flex: 0 0 321px; height: 83px; border-top: var(--footer-border-style); }
  .footer__col--please { order: 2; flex: 1; padding: 10px 30px; border-top: var(--footer-border-style); }
  .footer__col--communicate { flex: 0 0 100%; padding: 10px 30px; }

  .footer__instagram { margin-bottom: 10px; }

  .footer__communicate-right { text-align: right; }

  .footer__satellite { width: 73%; }

  .footer__bzam { width: 100.3%; }

  /* footer text - we need to grow the font-size a bit again to fill the space now that things are stacked vertically */
  .footer__heading,
  .footer__paragraph { font-size: 17px; }

  /* this is the extra "AVAILABLE ON* row that only shows at this size */
  .footer-midres__row { flex: 0 0 100%; border-top: var(--footer-border-style); padding: 8px 30px; display: flex; }

  /* footer - available on social media - this row is different because it's basically 3 cols instead of 2 */
  .footer-midres__instagram { width: 15%; }
  .footer-midres__available-content { flex: 0 0 380px; padding: 0 30px; text-align: center; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
  .footer-midres__facebook { width: 15%; }



}



@media only screen and (min-width: 769px) and (max-width: 1000px)
{

  /* paragraph text - shrink it */
  .paragraph { font-size: 18px; }

  

  /* rearrange the section with "GENETIC LINEAGE" now at top */
  .strain__col--lineage-and-appearance { order: -1; flex: 0 0 100%; border-bottom: 3px solid black; }
  .strain__col--total-terpene { flex: 0 0 50%; }
  .strain__col--terpene-percentages { flex: 1; border-right: none; }

  /* "HEADQUARTERED IN" row - only show important stuff (hide the sun for example) */
  .strain__col--proper { flex-grow: 1; }
  .strain__col--inhale { flex: 0 1 0%; /* so this hand is as small as it can be */ order: 1; /* put it last */ } 
  .strain__col--directions { flex: 1 0 170px; } /* gets a specific width because we want certain line-breaks */
  .strain__sun,
  .strain__inhale { display: none; }




  .flower { padding-top: calc(5vw - 20px) } /* vertically centered */
  .flower__paragraph { margin-bottom: 8px; }

  /* "OUR MISSION" and "CULTIVATION & PROCESSING" - allow it to be wider */
  .mission-and-cultivation { padding-left: 40px; padding-right: 40px; }


}




/* -------------------------------------------------------------------------- */
/* br's that show in very specific circumstances only
/* -------------------------------------------------------------------------- */

@media only screen and (max-width: 900px)
{
  .where__br-hidden-under-900px { display: none; }
}


@media only screen and (min-width: 400px) and (max-width: 768px)
{
  .grow__br-wide-mobile-only {  }
}





/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* mobile layout */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

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


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

  .desktop-only,
  .nav-and-stamp,
  .hero,
  .flower,
  .visit,
  .footer { display: none; }





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

  :root {
    --box-shadow: 4px 4px 0px #000000;

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


  /* -------------------------------------------------------------------------- */
  /* reusable / universal pieces
  /* -------------------------------------------------------------------------- */
  
  .heading { font-size: 27px; }

  .paragraph { font-size: 18px; }

  .button {  }
  .button__content { min-width: 164px; padding: 10px 10px 20px; font-size: 34px; }
  .button__content--flagship { min-width: 220px; }

  .br-hidden-on-mobile { display: none; }



  /* -------------------------------------------------------------------------- */
  /* everything else
  /* -------------------------------------------------------------------------- */
  
  /* modal showing? prevent html and body from being scrollable */
  .modal-is-active { overflow: hidden; }
  
  
  body { padding: 0; }
  

  .sticky-border { display: none; }

  

  /* -------------------------------------------------------------------------- */
  /* nav (BZAM and hamburger) */
  /* -------------------------------------------------------------------------- */

  .nav-mobile { position: fixed; top: 24px; width: 100%; margin: 0 auto; max-width: var(--page-container-width); padding: 0 30px; z-index: 4; 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-mobile__logo { flex: 0 0 160px; }
  .nav-mobile__hamburger { flex: 0 0 50px; }

  .nav-mobile__link { display: inline-block; pointer-events: auto; }
  .nav-mobile__logo-image { width: 100%; }
  .nav-mobile__hamburger-image { width: 100%; }


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

  .hero-mobile {  } 
  
  .hero-mobile__image { width: 100%; display: block; } 

  .hero-mobile__bubble { /*display: flex; align-items: center;*/ background: url(/img/bg-light.jpg?v=4) no-repeat center center; }
  
  .hero-mobile__bubble-inner { margin-top: -1px; /* maek sure there's no gap (chrome devtools shows gap but phone doesn't so might not be necessary) */ /*display: flex; align-items: center;*/ backgrounds: url(/img/mobile/hero-mobile__bubble.png?v=1) no-repeat center center/cover; padding: 1vw 2vw 2.7vw; text-align: center; }

  .hero-mobile__bubble-bottom { margin-top: -1px; /* maek sure there's no gap (chrome devtools shows gap but phone doesn't so might not be necessary) */ width: 100%; display: block; }

  /* fonts */
  .hero-mobile__bubble-text { font-family: "PalmerLakePrint-Regular"; font-size: 7.1vw; line-height: .72; }
  .hero-mobile__bubble-text-fancy { font-family: "PalmerLakeScript-Regular"; color: var(--orange); }
  .hero-mobile__bubble-text-coloured { color: var(--orange); }



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

  .issue-and-strain { margin-top: -4vw; padding-top: 4vw; /* these two rules make this slip under the hero-mobile__bubble-bottom */ }

  .issue-and-strain-inner { padding-left: 30px; padding-right: 30px; padding-bottom: 40px; background: url(/img/mobile/bg-mobile-hand.svg?v=1) 62% 0/430% no-repeat; }

  .issue__text { margin-top: 18px; font-size: 22px; }
  .issue__underline { margin-top: 14px; width: 140px; }

  /* strain - section */

  .strain { margin-top: 58px; }

  /* strain - columns */

  .strain__col--image { flex-basis: 100%; margin-right: 0; text-align: center; }
  
  .strain__col--total-terpene { order: 2; flex: 0 0 100%; border-top: 3px solid black; padding: 0; display: flex; flex-flow: row; }
  .strain__col--terpene-percentages { flex-basis: 100%; border-top: 3px solid black; border-left: none; border-right: none; padding: 20px 22px; }
  .strain__col--lineage-and-appearance { order: -1; }

  .strain__total-terpene-heading { flex: 0 0 50%; padding: 8px; margin-bottom: 0; border-right: 3px solid black; font-size: 7vw; display: flex; align-items: center; }
  .strain__total-terpene-text { flex: 0 0 50%; padding: 8px; font-size: 20vw; }

  .strain__total-terpene-heading-inner {  } /* this holds the actual text for TOTAL TERPENE PERCENTAGE so it can be vertically-aligned centered always */


  .strain__col--where { display: none; }
  .strain__col--flavour-and-terpenes { margin: 20px 0 0; }

  .strain__col--headquartered { flex-basis: 30%; }
  .strain__col--proper { display: none; }
  .strain__col--directions { flex: 1; padding-right: 4px; }
  .strain__col--inhale { flex-basis: 18%; order: 1; } /* this puts it last because flex items have a default order value of 0 */

  .strain__flavour { flex-basis: 34%; }
  
  /* strain - inside the columnss */

  .strain__image { width: 66%; }
  .strain-mobile-where { padding: 32px 30px 0; } /* this is a mobile-only "block" that sits inside a chunk of mostly mied (desktop and mobile) HTML*/
  .strain__name { margin-top: 40px; margin-bottom: 16px; font-size: 65px; }
  .strain__highlight-text { padding-bottom: 6px; font-size: 22.5px; margin-right: 8px; }
  body.user-is-on-mac .strain__highlight-text { padding: 8px 8px 2px; } /* hack for mac / iphone */
  .strain__highlight-image { height: 28px; }
  .strain__mini-heading { font-size: 17px; }
  .strain__paragraph { margin-top: 16px; }
  .strain__list { font-size: 23px; }
  .strain__disclaimer { font-size: 2vw; }

  .strain__sun,
  .strain__inhale { display: none; }
  .strain__hand { height: auto; width: 100%; }
  


  /* -------------------------------------------------------------------------- */
  /* flower (note that visit is almost identical to this section) */
  /* -------------------------------------------------------------------------- */

  .flower-mobile__image { max-width: 100%; display: block; /* fix the mystery margin below img problem */ }
  
  .flower-mobile__content { background: url(/img/mobile/flower-mobile__content-bg.jpg?v=1) center top/cover no-repeat; padding: 54px 30px; display: flex; justify-content: center; }

  .flower-mobile__content-inner { flex: 0 1 340px; }

  .flower-mobile__button { margin-top: 24px; }


  /* -------------------------------------------------------------------------- */
  /* mission and cultivation */
  /* -------------------------------------------------------------------------- */

  .mission-and-cultivation { padding: 40px 30px; }

  .about { width: 100%; text-align: center; }

  .about__left,
  .about__right { flex: 0 0 100%; }

  .about__left--mission { order: 1; } /* so it's last */

  .about__right--cultivation { text-align: center; }

  .about__image { max-width: 86%; }
  .about__heading { margin-top: 26px; }
  .about__paragraph { text-aligns: center; }



  /* -------------------------------------------------------------------------- */
  /* where to buy */
  /* -------------------------------------------------------------------------- */

  .where { padding: 52px 30px 52px; background-image: url(/img/mobile/where-mobile__bg.jpg?v=1); }

  .where__heading { max-width: 100%; }
  .where__province { max-width: 100%; }

  .where__province-dropdown-trigger { padding: 0px 20px 7px; font-size: 40px; }
  .where__province-dropdown-arrow { width: 72px; height: 53px; }



  /* -------------------------------------------------------------------------- */
  /* visit (note that flower is almost identical to this section) */
  /* -------------------------------------------------------------------------- */

  .visit-mobile__image { max-width: 100%; display: block; /* fix the mystery margin below img problem */ }
  
  .visit-mobile__content { background: url(/img/mobile/visit-mobile__content-bg.jpg?v=1) center top/cover no-repeat; padding: 80px 30px; text-align: center; }
  
  .visit-mobile__content-inner { max-width: 320px; margin: 0 auto; }

  .visit-mobile__heading { margin-bottom: 20px; }

  .visit-mobile__paragraph { margin-bottom: 30px; }

  .visit-mobile__address { font-family: "Futura-ExtBol"; font-size: 20px; line-height: 1.3; }

  .visit-mobile__flagship { margin-top: 24px; }



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

  .dotted-divider { padding: 50px 36px 50px 18px; background: url(/img/dotted-divider__scissors.svg?v=1) 22px 34px/38px no-repeat; }




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

  .footer-mobile { padding: 0 30px 30px; }

  /* footer - "LOOKING FOR SOMETHING A LITTLE DIFFERENT?" */

  .footer-mobile__looking { margin-bottom: 20px; text-align: center; } /* this sits above the rows */
  .footer-mobile__looking-image { max-width: 320px; } /* this sits above the rows */

  /* footer - rows */

  .footer-mobile__row { display: flex; border: var(--footer-border-style); border-bottom: none; padding: 10px; }
  .footer-mobile__row--looking { border: none; }
  .footer-mobile__row--available { justify-content: space-between; }
  .footer-mobile__row--please { display: block; } /* no flexing needed here, just stacked text here */
  .footer-mobile__row--bzam { border-bottom: var(--footer-border-style); padding: 0; }

  /* footer - cols */

  .footer-mobile__col-left { flex: 0 0 25%; margin-right: 20px; display: flex; /* so the images are vertically-centered */ justify-content: center; }
  .footer-mobile__col-left--table-top { flex-basis: 35%; }
  .footer-mobile__col-right { flex: 1; }


  /* footer - images max-width so they stay in their flex-boxes */
  .footer-mobile__other-brand-logo { max-width: 100%; max-height: 106px; }
  .footer-mobile__bzam { width: calc(100% + 1px); height: calc(100% + 2px); margin: -1px -1px; /* all this weirdness is needed so the BZAM logo "touches" the borders */ }

  .footer-mobile__satellite { max-height: 65px; }


  /* footer - available on social media - this row is different because it's basically 3 cols instead of 2 */
  .footer-mobile__instagram { width: 25%; }
  .footer-mobile__available-content { padding: 0 10px; }
  .footer-mobile__facebook { width: 25%; }

  /* footer - fonts / text / colours */
  .footer-mobile__heading, 
  .footer-mobile__paragraph { font-size: 12px; letter-spacing: 1px; color: #f8f7f1; }

  .footer-mobile__heading { font-family: "KorolevRoughCompressed-Bold"; line-height: 1; margin-bottom: 6px; }
  .footer-mobile__heading--please,
  .footer-mobile__heading--communicate { margin-bottom: 2px; }
  .footer-mobile__paragraph { font-family: "KorolevRoughCompressed-Light"; line-height: 1.1; text-transform: uppercase; margin-bottom: 6px; color: white; }

  .footer-mobile__paragraph--please { font-weight: bold; }

  .footer-mobile__link { color: white; }
  .footer-mobile__link--instagram,
  .footer-mobile__link--facebook { color: #00AAE2; }
  .footer-mobile__link--ness { color: #B52372; }
  .footer-mobile__link--table-top { color: #EEBC1B; }
  .footer-mobile__link--email { color: #FF5B35; } /* SECRET CODE: HELLO@BZAM.COM */





  /* -------------------------------------------------------------------------- */
  /* mobile menu modal */
  /* -------------------------------------------------------------------------- */

  .mobile-menu-modal { display: none; position: fixed; top: 0%; right: 0; left: 0%; bottom: 0; width: 100%; height: 100%; overflow-y: auto; z-index: 9998; background: url(/img/bg-dark.jpg?v=1) center top repeat black; font-family: "Futura-ExtBol"; }

  .mobile-menu-modal.is-active { display: block; }

  .mobile-menu-modal__inner { position: relative; height: 100%; max-height: 460px; }

  .mobile-menu-modal__close { position: absolute; top: 31px; right: 30px; width: 33px; }
  .mobile-menu-modal__close-x { width: 100%; }

  .mobile-menu-modal__table { display: table; width: 100%; height: 100%; }
  .mobile-menu-modal__cell { display: table-cell; vertical-align: middle; padding: 0 0 40px; }

  .mobile-menu-modal__list { /*margin-top: 230px;*/ }
  .mobile-menu-modal__item { margin: 0; text-align: center; }
  .mobile-menu-modal__link { display: block; background: url(/img/bg-light.jpg?v=1) center top repeat var(--bg-light-color); color: black; font-size: 48px; font-weight: bold; padding: 14px 0; margin: 8px; }
  
  .mobile-menu-modal__link:hover { color: var(--orange); }
  .mobile-menu-modal__link--available:hover { color: black; cursor: default; } /* this one isn't a link itself despite being an "a" tag, but it holds links; no time to re-code that before launch */

  .mobile-menu-modal__link--home { padding: 0; max-height: calc(100vh - 430px); overflow: hidden; /* so all buttons fit on screen (we start cropping the flower image if needed) */  }

  /* this last "button" is flexed because it contains a grid (social icons and text) */
  .mobile-menu-modal__link--available { padding: 4px 20px; height: 76px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; }

  .mobile-menu-modal__instagram { flex: 0; height: 100%; margin-right: 12px; }
  .mobile-menu-modal__facebook { flex: 0; width: 67px; margin-right: 12px; }
  .mobile-menu-modal__available-text { flex: 0 1 250px; display: flex; flex-flow: column nowrap; justify-content: center; }

  .mobile-menu-modal__available-heading { text-align: left; font-family: "KorolevRoughCompressed-Bold"; font-size: 18px;  }
  .mobile-menu-modal__available-paragraph { text-align: left; font-family: "KorolevRoughCompressed-Light"; font-size: 18px;  }

  body.user-is-on-mac .mobile-menu-modal__available-heading,
  body.user-is-on-mac .mobile-menu-modal__available-paragraph { font-size: 17px; }

  .mobile-menu-modal__social-link { color: #00AAE2; }
  .mobile-menu-modal__instagram,
  .mobile-menu-modal__facebook,
  .mobile-menu-modal__social-link:hover { color: var(--orange); cursor: pointer; }

  .mobile-menu-modal__image { width: 100%; vertical-align: bottom; }

  /* max fix for the line-height problem that ruins vertical centering */
  body.user-is-on-mac .mobile-menu-modal__link--mac-fix { padding: 18px 0 10px; }



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

  .grow-container { padding: 0 30px; }
  .grow-container-inner { padding-top: 66px; }

  .grow { margin: 54px auto; width: 100%; padding: 0; }

  .grow__status { margin: 20px auto 26px; width: auto; max-width: 280px; }
  .grow__status--indoor { width: 94%; }

  .grow__status-left-text { font-size: 21px; }

  .grow__status-right { padding: 8px; }
  .grow__status-right-text { font-size: 10px; }

  .grow__single-image-container { margin-bottom: 4px; }

  .grow__image { width: 100%; border: 2px solid black; }

  .grow__location { border: 2px solid black; padding: 0 12px 4px; font-size: 32px; box-shadow: 3px 3px 0px black; }
  .grow__location--top-left { top: 16px; left: 16px; }
  .grow__location--top-right { top: 16px; right: 16px; }
  .grow__location--bottom-left { bottom: 16px; left: 16px; }
  .grow__location--bottom-right { bottom: 16px; right: 16px; }

  .grow__paragraph { margin-top: 36px; }





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

  .legal-modal__content { left: 0; margin-left: 0; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100%; }

  .modal-close { top: 26px; right: 33px; width: 44px; height: 52px; }







} /* /max-width: 768ox */






@media only screen and (max-width: 500px)
{
  .strain__disclaimer { font-size: 10px; }
}





@media only screen and (max-width: 360px)
{
  .grow__status-right-text { font-size: 8px; } /* prevent "LICENSED PRODUCER (3 SITES)" from being too big to fit in its box */
}