/* ss = single strain, to say this is for a single strain; come up with better name later maybe */

.ss-container { background: url(/img/bg-light.jpg?v=4) center top repeat; }
.ss-container-inner { position: relative; padding: 80px 0 1px; }


/* ss (single strain) */

.ss { borders:solid 1px red; display: flex; }

@media only screen and (max-width: 600px)
{
  .ss { flex-flow: column nowrap; }
}

/* nug (left half) */
.ss__nug { flex: 0 0 50%; borders:solid 1px blue; position: relative; }

@media only screen and (max-width: 600px)
{
  .ss__nug { margin: 20px 20px 40px; }
}


/* info (right half) */
.ss__info { flex: 1; padding: 0 40px 0 20px; borders:solid 1px green; }


/* nug - contents */
.ss__nug-sticky-container { position: sticky; top: 210px; width: 88%; /*margin: 0 auto;*/ border: 4px solid #1e1e1e; box-shadow: 8px 8px 0 0 #1e1e1e; background: url(/img/strains/shadowbox-bg.jpg?v=1) center center/cover #f9f8f1; /*transform: translateX(4px);*/ padding-top: 4.2%; padding-left: 50px; padding-right: 50px; }

/* nut butter image is extra tall so add extra padding to the shadowbox so it's not so tall  */
.ss__nug-sticky-container--nut-butter { padding-left: 100px; padding-right: 100px; }

/* macslurry image is extra squat so remove padding to the shadowbox so it's not so tall  */
.ss__nug-sticky-container--macslurry { padding-top: 6%; padding-left: 0px; padding-right: 0px; }

/* vapes have individual BGs */
.ss__nug-sticky-container--magic-melon { background-image: url(/img/strains/shadowbox-bg-magic-melon.jpg?v=1); }
.ss__nug-sticky-container--banana-daze { background-image: url(/img/strains/shadowbox-bg-banana-daze.jpg?v=1); }


@media only screen and (max-width: 1200px)
{
  /* nav starts getting smaller, so the nug shadowbox has to move up */
  .ss__nug-sticky-container { top: calc( (30vw + 200px) / 2.66); } /* this magic formula ensures that the space between the bottom of nav and top of shadowbox stays proportional as browser narrows */

  
}

@media only screen and (max-width: 1100px)
{
  /* nut butter image is extra tall so add extra padding to the shadowbox so it's not so tall, but less padding now or it gets too squat  */
  .ss__nug-sticky-container--nut-butter { padding-left: 6.2vw; padding-right: 6.2vw; }
}

@media only screen and (max-width: 1000px)
{
  /* shadowbox starts getting too wide for its available space; this fix allows it to line up with nav */
  .ss__nug-sticky-container { width: 86%; }
}

@media only screen and (max-width: 768px)
{
  /* nav now much smaller, so the nug shadowbox has to move up more */
  .ss__nug-sticky-container { top: 86px; }
}

@media only screen and (max-width: 600px)
{
  .ss__info { padding: 0 30px 0 30px; }
  .ss__nug-sticky-container { width: 100%; padding-left: 0; padding-right: 0; }
}


.rotating { width: 100%; vertical-align: text-bottom; display: block; visibility: hidden; display: none; } /* JS will show the correct frame when the page had loaded; display none only hides them while page loads then JS sets to display block and we hide with visibility hidden instaed because that way the page loads better [of we only hid these with visibility while page loads then they still take up space so the shadow box looks too big] and we then display: none when page has loaded and use visibility hidden to prevent the flashing Firefox problem that switching from display: none to display: block on all hidden images would cause */


@media only screen and (max-width: 600)
{
  /* nug - show the "best" nug frame/image aka when it's centered in the farme  */
  /*.rotating--nut-butter { position: absolute; visibility: hidden; display: block; }*/
  .rotating--nut-butter[data-n="21"] { position: relative; visibility: visible; }
  .rotating--sour-og-cheese[data-n="25"] { position: relative; visibility: visible; }
  .rotating--macslurry[data-n="39"] { position: relative; visibility: visible; }
}


/* lotties need to be smaller or they'll be too tall compared to nugs */
.ss__lottie-container { max-width: 76.8%; margin: auto; }



/* info - contents */

.ss__strain-name-desktop { margin-bottom: 30px; font-family: "Futura-ExtBol"; font-size: 94px; line-height: .84; }
body.user-is-on-mac .ss__strain-name-desktop { margin-top: 10px; }

.ss__logo-desktop { max-width: 460px; margin-bottom: 20px; }
.ss__logo-mobile { display: none; }
.ss__strain-name-mobile { display: none; }

@media only screen and (max-width: 1500px)
{
  .ss__logo-desktop { max-width: 72%; }
}

@media only screen and (max-width: 1380px)
{
  .ss__strain-name-desktop { font-size: 6.5vw; }
}

@media only screen and (max-width: 930px)
{
  .ss__logo-desktop { max-width: 70%; }
}

@media only screen and (max-width: 830px)
{
  .ss__logo-desktop { max-width: 64%; }
}


@media only screen and (max-width: 600px)
{
  .ss__logo-desktop { display: none; }
  .ss__strain-name-desktop { display: none; }
  .ss__logo-mobile { display: block; max-width: 100%; padding: 10px 30px; }
  .ss__strain-name-mobile { display: block; max-width: 100%; padding: 20px 30px 10px; text-align: center; font-family: "Futura-ExtBol"; font-size: 14vw; line-height: .84; }
  body.user-is-on-mac .ss__strain-name-mobile { padding: 30px 30px 0px; }
}


.ss__paragraph { margin-top: 30px; }




/* profile (FLAVOUR / TERPENES / TOTAL TERP %) */

/* grid  */
.ss__profile { margin-top: 30px; display: flex; flex-flow: row wrap; justify-content: space-between; border-top: 3px solid #1e1e1e; border-bottom: 3px solid #1e1e1e; padding: 0 0 14px; }

/* panels  */
.ss__profile-flavour-panel { flex: 0 0 30%; margin: 20px 0 0; }
.ss__profile-terpenes-panel { flex: 0 0 30%;  margin: 20px 0 0;}
.ss__profile-total-terpene-panel { flex: 0 0 30%; margin: 20px 0 0; }

/* content */
.ss__profile-mini-heading { font-family: "AlternateGothicPro-No2"; font-size: 25px; }
.ss__profile-mini-heading--total-terpene-percentage { text-align: center; }

.ss__profile-strain-list { margin-top: 4px; font-family: "Futura-ExtBol"; font-size: 28px; font-weight: bold; }


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

.ss__terpene-precent-number { position: absolute; top: 1px; right: 10px; font-size: 40px; font-family: "AlternateGothicPro-No2"; color: #1e1e1e; }

@media only screen and (min-width: 601px) and (max-width: 1480px)
{
  .ss__profile-strain-list { font-size: 1.8vw; }
  .ss__total-terpene-text { font-size: 4.4vw; letter-spacing: -2px; }
}

@media only screen and (min-width: 601px) and (max-width: 1260px)
{
  .ss__profile-strain-list { font-size: 1.7vw; }
  .ss__total-terpene-text { font-size: 3.6vw; }
}

@media only screen and (min-width: 601px) and (max-width: 1200px)
{
  .ss__profile { align-items: space-evenly; }
  /*.ss__total-terpene-text { font-size: 5.8vw; }*/
}

@media only screen and (min-width: 601px) and (max-width: 1023px)
{
  /* drop TOTAL TERPENE* PERCENTAGE to next line */
  .ss__profile-total-terpene-panel { flex: 0 0 100%; margin-top: 30px; }

  .ss__profile-strain-list { font-size: 2.6vw; }
  .ss__total-terpene-text { font-size: 7vw; }
}

@media only screen and (min-width: 601px) and (max-width: 800px)
{
  /* drop TOTAL TERPENE* PERCENTAGE to next line */
  /*.ss__profile-total-terpene-panel { flex: 0 0 100%; margin-top: 30px; }

  .ss__profile-strain-list { font-size: 2.6vw; }
  .ss__total-terpene-text { font-size: 70px; }*/
}

@media only screen and (max-width: 600px)
{
  .ss__profile-mini-heading { font-size: 4vw; }
  .ss__profile-strain-list { font-size: 3.5vw; }
  .ss__total-terpene-text { font-size: 8vw; letter-spacing: -2px; }
}

@media only screen and (max-width: 420px)
{
  /* drop TOTAL TERPENE* PERCENTAGE to next line */
  .ss__profile { justify-content: space-around; }
  .ss__profile-total-terpene-panel { flex: 0 0 100%; margin-top: 20px; }

  /* bigger fonts now because we have more room */
  .ss__profile-mini-heading { font-size: 6vw; }
  .ss__profile-strain-list { font-size: 5.5vw; }
  .ss__total-terpene-text { font-size: 15.5vw; letter-spacing: -2px; }
}

@media only screen and (max-width: 360px)
{
  .ss__profile-mini-heading { font-size: 5vw; }
  .ss__profile-strain-list { font-size: 5vw; }
  .ss__total-terpene-text { font-size: 13.5vw; letter-spacing: -2px; }
}




.ss__total-terpene-percentages { margin-top: 40px; }

.ss__percent-wrapper { height: 44px; width: 100%; margin: 3px 0 30px; position: relative; border: 1px solid #1e1e1e; }

@media only screen and (max-width: 600px)
{
  .ss__percent-wrapper { height: 38px; }
  .ss__terpene-precent-number { font-size: 34px; }
}

.ss__disclaimer { font-family: "AlternateGothicPro-No2"; font-size: 16px; margin-bottom: 30px; }

.ss__lineage { border-top: 3px solid #1e1e1e; padding: 30px 0; border-bottom: 3px solid #1e1e1e; z-index: 3; position: relative; }
.ss__appearance { border-bottom: 3px solid #1e1e1e; padding: 30px 0; z-index: 3; position: relative; }

.ss__lineage-and-appearance-text { margin-top: 5px; font-family: "Futura-ExtBol"; font-size: 32px; line-height: 1.2; }

@media only screen and (max-width: 800px)
{
  .ss__lineage-and-appearance-text { font-size: 28px; }
}


.ss__available-formats { width: 200px; margin: -30px auto -40px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; position: relative; }
.ss__available-formats-image { position: relative; z-index: 3; margin: auto 20px; }
.ss__available-formats-star { position: absolute; top: 0; left: 0; margin-left: auto; margin-right: auto; z-index: 2; height: 200px; /* -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 animation hidden as of oct-27-2021 */ }




/* wham / whoosh */
.ss__wham-and-whoosh { display: flex; justify-content: space-evenly; text-align: center; }

/* wham (left half) */
.ss__wham { flex: 0 0 38%; display: flex; flex-flow: column nowrap; justify-content: flex-end; }
.ss__wham--magic-melon { display: none; }
.ss__wham--banana-daze { display: none; }



/* whoosh (right half) */
.ss__whoosh { flex: 0 0 33%; display: flex; flex-flow: column nowrap; justify-content: flex-end; }
.ss__whoosh--cobra-lips { display: none; }
.ss__whoosh--amherst-sour-diesel { display: none; }
.ss__whoosh--nut-butter { display: none; }
.ss__whoosh--sour-og-cheese { display: none; }
.ss__whoosh--macslurry { display: none; }


/* wham - contents */
.ss__wham-image { max-width: 100%; /*min-height: 100px;*/ z-index: 2; }
.ss__wham-and-whoosh-heading { font-family: "Futura-ExtBol"; font-size: 32px; margin-bottom: 10px; }
.ss__wham-and-whoosh-paragraph { margin: 2px 0; font-size: 16px; }


/* whoosh - contents */
.ss__whoosh-image { max-width: 66px; /*min-height: 100px;*/ align-self: center; z-index: 2; }


@media only screen and (min-width: 601px) and (max-width: 1140px)
{
  
  
}

@media only screen and (min-width: 601px) and (max-width: 900px)
{
  .ss__wham-and-whoosh { justify-content: space-around; }
}

@media only screen and (min-width: 601px) and (max-width: 800px)
{
  .ss__wham-and-whoosh { /*justify-content: space-between;*/ }
  .ss__wham-and-whoosh-heading { font-size: 4vw; }
}

@media only screen and (max-width: 600px)
{
  .ss__wham-and-whoosh { /*justify-content: space-between;*/ }
  .ss__wham { flex-basis: 48% }
  .ss__whoosh { flex-basis: 48% }
  .ss__wham-and-whoosh-heading { font-size: 32px; }
}

@media only screen and (max-width: 400px)
{
  .ss__wham-and-whoosh-heading { font-size: 8vw; }
}

/* WHERE TO BUY */

.ss__where-to-buy { margin-top: 30px; border-top: 3px solid #1e1e1e; padding: 30px 0 20px; text-align: center; }

.ss__where-to-buy-paragraph { margin: 20px 0; }

.where__province--strains-page { max-width: 100%; }

@media only screen and (min-width: 601px) and (max-width: 920px)
{
  /* CHOOSE A PROVINCE - not enough room for all text so just show PROVINCE */
  .where__choose-a { display: none }
}

@media only screen and (max-width: 420px)
{
  /* CHOOSE A PROVINCE - not enough room for all text so just show PROVINCE */
  .where__choose-a { display: none }
}




.ss__headquartered-etc { border-top: 3px solid #1e1e1e; border-bottom: 3px solid #1e1e1e; padding: 30px; display: flex; flex-flow: row wrap; text-align: center; justify-content: space-evenly; }

.ss__headquartered-in-image { max-width: 100%; }


.ss__headquartered-etc-panel { margin: 8px 0; }
.ss__headquartered-etc-panel--headquartered { flex: 0 0 40%; }
.ss__headquartered-etc-panel--proper { flex: 0 0 50%; }
.ss__headquartered-etc-panel--directions { flex: 0 0 40%; }
.ss__headquartered-etc-panel--inhale { flex: 0 0 50%; display: flex; align-items: center; justify-content: center; }

.ss__headquartered-etc-panel--inhale img { margin: 4px; }

@media only screen and (max-width: 1200px)
{
  .ss__headquartered-etc { flex-flow: column nowrap; text-align: center; justify-content: space-evenly; }
  .ss__headquartered-in-image { max-width: 200px; }
}

@media only screen and (max-width: 900px)
{
  .ss__headquartered-etc { padding-left: 0; padding-right: 0; }
  .ss__headquartered-etc-panel--inhale { flex-flow: column nowrap; }
}