@charset "UTF-8";
/* CSS Document */

/*RESET*/
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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}


/*CSS*/
body table {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	border:0 none;
}

header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

#pageheader {
	width: 100%;
	position: fixed;
	background-color:#ffffff;
	top: 0;
	left: 0;
	z-index: 100;
	height:4.75vw;
	border-bottom: 1px solid #4d5459;
}

#pagename{
	margin:10px 20px;
	float: left;
	height: 40px;
	display: block;
	font-size:3.25vw;
	font-family:'Raleway-thin', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
}

nav {
	float: right;
	padding: 1vmin 2vw;	
}

section {
	margin: 80px auto 40px;
	max-width:980px;
	position: relative;
	padding: 20px
}

ul {
	list-style: none;
}

p {
	font-family:Gotham, sans-serif;
	font-weight:200;
	line-height:1.3em;
	font-size:1.5vw;
}

h2 {
	font-family:Gotham, Sans-serif;
	padding-top:20px;
	font-weight:400
}

strong {
	font-weight:400;
}

li {
	display: inline-block;
	float: left;
	padding: 10px;
	font-family: Gotham, sans-serif;
	font-weight:100;
	font-size:1.5vmax;
}

.current {
	color: #4D5459;
}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: url(images/menu-icon-01.png) center;

}
a:hover#menu-icon {
	border-radius: 5px 5px 0 0;
}

a {
	text-decoration:none;
	color:#4d5459;
}

a:hover {
	color:#901e22;
	opacity:.5;
}

#page {
	background-color: #f2f2f2;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding:0;
}

#name {
	font-size:5vw;
	font-family:'Raleway-thin', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
	text-align: right;
}

#headline {
	font-size:3vw;
	font-family:'Raleway-thin', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
	padding-top:20px;
}

#wrong {
	font-size:1.5vw;
	font-family:'Raleway-thin', San-Serif;
	line-height:1.3em;
	color:#4D5459;
	padding-top:20px;
}

.name {
	position: relative;
	padding:15vw 8vw 0 8vw;
	font-size:0;
	letter-spacing:.05em;
	font-family:Gotham, Sans-Serif;
	font-weight:100;
	text-align:right;
}

.nav a {
	color:#ffffff;
}

.nav a:hover {
	color:#fff;
}

#footer {
	position: fixed;
	vertical-align:baseline;
	width:100%;
	height: 1.5vw;
	bottom:0px;
	right:1vw;
	text-align: right;
	font-family:Gotham, sans-serif;
	font-weight:100;
	font-size: .75vw;
	color:#393939;
}


/* Testimonial */

#testimonial {
	margin: 10px 40px;
}

.testimonial {
	font-family:Gotham, Sans-serif;
	font-size: 2vmin;
	line-height: 1.5em;
	font-weight:200;
	text-indent:-7px;
	text-align:justify;
}

#biobuttons {
	margin:40px 0;
}

.biobuttonimg {
	width:15%;
	padding:10px;
}

.bio {
	font-family:Gotham, Sans-serif;
	font-size: 2vmin;
	line-height: 1.5em;
	font-weight:200;
	text-align:justify;
}

/* Photos */

#photocontainer {
	margin:20px 20px 20px 0;
}

/* Links */

#links {
	margin: 10px 60px;
}

.links {
	font-family:Gotham, Sans-serif;
	font-size: 2vmin;
	line-height: 1.5em;
	font-weight:300;
}


/* Contact */

#contact {
	margin:0px 0 40px 60px;
}

.contact {
	font-family:Gotham, Sans-serif;
	font-size: 1.2vmin;
	line-height: 1.3em;
	font-weight:400;
}

.contact img {
	padding:10px;
	width:70%;
}

#agency {
	margin:40px 0 40px 60px;
	text-align: center;
}

.agency {
	font-family:Gotham, Sans-serif;
	font-size:1.5vmin;
	line-height:1.4em;
	padding:0 40px;
	font-weight:200;
}

.agencyheader {
	font-family:Gotham, Sans-serif;
	font-size: 1.8vmin;
	line-height: 2em;
	font-weight:400;
}

.videoL {
	vertical-align:middle;
	padding:25px 25px 10px 25px;
	letter-spacing:.05em;
	font-family:Gotham, Sans-Serif;
	font-weight:100;
	line-height:1.1em;
	float: left;
	clear: both;
}

.videoR {
	vertical-align:middle;
	padding:25px 25px 10px 25px;
	letter-spacing:.05em;
	font-family:Gotham, Sans-Serif;
	font-weight:100;
	line-height:1.1em;
}

.videoC {
	vertical-align:middle;
	padding:25px 25px 10px 25px;
	letter-spacing:.05em;
	font-family:Gotham, Sans-Serif;
	font-weight:100;
	line-height:1.1em;
	clear:both;
}

#resume {
	width:100%; 
	position:relative; 
	display:inline-block; 
	margin-left:90px;
	padding:15px 0;
	line-height:1.3em;
	font-family:Gotham, sans-serif;
	font-weight: 300;
	font-size:1em
}
.title {
	float:left;
	width: 33%;
	text-align:left;
	padding-left:20px
}

.part {
	float:left;
	width: 23%;
	text-align:left
}

.director {
	float:left;
	width: 25%;
	text-align:left
}

.resume {
	text-align:left;
	font-weight:700;
	font-size:1.7em;
	line-height:1.5em;
}

#download {
	font-family:'Raleway-light', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
	padding-bottom:20px;
	font-weight:200;
}

#reelcontainer {
	margin:20px 0 0 20px;
}


/* Contact form CSS */

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
	font-family:gotham, sans-serif;
	font-weight:300;
}

#form {
	Clear: both;
	padding: 20px 0 20px 100px;
}

form {
    margin:0 auto;
    width:460px;
}

/* Style the text boxes */
input {
    width:80%;
    height:27px;
    background:#ffffff;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
	font-family:'Raleway-light', sans-serif;
}

textarea {
    width:80%;
    height:100px;
    background:#ffffff;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
	font-family:'Raleway-light', sans-serif;
}

input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

#submit {
    width:125px;
	height: 45px;
    background:url(images/submit.png);
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}

	#submit:hover {
	    opacity:.9;
	}


/* Audio */

audio {
	width:200px;
}

#audio {
	margin:40px auto;
	width:100%;
	margin-left:40px;
	position:relative;
	display:block
}

.audio {
	padding:10px;
	float: left;
}

.audio p {
	font-family:Gotham, Sans-serif;
	font-size:1em;
	line-height:1.3em;
	font-weight:200;
	padding-top:7px;
}

.credits {
	clear: both;
	width: 80%;
	display:black;
	position:relative;
	margin:0 0 15px -40px;
	font-size: 1.25vw;
	line-height:1.4em;
	font-family: Gotham, Sans-serif;
	font-weight:200;
	padding-top:10px
}

.creditsV {
	clear: both;
	width: 80%;
	display:black;
	position:relative;
	margin:0 auto;
	font-size: 1.25vw;
	line-height:1.4em;
	font-family: Gotham, Sans-serif;
	font-weight:200;
	padding-top:10px
}
	
	
.my-gallery {
  width: 100%;
  float: left;
  padding-bottom:20px;
}
.my-gallery img {
  width: 100%;
  height: auto;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}

	

/*MEDIA QUERY*/
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

.collapse {
	display:none !important;
}

.expand {
	width:100% !important;
	margin: 0 auto;
	display:inline-block;
	padding-bottom: 20px
}


#headline {
	font-size:8vw;
	font-family:'Raleway-thin', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
	padding:0;
}

section {
	margin: 60px 0;
	width:100%;
	display:block;
}

iframe {
	width:100%
}

#name {
	font-size:35px;
	letter-spacing:.1em;
	color:#ffffff;
	font-family:'Raleway-light', San-Serif;
	z-index:100;
	text-shadow:6px 6px 15px #808080;
	text-align: right;
	vertical-align:baseline;
	text-transform:uppercase
}

.name {
	position: relative;
	z-index:100;
	vertical-align:baseline;
	bottom: 0;
	margin-top:82%
}

header {
		position: absolute;
	}
	
#pageheader {
	width: 100%;
	position: fixed;
	background-color:#ffffff;
	top: 0;
	left: 0;
	z-index: 100;
	height:50px;
	border-bottom: 1px solid #4d5459;
}

#pagename{
	margin:10px 20px;
	float: left;
	height: 40px;
	display: block;
	font-size:2em;
	font-family:'Raleway-thin', San-Serif;
	letter-spacing:-.025em;
	color:#4D5459;
}

#menu-icon {
		display:inline-block;
	}

nav {
	float: right;
}

nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 8px;
		background: #fff;
		right: 50px;
		top: 10px;
		width: 20%;
		border-radius: 7px 0px 0px 7px;
	}

nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
		font-weight:bold;
	}

nav:hover ul {
		display: block;
	}
	
a {
	color:#4d5459;
}

#footer {
	position: absolute;
	vertical-align:baseline;
	width:100%;
	height: 4vw;
	bottom:0px;
	right:2vw;
	text-align: center;
	font-family:Gotham, sans-serif;
	font-size: 0;
	z-index:100;
}

/* Reel */

#reelcontainer {
	margin-left:0px
}

.video {
	vertical-align:middle;
	text-align:center;
	padding:10px 0 30px 0;
	letter-spacing:.05em;
	font-family:Gotham, Sans-Serif;
	font-weight:100;
	line-height:1.3em;
	clear: both;
	width:99%;
}

/* Resume */

#resume {
	width:100%; 
	position:relative; 
	display:inline-block; 
	margin-left:0px;
	padding:15px 0;
	line-height:1.3em;
	font-family:Gotham, sans-serif;
	font-weight: 300;
	font-size:1.8vw
}

/* Contact */

input {
    width:80%;
    height:20px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

textarea {
    width:80%;
    height:70px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

form {
    margin:0 auto;
    width:80%;
}

#contact {
	margin:0px auto;
	width:100%
}

.contact {
	font-family:Gotham, Sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	font-weight:300;
}

.agencyheader {
	font-family:Gotham, Sans-serif;
	font-size: 18px;
	line-height: 1.3em;
	font-weight:400;
}

.agency {
	font-family:Gotham, Sans-serif;
	font-size:16px;
	line-height:1.5em;
	padding:0 20px;
	font-weight:200;
}

#links {
	margin: 10px 20px;
}

.links {
	font-family:Gotham, Sans-serif;
	font-size: 18px;
	line-height: 1.5em;
	font-weight:300;
}

#testimonial {
	margin: 10px 20px;
}

.testimonial {
	font-family:Gotham, Sans-serif;
	font-size: 18px;
	line-height: 1.5em;
	font-weight:300;
	text-indent:-2px;
	text-align:left;
}

#biobuttons {
	margin:20px 0 30px 0;
}


.biobuttonimg {
	width:35%;
	padding:5px;
}

.bio {
	font-family:Gotham, Sans-serif;
	font-size: 18px;
	line-height: 1.5em;
	font-weight:300;
	text-align:left;
}


/* Audio */

audio {
	width:200px;
}

#audio {
	margin:20px 0;
	width:100%;
	position:relative;
	display:block;
}

.audio {
	width:100%;
	padding:10px;
	clear: both;
	text-content:center;
}

.audio p {
	font-family:Gotham, Sans-serif;
	font-size:1em;
	line-height:1.3em;
	font-weight:200;
	padding-top:7px;
}

.credits {
	clear: both;
	width: 100%;
	display:black;
	position:relative;
	margin:0 auto;
	font-size: 12px;
	line-height:1.4em;
	font-family: Gotham, Sans-serif;
	font-weight:200;
	padding-top:10px;
	padding-bottom:10px;
}

#form {
	Clear: both;
	padding: 20px 0 20px 20px;
}

form {
    margin:0 auto;
    width:400px;
}

}
/* Fonts */

@font-face {
		font-family: 'Raleway-Regular'; 
		src: url(fonts/Raleway-Regular.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-Light'; 
		src: url(fonts/Raleway-Light.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-ExtraLight'; 
		src: url(fonts/Raleway-ExtraLight.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-Mediaum'; 
		src: url(fonts/Raleway-Medium.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-SemiBold'; 
		src: url(fonts/Raleway-SemiBold.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-Thin'; 
		src: url(fonts/Raleway-Thin.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-Bold'; 
		src: url(fonts/Raleway-Bold.ttf) format('truetype');
}
@font-face {
		font-family: 'Raleway-ExtraBold'; 
		src: url(fonts/Raleway-ExtraBold.ttf) format('truetype');
}