#contact {
	overflow: scroll;
}

#qr {
	width: 15rem;
	position: relative;
	top: max(calc(50vmin + 1rem), 50%);
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 40vmin;
}

.icon {
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translateX(-50%);
}

.icon > img {
	width: 5rem;
	max-width: 13vmin;
}

#instagram {
	transform: translateX(2rem);
}

#youtube {
	transform: translate(-17rem, 2rem);
}

#facebook {
	transform: translate(12rem, 2rem);
}

#linkedin {
	transform: translateX(-7rem);
}

#contact > .padder {
	height: 100%;
	position: relative;
	top: 0;
}

@media (orientation: portrait) {
	div#contact a.icon {
		transform: none;
		position: relative;
		display: block;
		top: 0;
		left: 0;
		text-align: center;
		padding: 1rem 0;
	}

	#qr {
		top: 0;

		transform: translate(-50%, -20%);
	}

	div#contact .padder {
		display: flex;
		flex-direction: column;
		justify-content: center;
		left: auto;

		position: relative;
		/* padding-top: 2rem; */

		width: 100%;
	}
}