@charset "utf-8";

@font-face {
	font-family:Archivo;
	src:url("ArchivoBlack-Regular.ttf") format("truetype");
}

:root {
	--golden:1.61803;
	--minwidth:920px;
	--maxwidth:1200px;
	--black:rgba(0,0,0,1);
	--darkgray:rgba(20,20,20,1);
	--columngray:rgba(40,40,40,1);
	--lightgray:rgba(135,135,135,1);
	--white:rgba(255,255,255,1);
	--orange:rgba(210,47,37,1);
	--highlightorange:rgba(245,74,67,1);
}

*, *:before, *:after {
	border-collapse:collapse !important;
	box-sizing:border-box !important;
}

body {
	background-color:var(--darkgray);
	display:flex;
	flex-direction:column;
	font-family:"Montserrat", arial, sans-serif;
	font-size:18px;
	line-height:24px;
	min-height:100vh;
	width:100%;
}

h1 {
	color:var(--orange);
	font-family:"Archivo", "Impact", "arial black", sans-serif;
	font-size:2em;
	padding:0;
	margin-top:0;
	white-space:pre;
}

.header {
	background-color:var(--black);
	display:flex;
	flex-direction:column;
	/*
	position:-webkit-sticky;
	position:sticky;
	top:0;
	*/
	padding:20px;
	width:100%;
}

.welcome {
	color:var(--white);
	display:flex;
	font-size:0.7em;
	align-items:center;
	justify-content:center;
	text-transform:uppercase;
	letter-spacing:0.2em;
}

.title {
	align-items:center;
	color:var(--white);
	display:flex;
	font-family:"Archivo", "Impact", "arial black", sans-serif;
	font-size:2em;
	font-size:42px;
	font-weight:bold;
	justify-content:center;
	margin-bottom:20px;
/*	padding:0 0.75em 0.75em; */
	text-transform:uppercase;
}

.nav {
	text-align:center;
}

.nav a {
	color:var(--lightgray);
	text-decoration:none;
	text-transform:uppercase;
}

.nav a:hover {
	color:var(--white);
}

.nav a + a {
	margin-left:5em;
}

.bigimage {
	align-items:center;
	background-image:url('../images/outwest2017-02.jpg');
	background-position:center center;
	background-size:cover;
	height:calc(100vw / (var(--golden) * 1.5));
/* 	min-height:calc(var(--minwidth) / (var(--golden) * 2)); */
	justify-content:center;
}

.logo {
	height:250px;
}

.content {
	align-items:normal;
	color:var(--white);
	display:flex;
	flex-grow:1;
	flex-direction:row;
	justify-content:space-evenly;
/*	padding:10px 0; */
}

.column {
	align-items:center;
/* 	background-color:var(--columngray); */
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
/*	max-width:550px; */
/*	padding:20px; */
 	max-width:50%;
	flex-grow:1;
}

.column + .column {
/*	margin-left:10px; */
}

.content form {
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:start;
	width:100%;
}

.content form input[type=text], .content form input[type=email], .content form textarea {
	background-color:var(--black);
	border:none;
	color:var(--white);
	min-width:450px;
	max-width:500px;
	outline:none;
	padding:0.5em;
	width:100%;
}

.content form input[type=submit] {
	background-color:var(--orange);
	border:none;
	color:var(--white);
	cursor:pointer;
	font-size:0.75em;
	font-weight:bold;
	padding:1em 2em;
	text-transform:uppercase;
}

.content form input[type=submit]:hover {
	background-color:var(--highlightorange);
}

.content form input:not(:first-child), .content form textarea:not(:first-child) {
	margin-top:20px;
}

.textcol {
	padding:40px;
}

.about {
	background-image:url('../images/657.jpg');
	background-position:center center;
	background-size:cover;
}

.history {
	background-image:url('../images/outwest2017-10.jpg');
	background-position:center center;
	background-size:cover;
}

.events {
	background-image:url('../images/656.jpg');
	background-position:center center;
	background-size:cover;
	max-height:100vh; /* added to fix appearance after events were changed to calendar images */
}

.footer {
	font-size:0.8em;
	color:white;
	text-align:center;
	padding:20px 0px;
}

@media screen and (max-width:1000px) {
	.title {
		font-size:1.5em;
	}
	
	.nav a + a {
		margin-left:1em;
	}

	.bigimage {
		height:calc(100vw / (var(--golden) * 1.25));
	}
	
	.content {
		flex-direction:column;
		align-items:stretch;
		justify-content:flex-start;
	}
	
	.column {
		max-width:100%;
		width:100%;
	}
	
	.column + .column {
		margin-left:0px;
	}

}