/* -------------------------------------------------------------------------- */
/* 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 { background-color: #f5f3e2; }


@media only screen and (min-width: 768px)
{
  .mobile-only { display: none; }
}






/* -------------------------------------------------------------------------- */
/* vars
/* -------------------------------------------------------------------------- */

:root {
  --page-border-width: 60px;

  /* colors / colours */
  --light-color: #f5f3e2;
  --orange     : #ff5b35;

  /* fonts */
  --body-font-size: 17px;
  --body-font-line-height: 1.5em;

/*  --main-font-color: var(--light-color);*/
/*  --opposite-of-main-font-color: #000000;*/
  
  --main-font-color: #000000;
  --opposite-of-main-font-color: var(--light-color);

  /* just for the newsletter page */
  --province-container-width:       200px;
  --newsletter-input-height:        62px;
  --newsletter-input-height-french: 82px;
}



/*@media only screen and (max-width: 1000px)
{
  :root{
    --page-border-width: 74px;
  }
}

@media only screen and (max-width: 860px)
{
  :root{
    --page-border-width: 60px;
  }
}

@media only screen and (max-width: 767px)
{
  :root{
    --page-border-width: 80px;
  }
}*/


/* -------------------------------------------------------------------------- */
/* flex nearly everything
/* -------------------------------------------------------------------------- */

.page-container,
.header,
.footer,
.vertical-buttons-and-content,
.vertical-button-container,
.main-content,
.section-container,
.logo-container,
.logo,
.logo__link,
.logo__panel { display: flex; flex-flow: row wrap; }




/* -------------------------------------------------------------------------- */
/* all other rules
/* -------------------------------------------------------------------------- */

.page-container { justify-content: center; /*background: url('/img/bg-dark.jpg?v=1') top left/50% repeat;*/ position: relative; }





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

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

.break-word { word-break: break-word; }

.paragraph-divider { border-top: 1px solid var(--main-font-color); height: 0px; margin: 1em 0; }

.heading-link-orange-on-hover:hover { color: var(--orange); }

.uppercase { text-transform: uppercase; }

.heading-button { display: inline-block; border: 1px solid var(--main-font-color); padding: 10px 20px; font-family: "OPTIChampionBold"; font-weight: bold; margin-right: 20px; margin-bottom: 20px; }
.heading-button:hover { background: var(--main-font-color); color: var(--opposite-of-main-font-color); }
.heading-button--active { background: var(--main-font-color); color: var(--opposite-of-main-font-color); }





/* -------------------------------------------------------------------------- */
/* header
/* -------------------------------------------------------------------------- */

.header { flex: 0 0 100%; height: var(--page-border-width); padding: 0 var(--page-border-width); backgrounds: yellow; align-items: center; /*justify-content: center;*/ }

.header__left { flex: 1; }
.header__right { flex: 0 0 auto; text-align: right; font-family: "CourierNew"; }



@media only screen and (max-width: 767px)
{
  .header { padding: 0 20px; justify-content: flex-end; }
  .header__left { display: none; }
  .header__right { /*flex: 0 0 200px;*/ }
}





/* -------------------------------------------------------------------------- */
/* nav buttons (in header, left, right, and footer)
/* -------------------------------------------------------------------------- */

.nav-button { flex: 0 0 auto; color: #1e1e1e; text-decoration: none; line-height: 2em; /* this line-height gives us slightly better vertical centering */ display: inline-block; borders:solid 1px red; }
.nav-button--careers { transform: rotate(-90deg); }
.nav-button--our-grow { transform: rotate(90deg); }
.nav-button--get-updates { /*margin-right: 40px;*/ }
.nav-button--menu { display: none; } /* mobile-only */

.nav-button__plus { font-family: "Open Sans"; font-size: 23px; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it */ }

.nav-button__text { display: inline-block; /* needed to push the top text up during the animation */ font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 15px; letter-spacing: 3px; font-weight: bold; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it, and so the text-flipping animation works */ }



/* nav button hover flip effect */

.nav-button,
.nav-button__text-container,
.nav-button__text {
/*font-size: 14px !important;*/
/*line-height: 40px !important;*/
}

.nav-button__text-container {
  /*margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0;*/
  line-height: 20px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  /*line-height: 1.2em;*/
  /*height: 1.2em;*/
  /*z-index: 1;*/
  margin-top: 7px;
  vertical-align: top;
}

.nav-button:hover .nav-button__text {
  transform: translateY(-100%);
}
.nav-button:hover .nav-button__text--bottom {
  visibility: visible;
}

.nav-button__text--bottom {
  position: absolute;
  top: calc(100%/* + 2px*/); /* adding 2px here is another way to fix that artifacts problem, but for now I prefer the hidden method below; if you add 2px here you also have to change the translateY a few lines above for the hover-position to be correct */
  left: 0;
  visibility: hidden; /* so we don't see artifacts of this one below when it's supposed to be hidden like https://i.imgur.com/xZ5j0YF.gif */
}


/* hamburger button that only shows on mobile */
.hamburger { /*position: fixed; top: 20px; right: 40px; font-size: 100px; z-index: 9999; display: block;*/ }
.hamburger__line { border-bottom: 4px solid #1e1e1e; width: 46px; margin-bottom: 11px; }
.hamburger__line--last { margin-bottom: 0; }


@media only screen and (max-width: 1239px)
{
  /* fr site only at this width */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 20px; }
  [data-current-language="fr"] .nav-button__text { font-size: 22px; }*/
}
@media only screen and (max-width: 1100px)
{
  /*.nav-button__plus { font-size: 20px; }
  .nav-button__text { font-size: 24px; }*/
  
  /* fr site shrinks more than en */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 20px; }
  [data-current-language="fr"] .nav-button__text { font-size: 18px; }*/
}
@media only screen and (max-width: 860px)
{
  /*.nav-button__plus { font-size: 20px; }
  .nav-button__text { font-size: 22px; }*/

  /* fr site shrinks more than en */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 18px; }
  [data-current-language="fr"] .nav-button__text { font-size: 16px; }*/
}
@media only screen and (max-width: 860px)
{
  .nav-button__text--fr { font-size: 13px; }
}
@media only screen and (max-width: 767px)
{
  .nav-button--about-us { display: none; }
  .nav-button--vertical { display: none; }
  .nav-button--menu { display: unset; }

  .nav-button__plus--menu { font-size: 28px; }
  .nav-button__text--menu { font-size: 22px; }
  

  .nav-button__text-container--mobile { line-height: 30px; height: 30px; }
  .nav-button__plus--mobile { font-size: 28px; display: inline-block; margin-top: 3px; /* so the "+" vertical-aligns better with text */ }
  .nav-button__text--mobile { font-family: "OPTIChampionBold"; font-size: 25px; letter-spacing: 3px; }
  .nav-button__text--mobile-fr { font-family: "OPTIChampionBold"; font-size: 19px; letter-spacing: 3px; }
  .nav-button__text--smaller { font-size: 14px; letter-spacing: 1px; }
  .nav-button__text--smaller-fr { font-size: 14px; letter-spacing: 1px; }

  [data-investors-submenu-mobile="hidden"] {display: none; }

}

@media only screen and (max-width: 413px)
{
  .nav-button__text--mobile-fr { font-size: clamp(16px, 4.4vw, 19px); letter-spacing: 3px; }
  .nav-button__text--smaller-fr { font-size: clamp(12px, 2.8vw, 14px); letter-spacing: 1px; }
}
@media only screen and (max-width: 369px)
{
  .nav-button__text--mobile-fr { font-size: clamp(12px, 3.9vw, 16px); letter-spacing: 3px; }
  .nav-button__text--smaller-fr { font-size: clamp(9px, 2.7vw, 12px); letter-spacing: 1px; }
}



/* -------------------------------------------------------------------------- */
/* middle "row" with vertical button, content, vertical button
/* -------------------------------------------------------------------------- */

.vertical-buttons-and-content { borders:solid 1px red; align-items: stretch; flex: 0 0 100%; }



/* -------------------------------------------------------------------------- */
/* the two vertical buttons to the left/right of content
/* -------------------------------------------------------------------------- */

.vertical-button-container { flex: 0 0 var(--page-border-width); align-items: center; justify-content: center; /*transform: rotate(-90deg);*/ /*background: url('/img/bg-dark.jpg?v=1') top left/700px repeat;*/ background-color:  #f5f3e2; overflow: hidden; /* necessary because browser still "sees" this as not-rotated so it'll make this div too wide if the word is lon like CAREERS because browser essentially thinks the text is still left-to-right */ z-index: 2; }
@media only screen and (max-width: 767px)
{
  .vertical-button-container { flex: 0 0 20px; }
}



.header, .footer { /*background: url('/img/bg-dark.jpg?v=1') top left/50% repeat;*/ z-index: 2; }


/* -------------------------------------------------------------------------- */
/* main content holder (everything between the two vertical buttons)
/* -------------------------------------------------------------------------- */

.main-content { flex: 1; /*width: 100%;*/ height: calc(100vh - 100px); /* this might get overriden by JS (in a good way) to deal with mobile device's URL bars etc that mess CSS's height measurements up */ position: relative; /*background-color: grey; background: url(https://images.pexels.com/photos/7667901/pexels-photo-7667901.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) top left/cover;*/ overflow: hidden; /* necessary because sometimes the video is taller than the page itself and so scrollbars will show up if you don't set overflow to hidden */ }

@media only screen and (max-width: 767px)
{
  .main-content { height: calc(100vh - 200px); }
}


/* -------------------------------------------------------------------------- */
/* BZAM - big logo
/* -------------------------------------------------------------------------- */

.main-logo { position: absolute; /*top: -18px; width: 264px;*/ top: 16px; width: 160px; z-index: 2; }
.main-logo__image { width: 100%; }

@media only screen and (min-width: 768px)
{
   .main-logo__image { transform: translateX(3%);  /* needed because the "TM" part takes up 6% of the width of the image, so this sets it to horizontally-centered visually */ }
}

@media only screen and (max-width: 1100px)
{
  /*[data-current-language="fr"] .main-logo { top: 22px; width: 220px; }*/
}
@media only screen and (max-width: 1000px)
{
  /*.main-logo { top: 14px; width: 190px; }*/
}
@media only screen and (max-width: 960px)
{
  /*[data-current-language="fr"] .main-logo { top: 18px; width: 170px; }*/
}
@media only screen and (max-width: 860px)
{
  /*.main-logo { top: 10px; width: 152px; }*/
}
@media only screen and (max-width: 767px)
{
  .main-logo { /* top: -14px; left: -2px; width: 190px; */ top: 13px; left: 20px; width: 150px; z-index: 3; }
}
@media only screen and (max-width: 400px)
{
  /*.main-logo { top: 20px; left: 20px; widths: 110px; z-index: 3; }*/
}





/* -------------------------------------------------------------------------- */
/* INVESTORS dropdown
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px)
{
  .investors-dropdown { position: absolute; top: 0; left: 0; width: auto; height: auto; padding-right: 24px; padding-bottom: 24px; background-color: #f5f3e2; z-index: 2; transition: all .1s ease-in; }
  [data-investors-dropdown="hidden"] { opacity: 0; pointer-events: none; }
  [data-investors-dropdown="visible"] { opacity: 1; }
}
@media only screen and (max-width: 767px)
{
  .investors-dropdown { display: none; }
}




/* -------------------------------------------------------------------------- */
/* "X" button that closes content and reveals "homepage" content
/* -------------------------------------------------------------------------- */

.content-closer { backgrounds: red; position: absolute; top: 40px; right: 40px; display: none; /* JS shows this when needed */ }
.content-closer__button,
.content-closer__button:hover,
.content-closer__button:visited { color: #f5f3e2; text-decoration: none; }
.content-closer__image { width: 50px; }

@media only screen and (max-width: 900px)
{
  /* shrink and move the "X" a bit because it looks too large at this browser-width */
  /*.content-closer { top: 20px; right: 20px; }*/
  /*.content-closer__image { width: 30px; }*/
}

@media only screen and (max-height: 500px)
{
  .content-closer { top: 30px; }
  .content-closer__image { width: min(4.4vw, 50px); }
}


@media only screen and (max-width: 767px)
{
  .content-closer { display: none !important; top: 20px; right: 20px; }
  .content-closer__image { width: 30px; }
}




/* -------------------------------------------------------------------------- */
/* container that holds all sections, which has semi-transparent BG so we can read text over the video */
/* -------------------------------------------------------------------------- */

.section-container { flex: 0 0 100%; max-height: 100%; /*height: calc(100vh - 120px);*/ align-items: flex-start; justify-content: center; background: rgba(0, 0, 0, .2); z-index: 1; transition: all .4s ease !important; /* this transition ensures that the swtich between background-opacity (when changing from homepage to subpage) is slow (fades between instead of snapping) */ overflow-x: hidden; /* needed for the pheno section to not cause things to get too wide */ }


/* -------------------------------------------------------------------------- */
/* any togglable "section", aka the homepage or any subpage section
/* -------------------------------------------------------------------------- */

.section { z-index: 2; max-height: calc(100% - 180px); /*transform: translateY(8%);*/ borders:solid 1px red; overflow-x: hidden; /* todo remove this overflow-x hidden hack that you added jul-29-2022 and shrink fonts instead so we never get horizontal scrollbars at 320px wide */ }
.section--homepage { align-self: center; /* this one still center-aligns vertically thanks to this rule, but all subapges are now top-aligned */ borders: solid 1px red; flex: 0 0 100%; /* homepage can be a bit wider and still appear to be as wide as subpage content because the panels have their own internal padding */ max-height: calc(100% - 20px); /* homepage can be a bit taller too because we'll never need room for the "x" button */ padding: 0 40px; overflow-y: visible; height: 100%; display: flex; justify-content: center; align-items: center; /* so the logo panels can stretch vertically and fill up the entire space */ }
.section--subpage { flex: 0 0 min(calc(100% - 20px), 1260px); overflow-y: auto; padding: 0 90px 0; margin-top: 110px; }
.section--subpage p strong { font-family: "TypewriterSpool-SFT-Extra-Bold"; }
.section--newsletter-form { height: 100%; }

.section__heading { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 1em; font-size: 23px; font-weight: bold; font-family: "OPTIChampionBold"; text-transform: uppercase; }
.section__heading--h1 { font-size: 30px; text-decoration: underline; margin-bottom: 40px; }
.section__heading--underlined { text-decoration: underline; }
.section__heading--governance { font-size: 23px; margin-bottom: .2em; text-transform: none; }
.section__heading--dont-transform { text-transform: none; }
.section__heading--press-releases { margin-bottom: 0.6em; }
.section__heading--press-release-article { margin-top: 56px; }


[data-heading-has-sup] { margin-top: -5px; } /* this strangeness is needed because otherwise headings with <sup> inside will be lower on the page compared to non-sup-having headings (but ONLY if the word with the <sup> is on the "top line"), because of the sup's vertical-align rule */
[data-heading-has-sup="sup-on-second-line"] { margin-top: 0; } /* this strangeness is needed because if the word with the <sup> ends up on the 2nd/3rd/etc line, then the top-margin-hack will now misalign it compared to other headings */
.section__heading--extra-top-margin { margin-top: 56px; }
.section__heading--news { text-transform: unset; font-size: 28px; margin-bottom: 21px; }
.section__heading--news-first { margin-top: 0; text-transform: unset; }
.section__heading--our-grow { margin-top: 94px; }
.section__heading--pheno-hunting-timeline { margin-bottom: 0; }

.section__heading-sup { vertical-align: super; font-size: 50%; }

.section__fr-financial-information-disclaimer { margin-bottom: 2.4em; margin-top: 54px; }
.section__fr-financial-information-disclaimer--extra-top-margin { margin-top: 1.2em; }



@media only screen and (max-width: 1200px)
{
  .section--homepage { flex-basis: 100%; borders:solid 1px red; }
}


@media only screen and (max-width: 767px)
{
  .section-container { height: 100%; max-height: 100%; }
  .section { margin: 0; padding: 0 20px; max-height: calc(100% - 60px); /* this section can be taller now that there's no "X" button */  flex: 0 0 calc(100% - 20px); /*max-height: calc(100% - 120px);*/ }
  .section--homepage { flex: 0 0 100%; /*padding-left: 30px;*/ /* doesn't have a scrollbar on right, so needs to retain it's left-padding to look centered */ max-height: calc(100% - 20px); }
  .section--subpage { margin-top: 30px; }
}

@media only screen and (max-height: 500px)
{
  /*.section { max-height: calc(100% - 60px); }*/
  .section--subpage { /*margin-top: 30px;*/ }
}

@media only screen and (max-width: 500px)
{
  .section__heading--h1 { font-size: 26px; }
}

@media only screen and (max-width: 400px) and (max-height: 500px)
{
  /*.section { max-height: calc(100% - 100px); }
  .section--subpage { margin-top: 50px; }*/
  
}

@media screen and (max-width: 600px) and (max-height: 600px)
{
  .section--homepage {  max-height: calc(100% - 20px); borders:solid 1px red; }
}

/* min-height thing for this heading only */
.section__heading--share-information { display: none; } /* for now this ALWAYS displays none, but if you get approval to launch this, unhide this */
@media only screen and (max-height: 999px)
{
  .section__heading--share-information { display: none; }
}




/* -------------------------------------------------------------------------- */
/* homepage logo-showing section
/* -------------------------------------------------------------------------- */

.logo-container { flex: 0 0 100%; height: 100%; justify-content: center; align-items: center; borders:solid 1px blue; }

.logo { flex: 0 0 100%; justify-content: space-evenly; align-items: space-evenly; borders:solid 1px orange;/* height: 100%;*/ /* so the logo panels can stretch vertically and fill up the entire space */ /*max-height: 40vh;*/ max-width: 2600px; borders:solid 1px red; }


@media only screen and (min-width: 767px) and (max-width: 900px) and (max-height: 500px) 
{
  /*.logo { max-height: 94%; }*/
}

@media only screen and (max-height: 700px)
{
  /*.logo { max-height: 94%; }*/
}



.logo__panel { flex: 0 0 25%; margin: 0%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; borders:solid 1px red; }
.logo__link { display: flex; align-items: center; justify-content: center; borders:solid 1px red; flex: 1; transition: transform .2s ease; }
.logo__link--dunn-craft { cursor: default; transition: opacity .2s ease; }
.logo__image { width: 100%; /*flex: 0 0 100%;*/ /*width: 100%;*/ /*max-height: 80px;*/ transform: scale(1); transition: transform .2s ease; /* this transition is needed too, so it smoothly shrinks when you hover away */ borders:solid 1px red; displays: none; }
.logo__image--bzam { width: 85%; }
.logo__image--tgod { width: 84%; }
.logo__image--ness { width: 86%; }
.logo__image--wyld { width: 76%; }
.logo__image--dunn { width: 85%; }
.logo__image--fresh { width: 75%; }
.logo__image--table-top { width: 86%; }
.logo__image--highly-dutch { width: 55%; }

/* hover effects */
.logo__link:not(.logo__link--dunn-craft):hover { transform: scale(1.1); transition: transform .2s ease; cursor: pointer; /* needed for Safari, because it'll show the i-beam otherwise even though this is an <a> tag */ }
.logo__link--dunn-craft:hover { opacity: .7; transition: opacity .2s ease; }


.logo__divider { display: block; flex: 0 0 94%; height: 0px; /* height: 1px; background: url('/img/dashed-line.png?v=3') top left repeat-x;*/ } /* only shows when logo-gid is two-rows high */


/*@keyframe logo_image_enlarge {
  from: transform: scale(1.3);
  to: transform: scale(1.4);
}

@keyframe logo_image_enlarge {
  from: transform: scale(1.4);
  to: transform: scale(1.3);
}*/



/*.logo,
.logo__panel { border:solid 1px red; }
.logo__panel:nth-child(1) { background: #999; }
.logo__panel:nth-child(2) { background: #777; }
.logo__panel:nth-child(3) { background: #555; }
.logo__panel:nth-child(4) { background: #333; }
.logo__panel:nth-child(5) { background: #111; }
.logo__panel:nth-child(6) { background: #444000; }
.logo__panel:nth-child(7) { background: #666000; }*/
/*.logo__image { display: none; }*/







/* here's where the removed stuff goes */


/* here's the new experimental stuff */
.logo[data-columns="one-column"] { flex-basis: 80%; height: auto; flex-flow: column nowrap; borders:solid 1px red; }
.logo[data-columns="one-column"] .logo__panel { flex: 1; padding: .9vh 0; margin: .9vh 0; }
.logo[data-columns="one-column"] .logo__link { flex: 0; }
.logo[data-columns="one-column"] .logo__image { max-widths: 360px; }

.logo[data-columns="one-column"] .logo__divider { flex: none; align-self: center; /*margin: .9vh 0;*/ }


@media only screen and (max-width: 767px)
{
  .logo[data-columns="one-column"] .logo__panel { margin: .6vh 0; }
  .logo[data-columns="one-column"] .logo__divider { /*margin: .8vh 0;*/ }
}

/*@media only screen and (max-height: 500px)
{
  .logo[data-columns="one-column"] .logo__panel { padding: 6px 0; }
  .logo[data-columns="one-column"] .logo__divider { margin: 6px 0; }
}*/

/*.logo[data-columns="one-column"] .logo__link { height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.logo[data-columns="one-column"] .logo__link--dunn-craft { background-image: url("/img/logo__dunn-craft.svg"); }
.logo[data-columns="one-column"] .logo__link--dunn { background-image: url("/img/logo__dunn.svg"); }
.logo[data-columns="one-column"] .logo__link--bzam {background-image: url("/img/logo__bzam.svg");  }
.logo[data-columns="one-column"] .logo__link--snackbar { background-image: url("/img/logo__snackbar.svg"); }
.logo[data-columns="one-column"] .logo__link--superflower { background-image: url("/img/logo__superflower.svg"); }
.logo[data-columns="one-column"] .logo__link--ness { background-image: url("/img/logo__ness.svg"); }
.logo[data-columns="one-column"] .logo__link--tabletop { background-image: url("/img/logo__tabletop.svg"); }
.logo[data-columns="one-column"] .logo__image { display: none; }*/

.logo[data-columns="two-column"] { flex-basis: 80%; }
.logo[data-columns="two-column"] .logo__panel { flex-basis: 48%; padding: 4% 2.4%; }
/* .logo[data-columns="two-column"] .logo__panel--partner-brand { flex-basis: calc(50% * .7); } */ /* make partner-brands  smaller */
/*.logo[data-columns="two-column"] .logo__panel--house-brand { flex-basis: 48%; padding: 4%; }*/


.logo[data-columns="three-column"] { flex-basis: 80%; }
.logo[data-columns="three-column"] .logo__panel { flex-basis: 33%; padding: 3% 1.8%; }
/* .logo[data-columns="three-column"] .logo__panel--partner-brand { flex-basis: calc(35.7% * .7); } */
/*.logo[data-columns="three-column"] .logo__panel--house-brand { flex-basis: 34%; padding: 3%; }*/

.logo[data-columns="four-column"] { }
.logo[data-columns="four-column"] .logo__panel { flex-basis: 21%; padding: 3.0% 0.5%; }
/* .logo[data-columns="four-column"] .logo__panel--partner-brand { flex-basis: calc(21% * .7); } */ /* make partner-brands  smaller */
.logo[data-columns="four-column"] .logo__image--snackbar { width: 85%; }

/* this is now also a five-column/four-column layout but it's still CALLED eight-column in case we revert; I've gone to 5/4 coloumn here even though it might introduce scrollbars if browser is squat enough because it's unlikely anyone would set their browser to this size and because it allows us to have the partner-brands be smaller without looking off-centered like it would if we had one row of eight columns */
.logo[data-columns="eight-column"] { gap: 0 7%; }
.logo[data-columns="eight-column"] .logo__panel { flex-basis: 14.4%; padding: 2% 0; }
/* .logo[data-columns="eight-column"] .logo__panel--partner-brand { flex-basis: calc(18% * .7); } */ /* make partner-brands  smaller */
/*.logo[data-columns="eight-column"] .logo__panel--house-brand-last { border-right: 1px solid #f5f3e2; }*/
/*.logo[data-columns="eight-column"] .logo__divider { display: none; }*/



/* -------------------------------------------------------------------------- */
/* all subpages
/* -------------------------------------------------------------------------- */

/*h2 { color: #f5f3e2; line-height: 1.2em; margin-bottom: 1em; font-size: 24px; font-weight: bold; font-family: "OPTIChampionBold"; text-transform: uppercase; }*/
h3 { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 0; font-size: 24px; font-weight: bold; font-family: "CourierNew"; }
/*h4 { font-size: var(--body-font-size); }*/
p { color: var(--main-font-color); margin-bottom: 1.2em; font-size: var(--body-font-size); line-height: var(--body-font-line-height); font-family: "TypewriterSpool-SFT-Semi-Bold"; }
p.large-text { font-size: 25px; line-height: 1.2em; margin-bottom: 1.2em;  } /* used on "Our Mission" page */
a { color: var(--main-font-color); text-decoration: none; }
ul { margin-bottom: 1.2em; }
li { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 1.2em; font-size: var(--body-font-size); font-family: "TypewriterSpool-SFT-Semi-Bold"; list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
strong { font-weight: 900; }

@media only screen and (max-width: 420px)
{
  p.large-text { font-size: 24px; }
}


/* -------------------------------------------------------------------------- */
/* fancy scrollbar for all subpages
/* -------------------------------------------------------------------------- */

/* vertical scrollbars (up/down) */

/*.section { scrollbar-color: var(--main-font-color) var(--main-font-color); }*/

/* width */
.section::-webkit-scrollbar {
  width: 9px;
  /*scrollbar-color: var(--main-font-color);*/
}

/* Track */
.section::-webkit-scrollbar-track {
  background: var(--main-font-color);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  background-clip: padding-box;
}

/* Handle */
.section::-webkit-scrollbar-thumb {
  background: var(--main-font-color);
}

/* Handle on hover */
.section::-webkit-scrollbar-thumb:hover {
  /*background: #dddddd; only used this when site was dark-bg with light text*/
  background: #555;
  width: 20px;
}


/* fancy horizontal scrollbar (left/right) */

/* width */
.fancy-horizontal-scrollbar::-webkit-scrollbar {
  height: 9px;
}

/* Track */
.fancy-horizontal-scrollbar::-webkit-scrollbar-track {
  background: var(--main-font-color);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  background-clip: padding-box;
}

/* Handle */
.fancy-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: var(--main-font-color);
}

/* Handle on hover */
.fancy-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
  /*background: #dddddd; only used this when site was dark-bg with light text*/
  background: #555;
  height: 20px;
}


/* hide horizontal scrollbar */

.hide-horizontal-scrollbar {
  scrollbar-width: none;
}

.hide-horizontal-scrollbar::-webkit-scrollbar {
  display: none;
}





/* -------------------------------------------------------------------------- */
/* video 
/* -------------------------------------------------------------------------- */
.video { position: absolute; top: 100%; left: 100%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; transform: translate(-100%, -100%); }






/* -------------------------------------------------------------------------- */
/* Newsletter form page
/* -------------------------------------------------------------------------- */

.newsletter { font-family: "TypewriterSpool-SFT-Bold"; }

.newsletter__heading-wrapper { margin-bottom: 50px; }

.newsletter__heading { font-family: "TypewriterSpool-SFT-Extra-Bold"; font-size: 40px; text-align: center; text-transform: none; margin-bottom: 24px; }
.newsletter__subheading { font-family: "TypewriterSpool-SFT-Bold"; text-align: center; font-size: var(--body-font-size); }

@media only screen and (max-width: 959px)
{
  .newsletter__heading-wrapper { max-width: 580px; margin-left: auto; margin-right: auto; }
/*  .newsletter__heading-br { display: none }*/
  .newsletter__subheading-br { display: none }
}

.newsletter__thanks-for-joining { display: none; /* JS shows this when ready */ max-width: 500px; margin: 60px auto 0; color: var(--main-font-color); text-align: center; /*z-index: 2;*/ position: relative; }

.newsletter__form { padding-bottom: 15px; z-index: 3; position: relative; /* needed for z-index to work */ }
.newsletter__form-inner { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 20px; gap: 16px; }


.newsletter__input { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); margin: 0; padding: 30px 24px; border: 1px solid var(--main-font-color); border-radius: 0; /* prevents iOS from adding this radius automatically */ font-size: var(--body-font-size); height: var(--newsletter-input-height); outline: none !important; background: none; color: var(--main-font-color); position: relative; font-family: "TypewriterSpool-SFT-Semi-Bold"; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__input { height: var(--newsletter-input-height-french); }
.newsletter__input::placeholder { color: var(--dark-text-color); }
.newsletter__input--email { flex: 0 1 calc(100% - 216px); max-width: calc(100% - 216px); }
.newsletter__province-container { flex: 0 0 var(--province-container-width); max-width: 200px; height: var(--newsletter-input-height); outline: none !important; color: var(--dark-text-color); position: relative; display: flex; flex-flow: row wrap; align-items: center; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__province-container { height: var(--newsletter-input-height-french); }
.newsletter__province-container {  }
.newsletter__province-selected { max-width: 80%; }
/*.newsletter__province-container[data-newsletter] { }*/

.newsletter__disclainers-and-submit { display: flex; flex-flow: row wrap; gap: 20px 36px; align-items: stretch; }
.newsletter__disclainers { flex: 1; }
.newsletter__submit { flex: 0 0 var(--province-container-width); }


.newsletter__province-dropdown-toggle { display: flex; flex-flow: row nowrap; flex: 0 0 100%; justify-content: space-between; margin: 0 0 10px 0; border: 1px solid var(--main-font-color); padding: 0 24px; font-size: var(--body-font-size); height: var(--newsletter-input-height); outline: none !important; position: relative; display: flex; flex-flow: row wrap; align-items: center; }
[data-newsletter-form="fr"] .newsletter__province-dropdown-toggle { height: var(--newsletter-input-height-french); }
.newsletter__province-dropdown-toggle[data-newsletter-province-dropdown-toggle="on"] { background: var(--opposite-of-main-font-color); }
.newsletter__province-dropdown-arrow { width: 24px; }

.newsletter__province-dropdown { display: none; position: absolute; width: 100%; margin-top: calc(var(--newsletter-input-height) - 0px); margin-bottom: 20px; top: -1px; left: 0; border: 1px solid var(--main-font-color); border-top: none; background-color: var(--opposite-of-main-font-color); padding-top: 0px; padding-bottom: 16px; z-index: 3; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__province-dropdown { margin-top: calc(var(--newsletter-input-height-french) - 0px); }
.newsletter__province-link { display: block; padding: 8px 24px; font-size: var(--body-font-size); }
.newsletter__province-link:hover { background-color: var(--orange); }
[data-newsletter-province-selected="true"] { display: none; /* hide the selected province */ }



.newsletter__submit-link { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 16px; background-color: var(--main-font-color); color: var(--opposite-of-main-font-color); widths: 60px; height: 100%; padding: 16px 0; }
.newsletter__submit-link[data-newsletter-submit-link="enabled"]:hover { background-color: var(--orange); }
.newsletter__submit-link[data-newsletter-submit-link="disabled"] { opacity: .5; } 
/*.newsletter__submit-link[data-newsletter-submit-link="enabled"] { background: var(--orange); color: var(--yellow); }
.newsletter__submit-link[data-newsletter-submit-link="enabled"]:hover .bounce-right-when-hovered-if-enabled,
.newsletter__submit-link[data-newsletter-submit-link="enabled"]:active .bounce-right-when-hovered-if-enabled {
  -webkit-animation : bounce_right .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_right .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_right .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_right .15s ease-in-out 0s 2 alternate;
  animation         : bounce_right .15s ease-in-out 0s 2 alternate;
}*/

.newsletter__submit-text { displays: none; }
.newsletter__submit-arrow { width: 80px; }

.newsletter__form-disclaimer-label { display: flex; margin-top: 12px; margin-bottom: 15px; position: relative; padding-left: 45px; cursor: pointer; font-size: 20px; }
.newsletter__form-disclaimer-label--last { margin-bottom: 0; }
.newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ /*flex: 0 0 20px; margin: 0 16px 0 0; width: 20px; height: 20px; background-color: var(--yellow);*/ }
.newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; border: 1px solid var(--main-font-color); position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.newsletter__form-disclaimer-text { flex: 1; /*bulk-font-edit-5.45*/; font-size: 13px; color: var(--main-font-color); line-height: 1.3; text-transform: uppercase; }



/* custom checkbox styling on hover/click/checked etc ... */
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is active */
.newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 8px; bottom: 6px; width: 8px; height: 14px; border: solid var(--main-font-color); border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }



@media only screen and (max-width: 1099px)
{
  .newsletter__disclainers-and-submit { justify-content: center; }
  .newsletter__disclainers { flex-basis: 100%; }
  .newsletter__submit { flex-basiss: 50%; }
}

@media only screen and (max-width: 930px)
{
  .newsletter__adults-only { max-width: 54vw; }
}

@media only screen and (min-width: 768px)
{
  .newsletter__exclusively-for-adult--mobile-only { display: none; }
}


@media only screen and (max-width: 767px)
{
  .newsletter__exclusively-for-adult--desktop-only { display: none; }

  .newsletter__form-inner { gaps: 12px; }

  .newsletter__input { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }
  .newsletter__province-container { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }

}

@media only screen and (max-width: 600px)
{
  .newsletter {  }
  .newsletter__inner { max-width: 360px; }

  .newsletter__heading--desktop { display: none; }
  .newsletter__heading--mobile { display: inline; max-width: 400px; }

  .newsletter__subheading { max-widths: 400px; margin-left: auto; margin-right: auto; }

  .newsletter__input { flex-basis: 100%; max-width: 100%; }
  .newsletter__province-container { flex-basis: 100%; max-width: 100%; }



}

@media only screen and (max-width: 340px)
{
  .newsletter__submit { flex-basis: 100%; }
  .newsletter__submit-link { font-size: 22px; padding-left: 16px; padding-right: 16px; }
  .newsletter__submit-arrow { width: 70px; }
}




/* -------------------------------------------------------------------------- */
/* INVESTORS / SHARE INFORMATION
/* -------------------------------------------------------------------------- */

.stock-info { color: var(--main-font-color); font-family: 'TypewriterSpool-SFT-Semi-Bold'; margin-bottom: 20px; }

.stock-info__row { display: flex; border-top: 1px solid var(--main-font-color); }
.stock-info__row--top { border-top: 4px solid var(--main-font-color); }

.stock-info__left { flex: 0 0 230px; padding: 10px 10px 10px 0; text-transform: uppercase; border-right: 4px solid var(--main-font-color); line-height: 1.2em; display: flex; flex-flow: row wrap; gap: 0 14px; align-content: flex-start; }
.stock-info__left--top { border-right: 1px solid rgba(0, 0, 0, 0); }
.stock-info__inner-heading { display: inline-block; flex: 0 0 60px; margin-bottom: 6px; }
.stock-info__inner-text { display: inline-block; flex: 0 0 calc(100% - 80px); margin-bottom: 6px; }

.stock-info__right { flex: 1; padding: 10px 14px; /*word-break: break-word;*/ display: flex; flex-flow: row wrap; gap: 0 20px; text-transform: uppercase; line-height: 1.2em;  }


.share-information { height: clamp(400px, calc(100vh - 460px), 1000px); margin-top: 6px; }

@media only screen and (max-width: 959px)
{
  .stock-info__left { flex-basis: 180px; }
}
@media only screen and (max-width: 767px)
{
  .share-information { height: clamp(300px, calc(100vh - 330px), 1000px); margin-top: 6px; }
}

@media only screen and (max-width: 600px)
{
  .stock-info__left { flex-basis: 150px; }
}

@media only screen and (max-width: 460px)
{
  .stock-info__left { flex-basis: 130px; }

  .stock-info__inner-heading { display: inline-block; flex-basis: 100%; }
  .stock-info__inner-text { display: inline-block; flex-basis: 100%; margin-bottom: 20px; }
  .stock-info__inner-text--last { margin-bottom: 0; }
}
@media only screen and (max-width: 359px)
{
  .stock-info__left, 
  .stock-info__right { flex-basis: 50%; }
  .stock-info__right { padding-left: 14px; padding-right: 10px; }
}



/* -------------------------------------------------------------------------- */
/* INVESTORS / PRESS RELEASES
/* -------------------------------------------------------------------------- */

.press-releases { display: flex; flex-flow: row wrap; gap: 80px 80px; padding-top: 16px; }

.press-releases__item { flex: 0 0 calc(50% - 40px); }

.press-releases__date { margin-bottom: 0.6em; }


/* rectangle button that's used in multiple places (todo: move this to top of file) */

.rectangle-button { display: inline-block; margin-top: .5em; padding: 10px 12px; background-color: var(--main-font-color); color: var(--opposite-of-main-font-color); font-family: "TypewriterSpool-SFT-Extended-Extra-Bold-Italic"; font-size: var(--body-font-size); }
.rectangle-button--read-more { flex: 0 0 154px; margin-top: 0; }
.rectangle-button--fr { line-height: 1.3em; flex-basis: 188px; }
.rectangle-button:hover { background-color: #ff5b35; }

.rectangle-button__inner { display: flex; align-items: center; height: 100%; }

/* only show proper content for each language */
html[lang="en"] .section__business-article-breadcrumb-heading-date-fr { display: none; }
html[lang="fr"] .section__business-article-breadcrumb-heading-date-en { display: none; }

@media only screen and (max-width: 1023px)
{
  /*.press-releases { gap: 80px 80px; }*/
  .press-releases__item { flex: 0 0 100%; }
}


/* -------------------------------------------------------------------------- */
/* INVESTORS / PRESS RELEASES / ACTUAL ARTICLES (news articles)
/* -------------------------------------------------------------------------- */

.section__business-article p, 
.section__business-article li {  }
.section__business-article li { font-family: "TypewriterSpool-SFT-Semi-Bold"; line-height: var(--body-font-line-height); }

.section__business-article p strong,
.section__business-article li strong { font-family: "TypewriterSpool-SFT-Extra-Bold"; }


.section__business-article img { max-width: 100%; }

.section__business-article a { text-decoration: underline; }

.section__business-article small { font-size: calc(var(--body-font-size) * .8); line-height: calc(var(--body-font-line-height) * .8); }


.section__business-article-list-with-circles li { list-style-type: circle; }


/* added the below in 2023, so now I'm using the "press-release" BEM name finally */

.press-release__table-wrapper { max-width: 100%; overflow-x: auto; padding-bottom: 10px; /* so there's space between the table-bottom and the horizontal-scrollbar that shows on narrow screens */ }

.press-release__table-with-lines th,
.press-release__table-with-lines td { border: 1px solid var(--main-font-color); padding: 4px 8px; }

.press-release__table-with-lines th { background: #bdd7ee; vertical-align: bottom; }

.press-release__table-with-lines th p,
.press-release__table-with-lines td p { font-size: calc(var(--body-font-size) * .9); margin-bottom: 0; }


.press-release__tr-blue p { color: #0070c0; }

.press-release__th-left-aligned { text-align: left; }



@media only screen and (max-width: 519px)
{
  .press-release__table-with-lines th p,
  .press-release__table-with-lines td p { font-size: calc(var(--body-font-size) * .8); }
  
  .press-release__url-to-line-break-under-520px { word-break: break-all;  }
}
@media only screen and (max-width: 339px)
{
  .press-release__table-with-lines th p,
  .press-release__table-with-lines td p { font-size: calc(var(--body-font-size) * .66); }

}







/* -------------------------------------------------------------------------- */
/* INVESTORS / FINANCIAL INFORMATION
/* -------------------------------------------------------------------------- */

.spacer-above-investor-tab-buttons { height: 20px; }



.financial-info-card { display: flex; flex-flow: row wrap; gap: 30px; margin-top: 60px; margin-bottom: 100px; }
.financial-info-card__image-container { flex: 0 0 min(360px, calc(50% - 15px)); }
.financial-info-card__text-container { flex: 1; }

.financial-info-card__image { max-width: 100%; border: 1px solid var(--main-font-color); }

@media only screen and (max-width: 900px)
{
  .financial-info-card__image-container { flex-basis: 100%; }
  .financial-info-card__text-container { flex-basis: 100%; }
}


/* -------------------------------------------------------------------------- */
/* INVESTORS / GOVERNANCE page
/* -------------------------------------------------------------------------- */






/* -------------------------------------------------------------------------- */
/* INVESTORS / GOVERNANCE / DOCUMENTS
/* -------------------------------------------------------------------------- */

/* there's no actual .governance-documents div as of now, but could add that to fix this BEM inconsistency */

.document { color: var(--main-font-color); display: flex; flex-flow: row nowrap; align-items: flex-end; gap: 10px; margin-bottom: 20px; }

.document__heading { flex: 0 1 auto; overflow: hidden; line-height: 1.4em; margin-bottom: 0; display: flex; align-items: flex-end; }

/*.document__item:hover .document__heading-link { color: var(--orange); }
.document__item:hover .rectangle-button { background-color: var(--orange); }*/


.document__dots { flex: 1; overflow: hidden; border-bottom: 4px dotted var(--main-font-color); margin-right: 10px; margin-bottom: 7px; }

.document__dot-in-fr-word { font-family: Arial, Helvetica, sans-serif; }

@media only screen and (max-width: 1200px)
{
  .document { flex-flow: row wrap; margin-bottom: 40px; }
  .document__heading { flex-basis: 100%; }
  .document__dots { display: none; }
}




/* -------------------------------------------------------------------------- */
/* INVESTORS / ANALYST COVERAGE
/* -------------------------------------------------------------------------- */

.analyst { margin-top: 60px; color: var(--main-font-color); font-family: 'TypewriterSpool-SFT-Semi-Bold'; }
.analyst--bottom { margin-top: 50px; }

.analyst__row { display: flex; border-top: 1px solid var(--main-font-color); }
.analyst__row--top { border-top: 4px solid var(--main-font-color); }

.analyst__heading { flex: 0 0 120px; padding: 10px 0; text-transform: uppercase; border-right: 1px solid var(--main-font-color); line-height: 1.2em; }
.analyst__heading--top { border-right: 1px solid rgba(0, 0, 0, 0); }

.analyst__text { flex: 1; padding: 10px 20px; line-height: 1.2em; /*word-break: break-word;*/ }

@media only screen and (max-width: 460px)
{
  .analyst__heading { flex-basis: 86px; }
}




/* -------------------------------------------------------------------------- */
/* ABOUT US page
/* -------------------------------------------------------------------------- */

.paragraph-above-bios { margin-bottom: 40px; }

.bio { color: var(--main-font-color); border-top: 5px solid var(--main-font-color); display: flex; }

.bio__image-container { flex: 0 0 260px; }
.bio__text-container { flex: 1; }

.bio__image { max-width: 100%; vertical-align: bottom; }

.bio__text-container { /*display: flex;*/ }

.bio__text-top { display: flex; border-bottom: 1px solid var(--main-font-color); min-height: 91px; /* we use 91 instead of 90 because there's a border too, so the content-area here is actually 90px */ }  

.bio__name-and-position { flex: 1; padding: 10px 20px 10px 0; display: flex; flex-flow: column nowrap; justify-content: center; }
.bio__linked-in { border-left: 1px solid var(--main-font-color); flex: 0 0 90px; display: flex; justify-content: center; align-items: center; }

.bio__linked-in-link { flex: 0 0 30%; }
.bio__linked-in-image { max-width: 100%; }

.bio__name { font-family: "OPTIChampionBold"; font-size: 20px; margin: 0 0 4px; line-height: 1.2em; }
.bio__position { padding-bottom: 0; margin: 0; line-height: 1.2em; }
.bio__about { margin: 22px 90px 22px 0; }

@media only screen and (max-width: 1279px)
{
  .bio__image-container { flex-basis: 42%; }
}
@media only screen and (max-width: 1100px)
{
  .bio__about { margin-right: 0; }
}
@media only screen and (max-width: 900px) and (min-width: 768px)
{
  .bio__linked-in { flex-basis: 70px; }
  .bio__linked-in-link { flex-basis: 40%; }
}

@media only screen and (max-width: 600px)
{
  .bio { flex-wrap: wrap; }
  .bio__image-container { flex-basis: 100%; } 
  .bio__text-top { border-top: 1px solid var(--main-font-color); }
}
@media only screen and (max-width: 400px)
{
  .bio__linked-in { flex-basis: 70px; }
  .bio__linked-in-link { flex-basis: 40%; }
}





/* -------------------------------------------------------------------------- */
/* NEWS page
/* -------------------------------------------------------------------------- */

.section__news { display: flex; flex-flow: row wrap; gap: 80px 80px; padding-top: 16px; }

.news-item { flex: 0 0 calc(50% - 40px); }

.news__date { }

.news-bar { border-top: 1px solid var(--main-font-color); border-bottom: 1px solid var(--main-font-color); display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--main-font-color); font-size: var(--body-font-size); }
.news-bar__left { flex: 1; padding: 10px 10px 10px 0; font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; display: flex; align-items: center; line-height: 1.3em; }
.news-bar__right { flex: 0 0 154px; /*border-left: 1px solid var(--main-font-color);*/ padding: 0; display: flex; align-items: stretch; flex-wrap:  wrap; gap: 10px 20px; justify-content: flex-end; /*border:solid 1px red;*/ }

html[lang="fr"] .news-bar__right { flex-basis: 190px; }

/*.news-bar__link { font-family: "TypewriterSpool-SFT-Extended-Extra-Bold-Italic"; }*/
.news-bar__link--share { /*display: flex; align-items: center; justify-content: flex-end;*/ display: none; }

.news-bar__share-icon { width: 20px; }

@media only screen and (max-width: 1199px) and (min-width: 1024px)
{
  html[lang="fr"] [data-news-bar="let-css-decide-layout"] .news-bar__right { flex-basis: 100%; justify-content: flex-start; }
}

@media only screen and (max-width: 1023px)
{
  /*.press-releases { gap: 80px 80px; }*/
  .news-item { flex: 0 0 100%; }
}


/* as of Jan 23 2023 the JS no longer runs here, so it's only CSS that makes these decsisons */

@media only screen and (max-width: 474px)
{
  html[lang="fr"] [data-news-bar="let-css-decide-layout"] .news-bar__left { flex-basis: 100%; /* border-bottom: 1px solid var(--main-font-color);*/ }
  html[lang="fr"] [data-news-bar="let-css-decide-layout"] .news-bar__right { flex-basis: 100%; justify-content: flex-start; }
}

/* we don't know how long the "source" text will be, so we can't use media-queries to decide when this should be stacked, so we let JS decide, because it's fairly complex (can't just use flex because it doesn't know to break long text on mul;tiple lines which causes problems and because we can't detect with css whether a flex item has wrapped or not so JS is the only way to know how to style this) */

@media only screen and (max-width: 428px)
{
  /* JS might override this if a different layout makes more sense for any of the news articles, but we set it this way beforehand anyway to reduce the repaint jankiness because there's a delay before JS sets this, and at this browser-width we likely want everything stakced anyway */
  [data-news-bar="let-css-decide-layout"] .news-bar__left { flex-basis: 100%; /* border-bottom: 1px solid var(--main-font-color);*/ }
  [data-news-bar="let-css-decide-layout"] .news-bar__right { /*border-left: none; padding-left: 0;*/ }
}

/* JS might add this on a per-article basis to make sure it always looks good; keep this below the @media stuff to make sure this (the stuff set by JS) can always override */
/*[data-news-bar="equal-width"] .news-bar__left { flex: 1; }*/ /* this lets the text on the left line-break */

/*[data-news-bar="stacked"] .news-bar__left*/ { /* flex-basis: 100%; border-bottom: 1px solid var(--main-font-color);*/ }
/*[data-news-bar="stacked"] .news-bar__right*/ { /*border-left: none; padding-left: 0; flex: 0 0 100%; justify-content: flex-start;*/ }

/*@media only screen and (max-width: 500px)
{
  .news-bar__left { flex-basis: 100%; }
  .news-bar__right { flex-basis: 100%; border-left: none; border-top: 1px solid #f5f3e2; padding-left: 0; }
}*/



/* -------------------------------------------------------------------------- */
/* OUR GROW page
/* -------------------------------------------------------------------------- */

.facility { margin-top: 50px; color: var(--main-font-color); font-family: 'TypewriterSpool-SFT-Semi-Bold'; font-size: var(--body-font-size); }

.facility__heading { border-top: 4px solid var(--main-font-color); padding: 10px 0; color: var(--main-font-color); font-family: 'TypewriterSpool-SFT-Extra-Bold'; line-height: 1.2em; }

.facility__info { display: flex; border-top: 1px solid var(--main-font-color); }

.facility__info-heading { flex: 0 0 120px; padding: 10px 0; text-transform: uppercase; border-right: 1px solid var(--main-font-color); line-height: 1.2em; }
.facility__info-heading--fr { flex-basis: 140px; }

.facility__info-text { flex: 1; padding: 10px 20px; line-height: 1.2em; /*word-break: break-word;*/ }

.facility__text { border-top: 1px solid var(--main-font-color); padding: 10px 0 0; margin-bottom: 4em; }
.facility__paragraph { padding: 0; margin: 0; }
.facility__paragraph--last { margin-bottom: 1.2em; }
.facility__image { max-width: 100%; margin-top: 1em; }
.facility sup { vertical-align: super; font-size: 70%; } /* not BEM-ified because needed often */

@media only screen and (max-width: 460px)
{
  .facility__info-heading:not(.facility__info-heading--fr) { flex-basis: 86px; }

  /* fr site needs to stack a bit now */
  .facility__info--fr { flex-wrap: wrap; }
  .facility__info-heading--fr { flex-basis: 100%; border-right: none; }
  .facility__info-text--fr { padding: 0 0 10px 0; }
}


:root {
  --pheno-cols: 3;
  --pheno-gap: 20px;
}

.pheno { font-size: 20px; letter-spacings: 20px; color: var(--main-font-color); borders:solid 1px red; display: flex; flex-flow: wrap; gap: var(--pheno-gap); overflow-x: auto; overflow-y: hidden; max-width: 90vw; /* this line of magic prevents this from refusing to get beyond a certain narrowness, which had been causing this problem: https://i.imgur.com/yWJlsBR.png , and setting this max-width to 100% didn't solve this for some inexplicable reason, and seeting max-width to less than 100% looks wrong, so this is the only fix, and if this fails to work in future, see the JS fix for "pheno section" instead */ width: 100%; displays: none; padding-bottom: 20px; margin-bottom: 40px; }

.pheno__card { flex: 0 0 calc( (100% / var(--pheno-cols)) - (var(--pheno-gap) * (var(--pheno-cols) - 1)) / var(--pheno-cols) ); text-align: centers; borders: 1px solid green; font-family: 'TypewriterSpool-SFT-Extra-Bold'; }

.pheno__image { max-width: 100%; }

.pheno__number-and-line { display: flex; align-items: center; gap: 8px;  }
.pheno__number { flex: 0 0 auto; font-family: 'Futura-ExtBol'; font-size: 30px; }
.pheno__line { /*margin-left: 30px; width: calc(100% - 30px);*/ flex: 1; height: 2px; background: url('/img/dashed-line.png?v=3') top left repeat-x; }

.pheno__text { max-width: 78%; text-transform: uppercase; line-height: 1.2; }
.pheno__text-small { font-size: 15px; }


@media only screen and (max-width: 2400px)
{
  .pheno { /*gap: 1.4%;*/ }
  .pheno__card { /*flex-basis: 30.2%;*/ }
}
@media only screen and (max-width: 1300px)
{
  .pheno { /*gap: 2.4%;*/ }
  .pheno__card { /*flex-basis: 43%;*/ }
}

@media only screen and (max-width: 1000px)
{
  :root {
    --pheno-cols: 2;
  }
}

@media only screen and (max-width: 479px)
{
  :root {
    --pheno-cols: 1;
  }
  .pheno__card { /*flex-basis: 80%;*/ }
  .pheno__text { max-width: 92%; }
}



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

.footer { flex: 0 0 100%; height: var(--page-border-width); padding: 0 var(--page-border-width); backgrounds: yellow; align-items: center; font-family: "TypewriterSpool-SFT-Semi-Bold"; /*justify-content: center;*/ }

.footer__left { flex: 0 0 46px; margin-right: 18px; }
.footer__middle { flex: 1; color: #1e1e1e; }
.footer__right { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 30px; /*text-align: right; align-items: space-between;*/ borders:solid 1px red; padding-left: 30px; }

.footer__middle-paragraph { font-familys: "CourierNew"; font-size: 10px; line-height: 1.4em; color: #1e1e1e; margin: 0; /*display: flex; align-items: center;*/ }

.footer__middle-button,
.footer__middle-button:active,
.footer__middle-button:visited { color: #1e1e1e; text-decoration: none; }

.footer__agsafe-image { vertical-align: middle; max-width: 100%; }

.linked-in { display: inline-block; float: right; max-width: 32px; /*transform: translateX(5px);*/ /* so it lines up with right-side of video */ }
.linked-in__image { max-width: 100%; }

.footer__language-chooser { color: #1e1e1e; }
.footer__language-chooser-link { color: #1e1e1e; }
.footer__language-chooser-link,
.footer__language-chooser-link:hover,
.footer__language-chooser-link:visited { text-decoration: none; }

@media only screen and (max-width: 1100px)
{
  html[lang="fr"] .footer__right { gap: 2vw; }
  html[lang="fr"] .footer__middle-paragraph { line-height: 1.1em; }
  html[lang="fr"] .nav-button--get-updates .nav-button__text { font-size: 1.2vw; } /* not BEM because super-specific situation */
  html[lang="fr"] .nav-button--contact .nav-button__text { font-size: 1.2vw; } /* not BEM because super-specific situation */
}
@media only screen and (max-width: 960px) and (min-width: 768px)
{
  html[lang="fr"] .footer__left { order: 1; }
  html[lang="fr"] .footer__middle { order: 3; flex-basis: 100%; }
  html[lang="fr"] .footer__right { order: 2; flex-basis: calc(100% - 64px); }
  html[lang="fr"] .footer__middle-paragraph { font-size: 9px; } /* this "middle-paragraph" now sits at bottom of page because of order-change */

  html[lang="fr"] .nav-button--get-updates .nav-button__text { font-size: 13px; } /* not BEM because super-specific situation */
  html[lang="fr"] .nav-button--contact .nav-button__text { font-size: 13px; } /* not BEM because super-specific situation */
}
@media only screen and (max-width: 860px) and (min-width: 768px)
{
  .footer__right { gap: 20px; }
}

@media only screen and (max-width: 810px)
{
  .footer__middle-paragraph { line-height: 1.1em; }
}

@media only screen and (max-width: 767px)
{
  .footer { padding: 0 20px; }
  .footer__right { display: none; } /* hide the GET IN TOUCH button and linked-in lottie */
}








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

@media only screen and (min-width: 768px)
{
  .mobile-menu { display: none !important; }
}

.mobile-menu { 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) top left/700px repeat #1e1e1e;*/ background-color: #f5f3e2; font-family: "Futura-ExtBol"; }

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

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

.mobile-menu__close { position: absolute; top: 14px; right: 20px; width: 33px; }
.mobile-menu__close-x { width: 100%; }

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

.mobile-menu__list { max-width: 400px; margin: auto; padding: 60px 30px 30px; }
.mobile-menu__item { margin: 0; /* don't put any vertical maring in (use spacers instead - see below) */ text-align: left; list-style-type: none; }
.mobile-menu__link { display: block; background: url(/img/bg-light.jpg?v=1) center top repeat var(--bg-light-color); color: #1e1e1e; font-size: 48px; font-weight: bold; padding: 14px 0; margin: 0 8px; }
.mobile-menu__link--smaller { font-size: 34px; }

.mobile-menu__link:hover { color: var(--orange); }
.mobile-menu__link--available:hover { color: #1e1e1e; 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__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__link--available { padding: 4px 20px; height: 76px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; }

.mobile-menu__investors-submenu { margin-left: 26px; }

/* spacer li elements; needed because the STRAINS slideDown is janky if we use margins to space the li's rather than spacers */
.mobile-menu__spacer { height: 20px; list-style-type: none; }
.mobile-menu__spacer--linked-in { height: 20px; }

.mobile-menu__linked-in { display: inline-block; width: 36px; }

.mobile-menu__language-chooser { color: #1e1e1e; font-family: "TypewriterSpool-SFT-Semi-Bold"; font-size: 20px; }
.mobile-menu__language-chooser-link { color: #1e1e1e; }

.mobile-menu__copyright-etc { color: #1e1e1e; font-size: 13px; line-height: 2em; }

/* submenu for all strains, hidden at first (JS unhides) */
.mobile-menu__sub-list { display: none; margin-top: 0; }

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

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

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

.mobile-menu__social-link { color: #00AAE2; }
.mobile-menu__instagram,
.mobile-menu__facebook,
.mobile-menu__social-link:hover { color: var(--orange); cursor: pointer; }

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

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







/* -------------------------------------------------------------------------- */
/* overrides - don't show nav buttons until that's activated by JS
/* -------------------------------------------------------------------------- */

/* necessary because when page loads we don't know if we want EN or FR buttons, so hide them all until JS knows what language this is and shows the proper ones */
/*.nav-button:not(.mobile-only):not(.nav-button--mobile) { display: none; }*/



/* -------------------------------------------------------------------------- */
/* states
/* -------------------------------------------------------------------------- */

.is-hiding { /*animation-name: fadein; animation-duration: 1s;*/ }
.is-hidden { display: none; }

.is-showing { animation-name: fadein; animation-duration: 1s; }

.is-active .nav-button__text { color: #ff5b35; }

/*@keyframes fadein
{
  from { opacity: 0; }
  to   { opacity: 100%; }
}
@keyframes fadeout
{
  from { opacity: 100%; }
  to   { opacity: 0; }
}*/