* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {width: 100%;}

body {
	background: #dadcd4 url('images/backgroundTexture.png') repeat;
	color: #3e3a37;
	font-family: ProximaNova-Regular, sans-serif;
	font-size: .93em;
}
a {text-decoration: none;}
h1 {
	font-family: Bicyclette-Bold, sans-serif;
	font-size: 1.125em;
	font-weight: normal;
	letter-spacing: .25em;
	text-transform: uppercase;
}
h2 {
	color: #3e3a37;
	font-family: Bicyclette-Bold, sans-serif;
	font-size: 2.25em;
}

.border-box {
	padding-top: 1.75em;
	padding-bottom: .4em;
	border: .93em solid #efefe7;
}

/* ===============================================
	Header
   =============================================== */
header {text-align: center;}
.logo {
	margin: 0 auto;
	width: 75%;
	box-shadow: 0 0 175px 10px rgba(255,255,255,.8);
}
.tag {width: 100%;}
.tag * {display: inline-block;}
.tag-text {padding: 0 .5em 0 .7em;}
.cinema-line {
	width: 25%;
	height: 1px;
	margin-bottom: .3em;
	background-color: #c0c0b9;	
}
#tag2 {
	margin-bottom: 0.3em;
	text-align: center;
}
#tag2 h1 {
	font-size: 0.93em;
	font-family: ProximaNova-Regular, sans-serif;
	font-weight: 100;
	letter-spacing: 0.1em;
	text-transform: none;
}
.stripes {
	width: 100%;
	height: 3.795em;
	background: url("images/stripes2x.png");
	background-size: auto 3.795em;
}

/* ===============================================
	Video Media
   =============================================== */

/* ---------- Video Player ---------- */
.player {width: 100%;}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	border-top: .93em solid #efefe7;
	border-bottom: .93em solid #efefe7;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Thumbnails ---------- */
.thumb-container {overflow: hidden;}
.thumbnail {
	display: inline-block;
	width: 25%;
	height: 125px;
	vertical-align: top;
	background-size: cover;
	background-position: center;
	color: white;
	text-align: center;
}
.thumbnail:nth-child(4n) { width: 26%; margin-right: -1%; } /* Safari partial pixel fix */
.thumbnail:hover {
	cursor: pointer;
}
.shadow-top {
	background-image: -webkit-linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,0) 40%);
	background-image: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,0) 40%);
}
.shadow-bottom {
	background-image: -webkit-linear-gradient(rgba(0,0,0,0)60%, rgba(0,0,0,.7));
	background-image: linear-gradient(rgba(0,0,0,0)60%, rgba(0,0,0,.7));
}
.table-div{
  display: table;
  width: 100%;
  height: 125px;
  padding: 0 .8em;
  background-color: rgba(65,58,43,.2);
  transition: background-color .3s;
}
.cell-div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Bicyclette-Bold, sans-serif;
  font-size: 1.3em;
  opacity: 0;
  transition: opacity .3s;
}
.selected .table-div,
.table-div:hover,
.table-div:active {background-color: rgba(55,48,33,.6)}

.selected .cell-div,
.table-div:hover .cell-div,
.table-div:active .cell-div {opacity: 1;}

/* ===============================================
	About
   =============================================== */
.about-box {
	overflow: auto;
	padding: 2em;
	margin: 3.25em auto;
	background: #efefe7;
	box-shadow: 0 0 1em -.3em rgba(152,148,137,.75),
				0 -3em 3em -3.5em rgba(152,148,137,1),
				0 3em 3em -3.5em rgba(152,148,137,1); /*box shadow, top shadow, bottom shadow*/
}
.portrait {
	float: left;
	width: 175px;
	border-right: 2em solid #efefe7;
	border-bottom: 5.9em solid #efefe7;
}
.about {
	vertical-align: top;
	padding-top: 1em;
}
.about-description {
	line-height: 2em; /* needs to be the same as background-size */
	background: -webkit-linear-gradient(rgba(0,0,0,0) 99%, #cccbc1 1% );
	background: -moz-linear-gradient(rgba(0,0,0,0) 99%, #cccbc1 1% );
	background: -o-linear-gradient(rgba(0,0,0,0) 99%, #cccbc1 1% );
	background: linear-gradient(rgba(0,0,0,0) 99%, #cccbc1 1% );
	background-size: 100% 2em; /* needs to be the same as line-height */
}
.contact {
	float: right;
	margin-top: 1.5em;
}
.email {
	padding: .5em 1.65em .35em;
	background: #83d8d8 url('images/email-btn.png');
	background-size: auto 2.5em;
	color: #fff;
	font: 1.2em Bicyclette-Bold, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
.p-number {
	margin-top: 1em;
	margin-right: -.2em;
	font-size: .95em;
	font-family: Bicyclette-Bold, sans-serif;
	letter-spacing: .24em;
}
.p-number a {color: #3e3a37;}

/* ===============================================
	Footer
   =============================================== */
footer {
	padding: 2em 0 1.8em;
	background: #efefe7;
	color: #a6a49b;
	font: .93em Affect-Bold
	text-transform: uppercase;
}
footer p {display: inline-block;}
footer .container {position: relative;}
.soc-icon {
	position: absolute;
	right: 0;
	top: -.7em;
	display: inline-block;
	margin-right: 1em;
	margin-left: auto;
	vertical-align: middle;
}
.soc-icon img {
	width: 2.47em;
	height: 2.47em;
	margin-right: .5em;
}
.soc-icon a:last-child {margin-right: 0;}



/* ===============================================
	Media Queries
   =============================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dppx) {
	body {background-size: 300px;}
	.grit-div {background-size: 187px;}
}

@media only screen and (max-width: 755px) {
	body {font-size: .8em;}
	.logo {width: 80%;}
	.about-box {margin: 2.7em auto;}
	.portrait {width: 150px; border-bottom: .5em solid #efefe7;}
	.contact {font-size: 1.1em;}
	.soc-icon {font-size: 1.15em; top: -.8em;}
}

@media only screen and (max-width: 655px) {
	body {font-size: .7em;}
	.about-box {padding: 1.7em;}
	.about {font-size: 1.2em;}
	.contact {font-size: 1.05em;}
	footer{padding: 2.3em 0 2.1em;}
	.soc-icon {font-size: 1.27em; top: -.89em;}

	/* Thumbnails break from 4 col to 2 col. */
	.thumbnail {width: 50%;}
	.thumbnail:nth-child(4n) {width: 50%; margin-right: 0;} /* Safari partial pixel fix */
	.thumbnail:nth-child(even) {width:51%;margin-right:-1%;} /* Safari partial pixel fix */
	.table-div {padding: 0 1em;}
	.cell-div {font-size: 1.6em;}
}

@media only screen and (max-width: 575px) {
	.logo {width: 85%;}
	.cell-div {font-size: 1.5em;}
	.about-box {padding: 1.5em;}
	.portrait {width: 140px;}
}

@media only screen and (max-width: 455px) {
	.logo {width: 90%;}
	.tag {font-size: 0.95em;}
	.cell-div {font-size: 1.3em;}
	footer p {width: 48%;}
	.soc-icon {top: 0;}
}