body.home.animate {
	overflow: hidden !important;
	background: #222;
	transition: background 0.5s ease-in-out forwards;
}
body.home.animate .box-wrapper {
	opacity: 0;
	animation: fadeIn .25s ease-in-out forwards;
	animation-delay: 3s;
}
body.home.animate #page-header .homeheader .uncol.style-dark {
	margin-top: 25px;
	opacity: 0;
	animation: moveUp 0.5s ease-in-out forwards;
	animation-delay: 3s;
}
.animate #loader {
	overflow: hidden !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 10000;
	animation: fadeOut 1s ease-in-out forwards;
	animation-delay: 3.25s;
}
.animate .loaderbg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #222222;
}
.animate #loader h2 {
	position:absolute;
	top: 54%;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #ffffff;
	font-size: 7.6em;
	font-weight: 400;
	text-align: center;
	z-index: 2;
	opacity: 0;
	animation: animate 1s ease-in-out forwards, fadeOut 1s ease-in-out forwards;
	animation-delay: .5s, 3s;
}
.animate #loader h2 strong {
	color: #cbdb29;
	font-weight: 700;
}
.animate .triangle {
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #e5e5e5;
	border-style: inset;
	-webkit-transform:rotate(360deg);
	opacity: 0;
	animation: fadeIn 1s forwards, fadeOut 1s ease-in-out forwards;
}
.animate .triangle.one {
	top: 17%;
	left: 12%;
	animation-delay: .25s, 3s;
}
.animate .triangle.two {
	top: 19%;
	right: 32%;
	animation-delay: .5s, 3.1s;
}
.animate .triangle.three {
	top: 43%;
	right: 8%;
	animation-delay: .75s, 3.2s;
}
.animate .triangle.four {
	bottom: 19%;
	right: 22%;
	animation-delay: .25s, 3.1s;
}
.animate .triangle.five {
	bottom: 22%;
	left: 28%;
	animation-delay: .5s, 3s;
}
.animate .triangle.six {
	bottom: 48%;
	left: 6%;
	animation-delay: .75s, 3s;
}
.animate .triangle.seven {
	top: 28%;
	left: 36%;
	animation-delay: .5s, 3s;
}
.animate .triangle.eight {
	bottom: 37%;
	right: 51%;
	animation-delay: .25s, 3s;
}
.animate .loaderline {
	position: absolute;
	bottom: 110%;
	/*background-color: rgba(236,236,236,0.5);*/
	background-color: #3c3c3c;
	z-index: 1;
	animation: slideIn 2s ease-in-out forwards;
}
.animate .loaderline.horiz {
	height: 1px;
	width: 100%;
}
.animate .loaderline.vert {
	height: 100%;
	width: 1px;
}
.animate .loaderline.top {
	top: 81px;
	right: 110%;
	animation: slideInLeft 2s ease-in-out forwards;
	animation-delay: 1s;
}
.animate .loaderline.left {
	/*right: calc(100% - 170px);*/
	left: 168px;
	animation-delay: .5s;
}
.animate .loaderline.right {
	/*left: calc(100% - 170px);*/
	right: 168px;
	animation-delay: .25s;
}
@keyframes animate {
	from {top: 54%;opacity: 0;} 
	to{top:50%;opacity: 1;}
}
@keyframes moveUp {
	from {margin-top: 25px;opacity: 0;} 
	to{margin-top:0;opacity: 1;}
}
@keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;} 
}
@keyframes fadeOut {
	from {opacity: 1;} 
	to {opacity: 0;}
}
@keyframes slideIn {
	from {bottom: 110%;} 
	to{bottom:0%;} 
}
@keyframes slideInLeft {
	from {right: 110%;} 
	to{right:0%;} 
}



@media screen and (max-width: 570px) {
	.animate .loaderline.vert {
		display: none !important;
	}
	.animate #loader h2 {
		font-size: 4em;
		top: 40%;
	}
}