#contact {
	background: none;
	padding: 0;
}
#contact h1 {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}
#contact a {
	color: black;
	text-decoration: none;
	display: flex;
	margin-top: var(--article-padding);
	height: 8em;
}
#contact a > div {
	background: white;
	width: 256px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#contact img {
	display: block;
}
#contact img[src*=mail] {
	width:  100px;
}
#contact img[src*=phone] {
	width: 80px;
}
#contact img[src*=woosh] {
	width: 64px;
}
#contact a > div > div {
	width: 0;
	overflow: hidden;
	transition: width .2s linear;
}
#contact a:hover > div > div {
	width: 64px;
}
#contact h3 {
	background: red;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}
@keyframes contact-phone {
	to {
		transform: rotate(10deg);
	}
}
#contact a[href^=tel]:hover img {
	animation: contact-phone .1s ease-in-out 0s infinite alternate;
}
@media (max-width: 700px) {
	#contact a {
		flex-direction: column;
		height: auto;
	}
	#contact a > div {
		width: 100%;
		padding: 1em;
	}
	#contact h3 {
		font-size: 1.5em;
		padding: 1em;
	}
}