*{
	margin: 0;
	padding: 0;	
}
body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	background-color: #fff;
	background: url(../images/rightback.jpg) no-repeat;
	background-position: right;
	background-size: contain;
}
section{
	background: #fff;
	height: 100vh;
}
aside{
	position: relative;
}
img{
	width: 100%;
}
nav {
	margin: 2% 0 0 0;
	line-height: 2;
	letter-spacing: 0.5em;
}
ul{
	font-size: 13px;
	list-style: none;
	margin-left: 3%;
}
nav li:after{	
	content: "<";
	position: absolute;
	left: calc(3% + 180px);
	color: #cc2a23; 
}
a{
	text-decoration: none;
	color: #cc2a23; 
}
nav li a{
	width: 170px;
	display: inline-block;
}
nav li a:hover{
	background: #04d627;
	color: #000;
	padding: 0 3px 0 4%;
	margin-left: -4%;
}
.wrapper{ 
	display: block;
	position: fixed;
	background: #fff;
	width: 100%;
	min-height: 100%;
	z-index: 99;
	opacity: 0;
	animation: opacity 4.5s linear;
}
@keyframes opacity{
	0%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
.logo-page-main {
	width: 10%;
	position: fixed;
	top: 30%;
	right: 40%;
	z-index: 100;
}
.logo {
	width: 100%;
	position: fixed;
	top: -55%;
	right: -40%;
	animation: move 10s /*infinite*/ ease-in-out;
	animation-delay: 200ms;
	animation-fill-mode: forwards;
	z-index: 100;
}
.rotate {
	width: 100%;
	animation: rotate 0.5s /*infinite*/ ease-in-out;
	animation-delay: 9s;
	z-index: 100;
}
@keyframes move{
	0%{widht: 100%; top: -55%; right: -40%;}
	35%{width: 10%; top: 35%; right: 45%;}
	50%{width: 10%; top: 35%; right: 45%;}
	55%{width: 10%; top: 34%; right: 44%;}
	70%{width: 10%; top: 34%; right: 44%;}
	75%{width: 10%; top: 33%; right: 43%;}
	95%{width: 10%; top: 33%; right: 43%;}
	100%{width: 10%; top: 30%; right: 40%;}
}
@keyframes rotate{
	0%{transform:rotate(0.5deg)}
	10%{transform:rotate(-0.5deg)}
	20%{transform:rotate(0.5deg)}
	30%{transform:rotate(-0.5deg)}
	40%{transform:rotate(0.5deg)}
	50%{transform:rotate(-0.5deg)}
	60%{transform:rotate(0.5deg)}
	70%{transform:rotate(-0.5deg)}
	80%{transform:rotate(0.5deg)}
	90%{transform:rotate(-0.5deg)}
	100%{transform:rotate(0.5deg)}
}
.first{
	background: #000;
	color: #fff;
	padding: 5px 0 5px 4%;
	letter-spacing: 1.2em;
	margin-left: -4%;
}
.second, .stop{
	background: #04d627;
	color: #fff;
	padding: 5px 0 5px 10px;
	margin-left: -10px;
}
.second{
	animation: color 5s linear;
}
@keyframes color{
	0%{background: #eb140b;}
	45%{background: #051ed7;}
	90%{background: #04d627;}
	100%{background: #04d627;}
}
.top {
	position: relative;
	font-size: 1.3em;
}
.top-left {
	padding: 2% 3%;
	letter-spacing: 0.5em;
	line-height: 2;
	position: relative;
	z-index: 1;
}
.top-right {
	color: #04d627;
	position: absolute;
	letter-spacing: 0.2em;
	line-height: 2;
	top: 0;
	left: 3%;
	padding-top: 2%;
	z-index: 0;
	padding-left: 234px;
}
.nav-before {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -150px;
	line-height: 2;
	font-size: 13px;
	letter-spacing: 0.5em;
	text-align: right;
	color: #777;
}
.nav-before ul {
	margin-left: 0;
}
.nav-after {
	position: absolute;
	top: 0;
	left: 3%;
	line-height: 2;
	font-size: 13px;
	letter-spacing: 0.5em;
	margin-left: 215px;
}
.nav-after li:before{	
	content: ">";
	position: absolute;
	left: -15px;
	color: #3e3e3e; 
}
.nav-after a, .left a{
	color: #3e3e3e;
}
.left li::before {
	content: ">";
	position: absolute;
	left: 2%;
	color: #3e3e3e;
}
.active {
	background: #04d627;
	color: #000;
	padding: 1px 3px 3px 4%;
	margin-left: -4%;
}
footer {
	width: 100%;
	height: 30px;
	position: fixed;
	bottom: 0;
}
.display{
	display: none;
}
.page{
	background: url(../images/2018_NEW.jpg) no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 100vh;
}
.link{
	position: fixed;
	bottom: 5%;
	left: 3%;
	z-index: 1;
}
.link:before{
	content: "<";
	padding-right: 7px;
	color: #fff;
}
.link a{
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.15em;
	font-size: 90%;
	text-transform: uppercase;
}
.discription{
	margin: 3% 0;
	color: #fff;
	line-height: 1.7;
}
.level-1, .level-2, .level-3{
	padding: 1px 0 2px 0;
	position: relative;
	background: linear-gradient(to top, #04b145, #04d627);
}
.level-1{
	left: 0;
}
.level-3{
	left: -1%;
}
.level-2{
	left: 4%;
}
@-moz-document url-prefix(){
	.discription{
		line-height: 1.77;
	}
}