/*Begin Loading Style*/
body.loading {
    overflow: hidden;
}
.loader-wrapper {
	position:fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background:rgba(2,36,78, 0.5);
	backdrop-filter: blur(8px); /* Apply blur to content behind */
  	-webkit-backdrop-filter: blur(8px); /* For Safari */
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
	display: block; position: absolute;
	background: hsl(193, 100%, 79%);
	border-radius: 100%;
	transform: scale(0);
}

/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5);}
}

.ip-loader {
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.ip-loader {
	bottom: 20%;
}
/* Animations */

/* Initial animation of header elements */
.loading .ip-loader {
	opacity: 1;
	-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .ip-loader {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}

@keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}

/* Header elements when loading finishes */
.loaded .ip-loader {
	opacity: 1;
}


@-webkit-keyframes animLoadedLogo {
	to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

@keyframes animLoadedLogo {
	to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

.loaded .ip-loader {
	-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}


/* Header animation when loading finishes */
.loaded .loader-wrapper {
	
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
	overflow:hidden;
}

@-webkit-keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}



@-webkit-keyframes animLoadedContent {
	from { opacity: 0; -webkit-transform: translate3d(0,200px,0); }
}

@keyframes animLoadedContent {
	from { opacity: 0; -webkit-transform: translate3d(0,200px,0); transform: translate3d(0,200px,0); }
}

/* Change layout class for header */
.layout-switch .loader-wrapper {
	position: relative;
}

/* No JS */
.no-js .loader-wrapper {
	position: relative;
	min-height: 0px;
}

/*#loadinglogo svg{
	width: 100%;
    position: fixed;
    right: -7em;
    top: 10em;
}*/
#loadinglogo svg{
	width:100%;
	height:100%;
}
.ip-loader{
	visibility:hidden;
	opacity:0;
}
#loadinglogo{
	width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -38%);
	transition:linear 0.5s ease-in-out;
	-moz-transition:linear 0.5s ease-in-out;
	-ms-transition:linear 0.5s ease-in-out;
	-o-transition:linear 0.5s ease-in-out;
	-webkit-transition:linear 0.5s ease-in-out;
}
@media screen and (max-width:450px) {
	#loadinglogo{
		width: 80%;
	}
}

/*.loaded #loadinglogo{
	opacity:0;
}*/
.loaded #loadinglogo svg{
	opacity:0;
}
#loadinglogo svg,
#loadinglogo svg path{
	transition:all 0.5s ease;
}
/*End Loading Style*/