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




*{	
	padding: 0;
	margin: 0;
	
	}
	
	
html, body {
	max-height: 100%;
	font-family:"Source Sans Pro", Arial, Helvetica, sans-serif;
	background: #2d3c52;

	}
	
body {
	-webkit-text-size-adjust:100%;
	letter-spacing: .3pt;
	color: #fff;
	}
	
p {
	margin-bottom: .5em;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.4em;
	text-align:center;
	}
	
p.bio {
	color:#fff;
	}


	
a{ 
	text-decoration: none;
	font-weight:400;
	color: #51ccba;

	/*text-transform:uppercase;*/
	}


a:hover {
	color: #6b62d9;


}
	
a.button {
	display: inline-block;
	text-align:center;
	background:#51ccba;
	color:#ffffff;
	min-width:60px;
	padding:11px 20px 13px;
	margin: 0px 5px 20px;
	border-radius:3px;
	}
	
a.button:hover {
	background:#52a3cc;
	}
	
h3 a {
	color: #6b62d9;
	background-image:url(../images/external_arrow-01.svg);
	background-position: center right;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	padding-right: 20px;
	}
	
h3 a:hover {
	color: #51ccba;
	background-image:url(../images/external_arrow-02.svg);
	background-size: 16px 16px;
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 20px;
	}
	
	
li {
	list-style-type: none;
	}



.button, a {
	transition:all .1s ease-out;
	}



.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #211f33;
}



/*=================*/
.loader-positioner{
	margin: 0px auto;
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%); 
	width: 5em;
  	height: 5em;
	}

.loader {
  position: relative;
  border-top: .5em solid rgba(107, 98, 217, 0.1);
  border-right: .5em solid rgba(107, 98, 217, 0.1);
  border-bottom: .5em solid rgba(107, 98, 217, 0.1);
  border-left: .5em solid #6b62d9;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 .5s infinite linear;
  animation: load8 .5s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 4em;
  height: 4em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*===============================*/


/*===== OUTER-WRAPPER ====*/

#outer-wrapper { /*THE THINGS I DO FOR A STICKY FOOTER*/
	min-height: 100%;
	
	}

/*===== CONTENT =====*/
	
		
	#content {
		display:block;
		float: left;
		width:100%;
		font-size: 1em;
		font-weight:300;
		text-align:center;
		}
	
	.inner-wrapper{
		margin: 0px auto;
		display:block;
		width:920px;
		}
	
	.divider{
		background:#393473;
		/*background:rgba(0,0,0,.4);*/
		width:100%;
		height:1px; 
		margin:auto;	
		}
		
	.band {
		display:block;
		float: left;
		min-height:200px;
		width:100%; 
		padding: 40px 5%; 
		box-sizing:border-box;	
		}
		
	/* This style setup is downright terrible */
	
	.text {
		float:left;
		width:420px;
		}
		
	.one .text { /* Positions the "Slide Tiles" text more favorabley when next to the iPhone mockup*/
		padding-top: 55px;
		}
		
		
	.zero {
		/*background: linear-gradient(to bottom, rgba(33,33,33,1) 0%, rgba(55,55,55,1) 100%);*/
		background-image: url("../images/arena-draft-bg-tile.png");
		background-repeat: repeat-x repeat-y;
		background-size:140px;
		}

	.zero a.button {
		color:#ffffff;
		background:#333333;
		}
	
	.zero a.button:hover {
		background:#444444;
		}

	.zero p {
	
		color:#ffffff;
	}

		
	.one {
		/*background: -webkit-linear-gradient(top, rgba(33,31,51,1) 0%, rgba(53,49,89,1) 100%);*/
		background: linear-gradient(to bottom, rgba(33,31,51,1) 0%, rgba(58,53,97,1) 70%);
		}
	
	
	.two {
		
		/*background: -webkit-linear-gradient(top, rgba(28,37,51,1) 0%, rgba(41,57,82,1) 100%);*/
		background: linear-gradient(to bottom, rgba(28,37,51,1) 0%, rgba(41,57,82,1) 70%);
		}
	
	.outer-wrapper {

		}
	
	.separator {
		background-image: url(../images/Fifteen_tvOS_arrows.gif), url(../images/tvOS_photo_cropped.png);
		background-color:  #24223d;
		background-size: 660px, 660px;
		background-repeat: no-repeat, no-repeat;
		background-position: bottom center, bottom center;
		height: 430px;
		padding-top:2em;
		}
		
		
	.separator .text {
		float: none;
		width: 500px;
		margin: 0px auto 0px;

		}
	
	.three {
		/*background: -webkit-linear-gradient(top, rgba(19,41,36,1) 0%, rgba(33,64,57,1) 100%);*/

		}
	
	
	.stuff {
		max-width: 790px;
		margin:auto;
		color: #52a3cc;
		}
	
	
	
	#intro {
		margin-bottom:10px;
		
		}
		

/*===== WORK =====*/
		
		
	.blurb {
		display: block;
		float: left;
		overflow: hidden;
		width: 44%;
		margin: 10px 0px;
		padding: 0px 2.9%;
		}
		
	.blurb:nth-child(4) {
		border-left: 1px solid #374b7b;
		}
	
	.blurb:nth-child(6) {
		float: none;
		margin: 30px auto 0px;
		}
		
		
/*===== Footer =====*/



	#footer-wrapper{
		clear: both;
		padding: 0px 0px 10px;
		overflow: hidden;
		background: #191919;
		}
		
		
	#footer{
		display: block;
		width: 100%;
		margin: 0px auto;
		padding-top: 30px;
		padding-bottom:10px;
		text-align:center;
		font-weight: 200;
		color:#5fa0c2;
		min-height: 120px;
		
		}
		

		
		
	select{
		display:none;
		}

	#bottom-nav {
		display:block;
		float: left;
		min-width: 250px;
		}
	
	#bottom-nav li a {
		display: block;
		float: left;
		margin-right: 20px;
		padding-bottom: 5px;
		font-size: 9pt;
		font-weight:600;
		color: #bbb;
		text-transform:uppercase;
		
		}
		
	#bottom-nav li a:hover {
		color: #fff;
		
		}
		
	#social { 
		display: block;
		width: 190px;
		float: left;
		padding-right: 8px;
		margin-top: -8px;
		}

	#social li a{ 
		display: block;
		float: left;
		height: 30px;
		width: 30px;
		margin-left: 8px;
		border-radius: 1px;
		text-align: center;
		}
		
	#social li a:hover {
		background: #333;
		}
		
	#social li a img {
		display: block;
		float: left;
		height: 30px;
		width: 30px;
		}

	.copyright {
		float: right;
		display: block;
		width: 180px;
		text-align: center;
		font-weight: 400;
		color: #666;
		}


/*===== Headings =====*/
	
	
	h1	{
		font-weight: 400;
		color: #6b62d9;
		font-size: 2.3em;
		padding-bottom: .5em;
		text-transform: uppercase;
		letter-spacing: 3pt;
		text-align: center;
		vertical-align: middle;
		}


	h1.arena-draft{
		color:#ffffff; 
		font-size:2.8em; 
		line-height:1em; 
		padding-top:.25em; 
		font-weight: bold; 
		font-family: Cochin, Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;			
	}
	
	
	h2 {
		font-size: 1.7em;
		font-weight: 400;	
		color: #6b62d9;
		letter-spacing: 2pt;
		padding-bottom: .5em;

		}
	
	h3 {
		font-size: 1.3em;
		color: #6b62d9;
		font-weight: 600;
		}

		
	h4 {
		color: #52a3cc;
		font-size: 1.1em;
		font-weight: 400;
		font-style:italic;
		margin-bottom:.25em;
		}

	strong {
		font-weight:600 !important;
		}
		
	.description { 
		text-align:center;
		font-size:1.2em;
		line-height:1.5em;
		color: #52a3cc;
		font-weight: 200;
		margin-bottom:20px;
	}
		
	
	
	img.phone {
		display: block;
		width: 500px; 
		border: 0px solid #000;
		margin-top: 50px;
		background-image: url(../images/iPhone6_skewed_gameplay_3.gif), url(../images/iphone6.png);
		background-size: contain, contain;
		background-repeat: no-repeat, no-repeat;
		background-position: top center, top center;
		}
		
		

	img.team {
		max-width: 180px;
		border-radius: 100px;
		margin-bottom: .75em;
		}

		
		
/*===== FADE ANIMATION =====*/	
	
	#content {
	animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */
	}


	@keyframes fadein {
    	from {opacity:0;}
    	to {opacity:1;}
	}
	
	@-moz-keyframes fadein { /* Firefox */
    	from {opacity:0;}
    	to {opacity:1;}
	}
	
	@-webkit-keyframes fadein { /* Safari and Chrome */
    	from {opacity:0;}
    	to {opacity:1;}
	}
	
	@-o-keyframes fadein { /* Opera */
    	from {opacity:0;}
    	to {opacity: 1;}
	}
	
	
	
@media only screen and (max-width: 980px) {
	
	.text, .one .text {
		width: 100%;
	}
	
	.one .text { /* Removes extra padding that was needed on desktop */
		padding-top: 25px;
		}
	
	.separator, .outer-wrapper {
		background-size:620px;
		height: 420px;
		padding-top:2em;
		}
	
	.separator .text  {
		margin: 0px auto 0px;
		width:100%;
	}

	.inner-wrapper{
		margin: 0px;
		display: block;
		width:auto;
	}
	
	a.button {
		margin-top: 0px;
	}

	
	img.phone {
		clear: both;
		display: block; 
		width: 100%;
		max-width: 320px;
		margin: 0px auto 0px;
	}

	#footer{
		padding-top: 30px;
		height: auto;
		}
		
}
	
	
	
	
	
@media only screen and (max-width: 640px) {
	
	
	h1	{
		font-size: 1.6em;
		letter-spacing: 2pt;
		}
	h1.arena-draft{
		font-size:2.0em; 
		line-height:1em; 	
	}
	
	
	h2 {
		font-size: 1.3em;
		letter-spacing: 1pt;
		}
	
	h3 {
		font-size: 1.1em;
		}

		
	h4 {
		font-size: 1.1em;
		}
	
	.separator, .outer-wrapper {
		background-size:360px;
		height: 260px;
		padding-top:1.5em;
		}
	
	.separator .text  {
		margin: 0px auto 0px;
		width:100%;
	}
	
	.description { 
		text-align:center;
		font-size:1.1em;
		line-height:1.4em;
	}
	
	#content {
		display: block;
		float:left;
		margin: auto;
		width: 100%;
		padding: 0px;
		}
	
	.blurb {
		clear: both;
		margin: auto;
		width: 95%;
		border-left: none!important;
		}
		
	.blurb:nth-child(4), .blurb:nth-child(6) {
		border-top: 1px solid #374b7b;
		padding-top: 1.5em;
		margin-top: 1.5em;
		}
	
		
}