/* TYPOGRAPHY */

		@font-face {
		font-family: trianon_caption_extralight_reg;
		src: url(../fonts/trianoncaptionweb-extralight.woff);
		}
		
		@font-face {
		font-family: trianon_caption_extralight_ital;
		src: url(../fonts/trianoncaptionweb-extralightitalic.woff);
		}
		
		@font-face {
		font-family: gibson-semibold;
		src: url(../fonts/gibson-semibold.otf);
		}

		@font-face {
		font-family: gibson-regular;
		src: url(../fonts/gibson-regular.otf);
		}
		
/* BODY */
		* {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		}
	
		body {
		font-size: 1vw;
		}

/* MAIN SOCIAL LINKS */

		.mainsoclinks {
		position: absolute;
		display: block;
		top: calc(100vh - 51px);
		right: calc(2vw + 34px);
		width: 140px;
		height: 25px;
		z-index: 777;
		}
		
		@media only screen and (max-height: 740px) {
			.mainsoclinks {
				display: none;
				}
			}
		
		.mainsoclinks_1col {
		position: absolute;
		display: block;
		top: calc(100vh - 50px);
		right: calc(2vw + 34px);
		width: 140px;
		height: 25px;
		z-index: 777;
		}
		
		@media only screen and (min-height: 741px) {
			.mainsoclinks_1col {
				display: none;
				}
			}
		
		.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
		background-size: 25px 25px;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		width: 25px;
		height: 25px;
		display: block;
		overflow: hidden;
		}
		
		.mainfb {
		background-image: url('../images/facebook_circle_grey.svg');
		left: 0px;
		}
		
		.maintwtr {
		background-image: url('../images/twitter_circle_grey.svg');
		left: 20%;
		}
		
		.maininst {
		background-image: url('../images/instagram_circle_grey.svg');
		left: 40%;
		}
		
		.mainrddt {
		background-image: url('../images/reddit_circle_grey.svg');
		left: 40%;
		}
		
		.mainmail {
		background-image: url('../images/envelope_grey.svg');
		left: 60%;
		}
		
		.mainfb:hover {
		background-image: url('../images/facebook_hover_grey.svg');
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
		}
		
		.maintwtr:hover {
		background-image: url('../images/twitter_hover_grey.svg');
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
		}
		
		.maininst:hover {
		background-image: url('../images/instagram_hover_grey.svg');
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
		}
		
		.mainrddt:hover {
		background-image: url('../images/reddit_hover_grey.svg');
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
		}
		
		.mainmail:hover {
		background-image: url('../images/envelope_hover_grey.svg');
		webkit-transition: 500ms;
		-moz-transition: 500ms;
		-o-transition: 500ms;
		transition: 500ms;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
			.mainsoclinks {
				top: calc(100vh - 49px);
				width: 130px;
				height: 22px;
				}
			.mainsoclinks_1col {
				top: calc(100vh - 49px);
				width: 130px;
				height: 22px;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				background-size: 22px 22px;
				width: 22px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 741px) {
			.mainsoclinks {
				top: calc(100vh - 48px);
				width: 120px;
				height: 20px;
				}
			.mainsoclinks_1col {
				top: calc(100vh - 46px);
				width: 120px;
				height: 20px;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				background-size: 20px 20px;
				width: 20px;
				height: 20px;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
			.mainsoclinks {
				top: calc(100vh - 41px);
				width: 140px;
				height: 25px;
				}
			.mainsoclinks_1col {
				top: calc(100vh - 41px);
				width: 140px;
				height: 25px;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				background-size: 25px 25px;
				width: 25px;
				height: 25px;
				}
			}
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 740px) {
			.mainsoclinks {
				top: calc(100vh - 39px);
				width: 130px;
				height: 22px;
				}
			.mainsoclinks_1col {
				top: calc(100vh - 39px);
				width: 130px;
				height: 22px;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				background-size: 22px 22px;
				width: 22px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
			.mainsoclinks {
				top: calc(100vh - 38px);
				width: 120px;
				height: 20px;
				}
			.mainsoclinks_1col {
				top: calc(100vh - 38px);
				width: 120px;
				height: 20px;
				}
			.mainfb, .maintwtr, .mainmail, .maininst {
				background-size: 20px 20px;
				width: 20px;
				height: 20px;
				}
			}
	
		.soclinkwrappertop {
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		left: 0px;
		bottom: 0px;
		}
		
		.soclinksfixed {
		position: fixed;
		top: 27px;
		}
	
		.soclinks1colfixed {
		position: fixed;
		top: 27px;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
				.soclinksfixed {
				top: 29px;
				}
				.soclinks1colfixed {
				top: 29px;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
				.soclinksfixed {
				top: 17px;
				}
				.soclinks1colfixed {
				top: 17px;
				}
			}	
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 740px) {
				.soclinksfixed {
				top: 18px;
				}
				.soclinks1colfixed {
				top: 18px;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
				.soclinksfixed {
				top: 20px;
				}
				.soclinks1colfixed {
				top: calc(5vh - 12px);
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 721px) {
				.soclinksfixed {
				top: 30px;
				}
				.soclinks1colfixed {
				top: 21px;
				}
			}
		@media (max-width: 350px) {
			.soclinks1colfixed {
				top: calc(5vh - 7px);
			}
		}
			
		.lowersoclinks {
		position: fixed;
		display: block;
		top: 27px;
		right: calc(2vw + 34px);
		width: 140px;
		height: 25px;
		z-index: 777;
		display: none;
		}
		
		@media only screen and (max-width: 600px) {
			.lowersoclinks {
				right: -500px;
				}
			}
		
		.display {
		display: block;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
			.lowersoclinks {
				top: 29px;
				width: 130px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 721px) {
			.lowersoclinks {
				top: 30px;
				width: 120px;
				height: 20px;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
			.lowersoclinks {
				top: 17px;
				width: 140px;
				height: 25px;
				}
			}
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 740px) {
			.lowersoclinks {
				top: 18px;
				width: 130px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
			.lowersoclinks {
				top: 20px;
				width: 120px;
				height: 20px;
				}
			}
		
/* HERO */	

		#herowrapper, #herowrapper-m {

		background-image: url('../images/josh-tthc-2-2500.jpg');
		background-size: cover;
		background-position: 46% center;
		background-repeat: no-repeat;
		position: fixed;
		line-height:0;
		display: block;
		width: 100%;
		height: calc(100vh - 58px);
		top: 0%;
		background-color: #cd1811;
		overflow: hidden;
		margin: 0 auto;
		opacity: 0;
		z-index: 0;
		animation-name: fadein;
		animation-duration: 1.5s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moc-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
		-webkit-animation-delay: .5s; /* Chrome, Safari, Opera */
		animation-delay: .5s;
		}
		
		#herowrapper-m {
		display: none;
		}
		
		@media (max-height: 740px) {
			#herowrapper {
				display: none;
			}
			#herowrapper-m {
				display: block;
			}
		}
		
		@media (max-height: 1024px) {
			#herowrapper, #herowrapper-m {
				background-image: url('../images/josh-tthc-2-2000.jpg');
			}
		}
		
		@media (max-height: 900px) {
			#herowrapper, #herowrapper-m {
				background-image: url('../images/josh-tthc-2-1800.jpg');
			}
		}
		
		@media (max-height: 780px) {
			#herowrapper, #herowrapper-m {
				background-image: url('../images/josh-tthc-2-1600.jpg');
			}
		}
		
		@media (max-height: 570px) {
			#herowrapper, #herowrapper-m {
				background-image: url('../images/josh-tthc-2-1200.jpg');
			}
		}
		
		@media (min-height: 2200px) {
			#herowrapper, #herowrapper-m {
			position: relative;
			}
		}
	
		#navspacer {
		position: relative;
		display: block;
		width: 100%;
		height: calc(100vh - 58px);
		}
		
		@media only screen and (min-height: 740px) {
			#herowrapper, #herowrapper-m {
			height: calc(100vh - 74px);
			}
			#navspacer {
			height: calc(100vh - 78px);
			}
		}
		
		
		
		@-moz-keyframes fadein {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}

		@-webkit-keyframes fadein {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}

		keyframes fadein {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}
		
		@-moz-keyframes fadeout {
		0%   {opacity: 1;}
		100% {opacity: 0;}
		}

		@-webkit-keyframes fadeout {
		0%   {opacity: 1;}
		100% {opacity: 0;}
		}

		keyframes fadeout {
		0%   {opacity: 1;}
		100% {opacity: 0;}
		}
		
		
		.e6eaf1 {

		background-image: url('../images/josh-drone-1688.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #f5f4f3;
		overflow: hidden;
		z-index: 2;
		opacity: 0;
		}
		
		.e6eaf1-anim {
		animation-name: fadein;
		animation-duration: 2s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 2.5s; /* Chrome, Safari, Opera */
		animation-delay: 2.5s;
		}
		
		@media (max-height: 1370px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-1400.jpg');
			}
		}
		
		@media (max-height: 1024px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-1100.jpg');
			}
		}
		
		@media (max-height: 780px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-800.jpg');
			}
		}
		
		@media (max-height: 570px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-600.jpg');
			}
		}
		
		.white {

		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
		z-index: 2;
		opacity: 0;
		}
		
		.white-anim {
		animation-name: fadeinoutwhite;
		animation-duration: 1s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
		-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
		animation-delay: 3s;
		}
		
		@-moz-keyframes fadeinoutwhite {
		0%   {opacity: 0;}
		50% {opacity: .5;}
		100% {opacity: 0;}
		}

		@-webkit-keyframes fadeinoutwhite {
		0%   {opacity: 0;}
		50% {opacity: .5;}
		100% {opacity: 0;}
		}

		keyframes fadeinoutwhite {
		0%   {opacity: 0;}
		50% {opacity: .5;}
		100% {opacity: 0;}
		}
		
		.cd1811 {

		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%; 
		background-color: #cd1811;
		overflow: hidden;
		z-index: 3;
		opacity: 0;
		}
		
		.cd1811-anim {
		animation-name: fadein, bckgndchange;
		animation-duration: 3s, 1s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
		-webkit-animation-delay: 6.5s, 14s; /* Chrome, Safari, Opera */
		animation-delay: 6.5s, 14s;
		}
		
		@-moz-keyframes bckgndchange {
		0%   {background-color: #5295ff;}
		100% {background-color: #cd1811;}
		}

		@-webkit-keyframes fadeinoutwhite {
		0%   {background-color: #5295ff;}
		100% {background-color: #cd1811;}
		}

		keyframes fadeinoutwhite {
		0%   {background-color: #5295ff;}
		100% {background-color: #cd1811;}
		}
		
		.final {

		background-image: url('../images/gasland-1688.jpg');
		background-size: cover;
		background-position: 46% center;
		background-repeat: no-repeat;
		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%; 
		background-color: #5295ff;
		overflow: hidden;
		z-index: 3;
		opacity: 0;
		}
		
		/*.final:before {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(155,120,65,.3);
		z-index: 4;
		}*/
		
		.final-anim {
		animation-name: fadein;
		animation-duration: 2s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
		-webkit-animation-delay: 12s; /* Chrome, Safari, Opera */
		animation-delay: 12s;
		}
		
		@media (max-height: 1370px) {
			.final{
				background-image: url('../images/gasland-1400.jpg');
			}
		}
		
		@media (max-height: 1024px) {
			.final {
				background-image: url('../images/gasland-1100.jpg');
			}
		}
		
		@media (max-height: 780px) {
			.final {
				background-image: url('../images/gasland-800.jpg');
			}
		}
		
		@media (max-height: 570px) {
			.final {
				background-image: url('../images/gasland-600.jpg');
			}
		}
		
		
		@-moz-keyframes fadein60 {
		0%   {opacity: 0;}
		100% {opacity: .8;}
		}

		@-webkit-keyframes fadein60 {
		0%   {opacity: 0;}
		100% {opacity: .8;}
		}

		keyframes fadein60 {
		0%   {opacity: 0;}
		100% {opacity: .8;}
		}
		
		@-moz-keyframes overlayslide_r {
		0%   {left: 100%;}
		100% {left: 0%;}
		}

		@-webkit-keyframes overlayslide_r {
		0%   {left: 100%;}
		100% {left: 0%;}
		}

		keyframes overlayslide_r {
		0%   {left: 100%;}
		100% {left: 0%;}
		}
		
		@-moz-keyframes overlayslide_l {
		0%   {left: 100%;}
		100% {left: 49.95%;}
		}

		@-webkit-keyframes overlayslide_l {
		0%   {left: 100%;}
		100% {left: 49.95%;}
		}

		keyframes overlayslide_l {
		0%   {left: 100%;}
		100% {left: 49.95%;}
		}
		
	/* LOGO ANIMATION */
	
		.mainlogo {

		background-image: url('../images/joshfoxlogo.svg');
		background-size: auto 40%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: -20%;
		left: 50%;
		margin-left: -15%;
		width:30%; 
		height:58px;
		line-height:0;
		display: block;
		overflow: hidden;
		z-index: 10;
		}
		
		.mainlogo-anim {
		animation-name: dropdownlogo;
		animation-duration: 1.5s;
		animation-iteration-count: 1;
		-webkit-animation-delay: 8.5s; /* Chrome, Safari, Opera */
		animation-delay: 8.5s;
		animation-fill-mode: none;
		}
		
		@media only screen and (min-aspect-ratio: 10/5) and (max-aspect-ratio: 12/5) {
			.mainlogo-anim {
			animation-name: dropdownlogo10-5;
			}
		}
		
		@media only screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 14/5) {
			.mainlogo-anim {
			animation-name: dropdownlogo12-5;
			}
		}
		
		@media only screen and (min-aspect-ratio: 14/5) {
			.mainlogo-anim {
			animation-name: dropdownlogo14-5;
			}
		}
		
		/* BELOW 10/5 */
		@-moz-keyframes dropdownlogo {
		0%   {top: -20%;}
		100% {top: 10.7%;}
		}

		@-webkit-keyframes dropdownlogo {
		0%   {top: -20%;}
		100% {top: 10.7%;}
		}
		
		keyframes dropdownlogo {
		0%   {top: -20%;}
		100% {top: 10.7%;}
		}
		
		/* 10/5 to 12/5 */
		@-moz-keyframes dropdownlogo10-5 {
		0%   {top: -20%;}
		100% {top: 11.7%;}
		}

		@-webkit-keyframes dropdownlogo10-5 {
		0%   {top: -20%;}
		100% {top: 11.7%;}
		}
		
		keyframes dropdownlogo10-5 {
		0%   {top: -20%;}
		100% {top: 11.7%;}
		}
		
		/* 12/5 to 14/5 */
		@-moz-keyframes dropdownlogo12-5 {
		0%   {top: -20%;}
		100% {top: 12.7%;}
		}

		@-webkit-keyframes dropdownlogo12-5 {
		0%   {top: -20%;}
		100% {top: 12.7%;}
		}
		
		keyframes dropdownlogo12-5 {
		0%   {top: -20%;}
		100% {top: 12.7%;}
		}
		
		/* ABOVE 14/5 */
		@-moz-keyframes dropdownlogo14-5 {
		0%   {top: -20%;}
		100% {top: 13.7%;}
		}

		@-webkit-keyframes dropdownlogo14-5 {
		0%   {top: -20%;}
		100% {top: 13.7%;}
		}
		
		keyframes dropdownlogo14-5 {
		0%   {top: -20%;}
		100% {top: 13.7%;}
		}
		
		.mainlogowhite {

		background-image: url('../images/joshfoxlogowht.svg');
		background-size: auto 40%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 10%;
		left: 50%;
		margin-left: -15%;
		width:30%; 
		height:58px;
		line-height:0;
		display: block;
		overflow: hidden;
		opacity: 0;
		z-index: 100;
		}
		
		.mainlogowhite-anim {
		animation-name: dropdownlogo, fadeinout;
		animation-duration: 1.5s, 4s;
		animation-iteration-count: 1;
		-webkit-animation-delay: 6.2s, 10s; /* Chrome, Safari, Opera */
		animation-delay: 6.2s, 10s;
		animation-fill-mode: forwards;
		}
		
		
		@media only screen and (min-aspect-ratio: 10/5) and (max-aspect-ratio: 12/5) {
			.mainlogowhite-anim {
			animation-name: dropdownlogo10-5, fadeinvid;
			}
		}
		
		@media only screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 14/5) {
			.mainlogowhite-anim {
			animation-name: dropdownlogo12-5, fadeinvid;
			}
		}
		
		@media only screen and (min-aspect-ratio: 14/5) {
			.mainlogowhite-anim {
			animation-name: dropdownlogo14-5, fadeinvid;
			}
		}
		
	/* BANJO ANIMATION */
	
		.artpos {

		position: relative;
		top: 50%;
		left: 50%;
		-ms-transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
		line-height:0;
		display: block;
		width: 100%;
		height: 0%;
		padding-bottom: 100%;
		overflow: visible;
		z-index: 8;
		}
		
		.artpos-anim {
		animation-name: transformposition;
		animation-duration: 10s;
		animation-iteration-count: 1;
		-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
		animation-delay: 1s;
		animation-fill-mode: forwards;
		}
		
		/* MS HACKS */
		
		/* EDGE */
		
		 @supports (-ms-ime-align:auto) {
			.artpos-anim {
				animation-name: mstransformposition;
				animation-duration: 10s;
				animation-iteration-count: 1;
				-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
				animation-delay: 1s;
				animation-fill-mode: forwards;
			}
		}
		
		/* IE 10+ */
		
		 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
			.artpos-anim {
				animation-name: mstransformposition;
				animation-duration: 10s;
				animation-iteration-count: 1;
				-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
				animation-delay: 1s;
				animation-fill-mode: forwards;
			}
		}

	
		/* BELOW 4/3 */
		
		-moz-keyframes transformposition {
		0%  {top: 50%; left: 100%; transform: translate(0%, -50%);}
		25% {top:  50%; left: 0%; transform: translate(0%, -50%);}
		50% {top:  50%; left: 0%; transform: translate(-1.5%, -50%);}
		100% {top:  80%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@-webkit-keyframes transformposition {
		0%  {top: 50%; left: 100%; transform: translate(0%, -50%);}
		25% {top:  50%; left: 0%; transform: translate(0%, -50%);}
		50% {top:  50%; left: 0%; transform: translate(-1.5%, -50%);}
		100% {top:  80%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@keyframes transformposition {
		0%  {top: 50%; left: 100%; transform: translate(0%, -50%);}
		25% {top:  50%; left: 0%; transform: translate(0%, -50%);}
		50% {top:  50%; left: 0%; transform: translate(-1.5%, -50%);}
		100% {top:  80%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* BELOW 4/3 (MS) */
		
		@keyframes mstransformposition {
		0%  {top: 50%; left: 0%; margin-left: 100%; transform: translate(0%, -50%);}
		25% {top:  50%; left: 0%; margin-left: 0%; transform: translate(0%, -50%);}
		50% {top:  50%; left: 0%; margin-left: 0%; transform: translate(-1.5%, -50%);}
		100% {top:  80%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}


		.artwork {

		background-image: url('/images/banjo_black10.svg');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		top: 0%;
		left: 100%;
		line-height:0;
		display: block;
		width: 150%;
		height: 0%;
		padding-bottom: 100%;
		overflow: visible;
		z-index: 1;
		transform-origin:26.3% 52%;
	   -webkit-transform-origin:26.3% 52%;
	   -ms-transform-origin:26.3% 52%;
		}
		
		.artwork-anim {
		animation:	transformimage 8s 1.5s forwards, 
					fadeout 1s 12s forwards;
		-webkit-animation:	transformimage 8s 1.5s forwards, 
							fadeout 1s 12s forwards;
		}
	
		-moz-keyframes transformimage {
		0%  {top: 0%; left: 100%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		25% {top:  0%; left: 15%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		40% {top:  0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		100% {top: 0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		}

		@-webkit-keyframes transformimage {
		0%  {top: 0%; left: 100%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		25% {top:  0%; left: 15%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		40% {top:  0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		100% {top: 0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		}

		@keyframes transformimage {
		0%  {top: 0%; left: 100%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		25% {top:  0%; left: 15%; width: 150%; padding-bottom: 100%; transform: rotate(0deg);}
		40% {top:  0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		100% {top: 0%; left: 0%; width: 208%; padding-bottom: 170%; transform: rotate(-90deg);}
		}

		
	/* TYPE ANIMATION */
		
		.joshfoxwrapper, .artwrapper, .andwrapper, .actionwrapper {

		position: absolute;
		top: 0px;
		height: 100%;
		width:100%;
		margin: 0 auto;
		line-height:0;
		overflow: hidden;
		display: block;
		z-index: 5;
		}
		
		.joshfoxwrapper-anim {
		display: block;
		}
		
		.head_art, .head_and, .head_action, .head_josh, .head_fox, .head_action_overlay {

		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height:0;
		display: block;
		opacity: 0;
		}
		
		.head_art, .head_and, .head_action, .head_action_overlay {

		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		}
		
		.head_josh, .head_fox {
		-ms-transform: translate(-49%, -50%);
		-webkit-transform: translate(-49%, -50%);
		transform: translate(-49%, -50%);
		}
		
		@-moz-keyframes dropdowntype {
		0%  {top: -20%;}
		10% {top: 0%;}
		90%  {top: 0%;}
		100% {top: 65%;}
		}

		@-webkit-keyframes dropdowntype {
		0%  {top: -20%;}
		10% {top: 0%;}
		90%  {top: 0%;}
		100% {top: 65%;}
		}

		keyframes dropdowntype {
		0%  {top: -20%;}
		10% {top: 0%;}
		90%  {top: 0%;}
		100% {top: 65%;}
		}
		
		@-moz-keyframes dropdownremaintype {
		0%  {top: -20%;}
		10% {top: 0%;}
		100%  {top: 0%;}
		}

		@-webkit-keyframes dropdownremaintype {
		0%  {top: -20%;}
		10% {top: 0%;}
		100%  {top: 0%;}
		}

		keyframes dropdownremaintype {
		0%  {top: -20%;}
		10% {top: 0%;}
		100%  {top: 0%;}
		}
				
				
				
		.head_josh {

		width: 135%;
		height:135%;
		background-image: url('../images/josh_custom_wht.svg');
		animation: 	fadein .5s 3s forwards,
					fadeout .5s 7s forwards, 
					fadein .5s 17.25s forwards; 
		-webkit-animation: 	fadein .5s 3s forwards,
							fadeout .5s 7s forwards, 
							fadein 1s 17.25s forwards;
		}
		
		.head_fox {

		width: 135%;
		height:135%;
		background-image: url('../images/fox_custom_wht.svg');
		animation: 	fadein .5s 3.5s forwards,
					fadeout .5s 7s forwards,
				 	fadein .5s 17.25s forwards; 
		-webkit-animation: 	fadein .5s 3.5s forwards,
							fadeout .5s 7s forwards,
				 			fadein 1s 17.25s forwards;
		}
		
		.head_art {

		width: 150%;
		height:150%;
		background-image: url('../images/art_custom_wht.svg');
		}
		
		.head_art-anim {
		animation-name: fadein, fadeout;
		animation-duration: .5s, .5s;
		animation-iteration-count: 1, 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 5.25s, 7s; /* Chrome, Safari, Opera */
		animation-delay: 5.25s, 7s;
		}
		
		.head_and {

		width: 135%;
		height:135%;
		background-image: url('../images/and_custom_cd1811.svg');
		}
		
		.head_and-anim {
		animation-name: fadeinout;
		animation-duration: 4s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 9s; /* Chrome, Safari, Opera */
		animation-delay: 9s;
		}
		
		.head_action {

		width: 112%;
		height:112%;
		background-image: url('../images/activism_custom-2_wht.svg');
		}
		
		.head_action-anim {
		animation-name: fadein;
		animation-duration: 2s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 12.5s; /* Chrome, Safari, Opera */
		animation-delay: 12.5s;
		}
		
		.head_action_overlay {

		width: 100%;
		height:100%;
		background-image: url('../images/activism_fullfeathrwt_wht.svg');
		z-index: 50;
		}
		
		.head_action_overlay-anim {
		animation-name: fadeinoverlay;
		animation-duration: 2s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 12.5s; /* Chrome, Safari, Opera */
		animation-delay: 12.5s;
		}
		
		@-moz-keyframes fadeinout {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		90% {opacity: 1;}
		100% {opacity: 0;}
		}

		@-webkit-keyframes fadeinout {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		90% {opacity: 1;}
		100% {opacity: 0;}
		}

		keyframes fadeinout {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		90% {opacity: 1;}
		100% {opacity: 0;}
		}
		
		@-moz-keyframes fadeinoutslow {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		30% {opacity: 1;}
		100% {opacity: 0;}
		}

		@-webkit-keyframes fadeinoutslow {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		30% {opacity: 1;}
		100% {opacity: 0;}
		}

		keyframes fadeinoutslow {
		0%   {opacity: 0;}
		10% {opacity: 1;}
		30% {opacity: 1;}
		100% {opacity: 0;}
		}
		
		@-moz-keyframes fadeinoverlay {
		0%   {opacity: 0;}
		100% {opacity: .7;}
		}

		@-webkit-keyframes fadeinoverlay {
		0%   {opacity: 0;}
		100% {opacity: .7;}
		}

		keyframes fadeinoverlay {
		0%   {opacity: 0;}
		100% {opacity: .7;}
		}
		
	
		
	/* VIDEO */
			
		#introvidwrapper {
		display: none;
		}
		
	/* NAV */
		
		a {
		outline: 0;
		}

		#preloadimg {
		display:none;
		}

		.preloadimg {
		display:none;
		}
		
		nav {
		position: relative;
		width: 100%;
		height: 78px;
		background-color: #fff;
		line-height: 0;
		z-index: 20;
		}
		
		nav_1col {
		position: relative;
		width: 100%;
		height: 58px;
		background-color: #fff;
		line-height: 0;
		z-index: 20;
		display: none;
		}
		
			@media only screen and (max-height: 740px) {
			nav {
			display: none !important;
			}
			nav_1col {
			display: block;
			}
			.fixed {
			height: 58px;
			}
			#navwrapper {
			height: 58px;
			}
		}
		
			@media only screen and (min-height: 741px) {
			nav {
			display: block;
			}
			nav_1col {
			display: none;
			}
			.fixed {
			height: 78px !important;
			}
			#navwrapper {
			height: 78px !important;
			}
		}
	
		#toprulewrapper {
		position: absolute;
		width: 100%;
		height: 58px;
		top: 0px;
		line-height: 0;
		overflow: visible;
		z-index: 70;
		}

		
		#undernavrule {
	
		position: absolute;
		top: 78px;
		left: 2%;
		background-color:#000;
		width: 96%;
		height:1.5vw;
		z-index: 70;
		}
		
		@media only screen and (max-height: 740px) {
			#undernavrule  {
			top: 58px;
			}
		}
		
		@media only screen and (max-width: 900px) {
			#undernavrule  {
			height:4vw;
			}
		}

			
		#navwrapper {
		position: relative;
		width: 100%;
		height: 58px;
		top: 0px;
		background-color: #fff;
		line-height: 0;
		overflow: hidden;
		z-index: 80;
		}
		
		.fixed {
		position: fixed;
		top: 0%;
		-ms-transform: translateZ(0);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		height: 58px;
		}
		

		.logo {
		background-image: url('../images/jfoxlogo_95876d.png');
		background-size: 120px 21px;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		opacity: 1;
		top: 18px;
		left: 2%;
		top: 50%;
		margin-top: -24px;
		width: 120px;
		height: 51px;
		z-index: 20;
		}
		
		.logo_1col {
		background-image: url('../images/jfoxlogo_95876d.png');
		background-size: 120px 21px;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		display: none;
		opacity: 1;
		top: 18px;
		left: 2%;
		top: 50%;
		margin-top: -24px;
		width: 120px;
		height: 51px;
		z-index: 20;
		}
		
		@media screen and (max-height: 740px) {
			.logo  {
			display: none;
			}
			.logo_1col  {
			display: block;
			}
		}
		
		.elementhide {
		display: none;
		}
		
		
/* HAMBURGER*/
	
		.hamburger3_overlay {
		  position: absolute;
		  width: 48px;
		  top: calc(100vh - 67px);
		  right: 2vw;
		  margin-right: -10px;
		  z-index: 999;
		  display: none;
		  }
		  
		.hamburger3_overlay_1col {
		  position: absolute;
		  width: 48px;
		  top: calc(100vh - 57px);
		  right: 2vw;
		  margin-right: 0px;
		  z-index: 999;
		  }
				
			@media only screen and (min-height: 740px) {
				.hamburger3_overlay  {
				display: block;
				}
				.hamburger3_overlay_1col  {
				display: none;
				}
			}
			
		.menuiconfixed {
		position: fixed;
		top: 11px;
		}
	
		@media only screen and (max-height: 740px) {
				.menuiconfixed {
				top: 2px;
				}
			}
		
	
		.c-hamburger3 {
		  display: block;
		  position: absolute;
		  right: 0px;
		  overflow: hidden;
		  margin: 0;
		  padding: 0;
		  width: 48px;
		  height: 48px;
		  font-size: 0;
		  text-indent: -9999px;
		  appearance: none;
		  box-shadow: none;
		  border-radius: none;
		  border: none;
		  cursor: pointer;
		  transition: background 0.3s;
		}

		.c-hamburger3:focus {
		  outline: none;
		}

		.c-hamburger3 span {
		  display: block;
		  position: absolute;
		  top: 28px;
		  left: 12px;
		  right: 12px;
		  height: 2px;
		  background-color: #595959;
		}

		.c-hamburger3 span::before,
		.c-hamburger3 span::after {
		  position: absolute;
		  display: block;
		  left: 0;
		  width: 100%;
		  height: 2px;
		  background-color: #595959;
		  content: "";
		}

		.c-hamburger3 span::before {
		  top: -7px;
		}

		.c-hamburger3 span::after {
		  bottom: -7px;
		}


		.c-hamburger3--htx {
		  background-color: rgba(0, 0, 0, 0);
		}

		.c-hamburger3--htx span {
		  transition: background 0s 0.3s;
		}

		.c-hamburger3--htx span::before,
		.c-hamburger3--htx span::after {
		  transition-duration: 0.3s, 0.3s;
		  transition-delay: 0.3s, 0s;
		}

		.c-hamburger3--htx span::before {
		  transition-property: top, transform;
		}

		.c-hamburger3--htx span::after {
		  transition-property: bottom, transform;
		}

	/* active state, i.e. menu open */

		.c-hamburger3--htx.is-active {
		  background-color: rgba(0, 0, 0, 0);
		}

		.c-hamburger3--htx.is-active span {
		  background: rgba(0, 0, 0, 0);
		}

		.c-hamburger3--htx.is-active span::before {
		  top: 0;
		  transform: rotate(45deg);
		  background-color: #fff;
		}

		.c-hamburger3--htx.is-active span::after {
		  bottom: 0;
		  transform: rotate(-45deg);
		  background-color: #fff;
		}

		.c-hamburger3--htx.is-active span::before,
		.c-hamburger3--htx.is-active span::after {
		  transition-delay: 0s, 0.3s;
		}
		
/* MAINTENANCE */

		#maintenance {
		    position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			text-align: center;
		}	
		
		.maintsoclinks {
			position: absolute;
			display: block;
			top: calc(100vh - 51px);
			right: 1vw;
			width: 140px;
			height: 25px;
			z-index: 777;
		}
		
		.maintsoclinks_1col {
		position: absolute;
		display: block;
		top: calc(100vh - 50px);
		right: 1vw;
		width: 140px;
		height: 25px;
		z-index: 777;
		}
		
		@media (min-height: 740px) {
			#toprulewrapper {
				height: 78px;
			}
		}
		
		@media only screen and (max-height: 740px) {
			.maintsoclinks {
				display: none;
				}
			}
		@media only screen and (min-height: 741px) {
			.maintsoclinks_1col {
				display: none;
			}
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
			.maintsoclinks {
				top: calc(100vh - 49px);
				width: 130px;
				height: 22px;
				}
			.maintsoclinks_1col {
				top: calc(100vh - 49px);
				width: 130px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 721px) {
			.maintsoclinks {
				top: calc(100vh - 48px);
				width: 120px;
				height: 20px;
				}
			.maintsoclinks_1col {
				top: calc(100vh - 46px);
				width: 120px;
				height: 20px;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
			.maintsoclinks {
				top: calc(100vh - 41px);
				width: 140px;
				height: 25px;
				}
			.maintsoclinks_1col {
				top: calc(100vh - 41px);
				width: 140px;
				height: 25px;
				}
			}
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 740px) {
			.maintsoclinks {
				top: calc(100vh - 39px);
				width: 130px;
				height: 22px;
				}
			.maintsoclinks_1col {
				top: calc(100vh - 39px);
				width: 130px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
			.maintsoclinks {
				top: calc(100vh - 38px);
				width: 120px;
				height: 20px;
				}
			.maintsoclinks_1col {
				top: calc(95vh - 10px);
				width: 120px;
				height: 20px;
				}
			}