*										{ margin: 0; }
html, body								{ height: 100%; }
body									{ background: #252525; color: #eee; font-size: 16px; font-family: Helvetica, sans-serif; }

b,strong								{ font-weight: bold; }
hr										{ box-shadow: 0px 1px 0 rgba(0,0,0,0.2); border-width: 1px; border-color: rgba(255,255,255,0.03); }

.app									{ position: relative; display: block; width: 100%; height: 100%; min-height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.top									{ position: fixed; top: 0; left: 0; width: 100%; z-index: 2; padding-bottom: 25px; }
.top i									{ position: absolute; z-index: 2; top: 0; display: none; font-size: 24px; padding: 20px; }
.top i:hover							{ cursor: pointer; background: #C00; }
.top i.back								{ left: 0; }
.top i.about							{ display: block; right: 0; }
.top .top-icons							{ position: relative; display: block; width: 500px; margin: 0 auto; }
.title									{ position: relative; display: block; width: 100%; box-sizing: border-box; padding: 25px; border-bottom: 1px solid #C00; background: rgba(23, 23, 23, 0.95); }
.title h1								{ position: relative; display: block; width: 100%; text-align: center; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; font-style: italic; }
.title h1 span							{ font-size: 14px; font-weight: bold; margin: 0 5px 0 10px; vertical-align: top; }
.title h2 								{ font-size: 9px; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin-top: 5px; color: rgba(255,255,255,0.5); line-height: 14px; }
.title h2 span.today					{ color: #fff; }

.info									{ position: relative; display: block; width: 100%; box-sizing: border-box; padding: 10px; background: #C00; color: #fff; text-align: center; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.content								{ position: relative; display: block; width: 100%; z-index: 1; }

.content .detail						{ position: absolute; display: none; width: 500px; margin: 0 auto; opacity: 0; z-index: -1; }
.content .detail.show					{ position: relative; display: block; opacity: 1; z-index: 2; }
.content .detail .outline				{ position: relative; display: block; width: 100%; box-sizing: border-box; padding: 20px; }
.content .detail .outline img			{ position: relative; max-width: 100%; }
.content .detail .title 				{ background: rgba(255,255,255,0.05); border: none; }
.content .detail .title .current		{ position: relative; display: block; width: 100%; text-align: center; font-style: italic; color: #fff; font-weight: bold; margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
.content .detail .future				{ position: relative; display: block; width: 100%; }
.content .detail .future ul				{ position: relative; display: block; width: 100%; margin: 0; padding: 0; list-style-type: none; }
.content .detail .future ul li			{ position: relative; display: block; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); box-sizing: border-box; padding: 20px; }
.content .detail .future ul li span		{ position: relative; display: block; width: 100%; }
.content .detail .future ul li .date	{ font-size: 12px; color: #c00; font-weight: bold; display: block; margin-bottom: 15px; box-sizing: border-box; font-style: italic; }
.content .detail .future ul li .text	{  }

.tracks									{ position: relative; display: block; width: 500px; list-style: none; margin: 0 auto; }
.tracks li								{ position: relative; display: block; width: 100%; font-size: 0; padding: 20px; border-bottom: 2px solid rgba(0,0,0,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0.05); box-sizing: border-box; line-height: 20px; opacity: 0; left: 0; }
.tracks li .outline						{ position: relative; display: inline-block; width: 35%; font-size: 12px; text-align: center; }
.tracks li .outline img					{ position: relative; max-width: 100%; }
.tracks li .text						{ position: relative; display: inline-block; width: 60%; font-size: 16px; margin-left: 5%; vertical-align: top; }
.tracks li .text span					{ display: block; color: #C00; font-weight: bold; }
.tracks li .text .track					{ display: block; margin-bottom: 5px; }
.tracks li .text .date					{ display: block; color: #888; font-size: 12px; margin-top: 5px; }
.tracks li .text .none					{ display: inline-block; color: #888; font-weight: normal; margin: 0; padding: 0; font-style: italic; }
.tracks li .map							{ position: relative; display: block; width: 100%; }
.tracks li.done							{ opacity: 1; }
.tracks li:active,
.tracks li:hover						{ background: rgba(255,255,255,0.05); cursor: pointer; }
.tracks li.rollout						{ left: -100%; opacity: 0; }

.popup									{ position: fixed; display: none; background: #333; box-shadow: 0 0 150px rgba(0,0,0,0.5); width: 100%; height: 100%; margin: 0; padding: 0; overflow-y: scroll; top: 0; left: 0; z-index: 10; -webkit-overflow-scrolling: touch; font-size: 14px; line-height: 22px; color: #aaa; text-align: center; z-index: 10; }
.popup i								{ position: absolute; top: 0; right: 0; font-size: 24px; color: #fff; display: block; padding: 20px; }
.popup i:hover							{ background: #fff; color: #333; cursor: pointer; }
.popup h1								{ display: block; text-align: center; text-transform: uppercase; font-style: italic; font-size: 24px; font-weight: bold; letter-spacing: -1px; margin: 20px 0; color: #fff; }
.popup h1:first-child					{ margin-top: 0; }
.popup a								{ color: #C00; }
.popup .popup-content					{ position: relative; display: block; width: 500px; margin: 0 auto; box-sizing: border-box; padding: 50px; }

.content .detail,
.tracks li {
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;

	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.content .detail.show,
.tracks li.done {
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	transform: scale(1.0);
}

@media screen and (max-width: 480px) {
	.tracks,
	.content .detail,
	.popup .popup-content				{ width: 100%; }
}

/* Loader */

.loader-loader {
	position: fixed;
	left: 50%;
	top: 50%;
	display: block;
	text-align: center;
	transform: translate3d(-50%, -50%, 0);
		-o-transform: translate3d(-50%, -50%, 0);
		-ms-transform: translate3d(-50%, -50%, 0);
		-webkit-transform: translate3d(-50%, -50%, 0);
		-moz-transform: translate3d(-50%, -50%, 0);
	perspective: 1200;
		-o-perspective: 1200;
		-ms-perspective: 1200;
		-webkit-perspective: 1200;
		-moz-perspective: 1200;
}

.loader-label {
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	margin-top: 15px;
}

.loader-flipper {
	position: relative;
	display: block;
	height: inherit;
	width: inherit;
		width: 100%;
		height: 24px;
	animation: loader-flip 1.2s infinite ease-in-out;
		-o-animation: loader-flip 1.2s infinite ease-in-out;
		-ms-animation: loader-flip 1.2s infinite ease-in-out;
		-webkit-animation: loader-flip 1.2s infinite ease-in-out;
		-moz-animation: loader-flip 1.2s infinite ease-in-out;
	transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
}

.loader-front,
.loader-back {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-color: rgb(204,0,0);
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
}

.loader-back {
	background-color: rgb(255,255,255);
	z-index: 800;
	transform: rotateY(-180deg);
		-o-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
}



@keyframes loader-flip {
	0% {
		transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-o-keyframes loader-flip {
	0% {
		-o-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-o-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-o-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-ms-keyframes loader-flip {
	0% {
		-ms-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-ms-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-ms-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-webkit-keyframes loader-flip {
	0% {
		-webkit-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-webkit-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-webkit-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@-moz-keyframes loader-flip {
	0% {
		-moz-transform: perspective(117px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		-moz-transform: perspective(117px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		-moz-transform: perspective(117px) rotateX(-180deg) rotateY(-179.9deg);
	}
}