body {
	font-family: 'GFS Didot', Georgia, serif;
}

h1, h2, h3 ,h4 {
	font-weight: normal;
}

a {
	color: #302725;
	text-decoration: none;
}

a:hover {
	color: #211;
}

.brand {
	text-align: center;
	text-transform: lowercase;
}

.brand span {
	display: block;
}

.nav,
.filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	max-width: 80ch;
	text-align: center;
	text-transform: uppercase;
}
.filter {
	font-size: .8rem;
	margin-top: 1.25rem;
	max-width: 100ch;
}
.nav a,
.filter a {
	display: inline-block;
	padding: .5rem;
}

.main {
	margin: 3rem 0;
}

.showreels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
.showreel {
	margin: 1rem;
	position: relative;
}
.showreel img {
	display: block;
	max-width: 100%;
	transition: opacity .2s ease-in-out;
	width: 438px; height: auto;
}
.showreel .a,
.showreel .info {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}
.showreel .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.showreel h2,
.showreel p {
	margin: 0;
	opacity: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	transition: opacity .2s ease-in-out, transform .175s ease-in-out;
}
.showreel h2 {
	text-transform: uppercase;
	transform: translateX(0.5rem);
}
.showreel p {
	font-style: italic;
	text-transform: lowercase;
	transform: translateX(-0.5rem);
}
.showreel:hover img {
	opacity: 0.375;
}
.showreel:hover h2,
.showreel:hover p {
	opacity: 1;
	transform: translateX(0);
}

.cv, .filmography, .contact {
	max-width: 80ch;
	margin: 0 auto;
}

.cv {
	max-width: 90ch;
}

.contact {
	text-align: center;
}

.inda-video,
.yt-video {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 960px;
	margin: 1rem auto
}
.inda-video iframe,
.yt-video iframe {
	max-width: 100%;
}
.vimeo-video {
	max-width: 960px;
	margin: 1rem auto	
}

.pic {
	width: 100%;
	max-height: 84vh;
	padding: 0 1rem;
}
.pic img {
	display: block;
	margin: auto;
}

body:before {
	content: "xs";
	display: none;
	visibility: hidden;
}

@media screen and (min-width: 470px) {
	body:before {
		content: "sm";
	}
	.showreels {
		max-width: 470px;
	}
}

@media screen and (min-width: 940px) {
	body:before {
		content: "md";
	}
	.showreels {
		max-width: 940px;
	}
}

@media screen and (min-width: 1410px) {
	body:before {
		content: "lg";
	}
	.showreels {
		max-width: 1410px;
	}
}