/* Прелоадер і анімація переходу між сторінками.
   В оригіналі цей блок був inline-тегом <style> у <head>. */

body{
	overflow-x: hidden;
	position: relative;
}

.page_animate:after{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	left:-100%;
	top:0;
	background-color: #06060f;
	z-index: 1001;
	-webkit-animation-name: page_animate;
	animation-name: page_animate;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

	/*	.page_animate_new:after{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	left:0%;
	top:0;
	background-color: #06060f;
	z-index: 1001;
	-webkit-animation-name: page_animate_new;
	animation-name: page_animate_new;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	}
*/
@-webkit-keyframes page_animate_new {
	from {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}

	to {
		-moz-transform: translateX(200%);
		-webkit-transform: translateX(200%);
		-o-transform: translateX(200%);
		-ms-transform: translateX(200%);
		transform: translateX(200%);
	}
}

@keyframes page_animate_new {
	from {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}

	to {
		-moz-transform: translateX(200%);
		-webkit-transform: translateX(200%);
		-o-transform: translateX(200%);
		-ms-transform: translateX(200%);
	}
}


@-webkit-keyframes page_animate {
	from {
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}

	to {
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-o-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}

@keyframes page_animate {
	from {
	-moz-transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-o-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	}

	to {
	-moz-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-o-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	}
}

/*--*/
#flip {
	height: 180px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 1200px;
	font-size: 140px;
	font-weight: 800;
	font-family: Arial;
	text-align: center;
	z-index: 1002;
	color:#06060f;
	text-transform: uppercase;
}


.preload_logo{
	color:#06060f;
	overflow: hidden; 
	position: relative; 
	display: inline-block;
}

#flip div:last-child .preload_logo{
	animation: show2 2s ease;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
}


#flip div:last-child .preload_after{
	animation: show3 1s ease;
	animation-delay: 1.5s;
}


.preload_after{
	width: 100%;
	position: absolute;
	height: 100%;
	top: 0;
	left:-100%;
	background-color: white;
}


@keyframes show2 {
	0% {color:#06060f;}
	20% {color:#191921;}
	60% {color:#191921;}
	100% {color:white;}
}

@keyframes show3 {
	0% {left:-100%;}
	100% {left:100%;}
}
@media screen and (max-width: 1199px) {
	#flip{
		font-size: 70px;
		height: 100px;
		width: 600px;
	}
}
@media screen and (max-width: 700px) {
	#flip{
		font-size: 35px;
		height: 50px;
		width: 300px;
	}
}
