@charset "UTF-8";

html, body {
    margin: 0;
    padding: 0;
  }
  .noscroll {
	overflow: hidden;
}
	.headerImageWide {
		display: none;
	}
.body_content a:link, 
.body_content a:visited, 
.body_content a:active {
    color: #393939;
	text-decoration: none;
}
.body_content a:hover {
    color: #393939;
	text-decoration: underline;
}
.body_content2 a:link, 
.body_content2 a:visited, 
.body_content2 a:active {
    color: #393939;
	text-decoration: none;
}
.body_content2 a:hover {
    color: #393939;
	text-decoration: underline;
}
.filler {
  height: 50px;
  background-color: #17A857;
  min-height: 50px;
  width: 100%;
}
#playlist,audio{width:480px;padding:0px;}
#playlist2,audiox{width:480px;padding:0px;}

li a{color:rgba(255,255,255,.8); text-decoration:none;}
li a:hover{color:rgba(255,255,255,.8); text-decoration:underline;}
li a:visited{color:rgba(255,255,255,.8); text-decoration:none;}

.active a{color:#323232; text-decoration:underline;}

#audioplayer{
	width: 480px;
	height: 60px;
	margin: 10px auto auto auto;
  border: solid 1px;
  border-radius: 15px 0 15px 0;
}
#audioplayer{
	width: 480px;
	height: 60px;
	margin: 10px auto auto auto;
  border: solid 1px;
  border-radius: 15px 0 15px 0;
}
#pButton{
    height:60px; 
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
}
.play{background: url('../images/play.png') ;}
.pause{background: url('../images/pause.png') ;}
.play2{background: url('../images/play-white.png') ;}
.pause2{background: url('../images/pause-white.png') ;}

#timelineb{
	width: 400px;
	height: 20px;
	margin-top: 20px;
	float: left;
	border-radius: 15px;
	background: rgba(0,0,0,.3); 
}
#timelineb2{
	width: 400px;
	height: 20px;
	margin-top: 20px;
	float: left;
	border-radius: 15px;
	background: rgba(255,255,255,.3); 
}
#playhead{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(0, 0, 0,1);
}
#playhead2{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(255, 255, 255,1);
}
.container2 {
    background-image: url(../images/backing.jpg);
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.container {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px; 
    z-index: 1;
}
.darkhearder {
    opacity: 0.5;
}
.main {
    max-width: 60em;
    margin-left: 20px;
    width: 95%;
    z-index: 2;
    position: relative;
    margin-top: 200px;
    color: #100d11;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.headshot{
	width: 45%;
	position: absolute;
	right: 0px;
	bottom: -10px;
	border: 0px;
	text-align: right;
	z-index: 2;
}
.navigation{
  width: 60px;
  height: 130px;
  position: fixed;
  right: 30px;
  bottom: -10px;
  z-index: 400;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 16px;
  display: none
}
.tobehidden{
	display: none;
}
.footerImage{
    width: 100%;
    max-width: 600px;
}
.headerImage {
    max-height: 220px;
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
	display: none;
}
.headerImageWide {
    max-height: 220px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
	display: none;
}
.headerImageMid {
    max-height: 220px;
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
	display: none;
}
.headerImageMobile {
    max-height: 220px;
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
	display: block;
}
.clamped--top {
	top: 0;
	left: 0;
	right: 0;
	padding: 0px;
	padding-top: 0px;
	z-index: 2;
	position: fixed;
}
.clamped--bottom {
    bottom: 0;
    z-index: 2;
    position: absolute;
}
.clamped--fixed {
    position: fixed
}
.body_content, .body_content2 {
  margin-top: 30px;
  margin-left: 30px;
	margin-bottom: 30px;
}
.timeline-top {
    height: 40px;
    width: 150px;
    margin-left: -150px;
    border-top: 2px solid #434343;
    border-right: 2px solid #434343;
    border-radius: 0px 30px 0px 30px;
}
.timeline-bottom {
    height: 40px;
    width: 150px;
    margin-left: -150px;
    border-bottom: 2px solid #434343;
    border-right: 2px solid #434343;
}
.timelinelable {
  margin-left: auto;
  margin-right: auto;
  width: 40px;
}
.year {
  background-color: #A9A3A3;
  height: 20px;
  width: 40px;
  line-height: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #434343;
}
.circle {
    width: 10px;
    height: 10px;
    margin-left: -4px;
    margin-top: -10px;
    margin-bottom: -2px;
	display: none;
}
.timelinebox {
    width: 0%;
    left: 0px;
    max-width: 590px;
    position: absolute;
    margin-top: -40px;
}
fieldset {
    border: 1px solid #434343;
    height: 130px;
	margin-left: 40px;
}
.timelinetitle {
  margin-top: -10px;
  margin-left: -2px;
}
.circle-line {
    margin-top: -28px;
    width: 30px;
    height: 12px;
    background-color: #A431BA;
    margin-left: 0px;
}
.timelinepoint {
    margin-top: -12px;
    width: 15%;
    min-width: 60px;
    height: 12px;
}
.timelinepop {
  margin-top: 60px;
  margin-left: 5%; 
  width: calc(80% + 0px); 
  max-width: 732px; 
  min-width: 400px;
}
.fieldsetclass{
  height: 400px; 
  width: calc(100% - 60px); 
  max-width: 700px; 
  border: 2px solid #ffffff; 
  border-radius: 15px 0 15px 0;  
  padding-top: 30px; 
  display: inline-block; 
  top: 0px; 
  padding-bottom: 20px;
}
.fieldsetlegend {
  font-size: 30px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.videobox{
  height: auto; 
  margin-top: 20px;
}
.pointer {
  width: 25px;
  height: 12px;
}
.timelinecontainer {
  background-color:hsla(0,0%,0%,0.65);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 500;color: #FFFFFF;
}
.timeline_container{
	  display: block;
}
.timeline-top, .timeline-bottom {
	  display: none;
}
.timeline_container_mobile{
	  display: block;
}
.whitestaves {
  width: 100%;
}
.close{
  position: absolute;
  top: 30px;
  left:30px;
  cursor:pointer;
  float: left;
}
.close-mobile {
  position: absolute;
  top: 15px;
  left:15px;
  cursor:pointer;
  float: left;
}
.media {
  position: absolute;
  top: 240px;
  left:70px;
}
.audio {
  position: fixed;
  right: 0px;
  top: 0px;
  z-index: 500;
}
.button {
  width: 48px;
  height: 48px;
  cursor: pointer;
  &:hover {
    fill: white; 
  }
}
.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
iframe {
  float: left;
  width: 350px;
  height: 300px;
  margin-left: 66px;
}
.buttons {
  padding: 1rem;
  background: #f06d06;
  float: left;
}
.audio {
position: fixed;
top: 0px;
left: 0px;
	display: none;
}
.content {
    margin: auto;
    max-width: 1920px;
    text-align: left;
    display: inline-block;
    background-color: hsla(359,81%,46%,0.00);
}
table 
{
    width: 1460px;
}
.whitebox {
    width: 300px;
    height: 40px;
    font-size: 22px;
    font-weight: 300;
    color: #93918e;
    border: 1px solid #000000;
    border-radius: 0px 15px;
    background-color: rgba(255,255,255,0.58);
}
.submitbutton{
    width: 100px;
    height: 40px;
    font-size: 22px;
    font-weight: 300;
    color: #93918e;
    border: 1px solid #000000;
    border-radius: 0px 15px;
    background-color: rgba(255,255,255,0.58);
}
.imdb{
	margin-left: 70px
} 
.whitebox2 {
    width: 320px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 300;
    color: #93918e;
    border: 1px solid #000000;
    border-radius: 0px 15px 15px;
    background-color: rgba(255,255,255,0.58);
}
.container3 {
    overflow:hidden;
    height: 210px;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
}
.timeline {
    background-color: #434343;
    height: 40px;
    width: 0px;
}
.timeline2 {
    background-color: #434343;
    height: 120px;
    width: 0px;
}
.timelinebottoms 
{   
	width: 100%; 
	height: 0px;
}
.video-responsive iframe{
    left:0;
    top:0;
    width:50%;
    height: 50%;
    position:absolute;
}
.one {
  position: relative;
  padding-top: 12px;
  padding-left: 12px;
  top: 0;
  width: 38px;
  height:38px;
  margin-left: 15px;
  margin-top: 15px;
  z-index: 1;
  cursor: pointer;
  border: 1px solid #000000;
}
.two {
    position: relative;
    top: -250px;
    left: 80px;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
.youtube {
width: 560;
height: 315;
}
/*.one:hover + .two {
    top: 0px;
}*/
.demo-container {
	padding:0 20px;
	font-family: "Myriad Pro Regular","Trebuchet MS";
  border: 1px solid #000000;
  border-radius: 15px 0 15px 0;
}
.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
	
}
.demo-container ul {
	list-style-type:none;
	padding:0;
	margin:1em 0;
	width:100%;
	overflow:hidden;
}
.demo-container ul span {
	color: #A0A600;
}
.demo-container li {
	float:left;
	margin-right:1em;
}
.demo-container p span.track-name {
	color: #CC0090;
}
/* warning notice */
main::before {
    display: block;
    font-size: 150%;
    content: 'This browser doesn\'t support `position: sticky` or `@supports` rules';
    color: red;
    padding: 2em 0;
  }
@supports (position: sticky) or (position: -webkit-sticky) {
  main::before {
      content: none;
  }
  .clamped--sticky {
      position: -webkit-sticky;
      position: sticky;
      z-index: 2;
  }
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {font-family: 'open sans';}

*, *:before, *:after {box-sizing:inherit;}

/* SIDEBAR NAVIGATION */

.dot {display:inline-block; width:10px; height:10px; background-color:rgba(255,255,255,.3); border-radius:10px; z-index:999; content:''; color:transparent; font-size:14px; line-height:10px; vertical-align:middle; margin:5px 0 5px 0; font-weight:300;text-align: right;}
.dot:hover {background-color:rgba(255,255,255,.8); color:rgba(255,255,255,.8);}
.dot span {margin:0px 0px 20px 15px; position:relative; top:0px; left:-20px;text-align: right;text-align: right; list-style-position: inside; float: right;
clear: both;}
nav {width:100px; height:200px;/*background-color:rgb(240,240,240); border:solid 1px rgb(220,220,220);*/ padding:0 0px; position:relative; top:80px; left:-40px; transform: translate(0, -50%); z-index: 10000; text-align:right;}
nav ul li a {text-decoration:none; text-align: right;}
nav ul {list-style-type:none; margin:0; padding:0; text-align: right;}
.name-active {color:rgba(255,255,255,.5); background-color:#ececed; text-align:right;}

/* PAGE CONTENT */
.content {width:100%; text-align:justify;}
section {padding:0 0 20px 0;}
section:last-child {padding:0 0 100px 0;}
.title {
    font-size: 24px;
    text-transform: uppercase;
    padding: 0 0 0px 0;
    color: #ECECED;
}
p {margin:0; padding:0px 0 0px 0;}
#thankyou {
display: none;
}
.popupcontainer {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    border-top-right-radius: 30px;
	background-color: #1d1d1d;
    border-bottom-left-radius: 30px;
    border: 2px solid rgba(255,255,255,1.00);
	color: white;
}
.whitestaves {
	position: relative;
}
.legend {
    background-color: #1d1d1d;
    position: relative;
	width: auto;
	display: inline-block;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	padding-right: 6px;
	padding-left: 6px;
	color: white;
}
.blurb {
    position: relative;
	display: inline-block;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	margin-right: 20px;
	width:860px;
}
legend{
    font-weight: normal;
    font-size: 24px;
}
.timelinepop, .close, .whitestaves, .popupcontainer {
	display: none;
}


/* START OR RESPONSIVE LAYOUT STYLES 


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation: landscape) {   
/* Styles */
.headerImageMid, .audio, .navigation, .footerImage, .timeline_container{
    display: inherit;
    }
 .headerImageMobile {
    display: none;
	}
.headerImage {
    display: block;
	}
.headshot{
    width: 35%;
    display: none;
	}
.title{
    font-size: 18px;
	}
.main{
    font-size: 10px;
    margin-left: 20px;
    width: 110%;
    margin-top: 90px;
    }
.whitebox{
    height: 26px;
    font-size: 16px;
    width: 200px;
	}
.whitebox2{
    font-size: 16px;
    width: 200px;
    background-color: rgba(255,255,255,0.58);
	}
.body_content, .body_content2{
    margin-bottom: 15px;
    margin-top: 15px;
	}	
.submitbutton{
    width: 80px;
    height: 30px;
    font-size: 18px;
    background-color: rgba(255,255,255,0.58);
	}
.timelinepop {
    margin-top: 5px;
    margin-left: 1%; 
    width: 100%
	}
.fieldsetlegend {
    font-size: 24px;
    margin-left: 20px;
	}
.fieldsetclass {
    height: auto;
    width: calc(100% - 60px);
    border: 2px solid #ffffff;
    border-radius: 30px 0 30px 0;
    padding-top: 15px;
    display: inline-block;
    top: 5px;
    font-size: 10px;
    padding-bottom: 10px;
	}
.youtube {
    width: 56;
    height: 31;
	}
.close {
    top:10px;
    right: 47px;
	}
.popupcontainer {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    top: -30px;
	}
.blurb {
	width: 90%;
	margin-left: 5%;
	font-size: 12px;
	}
.legend {
    left: 20px;
    top: -16px;
	width: auto;
	font-size: 24px;
	}
.whitestaves {
	top: 400px;
	}
}
fieldset {
    border: 1px solid #434343;
    height: 100px;
    width: 180px;
	margin-left: 40px;
	}
.thumbnail {
    height: 71px;
    width: 136px;
    border: 1px solid #1D1D1D;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
	}
.timelinesub {
	width: 200px; 
	height: 100px; 
	max-height: 100px; 
	margin-left: 150px; 
	margin-top: -70px;
	}
.morebox {
	margin-left: 300px;
	margin-top: -83px;
	}
.pilotopenmain {
	z-index: 1000;
	cursor:pointer; 
	float: left; 
	margin-top: -130px;
	border-radius: 0 15px 0 15px;
	} 
.mobileheadshot {
	display: block;
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .filler {
    display: none;
  }
.legend {
    left: 20px;
    top: -30px;
	width: auto;
	font-size: 42px;
	}
.mobileheadshot {
    display: block;
  }
} 



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (orientation: landscape) {
  .headerImageMid {
    display: none;
  }
	.body_content2 {
		min-width: 600px;
	}
	.mobileheadshot {
    display: none;
  }
}




/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (orientation: portrait) {
.headerImageMid, .audio, .navigation, .tobehidden, .timeline_container{
    display: block;
    }
.body_content2 {
		min-width: 600px;
	}
.main {
    margin-top: 410px;
	}
.headerImageMobile, .mobileheadshot {
    display: none;
    }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (orientation: landscape) {
.headerImageMid, .audio, .navigation, .tobehidden, .timeline_container{
    display: block;
    }	
.headerImageMobile, .timeline_container_mobile, .close-mobile, .newbox {
    display: none;
    }
.circle{
	display: block;
	}
.timelinepop, .close, .whitestaves, .popupcontainer {
	display: block;
}
.timeline-top, .timeline-bottom {
	display: block;
}
.timeline2 {
    width: 2px;
	height: 160px;
}
.timeline {

	}
.pilotopenmain {
	margin-top: -140px;
	} 
legend{
    font-weight: normal;
    font-size: 30px;
}
.timelinesub {
	width: 200px; 
	height: 100px; 
	max-height: 100px; 
	margin-left: 200px; 
	margin-top: -91px;
	}
.morebox {
	margin-left: 400px;
	margin-top: -63px;
	}
.thumbnail {
    height: 91px;
    width: 175px;
}
.timeline {
    background-color: #434343;
    height: 40px;
    width: 2px;
	}
.timelinebottoms {   
	width: 100%; 
	height: 60px;
	}
.thumbnail2{
	width:290px; 
	height: 150px;
	}
fieldset {
    border: 1px solid #434343;
    height: 130px;
    width: 440px;
    margin-left: 60px;
	}
 .main {
    max-width: 50em;
    margin-left: 20px;
    width: 55%;
    margin-top: 210px;
	color: #393939;
    }
  .body_content, .body_content2 {
	margin-bottom: 150px;	
	}
  .home_container, .about_container, .film_container, .contact_container, .timeline_container, .music_container {
    min-height: 500px;
	}	
  .popupcontainer {
    height: 530px;
    width: 740px;
    margin-right: auto;
    margin-left: auto;
    top: -150px;
	}
.whitestaves {
    width: 110%;
    top: 400px;
	}
.legend {
    left: 20px;
    top: -20px;
	width: auto;
	font-size: 36px;
	}
.blurb {
    position: relative;
    left: 20px;
    top: -0px;
	font-size: 18px;
	margin-right: 20px;
	margin-left: 0px;
	width: 400px;
}
.media2{
	margin-top: 100px;
	}
.popupcontainer {
    top: -80px;
	}
.reelcrafter-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 109px; 
	margin-top: 100px;
	}
.video-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 109px; 
	margin-top: 100px;
	}
.reelcrafter-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: -60px; 
	margin-top: 100px;
	}
.video-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: -60px; 
	margin-top: 00px;
	float: left;
	}
fieldset {
    border: 1px solid #434343;
    height: 130px;
    width: 335px;
	margin-left: 40px;
	}
} 





/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 960px) {
.headerImageMid {
    display: none;
  }
  .headerImage {
    display: block;
  }
.main {
   
	font-size: 20px;
    }
.title {
	font-size: 34px;
	}
.body_content, .body_content2 {
	margin-left: 60px;
	}
fieldset {
	margin-left: 130px;
	}
.reelcrafter-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 109px; 
	margin-top: 100px;
	}
.reelcrafter-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: -60px; 
	margin-top: 100px;
	}
.popupcontainer {
    top: -100px;
	}
} 






/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
fieldset {
	margin-left: 180px;
	}
.body_content, .body_content2 {
	margin-left: 110px;
	}
.popupcontainer {
    height: 600px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    top: -200px;
	}
.whitestaves {
    width: 110%;
    top: 400px;
	}
.legend {
    left: 20px;
    top: -20px;
	width: auto;
	font-size: 36px;
	}
.blurb {
    position: relative;
    left: 20px;
    top: -0px;
	font-size: 22px;
	margin-right: 20px;
	width: 486px;
	}
.thumbnail2{
	width:340px; 
	height: 176px;
	}
.media2{
	margin-top: 230px;
	}
.reelcrafter-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 209px; 
	margin-top: 100px;
	}
.reelcrafter-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 0px; 
	margin-top: 100px;
	}
.video-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 209px; 
	margin-top: 100px;
	}
.video-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 0px; 
	margin-top: 00px;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1476px) {
.headerImageWide {
	display: block;
	}
	.imdb{
	margin-left: 90px;
} 
.headerImage {
    display: none;
  }
fieldset {
	margin-left: 200px;
	}
.reelcrafter-solo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 209px; 
	margin-top: 100px;
	}
.reelcrafter-duo { 
	position: relative; 
	margin-right: 0px; 
	margin-left: 0px; 
	margin-top: 100px;
	}
}
.projectbox {
    height: 230px;
    width: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.project_inner {
    border: 2px solid #1D1D1D;
    height: 280px;
    width: 280px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.project-label {
    position: relative;
    top: -10px;
    margin-top: -100px;
    font-size: 30px;
    width: auto;
    margin-left: 10px;
    display: inline-block;
}
.project-blurb {
    margin-left: 10px;
    height: 80px;
}
.project-thumbnail {

    border: 1px solid #1D1D1D;
    width: 170px;
    height: 88px;
}
/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation : landscape) { 
	.mobileheadshot {
    display: block;
  }
}
@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2) {

	.mobileheadshot {
    display: block;
  }
	  .headshot {display: none}

}