@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Raleway:700,300');

@font-face {
    font-family: Gotham-Book;
    src: url(fonts/Gotham-Book.otf);
}

@font-face {
    font-family: Gotham-Medium;
    src: url(fonts/Gotham-Medium.otf);
}

html {
    height: 100%;
    font-family: sans-serif;
    background-color: #111;
}

body {
    margin:0;
}

#loading {
    color: #FFF;
    position: absolute;
}

#canvas {
    z-index: 996;
}

#volume-info {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #FFF;
    display: none;
}

#loading-info {
	top: 12px;
	color: white;
	position: absolute;
	width: 600px;
	left: 50%;
	margin-left: -300px;
	text-align: center;
	animation: pulse-fade 2s linear infinite;
	-webkit-animation: pulse-fade 2s linear infinite;
}

#loading-value {
	display: none;
}

@keyframes pulse-fade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

#pause-info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #FFF;
    display: none;
}

#github {
    position: absolute;
    bottom: 8px;
    right: 12px;
}

#github a {
    color: #FFF;
    text-decoration: none;
}

.content {
    margin: 196px auto 0 auto;
    position: relative;
    width: 1568px;
}

.content #songinfo {
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.content #artist {
    color: #FFF;
    display: block;
    font-family: 'Gotham-Medium', 'Raleway', Lato, sans-serif;
    font-weight: 700;
    font-size: 102px;
    line-height: 112%;
    letter-spacing: -5.3px;
}

.content #title {
    color: #FFF;
    display: block;
    font-family: 'Gotham-Book', 'Raleway', Lato, sans-serif;
    font-weight: 400;
    margin-top: -7px;
    font-size: 56px;
    line-height: 87%;
    letter-spacing: -4px;
}

.content #title a {
    color: white;
    text-decoration: none;
}

.content #title a:hover {
    text-decoration: underline;
}

#particles {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -99;
}

.kitty {
    position: absolute;
}

#vig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 20em 7em rgba(0,0,0,0.5);
    z-index: 997;
}

.front {
    z-index: 9999;
}

#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(18,18,17,0.95);
    z-index:998;
}

#status {
    width:200px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(./img/status.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

.cattext{
    color: #FFF; 
    text-align: center; 
    padding-bottom: 75px;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    -webkit-filter: brightness(85%);
}

.mvbg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
}


/*
 * ANIMATIONS
 */

.partsbg{
    visibility:hidden;
    position:relative;
    z-index:-2;
}

.playing .partsbg{
    visibility:visible;
    animation:partsbgIn 10s ease-out both;
}

@keyframes partsbgIn{
    from{opacity:0;}
    to{opacity:1;}
}

/*.content{
    visibility:hidden;
}

.playing .content{
    visibility:visible;
    animation:contentgIn 1s ease-out both;
}

@keyframes contentIn{
    from{opacity:0;}
    to{opacity:1;}
}*/

.content #artist{
    overflow:hidden;
    visibility:hidden;
    white-space:nowrap;
}

.playing .content #artist{
    visibility:visible;
    animation:textIn .35s linear both 0.7s;
}

.content #title span{
    overflow:hidden;
    visibility:hidden;
    white-space:nowrap;
    display:inline-block;
}

.playing .content #title span{
    visibility:visible;
    animation:textIn .35s linear both 0.8s;
}

.playing .content #title span:nth-child(2){
    animation-delay:0.9s;
}

.playing .content #title span:nth-child(3){
    animation-delay:1.0s;
}

.playing .content #title span:nth-child(4){
    animation-delay:1.1s;
}

@keyframes textIn{
    from{max-width:0;}
    to{max-width:100%;}
}

#cover{
    width: 191px;
    height: 191px;
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
    perspective: 1910px;
    perspective-origin: center;
}

#cover div{
    width: 100%;
    height: 100%;
    background: #C2C1C2;
    visibility:hidden;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 0;
    position:relative;
}

#cover div img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#cover div img.mcat{
    width: 75%;
    height: 75%;
    position: absolute;
    top: 12.5%;
    left: 12.5%;
}

.playing #cover div{
    visibility:visible;
    animation:coverIn .250s linear both .350s;
}

@keyframes coverIn{
    from{transform: rotateY(90deg);}
    to{transform: rotateY(0deg);}
}

#preloader{ /* Only to show spectrum_preloader */
    display:none !important;
}

#spectrum_preloader{
    position: absolute;
    top: 352px;
    left: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
}

#spectrum_preloader div{
    position: absolute;
    background: #C2C1C2;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 0;
    width: 100%;
    height: 100%;
    animation: indeterminate1 2s infinite linear;
}

@keyframes indeterminate1 {
  0% {
    left: 0%;
    width: 0%;
  }
  50% {
    left: 25%;
    width: 75%;
  }
  75% {
    left: 100%;
    width: 0%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}