@charset "UTF-8";
/* CSS Document */

#intro			{position:fixed;left:0px;top:0px;bottom:0px;right:0px; height:auto;z-index:10;background-color:#fff; overflow:hidden; text-align:center; opacity:1.0}

nav 			{position: fixed; left: 40px; top: 40px;z-index:99;}

@media (max-width: 400px) {		
	.contact		{ position: fixed; left: 40px; top: 40px;z-index:99;}	
	.locations 		{ position: fixed; left: 40px; bottom: 40px;}
	.logotype 		{ position: fixed; right: 40px; bottom: 40px; left: 40px; z-index:99;}	
	.logo			{ width:100%}
	.h1				{ font-family: "Gill Sans", "Gill Sans MT", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 11px; line-height: 18px; color: #fff; text-transform: uppercase; font-weight: 500; letter-spacing: 2px}

	#who		{ position: fixed; left: 40px; top: 120px; right: 40px; background: none;z-index: 10}	
	#what		{ position: fixed; left: 40px; top: 120px; right: 40px; background: none;z-index: 10}	
	#where		{ position: fixed; left: 40px; top: 120px; right: 40px; background: none;z-index: 10}	
	#how		{ position: fixed; left: 40px; top: 120px; right: 40px; background: none;z-index: 10}	

	.bgvid			{ position: fixed; left: -30%; width:200%; top: 0px; bottom:0px; z-index: 1}
	.grad			{ position: fixed; left: 0px; right:50%; top: 0px; z-index: 2}
	.lvid			{ height:100%;}

	.mv				{visibility: visible; display: block}
	.dv				{visibility: hidden; display: none;}
}
	

@media (min-width: 401px) and (max-width: 850px) {	
	.contact		{ position: fixed; left: 40px; top: 50px;z-index:99;}	
	.locations 		{ position: fixed; left: 50px; bottom: 50px;}
	.logotype 		{ position: fixed; right: 50px; bottom: 60px; left: 25%; z-index:99;}	
	.logo			{ width:100%}
	.h1				{ font-family: "Gill Sans", "Gill Sans MT", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 12px; line-height: 19px; color: #fff; text-transform: uppercase; font-weight: 500; letter-spacing: 2px}

	#who		{ position: fixed; left: 40px; top: 120px; width: 310px; background: none;z-index: 10}	
	#what		{ position: fixed; left: 40px; top: 120px; width: 310px; background: none;z-index: 10}	
	#where		{ position: fixed; left: 40px; top: 120px; width: 310px; background: none;z-index: 10}	
	#how		{ position: fixed; left: 40px; top: 120px; width: 310px; background: none;z-index: 10}		
	
	.bgvid			{ position: fixed; left: -20%; width:200%; top: 0px; bottom:0px; z-index: 1; overflow: hidden;}
	.grad			{ position: fixed; left: 0px; right:50%; top: 0px; z-index: 2}
	.lvid			{ height:100%;}

	.mv				{visibility: hidden; display: none;}
	.dv				{visibility: visible; display: block}
}
	
@media (min-width: 851px) {			
	.contact		{ position: fixed; left: 75px; top: 75px;z-index: 99}	
	.locations 		{ position: fixed; left: 75px; bottom: 75px;z-index: 10}
	.logotype 		{ position: fixed; right: 75px; top: 42.5%; left: 47.5%; z-index:99;}	
	.logo			{ width:100%}
	.h1				{ font-family: "Gill Sans", "Gill Sans MT", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 12px; line-height: 21px; color: #fff; text-transform: uppercase; font-weight: 500; letter-spacing: 2px}

	#who		{ position: fixed; left: 75px; top: 120px; width: 310px; background: none;z-index: 10}	
	#what		{ position: fixed; left: 75px; top: 120px; width: 310px; background: none;z-index: 10}	
	#where		{ position: fixed; left: 75px; top: 120px; width: 310px; background: none;z-index: 10}	
	#how		{ position: fixed; left: 75px; top: 120px; width: 310px; background: none;z-index: 10}	

	.bgvid			{ position: fixed; left: -20%; width:170%; top: -40%; bottom:0px; z-index: 1; overflow: hidden;}
	.grad			{ position: fixed; left: 0px; right:50%; top: 0px; z-index: 2}
	.lvid			{ width:100%;}
	
	.mv				{visibility: hidden; display: none;}
	.dv				{visibility: visible; display: block}
}	

.contrast	{ position: fixed; top: 0px; left: 0px; bottom:0px; right: 0px; background:#030a1c; z-index: 2; opacity: 0.15;}

.img	{width:100%}

body { background:#fff;}

	.h2				{ font-family: "Gill Sans", "Gill Sans MT", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 13px; line-height: 20px; color: #fff; text-transform:none; font-weight: 500; letter-spacing: 1px}

.li	{margin-right: 20px;}

	a.li:link 		{text-decoration:none; border:none; color: #fff; margin-right: 20px;}
	a.li:visited	{text-decoration:none; border:none; color: #fff}
	a.li:hover 		{text-decoration:none; border-top: 1px solid; padding-top: 4px; color: #fff; opacity: 0.9}
	a.li:active 	{text-decoration:none; border:none; color: #fff;}

	a.l2:link 		{text-decoration:none; border:none; color: #fff; margin-right: 0px;}
	a.l2:visited	{text-decoration:none; border:none; color: #fff;}
	a.l2:hover 		{text-decoration:none; border:none; color: #fff; opacity: 0.7}
	a.l2:active 	{text-decoration:none; border:none; color: #fff;}