#forest{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: url('forest.jpg');
	background-size: cover;
	display: flex;
	align-items:center;
}

#logo-wrap{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: flex;
	align-items:center;
	z-index: 100;
}

#logo{
	width: 80%;
	max-width: 612px;
	display: block;
	margin: 0 auto;
	z-index: 100;
	opacity: 0;
	-webkit-animation: logo 3s ease-out 6s forwards;
	-moz-animation: logo 3s ease-out 6s forwards;
	-ms-animation: logo 3s ease-out 6s forwards;
	-o-animation: logo 3s ease-out 6s forwards;
	animation: logo 3s ease-out 6s forwards;
}

#forest-cover{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 11;
	background: rgba(0,0,0,.85);
	-webkit-animation: dark 4s ease-in 5.5s forwards;
	-moz-animation: dark 4s ease-in 5.5s forwards;
	-ms-animation: dark 4s ease-in 5.5s forwards;
	-o-animation: dark 4s ease-in 5.5s forwards;
	animation: dark 4s ease-in 5.5s forwards;
}

#gate-left{
	width: 50%;
	height: auto;
	position: fixed;
	left: 0;
	bottom:-65%;
	z-index:4;
	-webkit-animation: gateLeft 3s linear 3s forwards;
	-moz-animation: gateLeft 3s linear 3s forwards;
	-ms-animation: gateLeft 3s linear 3s forwards;
	-o-animation: gateLeft 3s linear 3s forwards;
	animation: gateLeft 3s linear 3s forwards;
}

#gate-right{
	width: 50%;
	height: auto;
	position: fixed;
	right: 0;
	bottom:-65%;
	z-index:4;
	-webkit-animation: gateRight 3s linear 3s forwards;
	-moz-animation: gateRight 3s linear 3s forwards;
	-ms-animation: gateRight 3s linear 3s forwards;
	-o-animation: gateRight 3s linear 3s forwards;
	animation: gateRight 3s linear 3s forwards;
}

#lightning{
	position: fixed;
	width: 50%;
	height: 110%;
	max-width: 100%;
	top:-50px;
	left: 30%;
	z-index: 3;
	opacity: 0;
	-webkit-animation: lightning 4s ease-in 5.5s forwards;
	-moz-animation: lightning 4s ease-in 5.5s forwards;
	-ms-animation: lightning 4s ease-in 5.5s forwards;
	-o-animation: lightning 4s ease-in 5.5s forwards;
	animation: lightning 4s ease-in 5.5s forwards;
}

@-webkit-keyframes gateLeft{
	from {
		left: 0;
	}

	to {
		left: -50%;
	}
}

@-webkit-keyframes gateRight{
	from {
		right: 0;
	}

	to {
		right: -50%;
	}
}

@-webkit-keyframes lightning{
	0%, 2.5%, 5%, 7.5%, 10%, 12.5%, 75%, 77.5%, 80%, 82.5%, 85%, 87.5% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%{
		opacity: 1;
	}
}

@-webkit-keyframes dark{
	0%, 2.5%, 5%, 7.5%, 10%, 12.3%, 75%, 77.5%, 80%, 82.5%, 85%, 87.3% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 12.5%, 74.9%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%, 87.5% {
		opacity: 1;
	}
}

@-webkit-keyframes logo{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-moz-keyframes dark{
	0%, 2.5%, 5%, 7.5%, 10%, 12.3%, 75%, 77.5%, 80%, 82.5%, 85%, 87.3% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 12.5%, 74.9%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%, 87.5% {
		opacity: 1;
	}
}

@-moz-keyframes logo{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-ms-keyframes dark{
	0%, 2.5%, 5%, 7.5%, 10%, 12.3%, 75%, 77.5%, 80%, 82.5%, 85%, 87.3% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 12.5%, 74.9%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%, 87.5% {
		opacity: 1;
	}
}

@-ms-keyframes logo{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-o-keyframes dark{
	0%, 2.5%, 5%, 7.5%, 10%, 12.3%, 75%, 77.5%, 80%, 82.5%, 85%, 87.3% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 12.5%, 74.9%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%, 87.5% {
		opacity: 1;
	}
}

@-o-keyframes logo{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes dark{
	0%, 2.5%, 5%, 7.5%, 10%, 12.3%, 75%, 77.5%, 80%, 82.5%, 85%, 87.3% {
		opacity: 0;
	}

	1.25%, 3.75%, 6.25%, 8.75%, 11.25%, 12.5%, 74.9%, 76.25%, 78.75%, 81.25%, 83.75%, 86.25%, 87.5% {
		opacity: 1;
	}
}

@keyframes logo{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}