.cont_bg_splash{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgb(49,68,143);
  background: linear-gradient(-45deg, rgba(49,68,143,1) 0%, rgba(44,131,179,1) 50%, rgba(24,34,72,1) 100%);
  z-index: 0;
}

.cont_bg_top_splash{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/wave_top.svg);
  background-repeat: no-repeat;
  background-size: cover;
  animation: move_top 5s;
  z-index: 1;
}

.cont_bg_bottom_splash{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/wave_bottom.svg);
  background-repeat: no-repeat;
  background-size: cover;
  animation: move_bottom 5s;
  z-index: 2;
}

.cont_bg_center_splash{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/app/icon.png);
  background-repeat: no-repeat;
  background-size: 128px 128px;
  background-position: center center;
  animation: move_center 2s;
  z-index: 3;
}

@media only screen and (min-width: 768px){
  .cont_bg_top_splash, .cont_bg_bottom_splash, .cont_bg_center_splash{
    display: none!important;
  }
   
}


@-webkit-keyframes move_center {
  from{
    transform: rotate(0deg) scale(.1);
    opacity: 1;
  }
  to{
    transform: rotate(360deg) scale(.1);
    opacity: 0;
  }
}
@keyframes move_center {
  from{
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  to{
    transform: rotate(360deg) scale(.1);
    opacity: 0;
  }
}

@-webkit-keyframes move_top {
  from{
    transform: translateY(0px);
  }
  to{
    transform: translateY(-1000px);
  }
}
@keyframes move_top {
  from{
    transform: translateY(0px);
  }
  to{
    transform: translateY(-1000px);
    }
}

@-webkit-keyframes move_bottom {
  from{
    transform: translateY(0px);
  }
  to{
    transform: translateY(1000px);
  }
}
@keyframes move_bottom {
  from{
    transform: translateY(0px);
  }
  to{
    transform: translateY(1000px);
    }
}

.splash_logo{
  padding: 30px;
  width: 200px;
  height: 200px;
  z-index: 1000000;
  background-image: url(../img/app/logo-negative.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 20% auto;
  -webkit-animation: pulse 5s infinite ease-in-out;
  -o-animation: pulse 5s infinite ease-in-out;
  -ms-animation: pulse 5s infinite ease-in-out; 
  -moz-animation: pulse 5s infinite ease-in-out; 
  animation: pulse 5s infinite ease-in-out;
}

.home_spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.home_spinner > div {
  width: 18px;
  height: 18px;
  background-color: #d6d6d6;
  border-radius: 100%;
  display: inline-block!important;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.home_spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.home_spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0.6); opacity: 0.4; }
  50% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(0.6); opacity: 0.4; }
}

@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.4; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0.4; }
}