/**   RESET    **/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
	
* {-moz-box-sizing: border-box;	-webkit-box-sizing: border-box;	box-sizing: border-box;}
html, body {min-width:340px; padding:10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif }
body {background:#000 url(../images/ss-background.png);}
a {text-decoration:none;}
p {line-height:24px; padding:6px 0 6px 0; font-size:106%; font-weight:normal;}
h1 {font-size:180%;}
h2, h3 { padding: 15px 0 12px 0}
h2 {font-size:140%}
h3 {font-size:120%;}
strong {font-weight:bold;}

.acenter {text-align:center;}


.page-wrapper {margin:0 auto; position:relative;border:12px #FFF solid; border-radius:10px;max-width:1410px; background:#FFF;}


/*HEADER*/
header {position:relative; background:#313131; color:#FFF; text-align:center; 
border:6px #0d8fcb solid; border-radius:6px 6px 0 0; margin:0 auto; margin-bottom:12px; }
header h1 {font-size:150%; letter-spacing:2px; padding:10px 0 20px 0;}
.header-logo {width:100%; height:auto; padding:10px;}

/* FOOTER */
footer {background:#313131; color:#FFF; text-shadow:1px 1px #000; padding:12px; border:6px #e3d600 solid; border-radius: 0 0 6px 6px; overflow:hidden; font-size:80%;}

header, footer a {color:#fff;}

/* MENU */
.leftnav {margin-bottom:12px;}
.leftnav li {margin-bottom:4px; }
.leftnav a {padding:8px 20px; font-size:130%; background: #000; color:#e3d600; text-shadow:1px 1px #7f3030; display:inline-block; font-weight:bold; border-radius:0 6px 6px 0; border-right:4px #e3d600 solid; border-bottom:4px #e3d600 solid;}
.leftnav a:hover {color:#d00000; background:#fef500; text-shadow:1px 1px #e3d600;}

.mm-menu {display:none; background:#313131 url(../images/mm-menu.png) no-repeat;  text-indent:-999em;  width:42px; height:31px; margin:0 auto; padding:8px; color:#FFF;  margin-bottom:12px;}


/* CONTENT */
.wrapper {margin:0 auto; position:relative; margin-bottom:15px; border:0px #000 solid; overflow:hidden;}
.col-right {width:71%; border:0px #FF0 solid; float:right;}
.col-left {width:28%; border:0px #FF0 solid; float:left;}

.col-right h2 {clear:both; margin:0; padding:12px 0 0 6px;}

.grid-wrapper {clear:both; position:relative;}

.grid50{width:48%; margin:1%; float:left; border:0px #000000 solid; text-align:center;}
.grid50 img {width:100%; height:auto; max-width:450px;}

.responsive-img {width:100%; height:auto;}
.content {background:#fff;}
.clear-text {line-height:30px}
.fleft {float:left;}
.fright {float:right;}

.img-right , .img-left, .img {border-radius:6px; border:1px #313131 solid; -webkit-box-shadow: 2px 2px 8px 2px rgba(49,49,49,0.5);
-moz-box-shadow: 2px 2px 8px 2px rgba(49,49,49,0.5);
box-shadow: 2px 2px 8px 2px rgba(49,49,49,0.5);}
.img-right {float:right; margin:0 12px 6px 12px; }

.img-left {float:left; margin:0 12px 6px 0;}

.img {margin:0 0 6px 0;
}
/* GIGS */
.gigs {border-bottom:1px #313131 dotted; padding:8px 0;}
.gigdate {color:#d00000;}
.giginfo {color: #313131; font-size:90%;}

.members { overflow:hidden;border:0px #0b050c solid; border-radius:0 0 6px 6px;}
.member {float:left; width:24%; width:19%; position:relative;overflow:hidden; cursor:pointer; margin:0.5%;border-radius:6px; border:1px #313131 solid;

}
.full-photo {margin:0.5%;border-radius:6px; border:1px #313131 solid; overflow:hidden;}
.photo { width:100%; height:auto; vertical-align:bottom; }

.fade {
	position:absolute; left:0; top:0;
   -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.fade:hover {
 -webkit-opacity: 0.;
  -moz-opacity: 0;
  opacity: 0;
}

.label {position:absolute; width:100%; background: url(../images/overlay-grey-80.png); padding:6px; margin:0; text-align:center; font-size:130%;
width:100%; 
 bottom:-40px; left:0;  
 -webkit-transition: bottom 300ms ease-in-out;
  -moz-transition: bottom 300ms ease-in-out;
  -o-transition: bottom 300ms ease-in-out;
  transition: bottom 300ms ease-in-out;
  color:#fff;
  text-shadow: 1px 2px #000;
}

.member:hover .label {bottom:0;  color:#fff;}

.box {border:2px #313131 solid; border-bottom:4px #313131 solid; margin-bottom:12px; width:90%;}
.box h2 {text-align:center; background:#313131; color:#d00000; text-shadow:1px 1px  #fff; padding:12px 6px;}
.box p {padding:8px; font-size:100%;}
.box img {width:98%; height:auto; border-radius:6px}

h2.heading-gigs {background:#313131  url(../images/gigs.png)  center no-repeat; text-indent:-999em }
h2.heading-news {background:#313131  url(../images/news.png)  center no-repeat; text-indent:-999em }

.bio {display:none; border:4px #0b050c solid; border-top:none; width:98%; margin:0 auto; padding:12px; border-radius:0 0 6px 6px; line-height:1.9em}

.close-bio {color:#333; border:1px #666 solid; padding:8px 6px; text-align:center; margin:6px 0 6px 0; background:#F9F9F9; border-radius:6px;}
.close-bio:hover {background:#ccc; color:#000;}

.fb, .contact {padding:4px; border:1px #333 solid; margin:8px 2px; border-radius:6px; text-align:center;}
.contact {background:#542460; color:#FFF; overflow:hidden}
.contact a{ color:#FFF;}
.contact a:hover{ text-decoration:underline;}
.email{ margin-right:40px}

.fb {background:#3b5997; padding:8px; color:#FFF;}
.fb a{display:block; color:#FFF;}

/* PRODUCTS */
.product { border-bottom:2px #333 solid; padding:10px 0 10px 0; overflow:hidden}
.p-title {font-size:130%;}
.p-image {float:right; margin-left:15px;}

/* RESPONSIVE STYLES */
@media screen and (max-width: 960px) {
.label{font-size:115%; bottom:-60px;}
header h1 {font-size:140%; letter-spacing:0px;}
}

@media screen and (max-width: 800px) {
html, body {padding:0;  }
.leftnav a {padding:6px 14px; font-size:110%;}
header h1 {font-size:125%;}

h2.heading-gigs, h2.heading-news {background:#313131; text-indent:0; color:#FFF; text-shadow:1px 1px #000;}

}

@media screen and (max-width: 700px) {
header h1 {font-size:110%;}
.p-image {float:none; margin:15px auto; width:300px; }
}
@media screen and (max-width: 600px) {

.page-wrapper { border-radius:0; }
header h1 {display:none}
.mm-menu {display:block;}
.col-left {display:none;}
.col-right {width:100%;}

.telephone,.email {display:block; margin:8px;}
.fb img{width:100%; height:auto;}
}