/*
Theme Name: Konte Child Theme
Theme URI: http://konte.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: A fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: konte
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: konte
*/



/* -------------------------------------------------------------------------- */
/* under construction page
/* -------------------------------------------------------------------------- */

#ucp-template,
#ucp-template * { font-family: "Space Mono", "Courier New", "Courier", serif !important; }

#ucp-template .video-background { opacity: 1; }

#ucp-template .container { max-width: 875px; }

#ucp-template .container > .ucp-row { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; }

#ucp-template [data-module-type="heading_s"] { width: 100%; }

#ucp-template [data-module-type="heading_s"] .headings p { line-height: 2em; }

#ucp-template .bzr-ucp__main-text-paragraph { margin: 40px auto; padding-left: 5px; padding-right: 5px; line-height: 1.8em; font-size: 25px; font-weight: 400; }

#ucp-template .bzr-ucp__main-text-span { background-color: #ffffff; }

/*#ucp-template .newsletter { max-width: unset; margin: auto; }*/

#ucp-template .newsletter input[type="email"] { font-size: unset; margin-bottom: 0; }

#ucp-template .newsletter__form-disclaimer-text { font-size: 14px; line-height: 16px; font-weight: 600; }

#ucp-template .newsletter__submit-link { font-family: "Montserrat", Sans-serif; }
#ucp-template .newsletter__submit-link,
#ucp-template .newsletter__submit-link:hover { text-decoration: none; }

#ucp-template .ucp-element input,
#ucp-template .ucp-element textarea { max-width: unset; }

#ucp-template .ucp-module > .ucp-element label * { text-align: left; }

@media only screen and (max-width: 499px)
{
  #ucp-template .bzr-ucp__main-text-paragraph { font-size: 18px; }
}




/* -------------------------------------------------------------------------- */
/* flyout menu - show the proper Pinterest icon
/* -------------------------------------------------------------------------- */

.socials-menu a[href*="pinterest.ca"]:before {
    font-family: 'FontAwesome';
	content: "\f231" !important;
}





/* -------------------------------------------------------------------------- */
/* homepage hero testing
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px)
{
  .bzr-homepage-hero-section { /*border: solid 1px red;*/ height: calc(100vw / 2.148); /* this container ends up being a BIT too tall when we do it this way, but only in some browsers, because this doesn't factor in the ~17px scrollbar width that might be showing, but the difference is negligeable so not worth the extra work which would have to be done with JS anyway because CSS can't know if the scrollbar is "floating" style (like mac) or not */ max-height: 894px; /* necessary because the hero image doesn't always take the full width of the browser; at 1920px it stops growing horizontally, so this container div needs to stop growing vertically at that point, and this number is correct based on the current aspect-ratio of the hero image, but this will change if the hero-image AR changes in future */ }
}

body .bzr-homepage-hero-section img { display: none; }





/* -------------------------------------------------------------------------- */
/* popup
/* -------------------------------------------------------------------------- */

.popup-modal .popup-content-wrapper { padding: 40px 40px 10px; }

.popup-modal .button-close { top: 8px !important; right: 20px !important; }

.popup-modal .popup-content-wrapper > p { margin: 0; }

/* text */

.popup-modal .popup-content-wrapper .bzr-popup__heading { font-size: 40px !important; line-height: 46px; margin-bottom: 8px; }
.popup-modal .popup-content-wrapper .bzr-popup__text-above-form {  }
.popup-modal .popup-content-wrapper .bzr-popup__text-below-form { font-size: 12px; }


@media only screen and (min-width: 850px)
{
  /*.popup-modal .popup-content-wrapper .bzr-popup__heading { display: none; }*/
}

@media only screen and (max-width: 989px) and (min-width: 850px)
{
  .popup-modal .popup-content-wrapper .bzr-popup__heading { font-size: max(2.7vw, 24px) !important; margin-bottom: 4px; }
  .popup-modal .popup-content-wrapper > .bzr-popup__text-above-form { font-size: max(1.5vw, 12px) !important; }
}

@media only screen and (max-width: 849px)
{
  .popup-modal .popup-content-wrapper { padding-bottom: 20px; }
  .popup-modal .popup-image { display: none; }
}





/* -------------------------------------------------------------------------- */
/* popup form (custom-coded Klaviyo form)
/* -------------------------------------------------------------------------- */

.newsletter--popup { margin: 22px 0 16px; }

.newsletter--popup .newsletter__form-inner { margin-bottom: 24px; }

.newsletter--popup .newsletter__input--email { width: 100%; border: 1px solid #161619 !important; background-color: #ffffff !important; padding: 8px 10px !important; }

.newsletter--popup .newsletter__form-disclaimer-label { display: block; margin: 20px 0 0; font-size: 10px !important; line-height: 12px !important; position: relative; display: flex; padding-left: 32px; min-height: 20px; align-items: center; }

.newsletter--popup .newsletter__form-disclaimer-text {  }

.newsletter--popup .newsletter__form-disclaimer-label--last { margin-top: 12px; }

.newsletter--popup .newsletter__form-disclaimer-checkbox { width: unset !important; /* overrides default Elementor stuff that messes with responsiveness */ } 

.newsletter--popup .newsletter__submit { display: flex; margin-top: 28px; }

.newsletter--popup .newsletter__submit-link {
  background: #000000;
  border-radius: 0px;
  border-style: solid;
  border-color: #000000;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  /* line-height: 1;*/
  text-align: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 50px;
}

.newsletter--popup .newsletter__submit-link:hover { color: #eaff00; }

.newsletter--popup .newsletter__thanks-for-joining { display: none; margin-top: 0; font-weight: bold; }


/* pretty checkboxes - custom checkbox styling on hover/click/checked etc ... */

.newsletter--popup .newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0 !important; margin: 0; font-size: 0 !important; visibility: hidden; /* hide the default checkbox */ }

.newsletter--popup .newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #ffffff; position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #ffffff; border: 1px solid #161619 !important; }
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter--popup .newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #eaff00; }
  
/* specify the background color to be shown when checkbox is active */
.newsletter--popup .newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter--popup .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter--popup .newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter--popup .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.newsletter--popup .newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 6px; bottom: 5px; width: 6px; height: 11px; border: solid #eaff00; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

@media only screen and (max-width: 979px) and (min-width: 850px)
{
  .newsletter--popup .newsletter__thanks-for-joining { font-size: max(1.5vw, 12px) !important; }
}





/* -------------------------------------------------------------------------- */
/* footer form (custom-coded Klaviyo form)
/* -------------------------------------------------------------------------- */


.newsletter--footer { margin: 0 0 16px; }

.newsletter--footer .newsletter__form { display: flex; flex-wrap: wrap; }

.newsletter--footer .newsletter__form-inner { flex-basis: 100%; min-height: 60px; display: flex; }

.newsletter--footer .newsletter__disclainers-and-submit { flex-grow: 1; display: flex; flex-flow: row wrap; }

.newsletter--footer .newsletter__disclainers { flex-basis: 100%; margin-bottom: 12px; }

.newsletter--footer .newsletter__form-disclaimer-label { display: block; line-height: 6px; margin-top: 8px; position: relative; display: flex; padding-left: 32px; min-height: 20px; align-items: center; }

.newsletter--footer .newsletter__form-disclaimer-text { font-size: 10px; line-height: 12px; }

.newsletter--footer .newsletter__input--email { width: 100%; border: none /*1px solid #161619 !important*/; background-color: #ffffff !important; padding: 8px 20px !important; }

.newsletter--footer .newsletter__submit { display: flex; flex-basis: 100%; }

.newsletter--footer .newsletter__submit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #000000;
  color: #ffffff;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  /* line-height: 1;*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 6px;
  text-transform: uppercase;
  min-height: 60px;
}

.newsletter--footer .newsletter__submit-link:hover { color: #eaff00; }

.newsletter--footer .newsletter__thanks-for-joining { display: none; margin-top: 0; font-size: 20px; font-weight: bold; }


/* pretty checkboxes - custom checkbox styling on hover/click/checked etc ... */

.newsletter--footer .newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ }

.newsletter--footer .newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #ffffff; position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #ffffff; }
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter--footer .newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #eaff00; }
  
/* specify the background color to be shown when checkbox is active */
.newsletter--footer .newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter--footer .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter--footer .newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter--footer .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.newsletter--footer .newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 7px; bottom: 6px; width: 6px; height: 11px; border: solid #eaff00; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


@media only screen and (min-width: 768px) and (max-width: 1024px)
{
  /* the element that contains the footer-form */
  .bzr-sign-up-for-sneak-peeks { padding-bottom: 84px !important; }
}

@media only screen and (max-width: 767px)
{
  .newsletter--footer .newsletter__thanks-for-joining { max-width: 690px; margin-left: auto; margin-right: auto; text-align: center; }
}

@media only screen and (max-width: 499px)
{
  .newsletter--footer .newsletter__form-inner, 
  .newsletter--footer .newsletter__disclainers-and-submit { flex-basis: 100%; min-height: 60px; }
}





/* -------------------------------------------------------------------------- */
/* coming soon form (aka cs form) (custom-coded Klaviyo form)
/* -------------------------------------------------------------------------- */


.newsletter--cs { margin: 0 0 16px; }

.newsletter--cs .newsletter__form { display: flex; flex-wrap: wrap; }

.newsletter--cs .newsletter__form-inner /* email-container would be better name because that's all this does currently */ { flex-basis: calc(100% - 45%); min-height: 60px; display: flex; }

.newsletter--cs .newsletter__disclainers-and-submit { flex-grow: 1; display: flex; flex-flow: row wrap; }

.newsletter--cs .newsletter__disclainers { flex-basis: 100%; margin-bottom: 12px; }

.newsletter--cs .newsletter__form-disclaimer-label { line-height: 6px; margin-top: 20px; text-align: left; position: relative; display: flex; padding-left: 40px; }

.newsletter--cs .newsletter__form-disclaimer-text { font-size: 10px; line-height: 12px; text-align: left; }

.newsletter--cs .newsletter__input--email { width: 100%; border: none /*1px solid #161619 !important*/; background-color: #ffffff !important; padding: 8px 20px !important; }

.newsletter--cs .newsletter__submit { display: flex; flex-basis: 45%; }

.newsletter--cs .newsletter__submit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #000000;
  color: #ffffff;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px;
  font-weight: 500;
  /* line-height: 1;*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 6px;
  text-transform: uppercase;
  min-height: 60px;
}

.newsletter--cs .newsletter__submit-link:hover { color: #eaff00; }

.newsletter--cs .newsletter__submit-link[data-newsletter-submit="submitting"] { cursor: default; }

.newsletter--cs .newsletter__thanks-for-joining { display: none; margin-top: 0; font-size: 20px; font-weight: bold; }


/* pretty checkboxes - custom checkbox styling on hover/click/checked etc ... */

.newsletter--cs .newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ }

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



@media only screen and (min-width: 768px) and (max-width: 1024px)
{
  /* the element that contains the footer-form */
  .bzr-sign-up-for-sneak-peeks { padding-bottom: 84px !important; }
}

@media only screen and (max-width: 767px)
{
  .newsletter--cs .newsletter__thanks-for-joining { max-width: 690px; margin-left: auto; margin-right: auto; text-align: center; }
}

@media only screen and (max-width: 499px)
{
  .newsletter--cs .newsletter__form-inner, 
  .newsletter--cs .newsletter__submit,
  .newsletter--cs .newsletter__disclainers-and-submit { flex-basis: 100%; min-height: 60px; }
}





/* -------------------------------------------------------------------------- */
/* shop pages
/* -------------------------------------------------------------------------- */

/* "You're looking for" dropdowns - smaller font-size */
body.woocommerce .products-quick-search .select2-container .products-quick-search-options .select2-results .select2-results__option { font-size: 1rem; }

@media only screen and (max-width: 767px)
{
  /* "You're looking for" dropdowns - smaller font-size */
  body.woocommerce .products-quick-search .select2-container .products-quick-search-options .select2-results .select2-results__option { font-size: .875rem; }
}





/* -------------------------------------------------------------------------- */
/* product pages
/* -------------------------------------------------------------------------- */

/* prevent product descriptions from ending up BEHIND "Related products" */
body.woocommerce-page.single-product .product-summary-inner { max-height: unset !important; }

/* added to cart message (the popup that briefly shows at top-right of page) */
body.woocommerce .notifyjs-konte-success { background-color: #01ff6e; color: #000000; }

/* added to cart message (the popup that shows at the bottom of the page) */
body.woocommerce .woocommerce-message { background-color: #01ff6e; color: #000000; }

/* "View cart" button that's in the popup that shows at the bottom of the page */
body.woocommerce.single-product .woocommerce-message .button { background-color: #000000; border-color: #000000; color: #ffffff; }

/* "Yes, I am 19+" area that shows on some products */
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input { background: #ebebed; display: inline-block; line-heights: 1.4; padding: 0 0 6px 10px; }
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input .wapf-checkbox-label { padding: 0 10px 0 0; }
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input input[type=checkbox] { margin-top: 15px; }





/* -------------------------------------------------------------------------- */
/* checkout page */
/* -------------------------------------------------------------------------- */





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

@media only screen and (max-width: 767px)
{
  [data-elementor-type="footer"] .bzr-footer__sign-up > .elementor-widget-wrap { margin-right: 0 !important; }
}





/* -------------------------------------------------------------------------- */
/* floating animation - the below is all for the floating cannabis gif
/* -------------------------------------------------------------------------- */

:root {

  --repeat-time-outer-wrapper-desktop: 12s;
  --repeat-time-inner-wrapper-desktop: 6;
  
  --repeat-time-outer-wrapper-mobile : 8s;
  --repeat-time-inner-wrapper-mobile : 4s;
  
  --base-size: 200;

}

@media only screen and (min-width: 600px)
{
  :root { --base-size: 330; }
}
@media only screen and (min-width: 2000px)
{
  :root { --base-size: 330; }
}


.bzr-floating-animation {
  position: fixed;
  top: 40vh;
  width: calc(50 / var(--base-size) * 100vw);
  will-change: transform;
  z-index: 100;
  pointer-events: none;
}

/* hide it from back-end */
body.wp-admin .bzr-floating-animation { display: none; }

.bzr-floating-animation * {
  will-change: transform;
}

.bzr-floating-animation__outer-wrapper {
  width: calc(120 / var(--base-size) * 100vw);
  height: calc(120 / var(--base-size) * 100vw);
/*  width: 500px;*/
  position: relative;
  visibility: hidden;
  /*border:solid 1px red;*/
}

.bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__outer-wrapper {
  animation: floating_animation_motion_outer_wrapper var(--repeat-time-outer-wrapper-mobile) linear;
}

/* larger than mobile */
@media only screen and (min-width: 600px)
{
  .bzr-floating-animation,
  .bzr-floating-animation__outer-wrapper {
    width: calc(140 / var(--base-size) * 100vw);
    height: calc(110 / var(--base-size) * 100vw);
/*    width: 500px;*/
/*    height: 500px;*/
  }
  .bzr-floating-animation[data-bzr-floating-animation="start"],
  .bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__outer-wrapper {
    animation-duration: var(--repeat-time-outer-wrapper-desktop);
  }
}

/* large desktop */
@media only screen and (min-width: 2000px)
{

  .bzr-floating-animation,
  .bzr-floating-animation__outer-wrapper {
    width: calc(100 / var(--base-size) * 100vw);
    height: calc(70 / var(--base-size) * 100vw);
  }

  .bzr-floating-animation[data-bzr-floating-animation="start"],
  .bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__outer-wrapper {
    animation-duration: var(--repeat-time-outer-wrapper-desktop);
  }
}

.bzr-floating-animation__inner-wrapper-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(110 / var(--base-size) * 100vw)_____;
  width: 160px; /*border:solid 1px red;*/ /*adam */
  /*max-width: 120px_____;*/
  /*max-width: 200px*/
}

@media only screen and (min-width: 600px)
{
  .bzr-floating-animation__inner-wrapper-1 { width: 180px; }
}
@media only screen and (min-width: 1024px)
{
  .bzr-floating-animation__inner-wrapper-1 { width: 200px; }
}
@media only screen and (min-width: 1680px)
{
  .bzr-floating-animation__inner-wrapper-1 { width: 220px; }
}
@media only screen and (min-width: 2000px)
{
  .bzr-floating-animation__inner-wrapper-1 { width: 240px; }
}


.bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__inner-wrapper-1 {
  animation: floating_animation_motion_1 var(--repeat-time-inner-wrapper-mobile) ease-in;
  animation-fill-mode: forwards;
  /*border:solid 1px red;*/
}

.bzr-floating-animation__image-1 {
  width: 100%;
  max-width: 100%;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

/*.bzr-floating-animation .bzr-floating-animation__inner-wrapper-2 {
  position: absolute;
  top: calc(90 / var(--base-size) * 100vw);
  left: calc(105 / var(--base-size) * -100vw);
}*/

/*.bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__inner-wrapper-5 {
  animation: floating_animation_motion_5 var(--repeat_time_sp) ease-in;
  animation-fill-mode: forwards;
}
@media only screen and (min-width: 600px)
{
  .bzr-floating-animation[data-bzr-floating-animation="start"] .bzr-floating-animation__inner-wrapper-5 {
    animation: floating_animation_motion_5 var(--repeat-time-desktop) ease-in;
    animation-fill-mode: forwards;
  }
}
.bzr-floating-animation .bzr-floating-animation__inner-wrapper-3 {
  position: absolute;
  top: calc(165 / var(--base-size) * 100vw);
  left: calc(227 / var(--base-size) * -100vw);
}
.bzr-floating-animation .bzr-floating-animation__inner-wrapper-4 {
  position: absolute;
  top: calc(48 / var(--base-size) * -100vw);
  left: calc(150 / var(--base-size) * -100vw);
}
.bzr-floating-animation .bzr-floating-animation__inner-wrapper-5 {
  position: absolute;
  top: calc(70 / var(--base-size) * -100vw);
  left: calc(335 / var(--base-size) * -100vw);
}*/



/* for the big container (we have two rotating containers, one that's large and one that just wraps around the GIF; this is for the larger one) */


@keyframes floating_animation_motion_outer_wrapper {
  0% {
    transform: translate3d(-80vw, 0, 0) rotate(40deg);
    opacity: 0;
    visibility: hidden;
  }
  1% {
    transform: scale(1) translate3d(-80vw, 0, 0) rotate(40deg);
    filter: blur(0);
    opacity: 1;
    visibility: visible;
  }
  98% {
    transform: scale(0.95) translate3d(200vw, -220px, 0) rotate(540deg);
    filter: blur(0.2px);
    opacity: 1;
    visibility: visible;
  }
  99% {
    transform: translate3d(200vw, -250px, 0);
    opacity: 0;
    visibility: hidden;
  }
  to {
    transform: translateZ(0);
    opacity: 0;
    visibility: hidden;
  }
}


/* larger than mobile */
@media only screen and (min-width: 600px)
{

  @keyframes floating_animation_motion_outer_wrapper {
    0% {
      transform: translate3d(-30vw, 0, 0) rotate(60deg);
      opacity: 0;
      visibility: hidden;
    }
    1% {
      transform: scale(1) translate3d(-30vw, 0, 0) rotate(60deg);
      filter: blur(0);
      opacity: 1;
      visibility: visible;
    }
    98% {
      transform: scale(0.95) translate3d(200vw, -220px, 0) rotate(720deg);
      filter: blur(0.2px);
      opacity: 1;
      visibility: visible;
    }
    99% {
      transform: translate3d(200vw, -250px, 0);
      opacity: 0;
      visibility: hidden;
    }
    to {
      transform: translateZ(0);
      opacity: 0;
      visibility: hidden;
    }
  }

}

/* for the small container that wraps around the GIF (this is the rotating div that sits inside the other bigger rotating div) */
@keyframes floating_animation_motion_1 {
  0% {
    transform: scale(1) translateZ(0) rotate(0);
  }
  to {
    transform: scale(1.1) translate3d(5vw, 5px, 0) rotate(720deg);
  }
}
/*
@keyframes floating_animation_motion_2 {
  0% {
    transform: scale(1) translateZ(0);
  }
  to {
    transform: scale(0.95) translate3d(calc(20 / var(--base-size) * -100vw), 2px, 0);
  }
}
@keyframes floating_animation_motion_4 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(3vw, -20px, 0);
  }
}
@keyframes floating_animation_motion_5 {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-40vw, calc(30 / var(--base-size) * 100vw), 0);
  }
}
*/