/* Start Loader 1 Css*/
.lds-ellipsis {
	margin: 0 auto;
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 64px;
	text-align: center;
	z-index: 9999;
}
.lds-ellipsis span {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--site-secondry-color);
	-webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
	animation: ball-pulse-sync .6s 0s infinite ease-in-out;
}
.lds-ellipsis span:nth-child(1) {
	-webkit-animation:ball-pulse-sync .6s -.14s infinite ease-in-out;
	animation:ball-pulse-sync .6s -.14s infinite ease-in-out
}
.lds-ellipsis span:nth-child(2) {
	-webkit-animation:ball-pulse-sync .6s -70ms infinite ease-in-out;
	animation:ball-pulse-sync .6s -70ms infinite ease-in-out
}
@-webkit-keyframes ball-pulse-sync {
	33% {
		-webkit-transform:translateY(10px);
		transform:translateY(10px)
 }
	66% {
		-webkit-transform:translateY(-10px);
		transform:translateY(-10px)
	}
	100% {
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
}
@keyframes ball-pulse-sync {
	33% {
		-webkit-transform:translateY(10px);
		transform:translateY(10px)
	}
	66% {
		-webkit-transform:translateY(-10px);
		transform:translateY(-10px)
	}
	100% {
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
}
/* End Loader 1 Css */
/* Start Loader 2 Css */
.loader_ico {
	margin: 0 auto;
	position: relative;
	top: 40%;
	border: 16px solid #f3f3f3;
	border-top: 16px solid var(--site-primary-color);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: spinloader 2s linear infinite;
}

.loader_ico img {
	height: 50px;
	width: 50px;
	animation: spinlogo 2s linear infinite;
}

@keyframes spinloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes spinlogo {
	0% {
		transform: rotate(360deg);
	}

	100% {
		transform: rotate(0deg);
	}
}
/* End Loader 2 Css */
/* Start Loader 3 Css */
.u-loading {
	margin: 0 auto;
	position: relative;
	top: 50%;
	width: 80px;
	height: 80px;
	display: block;
}
.u-loading .u-loading__symbol {
	background-color: var(--site-primary-color);
	padding: 8px;
	animation: loading 3s infinite;
	border-radius: 5px;
	text-align: center;
	}
.u-loading .u-loading__symbol img {
	animation: loading-icon 3s infinite;
}
  
@keyframes loading {
0% {
	transform: perspective(250px) rotateX(0deg) rotateY(0deg);
}

	15% {
		background-color: var(--site-primary-color);
	}
	
	16% {
		background-color: var(--site-secondry-color);
	}
	
50% {
	transform: perspective(250px) rotateX(180deg) rotateY(0deg);
		background-color: var(--site-secondry-color);
}
	
	65% {
		background-color: var(--site-secondry-color);

	}
	
66% {
			background-color: var(--site-primary-color);
	}

100% {
	transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
}
}

@keyframes loading-icon {
0% {
	transform: perspective(250px) rotateX(0deg) rotateY(0deg);
}

	15% {
		transform: perspective(250px) rotateX(0deg) rotateY(0deg);
	}
	
	16% {
		transform: perspective(250px) rotateX(180deg) rotateY(0deg);
	}
	
50% {
	transform: perspective(250px) rotateX(180deg) rotateY(0deg);
}
	
	65% {
		transform: perspective(250px) rotateX(180deg) rotateY(0deg);
	}
	
66% {
			transform: perspective(250px) rotateX(180deg) rotateY(180deg);
	}
	
100% {
	transform: perspective(250px) rotateX(180deg) rotateY(180deg);
}
}
/* End Loader 3 Css */
/* Start Loader 4 Css */
#background{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	/* background-color: var(--site-secondry-color);
	background: -webkit-radial-gradient(center, ellipse cover, var(--site-secondry-color) 10%,var(--site-primary-color) 100%); */
  }
  
  #logocontainer{
	display: block;
    position: relative;
    top: 30%;
    width: 100vh;
    height: 35vh;
    transition: background-color 500ms;
    cursor: pointer;
    margin: 0 auto;
  }
  
  #logocontainer #pelogo{
	display: block;
	position: absolute;
	left: 2vh;
	top: 2vh;
	width: 100vh;
	height: 32vh;
	background: var(--site-secondry-color);
	background: -moz-linear-gradient(-45deg, var(--site-secondry-color) 0%, var(--site-primary-color) 100%);
	background: -webkit-linear-gradient(-45deg, var(--site-secondry-color) 0%,var(--site-primary-color) 100%);
	background: linear-gradient(135deg, var(--site-secondry-color) 0%,var(--site-primary-color) 100%);
	background-size: contain;
	font-family: Trebuchet MS, sans-serif;
	font-size: 20vh;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	line-height: 30vh;
  }
  
  #logocontainer .loader{
	display:block;
	position:absolute;
	background-color:var(--site-primary-color);
  }
  
  
  @keyframes slide1{
	50%{width:32vh; margin-left:0;}
	100%{margin-left:32vh;}
  }
  
  @keyframes slide2{
	50%{height:32vh; margin-top:0;}
	100%{margin-top:32vh;}
  }
  
  @keyframes slide3{
	50%{width:32vh; margin-right:0;}
	100%{margin-right:32vh;}
  }
  
  @keyframes slide4{
	50%{height:32vh; margin-bottom:0}
	100%{margin-bottom:32vh;}
  }
/* End Loader 4 Css */