/* ======================================================
   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: rgb(212, 140, 185);
  
}

body,
p,
input,
textarea {
  font-family: Bookmania-Regular;
}

input,
textarea { color: rgb(156, 29, 100); }

a {
  text-decoration: none;
  color: rgb(182, 179, 225);
}

a:active,
a:focus {
  outline: 0;
  -moz-outline-style: none;
}

.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.inp-rounded {
  padding: 16px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  height: 47px;
  outline: none !important;
}

#page-container { max-width: 2000px; margin: auto; overflow-x: hidden; }


.bodymovin-wrapper,
#bodymovin { width: 800px; height: 800px; visiblity: visible; z-index: 999999999; }


/* desktop devices */
@media only screen and (min-width: 901px)
{
  .mobile-only { display: none !important; }
}


/* mobile devices */
@media only screen and (max-width: 900px)
{
  .desktop-only { display: none !important; }
}

.br-find-your-ness { display: none; }




/* ======================================================
   Language-chooser desktop only (above the nav)
   ====================================================== */

#language-chooser { position: fixed; top: 20px; left: 0; width: 100%; height: 12px; z-index: 11; }

#language-chooser p { display: flex; flex-flow: row wrap; justify-content: flex-end; max-width: 2000px; height: 100%; margin: auto; padding: 0 30px; }
#language-chooser p a.language { color: #f1efd9; font-size: 14px; }
#language-chooser p a.language:first-child { margin-right: 8px; }

/* still says "English French" but it's on left-side now because hamburger is showing */
@media only screen and (max-width: 1160px)
{
  #language-chooser { position: absolute; top: 34px; }
  #language-chooser p { justify-content: flex-start; }
  #language-chooser p a.language { color: #f1efd9; font-size: 16px; }
}

/* switch to "EN/FR" */
@media only screen and (max-width: 900px)
{
  /*#language-chooser p a.language:first-child { margin-right: 0; }
  #language-chooser p .slash-between-languages { margin: 0 5px; color: #f1efd9; }*/
}





/* ======================================================
   Navigation (menu)
   ====================================================== */

#nav { position: fixed; top: 20px; left: 0; width: 100%; height: 80px; z-index: 10; pointer-events: none; /* pointer-events needed so we can click the "x" even if it's "behind" this nav bar */ }

#nav-inner { display: flex; align-items: center; max-width: 2000px; height: 100%; margin: auto; padding: 0 30px; color: #f1efd9; }

#nav-inner a { pointer-events: auto; /* pointer-events here makes it so that nav items are clickable even though the nav itself is click-throughable */ }

#nav-left { flex: 1 1 40%; text-align: left; }
#nav-left div { display: inline-block; position: relative; margin-right: 20px; }
#nav-left div:last-child { margin-right: 0; }
#nav-left a { color: #f1efd9;  text-shadow: rgba(0, 0, 0, 50%) 0px 0px 5px; }

#nav-middle { flex: 0 0 200px; text-align: center; }
#nav-middle a img { transform: translateY(11px); } /* vertically-center -ness logo */
#nav-right { flex: 1 1 40%; text-align: right; display: flex; justify-content: flex-end; align-items: center; }

#nav-right span { flex: 0 0 100px; margin-right: 12px; }
#nav-right a { flex: 0 0 34px; margin-right: -6px; }
  /*#nav-right a:last-child { margin-right: 0; }*/

/* strains arrow */
.menu-arrow-down {
  display: inline-block;
  margin-left: 6px;
  width: 15px; 
  height: 9px; 
  background-image: url('/img/menu-down-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0;
}

/* dropdown menu under Strains */
#ul-menu-strains { display: none; position: absolute; top: 30px; left: -10px; width: 214px; }
#ul-menu-strains li { margin-bottom: 2px;  }
#ul-menu-strains li a { display: block; width: 100%; padding: 10px; font-weight: bold; color: rgb(156, 29, 100); text-shadow: none; background-color: #f1efd9; }
#ul-menu-strains li a:hover { background: #dac3dc; }


/*#btn-menu-strains-wrapper:hover { background: red; }
#btn-menu-strains-wrapper:hover #ul-menu-strains,
#ul-menu-strains:hover { display: block; }*/





/* ======================================================
   Hero - desktop only (and some mobile rules where they share things)
   ====================================================== */

#hero { position: relative; width: 100%; height: 112.5vw; background: url('/img/hero.jpg?v=3') no-repeat  center top; background-size: cover; max-width: 2000px; max-height: 2250px; }




path {
  fill: transparent;
}

text {
  fill: #FF9800;
  font-size: 40px;
}

.welcome,
.get-ready { font-family: Jaune-GrandeBlack; }

#hero .welcome { text-align: right; margin-right: calc(20% - 20px); margin-bottom: 10px; }

div.what-is-your-ness { color: #f1efd9; text-align: center; }

#hero div.what-is-your-ness { position: absolute; right: 7vw; max-width: 52vw; }


#hero div.what-is-your-ness p { margin-bottom: 20px; line-height: 1.2; }


#hero .get-ready { position: absolute; bottom: 80px; left: 2%; font-family: Jaune-GrandeBlack; }

textPath { /*text-shadow: rgba(0, 0, 0, 30%) 2px 2px 2px;*/ }

#wavy-border-between-hero-and-savour { height: 40px; background-image: url(/img/wave.svg); background-size: 2470px; background-position: center top; margin-top: -40px; position: relative; /* this won't show up on top of the div above it unless we give is some potiion */ }



#hero img.img-explore-your-ness { position: absolute; top: 19vw; left: 6vw; max-width: 40vw; }
#hero lottie-player { position: absolute; top: 12vw; left: -4vw; width: 60vw; height: 40vw; }

/*@media only screen and (min-width: 2001px)
{
  #hero lottie-player { top: 200px; max-width: 1200px; }
  #hero lottie-player svg {  }
}*/



/* move the Welcome etc text depending on screen width */
#hero div.what-is-your-ness { top: 70vw; font-size: 28px; }
/*@media only screen and (max-width: 1900px)
{
  #hero div.what-is-your-ness { top: calc(54vw); }
}*/
@media only screen and (max-width: 1700px)
{
  #hero div.what-is-your-ness { top: calc(60vw); }
}
@media only screen and (max-width: 1500px)
{
  #hero div.what-is-your-ness { top: calc(52vw); }
}
@media only screen and (max-width: 1300px)
{
  #hero div.what-is-your-ness { top: calc(50vw); }
}
@media only screen and (max-width: 1100px)
{
  #hero div.what-is-your-ness { top: calc(48vw); font-size: 24px;  }
}
@media only screen and (max-width: 1000px)
{
  #hero div.what-is-your-ness { top: calc(45vw); font-size: 20px; max-width: 54vw; }
}

@media only screen and (max-width: 900px)
{
  /*#wavy-border-between-hero-and-savour { display: none; }*/
  .welcome { margin-left: -50vw; }
  .get-ready { margin-left: -140vw; }
}

@media only screen and (min-width: 1701px)
{
  #hero div.what-is-your-ness { top: 1140px; width: 950px; height: 600px; font-size: 32px; }
}

@media only screen and (min-width: 2001px)
{
  #hero lottie-player { top: 310px; left: -100px; width: 1200px; height: 600px; }
}

/* ======================================================
   Hero - mobile only
   ====================================================== */

/* mobile only part */
#hero-mobile-only { display: none; }

#div { width:100%; height:0; overflow:auto; margin:auto; text-align:justify; }

@media only screen and (max-width: 900px)
{
  #hero { display: none; }
  #hero-mobile-only { display: block; background-color: #951258; /*padding-top: 140px;*/ position: relative; }

  #hero-mobile-only div.explore-your-ness { height: calc(217vw /*- 17px*/); padding: 17vw 0 0 0; background-image: url('/img/mobile-bg-hero-top.jpg?v=2'); background-size: cover; background-color: #951258; }  

  body.has-visible-scroll-bar #hero-mobile-only div.explore-your-ness { height: calc(216vw - 34px); }
  
  #hero-mobile-only lottie-player { height: 50vw; width: 100%; /* todo: this is hacky (isn't centered at all widths) and shouldn't be centered at any width really because margin-left should have to be 5vw for this to work so figure this out */ }

  #hero-mobile-only .hero-text { background: url(/img/mobile-bg-hero-texture.jpg?v=1) center center/cover; /*background-color: #951258;*/ margin-top: -3px; padding: 20px; font-size: 30px; line-height: 36px; }
  #hero-mobile-only .hero-text p { margin-bottom: 20px; }




  #hero-mobile-only img.img-hero-vape-cartridge { width: 100%; }  
  
  #hero { }
  #hero img.explore-your-ness { /*position: relative; margin: 40px auto 40px;*/ position: absolute; width: 70vw; margin-left: 15vw; top: 110px; }

  #hero-bottom-mobile-only { display: block; background-color:rgb(218, 177, 221); /* background-image: url('/img/mobile-bg-hero-bottom.png'); width: 100%; height: 300px;*/ }
  #hero-bottom-mobile-only img { max-width: 100%; }
  #hero-bottom-mobile-only img:first-child { margin-bottom: -3px; }


/*  #wavy-border-between-hero-and-savour-2 {
    background-image: url(/img/wave.svg);
    height: 40px;
    margin-top: -50px;
    z-index: 6;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-size: 2470px;
    background-position: center top;
  }*/

}





/* ======================================================
   Savour
/* ====================================================== */

#savour,
#products { padding: 200px 0; position: relative; display: flex; align-items: center; justify-content: center;  background-color: rgb(218, 177, 221); overflow: hidden; }

#savour { margin-top: -4px; /* prevent 1px gap showing above */ }



#savour .savour-left,
#products .products-left  { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: translateX(-50px); }
#savour .savour-right,
#products .products-right { position: absolute; width: 100%; height: 100%; top: 0; right: 0; transform: translateX(50px); }
@media only screen and (max-width: 1230px)
{
  #products .products-right { right: -80px; }
}

#savour .savour-left img.savour-shape { position: absolute; left: 0; }
#savour .savour-right img.savour-shape { position: absolute; right: 0; }

#savour .savour-left img.savour-shape-left-1 { top: 20%; width: 120px; }
#savour .savour-left img.savour-shape-left-2 { top: 33%; width: 200px; }
#savour .savour-left img.savour-shape-left-3 { top: 60%; width: 200px; }
#savour .savour-left img.savour-shape-left-4 { bottom: 5%; width: 200px; }

#savour .savour-right img.savour-shape-right-1 { top: 10%; width: 280px; }
#savour .savour-right img.savour-shape-right-2 { top: 33%; width: 200px; }
#savour .savour-right img.savour-shape-right-3 { top: 66%; width: 200px; right: -80px; }

#savour div.savour-middle,
#products div.products-middle { flex: 0 0 80%; text-align: center; z-index: 2; }
#products div.products-middle { flex-basis: 100%; max-width: 1300px; }
#savour img.savour-the-moment { width: 50%; }
#savour p.whats-your-flavour { color: rgb(156, 29, 100); font-size: 30px; font-weight: bold; margin-top: -40px; }
#savour img.savour-the-moment-arrow { margin-top: 30px; width: 50px; }
#savour p.whats-your-flavour:hover,
#savour img.savour-the-moment-arrow:hover { cursor: pointer; }


@media only screen and (max-width: 900px)
{
  #savour { padding: 70px 0 130px; }
  #savour .savour-left { left: -90px; }
  #savour .savour-right { right: -90px; }
  #savour img.savour-the-moment { width: 90%; } /* delete soon */
  #savour #lottie-savour-the-moment { width: 110%; margin-left: -10%; }
  #savour p.whats-your-flavour { margin-top: -30px; }
  /*#savour img.savour-the-moment-arrow { margin-top: 20px; }*/
}
@media only screen and (max-width: 500px)
{
  #savour p.whats-your-flavour { margin-top: 0px; }
  /*#savour img.savour-the-moment-arrow { margin-top: 10px; }*/
}


/* ======================================================
   Strains
   ====================================================== */

#strains .strain-row,
#strains .strain-row-inner { display: flex; text-align: center; }

#strains .strain-row-inner { flex: 0 0 50%; height: 540px; }

#strains .strain-left,
#strains .strain-right { flex: 0 0 50%; }

#strains .strain-left  { }
#strains .strain-right { }

#strains .learn-more { position: relative; padding: 60px 0; background-size: cover; background-position: center; }

#strains h3  { color: #f1efd9; font-size: 30px; font-weight: bold; }
#strains .learn-more h3  { text-transform: uppercase; font-family: 
Jaune-GrandeBlack; /*text-shadow: rgba(0, 0, 0, 30%) 2px 2px 2px;*/ }
#strains p.underline { margin-top: 8px; }
#strains p.underline img { width: 100px; }
#strains p.strain-name  { margin: 50px 0; }
#strains p.strain-name img { max-width: 70%; }
#strains span.learn-more-btn { display: inline-block; background: #f1efd9; padding: 14px 18px; border-radius: 3px; color: rgb(242, 112, 41); text-transform: uppercase; font-weight: bold; cursor: pointer; }


/* strain info box that slides in */

#strains .strain-info { position: relative; padding: 40px; flex-flow: row wrap; }

#strains .strain-info .x { position: absolute; top: 18px; right: 18px; cursor: pointer; font-family: Arial, sans-serif; font-size: 50px; color: rgb(156, 29, 100); z-index: 3; background-image: url('/img/btn-x.svg'); width: 24px; height: 24px; }

#strains .strain-info-row { width: 100%; text-align: left; display: flex; justify-content: space-between; }
#strains .strain-info-row:last-child { padding-top: 0; }

/* top row */
#strains .strain-info-row .strain-name { flex: 0 0 40%; text-align: left; display: relative; max-height: 200px; }
#strains .strain-info-row .strain-name p.underline { margin: 20px 0; }
#strains .strain-info-row .strain-type { flex: 0 0 20%; }
#strains .strain-info-row .strain-profile { flex: 0 0 20%; }
#strains .strain-info-row .strain-terpenes { flex: 0 0 20%; }

#strains .strain-profile p { font-family: Bookmania-Bold; font-size: 20px !important; }
#strains .strain-profile p span { font-family: Bookmania-Regular; font-size: 16px; }
#strains .strain-profile p:last-child { margin-top: 2px; }


/* bottom row */
#strains .strain-info-row .strain-description { flex: 0 0 40%; }
#strains .strain-info-row .strain-name, 
#strains .strain-info-row .strain-description { padding-right: 40px; }
#strains .strain-info-row .strain-flavour { flex: 0 0 20%; }
#strains .strain-info-row .strain-formats { flex: 0 0 40%; }
#strains .strain-info-row .strain-formats .strain-formats-inner { display: flex; flex-flow: row wrap; justify-content: flex-start; } /* was "space-between" before we hid pre-rolls on mar-12-2021 */


/* Formats - flex it (three images in a row) */
#strains .strain-formats div { position: relative; }
/*#strains .strain-formats div.flower,
#strains .strain-formats div.pre-rolls { flex: 0 0 20%; }*/
#strains .strain-formats div.flower { flex: 0 0 80px; margin-right: 50px; } /* only needed because we hide pre-rolls on mar-12-2021; delete this line and unhide the above with flex 20% if we add pre-rolls back in */
#strains .strain-formats div.vape-cartridges { flex: 0 0 50%; }
#strains .strain-formats div.flower img,
#strains .strain-formats div.pre-rolls img { height: 80px; margin-top: 5px; }
#strains .strain-formats div.vape-cartridges img { height: 60px; margin-top: 25px; }
@media only screen and (max-width: 900px)
{
  #strains .strain-formats div.vape-cartridges img { margin-top: 5px; }
}

/* next five rules (3 'normal' and 2 @media) ONLY affect "Powdered Donuts" and are only needed because Powdered Donuts has pre-rolls again as of mar-16-2021; remove these three lines and see above if that changes */
#strains .strain-row.powdered-donuts .strain-formats div.flower { flex: 0 0 80px; } 
#strains .strain-row.powdered-donuts .strain-formats div.pre-rolls { flex: 0 0 80px; margin-right: 50px; } 
#strains .strain-row.powdered-donuts .strain-formats div.vape-cartridges { flex: 1; } 
@media only screen and (max-width: 1000px)
{
  #strains .strain-row.powdered-donuts .strain-formats div.flower, 
  #strains .strain-row.powdered-donuts .strain-formats div.pre-rolls { margin-right: 20px; } /* prevents Vape Cartridges from slipping below at this browser-width */
}

/* sometimes flower or pre-rolls or vape-cartridges are unavailable (crossed out aka x-d out) */
#strains .grams-jam .strain-formats div.flower *,
#strains .sweet-dish .strain-formats div.flower *,
#strains .sour-apple .strain-formats div.flower *,
#strains .ninja-fruit .strain-formats div.flower *,
#strains .apricot-jelly .strain-formats div.flower *,
#strains .grams-jam .strain-formats div.pre-rolls *,
#strains .sweet-dish .strain-formats div.pre-rolls *,
#strains .strain-row:not(.powdered-donuts) .strain-formats div.pre-rolls *, /* all pre-rolls are unavailable right now EXCEPT FOR Powdered Donuts */
#strains .mint-sour .strain-formats div.vape-cartridges *,
#strains .powdered-donuts .strain-formats div.vape-cartridges *,
#strains .chocolate-cheesecake .strain-formats div.vape-cartridges *,
#strains .gelato-mint .strain-formats div.vape-cartridges *,
#strains .sour-strawberry-kush .strain-formats div.vape-cartridges *,
#strains .cookie-crumble .strain-formats div.vape-cartridges *,
#strains .k-smorz .strain-formats div.vape-cartridges *,
#strains .citrus-rush .strain-formats div.vape-cartridges *,
#strains .rainmaker .strain-formats div.vape-cartridges *,
#strains .west-coast-banana-skunk .strain-formats div.vape-cartridges *,
#strains .pineapple-chunk .strain-formats div.vape-cartridges * { opacity: .3; }

#strains .grams-jam .strain-formats div.flower:after,
#strains .sweet-dish .strain-formats div.flower:after,
#strains .sour-apple .strain-formats div.flower:after,
#strains .ninja-fruit .strain-formats div.flower:after,
#strains .apricot-jelly .strain-formats div.flower:after,
#strains .grams-jam .strain-formats div.pre-rolls:after,
#strains .sweet-dish .strain-formats div.pre-rolls:after,
#strains .strain-row:not(.powdered-donuts) .strain-formats div.pre-rolls:after, /* all pre-rolls are unavailable right now EXCEPT FOR Powdered Donuts */
#strains .mint-sour .strain-formats div.vape-cartridges:after,
#strains .powdered-donuts .strain-formats div.vape-cartridges:after,
#strains .chocolate-cheesecake .strain-formats div.vape-cartridges:after,
#strains .gelato-mint .strain-formats div.vape-cartridges:after,
#strains .sour-strawberry-kush .strain-formats div.vape-cartridges:after,
#strains .cookie-crumble .strain-formats div.vape-cartridges:after,
#strains .k-smorz .strain-formats div.vape-cartridges:after,
#strains .citrus-rush .strain-formats div.vape-cartridges:after,
#strains .rainmaker .strain-formats div.vape-cartridges:after,
#strains .west-coast-banana-skunk .strain-formats div.vape-cartridges:after,
#strains .pineapple-chunk .strain-formats div.vape-cartridges:after { content: ' '; background-image: url('/img/btn-x.svg'); width: 80px; height: 80px; position: absolute; top: 0; left: -10px; opacity: 1; }

/* fonts and colours */
#strains .strain-info h5,
#strains .strain-info h3,
#strains .strain-info p { color: rgb(156, 29, 100); }



/* headers like "Strain", "Profile", etc */
#strains .strain-info h5 { text-transform: uppercase; margin-bottom: 20px; font-weight: bold; font-size: 15px; }

/* "Hybrid" and other info */
#strains .strain-info h3 { font-size: 20px; font-family: Jaune-GrandeBlack; margin-bottom: 10px; line-height: 1.2; }

/* name of strain ("Lemon Berry" etc); last so it overrides other rules */
#strains .strain-name img.img-strain-name { height: 100%; margin-top: -14px; max-width: 94%; max-height: 224px; /* so the top of this bigger font lines up with the top of the other fonts */ }


/* "Powdered donuts" and "Chocolate Cheesecake" strain-name SVGs are wider ratio than others; prevent them from touching the left/right of the box */
#strains .powdered-donuts .strain-name img.img-strain-name,
#strains .chocolate-cheesecake .strain-name img.img-strain-name { max-width: 90%; }

/* "K-SMORZ" is super-wide; this keeps it to about the same width as "Powdered Donuts" */
#strains .k-smorz .strain-name img.img-strain-name { max-width: 74%; }


/* strain info row, aka the thing that slides over */
#strains .strain-info-row .strain-name div { display: flex; position: relative; }
#strains .strain-info .strain-name img.img-strain-name { height: auto; margin-top: -14px; max-width: 65%; /* so the top of this bigger font lines up with the top of the other fonts */ }
#strains .strain-info .strain-name img.img-strain-lineage { position: absolute; height: auto; margin-top: -14px; right: 0; max-width: 25%; /* so the top of this bigger font lines up with the top of the other fonts */ }
@media only screen and (min-width: 901px)
{
  /* on wide monitors, prevent strain name from getting so tall it covers strain description */
  #strains .strain-info .strain-name img.img-strain-name { max-height: 160px; }
  /* on wide monitors, prevent strain lineage from getting so tall it looks bigger than strain name */
  #strains .strain-info .strain-name img.img-strain-lineage { max-height: 140px; }
}



/* "Indica Dominant" and other sub-info */
#strains .strain-info p { font-size: 16px; line-height: 24px; font-weight: bold; }

/* Formats section - special more complex section containing flex stuff */
#strains .strain-info .strain-formats h5 { flex: 0 0 100%; height: 16px; }
#strains .strain-info .strain-formats img { max-width: 80%; }
#strains .strain-info .strain-formats h3 { margin-top: 10px; margin-bottom: 6px; font-size: 14px; }

/* specific to each strain */
/*#strains .lemon-berry .strain-row-inner { transform: translateX(-100%); }*/
#strains .lemon-berry .strain-info { background-color: rgb(250, 225, 168); }

#strains .black-cherry-punch .strain-info { background-color: rgb(254, 192, 195); }

/* sliders */
/*
#strains .slide { position: relative; }
#strains .slide p { position: absolute; width: 100%; bottom: 0; text-align: center; }
*/

#strains .strain-row .learn-more { display: flex; flex-direction: column; }
#strains .strain-row .learn-more div.type-and-underline,
#strains .strain-row .learn-more p.strain-name,
#strains .strain-row .learn-more p.learn-more-wrapper { flex: 0 0 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#strains .strain-row .learn-more p.learn-more-wrapper span { width: 156px; } /* LEARN MORE btn*/

#strains .strain-row .learn-more p.strain-name { flex: 1; }


br.br-pre-rolls,
.br-flavour-profile { display: none; }

@media only screen and (max-width: 1100px)
{
  #strains .strain-left .strain-name img.img-strain-name,
  #strains .strain-right .strain-name img.img-strain-name { max-width: 90%; }
}

/* page BODY has just switched to mobile (but MENU had already switched to mobile at 1160px) */
@media only screen and (max-width: 900px)
{
  #strains .strain-row-inner { height: auto; flex-flow: row wrap; }
  #strains .strain-left,
  #strains .strain-right { flex: 0 0 100%; height: 50%; }
  #strains .strain-info { padding: 40px 20px; }
  #strains .strain-info.mobile-only { text-align: left; }
  #strains .strain-info-row-mobile.top-row { margin-bottom: 30px; }
  #strains .strain-info-row-mobile.top-row .strain-name img.img-strain-name { max-width: 384px; }
  #strains .strain-info-row-mobile:not(.top-row) { width: 100%; margin: 20px 0; display: flex; flex-flow: row wrap; justify-content: space-between; }
  #strains .strain-info-row-mobile.bottom-row { width: 70%; } /* so formats can stay in one row */
  #strains .strain-info-row-mobile:not(.top-row) div { flex: 0 0 24%; /*word-break: break-all;*/ }
  #strains .strain-info-row-mobile:not(.top-row) div.strain-type { flex-basis: 20%; }
  #strains .strain-info-row-mobile:not(.top-row) div.strain-profile { flex-basis: 20%; }
  #strains .strain-info-row-mobile:not(.top-row) div.strain-flavour { flex-basis: 24%; }
  #strains .strain-info-row-mobile:not(.top-row) div.strain-terpenes { flex-basis: 30%; }
  #strains .strain-info-row-mobile:not(.top-row) div.strain-formats { flex: 0 0 100%; max-width: 480px; }
  
  #strains .strain-info .strain-name img.img-strain-lineage { right: 20px; }
  
  /* fixes for powdered donuts and chocolate cheesecake because their strain-name SVGs are wider (ratio-wise) than others */
  #strains .powdered-donuts .strain-info-row-mobile.top-row .strain-name img.img-strain-name,
  #strains .chocolate-cheesecake .strain-info-row-mobile.top-row .strain-name img.img-strain-name { max-width: 65%; }

  /* fixes for "K-SMORZ" because it's short (vertically) so the lineage covers the desc otherwise */
  #strains .k-smorz .strain-info-row-mobile.top-row .strain-name img.img-strain-name { margin-bottom: 20px; }
  #strains .k-smorz .strain-info.mobile-only p.underline { margin-bottom: 13vw; }

  /* chocolate cheesecake also needs the lineage (cross) image shrunk because it's SO wide vs tall (even more than powdered donuts)*/
  #strains .chocolate-cheesecake .strain-info .strain-name img.img-strain-lineage { max-width: 20%; }
  
  /*#strains .powdered-donuts .strain-info .strain-description,
  #strains .chocolate-cheesecake .strain-info .strain-description { margin-top: 50px; }*/

  #strains .strain-info.mobile-only p.underline { margin: 20px 0; }

  /* formats (with the three images) */
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner { display: flex; margin-top: 0; flex-flow: row wrap; }
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner div.flower,
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner div.pre-rolls { flex: 0 0 25%; margin: 0; }
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner div.vape-cartridges { flex: 0 0 35%; margin: 0; }
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner img { height: 40px; }
  #strains .grams-jam .strain-formats div.flower:after,
  #strains .sweet-dish .strain-formats div.flower:after,
  #strains .sour-apple .strain-formats div.flower:after,
  #strains .grams-jam .strain-formats div.flower:after,
  #strains .sweet-dish .strain-formats div.flower:after { content: ' '; background-image: url('/img/btn-x.svg'); width: 60px; height: 60px; position: absolute; top: 0; left: -10px; opacity: 1; }


  #strains .strain-info .x-bottom { top: auto; bottom: 18px; }
}

@media only screen and (max-width: 770px)
{
  #strains .strain-info h3 { font-size: 18px; }
  #strains .strain-info-row-mobile:not(.top-row) { width: 100%; }
  #strains .strain-info-row-mobile.bottom-row { width: 100%; } /* so formats can stay in one row */
}

@media only screen and (max-width: 600px)
{
  #strains .strain-info-row-mobile.top-row .strain-name img.img-strain-name { max-width: 65%; }

  /* crush vertically on mobile so all info fits on one screen */
  #strains p.strain-name { margin: 30px 0; max-height: 40vw; /* prevent this from getting so tall that LEARN MORE button doesn't fit in box */ }
  #strains .learn-more { padding: 28px 0; }
  #strains .strain-info p { font-size: 15px; line-height: 20px; }
  #strains .strain-info-row-mobile.top-row { margin-bottom: 20px;}
  #strains .strain-info.mobile-only p.underline {margin: 10px 0;}
  #strains .strain-info-row-mobile.middle-row div { flex-basis: 50% !important; margin-bottom: 14px; }
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner img { height: 30px; }
  #strains .strain-info-row-mobile:not(.top-row) div h5 { margin-bottom: 6px; }
  #strains .strain-profile br { display: none; }

  /* fix for "K-SMORZ" because it's short (vertically) so the lineage covers the desc otherwise */
  #strains .k-smorz .strain-info.mobile-only p.underline { margin-bottom: 9vw; }

}

@media only screen and (max-width: 500px)
{
  #strains .strain-info-row-mobile.bottom-row .strain-formats-inner div { flex: 0 0 31% !important; }
}

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

  #strains .strain-row.ninja-fruit .strain-left .strain-name img.img-strain-name { max-width: 76%; }

  #strains .strain-info-row-mobile:not(.top-row) { /*width: 100%;*/ margin: 0; /*display: block;*/ justify-content: space-between; }
  #strains .strain-info-row-mobile:not(.top-row) div { /*margin: 30px 0;*/ }
  #strains .strain-info-row-mobile>div:first-child { margin-top: 0; }
  
}

@media only screen and (max-width: 400px)
{
  #strains .strain-info-row-mobile:not(.top-row) .strain-formats-inner div { flex: 0 0 100%; margin-left: 10px; }

  #strains .strain-info h3 { font-size: 14px; }
  br.br-pre-rolls,
  br.br-flavour-profile { display: inline; } /* split text on two lines */

}

@media only screen and (max-width: 340px)
{
  #strains .strain-info .strain-formats h3 {font-size: 13px; }
}

/* sour apple hidden from website for now (as of Jul 30 2020) */
body:not(.splash-page-2) .strain-row.sour-apple { display: none !important; }

/* sweet dish hidden from website as of Apr 09 2021 (on English site we removed the array info for this because it was replaced by powdered donuts, but we don't have french description for this so for now we're only hiding this with css on french site so we can repurpose that array when we get french translation) */
body:not(.splash-page-2) .strain-row.sweet-dish { display: none !important; }
/*body:not(.splash-page-2) .strain-row.chocolate-cheesecake { display: none !important; }*/

/* nice cream vape info hidden from website for now (as of Aug 17 30 2020) */
.strain-row.nice-cream .vape-cartridges { visibility: hidden; }


/* ======================================================
   Image Carousel
   ====================================================== */

.image-carousel { position: relative; display: flex; }

.image-carousel .controls { position: absolute; top: 50%; width: 100%; }
.image-carousel .controls .controls-inner { position: relative; }
.image-carousel .controls .controls-inner span { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 40px; height: 40px; }
.image-carousel .controls .controls-inner span.prev-btn { position: absolute; left: 10px; background-image: url('/img/btn-carousel-prev.svg'); }
.image-carousel .controls .controls-inner span.next-btn { position: absolute; right: 10px; background-image: url('/img/btn-carousel-next.svg'); }



.slides-container {
  position: relative;
  overflow: hidden;  
  /*display: flex;*/
  flex: 1;
  /*height: 200px;*/
}

.slide {
  position: absolute;
  font-size: 90px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  width: calc(100% / 3);
  width: 100%;

  background-size: contain;
  background-position: center;

  background-repeat: no-repeat;


}

.slide p.info-only { position: absolute; bottom: 20px; padding: 0 4px; font-size: 10px; line-height: 1.4; }

.slides-inner {
  position: relative;
  height: 100%;
  width: 100%;  
  overflow: hidden;
}



/* ======================================================
   Products
   ====================================================== */


#products { padding: 100px 40px; background-color: rgb(226, 196, 222); color: rgb(156, 29, 100); }
#products h2 { font-family: Jaune-GrandeBlack; font-size: 60px; text-align: center; /*text-shadow: rgba(0, 0, 0, 30%) 2px 2px 2px;*/ margin-bottom: 30px; }
#products h4 { font-size: 30px; font-weight: bold; text-align: center; }

#products .products-left img.products-shape { position: absolute; left: -120px; }
#products .products-right img.products-shape { position: absolute; right: 0px; }
img.products-shape-left { bottom: -6%; width: 240px; }
img.products-shape-right { top: 120px; width: 210px; }

#products .products-row { display: flex; justify-content: space-between; flex-flow: row wrap; text-align: center; max-width: 1800px; margin: auto; }
#products .products-row div { flex: 0 0 32%; max-height: 900px; }
#products .products-row div.flower { padding-top: 160px; }
#products .products-row div.pre-rolls { padding-top: 280px; }
#products .products-row div.vape-cartridges { padding-top: 340px; }
#products .products-row div img.products-header { width: 260px; }
#products .products-row div img { width: 330px; }
#products .products-row div p { font-size: 18px; width: 60%; margin: auto; line-height: 1.2; font-weight: bold; }

#products .products-row div.flower img.products-header { transform: translateY(-524px); } /* delete soon */
#products .products-row div.flower #lottie-dried-flower { transform: translateY(-524px); max-width: 80%; margin: 0 auto; }
#products .products-row div.flower p { transform: translateY(-220px); }

#products .products-row div.pre-rolls img.products-header { width: 297px; transform: translateY(-564px); } /* delete soon */
#products .products-row div.pre-rolls #lottie-pre-rolled-joints { transform: translateY(-584px); max-width: 80%; margin: 0 auto; }
#products .products-row div.pre-rolls p { transform: translateY(-171px); }

#products .products-row div.vape-cartridges img.products-header { transform: translateY(-470px); } /* delete soon */
#products .products-row div.vape-cartridges #lottie-vape-cartridges { transform: translateY(-470px); max-width: 80%; margin: 0 auto; }
#products .products-row div.vape-cartridges p { transform: translateY(-231px); }

@media only screen and (max-width: 1230px)
{
  #products .products-row div { flex: 0 0 100%; max-height: 620px; max-width: 390px; margin: auto; }
  #products .products-row div.flower { padding-top: 170px; }
  #products .products-row div.pre-rolls { padding-top: 170px; margin-top: 30px; }
  #products .products-row div.vape-cartridges { padding-top: 170px; margin-bottom: 140px; }
}

@media only screen and (max-width: 900px)
{
  #products .products-left { left: -80px; top: 290px; }
  #products .products-left img.products-shape-left { bottom: auto; }
  #products .products-right { top: -300px; right: -80px; }

  #products .products-row div.pre-rolls { padding-top: 190px; }

  #products .products-row div.vape-cartridges { margin-bottom: 50px; }

  /* todo: is this needed; why do I need this extra @media stuff now that we're using lottie (Jul 22 2020) ? */
  #products .products-row div.flower p { transform: translateY(-226px); }
  #products .products-row div.pre-rolls p { transform: translateY(-171px); }
  #products .products-row div.vape-cartridges p { transform: translateY(-245px); }

}

@media only screen and (max-width: 500px)
{
  /* lottie animations start to shrink so we adjust things */
  #products .products-row div.flower p { transform: translateY(-206px); }
  #products .products-row div.pre-rolls p { transform: translateY(-151px); }
  #products .products-row div.vape-cartridges p { transform: translateY(-225px); }
}

@media only screen and (max-width: 400px)
{
  #products h2 { font-size: 50px; }
}


/* ======================================================
   Find Your -ness
   ====================================================== */


#find-your-ness { position: relative; padding: 120px 60px; background-image: url('/img/bg-find-your-ness.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; color: #f1efd9; }


#find-your-ness h2 { font-family: Jaune-GrandeBlack; font-size: 60px; text-align: center; /*text-shadow: rgba(0, 0, 0, 30%) 2px 2px 2px;*/ margin-bottom: 30px; }

#find-your-ness sup { position: relative; top: -1.4em; font-size: 30%; }

#find-your-ness p { font-size: 22px; text-align: center; padding: 0 80px; line-height: 1.2; }


.province {
  margin: 30px auto;
  text-align: left;
  width: 100%;
  max-width: 360px;
}

.province a { color: rgb(156, 29, 100); }


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

.province .btn-province-dropdown img { width: 20px; }

.province .province-inner #province-dropdown {
  display: none;
  position: absolute;
  width: 100%; 
  margin-top: 47px;
  margin-bottom: 20px;
  top: 0;
  left: 0;
  background-color: rgb(243, 240, 217);
  border-radius: 0 0 20px 20px;
  z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */
}

.province-inner a.btn-province-dropdown {
  display: block;
  padding: 16px;
  border-radius: 20px;
  background-color: rgb(243, 240, 217);
}

.province-inner a.btn-province-dropdown.dropdown-showing {
  border-radius: 20px 20px 0 0; /* square off the bottom */
}

#province-dropdown a {
  display: block;
  padding: 4px 16px;
}

/* Provinces - cross out the names and dim them */
body.splash-page #province-dropdown a[href="#"] { text-decoration: line-through; color: rgba(156, 29, 100, .3); }

/* 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-inner img {
  position: absolute;
  top: 19px;
  right: 16px;
}

.province-inner a {
  /*background-color: rgb(243, 240, 217);*/
  padding: 0 8px;
  /*border-radius: 30px;*/
}

#province-dropdown a:hover {
  background-color: rgb(212, 209, 192);
}


.find-in-bc-infobox { display: none; width: 100%; max-width: 60vw; text-align: center; line-height: 1.2; background: #9c1d64; color: white; padding: 8px; top: 35px; position: absolute; left: 61px; box-shadow: 0 0 6px 0px rgb(0 0 0 / 70%); }


.submit img.img-submit { height: 22px; }
.submit img.img-arrow { height: 16px; margin-bottom: 3px; }

#find-your-ness img.rotating { position: absolute; bottom:-60px; right: 120px; width: 120px; }



@media only screen and (max-width: 840px)
{
  br.br-find-your-ness { display: inline; }
}

@media only screen and (max-width: 900px)
{
  #find-your-ness { background-image: url('/img/mobile-bg-find-your-ness.jpg'); background-size: cover; padding: 120px 20px; }
  #find-your-ness p { padding: 0 20px; }
  #find-your-ness img.rotating { width: 120px; margin-left: -60px; left: 50%; } /* centers it */
}




/* ======================================================
   Catch us on the flipside
   ====================================================== */

#catch-us { padding: 120px 60px; color: #f1efd9; background-color: rgb(181, 135, 184); background-image: url('/img/bg-catch-us.png'); background-size: contain; background-repeat: no-repeat; }
@media only screen and (max-width: 900px)
{
  #catch-us { background-image: url('/img/mobile-bg-catch-us.png'); background-size: cover; }
}
#catch-us .catch-us-inner { display: flex; flex-flow: row wrap; max-width: 1800px; margin: auto; }

#catch-us .catch-us-left { flex: 1 0 30%; margin-right: 20%; }
#catch-us .catch-us-left div { /*max-width: 300px; margin: auto;*/ }
#catch-us .catch-us-left div img { margin-top: -20px; }
#catch-us .catch-us-left div p { margin-top: 32px; font-size: 22px; line-height: 1.2; }
#catch-us .catch-us-right { flex: 0 0 50% !important; flex-wrap: wrap; }
#catch-us .catch-us-right textarea { width: 100%; height: 160px; margin-top: 12px; }

#catch-us .catch-us-right input,
#catch-us .catch-us-right textarea { background-color: #f1efd9; }

#catch-us .catch-us-right .join-and-enter { display: flex; margin-top: 10px; }
#catch-us .catch-us-right .join-and-enter div { flex: 0 0 50%; }
#catch-us .catch-us-right .join-and-enter div:first-child { text-align: left; }
#catch-us .catch-us-right .join-and-enter div:last-child { flex: 0 0 50%; text-align: right; }
#catch-us .catch-us-right .join-and-enter input[type="checkbox"] { transform: scale(1.5); border: none; margin-right: 10px; }

#catch-us .catch-us-right .catch-us-email-link { margin-top: 40px; text-align: center; line-height: 1.4; flex: 0 0 100%; }
#catch-us .catch-us-right .catch-us-email-link a { color: #f1efd9; }

/*
todo: fix this (below) to hide the border around the checkbox;
input[type="checkbox"] {
    -webkit-appearance: none;
}
*/
/*#catch-us .catch-us-right input { width: 50%; }*/
/*#catch-us .catch-us-right input.email-address { width: 100%; }*/

@media only screen and (max-width: 900px)
{
  #catch-us { padding: 120px 20px; }
  #catch-us .catch-us-left,
  #catch-us .catch-us-right { flex: 0 0 100% !important; }
  #catch-us .catch-us-left { margin-bottom: 30px; }
  #catch-us .col-first-last-email input:not([type="checkbox"]) { float: none; width: 100%; }
  #catch-us .col-first-last-email input.last-name { margin: 12px 0 0 0; }
}




/* ======================================================
   Join our mailing lest and social media container
   ====================================================== */


#footer { background-color: rgb(156, 29, 100); padding: 80px 40px 100px; }

#footer h3 { font-family: Jaune-GrandeBlack; font-size: 22px; margin-bottom: 32px; }

#footer h3,
#footer p { color: rgb(219, 195, 221); }
#footer input { background-color: rgb(219, 195, 221); }

.join-and-social-and-footer-container { max-width: 960px; margin: auto; }
  .join-and-social { justify-content: space-between; flex-wrap: wrap; }
    /*.col { flex: 1; color: #fff; }*/
    .col-first-last-email { flex: 0 0 380px !important; }
      .col-first-last-email input:not([type="checkbox"]) { float: left; width: 48.5%; }
      .col-first-last-email input.last-name { margin: 0 0 0 3%; }
      .col-first-last-email input.email-address { clear: left; margin-top: 12px; width: 100%; }
    .col-enter { flex: 0 0 160px !important; }
      .arrow-img,
      .enter-img { vertical-align: middle; }
      .arrow-img { width: 40px; }
      .enter-img { width: 70px; }
    .col-social { flex: 1 0 250px !important; text-align: right; padding-right: 20px; transform: translateX(-20px); /* todo: why is this needed? */ }
      .col-social div.social-icons a:not(:first-child) { margin-left: 6px; }
      .col-social a img { width: 28px !important; vertical-align: bottom; }
      .col-social div.privacy-policy p { line-height: 1.4; }
    .col-ness-in-flower { flex: 0 0 90px !important; }
      
    .col.align-bottom { position: relative; }
      .align-bottom-inner { position: absolute; bottom: 0; }
      .col-enter .align-bottom-inner { left: 8px; bottom: 12px; } /* needs to line up with middle of "Email" input box */
      .col-social .align-bottom-inner { right: 20px; } 

      div.privacy-policy { margin-top: 12px; font-size: 10px; }
      div.privacy-policy a { color: rgb(219, 195, 221); }


@media only screen and (max-width: 1000px)
{
  .flex-row-break-invisible-2 { flex-basis: 100%; height: 0; }
  .col-first-last-email { flex: 1 !important; }
  .col-enter { flex: 0 0 124px !important; } /* right-align "-> Enter" */
  .col-enter .align-bottom-inner { right: 0; } /* right-align "-> Enter" */
  .col-social { flex: 1; transform: translateX(0px); }
  .col-social .align-bottom-inner { position: relative; margin-top: 80px; text-align: center; right: auto; }
  .col-social .align-bottom-inner .social-icons { padding-bottom: 23px; } /* to vertically center it */
  .col-social .align-bottom-inner a img { width: 48px !important; }
  .col-social .align-bottom-inner div { text-align: left; }
  .privacy-policy.mobile-only p { position: relative; text-align: center; margin-top: 34px; font-size: 14px; line-height: 18px; }
}

@media only screen and (max-width: 900px)
{
  #footer { padding-left: 20px; padding-right: 20px; }
}

@media only screen and (max-width: 440px)
{
  .flex-row-break-invisible-1 { flex-basis: 100%; height: 0; }
  .col-enter { flex: 1 !important; }
  .col-enter .align-bottom-inner { position: relative; left: auto; right: auto; bottom: auto; margin-top: 20px;  text-align: right !important; }
  .col-social { margin-top: 20px; }
  .col-social .align-bottom-inner a img { width: 40px !important; }
  .col-social .align-bottom-inner .social-icons { padding-bottom: 0px; } /* to vertically center it */

}




/* ======================================================
   Jump to top arrow (back to top arrow)
   ====================================================== */

#jump-to-top { position: fixed; bottom: 8px; right: 8px; width: 70px; height: 70px;  z-index: 4; }
#jump-to-top:hover { cursor: pointer; }
#jump-to-top img { }




/* ======================================================
   Mobile menu
   ====================================================== */

#mobile-menu { display: none; }

@media only screen and (max-width: 1160px)
{
  #nav { display: none; }
  #mobile-menu { display: block; }
}

#mobile-menu { position: absolute; padding: 0; margin: 0; top: 0; z-index: 999999; }

#mobile-menu p { color: rgb(156, 29, 100); text-align: center; }

/* hamburger button */
#mobile-menu .open-mobile-menu { position: fixed; top: 30px; right: 30px; font-size: 100px; z-index: 9999; display: block; }

/* the lines that make up the open-menu button */
#mobile-menu .open-mobile-menu div { border-bottom: 2px solid #f1efd9; width: 50px; margin-bottom: 13px; }

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

/* lightbox */
#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: rgba(241, 239, 217, 1);
}

/* 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: 100px 0 40px; }
#mobile-menu .tbl-cell .ul-mobile-menu { /*margin-top: 230px;*/ }
#mobile-menu .tbl-cell li { margin: 0; text-align: center; }
#mobile-menu .tbl-cell li a { display: block; color: rgb(156, 29, 100); font-size: 30px; font-weight: bold; padding: 14px 0; }
#mobile-menu .tbl-cell li a:hover { background: #dac3dc; }

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

/* strains arrow */
.mobile-menu-arrow-down {
  display: inline-block;
  margin-left: 8px;
  width: 24px; 
  height: 15px; 
  background-image: url('/img/mobile-menu-down-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: -32px; /* so this doesn't affect left/right spacing AKA "Strains" is still centered to the other text */
}

/* squiggly line before join our mailing list */
#mobile-menu p.underline { width: 120px; margin: 90px auto 20px; }

/* join our mailing list */
#mobile-menu p.join-our-mailing-list { font-family: Jaune-GrandeBlack; color: rgb(156, 29, 100); text-align: center; font-size: 36px; line-height: 42px; }

#mobile-menu p#mobile-menu-email-input-wrapper,
#mobile-menu p#mobile-menu-enter-button-wrapper { margin: 30px auto 20px; max-width: 340px; padding: 0 20px; position: relative; /* this is needed or the shake effect causes the input to jump higher on page */ }
#mobile-menu p#mobile-menu-email-input-wrapper input { width: 100%; }

#mobile-menu p#mobile-menu-enter-button-wrapper { text-align: center; }

/* social icons at bottom */
#mobile-menu .social-icons { margin: 80px 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; }





/* ======================================================
   Animations
   ====================================================== */

a:hover img.bounce-right-when-hovered,
a:active img.bounce-right-when-hovered {
  -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;
}

a:hover img.bounce-left-when-hovered,
a:active img.bounce-left-when-hovered {
  -webkit-animation : bounce_left .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_left .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_left .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_left .15s ease-in-out 0s 2 alternate;
  animation         : bounce_left .15s ease-in-out 0s 2 alternate;
}

a:hover img.bounce-up-when-hovered,
a:active img.bounce-up-when-hovered {
  -webkit-animation : bounce_up .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_up .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_up .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_up .15s ease-in-out 0s 2 alternate;
  animation         : bounce_up .15s ease-in-out 0s 2 alternate;
}

@-webkit-keyframes bounce_right /* Safari and Chrome */ {
  from {
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}
@keyframes bounce_right {
  from {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}


@-webkit-keyframes bounce_left /* Safari and Chrome */ {
  from {
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}
@keyframes bounce_left {
  from {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -webkit-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
  }
}


@-webkit-keyframes bounce_up /* Safari and Chrome */ {
  from {
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@keyframes bounce_up {
  from {
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -ms-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
}


/* ======================================================
   Greensock practice
   ====================================================== */

.wrapper {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 60px auto;
}

.parent,
.child {
  position: absolute;
  border-radius: 8px;
}

.parent {
  width: 100%;
  height: 100%;
  background: black;
}

.child {
  width: 200px;
  height: 100px;
  background: #42a6e0;
  right: -50px;
  bottom: -20px;
}