html {
   height: 100%;
   width: 100%;
}

body {
   overflow: hidden;
   height: 100%;
   width: 100%;
   margin: 0px;
   padding: 0px;
}

#my-splash-screen {
   background-color: #213A53;
   overflow: hidden;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 9999;
}

.logo-splash {
   top: 37.5%;
   /* left: 12.5%; */
   width: 100%;
   height: 25%;
   font-size: 14vmin;
   position: absolute;
   -webkit-animation: logo-splash 1s linear 1s both;
   animation: logo-splash 1s linear 1s both;
}

@-webkit-keyframes logo-splash {
   80% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes logo-splash {
   80% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.slide-in-bottom-two {
   position: absolute;
   -webkit-animation: slide-in-bottom-two 1s linear 1s both;
   animation: slide-in-bottom-two 1s linear 1s both;
}


.slide-in-bottom {
   position: absolute;
   -webkit-animation: slide-in-bottom 1s linear 1s both;
   animation: slide-in-bottom 1s linear 1s both;
}

.slide-one {
   position: relative;
   width: 30px;
   height: 150px;
   background: #04baee;
   margin-right: 60px;
   transform: skewX(-14deg);
   display: block;
}

.slide-two {
   position: relative;
   width: 30px;
   height: 150px;
   background: #04baee;
   margin-left: 60px;
   transform: skewX(-14deg);
   display: block;
}

@-webkit-keyframes slide-in-bottom-two {
   0% {
      top: 100%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;

   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 100%;
      -ms-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      -webkit-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      transform: translateY(-150px) translateX(calc(100vw - 108px));
      opacity: 1;
   }
}

@keyframes slide-in-bottom-two {
   0% {
      top: 100%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;

   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 100%;
      -ms-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      -webkit-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      transform: translateY(-150px) translateX(calc(100vw - 108px));
      opacity: 1;
   }
}

@-webkit-keyframes slide-in-bottom {
   0% {
      top: 100%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;

   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 100%;
      -ms-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      -webkit-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      transform: translateY(-150px) translateX(calc(100vw - 108px));
      opacity: 1;
   }
}

@keyframes slide-in-bottom {
   0% {
      top: 100%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 100%;
      -ms-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      -webkit-transform: translateY(-150px) translateX(100vw) translateX(-60px) translateX(-3rem);
      transform: translateY(-150px) translateX(calc(100vw - 108px));
      opacity: 1;
   }
}

.slide-in-top {
   position: absolute;
   -webkit-animation: slide-in-top 1s linear 1s both;
   animation: slide-in-top 1s linear 1s both;
}



.slide-in-top-two {
   position: absolute;
   -webkit-animation: slide-in-top-two 1s linear 1s both;
   animation: slide-in-top-two 1s linear 1s both;
}

@-webkit-keyframes slide-in-top {
   0% {
      top: 50%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 0;
      -ms-transform: translateX(20px);
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
      opacity: 1;
   }
}

@keyframes slide-in-top {
   0% {
      top: 0;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 0;
      -ms-transform: translateX(20px);
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
      opacity: 1;
   }
}

@-webkit-keyframes slide-in-top-two {
   0% {
      top: 50%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 0;
      -ms-transform: translateX(20px);
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
      opacity: 1;
   }
}

@keyframes slide-in-top-two {
   0% {
      top: 50%;
      -ms-transform: translateX(50vw) translateX(-45px);
      -webkit-transform: translateX(50vw) translateX(-45px);
      transform: translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   25% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   50% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 0;
   }

   75% {
      top: 50%;
      -ms-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      -webkit-transform: translateY(-75px) translateX(50vw) translateX(-45px);
      transform: translateY(-75px) translateX(50vw) translateX(-45px);
      opacity: 1;
   }

   100% {
      top: 0;
      -ms-transform: translateX(20px);
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
      opacity: 1;
   }
}