/* ---------------------------------------------
	CLEAR FORMATTING
--------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------------------------------------------
	GENERAL
--------------------------------------------- */

body
{
	background: #000;
	font-family: helvetica;
	font-size: 16px;
	width: 100%;
	height: 100%;
}

a { color: #f7505e; text-decoration: none; }
a:hover{ color: #fff; }
b, strong { font-weight: bold; }

/* ---------------------------------------------
	BANNER
--------------------------------------------- */

.banner
{
	position: relative;
	width: 100%;
	height: 128px;
	background: url("images/banner.png") center center;
	background-size: cover;
	float: left;
}

.banner-container
{
	width: 100%;
	height: 100%;
}

.banner .logo
{
	position: absolute;
	top: 50%;
	left: 50px;
	width: 400px;
	transform: translateY(-50%);
}

.navigation
{
	position: absolute;
	top: 50%;
	left: 480px;
	width: calc(100% - 480px);
	height: 50px;
	float: right;
	display: inline;
}

.navigation span
{
	margin-top: -25px;
	margin-bottom: 25px;
	padding: 18px 20px 18px 20px;
	height: 100%;
	float: left;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;

	transition: background 0.25s;
}

.navigation span:hover
{
	background: #4a5fae;
	color: #152565;
}

.navigation span.current-page, .navigation span.current-page:hover
{
	background: #fff;
	color: #152565;
}

/* ---------------------------------------------
	CONTENT
--------------------------------------------- */

.page
{
	border-top: 1px solid #000;
	position: absolute;
	width: 100%;
	top: 128px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.content
{
	border-top: 1px solid #555;
	width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
}

/* ---------------------------------------------
	SUBNAVIGATION
--------------------------------------------- */

.subnavigation
{
	position: absolute;

	border-right: 1px solid #000;
	width: 25%;
	height: 100%;
	float: left;
	display: inline;
	overflow: hidden;

	background: #000;
}

.subnavigation-container
{
	position: relative;

	width: 100%;
	height: 100%;
	padding-right: 17px;
	padding-bottom: 17px;
	float: left;
	overflow: scroll;
	background: #000;
}

.scrollbar
{
	left: 25%;
	left: calc(25% - 11px);
	top: 0px;
	background: #333;
	width: 10px;
	height: 100px;
	border-radius: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	position: absolute;
	transition: background 0.20s;
}

.scrollbar:active, .scrollbar:hover
{
	cursor: pointer;
	background: #666;
}

/* subnavigation backgrounds */
.subnav-backgrounds
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	width: calc(100% - 12px);
}

.subnav-bg-container
{
	width: 100%;
	height: 120px;
	float: left;
	display: block;
	overflow: hidden;
}

.subnav-bg
{
	background-position: center center;
	background-size: cover;

	width: 100%;
	height: 120px;
	float: left;
	display: block;
}

/* subnavigation links (above the backgrounds) */
.subnav-links
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	width: calc(100% - 12px);
}

.subnav-link
{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
	background: rgba(0, 0, 0, 0.40);
	width: 90%;
	height: 19px;
	padding: 50px 5% 50px 5%;
	float: left;
	display: block;

	-webkit-transition: background 0.25s;
	transition: background 0.25s;
	border-bottom: 1px solid #666;
}

.subnav-link:hover
{
	background: rgba(92, 4, 7, 0.60);
	color: #fff;
	cursor: pointer;
}

.current-link
{
	background: rgba(92, 4, 7, 0.60);
	color: #fff;
}

.current-link:hover
{
	cursor: initial;
}

/* ---------------------------------------------
	MAIN VIEW CONTENT
--------------------------------------------- */

.view
{
	position: absolute;
	right: 0px;
	width: 75%;
	height: 100%;
	float: right;
	display: inline;
	background: #000;
	border-top: 1px solid #000;
}

.item
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	float: left;
	display: none;
}

.item-background-container
{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	white-space:nowrap;
}

.item-background
{
	position: absolute;
	background-size: cover;
	background-position: center center; 
	width: 100%;
	height: 100%;
	float: left;
	display: inline;
}

.current
{
	display: block;
}

.item-info
{
	position: absolute;
	width: calc(100% - 79px);
	bottom: 0px;
	background: rgba(0, 0, 0, 0.75);
	padding: 40px;
	color: #c8c8c8;
}

.item-info-video
{
	height: 120px;
}

.item-info h1
{
	font-size: 2.1em;
	font-weight: bold;
	text-transform: uppercase;
}

.item-info h2
{
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	margin-top: 5px;
}

.item-info a, .item-link
{
	color: #f7505e;
	text-decoration: none;
}

.item-link
{
	margin-top: 10px;
	float: left;
}

.item-link:hover
{
	color: #f51f30;
}

.item-info p
{
	line-height: 1.6em;
}

.item-video
{
	position: absolute;
	width: 100%;
	height: 100%;
}

.item-video iframe, .item-video video
{
	width: 100%;
	height: 100%;
}

.with-description
{
	height: calc(100% - 200px);
}

.item-mobile
{
	display: none;
}

/* ---------------------------------------------
	TESTIMONIALS
--------------------------------------------- */

.testimonials-set
{
	background-position: center center;
	background-size: cover;
	float: left;
	display: block;

	width: 100%;
	border-bottom: 1px solid #000;
	border-top: 1px solid #666;
}

.testimonials-background
{
	width: 100%;
	height: 100%;
	float: left;
	background: rgba(0, 0, 0, 0.80);
}


.testimonial
{
	float: left;
	display: inline;

	padding: 5%;
	width: 40%;

	color: #fff;
	font-size: 1.2em;
	line-height: 1.6em;
}

.testimonial .title
{
	width: 100%;
	float: left;
}

.testimonial img
{
	width: 100px;
	height: 100px;
	border-radius: 32px;
	vertical-align: middle;
	margin-bottom: 40px;
}

.testimonial h1
{
	max-width: calc(100% - 150px);
	line-height: 1.2em;
	font-size: 1.6em;
	text-decoration: uppercase;
	font-weight: bold;
	margin-left: 25px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 40px;
}

.testimonial h2
{
	font-size: 1.2em;
	font-weight: bold;
	color: #f7505e;
	margin-top: 20px;
	margin-bottom: 0px;
}

.testimonial h3
{
	font-size: 1.2em;
	font-weight: bold;
	color: #eeeeee;
	margin-bottom: 5px;
}

.testimonial h4
{
	font-size: 1.2em;
	font-weight: bold;
	color: #888888;
	margin-bottom: 5px;
}

/* ---------------------------------------------
	CONTACT
--------------------------------------------- */
.contact-bg
{
	position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: url("images/team/team-preview.jpg") center center;
	background-size: cover;
}

.contact
{
	width: 100%;
	float: left;
	border-top: 1px solid #666;
	background: #333;
}

.contact-container
{
	width: 80%;
	margin-left: 10%;
	margin-top: 50px;
	float: left;
}

.map
{
	float: left;
	width: 100%;
}

.map iframe
{
	border: 1px solid #111;
	width: 100%;
}

.map small a { padding-top: 10px; float: left; }

.contact-columns
{
	width: 100%;
	float: left;
	margin: 50px 0px 50px 0px;
	color: #ddd;
	line-height: 1.6em;
}

.contact-info
{
	width: 25%;
	float: left;
	display: inline;
}

.contact-form
{
	width: 70%;
	float: right;
	display: inline;
}

.contact h1
{
	color: #aaa;
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
}

.contact input
{
	color: #eee;
	border: 1px solid #666;
	background: #000;
	width: 90%;
	padding: 2%;
}

textarea
{
	color: #eee;
	border: 1px solid #666;
	background: #000;
	margin-top: 20px;
	width: 93%;
	padding: 2%;
}

#contact-submit
{
	width: 20%;
	padding: 10px;
}

#contact-submit:hover
{
	background: #666;
	cursor:pointer;
}

/* ---------------------------------------------
	REEL
--------------------------------------------- */

.reels
{
	width: 100%;
	min-height: 100%;
	float: left;
	border-top: 1px solid #666;
	background: #333;
	color: #eee;
}

.reels-container
{
	width: 80%;
	margin-left: 10%;
	margin-top: 100px;
	margin-bottom: 50px;
	float: left;
}

.reels-column
{
	width: 30%;
	margin: 1.5%;
	float: left;
	display: inline;
}

.reels h1
{
	color: #fff;
	font-size: 2.2em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.reels iframe
{
	margin-bottom: 50px;
	border: 1px solid #000;
}

/* ---------------------------------------------
	404 NOT FOUND
--------------------------------------------- */

.not-found-bg
{
	position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	background: url("images/services/voiceover.jpg") center center;
	background-size: cover;
}

.not-found
{
	position: absolute;
	top: 1px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.20);
}

.not-found h1
{
	margin-top: 200px;
	font-size: 2.4em;
	text-transform: uppercase;
	font-weight: bold;
}

.not-found p
{
	font-size: 2.0em;
}

.hide-on-mobile
{
	font-size: 2.0em;
	display: block;
}

/* ---------------------------------------------
	JOBS PAGE
--------------------------------------------- */

.jobs
{
	position: relative;
	width: 100%;
	float: left;
	border-top: 1px solid #666;
	background: rgba(0, 0, 0, 0.8);
}
.jobs h1 { font-size: 2.2em; font-weight: bold; margin-bottom: 8px; }
.jobs h2 { font-size: 1.4em; font-weight: bold; opacity: 0.8; margin-bottom: 16px; }
.jobs h3 { font-size: 1.4em; font-weight: bold; opacity: 0.8; margin-bottom: 16px; }
.jobs::after {
	content: "";
	background: url("images/services/voiceover.jpg") center center;
	background-size: cover;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;
}

.jobs-container
{
	width: 80%;
	margin-left: 10%;
	margin-top: 50px;
	float: left;
}

.jobs-columns
{
	width: 100%;
	float: left;
	margin: 50px 0px 50px 0px;
	color: #ddd;
	line-height: 1.6em;
}

.jobs-info
{
	width: 60%;
	float: left;
}
.jobs-info ul {
	list-style-type: disc;
}
.jobs-info li {
	margin-left: 32px;
}

.jobs-links
{
	width: 35%;
	float: right;
}

.jobs .google-form {
	position: relative;
	display: inline-block;
	background: linear-gradient(#f7505e, #f51f30);
	color: #fff;
	padding: 4px 16px 4px 16px;
	top: -4px;
	border-radius: 4px;
	border: 1px solid #f7606e;
	font-weight: bold;
	font-size: 1.0em;
}
.jobs .google-form:hover {
	background: #fff;
	color: #666;
	border: 1px solid #fff;
}

.jobs emphasis {
  font-style: italic;
}

/* ---------------------------------------------
	MOBILE STUFF
--------------------------------------------- */

@media(max-width: 1200px)
{
	.banner .logo
	{
		top: 15%;
		left: 50%;
		transform: translateX(-50%);
	}

	.navigation
	{
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	.navigation a span { width: 16.6%; padding-left: 0; padding-right: 0; margin: 0; }
}

@media(max-width: 800px)
{
	.subnavigation
	{
		width: 100%;
	}

	.navigation a span { font-size: 0.8em; }

	.scrollbar
	{
		left: 100%;
		left: calc(100% - 9px);
	}

	.view
	{
		position: fixed;
		width: 100%;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		display: none;
	}

	.view .item-background-container
	{
		position: fixed;
	}

	.item-info
	{
		overflow-y: auto;
		top: 50px;
	}

	.item-info p
	{
		font-size: 1.4em;
	}

	.item-mobile
	{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		width: calc(100% - 20px);
		padding-top: 10px;
		height: 30px;
		background: rgba(0, 0, 0, 0.90);
		color: #fff;
		text-align: right;
		padding: 10px 10px 10px 10px;
		display: block;
		border-bottom: 1px solid #444;
		font-size: 1.6em;
	}

	.item-mobile span
	{
		cursor: pointer;
	}

	.testimonial
	{
		width: 80%;
		padding: 10%;
		border-bottom: 1px solid #666;
	}

	.testimonials-set
	{
		border-top: 0px;
		border-bottom: 0px;
	}

	.map iframe
	{
		height: 200px;
	}

	.reels-container
	{
		margin-top: 50px;
	}

	.reels-column
	{
		width: 100%;
		padding: 0px;
	}

	.reels iframe
	{
		height: 400px;
	}

	.contact-info
	{
		width: 100%;
	}

	.contact-form
	{
		width: 100%;
		margin-top: 50px;
	}

	.jobs-info
	{
		width: 100%;
	}

	.jobs-links
	{
		width: 100%;
		margin-top: 50px;
	}

	.hide-on-mobile
	{
		display: none;
	}
}

.gallery-header
{
	width: 100%;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	padding-top: 8px;
}

.gallery .column {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
	box-sizing: border-box;
}

.gallery .column .gallery-item {
	position: relative;
	display: inline-block;
	margin-bottom: 8px;
	width: 100%;
}

.gallery .column .gallery-item img {
	width: 100%;
}
.gallery .column .gallery-item .overlay {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background: transparent;
}

@media screen and (max-width: 800px)
{
	.gallery .column {
		flex: 50%;
		max-width: 50%;
	}
}

@media screen and (max-width: 500px) {
	.gallery .column {
		flex: 100%;
		max-width: 100%;
	}
}