/*!
 * Percent-Preloader CSS - v1
 * @author JDM Digital - https://jdmdigital.co
 * Copyright (c) 2022
 */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	margin: auto;
	width: 100vw;
	height: 100vh;
	background: #fff;
	opacity: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transition-duration: 500ms;
	-webkit-transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	z-index: 999;
	transition-delay: 0.65s;
	font-weight: bold;
    letter-spacing: -5px;
}
.preloader .inner {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.preloader:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 200px 100vh 0;
	border-color: transparent #191b1d transparent transparent;
	position: absolute;
	left: -200px;
	top: 0;
}
.preloader:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100vh 0 0 200px;
	border-color: transparent transparent transparent #191b1d;
	position: absolute;
	right: -200px;
	top: 0;
}
.preloader * {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transition-duration: 500ms;
	-webkit-transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.transition-overlay {
	width: 100vw;
	height: 100vh;
	position: fixed;
	right: calc(-100% - 200px);
	bottom: 0;
	background: #191b1d;
	z-index: 9999;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transition-duration: 500ms;
	-webkit-transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	visibility: hidden;
}
.preloader .inner .percentage {
	display: none;
	width: 100%;
	font-size: 5vw;
	line-height: 1;
	font-weight: 800;
	color: #191b1d;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	opacity: 0.2;
	transition-delay: 0.10s;
}
.navigation__transparent.navbar{
	visibility: hidden;
}
.page-loaded .preloader .percentage {
	margin-left: 100px;
	opacity: 0;
}
.page-loaded .preloader {
	left: calc(-100% - 200px);
	visibility: hidden;
}


/** PRELOADER ANIMATION **/
#loader-main #loader{
	font-size: 40px;
    font-weight: 700;
    letter-spacing: -2px;
	color:transparent;
	text-decoration: none;
	float: left; 
	top:40%;
	left: 40%;
	z-index: 2;
    -webkit-animation: fade 2s linear infinite;
    -moz-animation: fade 2s linear infinite;
    -o-animation: fade 2s linear infinite;
    	animation: fade 2s linear infinite ;
}

#loader-main > #loader:nth-of-type(1) {
	-webkit-animation-delay: 0.75s;
	-moz-animation-delay: 0.75s;
	-o-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

#loader-main > #loader:nth-of-type(2) {
	-webkit-animation-delay: 0.92s;
	-moz-animation-delay: 0.92s;
	-o-animation-delay: 0.92s;
		animation-delay: 0.92s;
}
#loader-main > #loader:nth-of-type(3) {
	-webkit-animation-delay: 1.08s;
	-moz-animation-delay: 1.08s;
	-o-animation-delay: 1.08s;
		animation-delay: 1.08s;
}
#loader-main > #loader:nth-of-type(4) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
		animation-delay: 1.2s;
}

#loader-main > #loader:nth-of-type(5) {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-o-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
#loader-main > #loader:nth-of-type(6) {
	-webkit-animation-delay: 1.7s;
	-moz-animation-delay: 1.7s;
	-o-animation-delay: 1.7s;
		animation-delay: 1.7s;
}
#loader-main > #loader:nth-of-type(7) {
	-webkit-animation-delay: 1.85s;
	-moz-animation-delay: 1.85s;
	-o-animation-delay: 1.85s;
		animation-delay: 1.85s;
}


/*keyframes for fade animation*/


@-webkit-keyframes fade{
	0%{
		text-shadow: rgb(0,0,0) 0 0 0;
	}

	90%,100%{
		text-shadow: rgb(255,255,255) 0 0 19px;
	}
}

@-moz-keyframes fade{
	0%{
		text-shadow: rgb(0,0,0) 0 0 0;
	}

	90%,100%{
		text-shadow: rgb(255,255,255) 0 0 19px;
	}
}

@-o-keyframes fade{
	0%{
		text-shadow: rgb(0,0,0) 0 0 0;
	}

	90%,100%{
		text-shadow: rgb(255,255,255) 0 0 19px;
	}
}

@keyframes fade{
	0%{
		text-shadow: rgb(0,0,0) 0 0 0;
	}

	90%,100%{
		text-shadow: rgb(255,255,255) 0 0 19px;
	}
}