.loader {
  position: fixed;
  background: #020202;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
  top: 0;
  left: 0; }

.loader__inner {
  width: 27rem;
  height: 3.5rem;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  bottom: 0;
  background-repeat: repeat-x;
  background-position: 0; }

.loader.loaded {
  transform: translateY(-100%);
  transition: 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; }

@media screen and (max-width: 600px) {
  .loader.loaded {
    transform: translateX(100%);
    transition: 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; }
}

#letter-u {
  animation: 0.5s letter-uncle both ease-out; }

#letter-n {
  animation: 0.5s letter-uncle both ease-out 0.2s; }

#letter-c {
  animation: 0.5s letter-uncle both ease-out 0.4s; }

#letter-l {
  animation: 0.5s letter-uncle both ease-out 0.6s; }

#letter-e {
  animation: 0.5s letter-uncle both ease-out 0.8s; }

@keyframes letter-uncle {
  0% {
    transform: translateY(-120px); }
  100% {
    transform: translateY(0); } }
#letter-m {
  animation: 0.7s letter-mao both ease-in-out 1.3s; }

#letter-a {
  animation: 0.7s letter-mao both ease-in-out 1.6s; }

#letter-o {
  animation: 0.7s letter-mao both ease-in-out 1.9s; }

@keyframes letter-mao {
  0% {
    transform: translateX(80px); }
  100% {
    transform: translateX(0); } }