/** Shopify CDN: Minification failed

Line 56:6 Comments in CSS use "/* ... */" instead of "//"
Line 57:6 Comments in CSS use "/* ... */" instead of "//"
Line 177:5 Comments in CSS use "/* ... */" instead of "//"
Line 225:0 Unexpected "}"
Line 389:3 Cannot use type selector "__line" directly after nesting selector "&"

**/

.foxkit-popup {
    display: block !important;
}
.m-hamburger-box .m-hamburger-box__inner,
.m-hamburger-box .m-hamburger-box__inner::before,
.m-hamburger-box .m-hamburger-box__inner::after {
    background-color: white;
}

.sf-header.sf-mega-active .sf-header__bg, 
.sf-header.sf-mega-active .bg-white.sf-header__desktop, 
.sf-header.sf-mega-active .bg-white.sf-header__desktop .sf-header__dropdown-bg {
    background-color: black !important;
}

.sf-header.sf-mega-active .bg-white.sf-header__desktop *{
  color:White;    
  background-color: black !important;
}
.prod__stock-countdown .psc__progress {
    background: #8C7AD2 !important;
}

 	.custom-text-wrap 
	{
       background: #EEEBF0;
       border: solid black 2px;
       box-shadow: -20px 20px #d73975;
       padding: 40px;
        margin-bottom: 30px;
    	margin-top: 50px;
     }

@media (min-width:768px) {
  .foxkit-modal__content {
    max-width: 720px !important;
}
	.test-text-wrap {
	   background: #EEEBF0;
       border: solid black 2px;
       padding: 40px;
       justify-self: right;
       align-self: end;
       width: 45%;
       transform: translate(107%,-25%);
      //transform: translate(-15%,25%);
      //transform: translate(15%,-25%);
    } .lg\:text-5xl {
      font-size: 36px;
    }

}
@media (max-width: 767px) {
  .f-popup__inner .f-popup__image {height: 30vh;}
  .test-text-wrap {
	   background: #EEEBF0;
       border: solid black 2px;
       padding: 40px;
       justify-self: right;
       align-self: unset;
       width: 100%;
       transform: translate(0,0);
    }
}

 	.custom-text-wrap2 
	{
       background: #EEEBF0;
       border: solid black 2px;
       box-shadow: -20px 20px #d73975;
       padding: 40px;
     }

@media (min-width:768px) {
	.test-text-wrap2 {
    background: #EEEBF0;
    border: solid black 2px;
    padding: 40px;
    justify-self: left;
    align-self: start;
    width: 45%;
    transform: translate(107%,-15%);
    } .lg\:text-5xl {
      font-size: 36px;
    }

}
@media (max-width: 767px) {
  .foxkit-popup .foxkit-popup__image img {
    max-height: 35vh;
}

.foxkit-popup__content {
    padding: 20px !important;
}
  .test-text-wrap2 {
	   background: #EEEBF0;
       border: solid black 2px;
       padding: 40px;
       justify-self: right;
       align-self: unset;
       width: 100%;
       transform: translate(0,0);
    }
}

	.custom-img-wrap-yellow 
    {
        border: solid black 2px;
        box-shadow: -20px 20px #f4b4f2, -40px 40px #fdf504;
        padding: 0;
        margin-left: 15%;
        margin-top: 50px;
      	width: 45%;
    }

@media (max-width: 767px) {
  	.custom-img-wrap-yellow 
    {
        border: solid black 2px;
        box-shadow: -20px 20px #f4b4f2, -40px 40px #fdf504;
        padding: 0;
        margin-left: 0%;
        margin-bottom: 50px;
        width: 100%;
    } }
 
    .custom-img-wrap-blue 
    {
        border: solid black 2px;
        box-shadow: 20px 20px #74bee4, 40px 40px #9279cd;
        padding: 0;
        margin-left: 15%;
        margin-top: 50px;
    }
  
  @media (max-width: 767px) {
        .custom-img-wrap-blue 
        {
        border: solid black 2px;
        box-shadow: 20px 20px #74bee4, 40px 40px #9279cd;
        padding: 0;
        margin-left: 0%;
        margin-bottom: 50px;
        width: 100%;
    }
      }

 	.custom-text-wrap-small 
    {
       background: #EEEBF0;
       border: solid black 2px;
       padding: 30px;
       inline-size: fit-content;
       justify-self: right;
     }

	.mt-8 {
        text-align: center;  
    }

	.container-custom-grid
    {  
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
     // gap: 50px 30px;
      grid-auto-flow: row;
    }

	.text1 { 
	grid-area: 2 / 1 / 1 / 1;
    z-index: 9;
    text-align: left;
    height: min-content;
    margin-top: 85%;
    margin-right: -25px;
    grid-column: span 1/2;
    justify-self: end;
    width: max-content;
    display: flex;
    flex-direction: column;
    }

  .img1 { 
    grid-area: 1 / 2 / 2 / 2;
    width: max-content;
    margin-top: 50px;
    grid-column: span 2/-1;
}
  

  .text2 {  
    grid-area: 3 /2/ 2/ 3;
    height: min-content;
    text-align: right;
    justify-self: right;
    grid-column: span 2/3;
    z-index: 9;
    margin-top: 250px;
    width: max-content;
    margin-right: -309px; 
    display: flex;
    flex-direction: column;
}
  

  .img2 { 
    grid-area: 3 / 2 / 2 / 3;
        margin-left: 125px;
    margin-top: 50px;
    grid-column: span 3/-2;
  }

}

  .text-header-custom {
      font-size: 3rem;
      line-height: 1;
      letter-spacing: 2px;
  }

  .text-custom {
      margin-bottom: 0.9em;
      margin-top: 2.75em;
      text-align: center;
  }

@keyframes scrollText {
	0% {
		transform: translateZ(0)
	}
	to {
		transform: translate3d(-30vw, 0, 0)
	}
}

@keyframes sf-scrolling-text-animation {
	0% {
		transform: translateX(-20vw) translateZ(0)
	}
	to {
		transform: translateX(-120vw) translateZ(0)
	}
}

@keyframes sf-scrolling-text-animation-reverse {
	0% {
		transform: translateX(20vw) translateZ(0)
	}
	to {
		transform: translateX(120vw) translateZ(0)
	}
}

.sf__scrolling-text .sf__scrolling-text-inner {
	align-items: center;
	display: flex;
	flex-direction: row;
	height: auto;
	justify-content: flex-start;
	overflow: hidden;
	vertical-align: baseline;
	white-space: nowrap;
	width: 100%
}

.sf__scrolling-text .sf__scrolling-text-inner:hover>* {
	animation-play-state: paused
}

.sf__scrolling-text .sf__scrolling-text-inner>* {
	animation-duration: var(--speed, 15s);
	margin: 0
}

.sf__scrolling-text .sf__scrolling-text-inner a {
	color: inherit;
	text-decoration: none
}

.sf__scrolling-text .sf__scrolling-text-inner a em {
	font-style: normal
}

.sf__scrolling-text .sf__scrolling-text-inner span.custom {
	display: inline-block;
	padding: 0 1em;
	vertical-align: middle
}

.sf__scrolling-text .sf__scrolling-text-inner span.custom[data-scale=medium] {
	padding: 0 1em;
	transform: scale(.5)
}

.sf__scrolling-text .sf__scrolling-text-inner span.custom[data-scale=large] {
	padding: 0 2em
}

.sf__scrolling-text[data-s-dir=ltr] .sf__scrolling-text-inner>* {
	animation: sf-scrolling-text-animation 15s linear infinite;
	transform: translateX(-20%) translateZ(0)
}

.sf__scrolling-text[data-s-dir=rtl] {
	direction: rtl
}

.sf__scrolling-text[data-s-dir=rtl] .sf__scrolling-text-inner>* {
	animation: sf-scrolling-text-animation-reverse 15s linear infinite;
	transform: translateX(20%) translateZ(0)
}

.sf__scrolling-text[data-s-speed=lowest] .sf__scrolling-text-inner>* {
	animation-duration: 15s
}

.sf__scrolling-text[data-s-speed=medium] .sf__scrolling-text-inner>* {
	animation-duration: 7s
}

.sf__scrolling-text[data-s-speed=fast] .sf__scrolling-text-inner>* {
	animation-duration: 4s
}

.sf__scrolling-text[data-style=text-outline] em {
	-webkit-text-stroke-color: inherit;
	-webkit-text-fill-color: transparent
}

.sf__scrolling-text[data-style=text-outline][data-outline-thickness=thin] em {
	-webkit-text-stroke-width: .015em
}

.sf__scrolling-text[data-style=text-outline][data-outline-thickness=thick] em {
	-webkit-text-stroke-width: .03em
}

.sf__scrolling-text[data-style=text-outline] a:hover em {
	-webkit-text-fill-color: initial;
	-webkit-text-stroke-width: 0
}

.sf__scrolling-text.font_size_11vh * {
	font-size: 11vh;
	line-height: 1.2em
}

.button-centered {
 	align-self: center;
      }

.graph-bg {
      background-image: url(grid.jpg);
      background-size: cover;
      border-bottom: white solid 50px;
  	  border-top: white solid 50px !important;
  
}
    

 	.custom-text-wrap-graph 
    {
       background-image: url(grid.jpg);
       background-size: cover;
     }

.scroll-indicator {
  position: absolute;
  bottom: 10px;
  display: block;
  padding-top: 40px;
  padding-bottom: 10px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;

  &__line {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: block;
    width: 1px;
    height: 25px;
    background-color: #000;
    margin: auto;
    content: '';
  }
}

.spacer {
  margin-top: 70px;
}