/* 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;
		}
		
		.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;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				background-size: 22px 22px;
				width: 22px;
				height: 22px;
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 721px) {
			.mainsoclinks {
				top: calc(100vh - 48px);
				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;
				}
			.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;
				}
			.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;
				}
			.mainfb, .maintwtr, .mainmail, .maininst, .mainrddt {
				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;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
			.soclinksfixed {
				top: 29px;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
			.soclinksfixed {
				top: 17px;
				}
			}	
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 740px) {
			.soclinksfixed {
				top: 18px;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
			.soclinksfixed {
				top: 20px;
				}
			}
		@media only screen and (max-width: 1365px) and (min-height: 721px) {
			.soclinksfixed {
				top: 29px;
				}
			}
			
		.lowersoclinks {
		position: fixed;
		display: block;
		top: 27px;
		right: calc(2vw + 34px);
		width: 140px;
		height: 25px;
		z-index: 777;
		display: none;
		}
		
		.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 {

		background-image: url('../images/josh-tthc-2-2500.jpg');
		background-size: cover;
		background-position: 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;
    	-moz-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-width: 2200px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-2200.jpg');
			}
		}
		
		@media (max-width: 2000px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-2000.jpg');
			}
		}
		
		@media (max-width: 1800px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-1800.jpg');
			}
		}
		
		@media (max-width: 1600px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-1600.jpg');
			}
		}
		
		@media (max-width: 1400px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-1400.jpg');
			}
		}
		
		@media (max-width: 1200px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-1200.jpg');
			}
		}
		
		@media (max-width: 1000px) {
			#herowrapper {
				background-image: url('../images/josh-tthc-2-1000.jpg');
			}
		}
		
		@media (min-height: 740px) {
			#herowrapper  {
			height: calc(100vh - 78px);
			}
		}
	
		#navspacer {
		position: relative;
		display: block;
		height: calc(100vh - 58px);
		width: 100%;
		}
	
		@media only screen and (min-height: 740px) {
			#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-3000.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: 7s; /* Chrome, Safari, Opera */
		animation-delay: 7s;
		}
		
		@media (max-width: 2000px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-2000.jpg');
			}
		}
		
		@media (max-width: 1000px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-1000.jpg');
			}
		}
		
		@media (max-width: 700px) {
			.e6eaf1 {
				background-image: url('../images/josh-drone-700.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: 7.5s; /* Chrome, Safari, Opera */
		animation-delay: 7.5s;
		}
		
		@-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: 11s, 18.5s; /* Chrome, Safari, Opera */
		animation-delay: 11s, 18.5s;
		}
		
		@-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 SEQUENCE */
		
		.final {

		background-image: url('../images/gasland-3000.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%; 
		background-color: #5295ff;
		overflow: hidden;
		z-index: 9;
		opacity: 0;
		}
		
		.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: 18s; /* Chrome, Safari, Opera */
		animation-delay: 18s;
		}
		
		@media (max-width: 2000px) {
			.final {
				background-image: url('../images/gasland-2000.jpg');
			}
		}
		
		@media (max-width: 1000px) {
			.final {
				background-image: url('../images/gasland-1000.jpg');
			}
		}
		
		@media (max-width: 700px) {
			.final {
				background-image: url('../images/gasland-700.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: -50%;}
		100% {left: 0%;}
		}

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

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

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

		keyframes overlayslide_l {
		0%   {left: 100%;}
		100% {left: 50%;}
		}
		
		@-moz-keyframes overlayslide-delay_l {
		0%   {left: 100%;}
		40%  {left: 55%;}
		99%  {left: 55%;}
		100% {left: 49.95%;}
		}

		@-webkit-keyframes overlayslide-delay_l {
		0%   {left: 100%;}
		40%  {left: 55%;}
		99%  {left: 55%;}
		100% {left: 49.95%;}
		}

		keyframes overlayslide-delay_l {
		0%   {left: 100%;}
		40%  {left: 55%;}
		99%  {left: 55%;}
		100% {left: 49.95%;}
		}
		
	/* LOGO ANIMATION */
	
		.mainlogo {

		background-image: url('../images/joshfoxlogo.svg');
		background-size: auto 70%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: -20%;
		left: 50%;
		margin-left: -10%;
		width:20%; 
		height:5vh;
		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: 13s; /* Chrome, Safari, Opera */
		animation-delay: 13s;
		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 70%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 10%;
		left: 50%;
		margin-left: -10%;
		width:20%; 
		height:5vh;
		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: 10.7s, 14.5s; /* Chrome, Safari, Opera */
		animation-delay: 10.7s, 14.5s;
		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: 5.5s; /* Chrome, Safari, Opera */
		animation-delay: 5.5s;
		animation-fill-mode: forwards;
		}
	
		@media only screen  and (max-aspect-ratio: 4/3) {
			.artpos-anim {
			animation-name: transformposition4-3;
			}
		}
		
		@media only screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 10/6) {
			.artpos-anim {
			animation-name: transformposition10-6;
			}
		}
		
		@media only screen and (min-aspect-ratio: 10/6) and (max-aspect-ratio: 10/5) {
			.artpos-anim {
			animation-name: transformposition;
			}
		}
		
		@media only screen and (min-aspect-ratio: 10/5) and (max-aspect-ratio: 12/5) {
			.artpos-anim {
			animation-name: transformposition10-5;
			}
		}
		
		@media only screen and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 14/5) {
			.artpos-anim {
			animation-name: transformposition12-5;
			}
		}
		
		@media only screen and (min-aspect-ratio: 14/5) {
			#artpos-anim {
			animation-name: transformposition14-5;
			}
		}
		
		/* MS HACKS */
		
		/* EDGE */
		
		@supports (-ms-ime-align:auto) and (max-aspect-ratio: 4/3) {
			.artpos-anim {
				animation-name: mstransformposition4-3;
			}
		}
		
		@supports (-ms-ime-align:auto) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 10/6) {
			.artpos-anim {
				animation-name: mstransformposition10-6;
			}
		}
		
		@supports (-ms-ime-align:auto) and (min-aspect-ratio: 10/6) and (max-aspect-ratio: 10/5) {
			.artpos-anim {
				animation-name: mstransformposition;
			}
		}
		
		@supports (-ms-ime-align:auto) and (min-aspect-ratio: 10/5) and (max-aspect-ratio: 12/5) {
			.artpos-anim {
				animation-name: mstransformposition10-5;
			}
		}
		
		@supports (-ms-ime-align:auto) and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 14/5) {
			.artpos-anim {
				animation-name: mstransformposition12-5;
			}
		}
		
		@supports (-ms-ime-align:auto) and (min-aspect-ratio: 14/5) {
			.artpos-anim {
				animation-name: mstransformposition14-5;
			}
		}
		
		/* IE 10+ */
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (max-aspect-ratio: 4/3) {
			.artpos-anim {
				animation-name: mstransformposition4-3;
			}
		}
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 10/6) {
			.artpos-anim {
				animation-name: mstransformposition10-6;
			}
		}
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-aspect-ratio: 10/6) and (max-aspect-ratio: 10/5) {
			.artpos-anim {
				animation-name: mstransformposition;
			}
		}
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-aspect-ratio: 10/5) and (max-aspect-ratio: 12/5) {
			.artpos-anim {
				animation-name: mstransformposition10-5;
			}
		}
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-aspect-ratio: 12/5) and (max-aspect-ratio: 14/5) {
			.artpos-anim {
				animation-name: mstransformposition12-5;
			}
		}
		
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-aspect-ratio: 14/5) {
			.artpos-anim {
				animation-name: mstransformposition14-5;
			}
		}
		
		
		/* BELOW 4/3 */
		
		-moz-keyframes transformposition4-3 {
		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 transformposition4-3 {
		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 transformposition4-3 {
		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 mstransformposition4-3 {
		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%);}
		}
		
		/* 4/3 to 10/6 */
		
		-moz-keyframes transformposition10-6 {
		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:  95%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@-webkit-keyframes transformposition10-6 {
		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:  95%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@keyframes transformposition10-6 {
		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:  95%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 4/3 to 10/6 (MS) */
		
		@keyframes mstransformposition10-6 {
		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:  95%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 3/2 to 10/5 */
		
		-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:  110%; 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:  110%; 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:  110%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 3/2 to 10/5 (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:  110%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 10/5 to 12/5 */
		
		-moz-keyframes transformposition10-5 {
		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:  125%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@-webkit-keyframes transformposition10-5 {
		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:  125%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@keyframes transformposition10-5 {
		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:  125%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 10/5 to 12/5 (MS) */
		
		@keyframes mstransformposition10-5 {
		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:  125%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}	
		
		/* 12/5 to 14/5 */
		
		-moz-keyframes transformposition12-5 {
		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:  144%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@-webkit-keyframes transformposition12-5 {
		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:  144%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@keyframes transformposition12-5 {
		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:  144%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 12/5 to 14/5 (MS) */
		
		@keyframes mstransformposition12-5 {
		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:  144%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}		
	
	
		/* 14/5 AND ABOVE */
		
		-moz-keyframes transformposition14-5 {
		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:  155%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@-webkit-keyframes transformposition14-5 {
		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:  155%; left: 0%; transform: translate(-1.5%, 0%);}
		}

		@keyframes transformposition14-5 {
		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:  155%; left: 0%; transform: translate(-1.5%, 0%);}
		}
		
		/* 14/5 AND ABOVE (MS) */
		
		@keyframes mstransformposition14-5 {
		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:  155%; left: 0%; margin-left: 0%; transform: translate(-1.5%, 0%);}
		}	
		
		.artwork {

		background-image: url('http://eoe.vectorbornellc.netdna-cdn.com/testbed_jfox/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: 100%;
		height: 0%;
		padding-bottom: 100%;
		overflow: visible;
		z-index: 1;
		transform-origin:19% 52%;
	   -webkit-transform-origin:19% 52%;
	   -ms-transform-origin:19% 52%;
		}
		
		.artwork-anim {
		animation-name: transformimage;
		animation-duration: 8s;
		animation-iteration-count: 1;
		-webkit-animation-delay: 6s; /* Chrome, Safari, Opera */
		animation-delay: 6s;
		animation-fill-mode: forwards;
		}
	
		-moz-keyframes transformimage {
		0%  {top: 0%; left: 100%; width: 100%; padding-bottom: 100%; transform: rotate(0deg);}
		25% {top:  0%; left: 26%; width: 100%; padding-bottom: 100%; transform: rotate(0deg);}
		40% {top:  0%; left: 26%; width: 150%; padding-bottom: 150%; transform: rotate(-90deg);}
		100% {top: 0%; left: 26%; width: 150%; padding-bottom: 150%; transform: rotate(-90deg);}
		}

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

		@keyframes transformimage {
		0%  {top: 0%; left: 100%; width: 100%; padding-bottom: 100%; transform: rotate(0deg);}
		25% {top:  0%; left: 26%; width: 100%; padding-bottom: 100%; transform: rotate(0deg);}
		40% {top:  0%; left: 26%; width: 150%; padding-bottom: 150%; transform: rotate(-90deg);}
		100% {top: 0%; left: 26%; width: 150%; padding-bottom: 150%; 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 {
		animation-name: fadeout;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 4.5s; /* Chrome, Safari, Opera */
		animation-delay: 4.5s;
		}
		
		.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%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		line-height:0;
		display: block;
		opacity: 0;
		}
		
		@-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: 65%;
		height:65%;
		background-image: url('../images/josh_custom_horiz_wht.svg');
		animation-name: fadein;
		animation-duration: .5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
		animation-delay: 3s;
		}
		
		.head_fox {

		width: 65%;
		height:65%;
		background-image: url('../images/fox_custom_horiz_wht.svg');
		animation-name: fadein;
		animation-duration: .5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 3.5s; /* Chrome, Safari, Opera */
		animation-delay: 3.5s;
		}
		
		.head_art {

		width: 65%;
		height:65%;
		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: 70%;
		height:70%;
		background-image: url('../images/and_custom_cd1811.svg');
		z-index: 5;
		}
		
		.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: 100%;
		height:100%;
		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_custom-2_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 {
		dispay: none; 
		}
	
		
	/* NAV */
		
		a {
		outline: 0;
		}

		#preloadimg {
		display:none;
		}

		.preloadimg {
		display:none;
		}
		
		nav {
		position: relative;
		width: 100%;
		height: 58px;
		background-color: #fff;
		line-height: 0;
		z-index: 20;
		}
		
		nav_1col {
		display: none;
		}
	
		#toprulewrapper {
		position: absolute;
		width: 100%;
		height: 58px;
		top: 0px;
		line-height: 0;
		overflow: visible;
		z-index: 70;
		}
		
		#undernavrule {
	
		position: absolute;
		top: 58px;
		left: 2%;
		background-color:#000;
		width: 96%;
		height:1.5vw;
		z-index: 70;
		}
			
		#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: 80;
		}
		
		.logo_1col {
		display: none;
		}
		
		.elementhide {
		display: none;
		}
		
	/* HAMBURGER*/
	
		.hamburger3_overlay {
		  position: absolute;
		  width: 48px;
		  top: calc(100vh - 67px);
		  right: 2vw;
		  margin-right: -10px;
		  z-index: 999;
		  }
			
			@media only screen and (max-height: 740px) {
				.hamburger3_overlay {
				top: calc(100vh - 57px);
				}
			}
			
		.menuiconfixed {
		position: fixed;
		top: 11px;
		}
	
		@media only screen and (max-height: 740px) {
				.menuiconfixed {
				top: 0px;
				}
			}
			
		.hamburger3_overlay_1col {
		  display: none;
		  }
		
	
		.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;
		}
		

/* NAV MEDIA QUERIES */
	
		@media only screen and (max-width: 900px) {
			#undernavrule  {
			height: 3vw; ;
			}
		}
	
		@media only screen and (min-height: 740px) {
			nav {
			height: 78px !important;
			}
			.fixed {
			height: 78px;
			}
			#navwrapper {
			height: 78px;
			}
			#toprulewrapper  {
			height: 78px;
			}
			#undernavrule  {
			top: 78px;
			}
			#navwrapper  {
			height: 78px;
			}
			.logo  {
			top: 39px;
			}
		}
		
/* 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;
		}
		
		@media only screen and (min-width: 1366px) and (max-width: 1500px) and (min-height: 721px) {
			.maintsoclinks {
				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;
				}
			}
		@media only screen and (min-width: 1501px) and (max-height: 740px) {
			.maintsoclinks {
				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;
				}
			}
		@media only screen and (max-width: 1365px) and (max-height: 740px) {
			.maintsoclinks {
				top: calc(100vh - 38px);
				width: 120px;
				height: 20px;
				}
			}