/* 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: rgba(14, 149, 200, 1);
	transform: rotate(calc(-45deg * 2));
}

.fa-2 {
	background: rgba(14, 149, 200, 1);

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

.fa-3 {
	background: rgba(14, 149, 200, 1);

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

.fa-4 {
	background: rgba(14, 149, 200, 1);

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

.fa-5 {
	background: rgba(14, 149, 200, 1);

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

.fa-6 {
	background: rgba(14, 149, 200, 1);

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

.fa-7 {
	background: rgba(14, 149, 200, 1);

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

.fa-8 {
	background: rgba(14, 149, 200, 1);


	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);
		}
	}
}