@charset "UTF-8";
/* CSS Document */


.delay {
	transition-delay: 0.3s !important;
}

.delay2 {
	transition-delay: 0.6s !important;
}

.delay3 {
	transition-delay: 0.9s !important;
}

/*-----------------------------------------------*/
/* REVEAL */
/*-----------------------------------------------*/
.reveal{
	opacity: 0;
	--reveal-duration: 1s;
	transition: var(--reveal-duration) all ease;
}
.reveal.active{
	opacity: 1;
}

/* revealUp
-----------------------------------------------*/
.revealUp{
	--revealUp-duration: 1s;
	--revealUp-offset: 1rem;
	opacity: 0; 
	transition: var(--revealUp-duration) all ease;
	transform: translateY(var(--revealUp-offset));
}
.revealUp.active{
	opacity: 1;
	transform: translateY(0);
}


/* bgRevealUp
-----------------------------------------------*/
.bgRevealUp{
	--bgRevealUp-duration: 1s;
	--bgRevealUp-offset: 1rem;
	opacity: 0; 
	background-position-y: var(--bgRevealUp-offset);
	transition: var(--bgRevealUp-duration) all ease;
}
.bgRevealUp.active{
	opacity: 1;
	background-position-y: 0;
}

/* revealDown
-----------------------------------------------*/
.revealDown,
.revealDownOut{
	--revealDown-duration: 1s;
	--revealDown-offset: 1rem;
	opacity: 0; 
	transition: var(--revealDown-duration) all ease;
	transform: translateY(calc(-1*var(--revealDown-offset)));
}
.revealDown.active,
.revealDownOut.active{
	opacity: 1;
	transform: translateY(0);
}

/* revealLeft
-----------------------------------------------*/
.revealLeft,
.revealLeftOut,
.revealLeft100{
	--revealLeft-duration: 1s;
	--revealLeft-offset: 1rem;
	opacity: 0; 
	transition: var(--revealLeft-duration) all ease;
	transform: translateX(calc(-1*var(--revealLeft-offset)));
}
.revealLeft.active,
.revealLeftOut.active,
.revealLeft100.active{
	opacity: 1;
	transform: translateX(0);
}

/* revealRight
-----------------------------------------------*/
.revealRight,
.revealRightOut,
.revealRight100{
	--revealRight-duration: 1s;
	--revealRight-offset: 1rem;
	opacity: 0; 
	transition: var(--revealRight-duration) all ease;
	transform: translateX(var(--revealRight-offset));
}
.revealRight.active,
.revealRightOut.active,
.revealRight100.active{
	opacity: 1;
	transform: translateX(0);
}



/*-----------------------------------------------*/
/* ZOOM */
/*-----------------------------------------------*/


.zoomOutBlur{
	transform: scale(1);
	filter: blur(0);
	opacity: 1;
}
.zoomOutBlur.active{
	--zoom-amt: 2;
	--blur-amt: 1rem;
	--zoomOut-time: 2s;
	transform: scale(var(--zoom-amt));
	filter: blur(--blur-amt);
	opacity: 0;
	transition-timing-function: ease-out;
	transition-duration: var(--zoomOut-time);
}



.zoomOut{
--zoomOut-start: 0.85;
--zoomOut-time: 7.5s;
transform: scale(var(--zoomOut-start));
transition-timing-function: ease-out;
transition-duration: var(--zoomOut-time);
}
  
  .zoomOut.active{
      --zoomOut-end: 1;
	  transform: scale(var(--zoomOut-end));
  }

#pdp .fadeIn{
	opacity: 0;
	filter: blur(6px);
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

.fadeInBlur span{
  display: inline-block;
	font-size: 2.8rem;
  opacity: 0;
  filter: blur(6px);
transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

#pdp .fadeIn.active,
.fadeInBlur span.active{
	opacity: 1;
    filter: blur(0);
	
}
.fadeInBlur span:nth-child(1).active {transition-delay: 0s;}
.fadeInBlur span:nth-child(2).active {transition-delay: 0.2s;}
.fadeInBlur span:nth-child(3).active {transition-delay: 0.4s;}
.fadeInBlur span:nth-child(4).active {transition-delay: 0.6s;}
.fadeInBlur span:nth-child(5).active {transition-delay: 0.8s;}
.fadeInBlur span:nth-child(6).active {transition-delay: 1s;}
.fadeInBlur span:nth-child(7).active {transition-delay: 1.2s;}
.fadeInBlur span:nth-child(8).active {transition-delay: 1.4s;}
.fadeInBlur span:nth-child(9).active {transition-delay: 1.6s;}
.fadeInBlur span:nth-child(10).active {transition-delay: 1.8s;}
.fadeInBlur span:nth-child(11).active {transition-delay: 2s;}
.fadeInBlur span:nth-child(12).active {transition-delay: 2.2s;}
.fadeInBlur span:nth-child(13).active {transition-delay: 2.4s;}
.fadeInBlur span:nth-child(14).active {transition-delay: 2.6s;}
.fadeInBlur span:nth-child(15).active {transition-delay: 2.8s;}
.fadeInBlur span:nth-child(16).active {transition-delay: 3s;}
.fadeInBlur span:nth-child(17).active {transition-delay: 3.2s;}
.fadeInBlur span:nth-child(18).active {transition-delay: 3.4s;}


@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}


/*-----------------------------------------------*/
/* FLIP */
/*-----------------------------------------------*/


.flipInRight {
	--revealRight-duration: 1s;
	transition: var(--revealRight-duration) all ease;
	transform: rotateY(-80deg);
    opacity: 0;
}

.flipInRight.active {
    transform: rotateY(0);
    opacity: 1;
  }


/*-----------------------------------------------*/
/* SLIDE */
/*-----------------------------------------------*/


.slideInDepthRight {
	--revealRight-duration: 1s;
/*	transition: var(--revealRight-duration) all ease;*/
	transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
	transition-duration: var(--revealRight-duration);
	-webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
            transform: translateX(800px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
}

.slideInDepthRight.active {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -1800px 50%;
            transform-origin: -1800px 50%;
    opacity: 1;
  }


.slitInVertical.active{
	-webkit-animation: slit-in-vertical 0.45s ease-out both;
	        animation: slit-in-vertical 0.45s ease-out both;
}

@-webkit-keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
}






.rollInTopBlur{
	transform: translateY(-5rem) rotate(-270deg);
    filter: blur(50px);
	opacity: 0;
	transition: 1s all ease;
}

.rollInTopBlur.active{
	transform: translateY(0) rotate(0deg);
    filter: blur(0);
	opacity: 1;
}



.disappear{
opacity: 1;
transition: all ease;
transition-duration: var(--disappear-time);
transition-delay: var(--disappear-delay);
}
    
    .disappear.active{
    opacity: 0;
    }


.scaleDown{
    transform-origin: center;
    transform: scale(1);
    transition: all ease;
    transition-duration: var(--scaleDown-time);
    transition-delay: var(--scaleDown-delay);
}

.scaleDown.active{
    transform: scale(var(--scaleDown-amt));
}


/*-----------------------------------------------*/
/* ROTATE */
/*-----------------------------------------------*/

.rotate{
	--rotate-duration: 1s;
	--rotate-deg: 45deg;
	transition: var(--rotate-duration) all ease;
	transform: rotate(var(--rotate-deg));
}
.rotate.active{
	transform: rotate(0);
}