@charset "UTF-8";

:root {
	--ae-red:        #cf3f29;
	--ae-bright-red: #e6b0ab;
	--ae-white:      #f2f2f2;
	--ae-dark-grey:  #443f3f;
	--ae-black:      #000;
	--ae-shadow:     drop-shadow(0px 0px 4px #0005);
	--ae-white-bg:   linear-gradient(0deg, rgba(217,214,214,1) 0%, rgba(226,230,227,1) 14%, rgba(228,228,228,1) 31%, rgba(235,235,235,1) 53%, rgba(254,249,249,1) 78%, rgba(255,255,255,1) 87%, rgba(226,226,226,1) 100%);
	--nav-height:    64px;
}

* {
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	color: var(--ae-white);
	background-color: var(--ae-dark-grey);
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

header {
	position: absolute;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	width: 100%;
	height: 64px;
	z-index: 1000;
	background-color: transparent;
}

nav {
	overflow: hidden;
	margin: 0;
	vertical-align: middle;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

nav.float {
	background: var(--ae-white);
	background: var(--ae-white-bg);
}

nav ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	vertical-align: middle;
	height: 100%;
	background-color: inherit;
}

nav li {
	display: inline-block;
	height: 100%;
	margin: 0;
	vertical-align: middle;
	background-color: inherit;
}

nav a {
	display: table-cell;

	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	float: left;
	color: var(--ae-white);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;

	margin: 0;
	padding: 20px 14px;

	vertical-align: middle;
	line-height: normal;

	height: 24px;

	background-color: inherit;
}

nav.float a {
	color: var(--ae-dark-grey);
}

nav a:not(.navlogo) {
	filter: drop-shadow(var(--ae-shadow));
}

nav a:hover:not(.navlogo) {
	color: var(--ae-red);
}

nav a:active:not(.navlogo) {
	color: var(--ae-bright-red);
}

nav .icon {
	display: none;
}

a.navlogo {
	display: table-cell;
	padding: 14px 14px 26px 20px;
}

.navlogo img {
	height: 32px;
	width: auto;
	background-color: transparent;
	margins: 0;
}

@media screen and (max-width: 800px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 800px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

main {
	width: 100%;
	height: 100vh;
}

section, footer {
	width: 100%;
	height: 100vh;
}

.showreel video {
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100vh;
}