@font-face {
	font-family: 'grendel';
	src: url('../assets/fonts/grendel.eot');
	src: local('☺'), url('../assets/fonts/grendel.woff') format('woff'), url('../assets/fonts/grendel.ttf') format('truetype'), url('../assets/fonts/grendel.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body{
    margin:0;
    padding:0;
    background-color:#000000;
    width:100%;
    height:100%;
}

#wrapper{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}

#background{
    display:block;
    opacity:0;
}

#logo{
    position:absolute;
    display:block;
    opacity:0;
    top:50%;
    left:50%;
    margin-left:-464px;
    margin-top:-255px
}

#tagline{
    position:absolute;
    display:block;
    opacity:0;
    top:50%;
    left:50%;
    margin-left:-122px;
    margin-top:50px;
}

#listenBtn{
    position:absolute;
    top:75%;
    left:50%;
    cursor:pointer;
    margin-left:-57px;
    margin-top:-21px;
    opacity:0;
    z-index:100;
}

.listenIcon{
    float:left;
    width:51px;
    height:51px;
}

.listenClose{
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
}

.listenCopy{
    float: left;
    margin-top: 6px;
    margin-left: 5px;
}

.bg_width{
    width:100%;
    height:auto;
}

.bg_height{
    height:100%;
    width:auto;
}

#footer{
    width:100%;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    bottom:30px;
    left:0px;
    color:#ffffff;
    height:105px;
    border-top:1px solid rgba(208,170,131,0.5);
    border-bottom:1px solid rgba(208,170,131,0.5);
    font-family:'Balthazar',Times,serif;
    color:rgb(208,170,131);
    font-size:17px;
    padding-top:6px;
    letter-spacing:1px;
    opacity:0;
    padding-left: 20px;
    padding-right:20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

#footerleft{
    position:absolute;
    left:50%;
    width:315px;
    text-align:center;
    margin-left:-345px;
    margin-top:18px;
}

#footerright{
    position:absolute;
    left:50%;
    width:190px;
    height:100%;
    text-align: center;
    margin-left:160px;
}

#footerright p{
    margin-top:-3px;
    letter-spacing: 2px;
}

#footer a{
    color:inherit;
    text-decoration:none;
}

#footer a:hover{
    color:#ffffff;
}

#listen{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    visibility: hidden;
}

#listen .albums{
    width:1280px;
    height:290px;
    position:absolute;
    top:0px;
    left:0px;
    
}

#listen .albumsContainer{
    top:50%;
    left:50%;
    margin-left:-512px;
    margin-top:-145px;
    position:absolute;
    width:1024px;
    height:291px;
    overflow-x:hidden;
}

#listen .arrowRight{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-38px;
    margin-left:542px;
    opacity:0;
    cursor:pointer;
}

#listen .arrowLeft{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-38px;
    margin-left:-592px;
    opacity:0;
    cursor:pointer;
}

#listen .arrowLeft img{
    opacity:0;
    visibility: hidden;
}

#listen .album{
    width:256px;
    height:256px;
    float:left;
    position:relative;
}

#listen .album .cover{
    cursor:pointer;
}

#listen .album .over{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    opacity:0;
}

#listen .album .over .play{
    position:absolute;
    top:65%;
    left:50%;
    margin-top:-33px;
    margin-left:-33px;
}

#listen .album .over .albumOver{
    font-family:'Open Sans',Arial,sans-serif;
    font-size:24px;
    color:#d0aa83;
    font-weight:700;
    width:100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-top: 50px;
    line-height: 24px;
}

#listen .album .over .artistOver{
    font-family:'Open Sans',Arial,sans-serif;
    font-size:20px;
    color:#d0aa83;
    font-weight:400;
    width:100%;
    text-align: center;
}

#listen .album .tracks{
    position:absolute;
    top:0px;
    left:256px;
    width:0px;
    overflow:hidden;
    visibility: hidden;
    height:100%;
    background-color:rgba(208,170,131,0.6);
}

#listen .album .tracks .close{
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
}

#listen .album .tracks .tracksHeader{
    width:100%;
    height:45px;
    border-bottom:1px solid #865e39;
}

#listen .album .tracks .tracksHeaderAlbum{
    font-family:'Open Sans',Arial,sans-serif;
    font-size:14px;
    color:#3e1d0b;
    font-weight:700;
    text-align: left;
    text-transform: uppercase;
    margin-left:23px;
    margin-top:10px;
}

#listen .album .tracks .tracksHeaderArtist{
    font-family:'Open Sans',Arial,sans-serif;
    font-size:14px;
    color:#3e1d0b;
    font-weight:400;
    text-align: left;
    margin-left:23px;
}

#listen .album .tracks .tracksContainer{
    margin-top:10px;
    width:250px;
    height:180px;
    overflow:hidden;
}

#listen .album .tracks .tracksContainer .track{
    width:100%;
    height:20px;
    cursor:pointer;
}

#listen .album .tracks .tracksContainer .track .play{
    width:20px;
    height:20px;
    margin-left:20px;
    margin-right:3px;
    float:left;
    opacity:0;
}

#listen .album .tracks .tracksContainer .track .name{
    //width:20px;
    height:20px;
    float:left;
    font-family:'Open Sans',Arial,sans-serif;
    font-size:14px;
    color:#3e1d0b;
}

/* ------ SCROLL PANEL ----- */

.sp-viewport{
}
.sp-scrollbar {
  width: 3px;
  cursor: pointer;
  left:auto !important;
  right:0px !important;
}

.sp-scrollbar .sp-thumb {
  background-color: #3e1d0b;
  -webkit-transition: height 0.2s ease-in-out;
  -moz-transition: height 0.2s ease-in-out;
  -ms-transition: height 0.2s ease-in-out;
  -o-transition: height 0.2s ease-in-out;
  transition: height 0.2s ease-in-out;
}

.sp-scrollbar.active .sp-thumb {
  background-color: #3e1d0b;
}

#social-widget .sp-viewport{
  padding-right:0px !important;
  padding-left:0px !important;
}
#social-widget .sp-scrollbar {
  width: 3px;
  cursor: pointer;
  right:0px !important;
  left:auto !important;
}
#social-widget .sp-scrollbar .sp-thumb {
  background-color: #e8cb92;
  -webkit-transition: height 0.2s ease-in-out;
  -moz-transition: height 0.2s ease-in-out;
  -ms-transition: height 0.2s ease-in-out;
  -o-transition: height 0.2s ease-in-out;
  transition: height 0.2s ease-in-out;
}
.sp-scrollbar.active .sp-thumb {
  background-color: #e8cb92;
}