body {
	margin:0;
	padding:0;
	background:#000;
}

header {
	position:fixed; 
	display:flex; 
	align-items:center; 
	justify-content:space-between;
	flex-direction:column;
	width:100%; 
	height:60px; 
	background:#000; 
	z-index:6;
	top:0;
}

header img {
	margin-top:5px;
	max-height:25px;
}

header #menu {
	color:#FFF;
    width:100%;
    display:inline-flex;
    justify-content:space-around;
    font-family:Oswald, sans-serif;
}

header #menu span {
	flex-grow:1;
	cursor:pointer;
    text-align:center;
    opacity:0.3;

    transition:500ms;
}

header #menu span.active {
	opacity:1;
}

header #menu #hard {
	background-color:#A61F17;
}

header #menu #heart {
	background-color:#3DBFE3;
}

header #menu #hope {
	background-color:#82C617;
}

header #menu #hype {
	background-color:#F6B039;
}

#info {
	display:none !important;
}

#log {
	position:fixed;
	bottom:0;
	width:100%;
	height:20px;
	z-index:7;
	background-color:red;
	color:white;
	text-align:center;
}

#player {
	width:100%;
	height:100%;
}

#playerContainer {
	width:100%;
	height:200px;
	position:fixed;
	overflow:hidden;
	z-index:4;
	display:none;
	opacity:1;

	transition-property: opacity;
	transition-duration: 5s;
}

#playerExpander {
	width:100%;
	height:200%;
	position:absolute;
	top:-50%;
}

#loaderLayer {
	width:100%;
	height:200px;
	background:#000;
	display:none;
	position:absolute;
	z-index:5;
	align-items:center;
	justify-content:center;
	flex-direction:column;

	transition:1s;
}

#loaderLayer .logo {
	max-width:30%;
	margin-bottom:20px;
}

#loaderLayer .loading {
	max-width:15%;
}