/*
THEME NAME: CAN U DANCE
THEME URI: http://canudance.net
DESCRIPTION:  CAN U DANCE is Jackmaster & Oneman
VERSION: 0.1
AUTHOR: <a href="http://studioremote.com">Studio Remote</a>
TAGS: sandbox


*/



/* Global */

html,body { height:100%; }

html, html a { -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

body { font-family:'Helvetica Neue For BBC W01 Bd'; font-size: 1em; color: #FFF; background-color:#ab5bc3; text-rendering: optimizeLegibility;  }

img { max-width: 100%; height:auto; }

a, a:link { color: #000; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border-color 200ms;  -webkit-transition: color 200ms;   }

a:hover { color: #FFF; text-decoration: none; border-bottom: 1px solid transparent; }

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  

.clearfix:after { clear: both; }  

.clearfix { zoom: 1; }


/* FIXED */

h1 {   text-align:center; margin:auto; padding:50px 0 0 0; margin:auto; width:500px; z-index:100001; position:relative; }

h2.refresh { font-size: 3em; font-weight:normal;  }


/* LIVE */

#content-stretch { width:90%; text-align:center; position:relative; z-index:1002; padding:50px 5% 0 5%; margin-bottom:0; }

#live-dates { position:relative; font-family:'HelveticaNeueW01-77BdCn 692722'; width:680px; margin:auto; text-align:left; z-index:998; color:#FFF;  }

.live-date p.live-date-content a.ticket-link { float:right;  }

.live-date .live-date-content{ width:100%; font-size: 1.7em; line-height:1.3em; color:#FFF; text-transform:uppercase; margin:0px;}

.the-socials{display:none; padding-left: 100px; padding-right: 100px;}

a.social-link { border:none; }

.svg path{ -webkit-transition: fill 200ms; -moz-transition: fill 200ms; transition: fill 200ms; }

.svg:hover path { fill: white; }


/* FESTIVALS */

#festivals { font-size: 1em; line-height:1.3em; position:relative; font-family:'Helvetica Neue For BBC W01 Bd'; margin:auto; text-align: center; z-index:998; color:#FFF; margin:auto; width:100%; max-width:1600px;   }

.the-dance { position:absolute; top:70px; left:38%; z-index:997; width:247px; height:500px;  }

.the-dance img { width:70%; height:auto;  }

.festival {  width:450px; margin:0 0 5px 0; color:#FFF; background-color:#000; display: inline-block; vertical-align: middle;   }

.festival img {   width:200px; height:auto; margin:10px 0 0 0;  }

.festival .festival-content {   color:#FFF; text-transform:none; margin:0; padding:10px 10px 0 10px; }

.festival .festival-content a {   color:#FFF;  border-bottom: 1px solid #FFF;    }

.festival .festival-content a:hover {   color:#FF99FF;  border-bottom: 1px solid #FF99FF;    }

.festival .festival-description { font-family:'Helvetica Neue For BBC W15 Rm'; padding:10px 30px 10px 30px; }

.festival-header { text-transform:uppercase; font-family:'HelveticaNeueW01-77BdCn 692722';  font-size: 3.2em; line-height: 1em;  padding:15px 0 0 0;  }


/* LOGOS */

#oneman-logo { position:absolute; top:0px; right:28%; z-index:998; text-align:center; width:240px; height:230px; text-align:center; display:inline-block; }

#oneman-logo-bg { position:absolute; top:0; left:0; z-index:998; }

#oneman-logo-content { position:absolute;  top:0; left:0; z-index:999; text-align:center; width:240px; padding:85px 0 0 0; }

#oneman-logo-content img.logo { width:50%; height:auto; }

#jackmaster-logo { position:absolute; top:0px; left:28%; z-index:998; text-align:center; width:240px; height:230px; text-align:center; display:inline-block; }

#jackmaster-logo-bg { position:absolute; top:0; left:0; z-index:998; }

#jackmaster-logo-content { position:absolute;  top:0; left:0; z-index:999; text-align:center; width:240px; padding:85px 0 0 0; }

#jackmaster-logo-content h2, #oneman-logo-content h2 { text-transform:uppercase; font-family:'HelveticaNeueW01-77BdCn 692722';  font-size: 2em; line-height: 1em; text-align:center; font-weight:normal; }


#jackmaster-logo-content img.logo { width:65%; height:auto; }

/* SLIDER */

#slider { width:450px; }

#controls { padding-bottom:40px; height:120px;  }


/* SHARE */

#oneman-share { position:relative; margin:auto; text-align:center; width:380px; height:360px; text-align:center; padding-bottom:50px;  }

#oneman-share-bg { position:absolute; top:0; left:0; z-index:998; }

#oneman-share-content { position:absolute;  top:0; left:0; z-index:999; text-align:center; width:380px; padding:85px 0 0 0; }

#oneman-share-content img.logo { width:50%; height:auto; }

#jackmaster-share { position:relative; margin:auto; text-align:center; width:380px; height:360px; text-align:center; display:inline-block;   }

#jackmaster-share-bg { position:absolute; top:0; left:0; z-index:998; }

#jackmaster-share-content { position:absolute;  top:0; left:0; z-index:999; text-align:center; width:380px; padding:80px 0 0 0; }

#jackmaster-share-content img.logo { width:60%; height:auto; }

.share-stretch { padding:20px 0 0 0; }

.share-items { list-style: none; display: table; margin: 0 auto; padding-left:0;   }

.share-item {   display:inline-block; margin:0 1px 0 1px;  }

.share-item a {   border:none;  }

.table { display: table; margin: 0 auto; }

.clear { display:block; clear:both; margin:10px 0 0 0; }

.dancer { clear:both; padding:0; }

.dancer-top-left { position:absolute; top:100px; left:29%; z-index:998; }

.dancer-top-right { position:absolute; top:100px; right:29%; z-index:998; }

.svg path{ -webkit-transition: fill 200ms; -moz-transition: fill 200ms; transition: fill 200ms; }

.svg:hover path { fill: red;  }


/* FOOTER */

#footer { position:relative; margin:auto; text-align:center; width:450px; height:307px; text-align:center; margin-top:50px; margin-bottom:0;  }

#footer-bg { position:absolute; top:0; left:0; z-index:998;  }

#footer-bg img { vertical-align: bottom; }

#footer-content { position:absolute;  top:0; left:0; z-index:999; text-align:center; width:450px; padding:120px 0 0 0;  }

#footer-content img.logo { width:20%; height:auto;  }


/* VIDEO */

#home-background video {  position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;  }


/* PAGE */

#content-text { margin:auto; width:600px; z-index:1000000; margin-bottom:60px;   }

#content-text h2 { font-size:2em; margin-bottom:10px;  font-family:'HelveticaNeueW01-77BdCn 692722'; text-transform:uppercase; }

#content-text p { font-size:1em; }

#content-text a { text-decoration:underline; }


/* PLAYER */

#your-tracks { border:none; }

.dragdealer { position: relative; height: 27px; background: #000; color: #4e4e4e; width:223px; margin:0 auto; border-radius: 2px; font-family:'HelveticaNeueW01-77BdCn 692722'; line-height: 33px; }

.dragdealer .handle { position: absolute; top: -3px; left: 0; cursor: pointer; }

.dragdealer .bar { width: 60px; height: 33px; background: #FFF; color: #000; font-size: 13px; line-height: 33px; text-align: center; border-radius: 2px; font-weight:normal; }

.dragdealer .bar:hover { background: #FF99FF;  -webkit-transition: background 200ms;  }

.dragdealer .disabled { background: #898989; }

#slider-speed, #slider-color {  display: inline-block; vertical-align: middle;  }

#player-form { width:450px; margin:auto; position:relative; padding:0;  height:33px;  }

.vid { margin-top:5px; padding-bottom:30px; height:30px; }



/* FADES */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in { opacity:0;  -webkit-animation:fadeIn ease-in 1;  -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards;  animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; }


.fade-in#jackmaster-logo { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; }

.fade-in#canudance-title { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; }

.fade-in#oneman-logo { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; }

.fade-in#controls, .fade-in#content-text { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; }

.fade-in#festivals  { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }

.fade-in#mad_mimi_signup_form  { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; }

.fade-in#home-background  { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; }

.fade-in#oneman-share, .fade-in#jackmaster-share  { -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; animation-delay: 1.4s; }

.fade-in.dancer-top-left, .fade-in.dancer-top-right  { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }

.fade-in.dancer-three, .fade-in.dancer-four  { -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; animation-delay: 1.7s; }

.press-img { margin:auto; width:600px; margin-top:30px; margin-bottom:30px; }

.hide  { display:none; }



/* SUBSCRIBE */

#signup_audience_lists { color:#FFF; font-family:'Helvetica Neue For BBC W01 Bd'; text-transform:uppercase; font-size: 0.7em; margin:auto; width:300px; clear:both; padding:20px 0 0 0;   }

.canudance-subscribe, .oneman-subscribe { float:left; }

.numbers-subscribe { }

#mad_mimi_signup_form { width:450px; margin:auto; position:relative; padding:60px 0 90px 0;  }

#player-form {  padding:5px 0 10px 0;  }

.mimi_subscribe, .mimi_box { float:left; }

form input.required  { width:345px; border-radius:2px 0 0 2px;  }

#your-search { width:308px; margin:0; padding:0; border-radius:2px 0 0 2px;   }

form input.required, #your-search {  margin:auto; border: 2px solid #FFF; background-color:#FFF;  color:#FFF; padding:7px 7px 6px 10px; margin:5px 0 5px 0; font-weight:normal; font-size: 0.9em; letter-spacing:1px; color:#000; }

form div.required label, form input.submit {  font-weight:normal; border-radius:0 2px 2px 0;    }

form input.submit {  font-family:'HelveticaNeueW01-77BdCn 692722';  letter-spacing:1px; font-size: 0.8em; text-transform:uppercase; background:none; border:none;  margin:5px 0 0 0; color:#FFF; padding:10px 7px 7px 7px; background-color:#000;  }

form input.submit:hover {  background:#FF99FF; color:#000; -webkit-transition: background 200ms; -webkit-transition: color 200ms;    }



/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  padding:2px 6px 0 21px;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:1px; top: 1px;
  width: 12px; height: 12px;
  border: 2px solid #FFF;
  background: #FFF;
  border-radius: 0;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 2px; left: 4px;
  font-size: 10px;
  color: #000;
  font-weight:bold;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
  padding-top:3px;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}
 



/* MEDIA QUERIES */

@media screen and (max-width: 480px) {

#live-dates { width:100%; margin-left: 0;  }

#content-stretch { width:90%; padding:0 5% 0 5%;  }

.live-date .live-date-content{ width:100%;    }

.mimi_subscribe, .mimi_box { clear:both;   }

.mimi_box { width:100%; }

#mad_mimi_signup_form { width:100%; margin:auto;  }

#signup_audience_lists { clear:both; padding-top:10px;  }

.mimi_subscribe { width:100%;  }

#webform_submit_button { margin:auto;}

.slide form input.required {   width:270px; }  

.festival, .festival img {  width:100%;    }

.dancer-top-left, .dancer-top-right{display: none;}

#oneman-share, #jackmaster-share { width:280px; height:302px; }

#oneman-share-bg img, #jackmaster-share-bg img { width:100%; height:auto; }

#oneman-share-content, #jackmaster-share-content {  width:280px;   }

#oneman-share-content  {  padding:40px 0 0 0;    }

#jackmaster-share-content  {  padding:40px 0 0 0;    }

#jackmaster-share .share-stretch   {  padding:0 0 0 0;    }

#footer {  width:350px; height:238px; text-align:center; margin-top:50px; margin-bottom:0;  }

#footer-content {  width:350px; padding:80px 0 0 0;  }

#footer-content img.logo { width:20%; height:auto;  }

form input.required { width:260px;  }

h1#canudance-title  { width:250px; height:auto; margin-top:60px; }

#oneman-logo { right:4%; width:140px; height:auto; }

#jackmaster-logo {  left:4%;  width:140px; height:auto; }

#oneman-logo-content, #jackmaster-logo-content {   width:100%;   }

#oneman-logo-content  {   padding:50px 0 0 0;   }

#jackmaster-logo-content  {   padding:50px 0 0 0;   }

#jackmaster-logo-content h2, #oneman-logo-content h2 {   font-size:1em;   }

#slider { width:100%; margin-top:20px; }

#player-form { width:100%; }

#slider-color, #slider-speed, #player-form, .vid { display:none;  }

.press-img { width:90%;  }

.press-img img { width:100%; height:auto;  }

#controls { height:0; }

.the-dance { left:25%; top:40px; }

#content-text { width:90%;   }

}


@media (min-width: 480px) and (max-width: 767px) {

#live-dates { width:100%; margin-left: 0;  }

#content-stretch { width:90%; padding:50px 5% 0 5%; }

.live-date .live-date-content{ width:100%; font-size: 0.6em;  line-height:1em; }

#oneman-logo { right:5%; width:180px; height:auto; }

#jackmaster-logo {  left:5%;  width:180px; height:auto; }

#oneman-logo-content, #jackmaster-logo-content {   width:100%;   }

#oneman-logo-content  {   padding:60px 0 0 0;   }

#jackmaster-logo-content  {   padding:60px 0 0 0;   }

h1#canudance-title   { margin-top:30px; }

h1#canudance-title img { width:250px; height:auto; }

.dancer-top-left { left:7%; top:80px;  }

.dancer-top-right { right:7%; top:80px;  }

.press-img { width:90%;  }

.press-img img { width:100%; height:auto;  }

#jackmaster-logo-content h2, #oneman-logo-content h2 {   font-size:1.5em;   }

.the-dance { left:19%;  }

#content-text { width:90%;   }


}




@media (min-width: 1200px)and (max-width: 1700px) {

#oneman-logo { right:14%; }

#jackmaster-logo {  left:14%; }

.dancer-top-left { left:15%; }

.dancer-top-right { right:15%; }

.the-dance { left:31%;  }

}

@media (min-width: 1700px)and (max-width: 2100px) {

#oneman-logo { right:20%; }

#jackmaster-logo {  left:20%; }

.dancer-top-left { left:21%; }

.dancer-top-right { right:21%; }

.the-dance { left:33%;  }

}

@media (min-width: 2100px)and (max-width: 2400px) {

#oneman-logo { right:23%; }

#jackmaster-logo {  left:23%; }

.dancer-top-left { left:24%; }

.dancer-top-right { right:24%; }

.the-dance { left:36%;  }

}


@media (min-width: 980px) and (max-width: 1199px) {

#oneman-logo { right:10%; }

#jackmaster-logo {  left:10%; }

.dancer-top-left { left:11%; }

.dancer-top-right { right:11%; }

.the-dance { left:26%;  }

    	  
}

@media (min-width: 768px) and (max-width: 979px) { 

#oneman-logo { right:4%; }

#jackmaster-logo {  left:4%; }

.dancer-top-left { left:5%; }

.dancer-top-right { right:5%; }

h1#canudance-title img { width:250px; height:auto; }

.the-dance { left:26%;  }

}


	
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {  

	.live-date .live-date-content{ font-size: 0.9em;  line-height:1.2em; }

	#playSound, .dancer-top-left, .dancer-top-right{display: none;}
	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {  

	.live-date .live-date-content{ font-size: 0.9em;  line-height:1.2em; }

	#playSound, .dancer-top-left, .dancer-top-right{display: none;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 

	#playSound, .dancer-top-left, .dancer-top-right{display: none;}

}