html, body {height:100%; }

@font-face {
    font-family: 'TeXGyreHerosCnBold';
    src: url('../fonts/texgyreheroscn-bold-webfont.eot');
    src: url('../fonts/texgyreheroscn-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texgyreheroscn-bold-webfont.woff') format('woff'),
         url('../fonts/texgyreheroscn-bold-webfont.ttf') format('truetype'),
         url('../fonts/texgyreheroscn-bold-webfont.svg#TeXGyreHerosCnBold') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'franklin_gothiccondensed';
    src: url('../fonts/franklin_gothic_extra_condensed-webfont.eot');
    src: url('../fonts/franklin_gothic_extra_condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franklin_gothic_extra_condensed-webfont.woff') format('woff'),
         url('../fonts/franklin_gothic_extra_condensed-webfont.ttf') format('truetype'),
         url('../fonts/franklin_gothic_extra_condensed-webfont.svg#franklin_gothiccondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}


a {color:white; text-decoration:none;}
a:hover {color:#d5271e;}
.highlight {color:#d5271e;}
#content { min-width:320px; z-index:3;
font-family: 'HelveticaNeueW01-77BdCn 692722', 'HelveticaNeue BoldCond','TeXGyreHerosCnBold',  "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold",   "Arial Narrow","HelveticaNeue", "Helvetica Neue", "Arial", sans-serif;  
 

letter-spacing:2px;
font-weight:light; /*font-stretch:condensed;*/
position:absolute; background:rgba(2,2,2,0.25); padding:0px; bottom:0; left:0; width:100%;  text-transform:uppercase; color:white;}

#content h1 { font-weight:normal; font-size:280%;text-align:center; display:block; margin:0 auto; letter-spacing:1px; padding:0; width:90%; }
#artists {display:block; margin:15px 5% 15px auto; text-align:right; list-style:none; padding:0;}
#artists li {display:block; text-align:right;  font-size:200%; margin:2px 0 0px 0; }
#artists li a {transition:all 1s; -webkit-transition:all 1s;opacity:1; }

#artists li a.activated {color:#d5271e;}

footer {overflow:hidden; margin:15px 5%;}
#address {font-size:83%; letter-spacing:1px; float:left; line-height:1.30em; margin-bottom:15px;} 
#social {display:inline-block;float:right;  padding:0; margin:0;  }
#social li {display:inline-block; margin-left:3px;float:left;width:31px; height:33px; background:url(../images/social.png) no-repeat; text-indent:-9999px;  } 
#social li#about {  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);   font-size: 19px;  letter-spacing: 2px;    margin-right: 10px;    padding-top: 7px;    text-indent: 0;    width: auto;}
#social li#about a {display:inline; width:auto; height:auto;}
#social li#soundcloud {width:57px;}
#social li#facebook {background-position: -58px 0;} 
#social li#twitter {background-position: -93px 0;} 
#social li#youtube {background-position: -129px 0;} 

#social li#soundcloud:hover {width:57px; background-position: 0px -33px;}
#social li#facebook:hover {background-position: -58px -33px;} 
#social li#twitter:hover {background-position: -93px -33px;} 
#social li#youtube:hover {background-position: -129px -33px;} 



#mti_wfs_colophon {opacity:0.4; z-index:-44; margin-right:40px;     margin-right: -9444px; opacity: 0.01; filter:alpha(opacity=01);}

#social li a {display:block; width:31px; height:33px;  } 
#social li a:hover { opacity:1;}
#social li#soundcloud a{width:57px;}



#backgroundcontainer {display:none; position:absolute; top:0; z-index:-1; background:url(../images/335.gif) no-repeat 49% 49%; width:100%; height:100%; overflow:hidden; }
#backgroundcontainer img {margin-left:50%; position:absolute;}


#overlay {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.76);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1100;
}
#modal {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.80);
    display: none; color:white;
    left: 50%;
    line-height: 20px;
    margin-left: -48%;
    padding: 10%;
    position: absolute;
    text-transform: uppercase;
    top: 2%;
    width: 76%;
    z-index: 1200; 
}
#modal  a {color:#d5271e;}

#modal #close {
    background: url("../images/x.png?v1") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 16px;
    position: absolute;
    right: 10px;
    text-indent: -9999px;
    top: 10px;
    width: 16px;
}
#modal #close:hover {
    background-position: 0 -15px;
}





@media only screen and (max-device-width: 480px) {  
     #backgroundcontainer {background:none; } body {margin:0; padding:0;}
    #content {position:static; font-size:82%; top:0; margin:0; padding:10px 0 0; height:100%; }
    #artists li {font-size:16px;}
    #address .highlight {display:block; margin-top:8px;}
    #social {margin-bottom:15px; }
    footer {overflow:auto;}
}