/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1.2;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/******************************/

@font-face {
 font-family: 'FontAwesome';
 src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
 src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
      url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
      url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
      url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
      url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

.fa {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 transform: translate(0, 0);
}

#expandDown {
  font-size: 1.2em;
  margin-left: 0.2em;
}

/*
#expandDown:before {
  content: "\f107";
}
*/

* {
  box-sizing: border-box;
  border-collapse: separate;
}

body, html {
  height: 100%;
}

body {
  color: #ffffff;
  background-color: #000000;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5em;
  /*animation: riseandset 500s forwards linear infinite;*/
}

@keyframes riseandset{
	0%{background-color: #060B15;}
	50%{background-color: #7898E2;}
	100%{background-color: #060B15;}
}

@keyframes riseandsetstroke{
	0%{stroke: #FFD279;}
	50%{stroke: #201B06;}
	100%{stroke: #FFD279;}
}

h1 {
  font-size: 3.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

p.credits {
	padding: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

span.strong {
	font-weight: 700;
}

a {
  color: #ffffff;
  text-decoration-line: underline;
  text-decoration-color: #ffffff;
  text-decoration-style: solid;
  transition: color 0.4s ease-in-out, text-decoration-color 0.4s ease-in-out;
}

a:hover {
  color: #FFD279;
  text-decoration-color: #ffffff;
}

a:active {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

a:visited {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

a:visited:hover {
  color: #FFD279;
  text-decoration-color: #ffffff;
}

#wrapper {
	background-color: #000;
	color: rgb(255,255,255);
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.5s linear 1s, color 0.5s linear 1s;
	overflow: hidden; /* Hide scrollbars */
}

#loaderSpinnerSVG{
	/*top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
}

#loaderSpinner{
	stroke: #fff;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000px;
	transition: opacity 2s ease-in, stroke 0.5s linear 1s, stroke-dasharray 1s ease-in-out, stroke-dashoffset 1s ease-in-out;
	animation: rotate 15s forwards linear infinite;
	transform-origin: center;
	z-index: 1;
	opacity: 1;
      /*
      stroke-dasharray:300;
      -webkit-animation: spin 10s ease-in-out infinite;
      -moz-animation: spin 10s ease-in-out infinite;
      -o-animation: spin 10s ease-in-out infinite;
      animation: spin 10s linear forwards infinite;
      stroke-dashoffset:1px;*/
}

#playbackSpinner{
	opacity: 0;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000px;
	stroke-width: 2px;
	transition: opacity 2s ease-out;
	z-index: 2;
}

@keyframes rotate{
	0%{transform: rotate(360deg);}
	100%{transform: rotate(0deg);}
}

@keyframes spin{
	0%{stroke-dasharray: 300; stroke-dashoffset:1px;}
	10%{stroke-width:2px;}
	50%{stroke-dasharray: 300; stroke-width:15px;}
	90%{stroke-width:2px;}
	100%{stroke-dasharray: 300; stroke-dashoffset:600px;}
}
  /*@-webkit-keyframes spin{
      0%{stroke-dashoffset:1px; stroke-width:2px;}
      50%{stroke-dashoffset:100%; stroke-width:2px;}
      100%{stroke-dashoffset:1px; stroke-width:2px;}
  }*/
#oscope{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 1s ease-in-out;
	z-index: 3;
}

#text{
	position: absolute;
	top: 0;
	left: 0;
	padding: 1em;
}

.loadPlayText{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
	font-size: 4em;
	text-shadow: 0 0 20px black;
	background-color: rgba(0,0,0,0.6);
	padding: 0.1em;
	border-radius: 50% 50%;
}

#playText{
	cursor: pointer;
}

#fidelityPopup{
	display: block;
	padding: 2em;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 1.1em;
	background-color: rgba(0,0,0,0.8);
	z-index: 10;
	transform: translate(0, 100%);
	opacity: 0;
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

#expandExtraInfo{
	cursor: pointer;
	z-index: 11;
}

#extraInfo{
	display: block;
	margin-left: 1em;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	position: relative;
	transform: translate(0, -100%);
	opacity: 0;
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	z-index: 12;
	visibility: hidden;
}

.creditspage{
	background-color: #000000;
	animation: setbackcolor 0.5s ease-out forwards;
	animation-delay: 3s;
	overflow-x: hidden;
}

#creditswrapper{
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	padding: 3em;
	background-color: rgba(0,0,0,0.8);
}

#creditscontent{
	padding-left: 1em;
	font-family: 'Roboto', sans-serif;
	animation: setfontcolor 0.5s ease-out forwards;
	animation-delay: 3s;
}

#creditscontent>p:nth-child(odd){
	transform: translateX(-500px);
	opacity: 0;
	transition: opacity 1s ease-out, transform 1s ease-out;
	animation: slidein 1s ease-out forwards;
}

#creditscontent>p:nth-child(even){
	transform: translateX(500px);
	opacity: 0;
	transition: opacity 1s ease-out, transform 1s ease-out;
	animation: slidein 1s ease-out forwards;
}

#creditscontent>p:nth-child(1){
	animation-delay: 0.3s;
}

#creditscontent>p:nth-child(2){
	animation-delay: 0.6s;
}

#creditscontent>p:nth-child(3){
	animation-delay: 0.9s;
}

#creditscontent>p:nth-child(4){
	animation-delay: 1.2s;
}

#creditscontent>p:nth-child(5){
	animation-delay: 1.5s;
}

#creditscontent>p:nth-child(6){
	animation-delay: 1.8s;
}

#creditscontent>p:nth-child(7){
	animation-delay: 2.1s;
}

@keyframes slidein{
	0%{;}
	100%{opacity: 1; transform: translateX(0px);}
}

@keyframes setfontcolor{
	0%{;}
	100%{color: #FFD279; stroke: #FFD279;}
}

@keyframes setbackcolor{
	0%{;}
	100%{background-color: #060B15;}
}

#creditspinner1 {
	position: fixed;
	top: -40%;
	left: 10%;
	z-index: -1;
}

#creditspinner2 {
	position: fixed;
	top: 18%;
	right: -20%;
	z-index: -1;
}

#creditspinner3 {
	position: fixed;
	bottom: -20%;
	left: -12%;
	z-index: -1;
}

.creditspinner {
	stroke: #fff;
	stroke-dasharray: 300;
	stroke-dashoffset: 1px;
	animation: spin 30s linear forwards infinite, setfontcolor 1s ease-out forwards;
	animation-delay: 3s;
}

@media (max-width: 1024px) {
	body{
		font-size: 1em;
	}

}