/* TYPOGRAPHY */

	@font-face {
		font-family: chronicle_display_reg;
		src: url(../fonts/chronicledisplay-roman.otf);
		}
		
	@font-face {
		font-family: chronicle_display_italic;
		src: url(../fonts/chronicledisplay-italic.otf);
		}
		
	@font-face {
		font-family: chronicle_display_black;
		src: url(../fonts/chronicledisplay-black.otf);
		}
		
	@font-face {
		font-family: knockout_welterweight;
		src: url(../fonts/knockout-welterweight.otf);
		}
		
	@font-face {
		font-family: knockout_fullmiddleweight;
		src: url(../fonts/knockout-fullmiddlewt.otf);
		}
		
	@font-face {
		font-family: knockout_fullcruiserweight;
		src: url(../fonts/knockout-fullcruiserwt.otf);
		}
		
	@font-face {
		font-family: knockout_juniorflyweight;
		src: url(../fonts/knockout-juniorflyweight.otf);
		}
		
	@font-face {
		font-family: gibson_semibold;
		src: url(../fonts/gibson-semibold.otf);
		}
		
	@font-face {
		font-family: gibson_regular;
		src: url(../fonts/gibson-regular.otf);
		}
		
	@font-face {
		font-family: interstate_blk_cond;
		src: url(../fonts/interblacon.woff);
		}
		
	@font-face {
		font-family: interstate_blk;
		src: url(../fonts/interbla.woff);
		}
		
	p1 {
		font-family: "chronicle_display_reg", serif;
		font-weight: 200;
		font-style: normal;
		text-align: left;
		font-size: 18px;
		letter-spacing: .1px;
		line-height: 1.32;
		color: #000;
		}
		
	h1 {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 100px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		}
		
	h2 {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 30px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		}
		
	span.bluelink {
	color:77affd;
	}
		
/* INTROWRAPPER */

	#topsectionwrapper {
	position: relative;
	background-color: #fff;
	z-index: 10;
	}
	
/* INTRO SECTION */
	
	#deckspacer {
		position: relative;
		display: block;
		height: 3vw;
		}
			
	#deckwrapper {

		position: relative;
		width:96%;
		margin: 0 auto; 
		line-height:0;
		display: block;
		overflow: hidden;
		border-bottom: 1px solid #c2c2c2;
		z-index: 0;
		}
		
	#introdekwrapper {
		position: relative;
		display: block;
		top: 3%;
		left: 4%;
		width: 94%;
		margin-bottom: 50px;
		}
	
	#profile {
		position: relative;
		display: block;
		margin-left: -1%;
		padding-bottom: 3px;
		width: 100%;
		height: 25%;
		line-height: 60px;
		text-align: center;
		
		}
		
	span.sectiontitle {
		font-family: "knockout_fullmiddleweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 10px !important;
		letter-spacing: 4px;
		line-height: .8;
		color: #000;
		}
	
	#introdek {
		position: relative;
		width: 100%;
		display: table-cell; 
  		vertical-align: middle;
  		text-align: left;
		}
		
	span.centervert {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 47px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		}
		
		@media only screen and (max-width: 330px) {
			span.centervert {
				font-size: 37px !important;
				}
			}
			
		@media only screen and (min-width: 331px) and (max-width: 370px) {
			span.centervert {
				font-size: 40px !important;
				}
			}
			
		@media only screen and (min-width: 371px) and (max-width: 410px) {
			span.centervert {
				font-size: 43px !important;
				}
			}
		
	#introimage {
		background-image: url('../images/banjo-hat.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		height: 500px;
		width: 100%;
		margin: 0 auto 55px auto;
		display: block;
		/*border: 3vw solid #1219b0;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box; */
		}
		
	span.h1leadin {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 16px;
		letter-spacing: .4px;
		line-height: 1.32;
		color: #000;
		}
		
	#introwrapper {
		position: relative;
		display: block;
		width: 100%;
		margin: 0 auto;
		overflow: visible;
		}
			
	#introcenterwrapper {
		position: relative;
		left: 4%;
		width: 92%;
		}

	#introtext {
		font-family: "chronicle_display_reg", serif;
		font-weight: 200;
		font-style: normal;
		text-align: left;
		font-size: 17.8px;
		letter-spacing: .1px;
		line-height: 1.32;
		color: #000;
		padding-bottom: 40px;
		}
		
		@media only screen and (max-width: 330px) {
			#introtext {
				font-size: 16px !important;
				}
			}

	#introleftwrapper, #introleft, #introlefttext, #introleft:before, #introrightwrapper, #introright, #pullquotetop  {
		display: none;
		}	
	
		
/* FEATURED */

	#featuredwrapper {
		position: relative;
		top: 0%;
		width:96%;
		margin: 0 auto; 
		line-height:0;
		display: block;
		overflow: hidden;
		border-bottom: 1px solid #c2c2c2;
		z-index: 0;
		}
		
	#featheader {
		position: relative;
		display: block;
		height: 78px;
		width: 100%;
		-webkit-box-sizing: content-box;
     	-moz-box-sizing: content-box;
		box-sizing: content-box;
		border-bottom: 3vw solid #1219b0; 
		}
		
		@media only screen and (max-height: 740px) {
			#featheader {
			height: 58px;
			}
		}
		
	#feattitle {
		display: none;
		}
		
	#feattitle_1col {
		position: absolute;
		display: block;
		top: 5px;
		width: 100%;
		text-align: center;
		line-height: 78px;
		z-index: 110;
		}
		
		@media only screen and (max-height: 740px) {
			#feattitle_1col {
			line-height: 58px;
			top: 4px;
			}
		}
		
	#featimageart, #featimageaction {
		background-image: url('../images/bedtime-stories-1929.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		top: 0;
		height: calc(100vh - 78px);
		width: 100%;
		margin: 3vw 0 10px 0;
		display: block;
		}
		
		@media (max-height: 700px) {
			#featimageart, #featimageaction {
				background-image: url('../images/bedtime-stories-1500.jpg');
			}
		}
		
		@media (max-height: 500px) {
			#featimageart, #featimageaction {
				background-image: url('../images/bedtime-stories-550.jpg');
			}
		}
		
	#featvid1, #featvid2, #featvid3, #featvid4, #featvid5, #featvid6 {
		position: absolute;
		height: calc(100vh - 78px);
		width: 100%;
		margin: 3vw 0 10px 0;
		display: none;
		overflow: hidden;
		border: 3vw solid #95876d;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	background-color: #95876d;
    	float: left;
		z-index: 1;
		}
		
		@media only screen and (max-height: 740px) {
			#featimageart, #featimageaction {
			height: calc(100vh - 78px);
			}
			#featvid1, #featvid2, #featvid3, #featvid4, #featvid5, #featvid6 {
			height: calc(100vh - 78px);
			}
		}
		
	.featvidshow {
		display: block !important;
	}
	
	#featvid_1, #featvid_2, #featvid_3, #featvid_4, #featvid_5, #featvid_6 {
		height: 100%;
		width: auto;
		}
	
	#featimageart {
		float: left;
		border: 3vw solid #95876d;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
		}
		
	#featimageaction {
		float: right;
		border: 3vw solid #cd1811;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
		}
		
	#featcontentwrapperart, #featcontentwrapperaction {
		position: relative;
		width: 100%;
		margin: 160px 0 55px 0;
		display: block;
		}
		
	#featcontentwrapperart {
		float: right;
		}
		
	#featcontentwrapperaction {
		float: left;
		}
		
	#featheadlineart, #featheadlineaction {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 55px !important;
		letter-spacing: 1px;
		line-height: .8;
		color: #000;
		position: relative;
		top: 0px;
		left: 0;
		width: 100%;
		overflow: visible;
		}
		
		span.featheadline-2nd {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 43px !important;
		letter-spacing: 1px;
		line-height: .8;
		color: #000;
		display: inline-block;
		}
		
		#featheadlineart {
		padding: 10px 0px 0px 15px;
		border-left: 3vw solid #000;
		}
		
		#featheadlineaction {
		padding: 10px 15px 0px 0px;
		border-right: 3vw solid #000;
		}
		
		@media only screen and (max-width: 330px) {
			#featheadlineart, #featheadlineaction {
				font-size: 35px !important;
				}
			}
			
		@media only screen and (min-width: 331px) and (max-width: 410px) {
			#featheadlineart, #featheadlineaction {
				font-size: 40px !important;
				}
			}
			
	#featheadlineart:before {
	
		content: ' ';
		position: absolute;
		display: block;
		background-color: #fff;
		width: 3.2vw;
		height: 6.4vw;
		top: 50%;
		margin-top: -3vw;
		left: -1.5vw;
		line-height: 0;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		border-right: 0;
		z-index: 110;
		}
		
	#featheadlineaction:before {
	
		content: ' ';
		position: absolute;
		display: block;
		background-color: #fff;
		width: 3.2vw;
		height: 6.4vw;
		top: 50%;
		margin-top: -3vw;
		left: -1.5vw;
		line-height: 0;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		border-right: 0;
		z-index: 110;
		}
		
	#feattextart, #feattextaction {
		position: relative;
		display: block;
		left: 0;
		margin-top: 20px;
		width: 92%;
		overflow: hidden;
		}
	
	#feattextart {
		border-left: 3vw solid #fff;
		padding-left: 17px;
		}
		
	span.feattext {
		font-family: "chronicle_display_reg", serif;
		font-weight: 200;
		font-style: normal;
		text-align: left;
		font-size: 17.8px;
		letter-spacing: .1px;
		line-height: 1.32;
		color: #000;
		}
	
	span.feattext:after {
	
		content: url('../images/joshfox_endicon_95876d.svg');
		padding-left: 5px;
		}
		
		@media only screen and (max-width: 330px) {
			span.feattext {
				font-size: 16px !important;
				}
			}
		
/* CAROUSEL */

	#slider1 {
		margin: 0px;
		overflow: hidden;
		padding: 0 40px;
		position: absolute;
		top: -160px;
		left: 2%;
		height: 140px;
		width: 96%; 
	}
	#slider1 .viewport {
		float: left;
		width: 100%;
		height: 140px;
		overflow: hidden;
		position: relative;
		border-width: 0px 1px 0px 1px;
		border-style: solid;
		border-color: #c2c2c2;
	}
	#slider1 .buttons {
		border-radius: 30px;
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		left: 0;
		top: 56%;
		margin-top: -13px;
		border: 1px solid #000;
	}
	#slider1 .prev {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
		background-size: 30% auto;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	#slider1 .next {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
		background-size: 30% auto;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		left: auto;
		right: 0;
		margin-top: -13px;
		transform:rotate(180deg);
		-moz-transform:rotate(180deg);
    	-webkit-transform:rotate(180deg);
	}
	#slider1 .disable {
		visibility: hidden;
	}
	#slider1 .overview {
		list-style: none;
		position: absolute;
		left: 0;
		top: 0;
	}
	#slider1 .overview li{
		background-size: auto 100%;
		background-repeat: no-repeat;
		float: left;
		margin: 20px 10px 0 0px;
		overflow: visible;
		height: 120px;
		border: 10pt solid #95876d;
		width: 120px; 
	}

	#slider1 .overview li:hover{
		border: 10pt solid #1219b0;
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
	}
	
	#slider1 .overview li:after {
		background-image:url("../images/video_icon.svg");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		top: 50%;
		left: 50%;
		margin-top: -37%;
		margin-left: -20%;
		display: block;
		width: 40%;
		height: 40%;
		content: "";
		opacity: 1;
		}
		
	#slider1 .overview li:hover:after{
		background-image:url("../images/video_icon_drk.svg");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
	}
	
/* SECTION RUBRIK */

	#sectrbrkwrapper {
		position: relative;
		display: block;
		left: 2%;
		width: 96%;
		height: 78px;
		min-height: 78px;
		line-height: 78px;
		text-align: center;
		border-bottom: 1px solid #c2c2c2;
	}
	
	span.sectrrbk {
		font-family: "gibson_semibold", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 12px;
		letter-spacing: 6px;
		color: #95876d;
		display: block;
		margin-top: 1px;
	}
	
	@media only screen and (max-height: 740px) {
			#sectrbrkwrapper {
			height: 58px;
			min-height: 58px;
			line-height: 58px;
			}
			span.sectrrbk {
			font-size: 10px;
			}
		}
			
/* TIMELINE HEADER */
	
	#timelineheaderwrapper {
		position: relative;
		display: block;
		width: 100%;
		height: 58px;
		min-height: 58px;
		margin: 0 auto;
		z-index: 120;
		}
		
	.headeropacityright {
		position: absolute;
		top: 0%;
		display: block;
		left: calc(55px + 6vw);
		width: calc(92vw - 55px);
		height: 58px;
		background-color: #fff;
		opacity: 0;
		z-index: 60;
		}
		
	.headeropacityleft {
		position: absolute;
		top: 0%;
		display: block;
		left: 1.8%;
		width: calc(55px - 2vw);
		height: 58px;
		background-color: #fff;
		opacity: 0;
		z-index: 60;
		}
		
	span.timelineheader_2col {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 40px;
		letter-spacing: 6px;
		line-height: 1.32;
		color: #000;
		}
		
	span.timelineheader_1col {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		font-size: 40px;
		letter-spacing: 1px;
		color: #000;
		}
		
		@media only screen and (max-width: 330px) {
			span.timelineheader_1col {
				font-size: 32px !important;
				}
			}
		
	.timelineheader1024 {
		position: absolute;
		display: table;
		top:5px;
		height: 58px;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		line-height: 58px;
		z-index: 110;
		}
		
	.timelineheader {
		display: none;
		}
		
	.artheader {
		display: none;
		}
		
	.actionheader {
		display: none;
		}
		
	#timelineslug {
		display: none;
		}
		
	span.timelineyear {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 40px;
		letter-spacing: 6px;
		line-height: 1.32;
		color: #000;
		}
		
	.headerfixed {
		position: fixed;
		}
		
	.logo_overlay_1colwide {
		background-image: url('../images/joshfoxlogo_95876d.svg');
		background-size: 30px 13px;
		background-position: left;
		background-repeat: no-repeat;
		position: absolute;
		left: 2%;
		top: 0%;
		width: 120px;
		height: 58px;
		opacity: 0;
		z-index: 9999;
		}
		
	.logo_overlay_1col {
		display: none;
		}
	
	.logo_overlay {
		display: none;
		}
		
	.visible {
		position: fixed;
		top: 0%;
		opacity: 1;
		}
		
/* TIMELINE */

	/* TIMELINE TOP RULES */
		
		.secondrulewrapper_1col {
	
		position: absolute;
		top: 0px;
		left: 0;
		background-color:#fff;
		width: 100%;
		height:3vw;
		z-index: 0;
		overflow: hidden;
		}
		
		.secondrulewrapper {
		display: none;
		}
		
		.secondrulefixed {
		position: fixed;
		top: 58px;
		}
		
		#secondruleleft {
	
		position: absolute;
		top: 0px;
		left: 2vw;
		background-color:#000;
		width: calc(55px - 2vw);
		height:3vw;
		}

		#secondruleright {
	
		position: absolute;
		display:block;
		top: 0px;
		left: calc(55px + 4vw);
		background-color:#cd1811;
		width: calc(94% - 55px);
		height:3vw;
		}
		
	/* MAIN TIMELINE */
	
	#timelinewrapper {

		position: relative;
		top: 0px;
		width:100%; 
		height:9000px;
		line-height:0;
		display: block;
		overflow: hidden;
		z-index: 100;
		}
		
	#timelinemainwrapper {

		position: absolute;
		left: 55px;
		width:6vw; 
		height:100%;
		line-height:0;
		display: block;
		overflow: visible;
		background-color: #fff;
		z-index: 100;
		}
		
	#timelineleft {

		position: absolute;
		display: inline-table;
		background-color: #000;
		width: 3vw;
		height: 100%;
		top: 58px;
		left:0;
		line-height: 0;
		z-index: 100;
		}
		
	#timelineright {
		display: none;
		}
	
	#timelinetopleft {
		position: absolute;
		display: none;
		background-color: #000;
		top: 58px;
		left: 3vw;
		width: 3vw;
		height: 3vw;
		line-height: 0;
		z-index: 100;
		}
		
	#timelinetopright {
		display: none;
		}
		
		/* TIMELINE LOWER RULES */
		
		.lowerrulewrapper {
	
		position: absolute;
		bottom: 0px;
		left: 0;
		background-color:none;
		width: 6vw;
		height: 3vw;
		z-index: 200;
		}
		
		.lowerrulefixed {
		position: fixed;
		top: 58px;
		}
		
		#lowerruleleft {
	
		position: absolute;
		top: 0px;
		left: 0px;
		background-color:#000;
		width: 100%;
		height: 3vw;
		}
		
		#timelineendleft {
	
		position: absolute;
		top: 0px;
		left: 0px;
		background-color:#000;
		width: 100%;
		height: 3vw;
		}

		#timelineendright {
	
		display: none;
		}
		
		#lowerruleright {
	
		display: none;
		}
		
		
	/* TIMELINE MARKERS */
		
		
		#markersleft, #markersright  {
		
		position: absolute;
		display: block;
		min-height: 100%;
		background-color: none;
		min-width: 3vw;
		left: 0;
		top: 58px;
		height:100%;
		line-height: 0;
		z-index: 110;
		}
		
		.markerwrapperleft, .markerwrapperright  {
		
		position: relative;
		display: block;
		min-height: 800px;
		background-color: none;
		width: 6vw;
		left: 0;
		height: 400px;
		line-height: 0;
		z-index: 110;
		}
		
		#timelinemarkerleft, #timelinemarkerright {
		position: absolute;
		display: block;
		left: 0vw;
		width: 3vw;
		height: 50%;
		line-height: 0;
		overflow: visible;
		border: none;
		z-index: 0; 
		}
		
		#timelinemarkerleft {
		background-color: #95876d;
		}
		
		#timelinemarkerright {
		background-color: #cd1811;
		}
		
		#timelinenotchleft, #timelinenotchright {
	
		position: absolute;
		display: block;
		width: 3.2vw;
		height: 6.4vw;
		top: 25%;
		margin-top: -3vw;
		left: 1.5vw;
		line-height: 0;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		border-right: 0;
		z-index: 110;
		}
		
		#timelinenotchleft {
		background-color: #fff;
		}
		
		#timelinenotchright {
		background-color: #fff;
		}
		
		#markerslefttopspacer_1col {
		position: relative;
		display: block;
		min-height: 125px;
		}
		
	/* YEAR BREAK */
		
		.timelinebreak {
		position: relative;
		display: block;
		left: 0vw;
		width: 6vw;
		z-index: 200;
		margin: 0 auto;
		z-index: 999;
		}
		
		.timelinebreak_2017 {
		position: relative;
		top: 0px;
		}
		
		.timelinebreak_2016 {
		position: absolute;
		top: 4000px;
		}
		
		.timelinebreak_2015 {
		position: absolute;
		top: 8000px;
		}	
		
		.endshim, .startshim {
		position: relative;
		display: block;
		width: 100%;
		height: 3vw;
		z-index: 200;
		background-color: #000;
		}
		
		.endshim {
		top: 0%;
		}
		
		.whitespacer {
		position: relative;
		display: table;
		left 0%;
		width: 100%;
		height: 58px;
		background-color: #fff;
		z-index: 999;
		}
		
		.timelinedate {
		}
		
		.startshim {
		bottom: 0%;
		}
		
		#timelineslug_1col {
		position: absolute;
		display: block;
		left: 0px;
		top: 56%;
		width: 100%;
		height: 58px;
		margin-top: -28px;
		z-index: 220;
		}
		
		#timelineslug_1col:before {
		font-family: "knockout_welterweight", sans-serif;
		font-size: 22px;
		content: "20";  
		color: #000;
		position:absolute;
		top: 0;
		line-height: 58px;
		left: -34px;
		}
		
		@media only screen and (max-width: 330px) {
			#timelineslug_1col:before {
				font-size: 17px !important;
				}
			}
	
		span.timelineyear_1col {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 6vw;
		letter-spacing: .5px;
		line-height: 58px;
		color: #000;
		padding-top: 24px;
		}
		
		.whitegap {
		display: none;
		}
		
/* TIMELINE CONTENT */
		
	/* TIMELINE ENTRY STRUCTURE */
		
		.timelinewrapper {
		position: relative;
		top: 58px;
		left:calc(55px + 6vw);
		right: 2vw;
		display: block;
		width: calc(90vw - 55px);
		background-color: none;
		z-index: -10;
		overflow: visible;
		}
		
		.timelinecontent {
		position: relative;
		display: block;
		width: 100%;
		min-height: 800px;
		background-color: none;
		z-index: -10;
		overflow: visible;
		border-bottom: 1px solid #c9c9c9;
		}
		
		.contentleft {
		display: block;
		}
		
		.contentright {
		display: block;
		}
		
		.contentspacer {
		position: relative;
		display: block;
		width: 100%;
		background-color: none;
		z-index: -10;
		}
		
		/* ENTRY AND MARKER POSITIONING CLASSES */
		
		.sp25_1col {
		min-height: 25px; 
		}
		.sp50_1col {
		min-height: 50px; 
		}	
		.sp75_1col {
		min-height: 75px; 
		}
		.sp100_1col {
		min-height: 100px; 
		}
		.sp150_1col {
		min-height: 150px; 
		}
		.sp200_1col {
		min-height: 200px;
		}
		.sp250_1col {
		min-height: 250px;
		}
		.sp300_1col {
		min-height: 300px;
		}
		.sp400_1col {
		min-height: 400px;
		}
		.sp500_1col {
		min-height: 500px;
		}
		.sp600_1col {
		min-height: 600px;
		}
		.sp700_1col {
		min-height: 700px;
		}
		.sp800_1col {
		min-height: 800px;
		}
		.sp900_1col {
		min-height: 900px;
		} 
		.sp950_1col {
		min-height: 950px;
		} 
		.sp1000_1col {
		min-height: 1000px;
		} 
		.sp1050_1col {
		min-height: 1050px;
		} 
		.sp1100_1col {
		min-height: 1100px;
		} 
		.sp1150_1col {
		min-height: 1150px;
		} 
		.sp1200_1col {
		min-height: 1200px;
		}
		.sp2200_1col {
		min-height: 2200px;
		}
		.sp2300_1col {
		min-height: 2300px;
		} 
		
		.mgn50_1col {
		margin-top: 50px; 
		}
		.mgn100_1col {
		margin-top: 100px; 
		}
		.mgn150_1col {
		margin-top: 150px; 
		}
		.mgn200_1col {
		margin-top: 200px;
		}
		.mgn250_1col {
		margin-top: 250px;
		}
		.mgn300_1col {
		margin-top: 300px;
		}
		.mgn400_1col {
		margin-top: 400px;
		}
		.mgn500_1col {
		margin-top: 500px;
		}
		.mgn600_1col {
		margin-top: 600px;
		}
		
		.sp50, .sp100, .sp150, .sp200, .sp250, .sp300, .sp400, .sp500, .sp600 {
		display: block; 
		}
		
		.mgn50, .mgn100, .mgn150, .mgn200, .mgn250, .mgn300, .mgn400, .mgn500, .mgn600 {
		display: block; 
		}
		
		
		.image_right, .image_left {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0%;
		left: 0;
		width: 100%;
		height: 50%;
		display: block;
		line-height: 0;
		overflow: hidden;
		}
		
		.image_left {
		border-width: 3vw 3vw 3vw 3vw;
		border-style: solid;
		border-color: #95876d; 
		
		}
		.image_right {
		border-width: 3vw 3vw 3vw 3vw;
		border-style: solid;
		border-color: #cd1811; 
		}
	
		.image_left:hover {
		border: 3vw solid #1219b0;
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.image_right:hover {
		border: 3vw solid #1219b0;
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.netflixlogo {
		background-image: url('../images/netflix_2014_wht.svg');
		background-size: auto 70%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		display: block;
		top: 0%;
		left: 0%;
		height: 55px;
		width: 50%;
		background-color: #cd1811;
		}
		
		.tribecalogo {
		background-image: url('../images/tribecaff.svg');
		background-size: auto 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		display: block;
		top: 10px;
		right: 0%;
		height: 55px;
		width: 50%;
		background-color: none;
		}
		
		.textwrapperleft, .textwrapperright {
		position: absolute;
		top: 50%;
		left: 0%;
		width: 100%;
		height: 400px;
		display: block;
		line-height: 0;
		overflow: hidden;
		}
		
		.datewrapperleft, .datewrapperright {
		position: absolute;
		left: calc(-55px - 6vw);
		width: calc(55px + 6vw);
		height: 50%;
		display: block;
		line-height: 0;
		overflow: visible;
		}
		
		.categoryleft, .categoryright {
		display: none;
		}
		
		.categoryleft_1col, .categoryright_1col {
		position: absolute;
		top: -56px;
		left:calc(55px + 6vw);
		right: 2vw;
		display: block;
		width: calc(90vw - 55px);
		height: 58px;
		text-align: center;
		}
		
		.categoryleft_1col:before {
		content: "";
		position:absolute;
		background-color: #c9c9c9;
		top: -3vw;
		left: 0;
		height: 3vw;
		width: 100%;
		}
		
		.categoryright_1col:before {
		content: "";
		position:absolute;
		background-color: #c9c9c9;
		top: -3vw;
		left: 0;
		height: 3vw;
		width: 100%;
		}
		
		span.category {
		font-family: "gibson_semibold", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 10px !important;
		letter-spacing: 4px;
		line-height: .8;
		color: #000;
		}
		
		@media only screen and (max-width: 330px) {
			span.category {
				font-size: 8px !important;
				}
			}
		
		span.category_l1col {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 40px !important;
		letter-spacing: .1px;
		line-height: 58px;
		color: #95876d;
		display: block;
		position: absolute;
		top: 3px;
		}
		
		span.category_r1col {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 40px !important;
		letter-spacing: .1px;
		line-height: 58px;
		color: #cd1811;
		display: block;
		position: absolute;
		top: 3px;
		}
		
		@media only screen and (max-width: 330px) {
			span.category_l1col, span.category_r1col {
				font-size: 32px !important;
				}
			}
		
		.dateleft, .dateright {
		position: absolute;
		top:0%;
		left:10px;
		width: 40px;
		height: 400px;
		text-align: center;
		}
		
		span.date {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 30px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 400%;
		}
		
		@media only screen and (max-width: 330px) {
			span.date {
				font-size: 25px !important;
				}
			}
		
		.daterotate {
		transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
		-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
		-ms-ransform:  translateX(-50%) translateY(-50%) rotate(-90deg);
		}

		
		.actionbutton {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 10px !important;
		letter-spacing: 2px;
		line-height: .8;
		color: #fff;
		position: relative;
		top: 320px;
		margin: 0 auto;
		width: 45%;
		height: 46px;
		display: block;
		background-color: #1219b0;
		border-radius: 2px;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
		padding-top: 19px;
		}
		
		.actionbutton:hover {
		 background-color: #fff;
		 color: #77affd;
		 webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.actionbutton:hover::after {
		content: ' ';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 5px;
		top: 5px;
		border-width: 0px 1px 1px 0px;
		border-style: solid;
		border-color: #fff;
		border-radius: 0px 0px 4px 0px;
		z-index: 90;
		}
		
		.subcategoryleft, .subcategoryright {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 60%;
		height: 15px;
		text-align: left;
		overflow: visible;
		}
		
		.divideruleleft, .divideruleright {
		position: absolute;
		top: 45px;
		left: 0%;
		width: 1vw;
		height: 270px;
		display: block;
		line-height: 0;
		background-color: #000;
		}
		
		.headleft, .headright {
		position: absolute;
		top: 40px;
		left: 20px;
		width: 80%;
		height: 160px;
		text-align: left;
		overflow: visible;
		}
		
		span.itemhead {
		font-family: "gibson_semibold", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 20px !important;
		letter-spacing: 2px;
		line-height: 1.4;
		color: #000;
		}
		
		@media only screen and (max-width: 330px) {
			span.itemhead {
				font-size: 17px !important;
				}
			}
		
		.summaryleft, .summaryright {
		position: absolute;
		bottom: 82px;
		left: 20px;
		width: 80%;
		height: 120px;
		text-align: left;
		display: table;
		overflow: visible;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) {
			.summaryleft, .summaryright {
				width: 75%;
				}
			}
		@media only screen and (min-width: 1024px) and (max-width: 1366px) {
			.summaryleft, .summaryright {
				width: 70%;
				}
			}
		
		span.summary {
		font-family: "chronicle_display_italic", serif;
		font-style: normal;
		text-align: left;
		font-size: 13px !important;
		letter-spacing: .1px;
		vertical-align: bottom;
		display: table-cell;
		line-height: 1.2;
		color: #000;
		}
		
		.morecontent span {
    	display: none;
		}
		.morelink {
    	display: block;
		}
		
		.tlbuttonwrapper {
		position: absolute;
		display: block;
		bottom: 20px;
		left: 20px;
		width: 100%;
		bottom: 17px;
		height: 58px;
		display: block;
		overflow: visible;
		}
		
		.secondbutton {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 10px !important;
		letter-spacing: 2px;
		line-height: .8;
		color: #000;
		position: relative;
		margin: 5px 0px 5px 5%;
		width: 45%;
		height: 46px;
		display: inline-table;
		border: 1px solid #000;
		border-radius: 2px;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
		padding-top: 19px;
		float: left;
		}
		
		.secondbutton:hover {
		 border: 1px solid #1219b0;
		 color: #1219b0;
		 webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.secondbutton:hover::after {
		content: ' ';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 5px;
		top: 5px;
		border-width: 0px 1px 1px 0px;
		border-style: solid;
		border-color: #1219b0;
		border-radius: 0px 0px 4px 0px;
		z-index: 90;
		}
		
		.morebuttonart, .morebuttonaction  {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 10px !important;
		letter-spacing: 2px;
		line-height: .8;
		text-decoration: none !important;
		position: relative;
		width: 58px;
		height: 58px;
		display: inline-block;
		padding: 19px 0px 0px 0px;
		box-sizing: border-box;
		border-radius: 4px;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	float: left;
		}
		
		.morebuttonart  {
		border: 6px solid #95876d;
    	color: #95876d !important;
		}
		
		.morebuttonaction  {
		border: 6px solid #cd1811;
    	color: #cd1811;
		}
		
		.morebuttonart:hover, .morebuttonaction:hover {
		 border: 1px solid #1219b0;
		 color: #1219b0 !important;
		 text-decoration: none !important;
		 padding: 24px 0px 0px 0px;
		 webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.morebuttonart:after:hover, .morebuttonaction:after:hover {
		content: ' ';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 8px;
		top: 8px;
		border-width: 1px 0px 0px 1px;
		border-style: solid;
		border-color: #1219b0;
		border-radius: 8px 0px 0px 0px;
		}
		
		.morebuttonart a  {
		text-decoration: none !important;
    	color: #95876d;
    	display: block;
		}
		
		.soclinkwrapperleft, .soclinkwrapperright, .soclinkwrappersololeft, .soclinkwrappersoloright {
		position: absolute;
		width: 100%;
		height: 25px;
		display: block;
		}
		
		.soclinkwrapperleft, .soclinkwrapperright {
		left: 15px;
		top: 670px;
		}
	
		.fb, .twtr, .mail, .inst, .rddt {
		background-size: 25px 25px;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		width: 25px;
		height: 25px;
		display: block;
		left: 0px;
		}
		
		.fb {
		background-image: url('../images/facebook_circle_grey.svg');
		top: 0px;
		}
		
		.twtr {
		background-image: url('../images/twitter_circle_grey.svg');
		top: 30px;
		}
		
		.inst {
		background-image: url('../images/reddit_circle_grey.svg');
		top: 60px;
		}
		
		.rddt {
		background-image: url('../images/reddit_circle_grey.svg');
		top: 60px;
		}
		
		.mail {
		background-image: url('../images/envelope_grey.svg');
		top: 90px;
		}
		
		
		
		.fb:hover {
		background-image: url('../images/facebook_hover_grey.svg');
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.twtr:hover {
		background-image: url('../images/twitter_hover_grey.svg');
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.inst:hover {
		background-image: url('../images/instagram_hover_grey.svg');
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.rddt:hover {
		background-image: url('../images/reddit_hover_grey.svg');
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		.mail:hover {
		background-image: url('../images/envelope_hover_grey.svg');
		webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) {
			.fb, .twtr, .mail, .inst, .rddt {
				background-size: 22px 22px;
				width: 22px;
				height: 22px;
				}
			}
		@media only screen and (min-width: 1024px) and (max-width: 1366px) {
			.fb, .twtr, .mail, .inst, .rddt {
				background-size: 20px 20px;
				width: 20px;
				height: 20px;
				}
			}
		
/* LOWER SECTION */

		/* LOWER FIXED HEADER */ 
		
		#lowerheaderwrapper {
		position: relative;
		display: block;
		width: 100%;
		height: 58px;
		left: 0;
		z-index:200;
		}
		
		#endheaderwrapper {
	
		position: absolute;
		top: 0;
		right: 2%;
		background-color:none;
		width: 96%;
		height:100%;
		}
		
		.endheaderopacity {
	
		position: absolute;
		display: block;
		top: 0%;
		left: 12%;
		background-color:#fff;
		width: 60%;
		height: 58px;
		opacity: 0;
		}
		
		.lowertitleheader {
		position: absolute;
		display: table;
		top:5px;
		height: 58px;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		line-height: 58px;
		z-index: 110;
		}
		
		span.lowertitle {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		font-size: 40px;
		letter-spacing: 1px;
		color: #000;
		}
		
		@media only screen and (max-width: 330px) {
			span.lowertitle {
				font-size: 32px !important;
				}
			}
		
		.lowerrulefixed {
		position: fixed !important;
		}
		
		.lowertitlefixed {
		position: fixed !important;
		right: 10%;
		width: 80%;
		}
		
		.lowervisible {
		position: fixed !important;
		opacity: 1;
		}
		
		#timelineendrulewrapper {
		position: relative;
		display: block;
		line-height:0; 
		width: 100%;
		margin: 0 auto;
		height: 3vw;
		z-index: 101; 
		}
		
		.timelineendrule {
		display: none;
		}
		
		.timelineendrule_1col {
		position: absolute;
		display: block;
		line-height:0; 
		width: 96vw;
		left: 2%;
		height: 3vw;
		background-color: #1219b0;
		}
		
		/* LOWER CONTENT */
		
		#lowerwrapper {
		position: relative;
		display: block;
		width: 100%;
		height: calc(100vh - (3vw + 58px));
		height: expression(100vh - (3vw + 58px));
		height: -webkit-calc(100vh - (3vw + 58px));
		height: -moz-calc(100vh - (3vw + 58px));
		height: -o-calc(100vh - (3vw + 58px));
		z-index: 0;
		}
		
		#lowercontent {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		left: 2vw;
		top: 0;
		width: 96%;
		}

		#lowerimage {
		order: 1;
		background-image: url('../images/waterprotectors-blu-sktch-1000.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		display: block;
		width: 100%;
		height: 100vh;
		top:0%;
		}
		
		@media (max-width: 500px) {
			#lowerimage {
				background-image: url('../images/waterprotectors-blu-sktch-800.png');
			}
		}
		
		#mailinglistwrapper {
		font-family: "gibson_regular", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 14px;
		letter-spacing: .5px;
		line-height: 1.32;
		color: #95876d;
		position: absolute;
		display:block;
		top: calc(50% + 3vw);
		top: expression(50% + 3vw);
		top: -webkit-calc(50% + 3vw);
		top: -moz-calc(50% + 3vw);
		top: -o-calc(50% + 3vw);
		left: 50%;
		margin-top: -25px;
		margin-left: -40%;
		height: 50px;
		min-height: 50px;
		min-width: 80%;
		width: 80%;
		border-radius: 25px;
		background-color: #fff;
		box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border: 1px solid #95876d;
    	padding-top: 16px;
    	padding-left: 20px;
		z-index: 10;
		}
		
		#emailsendbutton {
		background-image: url('../images/playarrow.svg');
		background-size: 30% 30%;
		background-position: 55% 50%;
		background-repeat: no-repeat;
		position: absolute;
		display: block;
		top: 12px;
		right: 12px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: #1219b0;
		}
	
		span.footercategory {
		font-family: "gibson_semibold", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 8px;
		letter-spacing: 3px;
		line-height: 1.32;
		color: #95876d;
		}
		
		#footercolumn1, #footercolumn2, #footercolumn3 {
		font-family: "gibson_regular", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 9px;
		letter-spacing: 1px;
		line-height: 1.5;
		color: #fff;
		position: absolute;
		display: block;
		width: 20%;
		height: 55%;
		top: 15%;
		}
		
		#footercolumn1 {
		left: 20%;
		}
		
		#footercolumn2 {
		left: 40%;
		}
		
		#footercolumn3 {
		left: 60%;
		}
		
		#footercolumn1:before, #footercolumn2:before, #footercolumn3:before {
		content: ' ';
		position: absolute;
		width: 100%;
		height: 75px;
		top: 5px;
		left: -15px;
		border-width: 0px 0px 0px 1px;
		border-style: solid;
		border-color: #95876d;
		}
		
		#footercolumn4, #footercolumn4:before {
		display: none;
		}
		
		#legaltext {
		font-family: "gibson_semibold", sans-serif;
		font-style: normal;
		text-align: left;
		font-size: 7px;
		letter-spacing: 1px;
		line-height: 1.32;
		color: #fff;
		position: absolute;
		display: block;
		width: 80%;
		height: 15%;
		left: 20%;
		top: 75%;
		padding-top: 15px;
		border-top: 1px solid #95876d;
		}
		
		#footerlogo {
		background-image: url('../images/jfoxlogo7wht.png');
		background-size: 120px 21px;
		background-position: left;
		background-repeat: no-repeat;
		position: absolute;
		display: block;
		width: 20%;
		height: 21px;
		left: 2vw;
		top: 50%;
		margin-top: -10px;
		}
		
		
		
	/* VARIABLE ITEMS */
	
		.modalimage_item_1  {
		background-image: url('../images/0106003c1_grain.jpg');
		background-position: 0% 42%;
		}