/**************************************************
Design and development of Kill Your Darlings site
by Noah Kim on behalf of Mixed Media Workshop
**************************************************/

/* Global */
html, body {
	position:relative;
}

body {
	font-family: proxregular, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #fff;
	background: url(../img/bg_map.jpg)#000 fixed top center repeat;
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
}
a:link {
	color: #ecb42b;
	text-decoration: none;
}
a:hover {
	color: #b88404;
	text-decoration: none;
}
a:visited {
	color: #ecb42b;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	font-family: proxextra, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #fff;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	text-align: center;
	font-weight: 100;
}
h1 {
	font-size: 4em;
	letter-spacing: .3em;
	padding-bottom: 1em;
}
h2 {
	font-size: 2em;
	font-family: proxbold, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.next {
	text-align: center;
}

::-webkit-scrollbar {
 width: 20px;
}
 
::-webkit-scrollbar-track {
 background:#d4c3ad;
}
 
::-webkit-scrollbar-thumb {
 background:#b09c82;
}

#inline_content {
	background:#fff;
}
/* Navigation */

.navcontainer {
	width: 100%;
	background: url(../img/bg_nav.jpg) top center repeat-x;
	height: 55px;
	position: fixed;
	border-bottom: 8px solid rgba(0, 0, 0, .2);
	z-index: 500;
}
.navigation, .navigation li a {
	font-family: proxextra, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #382718;
	text-transform: uppercase;
	font-size: 1.1em;
	text-align: center;
	text-shadow: 0px 1px 0px #ebebeb;
	filter: dropshadow(color=#ebebeb, offx=0, offy=1);
	z-index: 5000;
}
ul.navigation {
	width: 100%;
}
.navigation li {
	cursor: pointer;
	list-style: none;
	float: left;
	display: block;
	margin-left: 15px;
}

.billingblock {
	width:100%;
	clear:both;
}
/* Slides Global */ 

.slide {
	background-attachment: fixed;
	width: 100%;
	height: auto;
	position: relative;
	padding: 80px 0;
	min-height: 700px;
}
/* Slide Home */ 

#home {
	background: url(../img/bg_main.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	min-height:550px;
}
.homeleft {
	float: left;
	display: block;
	width: 27%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.homeleft img {
	z-index:1000;
}
.homeright {
	float: right;
	display: block;
	width: 27%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index:0;

}
.homeright img {
	float: right;
}

.laurels {
	text-align:center;
	padding:1em 0 1em 0;
	margin:0 auto;
	clear:both;
	background:#000;
}

.hometitle {
	color: #fff;
	padding: 4em 0 0 0;
	height: 16.438em;
	background: url(../img/home_title.png) top center no-repeat;
	text-align: center;
}
.hometitle h1 {
	font-size: 4em;
	letter-spacing: 0em;
	padding-bottom: 0;
}
.subtitle {
	width: 100%;
	height:40px;
	background: #dfa619;
	padding:1em 0 0 0;
	margin-top:-5px;
	text-align: center;
	-webkit-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, .2);
	box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, .2);
}

.subtitle h4 {
	font-size: 1em;
	width: 50%;
	display: block;
	margin: 0 auto;
	position: relative;
}

.homecast {
	margin:0 auto;
	width:300px;
}

.homecast ul {
	margin:0;
	padding:0;
}

.homecast ul li {
	padding: 0;
	margin:0 0 .5em 0;
	list-style:none;
}

.homecast ul li span {
		background: #000;
		padding:.5em;

}
.opening h3 {
	padding: 1em 0 1em 0;
}

.social {
	width:150px;
	height:50px;
	position:absolute;
   bottom:0;
	z-index:1000;
}

.social div {
	width:33%;
	float:left;
	margin:0 auto;
}

.storelinks {
	text-align:center;
}

.storelinks ul {
	float:right;
	margin:0;
	padding:0;
}

.storelinks ul li {
	margin:0;
	padding:0;
	list-style:none;
	width:120px;
}

.boxart {
	float:left;
	width:120px;
}

.nowavailable {
	clear:both;
	padding:1em 0 1em 0;
}
/****************** Synposis Slide 1 *********************/ 

#slide1 {
	background: url(../img/bg_synopsis.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	min-height: 900px;
	border-bottom:10px solid #000;
}
.textarea {
	box-sizing: border-box;
	background: url(../img/bg_synopsis_text.jpg) top center;
	padding: 2em;
	margin: 0 auto;
	width: 70%;
	height: 550px;
	font-size: .8em;
	color: #000;
	font-family: "Courier New", Courier, monospace;
	line-height: 1.8em;
	overflow: scroll;
	overflow-x: hidden;
}
.textarea a {
	background: #ecb42b;
	color: #000;
}
.textarea a:hover {
	background: #000;
	color: #ecb42b;
}
.synopsisleft {
	position: absolute;
	width: 30%;
	bottom: 0;
	left: 0;
	float: left;
}
.synopsisright {
	position: absolute;
	width: 30%;
	bottom: 0;
	right: 0;
	float: right;
}
.synopsisright img {
	float: left;
}
.synopsisleft img {
	float: right;
}
/***************** Cast Slide 2 ********************/ 

#slide2 {
	background: url(../img/bg_map.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	min-height: 900px;
}
.castthumb {
	margin-right: .8em;
}
.castthumb img {
	display: block;
	margin-bottom: 1em;
	-webkit-box-shadow: 0px 40px 40px 0px,, 0, .5);
	box-shadow: 0px 40px 40px 0px,, 0, .5);
}


.castcontent {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	float:right;
	background:#fff;
	min-height:400px;
}

.castcontent img {
	float:left;
	margin-right:1em;
	width:50%;
}

.castactor {
	background:#000;
	color:#dfa619;
	padding:1em;
	text-transform:uppercase;
}

.castcharacter {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	color:#000;
	padding:1em;
	text-transform:none;
}

.castcharacter h2 {
	font-size:3em;
	text-align:left;
	line-height:.8em;
	color:#000;
	margin:0;
}

.castname {
	padding:.5em 1.5em .5em .5em;
	background:url(../img/bg_cast_name_2.png) top right no-repeat;
	color:#000;
	float:left;
	bottom:0;
	left:0;
	position:absolute;
	text-transform:uppercase;
	font-size:.8em;
}
.castname2 {
	padding:.5em 1.5em .5em .5em;
	background:url(../img/bg_cast_name.png) top right no-repeat;
	color:#000;
	float:left;
	bottom:0;
	left:0;
	position:absolute;
	text-transform:uppercase;
	font-size:.8em;
}
.castname span, .castname2 span {
	display:block;
	font-family:proxextra, Helvetica Neue, Helvetica, Arial, sans-serif;
}
/********************** Filmmakers Slide 3 ********************/ 
#slide3 {
	background: url(../img/bg_main.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	min-height: 900px;
}
.couch {
	width: 100%;
	position: absolute;
	text-align: right;
	bottom:50px;
	display: block;
	float: left;
	z-index: 10;
}
.floor {
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: right;
	display: block;
	float: left;
}
.filmmakers {
	width: 100%;
	background: url(../img/bg_filmmakers.png);
	padding: 4em 0 6em 0;
	color: #000;
}

.filmmakers a span{
	color:#000;
}

.filmmakers a span:hover, .filmmakers a span:hover h6 {
	background:#000;
	color:#dfa619;
}
.filmmakers span {
	display: block;
	width: 20%;
	float: left;
	text-transform: uppercase;
	margin-bottom: 1em;
}
.filmmakers span h6 {
	text-align: center;
	font-family: proxregular, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 1.1em;
}
.filmmakers span p {
	font-size: .8em;
	font-family: proxbold, Helvetica Neue, Helvetica, Arial, sans-serif;
	text-align: center;
	padding: 0;
	margin: 0;
}
/********************** Production Slide 4 ********************/ 
#slide4 {
	background: url(../img/bg_production_notes.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
	min-height: 900px;
}

.accordion dd::-webkit-scrollbar-track {
	background:none;
}

.accordion dd::-webkit-scrollbar-thumb{
	background:rgba(0,0,0, .4);
}
.accordion {
	position : relative;
}
.accordion dd {
	padding: 1em 2em 1em 0;
	margin: 0;
	line-height: 1.5em;
	max-height:400px;
	overflow: scroll;
	overflow-x: hidden;
	width:100%;
}
.accordion dt {
	background: rgba(0, 0, 0, .4);
	display: block;
	width: 100%;
	margin: 0 0 1px 0;
	padding: 1em;
}
.accordion dt:hover {
	background: #daa628;
}
.accordion dt:hover a {
	color: #000;
}
.accordion dt a {
	color: #daa628;
	font-family: proxbold, Helvetica Neue, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
.accordion a {
	color: #daa628;
}


.policy {
	display:block;
	font-size:.8em;
	text-transform:uppercase;
	float:right;
	padding:.5em;
	text-align:right;
	background:#000;
}
/********************** Historical Notes Slide 5 ********************/ 
#slide5 {
	background: url(../img/bg_gallery.jpg) no-repeat top center fixed;
	background-position: 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
/********************** Gallery Slide 6 ********************/ 
#slide6 {
	
	height: 1300px;
}

.gallerythumb {
	box-sizing: border-box;	
	border:5px solid #fff;
	margin:0;
	padding:0;
	position:relative;
	background:#000;
}
/********************** Trailer slide 7 ********************/ 

#slide7 {
	background: #000;
}
.trailer {
	min-height: 400px;
}


/********************** Reviews Slide 8 ********************/ 


/************* Masonry *********/

.item {
	width:220px;
	margin-bottom:1em;
	margin-right:1em;
	float:left;
	display:block;
}

/******** Black and White Photo **************/

.bwWrapper {
    position:relative;
    display:block;
}


/* Tablet */
@media screen and (max-width: 1024px) {
.slide {
	background-attachment: fixed;
	width: 100%;
	position: relative;
	padding: 50px 0;
	min-height: 400px;
}
.homeright, .homeleft {
	width: 35%;
}

.hometitle img {
	width:50%;
}
#content {
	text-align: center;
	width: 100%;
}
.textarea {
	width: 60%;
	padding: none;
}

.homecast {
	margin:0 auto;
	width:300px;
	font-size:.9em;
}

.laurels {
	padding-top:3em;
}

.castcontent img {
	display:none;
}
.navcontainer {
	width: 100%;
	background: url(../img/bg_nav.jpg) top center;
	height: 80px;
	position: fixed;
	z-index: 1000;
	border-bottom: 8px solid rgba(0, 0, 0, .2);
}

.social {
	width:30%;
	padding:1em;
	margin:0 auto;
	position:absolute;
   bottom:0;
   left:0;
	z-index:1000;
}

.storelinks ul li img {
	width:70%;
}

.storelinks ul li {
	margin:0;
	padding:0;
	list-style:none;
	display:list-item;
	width:150px;
}

.columnleft {
	width:200px;
	float:left;
}

.columright {
	width:200px;
}

.homecastcontainer {
	width:400px;
	margin:0 auto;
}

.boxart img {
	width:100%;
}
}


/* Mobile */
@media screen and (max-width: 480px) {
.slide, #home {
	background-attachment: fixed;
	width: 100%;
	position: relative;
	padding: 150px 0;
	min-height: 400px;
}
.homeright, .homeleft {
	width:30%;
}

.hometitle img, .subtitle {
	width:100%;
}

.textarea {
	width: 60%;
	padding: none;
}
.navcontainer {
	width: 100%;
	background: url(../img/bg_nav.jpg) top center;
	height: 90px;
	position: fixed;
	z-index: 1000;
	border-bottom: 8px solid rgba(0, 0, 0, .2);
}

.social {
	width:30%;
	padding:0;
	position:absolute;
   top:7em;
	z-index:1000;
}
.castcontent img {
	display:none;
}

.boxart {
	display:none;
}

.storelinks ul{
	width:85%;
}

.storelinks ul li{
	width:200px;
	text-align:center;
}
.storelinks ul li img {
	width:65%;
	margin:0 auto;
}

.homecast {
	font-size:.8em;
}
}