* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	padding: 1em;

	font-family: 'Nunito Sans', sans-serif;
	color: #999999;
	font-size: 18px;

	background: rgb(240,241,241);
	background: linear-gradient(0deg, rgba(240,241,241,1) 0%, rgba(255,255,255,1) 40%); 
}

a {
	color: #413c41;
	text-decoration: none;
	position: relative;
	transition: all .5s ease-in-out;
}
a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background: #d51d1f;
	bottom: 0;
	left: 50%;
	opacity: .5;

	transition: all .3s ease-in-out;
}
a:hover {
	color: #427cbf;
}
a:hover::after {
	width: 100%;
	left: 0;
	opacity: 1;
}

/**** animation**/
#logo img {
	animation: slide-in-fwd-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-fwd-center {
	0% { 	transform: rotate(0deg) scale(.5);	opacity: 0; }
	100% { 	transform: rotate(360deg) scale(1);	opacity: 1;	}
}


h1 {
	font-weight: 400;
	font-size: 1.2em;
	padding: 0;
	margin: 1em 0;
}
#inProgress {
	font-weight: 300;
	font-size: 2em;
	color: #adb2b8;
	margin: 1.1em 0;
}
#contact {
	color: #8b8f94;
	line-height: 1.5em;
}

/*----------  Responsive  ----------*/

/* LG */
@media (max-width: 1199px) { 
	body {
		font-size: 17px;
	}
	#logo img {
		max-width: 350px;
	}
	#inProgress {
		font-size: 1.5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#logo img {
		max-width: 300px;
	}
	h1 {
		font-size: 1.1em;
	}
	#inProgress {
		font-size: 1.3em;
	}
}
/* SM */
@media (max-width: 767px) {
	#logo img {
		max-width: 200px;
	}
	#contact {
		line-height: 2em;
	}
}
/* XS */
@media (max-width: 575px) {

}