@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

* {
	box-sizing: border-box;
}

body {
	font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	margin: 0;
	padding: 0;
	background-color: #fbfbfb;
}


/*****************************************************
	Homepage :: Section 1
******************************************************/
	section#homepageVideo {
		text-align: center;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
	
	section#homepageVideo video {
		position: absolute;
		left: 0;
		bottom: 0;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -10;
		margin: 0 auto;
		text-align: center;
		background-color: #333;
		overflow: hidden;
	}
	
	video#backgroundVideoHomepage {
		opacity: .75;
	}
	
	header#homepageName {
		color: #fff;
		text-align: center;
		margin-top: calc(100vh * .35);
		display: inline-block;
		background-color: rgba(51, 51, 51, 0.75);
		padding: 50px;
	}
	
	header#homepageName h1 {
		font-size: 3.5em;
		font-weight: 700;
		margin: 0;
		font-family: "Oswald";
		text-transform: uppercase;
	}
	
	header#homepageName h2 {
		font-size: 1.25em;
		font-weight: 400;
		margin: 0;
		opacity: .8;
		text-transform: uppercase;
	}
	
	.scrollDownArrow {
		width: 40px;
		height: auto;
		display: block;
		margin: 0 auto;
		position: relative;
		top: 25%;
	}
	
	
/*****************************************************
	Homepage :: Section 2  -- Also, Nav and Header
******************************************************/	
	
	div#headerAndNav {
		background-color: #222729;
		color: #fff;
		clear: both;
		padding-bottom: 5px;
	}
	
	section#header {
		padding: 40px 50px 0 50px;
	}
	
	div.headerContentContainer, div.headerContentContainerNoRule {
		padding: 0 0 20px 0;
		border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	}
	
	div.headerContentContainerNoRule {
		padding: 0 0 30px 0;
		border-bottom: none;
	}
	
	div.headerContentContainer:after, div.headerContentContainerNoRule:after, section#contact:after {
		clear: both;
		content: '';
		display: table;
	}
	
	div#headerName {
		width: 45%;
		float: left;
		display: inline-block;
	}
	
	div#headerName h2 {
		margin: 0;
		font-size: 1.75em;
		font-weight: 900;
		font-family: "Oswald";
		text-transform: uppercase;
		padding: 0;
	}
	
	div#headerName h3 {
		margin: 0;
		font-size: 1em;
		padding: 5px 0;
		font-weight: 400;
		opacity: .8;
	}
	
	div#headerPhone {
		width: auto;
		float: right;
		display: inline-block;
	}
	
	h3.capitalDetail {
		margin: 5px 0 0 0;
		font-size: 1em;
		font-weight: 400;
		text-transform: uppercase;
		opacity: .8;
	}
	
	h4.phone {
		margin: 0;
		font-size: 1.5em;
		font-weight: 900;
		font-family: "Oswald";
		text-transform: uppercase;
		padding: 5px 0;
		opacity: .8;
	}
	
	nav#mainNav {
		padding: 30px 50px 30px 50px;
		text-align: center;
	}
	
	nav#mainNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	nav#mainNav ul li {
		display: inline-block;
		padding: 12px 2.2%;
		font-size: 1em;
		font-weight: 400;
		border-bottom: 3px solid transparent;
	}
	
	nav#mainNav ul li.selected {
		background-color: #fff;
		color: #333;
	}
	
	nav#mainNav ul li:hover {
		border-bottom: 3px solid #fff;
	}
	
	nav#mainNav ul li a {
		color: #fff;
		text-decoration: none;
	}
	
	div.imageBanner {
		max-width: 100%;
		margin-top: -1px;
	}
	
	div.imageBanner img {
		width: 100%;
	}
	
	
/*****************************************************
	Homepage :: Section 3
******************************************************/
	
	section#welcome, section.mainContent, section#about, section#stuntwork, section.reelsContainer, section#driving, section#reel {
		max-width: 860px;
		margin: 0 auto;
		padding: 0 30px;
	}
	
	section#welcome, section#about, section#stuntwork, section#driving, section#reel {
		padding: 60px 30px;
		padding-bottom: 24px;
	}
	
	h2.sectionTitle {
		font-family: "Oswald";
		text-transform: uppercase;
		font-size: 2.3em;
		color: #333;
		border-bottom: 3px solid orange;
	}
	
	p.bodyCopy {
		line-height: 1.5;
		color: #333;
		font-size: 1.1em;
	}
	
	p.bodyCopy a, dd a, span a {
		color: #333;
		border-bottom: 2px solid orange;
		text-decoration: none;
	}
	
	p.bodyCopy a:hover, dd a:hover, span a:hover {
		color: orange;
		border-bottom: 2px solid transparent;
	}
	
	.homepageHeadshot {
		width: 100%;
		border: 3px solid orange;
	}
	
	div.leftImage {
		width: 30%;
		float: left;
	}
	
	div.rightCopy {
		width: 65%;
		float: right;
	}
	
	h3.smallSectionTitle {
		font-family: "Oswald";
		text-transform: uppercase;
		font-size: 1.25em;
		color: #333;
		border-bottom: 3px solid orange;
	}
	
	div.contactDetails dl:nth-of-type(2n) {
		margin-right: 0;
	}
	
	dl.contactInfo {
		list-style: none;
		padding-bottom: 0;
		margin-right: 20px;
		display: inline-block;
	}
	
	dl.contactInfo:last-of-type {
		margin-right: 0;
		display: inline-block;
	}
	
	dl.contactInfo dt, h4.contactInfoHFour {
		font-weight: 900;
		font-size: .9em;
		text-transform: uppercase;
		opacity: .5;
	}
	
	h4.contactInfoHFour {
		margin: 0 0 2px 0;
	}
	
	dl.contactInfo dd, span.socialLink {
		font-size: 1.15em;
		padding: 0;
		margin: 0 0 20px 0;
	}
	
	span.socialLink {
		display: inline-block;
		padding-right: 40px;
	}
	

/*****************************************************
	About :: Avatar
******************************************************/

	div.avatarRound {
		width: 225px;
		height: 225px;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
		border: 3px solid #eee;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	}
	
	img.aboutAvatarRoundPhoto {
		width: 100%;
		height: auto;
	}

	
/*****************************************************
	About :: Downloads
******************************************************/

	section#downloads {
		margin-bottom: 70px;
	}
	
	div.download {
		margin: 0 30px 0;
		background-color: none;
		padding: 10px 0 30px 0;
	}
	
	div.download:nth-of-type(4) {
		margin-bottom: 15px;
	}
	
	h4.downloadTitle {
		font-weight: 700;
		font-size: 1.2em;
		margin: 0;
		padding: 0;
	}
	
	p.downloadDescription {
		font-size: .9em;
		color: #555;
		margin: 5px 0 10px 0;
	}
	
	p.downloadLink {
		font-size: .8em;
		text-transform: uppercase;
		font-weight: 900;
		display: inline-block;
		margin: 0;
	}
	
	p.downloadLink a {
		text-decoration: none;
		color: #333;
		border-bottom: 2px solid orange;
	}
	
	p.downloadLink a:hover {
		color: orange;
		border-bottom: none;
	}
	
	div.headshot {
		display: inline-block;
		margin-left: 30px;
	}
	
	img.headshotImage {
		height: 140px;
		width: auto;
		display: block;
		margin-bottom: 10px;
	}
	
	
	
	
	
/*****************************************************
	About :: Contact
******************************************************/

	div.contactPadding {
		padding: 0 20px;
	}

	div.contactInfoDiv {
		display: inline-block;
		margin: 16px 0 0 0;
		vertical-align: top;
	}
	
	
	
/*****************************************************
	Stuntwork :: Reels
******************************************************/

	span.thin {
		font-weight: 300;
		color: orange;
	}
	
	section.reelsContainer a {
		margin: 0;
		display: inline-block;
		width: 48%;
		margin-right: 3%;
		margin-bottom: 4%;
	}
	
	a div.reelTile {
		width: 100%;
		display: inline-block;
		background-color: #fff;
		border-bottom: 3px solid orange;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
		transition-property: all;
		transition-duration: .15s;
		transition-timing-function: cubic-bezier(.29,0,.62,1);
	}
	
	div.reelTile:hover {
		background-color: orange;
		transition-property: all;
		transition-duration: .25s;
		transition-timing-function: cubic-bezier(.29,0,.62,1);
	}
	
	div.reelTile:hover div.reelPhotoContainer {
		border-bottom: 3px solid #fff;
	}
	
	div.reelTile:hover h4, div.reelTile:hover p {
		color: #fff;
	}
	
	div.reelTile:hover h4 {
		border-bottom: 2px solid #fff;
	}
	
	section.reelsContainer a:nth-of-type(2n) {
		margin-right: 0;
	}
	
	div.reelPhotoContainer {
		max-width: 100%;
		height: 140px;
		overflow: hidden;
		border-bottom: 3px solid transparent;
	}
	
	div.reelPhotoContainer img {
		width: 100%;
		height: auto;
		opacity: .8;
	}
	
	div.reelInfo {
		padding: 17px 20px 20px;
	}
	
	h4.reelTitle {
		font-size: 1.2em;
		font-weight: 300;
		font-family: "Oswald";
		text-transform: uppercase;
		margin: 0 0 10px 0;
		color: #333;
		border-bottom: 2px solid orange;
		display: inline-block;
	}
	
	p.reelDescription {
		margin: 0;
		font-size: 1em;
		line-height: 1.35;
		color: #555;
	}
	
	section#reel {
		padding-top: 30px;
	}
	
	div.videoContainer {
		text-align: center;
		padding: 10px 0 20px;
	}
	
	video.reelVideo {
		margin: 0 auto;
		text-align: center;
	}

	
	
/*****************************************************
	Footer
******************************************************/
	footer {
		margin-top: 100px;
		background-color: #222729;
		color: #fff;
		padding: 50px 50px;
	}
	
	h4.footerName {
		font-family: "Oswald";
		font-size: 1.25em;
		text-transform: uppercase;
		margin: 0;
	}
	
	h5.footerTagline, .copyright {
		font-size: .9em;
		font-weight: 400;
		margin: 0;
		opacity: .8;
	}
	
	.copyright {
		font-size: .8em;
		opacity: .5;
	}