#splash {
  background:#ffcd12;
  
/*background: radial-gradient(circle, #000000, #cca40e);*/

/*background: linear-gradient(#000000, #ffffff);*/
  background-repeat: repeat-y;
  position: fixed;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height:100vh;

  animation: splash 4s ease-in;
  animation-fill-mode: forwards;

  -webkit-animation:splash 4s ease-in;
  -webkit-animation-fill-mode: forwards;

   -moz-animation:splash 4s ease-in;
  -moz-animation-fill-mode: forwards;
  
   -o-animation:splash 4s ease-in;
  -o-animation-fill-mode: forwards;

  z-index:99999;
}



#loader {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  -webkit-transform:translate(-50%, 0);
}



#splash .anim {
  height: 100%;
  position: absolute;
  left: 50%;
  width: 100px;
  transform: translate(-50%, 100%);
  -webkit-transform:translate(-50%, 100%);

  animation: loader 3s linear;
  animation-fill-mode: forwards;

  -webkit-animation:loader 3s linear;
  -webkit-animation-fill-mode: forwards;

    -o-animation:loader 3s linear;
  -o-animation-fill-mode: forwards;


    -moz-animation:loader 3s linear;
  -moz-animation-fill-mode: forwards;
}

@keyframes loader {
  0% {
    transform: translate(-50%, 110%);
  }
  30% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}

@keyframes splash {
  0% {
    transform: translate(0%, 0%);
    opacity:2;
  }
  20% {
    transform: translate(0%, 0%);
    opacity:1;
  }
 
  40% {
    transform: translate(0%, 0%);
    opacity:1;
  }
  60% {
    transform: translate(0%, 0%);
    opacity:0.9;
  }
   80% {
    transform: translate(0%, 0%);
    opacity:0.7;
  }
  100% {
    transform: translate(0%, -100%);
   opacity:0.5;
  }
}

@-moz-keyframes loader {
  0% {
    transform: translate(-50%, 110%);
  }
  30% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}

@-moz-keyframes splash {
  0% {
    transform: translate(0%, 0%);
    opacity:2;
  }
  20% {
    transform: translate(0%, 0%);
    opacity:1;
  }
 
  40% {
    transform: translate(0%, 0%);
    opacity:1;
  }
  60% {
    transform: translate(0%, 0%);
    opacity:0.9;
  }
   80% {
    transform: translate(0%, 0%);
    opacity:0.7;
  }
  100% {
    transform: translate(0%, -100%);
   opacity:0.5;
  }
}


@-o-keyframes loader {
  0% {
    transform: translate(-50%, 110%);
  }
  30% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}

@-o-keyframes splash {
  0% {
    transform: translate(0%, 0%);
    opacity:2;
  }
  20% {
    transform: translate(0%, 0%);
    opacity:1;
  }
 
  40% {
    transform: translate(0%, 0%);
    opacity:1;
  }
  60% {
    transform: translate(0%, 0%);
    opacity:0.9;
  }
   80% {
    transform: translate(0%, 0%);
    opacity:0.7;
  }
  100% {
    transform: translate(0%, -100%);
   opacity:0.5;
  }
}


@-webkit-keyframes loader {
  0% {
    transform: translate(-50%, 110%);
    -webkit-transform:translate(-50%, 110%);
  }
  30% {
    transform: translate(-50%, 50%);
    -webkit-transform:translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
    -webkit-transform:translate(-50%, 0%);
  }
}

@-webkit-keyframes splash {
  0% {
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    opacity:2;
  }
  20% {
    transform: translate(0%, 0%);
    -webkit-transform:translate(0%, 0%);
    opacity:1;
  }
 
  40% {
    transform: translate(0%, 0%);
    -webkit-transform:translate(0%, 0%);
    opacity:1;
  }
  60% {
    transform: translate(0%, 0%);
    -webkit-transform:translate(0%, 0%);
    opacity:0.9;
  }
   80% {
    transform: translate(0%, 0%);
    -webkit-transform:translate(0%, 0%);
    opacity:0.7;
  }
  100% {
    transform: translate(0%, -100%);
    -webkit-transform:translate(0%, -100%);
   opacity:0.5;
  }
}