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, 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, 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;
    }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
    height: 100%;
    }

body {
    display: table;
    width: 100%;
    }

.page-row {
    display: table-row;
    height: 1px;
    }
 
.page-row-expanded { height: 100%; }

article {
    margin: 1.85em auto;}

aside, details, figcaption, figure, header, hgroup, menu, nav, section {
    margin: 0 auto;
    display: block;
    }

aside { width: 100%; }

.clearfix:before, .clearfix:after { content: ""; display: block; }
.clearfix:after { clear: both; }
.ie6 .clearfix { zoom: 1 }

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFF;
	z-index: 10001;}

.spinner {
    position: absolute;
	left: 50%;
	top: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    text-align: center;}

.spinner > div {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;}

.spinner .bounce_01 { background-color: #9AD5F9; }
.spinner .bounce_02 { background-color: #89CEF8; }
.spinner .bounce_03 { background-color: #78C7F7; }

.spinner .bounce_01 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;}

.spinner .bounce_02 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }}

@keyframes bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


/* FONTS
----------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'League Gothic';
    src: url(../../fonts/leaguegothic-regular-webfont.eot);
    src: url(../../fonts/leaguegothic-regular-webfont.eot?#iefix) format('embedded-opentype'),
         url(../../fonts/leaguegothic-regular-webfont.woff) format('woff'),
         url(../../fonts/leaguegothic-regular-webfont.ttf) format('truetype'),
         url(../../fonts/leaguegothic-regular-webfont.svg#league_gothicregular) format('svg');
    font-weight: normal;
    font-style: normal;
}


/* PHOTOGRAPHY
----------------------------------------------------------------------------------------*/

img, embed, object, video { margin: 0 auto; max-width: 100%; height: auto; display: block; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }

#gallery {
    max-width: 60em;
	height: auto;
	margin: 0 auto;
    }
	
.wrapper_gallery { overflow: hidden; }

#gallery a img {
    width: 33.3333%;
    float: left;
    position: relative;
    margin: 0;
    }
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    #gallery a img { width: 50%; }
}

.headshot {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;}


/* LAYOUT [SMALL]
----------------------------------------------------------------------------------------*/

#wrapper {
    max-width: 100%;
    margin: 0 auto;
    background-color: #fcfeff;}

footer {
    margin: 0 auto;
    display: block;
    background-color: #33313e;
    }

.footer_inner {
    margin: 0 auto;
    width: 90%;
    display: block;
    padding: 1.5em 0.85em;
    color: #FFF;
    text-align: center;}

.footer_lower {
    margin: 2.5em auto 0;
    width: 90%;
    display: block;
    color: #FFF;
    text-align: center;}

#socialnetwork {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 1.25em 0;}

header {
    width: 100%;
    z-index: 999;
    top: 0;
    background-color: #FFF;
    border-bottom: 1px solid #f3f3f3;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

.header_inner {
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    width: 90%;}

#hero {
    position: relative;
    display: block;}

.showreel {
    margin: 2.5em auto;
    position: relative;}

img.showreel_preview {
    max-width: 500px;
    width: 100%;
    height: auto;}

.verticalcenter {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    padding: 0 15px;
    z-index: 1000;}

.introduction {
    width: 90%;
    max-width: 30em;
    display: block;
    margin: 80px auto;}

.content {
    width: 90%;
    max-width: 60em;
    display: block;
    margin: 2em auto;}

.wide_content {
    width: 90%;
    max-width: 100%;
    display: block;
    margin: 2em auto;}

.no_buffer {
    margin: 0 auto !important;}

.column {
    float: none;
    width: 100%;
    padding: 0;}

.column + .column {
    margin: 2.5em auto;}

.column + .column {
    margin: 2.5em auto 0;}

.row {
    margin: 0 auto;}

.large_screen { display: none; }


/* TYPOGRAPHY
----------------------------------------------------------------------------------------*/

body {
    font-family: 'brandon-grotesque', 'Brandon Grotesque';
    color: #33313e;}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.5em;
    }

h1, h2, a.show_link {
    font-family: 'League Gothic';
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #33313e;
    }

h1 { font-size: 2em; }
h2, a.show_link { font-size: 2em; }

p, ul, ol, dl, blockquote {
    line-height: 1.618em;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    }

p { font-size: 1.25em; }

p + p { margin: 1em auto 0 auto; }

p.super { font-size: 0.75em; color: #716f7e; }

.center { text-align: center; }

b, strong { font-weight: 500; }
i, em { font-style: italic; }
small { font-size: 80%; }

::selection { background: #78c7f7; color: #fff; }
::-moz-selection { background: #78c7f7; color: #fff;}

hr { border-top: 2px solid #33313e; width: 50px; margin: 2.5em auto; }

a { text-decoration: none; outline: none; cursor: pointer; color: inherit; }

a {
    font-weight: 500;
    color: #33313e;
    outline: none;
    text-decoration: none;
    padding: 0;
    border-bottom: 2px solid #f3f3f3;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    }

a:hover { outline: none; text-decoration: none; color: #33313e; border-bottom: 2px solid #78c7f7; }

a.fancybox-close, a.fancybox-prev, a.fancybox-next { border: none; }

a.footer_link {
    font-weight: 500;
    color: #FFF;
    outline: none;
    text-decoration: none;
    padding: 0;
    border: none;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    }

a.footer_link:hover { outline: none; text-decoration: none; color: #78c7f7; }

a.talkinghorse {
    border: none;
    color: #716f7e;}

a.talkinghorse:hover { outline: none; text-decoration: none; color: #78c7f7; }

a.showreel_button {
    display: block;
    margin: 2.5em auto;
    text-align: center;
    color: #33313e;
    font-size: 1.5em;
    border: none;}

a.showreel_button:hover { outline: none; text-decoration: none; color: #78c7f7; }

a.cv_button {
    display: block;
    margin: 2.5em auto;
    text-align: center;
    color: #33313e;
    font-size: 1.5em;
    border: none;}

a.cv_button:hover { outline: none; text-decoration: none; color: #78c7f7; }


/* NAVIGATION
----------------------------------------------------------------------------------------*/

a.logo {
	font-family: 'League Gothic';
    font-size: 2.5em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #33313e;
    display: block;
    text-align: center;
	margin: 0.5em auto 0;
    border-bottom: none;}

a.logo:hover { color: #78c7f7; }

.mobile { display: block; }
.desktop { display: none; }

.navigation {
  	display: block;
  	position: relative;
    margin: 0 auto;
	text-align: center;
	background-color: #FFF;}

.navigation li {
    position: relative;
	display: inline-block;
	padding: 0 2%;}

.navigation li a {
	font-family: 'League Gothic';
    font-size: 1.5em;
	color: #3d3a48;
    border: none;
    text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;}

.navigation li:hover a {
    color: #78c7f7;
    text-decoration: none;}

.navigation li.current a {color: #78c7f7;}
.navigation_button { display: none }

@media screen and (max-width: 30em) {
    
.js .navigation {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;}
    
.navigation {
    top: 10px;
    width: 100%;
    position: relative;}
	
.navigation li {
	display: block;
	padding: 2% 1% 2% 1%;}

.navigation li:last-child {
	display: block;
	padding: 2% 1% 4% 1%;}

.navigation li:hover ul {
    left: -9999px;}
	
.navigation.opened { max-height: 9999px }
  
.navigation_button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 70px;
    height: 55px;
    display: block;
    margin: 0 auto;
    border: none;
    padding: 0.809em 0.809em 0.809em 0;
    text-indent: -9999px;
    overflow: hidden;
    background: #33313e url(../../images/hamburger.gif) no-repeat 50% 33%;}

.navigation_button:hover {
    border: none;
    background-color: #33313e;}

@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dppx), screen and (min-resolution: 2dppx) {
.navigation_button {
    background-image: url(../../images/hamburger-retina.gif);
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;}
}

@media screen and (min-width: 76em) {
  .navigation { width: 18em }
}

}


/* FOOTER
----------------------------------------------------------------------------------------*/

#socialnetwork {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;}

a#facebook, a#twitter, a#instagram, a#pinterest {
    color: #FFF;
    font-size: 1.5em;
    border: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
    }

a#facebook:hover {
    color: #3b5997;}

a#twitter:hover {
    color: #4597d1;}

a#instagram:hover {
    color: #517fa4;}

a#pinterest:hover {
    color: #cb2027;}


/* PRODUCTIONS
----------------------------------------------------------------------------------------*/

.project {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 0;}

a.show_link {
    display: block;
    text-decoration: none;
    border: none;
    outline: none;
    color: #FFF;}
    
.the_background {
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 8rem;
    position: relative;
    border: none;
    overflow: hidden;}

.vertcenter {
    text-indent: none;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    padding: 0 15px;}

.vertcenter h2 { color: #FFF; }

#other_flow {
    margin: 1.25em auto;
    display: block;}

@media screen and (min-width: 1000px) {
    
.production_column {
    width: 23%;
    float: left;
    padding: 0;
    margin: 1% 1%;} 
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
    
.production_column {
    width: 31.3333%;
    float: left;
    padding: 0;
    margin: 1% 1%;}
}
@media screen and (min-width: 640px) and (max-width: 800px) {
    
.production_column {
    width: 48%;
    float: left;
    padding: 0;
    margin: 1% 1%;}
}
@media screen and (max-width: 640px) {

.production_column {
    width: 100%;
    float: none;
    padding: 0;
    margin: 4% 0;}
}


/* VIDEO
----------------------------------------------------------------------------------------*/

.video {
    max-width: 50em;
    margin: 2.5em auto;
    display: block;}

.shallow {
    margin: 0 auto 2.5em;}

.video_container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; 
    max-width: 100%;
    margin: 0 auto;
    height: auto;}

.video_container iframe, .video_container object, .video_container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

/* Responsive embeds */
[data-embed] { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}

[data-embed] iframe, 
[data-embed] object, 
[data-embed] embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}