/* -------------------------------------------------------------------------- */
/* used sitewide */
/* -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html,
body { padding: 0; margin: 0; font-family: 'Arial', sans-serif; background-color: #575757; }

.page-container { margin: 0 auto; max-width: 1400px; }

/* reset */
input,
textarea { background: none; color: inherit; border: none; padding: 0; font: inherit; outline: inherit; border-radius: 0; }


em { font-style: italic; }

h2 { color: #ffffff; font-size: 36px; line-height: 1.2; font-weight: bold; margin: 0 0 50px 0; text-align: center; }

@media only screen and (max-width: 600px)
{
  h2 { font-size: 32px; }
}

/* buttons */

.big-button { display: inline-block; padding: 22px 54px; background-color: #f15c3b; color: #ffffff; font-size: 18px; font-weight: bold; letter-spacing: 4px; line-height: 1.3; text-decoration: none; }

@media only screen and (max-width: 400px)
{
  .big-button { padding: 20px !important; width: 100%; text-align: center !important; letter-spacing: 2px; } 

  .talk-to-us .big-button { padding: 20px !important; width: 80%; max-width: 100%; text-align: center !important; letter-spacing: 2px; } 
}




/* -------------------------------------------------------------------------- */
/* nav */
/* -------------------------------------------------------------------------- */

#nav { position: absolute; top: 35px; width: 100%; max-width: 1400px; display: flex; }

#nav > div { display: flex; borders: solid 1px red; align-items: center; }

#nav .nav-left, 
#nav .nav-right { flex: 0 0 190px; text-align: right; display: flex; justify-content: flex-start; align-items: flex-start; }
#nav .nav-left { padding-left: 40px; }
#nav .nav-right { justify-content: flex-end; align-items: center; padding-right: 40px; } 
#nav .nav-middle { flex: 1; text-align: center; justify-content: center; }

/* Instagram icon, Facebook icon */
#nav .nav-left a.social-icon { flex: 0 0 26px; }
#nav .nav-left a.social-icon:first-child { margin-right: 8px; }

/* Shop, Contact */
#nav .nav-right div { display: inline-block; position: relative; margin-right: 24px; }
#nav .nav-right div:last-child { margin-right: 0; }
#nav .nav-right a { color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; }

.bzam-logo { width: 188px; }

@media only screen and (max-width: 1280px)
{
  /*#nav { top: 30px; }*/
  .bzam-logo { width: 180px; }
}

@media only screen and (max-width: 1000px)
{
  /*#nav { top: 26px; }*/
  /*#nav .nav-left a.social-icon { flex: 0 0 30px; }*/
  .bzam-logo { width: 140px; }
}

@media only screen and (max-width: 800px)
{
  #nav { top: 16px; }
  #nav .nav-left a.social-icon { flex: 0 0 26px; }
  .bzam-logo { width: 140px; }
}



/* -------------------------------------------------------------------------- */
/* nav-mobile */
/* -------------------------------------------------------------------------- */

/* nav mobile - the whole bar across top */
#nav-mobile { position: absolute; top: 0px; padding-top: 16px; width: 100%; display: flex; align-items: flex-start; background-color: #f45c33; }

/* nav left and right */
#nav-mobile .nav-left,
#nav-mobile .nav-right { display: flex; align-items: flex-start; }

#nav-mobile .nav-left { flex: 0 0 50%; justify-content: flex-start; padding-left: 40px; }
#nav-mobile .nav-right { flex: 1; justify-content: flex-end; padding-right: 40px; }

/* hamburger */
.hamburger { /*position: fixed; top: 20px; right: 40px; font-size: 100px; z-index: 9999; display: block;*/ }
.hamburger .line { border-bottom: 2px solid #f1efd9; width: 40px; margin-bottom: 7px; }



/* ---------------------------------- */
/* mobile dropdown */
/* ---------------------------------- */

#mobile-dropdown { display: block; background-color: #f45c33; margin-top: 40px; }

/* "x" */
#mobile-menu .close-mobile-menu { position: fixed; top: 10px; right: 40px; font-size: 100px; width: 40px; height: 40px; z-index: 9999; background-images: url('../img/btn-x.svg'); }

/* hamburger - turn into "x" when needed */
.close-mobile-menu .line:first-child { transform: rotate(45deg); margin-top: 18px; }
.close-mobile-menu .line:nth-child(2) { transform: rotate(-45deg); margin-top: -9px; }
.close-mobile-menu .line:last-child  { display: none; }



/* ---------------------------------- */
/* mobile menu (modal) */
/* ---------------------------------- */

#mobile-menu #lightbox {
  position: fixed;
  /*display: none;*/
  top: 0%;
  right: 0;
  left: 0%;
  bottom: 0;
  width: 100%;
  height: 100%;
   overflow-y: scroll; /* hidden; */
  z-index: 9998; 
  background: #f45c33;

}

/* lightbox hidden at first */
#mobile-menu .open-mobile-menu:not(.active),
#mobile-menu .close-mobile-menu:not(.active),
#mobile-menu #lightbox:not(.active) { display: none; }

#mobile-menu .tbl { display: table; width: 100%; height: 100%; }
#mobile-menu .tbl-cell { display: table-cell; vertical-align: middle; padding: 60px 0 40px; }
#mobile-menu .tbl-cell .ul-mobile-menu { /*margin-top: 230px;*/ }
#mobile-menu .tbl-cell li { margin: 0; text-align: center; list-style-type: none; }
#mobile-menu .tbl-cell li a { display: block; color: #ffffff; font-size: 30px; font-weight: bold; padding: 14px 0; text-decoration: none; }
#mobile-menu .tbl-cell li a:hover { background: #ffffff; color: #f45c33; }

/* strains dropdown */
#mobile-menu .tbl-cell li #ul-mobile-menu-strains { margin: 4px 0 12px; display: none; } /* js makes this display when necessary */
#mobile-menu .tbl-cell li #ul-mobile-menu-strains li {  }
#mobile-menu .tbl-cell li #ul-mobile-menu-strains li a {  font-size: 20px; padding: 8px 0; }
#mobile-menu .tbl-cell li #ul-mobile-menu-strains li a:hover { background: #dac3dc; }

/* social icons at bottom */
#mobile-menu .social-icons { margin: 40px auto 40px; text-align: center; }
#mobile-menu .social-icons a:not(:last-child) { margin-right: 12px; }
#mobile-menu .social-icons img { width: 48px; vertical-align: bottom; }

/* ---------------------------------- */





#nav-mobile,
#mobile-dropdown { display: none; }

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

  /* show mobile nav / hide desktop nav */
  #nav { display: none; }
  #nav-mobile,
  #mobile-dropdown { display: flex; }

  


}

@media only screen and (max-width: 600px)
{
  #nav-mobile { padding-top: 20px; }
  .bzam-logo { width: 120px; }

  #hero { margin-top: 20px; }
}

@media only screen and (max-width: 600px)
{
  #nav-mobile { padding-top: 14px; }
  .hamburger { top: 20px; }
}





/* -------------------------------------------------------------------------- */
/* hero (Now dispensing...) */
/* -------------------------------------------------------------------------- */

#hero { backgrounds: url(/img/bzam-hero.jpg); background-size: contain; background-repeat: no-repeat; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; }

h1.now-dispensing { margin: 0 auto; height: 0; padding: 0; color: #fff; text-align: center; font-family: 'Arial', sans-serif; font-size: 72px; font-weight: bold; line-height: 1.1; text-shadow: 0px 0px 5px rgba(0,0,0,.5); }

@media only screen and (max-width: 1300px) { h1.now-dispensing { font-size: 70px; } }
@media only screen and (max-width: 1200px) { h1.now-dispensing { font-size: 56px; } }
@media only screen and (max-width: 1000px) { h1.now-dispensing { font-size: 50px; } }
@media only screen and (max-width: 900px)  { h1.now-dispensing { font-size: 40px; } }
@media only screen and (max-width: 767px)  { h1.now-dispensing { font-size: 34px; } }
@media only screen and (max-width: 580px)  { h1.now-dispensing { font-size: 28px; } }
@media only screen and (max-width: 460px)  { h1.now-dispensing { font-size: 24px; padding: 0 10px; } }
@media only screen and (max-width: 400px)  { h1.now-dispensing { font-size: 20px; padding: 0 10px; } }
@media only screen and (max-width: 360px)  { h1.now-dispensing { font-size: 19px; padding: 0 10px; } h1.now-dispensing br { display: none; } }

#hero img { width: 100%; }


lottie-player { position: absolute; width: 300px; height: 300px; top: 444px; left: 50%; margin-left: -150px; margin-top: -150px; }
/*lottie-player { width: 200px; height: 200px; }*/
lottie-player:hover { cursor: pointer; }

/* tooltip */
.ui-tooltip,
.arrow:after {
  background: black;
  border: none !important;
  /*border: 1px solid white;*/
}
.ui-tooltip {
  padding: 14px 20px !important;
  color: white;
  border-radius: 0 !important;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  box-shadow: none !important;
  transform: translate(40px);
  background: rgb(37, 44, 62) !important;
  color: white !important;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  /*box-shadow: 6px 5px 9px -9px black;*/
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}



/* -------------------------------------------------------------------------- */
/* Online ordering now available. */
/* -------------------------------------------------------------------------- */

#online-ordering { background-color: #202020; padding: 48px 40px; text-align: center; }
#online-ordering h2 {  }

@media only screen and (max-width: 959px)
{
	#online-ordering { padding: 50px 40px; }
	#online-ordering h2 { margin-bottom: 30px; } 
}

@media only screen and (max-width: 480px)
{
  #online-ordering h2 { font-sizes: 22px; }
}


/* -------------------------------------------------------------------------- */
/* Wham Zing Woosh */
/* -------------------------------------------------------------------------- */

div#wham { background-color: #ffffff; padding: 185px 0; }

div.wham-inner { max-width: 1220px; padding: 0 40px; margin: 0 auto; display: flex; flex-flow: row wrap; }

div#wham-left,
div#wham-right { flex: 0 0 464px; paddings: 40px; display: flex; align-items: center; justify-content: center; }
div#wham-middle { flex: 1 0 80px; }

div#wham-left img { width: 100%; max-width: 640px; }
div#wham-right div { width: 100%; max-width: 640px; }
div#wham-right p { font-size: 24px; margin-bottom: 30px; line-height: 1.2; }

div#wham-right p:first-child { margin-top: 0; }
div#wham-right p.spoiler { font-size: 18px; }

@media only screen and (max-width: 1100px)
{
  div#wham { padding: 100px 0; }
  
  div.wham-inner { max-width: 480px; }

  div#wham-left,
  div#wham-right { flex: 0 0 100%; }

  div#wham-middle { height: 60px; }

  /*div#wham .big-button { padding: 36px 54px; font-size: 24px; letter-spacing: 5px; }*/
}

@media only screen and (max-width: 600px)
{
  div#wham { padding: 80px 0; }
  div#wham-middle { height: 40px; }
  div#wham-right p { font-size: 20px; margin-bottom: 20px; } 
}






/* -------------------------------------------------------------------------- */
/* We opened a store... */
/* -------------------------------------------------------------------------- */

#we-opened { background-color: #202020; padding: 100px 20px 80px; color: #ffffff; font-size: 18px; }

#we-opened form { margin-top: 30px; }

#we-opened form .flex { max-width: 1220px; padding: 0 40px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; borders:solid 1px red; }
#we-opened form .flex .left,
#we-opened form .flex .right { flex: 0 0 48%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; borders:solid 1px red; }

#we-opened form .flex .right.join-our-newsletter { flex-direction: row; padding: 24px 24px 24px 0; }

#we-opened form .talk-to-us { text-align: center; padding-top: 40px; }


#we-opened form input:not([type="checkbox"]),
#we-opened form textarea { width: 100%; background-color: #757575; padding: 15px 20px; line-height: 1.2; }

#we-opened form input:not([type="checkbox"]) { display: block; margin-bottoms: 40px; }

#we-opened form label { color: #ffffff; }

#we-opened form .flex .right.join-our-newsletter input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0 12px 0 0; }
#we-opened form .flex .right.join-our-newsletter label { flex: 1; }

#we-opened form .talk-to-us .big-button { background: none; border: 2px solid #ffffff; padding-left: 82px; padding-right: 82px; }

@media only screen and (max-width: 1100px)
{
  #we-opened { padding-top: 80px; padding-bottom: 80px; }
}

@media only screen and (max-width: 880px)
{
  #we-opened h2 br { display: none; }
}

/* single column */
@media only screen and (max-width: 600px)
{
  /*#we-opened { padding-left: 20px; padding-right: 20px; }*/
  /*#we-opened {  font-size: 20px; }*/
  
  #we-opened form { margin-top: 10px; }
  
  #we-opened form .flex { padding: 0 20px; }

  #we-opened form .flex .left,
  #we-opened form .flex .right { flex: 0 0 100%; }

  #we-opened form .flex .left input { margin-bottom: 20px; }

  #we-opened form .talk-to-us { padding-top: 40px; }
}

@media only screen and (max-width: 480px)
{
  /*#we-opened h2 { font-size: 28px; }*/
}



/* TALK TO US - the "..." loading animation that happens after clicking on it */
.three-dots-loading-animation:after { content: ' .'; animation: dots 1s steps(5, end) infinite; }
@keyframes dots
{
  0%, 20%   {color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  40%       { color: white; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  60%       { text-shadow: .25em 0 0 white, .5em 0 0 rgba(0,0,0,0); }
  80%, 100% { text-shadow: .25em 0 0 white, .5em 0 0 white; }
}





/* -------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------- */

#footer { background-color: #202020; color: #ffffff; padding: 30px 20px 60px; }

#footer .flex { max-width: 1220px; padding: 0 40px; margin: 0 auto; display: flex; flex-flow: row wrap; }

#footer .left,
#footer .right { display: flex; flex-direction: row; align-items: center; }

#footer .left { flex: 0 0 70%; line-height: 1.4; }
#footer .right { flex: 0 0 30%; justify-content: flex-end; }

#footer .left p { font-size: 12px; }
#footer .left a,
#footer .left a:visited { color: #ffffff; }

#footer .right a { flex: 0 0 52px; }
#footer .right a:first-child { margin-right: 20px; }

/* 100% wide */
@media only screen and (max-width: 840px)
{
  #footer .left,
  #footer .right { flex: 0 0 100%; justify-content: center; text-align: center; }

  #footer .left { margin-bottom: 30px; }
}









/* ---------------------------------- */
/* contact form (modal) */
/* ---------------------------------- */

#contact-form-modal-container { position: fixed; top: 0px; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; background-color: rgba(0,0,0,.6); }

/* "x" */
#contact-form-modal-container .close { position: fixed; top: 28px; right: 52px; font-size: 100px; width: 40px; height: 40px; z-index: 9999; background-images: url('../img/btn-x.svg'); }

/* hamburger - turn into "x" when needed */
.close .line:first-child { transform: rotate(45deg); }
.close .line:nth-child(2) { transform: rotate(-45deg); margin-top: -9px; }
.close .line:last-child  { display: none; }



/* ---------------------------------- */
/* mobile menu (modal) */
/* ---------------------------------- */

#contact-form-modal-container .contact-form-modal {
  position: fixed;
  width: 90%;
  max-width: 734px;
  heights: 90%;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  background-color: #ffffff;
}

/* browser is squat, so make the contact modal scrollable */
@media only screen and (max-height: 880px)
{
  #contact-form-modal-container .contact-form-modal { height: 90%; margin-top: 5%; background-color: #202020; overflow-y: scroll; }
}

#contact-form-modal-container .contact-form-modal .top { background-color: #202020; text-align: center; padding: 40px 40px 64px 40px; position: relative; }
#contact-form-modal-container .contact-form-modal .top div { display: flex; justify-content: flex-end; margin-right: -15px; margin-top: -18px; borders:solid 1px red; }
#contact-form-modal-container .contact-form-modal .top div a { color: #ffffff; text-decoration: none; display: block; flex: 0 0 20px; }

#contact-form-modal-container .contact-form-modal .top div a .line:first-child { transform: rotate(45deg); }
#contact-form-modal-container .contact-form-modal .top div a .line:last-child { transform: rotate(-45deg); }

#contact-form-modal-container .contact-form-modal .top img.bzam-logo-in-contact-modal { max-width: 390px; margin-top: 32px; }


.close-contact-form .line { border-bottom: 2px solid #f1efd9; width: 40px; margin-bottom: 7px; }



#contact-form-modal-container .contact-form-modal .bottom { padding: 20px 40px 6px 40px; background-color: #ffffff; }

#contact-form-modal-container #contact-lightbox {

  max-width: 520px;
  margin: 0 auto;

/*  position: fixed;
  displays: none;
  top: 0%;
  right: 0;
  left: 0%;
  bottom: 0;
  width: 100%;
  height: 100%;
  
   overflow-y: scroll; 
  z-index: 9998; 
  background: #2e2e2e;
*/
}

/* lightbox hidden at first */
/*#contact-form-modal-container .open:not(.active),*/
/*#contact-form-modal-container .close:not(.active),*/
#contact-form-modal-container:not(.active) { display: none; }

#contact-form-modal-container .tbl { display: table; width: 100%; height: 100%; }
#contact-form-modal-container .tbl-cell { display: table-cell; vertical-align: middle; padding: 10px 0 10px; }


#contact-form-modal-container form p { text-align: center; font-size: 24px; line-height: 1.2; }
#contact-form-modal-container form p.give-us { margin-bottom: 34px; }
#contact-form-modal-container form p.dont-worry { font-size: 18px; }

#contact-form-modal-container input { background: #e5e5e5; padding: 20px 16px; color: #f15c3b; width: 100%; margin-bottom: 20px; font-weight: bold; }


.province-and-birthdate-container { margin-top: 12px; text-align: left; width: 100%; max-width: 100%; margin: auto; font-weight: bold; }

.province-and-birthdate-container .province-container { position: relative; -ms-flex: 1; flex: 1; /*background-color: rgb(243, 240, 217);*/ color: white; }

.province-and-birthdate-container .province-container #province-dropdown { display: none; position: absolute; width: 100%; margin-top: 47px; margin-bottom: 20px; top: 0; left: 0; background-color: #e5e5e5; z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */ color: #f15c3b; }

.province-container a.btn-province-dropdown { display: flex; background-color: #e5e5e5; color: #f15c3b; text-decoration: none; }

.province-container a.btn-province-dropdown .left { flex: 1; padding: 20px 16px; }
.province-container a.btn-province-dropdown .right { flex: 0 0 60px; background-color: #f15c3b; display: flex; align-items: center; justify-content: center; }
.province-container a.btn-province-dropdown .right img { max-width: 22px; }

.birthdate-container { position: relative; margin-top: 20px; display: flex; flex-flow: row wrap; justify-content: space-between; }

.birthdate-container div,
.birthdate-container input { flex: 0 0 23%; align-items: center; text-align: center; margin-bottom: 0 !important; }

.birthdate-container div { display: flex; justify-content: center; align-items: center; } /* so BIRTHDAY is centered horizontally and vertically */
.birthdate-container div p { color: #f15c3b; font-size: 16px !important; font-weight: bold; }

#province-dropdown a { display: block; padding: 4px 16px; text-decoration: none; color: #f15c3b; }

/* display:none because it's hidden at first because it's already selected */
#province-dropdown a:first-child { /*display: none; */ }

#province-dropdown a:last-child { margin-bottom: 18px; }



#province-dropdown a:hover { background-color: #f15c3b; color: #ffffff; }


#contact-form-modal-container form .submit-container { text-align: center; padding: 40px 20px; }
#contact-form-modal-container form .submit-container a.big-button { padding: 20px 84px; margin-bottom: 24px; }


@media only screen and (max-width: 800px)
{
  #contact-form-modal-container .contact-form-modal .top img.bzam-logo-in-contact-modal { max-width: 300px; }
}

@media only screen and (max-width: 600px)
{
  #contact-form-modal-container form .submit-container a.big-button { width: 100%; padding: 20px 0; }
}

@media only screen and (max-width: 460px)
{
  form#contact .btn-province-dropdown .left,
  form#contact input,
  .birthdate-container div p { font-size: 13px !important; padding: 12px 6px; }
  .province-and-birthdate-container .province-container #province-dropdown { margin-top: 45px; }
  /*#contact-form-modal-container .contact-form-modal .top { padding: 40px 20px; }*/
  #contact-form-modal-container .contact-form-modal .bottom { padding: 20px 20px 6px 20px; }

  .birthdate-container div,
  .birthdate-container input { flex: 0 0 21%; }
}




/* ---------------------------------- */
/* only used on TAC and Privacy Policy pages */
/* ---------------------------------- */

.tac-and-privacy { background-color: #ffffff; padding: 40px; }
.tac-and-privacy h2 { color: #000000; font-size: 24px; margin: 20px 0 40px; }
.tac-and-privacy h3 { color: #000000; font-size: 18px; margin: 26px 0 16px; font-weight: bold; }
.tac-and-privacy p,
.tac-and-privacy ul,
.tac-and-privacy li { margin-bottom: 15px; line-height: 1.3; font-size: 15px; }
.tac-and-privacy li { margin-bottom: 0; margin-left: 20px; list-style-type: disc; }
.tac-and-privacy p.no-bottom-margin { margin-bottom: 0; }
.tac-and-privacy a,
.tac-and-privacy a:visited { color: #000000; }

/* obfuscate / hide email from bots uses this fallback for non-js browsers */
#hide-email-from-bots b { display:none; }