.loader__loader {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 50%;
  max-height: 60%;

  transform: translate(-50%, -50%);
}

.loader__img {
  max-width: 100%;
  max-height: 100%;
}

.loader__start {
  -webkit-animation: start-logo-hide 0.5s ease-in-out forwards 2.5s;
          animation: start-logo-hide 0.5s ease-in-out forwards 2.5s;
}

.loader__load {
  opacity: 1;
  /* display: none; */

  -webkit-animation: loader-logo-fade ease-in-out infinite 3.5s;;

  animation: loader-logo-fade ease-in-out infinite 3.5s;
}

.svg__letter {
  stroke-width: 3px;
  stroke: url('#paint7_linear');
  -webkit-animation: stroke 2s forwards 0.5s;
          animation: stroke 2s forwards 0.5s;
}

.svg__letter:nth-child(1) {
  stroke-dasharray: 337;
  stroke-dashoffset: 337;
}
.svg__letter:nth-child(2) {
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
}
.svg__letter:nth-child(3) {
  stroke-dasharray: 238;
  stroke-dashoffset: 238;
}
.svg__letter:nth-child(4) {
  stroke-dasharray: 294;
  stroke-dashoffset: 294;
}
.svg__letter:nth-child(5) {
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
}
.svg__letter:nth-child(6) {
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
}
.svg__letter:nth-child(7) {
  stroke-dasharray: 186;
  stroke-dashoffset: 186;
}
.svg__letter:nth-child(8) {
  stroke-dasharray: 663;
  stroke-dashoffset: 663;
}
.svg__letter:nth-child(9) {
  stroke-dasharray: 761;
  stroke-dashoffset: 761;
}

.bg_cover {
  background-position: center;
  background-size: cover;
}
.bg_contain {
  background-position: center;
  background-size: contain;
}
.bg_stretch {
  background-size: 100% 100%;
}

@-webkit-keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes start-logo-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes start-logo-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes loader-logo-visible {
  from {
    display: block;
    opacity: 0;
  }

  80% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes loader-logo-visible {
  from {
    display: block;
    opacity: 0;
  }

  80% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes loader-logo-fade {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  5% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    -webkit-transform: translate(-50%, -50%) scale(0.95);
            transform: translate(-50%, -50%) scale(0.95);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes loader-logo-fade {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  5% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    -webkit-transform: translate(-50%, -50%) scale(0.95);
            transform: translate(-50%, -50%) scale(0.95);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -o-linear-gradient(top, white, black);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}

@media (orientation: landscape) and (max-height: 450px) {
  .loader__start {
    visibility: hidden;
  }
  .svg__letter {
    -webkit-animation-name: none;
            animation-name: none;
  }
  .loader__svg {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  .loader__load {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
}

@media (orientation: landscape) {
  .loader__loader {
    max-width: 25%;
  }
}