:root {
	--navbar-height:60px;
	--gradient-bg:linear-gradient(0deg, rgba(22, 71, 48, 1) 0%, rgba(77, 168, 123, 1) 100%);
	--bgcolor:#eee;
	--text-color:#000;
	--textcolor:#000;
	--accent-color-dark:#1e563a;
	--accent-color:#349263;
	--accent-color-light:rgba(52,146,99,0.5);
	--overlay-color:rgba(0,0,0,0.2);
}

body, html {
	font-size:13pt;
}
body {
	margin:0; padding:0;
	font-family:Arial, Helvetica, sans-serif;
	background-color:var(--bgcolor);
}

h1, h2, h3, h4, h5, h6, .headline, #headline {
	font-weight:normal;
	color:var(--accent-color);
}
h1 {font-size:4rem;}
h2 {font-size:3rem;}
h3 {font-size:2.5rem;}
h4 {font-size:2rem;}
h5 {font-size:1.5rem;}
h6 {font-size:1.25rem;}
#headline {
	font-size:28pt;
	line-height:32pt;
	text-align:left;
	margin:-3.25em 0 1em calc(405px - 6em);
	font-family:sans-serif;
	font-weight:bold;
}

nav, footer, button, .button, .btn {
	background: #164730;
	background:var(--gradient-bg);
	padding-left:15px;
	padding-right:15px;
}

#main input, #main textarea {
	background-color:#fff;
	border-color:#aaa;
	border-radius:4px;
}

a {
	color:var(--accent-color);
}

button, .button, .btn,
.modal .modal-body .button {
	border-radius:4px;
	border:none;
	height:40px;
	color:#fff;
	font-size:1rem;
	font-weight:500;
}
button:hover, .button:hover, .btn:hover,
.modal .modal-body .button:hover {
	color:#fff;
}
button:focus, .button:focus, .btn:focus,
.modal .modal-body .button:focus {
	outline:none;
}

nav {
	position:fixed;
	width:100vw; height:var(--navbar-height);
	z-index:99;
}
nav > ul {
	margin:0 auto;
	list-style-type:none;
	margin:0 auto; padding:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}
nav > ul > li > a {
	height:var(--navbar-height);
	line-height:var(--navbar-height);
	padding:0 15px;
	color:#fff;
	font-family:"Lobster", sans-serif;
	font-size:1.1rem;
	transition:0.2s ease-in-out;
}
nav > ul > li > a:hover {
	color:#fcf1cc;
	text-shadow:0 0 5px rgba(255,255,255,0.5);
	text-decoration:none;
}
#nav-spacer {
	height:var(--navbar-height);
}

#navbutton {
	position:absolute;
	right:0; top:0;
	padding:0 15px;
	color:#fff;
	cursor:pointer;
	height:var(--navbar-height);
	line-height:var(--navbar-height);
	font-size:25px;
	display:none;
	transition:0.33s ease-in-out;
}
#mobile-menu {
	position:fixed;
	right:-60vw; top:var(--navbar-height);
	width:calc(60vw); height:calc(100vh - var(--navbar-height));
	background-color:rgba(0,0,0,0.75);
	backdrop-filter:blur(5px);
	transition:none;
	z-index:998;
}
body.menu-open #mobile-menu {
	transform:translateX(calc(-60vw + 1px));
}
body.menu-open #navbutton {
	transform:rotate(360deg);
}
#mobile-menu ul {
	list-style-type:none;
	margin:30px; padding:0;
}
#mobile-menu ul li a {
	display:block;
	padding:10px;
	color:#fff;
	font-size:1.25em;
}

#jumbotron {
	width:100vw; height:120px;
	padding:0 6em;
	overflow:hidden;
	position:relative;
	color:#fff;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	perspective: 1px;
}
#jumbotron > *, #jumbotron h1, #jumbotron h6 {
	position:relative;
	color:#fff;
}
#jumbotron-bg {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	object-fit:cover;
	z-index:0;
	will-change: transform;
}
#jumbotron h1 {
	text-shadow:2px 2px 4px #000;
	font-family:"Henny Penny", san-serif;
	font-size:36pt;
	color:#fcf1cc;
}
#jumbotron h6 {
	font-weight:500;
	margin-left:5px;
}
#date-place {
	margin:0 0 1em 180px;
}
#date-place * {margin:0;}
#mustang {
	position:relative;
	width:auto; height:240px;
	object-fit:contain;
	margin:-150px 0 -60px 2rem;
	z-index:100;
}


#main {
	padding:6em;
	min-height:calc(100vh - 480px);
}

footer {
	width:100vw; min-height:200px;
	color:#fff;
	padding:4em;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
}
footer a {
	color:#fcf1cc;
	transition:0.2s ease-in-out;
}
footer a:hover {
	color:#fff;
	text-shadow:0 0 5px rgba(255,255,255,0.5);
}
#footer-affiliates a:hover {
	transform:scale(110%);
}
#footer-contact img {
	width:150px;
	float:left;
	margin-right:30px;
	margin-bottom:60px;
}
#footer-contact h4 {
	font-family:"Henny Penny", san-serif;
	color:#fcf1cc;
}
#footer-contact, #footer-affiliates {flex:1;}
#footer-affiliates {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}
#footer-affiliates i {
	font-size:32px;
	padding:15px;
	margin:5px;
	color:rgba(255,255,255,0.75);
}


@media(max-width:1000px) {
	#vecteezy-attribution {top:185px; color:#999;}
	#main {padding:2em;}
	#jumbotron {padding:0 2em;}
	#headline {margin-top:-1em; margin-left:180px;}
	#mustang {margin-left:30px;}
	#date-place {margin-left:180px;}
}
@media(max-width:900px) {
	#jumbotron {height:200px;}
	#vecteezy-attribution {top:var(--navbar-height); color:#fff;}
}
@media(max-width:767px) {
	#mustang {display:none;}
	#date-place {
		margin:0;
		bottom:30px;
		width:100%;
		text-align:center;
	}
	#headline {
		margin-left:0;
		width:100%;
		text-align:center;
		margin-top:0;
	}
	nav > ul {display:none;}
	#navbutton {
		display:inline;
	}
	#mobile-menu {
		transition:0.33s ease-in-out;
	}
}
@media(max-width:640px) {
	#jumbotron {height:300px;}
}
