/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

#mute_button {
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
}


#mute_button:hover {
    cursor: pointer;
}

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

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

@font-face {
    font-family: 'apexBook';
    src: url('apexbook.eot');
    src: url('apexbook.eot?#iefix') format('embedded-opentype'),
         url('apexbook.woff') format('woff'),
         url('apexbook.ttf') format('truetype'),
         url('apexbook.svg#apex_newbook') format('svg');
    font-weight: normal;
    font-style: normal;

}


.background {
    z-index: -2;
    background: url('../img/bg.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%; 
    overflow: hidden;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

#video_div {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}


#video_div, .video_element {
    min-height: 100%;
    min-width: 100%;
}

.video_element {
    position: absolute;
    z-index: -10;

}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #fff;
}

html {
    font-family: "ApexNewThin", helvetica, arial, sans-serif; height: 100%;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   josephmueller.net
   ========================================================================== */

/* -- Loader -- */
#ajax-loader{position: absolute; top: 50%; left: 50%; display: none;}
#ajax-loader img{position: relative; left:-16px; top:-16px;}


/* --- Structure ------------------------ */

body{
    color: #fff;
    font-size: 16px;
    background-color: #000;
    height: 100%;
}


/* -- Header Styling -- */
header{
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    position: absolute;

}
a.menuToggle {font-size: 2em; line-height: 3.6em; text-transform: uppercase; letter-spacing: 2px; float: left; color: #fff; text-decoration: none; margin: 0 0 0 3.125em; z-index: 300;}

/* -- Navigation -- */
nav{
    font-family: "FuturaLtBTLight", helvetica, arial, sans-serif;
    letter-spacing: 10px;
    text-align: center;
    margin-top: 6.250em;
    width: 80%;
    margin: 6.250em auto;
    -webkit-transition: all .75s linear;
    -moz-transition: all .75s linear;
    -o-transition: all .75s linear;
    -ms-transition: all .75s linear;
    transition: all .75s linear;
    opacity: 1;
    display: none;
}
nav ul, nav ul li{padding: 0; margin: 0;}
nav li a {
    border: 0;
    font: 0/0;
    text-shadow: none;
    color: transparent;
    display: block;
    margin: 1em 0;
    width: 100%;
}
nav li a img{max-width: 30%;}


/* -- Social Icons -- */
.social{float: right; margin:29px 50px 0 0;}
.social a{display: inline-block; width: 30px; height: 30px; margin: 0 2px;}
.facebookIcon{background-position:-77px 0px; background-image:url('../img/vj-sprite.png');}
.twitterIcon{background-position:-115px 0px; background-image:url('../img/vj-sprite.png');}
.bandcampIcon{background-position:-267px 0px; background-image:url('../img/vj-sprite.png');}
.youtbuteIcon{background-position:-153px 0px; background-image:url('../img/vj-sprite.png');}
.myspaceIcon{background-position:-191px 0px; background-image:url('../img/vj-sprite.png');}
.reverbnationIcon{background-position:-229px 0px; background-image:url('../img/vj-sprite.png');}
.instagramIcon{background-position:-305px 0px; background-image:url('../img/vj-sprite.png');}
a.mailing-list{background-image: none; display: inline-block;margin: 0; font-size: .75em; width: 115px}
.social p{margin: 0; padding: 0}
#main{
    width: 80%;
    max-width: 960px;
    margin: 140px auto;
    z-index: 100;
}

.videoGallery, .imageGallery, .press-release{text-align: left; }

.videoGallery a {width: 100%;}
.videoGallery a img{padding-bottom: 3px; max-width: 100%;}
.imageGallery img{padding-bottom: 3px;}


/* --- Type Styling ------------------------ */

.strikeThrough{background: url(../img/strike.png) repeat-x;}

/*-- H1 images --*/
h1.about, h1.shows, h1.music, .pressHolder h1, h1.images, h1.videos  { width: 100%;}
h1.about img, h1.shows img, h1.music img, .pressHolder h1 img, h1.images img, h1.videos img {max-width: 100%;}



#content h1.about, #content h1.shows, #content h1.music, #content.pressHolder h1, #content h1.images, #content h1.videos{
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    display: block;
    margin: 30px 0 60px 0;
}



h2{font-family: "FuturaLtBTLight", helvetica, arial, sans-serif; font-weight: normal; font-size: 3.875em; line-height: 1.5em; text-transform: uppercase; margin: 0; padding: 0; letter-spacing: 7px; padding: 20px 0 0 0;}
.press h2{margin-bottom: .75em}
.press-release h2{font-size: 2.1em;}




p, li{font-size: 1.500em; font-weight: normal; letter-spacing: 2px; line-height: 1.5em;}
p.showDate{display: block; padding: 0 0 2.500em 0}



/* -- Track Drop Down Styling -- */
.albumTitle{cursor: pointer; }
a.plus{height: 46px; width:46px; background: url('../img/vj-sprite.png') no-repeat  -57px -38px; overflow: hidden; display: inline-block; float: right; margin-top: 20px; } 
h2.active a.plus{ background: url('../img/vj-sprite.png') no-repeat 0px -38px; }
.trackListing{ padding: 0 0 20px 0;  margin: 0;}
.trackListing p{margin: 16px 0;}





/* -- Buttons and Links -- */
a{text-decoration: none; color: #fff;}

a.playBtn{display: inline-block; width: 32px; height: 32px; background: url('../img/vj-sprite.png') no-repeat 0px 0px; margin-bottom: -10px;}
a.stopBtn{display: inline-block; width: 32px; height: 32px; background: url('../img/vj-sprite.png') no-repeat -38px 0px; margin-bottom: -10px;}

.stopAutoplay {
    bottom: 50px;
    position: fixed;
    left: 50px;
}
a.stopAutoplay {
    letter-spacing: 2px;
    text-transform: uppercase;
}


#bg_audio{display: none;}



/* -- Mail Chimp -- */
#mc_embed_signup{  font:1em; top: 0; left: 0; text-align: center; overflow: hidden;}
#mc_embed_signup label {color: #fff; font-size: 1.7em; margin: 0; clear: both; letter-spacing: 5px; font-family: "FuturaLtBTLight", helvetica, arial, sans-serif} 
#mc_embed_signup input{color: #333;}
.eml{padding: 10px; margin-top: 20px; width:226px; text-align: center; margin-top: 40px;}
.btn {padding: 10px; margin-top: 20px; width:250px; border-radius: 5px; border: none; background-color: #fff}
#mc_embed_signup .validate{padding-top: 50px; color: black}



/* -- News Page -- */
.posts {padding-bottom: 100px;}
.news-page h2{font-size: 2.5em; line-height: 1.25em;}
.news-page p a{text-decoration: underline;}
.news-page .meta p{font-size: .85em; text-transform: uppercase; letter-spacing: 2px;}
.news-page .post-img{width: 100%; max-width: 100%;}

.side-bar h3{padding: 16px 15px 0px 15px; font-size: .85em; text-transform: uppercase; letter-spacing: .5px;}
.side-bar p{padding: 0 15px; margin: 0; font-size: .85em}
.side-bar .avatar-title{font-size: 1.4em; line-height: 1.3em; float: left; width: 100px; margin-right: 10px;}
.side-bar img{padding-left: 15px; float: left; }
.side-bar .avatar-holder{padding-bottom: 10px;}




/* ==========================================================================
   Helper classes
   ========================================================================== */
.spacer{padding: 0 10px;}

.fadeOut{
    opacity: 0;
    transition: opacity .75s linear;
    -o-transition: opacity .75s linear;
    -ms-transition: opacity .75s linear;
    -moz-transition: opacity .75s linear;
    -webkit-transition: opacity .75s linear;
}

.textRight{text-align: right;}
.displayNone{display:none !important;}
.displayBlock{display:block !important;}


/* -- Grid -- */

.col100, .col90, .col80, .col70, .col60, .col50, .col40, .col30, .col20, .col10{float: left;}

.col100{width: 100%;}
.col90{width: 90%;}
.col80{width: 80%;}
.col70{width: 70%;}
.col60{width: 60%;}
.col50{width: 50%;}
.col40{width: 40%;}
.col30{width: 30%;}
.col20{width: 20%;}
.col10{width: 10%;}

.shows:after {
  content: "";
  display: table;
  clear: both;
}










/*-- Image Gallery -- */

.album{display: none; width: 100%;} 
a.gallery{width: 100%;}

.albumArt{margin-right: 20px;}
.albumArt img, a.gallery img{max-width: 100%;}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */


.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}



#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 32px;
    height: 32px;
    background: url('../img/status.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 8040;
    background: url('../img/vj-sprite.png') -119px -35px no-repeat;
    cursor: pointer;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('../img/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}
.fancybox-prev {
    left: 0;
    cursor: url(../img/prev-arrow.png), auto;
}

.fancybox-next {
    right: 0;
    cursor: url(../img/next-arrow.png), auto;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}



/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 600px) {
    header{position: relative;}
    nav{margin: .5em auto;}
    nav li a img{max-width: 50% }
    nav li a{margin: .5em 0}
    a.menuToggle{float: none; display: block; text-align: center; margin: 0; line-height: 3em; font-size: 2em;}
    .social{float: none; margin: 20px 0 0 0; text-align: center;}
    #main{margin-top: 0px;}
    p.showDate{padding: 0 0 .5em 0; font-size: 1.2em;}
    .shows .col80, .shows .col20 {width: 100%; float: none;  display: inline-block; padding-bottom: .3em; line-height: 1.2em;}
    .shows .col20{text-align: left;}
    a.stopAutoplay{display: none;}
    a.plus{margin-top: 5px;}
    h2{font-size: 2.5em; letter-spacing: 2px;}
    a.plus{display: none;}
    p{font-size: 1.2em; font-family: "apexBook", helvetica, arial, sans-serif;}
    .album .col20, .album .col70{width: 100%; float: none;}
    .fancybox-prev{backgroun: url('../img/prev-arrow.png') no-repeat center left;}
    .fancybox-next{backgroun: url('../img/next-arrow.png') no-repeat center right;}

}