

.hide {
  opacity: 0;
  filter: blur(10px);
  transition: all 1.8s cubic-bezier(0, 1.1, 1, 1.02);
}

.fadeIn {
  opacity: 1;
  filter: blur(0px);
}

.blurScale {
  animation: blurScale 16s linear infinite;
  animation-fill-mode: both;
}

.blurScale2 {
  animation: blurScale2 24s linear infinite;
  animation-fill-mode: both;
}

@keyframes BgMove {
	0% {
		background-position: 40% 0;
	}

	100% {
		background-position: 100% 0;
	}

}

@-webkit-keyframes blurScale {
  0% {
    filter: blur(0px);
    transform: scale(1.5);
    transform-origin: center;
  }

  12% {
    filter: blur(0px);
  }

  100% {
    filter: blur(0px);
    transform: scale(1);
  }
}
@keyframes blurScale {
  0% {
    filter: blur(0px);
    transform: scale(1.5);
    transform-origin: center;
  }

  12% {
    filter: blur(0px);
  }

  100% {
    filter: blur(0px);
    transform: scale(1);
  }
}


@-webkit-keyframes blurScale2 {
  0% {
    filter: blur(0px);
    transform: scale(1);
    opacity: 0.7;
  }

  12% {
    filter: blur(2px);
  }

  100% {
    filter: blur(2.8px);
    transform: scale(1.3);
    opacity: 0.9;
  }
}
@keyframes blurScale2 {
  0% {
    filter: blur(0px);
    transform: scale(1);
    opacity: 0.7;
  }

  12% {
    filter: blur(2px);
  }

  100% {
    filter: blur(2.8px);
    transform: scale(1.3);
    opacity: 0.9;
  }
}


@keyframes menuOn {
  0% {
    right: -100%;
  }
  100% {
    right: 0%;
  }
}
.menuOn {
  animation: menuOn 0.35s ease 0s forwards;
}

@keyframes menuOff {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}
.menuOff {
  animation: menuOff 0.35s ease 0s forwards;
}


@-webkit-keyframes glow {
  0% {
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0px 0px 80px rgba(255, 255, 255, 1)) brightness(1.2);
    transform: scale(1.08);
  }
  100% {
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
}
@keyframes glow {
  0% {
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0px 0px 80px rgba(255, 255, 255, 1)) brightness(1.2);
    transform: scale(1.08);
  }
  100% {
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
}


@-webkit-keyframes story {
  0% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
  31%,32%,33%,34%,35% {
    background: url(../img/section3/story03.jpg) center no-repeat;
    background-size: cover;
  }
  64%,65%,66%,67%,68% {
    background: url(../img/section3/story01.jpg) center no-repeat;
    background-size: cover;
  }
  96%,97%,98%,99%,100% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
}
@keyframes story {
  0% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
  31%,32%,33%,34%,35% {
    background: url(../img/section3/story03.jpg) center no-repeat;
    background-size: cover;
  }
  64%,65%,66%,67%,68% {
    background: url(../img/section3/story01.jpg) center no-repeat;
    background-size: cover;
  }
  96%,97%,98%,99%,100% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
}

@-webkit-keyframes story2 {
  0% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
  33% {
    background: url(../img/section3/story03.jpg) center no-repeat;
    background-size: cover;
  }
  66% {
    background: url(../img/section3/story01.jpg) center no-repeat;
    background-size: cover;
  }
  100% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
}
@keyframes story2 {
  0% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
  33% {
    background: url(../img/section3/story03.jpg) center no-repeat;
    background-size: cover;
  }
  66% {
    background: url(../img/section3/story01.jpg) center no-repeat;
    background-size: cover;
  }
  100% {
    background: url(../img/section3/story02.jpg) center no-repeat;
    background-size: cover;
  }
}

@-webkit-keyframes sticker {
  0%, 50% {
    background: url(../img/sticker1.png) no-repeat;
    background-size: contain;
  }
  100% {
    background: url(../img/sticker2.png) no-repeat;
    background-size: contain;
  }
}
@keyframes sticker {
  0%, 50% {
    background: url(../img/sticker1.png) no-repeat;
    background-size: contain;
  }
  100% {
    background: url(../img/sticker2.png) no-repeat;
    background-size: contain;
  }
}
