html{height:100%; margin:0px; padding:0px;}

body{
	margin:0px;
	padding:0px;
	background:#f674ca;
	font-family: "inconsolata", sans-serif;
    font-weight: 300;
	color:#FFFFFF;
	letter-spacing:1px;
    height:100%;
}

#loading{position: absolute;  letter-spacing:2px; text-align:center; color:#FFFFFF; font-size:1.1em; z-index:-1; top:0px; left:0px; right:0px; bottom:0px; width:100%;}

.bgContainer{

    display: none;
    position: fixed; top:0px; left:0px; right:0px; bottom:0px; 
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
  -webkit-transition: background-size .3s ease-out;
  -moz-transition: background-size .3s ease-out;
  -o-transition: background-size .3s ease-out;
  transition: background-size .3s ease-out;

}

.bgContainer #bgOverlayContainer{ 

  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;

    background-color: transparent; position: absolute; top:0px; left:0px; right:0px; bottom:0px;  }
.bgContainer #bgOverlayContainer.bgPink{ background-color: rgba(215, 104, 201, 0.8);  }
.bgContainer #bgOverlayContainer.bgPurple{ background-color: rgba(207, 10, 130, 0.8);  }
.bgContainer #bgOverlayContainer.bgBlank{ background-color: rgba(0, 0, 0, 1);  }
.bgContainer #bgOverlayContainer.bgBlue{ background-color: rgba(21, 9, 188, 0.5);  }




.page{ display:none; min-height:100%; z-index: 1; position: relative; height:100%;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;
  -webkit-transition: background-size .3s ease-out;
  -moz-transition: background-size .3s ease-out;
  -o-transition: background-size .3s ease-out;
  transition: background-size .3s ease-out;

}

a, a:visited{ color:#FFFFFF; text-decoration: none; transition:ease-in all 0.4s; }
a:hover{ transition:ease-in all 0.4s; color:#ddd;}

img.logo { display:block; margin:auto; width:90%; max-width:480px; margin-bottom: 10px;}




h2{font-size:2.2em; text-transform: uppercase; color:#FFFFFF; padding-bottom:10px;}
header{ height:100%;}
.headerContainer{  opacity: 0;

  -webkit-transition: padding-top .3s ease-out;
  -moz-transition: padding-top .3s ease-out;
  -o-transition: padding-top .3s ease-out;
  transition: padding-top .3s ease-out;

  -webkit-transition: opacity .6s ease-out;
  -moz-transition: opacity .6s ease-out;
  -o-transition: opacity .6s ease-out;
  transition: opacity .6s ease-out;


}

.drip{ position: absolute; z-index:-1;  width:25px;  left:50%; margin-left: -11.5%;
padding-top: 49.8%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;

}
.drip-drip-drip {   -webkit-transition: height 8s; /* Safari */
    transition: height 8s; height:0px; width:20px;  
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;

    border-bottom-left-radius: 30px;

    border-bottom-right-radius: 20px;

 }



.logoContainer{ width:95%; max-width:600px; margin: 10px auto 0px auto; height:0px; padding-top:100px;
    background-image:url('../images/logo.png?v-3');
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;

}

.bgContainer .logoContainer {    background-image:url('../images/logo-blank.png?v=3');}

  @media (max-width: 900px) {
   .logoContainer{ margin: 5px auto 0px auto; }
  }


.crossContainer{
    position:absolute; left:60%; bottom:-50px;
      width:400px;
      height:350px;
      background-image:url('../images/cross.png?v=2');
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;
}

  @media (max-width: 900px) {
    .crossContainer{
      position: absolute;
      right: 0px;
      left:auto;
      bottom: -20px;
      width: 40%;
      max-width: 500px;
      height: 0px;
      padding-top: 35%;
      background-image: url('../images/cross.png?v=2');
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100%;

    }
  }

.col-sm-6{
    width:50%; display: inline-block;
}

@media screen and (max-width: 575px){
    .col-xs-12{ width: 100%}
}


.single-links{text-align: center; text-transform: uppercase; font-size: 1.1em;}
.single-links a:link, .single-links a:visited, .single-links a:active{ color:#FFFFFF;}  



.buy-links{position: absolute; left:0px; right:0px; bottom:20px; text-align: center;}
.buy-links a {display: inline-block; background-color: rgba(174, 55, 150, 0.28);font-size:1.1em; padding:5px 7px; border:1px solid #FFFFFF; margin:3px 1px;}
.buy-links-text{padding-bottom:5px; font-size:1.1em;}

.content{height:100%;}

/********* SOCIALS *********/


.social{ padding-top: 10px; padding-bottom:10px;}
.social { margin: auto; text-align: center; }
.social a, .social a:visited, .social a:active{ color:#FFFFFF; text-decoration: none; transition:ease-in all 0.4s; }
.social a:hover{ color:#000000;}
.fa { font-size:1.1em !important; padding:0px 0px; }
.fa:hover{ cursor:pointer; }

/********* TRACKLISTINGS *********/


.album-container .album-details-container{
  max-width:1000px; 
  width:95%;
  margin:0px auto;
}
.album-container .album-tracklisting{line-height: 1em;}

@media screen and (min-width: 575px){
  .album-container{height:100%;}

}

@media screen and (max-width: 575px){
  .album-container{text-align: center;}

}

/********* TOUR DATES  *********/


.tour-container{ width:100%; padding-bottom:50px; max-width:1200px; margin:0px auto;}
.tour-widget{ padding:20px 10px 0px 10px;   }
.tour-widget .bit-nav-bar-container{display: none;}

.bit-widget { font-family: "inconsolata", sans-serif !important; font-size: 1.1em !important; color:#FFFFFF !important;}
.bit-widget .bit-event{ padding: 15px 0px !important; color:#FFFFFF !important;}
/*.bit-widget.bit-layout-row .bit-event{ border-top: 0px solid transparent !important;} 
*/.bit-widget.bit-layout-row .bit-event:hover { background-color: rgba(81, 81, 81, 0) !important; }
.bit-widget .bit-upcoming-events, .bit-past-events{ border-bottom: 0px solid transparent !important;  margin: 0px 20px 10px 20px !important;}

.bit-widget .bit-button{ background-color: #FFFFFF !important; color:#cf0a82 !important;}

.bit-widget .bit-event .bit-details .bit-venue{ font-size: 1.3em; line-height: 1em;  }
.bit-widget .bit-event {     border-top: 1px solid rgba(255, 255, 255, 0.15) !important; }
.bit-widget .bit-event .bit-location{ font-size: 1em;}
.bit-widget.bit-layout-row .bit-event .bit-details .bit-date{font-size: 1em;}
.bit-widget.bit-layout-row .bit-event .bit-details .bit-date{ -ms-flex: 1 0 5em !important; flex: 1 0 5em !important;}

@media screen and (min-width: 800px){

  .bit-widget .bit-event .bit-details {
      -ms-flex-direction: row !important;
      flex-direction: row !important;
      width: 100% !important;
  }
  .bit-widget .bit-event .bit-details { width: 100%; }
    .bit-widget .bit-event .bit-details .bit-date {
      font-weight: bold;
      width: 12.5%;
      white-space: nowrap;
      flex: 1 0 8em; }
    .bit-widget .bit-event .bit-details .bit-venue {
      width: 43.75%;
      padding-right: 22px; }
    .bit-widget .bit-event .bit-details .bit-location {
      width: 43.75%; }

}

/********* VIDEO CONTAINER *********/

.videoTop{
    background-position: center bottom; background-image:url('../images/video-top-border.png?v=2'); background-repeat: no-repeat;
    background-size:100%; padding-bottom:8%;
}


.video-resize{position:relative; max-width:800px; width:100%; margin:0px auto; height:0px; padding-top:50%;}
.video-resize iframe{position: absolute; top:0px; left:0px; width:100%; height:100%;}

.videoContainer{ background-color:#000000; position: relative; width: 100%;
overflow: hidden;
    padding-top:30px; padding-bottom:30px;
}
.changeButton, .playButton{padding-top:20px; padding-bottom:20px; background-color:#04cdeb;}
.mainContainer{max-width:800px; margin:0px auto; width: 100%; height: 0px; padding-top: 600px; overflow: hidden; position: relative }
#overflowContainer{ width: 100%; top:0px;
position: absolute; }
#overflowContainer.cam1{width:300%;}
#overflowContainer.cam2{width:300%; left: -100%;}
#overflowContainer.cam3{width:300%; left: -200%;}
#overflowContainer.cam4{width:300%; top:-100%;}
#overflowContainer.cam5{width:300%; top:-100%; left: -100%;}
#overflowContainer.cam6{width:300%; top:-100%; left: -200%;}

#overflowContainer.cam7{width:300%; top:-200%;}
#overflowContainer.cam8{width:300%; top:-200%; left: -100%;}
#overflowContainer.cam9{width:300%; top:-200%; left: -200%;}

.sqLeft{display: block;
position: absolute;
opacity: 0.7; top: 0px; left: 50%; bottom:0px;
margin-left: 400px; right: 0px; z-index: 9999; width: 800px;
background-image:url('../images/video-bg.jpg?v-2');
background-size: 100%; background-repeat: no-repeat; background-position: left center;
}

.sqRight{display: block; position: absolute; opacity: 0.7;
top: 0px; right: 50%; bottom: 0px;
margin-right: 400px;
z-index: 9999;
width: 800px;
background-image: url('../images/video-bg.jpg?v-2');
background-size: 100%;
background-repeat: no-repeat;
background-position: right center;
}


.sqVideo{ margin:0px auto; position:relative; overflow:hidden; top:0px;
    background-color:#000000; width:100% !important; height:0px; padding-top:75%;}
.sqVideo div{position: absolute; top:0px; left:-8.5%; bottom:0px; width: 116% !important; height:100%; }
.sqVideo iframe{position: absolute; top:0px; left:-15.5%; bottom:0px; width: 132% !important; height:100%; }


.cropVideoMain{position:absolute;top:0px; left:0px;width:100%; height:100%;}

.overlayPlay{display:none; position: absolute; top:0px; z-index: 9999; width:100%; height:100%; background-position: center; background-image:url('../images/play.png?v=2'); background-repeat: no-repeat;}
.overlayStop{position: absolute; bottom:0px; left:0px; width: 8%;background-size: 50%;padding-bottom: 8%; z-index: 9999; display: none; background-position: center; background-image:url('../images/stop.png?v=2'); background-repeat: no-repeat; }

.overlay1{display:none; position: absolute; z-index: 9900; width:33%; height: 0px; padding-top: 24.7%;}
.overlay2{display:none; position: absolute; z-index: 9900; left:33.3%; width: 33%; height: 0px; padding-top: 25%;}
.overlay3{display:none; position: absolute; z-index: 9900; left:66.6%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay4{display:none; position: absolute; z-index: 9900; top:33.3%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay5{display:none; position: absolute; z-index: 9900; top:33.3%; left:33.3%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay6{display:none; position: absolute; z-index: 9900; top:33.3%; left:66.6%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay7{display:none; position: absolute; z-index: 9900; top:66.6%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay8{display:none; position: absolute; z-index: 9900; top:66.6%; left:33.3%; width: 33.3%; height: 0px; padding-top: 25%;}
.overlay9{display:none; position: absolute; z-index: 9900; top:66.6%; left:66.6%; width: 33.3%; height: 0px; padding-top: 25%;}
.no-touch #overflowContainer div[class^="overlay"]:hover{ background-repeat:no-repeat; background-position: 99% 98.6%;
background-image: url('../images/expand.png');
background-size:35px 35px; }
#overflowContainer div[class^="overlay"]{cursor: pointer;}

#overflowContainer[class^="cam"] div[class^="overlay"]:hover{
     background-image: url('../images/minimize.png?v=2');background-position: 99.7% 99.7%;
 }
#overflowContainer[class^="cam"] div[class^="overlay"]{ background-repeat:no-repeat; background-position: 99.7% 99.7%;
background-image: url('../images/minimize.png?v=2'); 
background-size:35px 35px; }
   .no-touch .zoom-text{display: none;}
   .touch .zoom-text{ opacity:0; display: block; padding-top:10px;}
   .touch .videoContainer{  padding-bottom:10px; }



  @media (max-width: 900px) {
    .mainContainer{padding-top:75%;}
  }


/********* SIGN UP CONTAINER *********/


.signupContainer{
    padding-top: 100px;
    height:100%;
    text-align: center;
    background-position: center top; 
    background-image:url('../images/video-bottom-border.png?v=3'); background-repeat: no-repeat;
    background-size:100%; 
    color:#FFFFFF;
}

.signupContainer #mc_embed_signup {
    max-width: 600px;
    margin: 0 auto;
    padding:20% 0px;
}

.signupContainer .signupText {
    padding: 10px 15px 20px 15px;
    line-height: 1.2em
}



.signupContainer .privacyPol {
    font-size: .8em;
    line-height: 1em;
    padding: 5px 15px 0 15px
}

#subscribe-form input, #subscribe-form select {
    width: 97%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 2px 5px;
    border: 0px solid #000;
    font-size: 1em;
    background-color: #fff
}

#subscribe-form {
    box-sizing: border-box;
    max-width: 800px;
    padding: 0 10px;
    margin: 0 auto
}

.signupContainer .errorText {
    font-size: 1em;
    padding-top: 5px;
    padding-bottom: 10px;
    display: none;
    line-height: 1.3em;
    color: #000000
}

#subscribe-form [type="text"], #subscribe-form [type="submit"],
#subscribe-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -moz-border-radius: 0
}

#subscribe-form .submitButton{ width: 100%; max-width: 400px; margin: 0px auto; }

#subscribe-form select {
    background-image: url('../images/signup-arrow.png');
    background-position: right center;
    background-repeat: no-repeat
}

#subscribe-form input[type="checkbox"] {
    width: 30px;
    height: 30px
}

#subscribe-form ::-webkit-input-placeholder {
    color: #000
}

#subscribe-form :-moz-placeholder {
    color: #000
}

#subscribe-form ::-moz-placeholder {
    color: #000
}

#subscribe-form :-ms-input-placeholder {
    color: #000
}

#subscribe-form #mc-embedded-subscribe {
    padding: 10px 10px 10px 15px;
    margin: 10px 5px;
   background-color: transparent;
    color: #fff;
    letter-spacing: 4px;
    border: 1px solid #fff
}

#subscribe-form #mc-embedded-subscribe:hover {
    background-color: #fff;
    color: #000;
}


/********* SOCIALS CONTAINER *********/

@media (max-width: 1200px){
    .page{ background-size:120%; }

    .drip{  margin-left: -13.5%; padding-top: 59.8%;}

}

@media (max-width: 1000px){
    .page{ background-size:140%; }

    .drip{  margin-left: -15.5%; padding-top: 69.8%;}

}


@media (max-width: 800px){
    .page{ background-size:160%; }   
    header{ padding-bottom: 40%; }

    header{ background-size:160%; background-position:30% 100%;}   

    .bit-widget .bit-event{display: block !important;}
    .bit-button{ display: block !important; margin-top:20px; padding: 13px 0px 13px 0px !important;}
    .bit-widget.bit-layout-row .bit-event .bit-details{  display: block !important; }
    .bit-widget.bit-layout-row .bit-event .bit-details .bit-date,
    .bit-widget.bit-layout-row .bit-event .bit-details .bit-venue,
    .bit-widget.bit-layout-row .bit-event .bit-details .bit-location{width:100% !important;}

    .bit-widget .bit-event .bit-details .bit-venue{ font-size: 1.7em; line-height: 1em;  padding-right: 0px !important;}
    .bit-widget .bit-event{
        padding: 10px 0px 25px 0px !important;
        border-top: 0px solid transparent !important;
    }


    .tour-widget{ padding:0px 0px 0px 0px;}
    .videoTop{ padding-bottom: 7%; }
    .tour-container{ padding-bottom: 0px;}
    .bit-widget{ padding-bottom:0px !important; text-align: center;}
    .bit-widget .bit-upcoming-events, .bit-widget .bit-past-events { margin-bottom: 0px  !important;}


    .drip{  margin-left: -18.5%; padding-top: 79.8%;}

}

@media (max-width:500px){
    header{ padding-bottom: 80%; }
    .page{ background-size:250%; }   
    .logoContainer{ width: 100%; padding-top: 16%;}
    .videoTop{ background-size: 200%; padding-bottom: 10%;}
    .signup-container{ background-size: 200%;}

    .drip{  margin-left: -29.5%; padding-top: 120.8%;}

#overflowContainer[class^="cam"] div[class^="overlay"]:hover{
     background-image: url('../images/minimize.png?v=2');background-position: 99.7% 99.7%;
 }
#overflowContainer[class^="cam"] div[class^="overlay"]{ background-repeat:no-repeat; background-position: 99.7% 99.7%;
background-image: url('../images/minimize.png?v=2'); 
background-size:35px 35px; }
    .overlayStop{width: 10%; background-size: 70%; padding-bottom: 10%;}

 }   

 @media (max-width: 600px) and (orientation:landscape) {

    .page{ background-position: center -70px;}
    .videoContainer{padding-left: 60px; padding-right: 60px; box-sizing: border-box;}
 }