@keyframes NaviBar {
  0% { transform:scaleX(1); transform-origin: right;}
  50% { transform:scaleX(0); transform-origin: right; }
  51% { transform:scaleX(0); transform-origin: left; }
  100% { transform:scaleX(1); transform-origin: left; }
}

@keyframes NaviHover {
  0% { left:-6px; opacity:0; }
  100% { left:-8px; opacity:1; }
}

@keyframes NaviOpen {
  0% { opacity:0; }
  100% { opacity:1; }
}

@keyframes MainLogoFade {
  0% { opacity:0; margin-top:10px; }
  100% { opacity:1;margin-top:0px; }
}

@keyframes LoaderFade {
  0% { left:-20vw; opacity:1; }
  90% { opacity:1; }
  100% { left:140vw; opacity:0; }
}

@keyframes dream_bg {
  0% {background: radial-gradient(red, gold, limegreen, blue, deeppink, beige )}
  15% {background: radial-gradient(beige, red, gold, limegreen, blue, deeppink )}
  30% {background: radial-gradient(deeppink, beige, red, gold, limegreen, blue )}
  45% {background: radial-gradient(blue, deeppink, beige, red, gold, limegreen )}
  60% {background: radial-gradient(limegreen, blue, deeppink, beige, red, gold )}
  75% {background: radial-gradient(gold, limegreen, blue, deeppink, beige, red )}
  100% {background: radial-gradient(red, gold, limegreen, blue, deeppink, beige )}
}

@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

@keyframes logoRotate {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(720deg); }
  70% { transform:rotate(1440deg); }
  100% { transform:rotate(2880deg); }
}


@media screen and (min-width:960px) {

  @keyframes NaviHover {
    0% { top:-6px; opacity:0; }
    100% { top:-8px; opacity:1; }
  }

  @keyframes SlideImgA {
    0% { opacity:1; }
    13% { opacity:1; }
    16.5% { opacity:0; }
    29.5% { opacity:0; }
    33% { opacity:0; }
    46% { opacity:0; }
    49.5% { opacity:0; }
    62.5% { opacity:0; }
    66% { opacity:0; }
    79% { opacity:0; }
    82.5% { opacity:0; }
    95.5% { opacity:0; }
    100% { opacity:1; }
  }
  @keyframes SlideImgB {
    0% { opacity:0; }
    13% { opacity:0; }
    16.5% { opacity:1; }
    29.5% { opacity:1; }
    33% { opacity:0; }
    46% { opacity:0; }
    49.5% { opacity:0; }
    62.5% { opacity:0; }
    66% { opacity:0; }
    79% { opacity:0; }
    82.5% { opacity:0; }
    95.5% { opacity:0; }
    100% { opacity:0; }
  }
  @keyframes SlideImgC {
    0% { opacity:0; }
    13% { opacity:0; }
    16.5% { opacity:0; }
    29.5% { opacity:0; }
    33% { opacity:1; }
    46% { opacity:1; }
    49.5% { opacity:0; }
    62.5% { opacity:0; }
    66% { opacity:0; }
    79% { opacity:0; }
    82.5% { opacity:0; }
    95.5% { opacity:0; }
    100% { opacity:0; }
  }
  @keyframes SlideImgD {
    0% { opacity:0; }
    13% { opacity:0; }
    16.5% { opacity:0; }
    29.5% { opacity:0; }
    33% { opacity:0; }
    46% { opacity:0; }
    49.5% { opacity:1; }
    62.5% { opacity:1; }
    66% { opacity:0; }
    79% { opacity:0; }
    82.5% { opacity:0; }
    95.5% { opacity:0; }
    100% { opacity:0; }
  }
  @keyframes SlideImgE {
    0% { opacity:0; }
    13% { opacity:0; }
    16.5% { opacity:0; }
    29.5% { opacity:0; }
    33% { opacity:0; }
    46% { opacity:0; }
    49.5% { opacity:0; }
    62.5% { opacity:0; }
    66% { opacity:1; }
    79% { opacity:1; }
    82.5% { opacity:0; }
    95.5% { opacity:0; }
    100% { opacity:0; }
  }
  @keyframes SlideImgF {
    0% { opacity:0; }
    13% { opacity:0; }
    16.5% { opacity:0; }
    29.5% { opacity:0; }
    33% { opacity:0; }
    46% { opacity:0; }
    49.5% { opacity:0; }
    62.5% { opacity:0; }
    66% { opacity:0; }
    79% { opacity:0; }
    82.5% { opacity:1; }
    95.5% { opacity:1; }
    100% { opacity:0; }
  }

  @keyframes logoRotate {
    0% { transform:rotate(0deg); }
    50% { transform:rotate(360deg); }
    70% { transform:rotate(800deg); }
    100% { transform:rotate(1440deg); }
  }

}


@media screen and (min-width:1500px) {

  @keyframes NaviHover {
    0% { top:-0.2vw; opacity:0; }
    100% { top:-0.3vw; opacity:1; }
  }
}