.slide-select {
  animation-name: anim-slide;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: anim-slide;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: forwards;
}

.img-fade-in {
  animation-name: fade-in;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: forwards;
}

.img-fade-out {
  animation-name: fade-out;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  -webkit-animation-name: fade-out;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: forwards;
}

.letter-fade-in {
  -webkit-animation-name: fade-letter;
          animation-name: fade-letter;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.line-anim {
  -webkit-animation-name: line-left;
          animation-name: line-left;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  /* or: Xms */
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  /* or: normal */
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  /* or: backwards, both, none */
}

@-webkit-keyframes line-left {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes line-left {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-letter {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes fade-letter {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes anim-slide {
  from {
    height: calc(100vh - calc(100vh - 100%));
    opacity: 0.5;
  }
  to {
    height: 360px;
    opacity: 1;
  }
}

@keyframes anim-slide {
  from {
    height: calc(100vh - calc(100vh - 100%));
    opacity: 0.5;
  }
  to {
    height: 360px;
    opacity: 1;
  }
}

.icon-anim {
  animation-name: anim-icon;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: anim-icon;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anim-icon {
  0% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
            clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 50%);
            clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 50%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%);
  }
  75% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes anim-icon {
  0% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
            clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 50%);
            clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 50%);
  }
  50% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%);
  }
  75% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

.anim-mask__in {
  animation-name: mask-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-name: mask-in;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}

.anim-mask__out {
  animation-name: mask-out;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  -webkit-animation-name: mask-out;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes mask-in {
  0% {
    -webkit-clip-path: inset(100% 100% 100% 100%);
            clip-path: inset(100% 100% 100% 100%);
  }
  100% {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes mask-in {
  0% {
    -webkit-clip-path: inset(100% 100% 100% 100%);
            clip-path: inset(100% 100% 100% 100%);
  }
  100% {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
  }
}

@-webkit-keyframes mask-out {
  0% {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
  }
  100% {
    -webkit-clip-path: inset(100% 100% 100% 100%);
            clip-path: inset(100% 100% 100% 100%);
  }
}

@keyframes mask-out {
  0% {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
  }
  100% {
    -webkit-clip-path: inset(100% 100% 100% 100%);
            clip-path: inset(100% 100% 100% 100%);
  }
}

/*
@keyframes anim-icon {
    //0%   {clip-path: inset(1px 1px 0px 0px);}
    //25%  {clip-path: inset(1px 1px 60px 0px);}
    //50%  {clip-path: inset(1px 1px 60px 0px);}
    //75%  {clip-path: inset(1px 1px 60px 0px);}
    100% {clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 50%);}
}
*/
.audio-on {
  -webkit-animation-name: audio-anim;
          animation-name: audio-anim;
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  /* or: Xms */
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  /* or: normal */
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  /* or: backwards, both, none */
}

@-webkit-keyframes audio-anim {
  0% {
    -webkit-transform: translateX(-6px) scaleY(1);
            transform: translateX(-6px) scaleY(1);
  }
  100% {
    -webkit-transform: translateX(0px) scaleY(1.3);
            transform: translateX(0px) scaleY(1.3);
  }
}

@keyframes audio-anim {
  0% {
    -webkit-transform: translateX(-6px) scaleY(1);
            transform: translateX(-6px) scaleY(1);
  }
  100% {
    -webkit-transform: translateX(0px) scaleY(1.3);
            transform: translateX(0px) scaleY(1.3);
  }
}
/*# sourceMappingURL=motion.css.map */