@charset "UTF-8";

@font-face {
   font-family: corbel;
   src: url(../fonts/corbel-webfont.woff);
   font-weight: normal;
}


@font-face {
   font-family: corbel;
   src: url(../fonts/corbelb-webfont.woff);
   font-weight: bold;
}

@font-face {
   font-family: caveat;
   src: url("../fonts/Caveat-Medium.woff");
   font-weight: bold;
}

/* Core styles */

* {
	margin: 0;
	padding: 0;
	font-family: corbel, verdana;
	color: #666666;
}

html, body {
	background-color: rgb(99, 102, 107);
	height: 100%;
}

p, li, input {
	margin: 0em 0em 0.75em 0em;
	line-height:1.5em;
}

ul {
    list-style: Square outside;
    padding-left: 0.8em;
}

ul > li {
    color: #d44d0c;
}

ul > li > span {
    color: #666666;
}

h1 {
    font-size: 1.3em;
    font-weight: bold;
    color: #d44d0c;
    text-transform: uppercase;
	letter-spacing: 0.1em;
}

a {
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	cursor: pointer;
    color: #d44d0c;
}

label {
	font-weight: bold;
	color: white;
	text-align: right;
	margin-right: 1em;
}

input, textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0.75em 0em 2em 0em;
	outline: none;
	border: 0.15em solid rgba(255,255,255,0.6);
	border-radius: 0.5em;
	background-color: transparent;
	padding: 1em;
	color: white;
	font-size: 1.2em;
}

input:focus, textarea:focus {
	background-color: rgba(0,0,0,0.2);
}

input:hover, textarea:hover {
	border-color: rgba(255,255,255,0.9);
}

input {
	height: 3.5em;
}

textarea {
	resize: none;
	height: 10em;
	vertical-align: top;
}

input[type=submit] {
	background-color: #893611;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
}

input[type=submit]:hover {
	box-shadow: 0em 0em 1em 0.5em rgba(0,0,0,0.2);
	background-color: #d44d0c;
}

img {
    max-width: 100%;
}

video {
	width: 100%;
}

.pageFrame {
	background-color: white;
	margin: auto;
	box-shadow: 0em 0em 2em rgba(0,0,0,0.3);
}

.greyBox {
	background-color:#c8c8c8;
	padding: 1em 1em 0em 0em;
}

.greyBox img {
	position: relative;
	overflow: hidden;
	width: 55%;
	min-width: 20em;
	top: 0.3em;
	left: 2em;
}


.greyRule {
	position: relative;
	border-top: 0.12em solid #787878;
	z-index: 1;
}

.gradBox {
	padding: 1em 1em 1em 0em;
	position: relative;
	bottom: 0.12em;
	text-align: right;
    text-transform: uppercase;
	letter-spacing: 0.6em;
	margin-bottom: 0.2em;
	background: -webkit-linear-gradient(left, #c8c8c8, #dedede);
	background: -o-linear-gradient(left, #c8c8c8, #dedede);
	background: linear-gradient(to right, #c8c8c8, #dedede);
}

.gradBox span {
	vertical-align: middle;
    font-size: 1.25em;
}

.spectrum {
	height: 0.6em;
	background-image:url(../images/grad.png);
	background-size: cover;
	padding-right: 1em;
}

.polaroid {
	display: none;
	position: relative;
	left: 3em;
	top: 3em;
	float: left;
    width: 15%;
	background-color: #fafafa;
	padding: 1%;
	box-shadow: .2em .2em .3em rgba(0,0,0,0.3);
	transform: rotate(-2deg);
    z-index: 5;
}

.polaroidcontent {
    box-shadow: 3em 3em 3em #000 inset;
}

.contact {
	padding: 0.25em 0em 0.1em 0.25em;
	width: 0%;
	font-family: caveat, verdana;
    font-size: 1.6em;
    color: #d44d0c;
	overflow: hidden;
	text-wrap: nowrap;
}

.polaroid:hover .contact{
	width: 100%;
}

.textBox {
	padding: 2em;
}

.exampleBox {
	background: -webkit-linear-gradient(#dedede, #ffffff);
	background: -o-linear-gradient(#dedede, #ffffff);
	background: linear-gradient(#dedede, #ffffff);
}

.exampleBox img {
	filter: drop-shadow(0.2em 0.2em 0.5em rgba(0,0,0,0.3));
	margin: 2em 0em;
}

.exampleBox a:hover img {
	filter: drop-shadow(0.2em 0.2em 0.3em rgba(111,43,0,0.8));
}

.exampleBox span {
	display: flex;
}

.formBox {
	background-image:url("../images/texture.png");
	background-size: cover;
	background-color: rgba(99, 102, 107, 0.9);
}

.formBox h1 {
	font-size: 2.5em;
    font-weight: normal;
	color: rgba(255, 255, 255,0.6);
	padding-bottom: 0.75em;
	text-transform: none;
}

.videoBox {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}

.videoBoxInner {
	text-align: center;
	height: 85%;
	width: 80%;
}

.closeButton {
	width: 5em;
	height: 2.25em;
	padding: 0.5em;
	line-height: 1em;
}

.videoBox, .pageFrame, .contact, .exampleBox img, a, input, textarea {
    -webkit-transition: 0.75s ease-in-out;
    -moz-transition: 0.75s ease-in-out;
    transition: 0.75s ease-in-out;
}

.hide {
    opacity: 0;
	pointer-events: none;
}

.blur {
	filter: blur(0.75em);
}

/* Media queries */

@media (min-width: 900px) {
	
	html, body {
		padding: 2em;
		margin: auto;
	}
	p, li {
    font-size: 1.25em;
	}
	video {
	max-width: 80%;
	}
	.pageFrame {
		max-width: 80em;
	}
	.polaroid {
		display: block;
	}
	
	.spectrum.narrow75 {
		margin-bottom: 1.5em;
	}
	
	.greyRule {
	margin-left: 3.5em;
}
	
	.greyBox {
		padding-top: 3em;
	}
	
	.greyBox img {
		left: 5em;
	}
	.narrow50 {
		width: 50%;
	}
	.narrow65 {
		width: 65%;
	}
	.narrow75 {
		width: 75%;
	}
	.textBox {
		padding: 3em 4em
	}
}