.cssanimations .loader-wrapper {
  background-color: #000;
  display: block;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.loader-wrapper {
  display: none;
  -moz-animation: hideLoader 1s cubic-bezier(0.555, -0.260, 1.000, 0.675) 4s forwards;
  -webkit-animation: hideLoader 1s cubic-bezier(0.555, -0.260, 1.000, 0.675) 4s forwards;
  animation: hideLoader 1s cubic-bezier(0.555, -0.260, 1.000, 0.675) 4s forwards;
}

@-moz-keyframes hideLoader {
  0% {
    top: 0%;
    height: 100%;
  }
  90% {
    display: block;
    top: -100%;
    height: 100%;
  }
  100% {
    display: none;
    top: -100%;
    height: 0;
  }
}

@-webkit-keyframes hideLoader {
  0% {
    top: 0%;
    height: 100%;
  }
  90% {
    display: block;
    top: -100%;
    height: 100%;
  }
  100% {
    display: none;
    top: -100%;
    height: 0;
  }
}

@keyframes hideLoader {
  0% {
    top: 0%;
    height: 100%;
  }
  90% {
    display: block;
    top: -100%;
    height: 100%;
  }
  100% {
    display: none;
    top: -100%;
    height: 0;
  }
}

.loader-container {
  height: 270px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: 15%;
  width: 320px;
}

.loader-container img {
  display: block;
  width: 100%;

  -moz-animation: loaderSml 3s steps(39, end) forwards;
  -webkit-animation: loaderSml 3s steps(39, end) forwards;
  animation: loaderSml 3s steps(39, end) forwards;
}

@media (min-width: 720px) {
  .loader-container {
    height: 500px;
    width: 593px;
  }

  .loader-container img {

    -moz-animation: loaderLrg 3s steps(39, end) forwards;
    -webkit-animation: loaderLrg 3s steps(39, end) forwards;
    animation: loaderLrg 3s steps(39, end) forwards;
  }
}

@media (min-width: 1024px) {
  .loader-container {
    height: 500px;
    width: 593px;
  }
}

@-moz-keyframes loaderSml {
  to {
    transform: translateY(-10522px);
  }
}

@-webkit-keyframes loaderSml {
  to {
    transform: translateY(-10522px);
  }
}

@keyframes loaderSml {
  to {
    transform: translateY(-10522px);
  }
}
 
@-moz-keyframes loaderLrg {
  to {
    transform: translateY(-19499px);
  }
}

@-webkit-keyframes loaderLrg {
  to {
    transform: translateY(-19499px);
  }
}

@keyframes loaderLrg {
  to {
    transform: translateY(-19499px);
  }
}