body {
  margin:0;
  padding:0;
	background-color:#353132;
	color:#0292b6;
	text-align:center;
	}
body, h1, h2, h3, a, p {
	font-family: "futura-pt", "Arial Black", Arial, sans-serif;
}
a, a:active, a:hover, a:visited {
	color: #0292b6;
	}
img {
  vertical-align:middle;
}

/* // SECTIONS // */

section {
  /*border-bottom:1px solid #333;*/
}

/* // HEADER // */

section#header {
  width: 100%;
  display: inline-block;
	background-color:#18161b;
  padding:0;
  height: 90px;
}
section#header .pagetitle {
  position:absolute;
  top:12px;
  left:20px;
  margin:0;
  padding:0;
  text-align:left;
  font-size:30px;
}
section#header .pagetitle a {
  text-decoration:none;
  color: #0292b6;
}
section#header .pagetitle span {
  display:block;
  margin: -5px 0 0 3px;
  font-size:18px;
}
section#header .contactinfo {
  position:absolute;
  top:45px;
  right:20px;
  font-size: 18px;
  text-decoration:none;
}

/* // VIDEO SECTION // */

section.video {
	text-align:center;
  margin:0;
  padding:10px 0 0 0;
}
section.video h1 {
  font-size:22px;
  text-align:left;
  margin-left: 10px;
}
section.video .videocontainer {
  max-width:1560px;
  margin:auto auto;
}
section.video input {
  display:none;
}
section.video .thumb {
  width:500px;
  height:280px;
  float:left;
  margin:10px;
  background-size:cover;
}
section.video .thumb .thumbover {
  width:100%;
  height:100%;
  opacity: 0;
  position: relative;
  text-align: left;
  cursor:pointer;
  background-size:cover;
}
section.video .thumb .thumbover .thumbtext {
  /*background-image: url('/2015/images/000000-65.png');*/
  width:460px;
  position:absolute;
  left:20px;
  bottom:15px;
  
}
section.video .thumb .thumbover h2, section.video .thumb .thumbover p {
  margin:0;
  padding:0;
  color:#fff;
  font-weight:normal;
}
section.video .thumb .thumbover h2 {
  font-size: 22px;
}
section.video .thumb .thumbover p {
  font-size: 15px;
}
section.video .thumb:hover .thumbover {
  opacity: 1;
  transition: opacity .6s ease-in-out;
  -moz-transition: opacity .6s ease-in-out;
  -webkit-transition: opacity .6s ease-in-out;
}

/* // REEL // */

#reel {
  padding:26px 0;
  background-color: #252122;
}
#reel .videocontainer {
  text-align:center;
}
#reel .thumb {
  width:800px;
  height:448px;
  float:none;
  margin:auto auto;
}
#reel .thumb .thumbover {
  opacity:1;
  text-align:center;
}
#reel .thumb .thumbover .thumbtext {
  width:800px;
  opacity:1;
  bottom:35%;
}
#reel .thumb .thumbover h2 {
  font-size: 32px;
}
#reel .thumb .thumbover p {
  font-size:25px;
}
#reel .thumb .thumbover:hover {
  background-image: url('/2015/images/thumbs/Directing Reel blurred.jpg');
}

/* // WATCH // */

#watch {
  width:100%;
  height:500px;
  background-size:cover;
}
#watch iframe {
  position:relative;
  top:26px;
  width:800px;
  height:448px;
}

/* // CONTACT // */

#contact {
  width:100%;
  height:290px;
  background-color: #252122;
  font-size:22px;
  position:relative;
  padding:40px 0 0 0;
}
input#contactlink {
  display:none;
}
#contactlink + label {
  cursor:pointer;
}


/* // FOOTNOTE // */

#footnote {
  padding:60px 0;
  text-align:center;
}
#footnote div {
  margin: auto auto;
  text-align:left;
  width:90%;
  max-width:900px;
}

/* // SCREEN WIDTH // */

@media screen and (max-width: 1670px) {
  
  section.video .videocontainer {
    max-width:1260px;
  }
  section.video .thumb {
    width:400px;
    height:224px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:360px;
  }
}

@media screen and (max-width: 1300px) {
  
  section.video .videocontainer {
    max-width:960px;
  }
  section.video .thumb {
    width:300px;
    height:168px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:260px;
  }
}

@media screen and (max-width: 1000px) {
  
  section.video .videocontainer {
    max-width:860px;
  }
  section.video .thumb {
    width:400px;
    height:224px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:360px;
  }
  #reel .thumb, #watch iframe {
    width:700px;
    height:392px;
    position:relative;
    left:-17px;
  }
  #watch {
    height:444px;
  }
}

@media screen and (max-width: 900px) {
  
  section.video .videocontainer {
    max-width:660px;
  }
  section.video .thumb {
    width:300px;
    height:168px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:260px;
  }
  #reel .thumb, #watch iframe {
    width:550px;
    height:308px;
  }
  #watch {
    height:360px;
  }
}

@media screen and (max-width: 700px) {
  
  section.video .videocontainer {
    max-width:520px;
  }
  section.video .thumb {
    width:500px;
    height:280px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:460px;
  }
  #reel .thumb, #watch iframe {
    width:500px;
    height:280px;
    left:0;
  }
  #watch {
    height:332px;
  }
}

@media screen and (max-device-width:750px) {

  section.video .thumb .thumbover {
    opacity: 1;
  }
}

@media screen and (max-width: 500px) {

	section#header {
		height:130px;
	}
	section#header .contactinfo {
		top:80px;
		right:10px;
	}

}

@media screen and (max-width: 550px) {
  
  section.video .videocontainer {
    max-width:420px;
  }
  section.video .thumb, #reel .thumb, #watch iframe {
    width:400px;
    height:224px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:360px;
  }
  #watch {
    height:277px;
  }
}

@media screen and (max-width: 450px) {
  
  section.video .videocontainer {
    max-width:320px;
  }
  section.video .thumb, #reel .thumb, #watch iframe {
    width:300px;
    height:168px;
  }
  section.video .thumb .thumbover .thumbtext {
    width:260px;
  }
  #watch {
    height:220px;
  }
}