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


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




/* -------------------------------------------------------------------------- */
/* 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-light.jpg?v=1') top left/50% repeat; position: relative; }




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

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


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

.header { flex: 0 0 100%; height: 60px; padding: 0 60px; backgrounds: yellow; align-items: center; /*justify-content: center;*/ }

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

.header__language-chooser { color: #000000; }
.header__language-chooser-link,
.header__language-chooser-link:hover,
.header__language-chooser-link:visited { color: #000000; text-decoration: none; }

@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: #000000; 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-in-touch { margin-right: 40px; }
.nav-button--menu { display: none; }

.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: "OPTIChampionBold"; font-size: 18px; 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__text {
  
  /*line-height: 20px;*/
  /*height: 20px;*/
}

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

.nav-button__text--bottom {
  position: absolute;
  top: 100%;
  left: 0;
}


@media only screen and (max-width: 1366px)
{
  .nav-button__plus { font-size: 20px; }
  .nav-button__text { font-size: 16px; }
}
@media only screen and (max-width: 860px) /* if you change this, check the footer__right too */
{
  .nav-button__text--fr { font-size: 12px; }
}
@media only screen and (max-width: 767px)
{
  .header__language-chooser { 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; }
  .footer__right { display: none; } /* hide the GET IN TOUCH button and linked-in lottie */

  .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-size: 25px; letter-spacing: 3px; }
  .nav-button__text--mobile-fr { font-size: 21px; letter-spacing: 3px; }

}

@media only screen and (max-width: 400px)
{
  .nav-button__text--mobile-fr { font-size: 15px; letter-spacing: 3px; }
}




/* -------------------------------------------------------------------------- */
/* 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 60px; align-items: center; justify-content: center; /*transform: rotate(-90deg);*/ background: url('/img/bg-light.jpg?v=1') top left/700px repeat; 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-light.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 - 120px); /* 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 CANNABIS" - big orange logo
/* -------------------------------------------------------------------------- */

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

@media only screen and (max-width: 900px)
{
  /*.main-logo { top: -.2vw; width: 29vw; }*/
}
@media only screen and (max-width: 767px)
{
  .main-logo { top: -14px; left: -2px; width: 190px; z-index: 3; }
}
@media only screen and (max-width: 400px)
{
  .main-logo { top: -1.6vw; left: -2px; width: 50vw; z-index: 3; }
}

/* just for phones that are landscape but wide enough that we're still showing the centered logo; we need the logo to shrink because otherwise it takes up too much height here and we can't fit all content */

@media only screen and (min-width: 767px) and (max-width: 900px) and (max-height: 500px) 
{
  .main-logo__image { transform: scale(.7) translateY(-10px); }
}

@media only screen and (min-width: 768px) and (max-height: 700px)
{
  .main-logo__image { transform: scale(.7) translateY(-22px); }
}



/* -------------------------------------------------------------------------- */
/* "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: white; 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-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: center; 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) */ }


/* -------------------------------------------------------------------------- */
/* 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; }
.section--homepage { 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% - 120px); /* 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 74%; overflow-y: auto; padding: 0 40px 0 0; margin-top: 40px; }

@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 30px; max-height: calc(100% - 120px); /* this section can be taller now that there's no "X" button */  flex: 0 0 90%; /*max-height: calc(100% - 120px);*/ padding-left: 0; }
  .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 */ }
}

@media only screen and (max-height: 500px)
{
  .section { max-height: calc(100% - 60px); }
}

@media only screen and (max-width: 400px) and (max-height: 500px)
{
  .section { max-height: calc(100% - 100px); }
  
}

@media screen and (max-width: 600px) and (max-height: 600px)
{
  .section--homepage {  max-height: calc(100% - 60px); }
}

/* -------------------------------------------------------------------------- */
/* 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--dunn { width: 85%; }
.logo__image--bzam { width: 85%; }
.logo__image--fresh { width: 75%; }

/* hover effects */
.logo__link:not(.logo__link--dunn-craft):hover { transform: scale(1.1); transition: transform .2s ease; }
.logo__link--dunn-craft:hover { opacity: .7; transition: opacity .2s ease; }


.logo__divider { display: block; flex: 0 0 94%; height: 1px; background: #fff; } /* 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; }
.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, 
  .logo[data-columns="one-column"] .logo__divider { margin: .5vh 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%; }
.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: 24%; padding: 3%; }
.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: 24%; padding: 2.2% 1.5%; }
.logo[data-columns="four-column"] .logo__image--snackbar { width: 85%; }

.logo[data-columns="eight-column"] { }
.logo[data-columns="eight-column"] .logo__panel { flex-basis: 12%; padding: 2%; }
.logo[data-columns="eight-column"] .logo__panel--house-brand-last { border-right: 1px solid #fff; }
.logo[data-columns="eight-column"] .logo__divider { display: none; }



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

h2 { color: white; line-height: 1.2em; margin-bottom: 1em; font-size: 24px; font-weight: bold; font-family: "OPTIChampionBold"; }
h3 { color: white; line-height: 1.2em; margin-bottom: 0; font-size: 24px; font-weight: bold; font-family: "CourierNew"; }
p { color: white; line-height: 1.4em; margin-bottom: 1.2em; font-size: 16px; font-family: "Courier"; }
p.large-text { font-size: 30px; line-height: 1.2em; margin-bottom: 1em;  } /* used on "Our Mission" page */
a { color: #ffffff; text-decoration: none; }
ul { margin-bottom: 1.2em; }
li { color: white; line-height: 1.2em; margin-bottom: 1.2em; font-size: 16px; font-family: "Courier"; 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
/* -------------------------------------------------------------------------- */

/* width */
.section::-webkit-scrollbar {
  width: 9px;
}

/* Track */
.section::-webkit-scrollbar-track {
  background: #ffffff;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  background-clip: padding-box;
}

/* Handle */
.section::-webkit-scrollbar-thumb {
  background: #ffffff;
}

/* Handle on hover */
.section::-webkit-scrollbar-thumb:hover {
  background: #dddddd;
  width: 20px;
}




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





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

.footer { flex: 0 0 100%; height: 60px; padding: 0 60px; backgrounds: yellow; align-items: center; /*justify-content: center;*/ }
.footer__left { flex: 1; }
.footer__right { flex: 0 0 360px; text-align: right; align-items: space-between; }

.footer__left-paragraph { font-family: "CourierNew"; font-size: 10px; line-height: 1.4em; color: #000000; margin: 0; }

.footer__left-button,
.footer__left-button:active,
.footer__left-button:visited { color: #000000; text-decoration: none; }

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

@media only screen and (max-width: 860px)
{
  .footer__right { flex-basis: 300px; } /* we shrink the fonts here so this can be smaller */
}

@media only screen and (max-width: 767px)
{
  .footer { padding: 0 20px; }
}








/* -------------------------------------------------------------------------- */
/* 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-light.jpg?v=1) top left/700px repeat #1e1e1e; 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: 30px; right: 30px; 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: #000000; 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; }

/* 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: 28px; list-style-type: none; }

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

.mobile-menu__language-chooser { color: #000000; }

.mobile-menu__copyright-etc { color: #000000; font-size: 10px; }

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