@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';
html {height:100%; }
body {background:#fff; height:100%;font-family:"Open Sans",Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}
body.facePlayer {background:#fff;}
.floor {background:url(../images/floor.png) bottom center no-repeat; min-height:100%; position:relative; z-index:2; padding-bottom:80px;}
h1,h2 {font-size:23px;}
p {font-family:"Open Sans",Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color:#7a7b81;}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.bar-c {overflow: hidden;height: 30px;width: 33px;margin: 5px auto;position: relative;cursor: pointer;}
.bar {height: 0px;width: 3px;display: inline-block;background-color: #fff;bottom: 0;position: absolute;-webkit-animation-duration: 500ms;-webkit-animation-play-state: running; -webkit-animation-direction: alternate;-webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;}
.bar.noAnim {-webkit-animation: none;-webkit-animation-name: none;}

.statusStream {float:left; font-size:13px; color:#fff; margin:8px 0px;}
.statusStream span {opacity:0.7;font-size:11px;}
.statusStream span.status {display:block; font-size:11px; opacity:1;}
.socialLinks {float:right; position:relative; z-index:2;}
.socialLinks a {width:30px; height:30px; display:block; margin:12px 12px; float:right; position:relative;}
.socialLinks a span {display:block; position:absolute; top:50%; left:50%; margin-left:-12px; margin-top:-12px; width:24px; height:24px; transition-duration:0.3s;}
.socialLinks a.facebook {width:24px; height:24px; margin:14px 5px;}
.socialLinks a.twitter {width:24px; height:24px; margin:14px 0px 14px 5px;}
.socialLinks a:hover span {display:block; position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-10px; width:20px; height:20px; transition-duration:0.3s;}

.bar#bar-1 {left: 0; -webkit-animation-name: danceHeight1; -webkit-animation-delay: 0ms;}
.bar#bar-2 { left: 6px; -webkit-animation-name: danceHeight2; -webkit-animation-delay: 300ms;}
.bar#bar-3 { left: 12px; -webkit-animation-name: danceHeight3; -webkit-animation-delay: 600ms;}
.bar#bar-4 { left: 18px; -webkit-animation-name: danceHeight4; -webkit-animation-delay: 900ms;}
.bar#bar-5 { left: 24px; -webkit-animation-name: danceHeight5; -webkit-animation-delay: 1200ms;}
.bar#bar-6 { left: 30px; -webkit-animation-name: danceHeight6; -webkit-animation-delay: 1500ms;}
.bar#bar-7 {left: 36px; -webkit-animation-name: danceHeight1; -webkit-animation-delay: 0ms;}
.bar#bar-8 { left: 42px; -webkit-animation-name: danceHeight2; -webkit-animation-delay: 300ms;}
.bar#bar-9 { left: 48px; -webkit-animation-name: danceHeight3; -webkit-animation-delay: 600ms;}
.bar#bar-10 { left: 54px; -webkit-animation-name: danceHeight4; -webkit-animation-delay: 900ms;}
.bar#bar-11 { left: 60px; -webkit-animation-name: danceHeight5; -webkit-animation-delay: 1200ms;}
.bar#bar-12 { left: 66px; -webkit-animation-name: danceHeight6; -webkit-animation-delay: 1500ms;}
.bar#bar-13 {left: 72px; -webkit-animation-name: danceHeight1; -webkit-animation-delay: 0ms;}
.bar#bar-14 { left: 78px; -webkit-animation-name: danceHeight2; -webkit-animation-delay: 300ms;}
.bar#bar-15 { left: 84px; -webkit-animation-name: danceHeight3; -webkit-animation-delay: 600ms;}
.bar#bar-16 { left: 90px; -webkit-animation-name: danceHeight4; -webkit-animation-delay: 900ms;}
.bar#bar-17 { left: 96px; -webkit-animation-name: danceHeight5; -webkit-animation-delay: 1200ms;}
.bar#bar-18 { left: 102px; -webkit-animation-name: danceHeight6; -webkit-animation-delay: 1500ms;}
.bar#bar-19 {left: 108px;-webkit-animation-name: danceHeight1; -webkit-animation-delay: 0ms;}
.bar#bar-20 { left: 114px; -webkit-animation-name: danceHeight2; -webkit-animation-delay: 300ms;}
.bar#bar-21 { left: 120px; -webkit-animation-name: danceHeight3; -webkit-animation-delay: 600ms;}
.bar#bar-22 { left: 126px; -webkit-animation-name: danceHeight4; -webkit-animation-delay: 900ms;}
.bar#bar-23 { left: 132px; -webkit-animation-name: danceHeight5; -webkit-animation-delay: 1200ms;}
.bar#bar-24 { left: 138px; -webkit-animation-name: danceHeight6; -webkit-animation-delay: 1500ms;}
.bar#bar-25 {left: 144px;-webkit-animation-name: danceHeight1; -webkit-animation-delay: 0ms;}
.bar#bar-26 { left: 150px; -webkit-animation-name: danceHeight2; -webkit-animation-delay: 300ms;}
.bar#bar-27 { left: 156px; -webkit-animation-name: danceHeight3; -webkit-animation-delay: 600ms;}
.bar#bar-28 { left: 162px; -webkit-animation-name: danceHeight4; -webkit-animation-delay: 900ms;}
.bar#bar-29 { left: 168px; -webkit-animation-name: danceHeight5; -webkit-animation-delay: 1200ms;}
.bar#bar-30 { left: 174px; -webkit-animation-name: danceHeight6; -webkit-animation-delay: 1500ms;}
@-webkit-keyframes dacenFace1 { from { height: 20px; } to { height: 100px;}}
@-webkit-keyframes dacenFace2 { from { height: 1px; } to { height: 80px; }}
@-webkit-keyframes dacenFace3 { from { height: 50px; } to { height: 95px; }}
@-webkit-keyframes dacenFace4 { from { height: 30px; } to { height: 70px; }}
@-webkit-keyframes dacenFace5 { from { height: 10px; } to { height: 50px; }}
@-webkit-keyframes dacenFace6 { from { height: 1px; } to { height: 65px; }}

@-webkit-keyframes dacenFace21 { from { height: 100px; } to { height: 150px;}}
@-webkit-keyframes dacenFace22 { from { height: 80px; } to { height: 130px; }}
@-webkit-keyframes dacenFace23 { from { height: 90px; } to { height: 140px; }}
@-webkit-keyframes dacenFace24 { from { height: 40px; } to { height: 120px; }}
@-webkit-keyframes dacenFace25 { from { height: 50px; } to { height: 100px; }}
@-webkit-keyframes dacenFace26 { from { height: 30px; } to { height: 110px; }}

@media (max-width: 767px) {
	#playerBarra #playpause,
	#playerBarra #slider,
	#playerBarraBig #playpause,
	#playerBarraBig #slider  {float:none; display:inline-block;}
	#playerBarra {text-align:center;}

	#playerBarraBig #playpause,
	#playerBarraBig #slider  {float:none; display:inline-block;}
	#playerBarraBig {text-align:center;}
}

@-webkit-keyframes danceHeight1 { from { height: 1px; } to { height: 22px; }}
@-webkit-keyframes danceHeight2 { from { height: 1px; } to { height: 15px; }}
@-webkit-keyframes danceHeight3 { from { height: 1px; } to { height: 20px; }}
@-webkit-keyframes danceHeight4 { from { height: 1px; } to { height: 20px; }}
@-webkit-keyframes danceHeight5 { from { height: 1px; } to { height: 15px; }}
@-webkit-keyframes danceHeight6 { from { height: 1px; } to { height: 15px; }}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.imgBackground img {opacity:0.1;}
img.grayscale {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}



/** Start Player **/
/* Barra */
#beatsBarra {border-radius:0px; background:#111; display:table; width:100%; height:70px; position:relative;}
#beatsBarra .patternBeats {position:absolute; width:100%; height:100%; top:0px; left:0px; display:block; overflow:hidden; z-index:1;}
#beatsBarra .patternBeats svg {position:absolute; fill:#fff; width:800px; height:800px; top:50%; left:40%; margin-top:-525px; margin-left:-525px;  display:block; opacity:0.1;}
#beatsBarra #playpause {cursor:pointer; position:relative; width:60px; height:60px; margin-top:3px; float:left; border-radius:50%; z-index:2;}
#beatsBarra #playpause svg {width:100%; height:100%; fill:#111;}
#beatsBarra #playpause span {display:none; width:54px; height:54px; position:absolute; left:50%; top:50%; margin-left:-27px; margin-top:-27px; transition-duration:0.3s;}
#beatsBarra #playpause:hover span{width:50px; height:50px; margin-top:-25px; margin-left:-25px; transition-duration:0.3s;}
#beatsBarra #playpause.playing span.iconStoped {display:block;}
#beatsBarra #playpause.stoped span.iconPlaying {display:block;}
#beatsBarra #slider {background:rgba(255,255,255,0.1); width:100px; height:8px; border-radius:5px; position:relative; float:left; margin-top:28px; margin-left:30px;}
#beatsBarra .ui-slider .ui-slider-handle {background:#fff; box-shadow:2px 1px 0px rgba(0,0,0,0.2); position: absolute; z-index: 2; width: 15px; height: 15px; border-radius:50%; margin-left:-7px; cursor: pointer; top:-4px;}
#beatsBarra .ui-slider .ui-slider-handle:focus {outline:none;}
#beatsBarra .ui-slider-range { height:8px; border-radius:5px; }
#beatsBarra .soundIcon {position:absolute; left:-20px; top:-4px;}
#beatsBarra .soundIcon svg {width:15px; height:15px;}
#beatsBarra .imgBackground {position:absolute; width:100%; height:100%; z-index:0; top:0px; left:0px; overflow:hidden; display:none;}
#beatsBarra .bar-c {overflow: hidden; height: 30px;width: 100%; position: absolute; margin:0px; bottom:-5px; left:20px;}
#beatsBarra .statusStream {float:left; margin-top:15px; margin-left:20px;}
#beatsBarra .container {position:relative;}
#beatsBarra .socialLinks a {margin-top:20px;}

#beatsBarra.light #slider {background:rgba(0,0,0,0.1);}
#beatsBarra.light {background:#fff;}
#beatsBarra.light .patternBeats svg  {fill:#333;}
#beatsBarra.light #playpause svg {fill:#fff;}