@charset "utf-8";

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

body {
	height:100%;
	font-family:Roboto, Verdana, Arial, sans-serif;
	color:#008dd2;
	background-color:#fff;
}

body * {
	transition:all 1s ease;
}

.main {
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	text-align:center;
}

.main > div {
	padding:30px;
}

.main .logo img {
	max-width:100%;
	animation:appearance 2.5s;
}

@keyframes appearance {
	from {
		opacity:0.1;
		padding-bottom:80px;
	}

	to {
		opacity:1;
		padding-bottom:0;
	}
}

.contacts {
	display:flex;
	justify-content:space-between;
	width:80%;
	margin:40px auto;
	padding:0;
	list-style:none;
}

.contacts li {
	margin:0;
	padding:0;
}

.contacts a img {
	filter:grayscale(1);
	opacity:0.2;
	width:48px;
	height:48px;
}

.contacts a:hover img {
	filter:grayscale(0);
	opacity:1;
}


@media screen and (max-width:380px) {
	.contacts {
		width:90%;
	}
}