html { min-height: 100%; }
body {
	height: 100%;
	background-color: #0e0e0c;
	background-image: url('../images/tt2/bkg-gradient.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	z-index: 1;
}

	#nodes {
		z-index: -1;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		background-image: url('../images/tt2/bkg-nodes.png');
		background-position: center top;
		background-repeat: no-repeat;
	}
	
	.accent {
		position: absolute;
		top: 750px; left: 0;
	}

#wrap {
	width: 1000px;
	margin: 15px auto 50px auto;
}



a {
	color: #2899c3;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: all 0.3s;  
	-moz-transition: all 0.3s;  
	-o-transition: all 0.3s;  
	transition: all 0.3s;
}

	#retFooter h2 { line-height: 18px; }
	#retFooter a#logo { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }

	a:hover {
		color: #f77a30;
	}
	
a#btnPlay {
	display: none;
	width: 168px; height: 102px;
	position: absolute;
	top: 164px; right: 198px;
	background-image: url('../images/tt2/btn-play.png');
	background-size: 100%;
	background-position-y: 102px;
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
}

	a#btnPlay:active { background-position-y: 204px; }
	
a#btnAppStore {
	display: none;
	width: 240px; height: 102px;
	position: absolute;
	top: 164px; right: 126px;
	background-image: url('../images/tt2/btn-appstore-lg.png');
	background-size: 100%;
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
}

ul#nav {
	width: 100%; height: 58px;
	margin: 0 0 10px -1px;
	background-color: #343330;
	border: 1px solid #44433f;
	white-space: nowrap;
	line-height: 58px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	text-align: center;
	color: #fff;
}

	ul#nav li {
		list-style: none;
		display: block; float: left;
		width: 142px; height: 100%;
		border-right: 1px solid #44433f;
		-webkit-transition: all 0.3s;  
		-moz-transition: all 0.3s;  
		-o-transition: all 0.3s;  
		transition: all 0.3s;
	}
	
		ul#nav li:hover { background-color: #c2c1c1; color: #343330; text-shadow: none; }
		
		ul#nav li.active { background-color: #262523; }
			
			ul#nav li.active:hover { background-color: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); }
	
		ul#nav li:last-child { border: 0; }
		
		ul#nav li a { color: inherit; text-decoration: none; display: block; height: 100%;}
		
		ul#nav li a {
			-webkit-transition: none;  
			-moz-transition: none;  
			-o-transition: none;  
			transition: none;
		}
		
		ul#nav .icnTT, ul#nav .icnRetro {
			display: inline-block;
			width: 35px; height: 35px;
			background-size: 100%;
			background-position-y: 70px;
			vertical-align: middle;
		}
		
			ul#nav .icnTT { background-image: url('../images/tt2/icn-ttlogo.png'); }
		
			ul#nav .icnRetro { background-image: url('../images/tt2/icn-retrologo.png'); }
		
			ul#nav a:hover .icnTT, ul#nav a:hover .icnRetro { background-position-y: 35px; }
				
				ul#nav li.active a:hover .icnTT, ul#nav li.active a:hover .icnRetro { background-position-y: 70px; }

img#ready {
	position: absolute;
	top: 160px; right: 15px;
	display: none;
}
	
h2 {
	font-size: 32px; line-height: 38px;
	margin: 0 0 22px 0;
}

p {
	font-size: 12px;
	line-height: 14px;
}

#videoBox {
	display: none;
}

#videoBox #videoWrap {
	position: relative;
}
	
/* Lower Type */
#lowerType {
	width: 940px; min-height: 250px;
	margin: 0 auto;
	text-shadow: 0 -1px 1px #000;
}

	#lowerType div { display: none; }

	#lowerType h2 { width: 440px; }

	#lowerType hr {
		width: 440px; height: 1px;
		margin: 0 0 30px 0;
		border: 0;
		background-color: #44433f;
		color: #44433f;
	}
	
	#lowerType .appStoreBadge {
		float: left;
		margin-right: 10px;
	}
	
	#lowerType .appStoreCopy {
		height: 49px;
		display: table-cell;
		vertical-align: middle;
	}
	
	#lowerType #aside {
		width: 382px;
		float: right;
		font-size: 16px; line-height: 24px;
	}
	
		#lowerType #aside span {
			color: #4fc357;
			font-weight: bold;
		}
	
#carousel { position: relative; margin: 0 0 60px -1px;}
		
.swiper-nav {
	width: 695px; height: 45px;
	position: absolute;
	bottom: -22px; left: 152px;
    text-align: justify;
}

	.swiper-pagination-switch, .btnClose {
	    width: 43px;
	    height: 43px;
	    vertical-align: top;
	    display: inline-block;
	    background-color: #343330;
	    border-radius: 22.5px;
	    border: 1px solid #44433f;
	    -webkit-transition: all 0.3s;  
		-moz-transition: all 0.3s;  
		-o-transition: all 0.3s;  
		transition: all 0.3s;
		position: relative;
		cursor: pointer;
	}
	
		.btnClose {
			position: absolute;
			top: -20px; right: -20px;
			box-shadow: 0px 0px 15px rgba(0,0,0,0.6);
		}
	
		.btnClose:hover { background-color: #c2c1c1; }
	
		.swiper-pagination-switch:hover .switch-icn, .btnClose:hover .switch-icn { background-position-y: 31px; }
	
		.swiper-pagination-switch:nth-of-type(1):hover { background-color: #4fc357; }
		.swiper-pagination-switch:nth-of-type(2):hover { background-color: #2899c3; }
		.swiper-pagination-switch:nth-of-type(3):hover { background-color: #f77a30; }
		.swiper-pagination-switch:nth-of-type(4):hover { background-color: #4fc357; }
		.swiper-pagination-switch:nth-of-type(5):hover { background-color: #2899c3; }
	
		.switch-icn {
			width: 31px; height: 31px;
			position: absolute;
			top: 6px; left: 6px;
			background-size: 100%;
			background-position-y: 62px;
			-webkit-transition: all 0.3s;  
			-moz-transition: all 0.3s;  
			-o-transition: all 0.3s;  
			transition: all 0.3s;
		}
	
	.swiper-active-switch {
		background-color: #c2c1c1;
	}
	
		.swiper-active-switch .switch-icn { background-position-y: 31px; }
	
	.stretch {
	    width: 100%;
	    display: inline-block;
	    font-size: 0;
	    line-height: 0;
	}
	

/*
	Navigation styles (icons along the bottom)
	Personally I'd set the width and height for each using the selectors below, set universal properties like background-size, etc in .swiper-pagination switch
*/

.swiper-pagination-switch:nth-child(1) .switch-icn {
	background-image: url('../images/tt2/icn-play.png');
}

.swiper-pagination-switch:nth-child(2) .switch-icn {
	background-image: url('../images/tt2/icn-midi.png');
}

.swiper-pagination-switch:nth-child(3) .switch-icn {
	background-image: url('../images/tt2/icn-timeline.png');
}

.swiper-pagination-switch:nth-child(4) .switch-icn {
	background-image: url('../images/tt2/icn-ttready.png');
}

.swiper-pagination-switch:nth-child(5) .switch-icn {
	background-image: url('../images/tt2/icn-session.png');
}

.btnClose .switch-icn {
	background-image: url('../images/tt2/icn-close.png');
}


/* Carousel Dimensions */
.swiper-container, .swiper-slide {
	width: 1000px; height: 450px;
}


/* Some utilities */
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;

	-moz-transition-property:-moz-transform;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;

	-o-transition-property:-o-transform;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;

	-ms-transition-property:-ms-transform;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;

	transition-property:transform;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;
}
.swiper-slide {
	position: relative;
	float:left;
	-webkit-transform:translate3d(0,0,0);
}

.swiper-container { border: 1px solid #44433f; }