@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot') format('embedded-opentype'),
         url('fonts/BebasNeue.woff2') format('woff2'),
         url('fonts/BebasNeue.woff') format('woff'),
         url('fonts/BebasNeue.ttf') format('truetype'),
         url('fonts/BebasNeue.svg#BebasNeue') format('svg');
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(255,255,255,0.2);
    -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-corner {
    background: #fff;
}

html{height:100%}
body{ background-color:#000000; margin:0px; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-size:16px}

img{border:0px}
a{text-decoration:none; color:#f8961d}
a:hover{color:#FFFFFF}
h1, h2{font-family:BebasNeue; padding:0px; margin:0px; font-size:40px}

#wrap{width:1000px; height:692px; background-color:#ccc; background-image:url(../images/bg.jpg); background-repeat:no-repeat; position:relative; margin:0px auto}

#logo{position:absolute; left:25px; top:25px}

#nav{position:absolute; top:160px; left:25px; padding:0px; margin:0px}
#nav li{display:inline-block; padding:0px; margin:0px}
#nav a{color:#FFFFFF; display:block; text-align:center; padding:5px 18px; text-transform:uppercase; font-family:BebasNeue; font-size:20px}
#nav li:nth-child(1) a{padding-left:0px}

#socials{padding:0px; margin:0px; position:absolute; right:16px; top:25px}
#socials li{ display:inline-block; padding:0px; margin:0px}
#socials a{display:block; padding:0px 15px}
#socials a:hover{opacity:0.6}

#content{width:675px; aspect-ratio:4/3; position:absolute; left:25px; top:200px; border:1px solid #f8961d; background-color:rgb(0,0,0,0.2); box-sizing: content-box}
#content p{ line-height:20px}

#mainvid{width:675px; aspect-ratio:16/9; background-color:rgb(0,0,0,0.2); padding: 0; overflow: auto}

.videowrapper{aspect-ratio:16/9; position: relative; width:100%}
.videowrapper iframe{width:100%; height: 100%; position: absolute; top:0; left:0}

#rhc{ position:absolute; width:251px; height:600px; right:25px; top:70px}
#firestation{position:absolute; right:0px; top:4px}
#sundae{position:absolute; right:0px; top:125px}
#album{ position:absolute; right:0px; top:170px; max-width:250px; height: auto}
#star{position:absolute; top:340px; left:10px; transition:all 1s ease; cursor:pointer}
#star:hover{transform: scale(1.1) rotate(-15deg)}
#buy1, #buy2, #buy3{ position:absolute; right:0px; top:440px}
#buy2{top:485px} 
#buy3{top:531px}
#buy4, #buy5, #buy6{position:absolute; left:0px; top:578px}
#buy5{left:82px}
#buy6{left:auto; right:-4px}
#band{display:none}
#bbc{ position:absolute; left:-90px; bottom:-110px; z-index:1}
#video{z-index:100}

.videopane{max-height:400px; overflow: auto}

.contentpanel{display:none; aspect-ratio:4/3; box-sizing: border-box; padding:15px; color:#FFFFFF; background-color:rgb(0,0,0,0.5); position:absolute; top:0px; left:0px; z-index:100; overflow: auto}
.fade:hover{opacity:0.8}
.nopad{padding:0px !important}
.fb-follow{position:absolute; left:300px; top:732px}
#spotifyFollow{ position:absolute; top:700px; left:120px}
.floatright{float:right; margin-left:15px; margin-bottom:10px}

#home{display:block}
#players{background-image:url(../images/band.jpg); background-size:cover; background-repeat:no-repeat; width:675px; height:470px; padding:0px}
#players h2{padding:15px 0 0 15px}
#players p{padding:15px; font-size:26px; line-height:30px}
#audio{}

.floatright{width:470px; float:right; padding-top:20px; padding-right:15px}
.floatright img{margin-top:30px}

.vidthumb{width:290px; height:163px; border:1px solid #ccc; display:inline-block; margin:7px; padding:0px; position:relative}
.vidthumb iframe{ margin:0px; padding:0px}


.expand{position:absolute; top:-6px; right:-6px}

.gigscroll{overflow:auto; height:400px}