@font-face {
	font-family: Montserrat-Regular;
	src: url('../fonts/montserrat/Montserrat-Regular.ttf');
}
@font-face {
	font-family: Poppins-Bold;
	src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
	font-family: Poppins-Black;
	src: url('../fonts/poppins/Poppins-Black.ttf');
}
body {
	background: #324058;
	animation: bodyAnimation 1s ease-in-out;
}
@keyframes bodyAnimation{
	0%{
		background: #000;
	}
	100%{
		background: #324058;
	}
}
.welcome_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	font-family: "Montserrat-Regular";
	padding-top: 14%;
}
.welcome_logo {
	max-width: 350px;
	margin-bottom: 100px;
	position: relative;
	opacity: 0;
	top: -200px;
	animation: logoAnimation 1s .5s ease-in-out forwards;
}
@keyframes logoAnimation{
	0%{
		top: -200px;
		opacity: 0;
	}
	20%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	100%{
		top: 0;
		opacity: 1;
	}
}
.welcome_wrapper h1 {
	line-height: 1.5;
	letter-spacing: 2px;
	color: #FFF;
	font-size: 23px;
	text-align: center;
	line-height: 50px;
	opacity: 0;
	animation: titleAnimation 1s 1s ease-in-out forwards;
}
.welcome_wrapper h1 strong {
	font-family: "Poppins-Bold";
	display: block;
	text-transform: uppercase;
	font-size: 60px;
}
@keyframes titleAnimation{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.welcome_btn {
	color: #324058;
	background: #ffc05e;
	display: inline-block;
	font-size: 20px;
	text-transform: uppercase;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 3px;
	letter-spacing: 1px;
	margin-top: 50px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	animation: btnAnimation 1s 1.1s ease-in-out forwards;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-o-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}
.welcome_btn:hover {
	color: #FFF;
}
@keyframes btnAnimation{
	0%{
		-webkit-transform: rotateY(-90deg);
		-moz-transform: rotateY(-90deg);
		-o-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
	}
	100%{
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}