body {
	overflow: hidden;
}

.tile-background {
	overflow: hidden;
	position: absolute;
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: grid;
}

.tile-wrapper {
	width: 100%;
	padding-top: 100%;
	position: relative;
}

.tile {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	background-color: var(--site-bg-colour);
	background-image: url("/img/bgtile/blank.png");
	opacity: 1;
	transition-property: opacity;
	transition-duration: 1000ms;
}

.outerbox {
	width: 100vw;
    height: 100vh;
	margin: 0;
}

.logobox {
	width: 100%;
	min-width: 300px;
	height: 100%;
	filter: drop-shadow(2px 4px 6px var(--site-bg-colour))
}

.logoinner {
	background-image: url('/img/logo/swphoto_film.svg');
	background-size: contain; 
	background-repeat: no-repeat;
	background-position: center;
	width: 85%;
	height: 100%;
	margin: auto;
}

.socialsfooter {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	position: absolute;
	left: 0;
	bottom: -18rem;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 3rem;
	font-family: "Century-Gothic", sans-serif;
	animation-name: footerrise;
	animation-delay: 2s;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes footerrise {
	from { bottom: -18rem; }
	to { bottom: 0; }
}

.socialsfooter a {
	color: white;
	text-decoration: none;
}

.socialsfooter>a {
	margin: 1rem;
}

.socialsfooter>a>div {
	filter: drop-shadow(10px 10px 6px black);
	display: flex;
	justify-content: center;
}

.sociallogo {
	width: 4rem;
	height: 4rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 1rem;
}

.facebook {
	background-image: url("/img/common/facebook.svg");
}

.instagram {
	background-image: url("/img/common/instagram.svg");
}

.email {
	background-image: url("/img/common/email.svg");
}

@media (max-aspect-ratio: 2/3) {
	.logoinner {
		background-image: url('/img/logo/swphoto_film_stagger.svg');
	}
}