/* Splash screen styles*/
.splash{
  cursor : pointer;
  position : fixed;
  top : 50%;
  left : 50%;
  height : 100vh;
  width : 100vw;
  transform : translate(-50%,-50%);    
  background-color: rgba(255,255,255);
  transition : all ease-in-out 600ms;
  z-index: 100;
}

.splash-header {
  height : 90%;
  
  display : flex;
  justify-content: center;
  align-items : center;
}
.splash-header img{
	width: 300px;
}


.splash-header {
  animation: moveFromBottomSplash 4s ease forwards;
}
@keyframes moveFromBottomSplash {
  0% {
    transform: translateY(100%) scale(1);
  }
   30% {
    transform: translateY(10%) scale(1);
	
  }
  50% {
    transform: translateY(10%) scale(.6);
	
  }
 
  70% {
    transform: translateY(10%) scale(1);
	
  }
  100% {
    transform: translateY(-100%) ;
  }
}





.splash-icon {
  width:80px;
  height: 80px;
  
  font-size: 24px;
  line-height: 70px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  text-align: center;
  display: block;
	
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);

  border: solid 1px #fff;
}

.splash-wrap {
  height: 40em;
  list-style: none;
  font-size: 1.3em;
}

.splash-wrap > li {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-40%, -60%);
}

.splash-ring li {
  opacity: 0;
  animation-delay: 1s !important;
}

.splash-ring > *:nth-of-type(1) {
  transform: rotate(calc(45deg * 1)) translate(0.5em);
  animation: splash-icon-ani 2s forwards;
}

.splash-ring > *:nth-of-type(2) {
  transform: rotate(calc(45deg * 2)) translate(0.5em);
  animation: splash-icon-ani1 2s forwards;
}

.splash-ring > *:nth-of-type(3) {
  transform: rotate(calc(45deg * 3)) translate(0.5em);
  animation: splash-icon-ani2 2s forwards;
}

.splash-ring > *:nth-of-type(4) {
  transform: rotate(calc(45deg * 4)) translate(0.5em);
  animation: splash-icon-ani3 2s forwards;
}

.splash-ring > *:nth-of-type(5) {
  transform: rotate(calc(45deg * 5)) translate(0.5em);
  animation: splash-icon-ani4 2s forwards;
}

.splash-ring > *:nth-of-type(6) {
  transform: rotate(calc(45deg * 6)) translate(0.5em);
  animation: splash-icon-ani5 2s forwards;
}

.splash-ring > *:nth-of-type(7) {
  transform: rotate(calc(45deg * 7)) translate(0.5em);
  animation: splash-icon-ani6 2s forwards;
}

.splash-ring > *:nth-of-type(8) {
  transform: rotate(calc(45deg * 8)) translate(0.5em);
  animation: splash-icon-ani7 2s forwards;
}

ul[class^=splash-ring] li {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin: -2.5em 0 0 -2em;
}

.splash-wrap > li.splash-center {
  top: 100%;
  animation: slideLogo 3s ease forwards;;
}
@keyframes slideLogo {
  0% {
    top: 80%; 
   
	transform: translateY(100%);
	
  }
  50% {
    top: 50%; 
    
  }
  100% {
    top: 0; 
	transform: translateY(-100%);
  }
}
/*.splash-wrap > li.splash-center {
  top: 100%;
  animation: bubble 1s forwards;
}
@keyframes bubble {
  0% {
    top: 80%;
  }
  100% {
    top: 50%;
	
  }
}*/

/* animation starts */
@keyframes splash-icon-ani {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translate(7.5em);
  }
}

@keyframes splash-icon-ani1 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translate(7.5em);
  }
}

@keyframes splash-icon-ani2 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translate(7.5em);
  }
}

@keyframes splash-icon-ani3 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translate(7.5em);
  }
}

@keyframes splash-icon-ani4 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translate(7.5em);
  }
}

@keyframes splash-icon-ani5 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translate(7.5em);
  }
}

@keyframes splash-icon-ani6 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translate(7.5em);
  }
}

@keyframes splash-icon-ani7 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 9)) translate(7.5em);
  }
}



/* splash icon circle */
.fa-1 {
  background: #003d7f;
  transform: rotate(calc(-45deg * 2));
}

.fa-2 {
 background: #939598;

  transform: rotate(calc(-45deg * 3));
}

.fa-3 {
  background: #009bde;

  transform: rotate(calc(-45deg * 4));
}

.fa-4 {
  background: #003d7f;

  transform: rotate(calc(-45deg * 5));
}

.fa-5 {
  background: #939598;

  transform: rotate(calc(-45deg * 6));
}

.fa-6 {
  background: #009bde;

  transform: rotate(calc(-45deg * 7));
}

.fa-7 {
  background: #003d7f;

  transform: rotate(calc(-45deg * 8));
}

.fa-8 {
background: #939598;


  transform: rotate(calc(-45deg * 9));
}
.hidden {
  transition: 0.5s;
  display: none;
}
@media screen and (max-width: 767px) {
	.splash-header img{
	width: 200px;
}
.splash-icon {
  width:30px;
  height: 30px;
  
  font-size: 14px;
  line-height: 30px;

}
ul[class^=splash-ring] li {
  
  margin: -5em 0 0 -2em;
}
/* animation starts */
@keyframes splash-icon-ani {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translate(7em);
  }
}

@keyframes splash-icon-ani1 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translate(7em);
  }
}

@keyframes splash-icon-ani2 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translate(7em);
  }
}

@keyframes splash-icon-ani3 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translate(7em);
  }
}

@keyframes splash-icon-ani4 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translate(7em);
  }
}

@keyframes splash-icon-ani5 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translate(7em);
  }
}

@keyframes splash-icon-ani6 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translate(7em);
  }
}

@keyframes splash-icon-ani7 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 9)) translate(7em);
  }
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.splash-header img{
	width: 250px;
}
ul[class^=splash-ring] li {
  
  margin: -5.5em 0 0 -2em;
}
/* animation starts */
@keyframes splash-icon-ani {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translate(8em);
  }
}

@keyframes splash-icon-ani1 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translate(8em);
  }
}

@keyframes splash-icon-ani2 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translate(8em);
  }
}

@keyframes splash-icon-ani3 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translate(8em);
  }
}

@keyframes splash-icon-ani4 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translate(8em);
  }
}

@keyframes splash-icon-ani5 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translate(8em);
  }
}

@keyframes splash-icon-ani6 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translate(8em);
  }
}

@keyframes splash-icon-ani7 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 9)) translate(8em);
  }
}
}

@media screen and (min-width: 1299px) {
	.splash-header img{
	width: 380px;
}
.splash-header {
  height : 80%;

}
ul[class^=splash-ring] li {
  
  margin: -3.5em 0 0 -1em;
}
	/* animation starts */
@keyframes splash-icon-ani {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translate(8em);
  }
}

@keyframes splash-icon-ani1 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translate(8em);
  }
}

@keyframes splash-icon-ani2 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translate(8em);
  }
}

@keyframes splash-icon-ani3 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translate(8em);
  }
}

@keyframes splash-icon-ani4 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translate(8em);
  }
}

@keyframes splash-icon-ani5 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translate(8em);
  }
}

@keyframes splash-icon-ani6 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translate(8em);
  }
}

@keyframes splash-icon-ani7 {
  35%, 65% {
    opacity: 1;
    transform: rotate(calc(45deg * 9)) translate(8em);
  }
}
}