
body.single header { top: 100px; }	
body.light .playerPosition { background: #fff!important; }
body.dark .playerPosition { background: #141414!important; }	
body.single.dark .playerPosition { background: #ffcc!important; }	

body {padding-top: 100px;}
.playerPosition  {position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100;}
#playerBeat { display: block; background: #; height: 100px; }

.containerPlayer {height:100px; position: relative;}
#playpause {height: 70px; width: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; display: block;}
#playpause .icon {display: none;  transition-duration: 0.3s; background: #ffffff;} /*FUNDO DO PLAY DESTAQUE BRANCO*/
#playpause .icon i {font-size: 81px; color: #3C0D00} /*COR DO PLAY*/

#playpause .iconPlaying { cursor: pointer; position: relative; display: block; z-index: 2; border-radius: 50%; width: 70px; line-height: 71px;}	
#playpause .iconStoped {cursor: pointer; position: absolute; display: block; z-index: 2; border-radius: 50%; margin-left: 40px; top: 50%; left: 50%; margin-top: -15px; width: 30px;}
#playpause .iconVolume {cursor: pointer; position: absolute; display: block; z-index: 2; border-radius: 50%; margin-right: 40px; top: 50%; right: 50%; margin-top: -15px; width: 30px;}
#playpause .icon:hover {transform: scale(1.2); transition-duration: 0.3s;}

#playpause .iconStoped i {font-size: 30px; }
#playpause .iconVolume i  {font-size: 13px; color:#ffffff ; display: block; background: #3C0D00; border-radius: 50%; width:30px; height: 30px; line-height: 30px; text-align: center;} /*COR DO PAUSE*/

.containerAnimation {height: 100px; width: 100%;  overflow: hidden; position: absolute; top: 0px; left: 0px; display: block; opacity: 0.3;}
.animation > div {border-radius: 50%; width: 80px; height: 80px; border: solid 1px #3C0D00; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; display: block; position: absolute;} /*EFEITO RISCOS*/
.animation > div + div {width: 90px; height: 90px; margin-left: -45px; margin-top: -45px;}
.animation > div + div + div {width: 100px; height: 100px; margin-left: -50px; margin-top: -50px;}
.animation > div + div + div + div {width: 110px; height: 110px; margin-left: -55px; margin-top: -55px;}
.animation > div + div + div + div + div {width: 120px; height: 120px; margin-left: -60px; margin-top: -60px;}
.animation > div + div + div + div + div + div {width: 140px; height: 140px; margin-left: -70px; margin-top: -70px;}
.animation > div + div + div + div + div + div + div {width: 160px; height: 160px; margin-left: -80px; margin-top: -80px;}
.animation > div + div + div + div + div + div + div + div {width: 180px; height: 180px; margin-left: -90px; margin-top: -90px;}
.animation > div + div + div + div + div + div + div + div + div {width: 200px; height: 200px; margin-left: -100px; margin-top: -100px;}
.animation > div + div + div + div + div + div + div + div + div + div {width: 240px; height: 240px; margin-left: -120px; margin-top: -120px;}
.animation > div + div + div + div + div + div + div + div + div + div + div {width: 280px; height: 280px; margin-left: -140px; margin-top: -140px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div {width: 320px; height: 320px; margin-left: -160px; margin-top: -160px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div {width: 360px; height: 360px; margin-left: -180px; margin-top: -180px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 500px; height: 500px; margin-left: -250px; margin-top: -250px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 600px; height: 600px; margin-left: -300px; margin-top: -300px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 700px; height: 700px; margin-left: -350px; margin-top: -350px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 900px; height: 900px; margin-left: -450px; margin-top: -450px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 1200px; height: 1200px; margin-left: -600px; margin-top: -600px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 1500px; height: 1500px; margin-left: -750px; margin-top: -750px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 1800px; height: 1800px; margin-left: -900px; margin-top: -900px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 2200px; height: 2200px; margin-left: -1100px; margin-top: -1100px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 2600px; height: 2600px; margin-left: -1300px; margin-top: -1300px;}
.animation > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {width: 3000px; height: 3000px; margin-left: -1500px; margin-top: -1500px;}

#playerBeat .volumeContainer { border-radius:5px; position:absolute; left: -60px; top: -15px; z-index: 10; padding: 10px; background: #ffffff; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); display: none; }
#playerBeat #slider {background:rgba(0,0,0,0.1); width:8px; height:80px;  position:relative;}
#playerBeat .ui-slider .ui-slider-handle {background:#3C0D00; border: solid 1px #3C0D00; box-shadow:1px 1px 0px rgba(0,0,0,0.1); position: absolute; z-index: 2; width: 16px; height: 16px; border-radius:50%; margin-left:-7px; cursor: pointer; right:-4px; margin-bottom: -7px;}
#playerBeat .ui-slider .ui-slider-handle:focus {outline:none;}
#playerBeat .ui-slider-range { width:8px; border-radius:5px; background:#3C0D00; border: solid 1px #3C0D00; position: absolute; bottom: 0px;}
#playerBeat .fa-volume-down {position:absolute; left:-22px; top:-3px; font-size: 15px; color: #3C0D00}

#playerBeat .imgPlayerCapa {float: left; border-radius: 50%; overflow: hidden; border: solid 3px #3C0D00; width: 50px; height: 50px; margin: 25px 10px 25px 0px; background-size: cover; background-position: center; }
#playerBeat .imgPlayerCapa img {width:100%; height: 100%;}

#playerBeat .statusStream {color: #3C0D00; font-size: 11px; z-index: 2; background: #ffffff; border-radius: 20px; padding: 12px 20px; float: left; margin: 30px 0px; width: 100%; max-width: 420px;}
#playerBeat .statusStream span {color: #3C0D00;}
#playerBeat .statusStream span + span {color: #363636; opacity: 0.8;}

.linksPlayrs {list-style:none; padding:0px; margin:0px; float: right;}
.linksPlayrs li {display:inline-block; position:relative;}
.linksPlayrs li a { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; text-align: center; display: block;
line-height: 75px; transition-duration:0.3s; font-size: 21px; margin: 30px 0px;}
.linksPlayrs li a:hover {opacity:0.7; transition-duration:0.3s;}
.linksPlayrs li a .helper { display: inline-block; height: 100%; vertical-align: middle;}
.linksPlayrs li a img { vertical-align: middle;  opacity:0.8;}
.linksPlayrs:before {display: block;} 
.linksPlayrs li a i { color: #3C0D00; position: relative; top: 1px; line-height: 39px;}	

.linksPlayrs li .tooltip:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 10px;
width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 5px solid #3C0D00; position: absolute; top: -5px; left: 54px; }

.linksPlayrs li .tooltip { opacity: 0; width: 115px; left: -38px; top: 75px; background: #3C0D00; border-radius: 5px;
padding: 7px; color: white; text-align: center; transition-duration: 0.2s;
font-size: 11px; }

.linksPlayrs li:hover .tooltip { opacity: 1; }
.tooltip .tooltip-inner { background-color:#3C0D00;}
.tooltip.bottom .tooltip-arrow { border-bottom-color:#3C0D00;}	
.tooltip.top .tooltip-arrow { border-top-color:#3C0D00;}
.tooltip.left .tooltip-arrow { border-left-color:#3C0D00;}	
.tooltip.right .tooltip-arrow { border-right-color:#3C0D00;}

#playerBeat .statusStream span + marquee { max-width: calc(100% - 100px); 
float: right; margin-left: 8px; height: 14px; margin-bottom: -9px; }

.linksPlayrs li, .linksPlayrs { border-right: 0px !important; }

@media (min-width: 768px) { #playerBeat .container { width: 750px; } }
@media (min-width: 992px) { #playerBeat .container { width: 970px; } }
@media (min-width: 1200px) { #playerBeat .container { width: 1170px; } }

@media (max-width: 1200px) { #playerBeat .statusStream { max-width: 315px; } }
@media (max-width: 991px) { .willOpacity { opacity: 0; } }
@media (max-width: 415px) {	#playerBeat .container { height: 100px; } .statusStream.willOpacity { display: none; } }

#playerBeat .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.statusStream marquee { font-family: "Montserrat",Arial,Helvetica,sans-serif !important; }




/*## ResetCSS */
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
	/* margin: 0; */
	/* padding: 0; */
	/* border: 0; */
	/* outline: 0; */
	vertical-align: top;
	background: transparent;
}
a{vertical-align: baseline;}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
	display: block;
	height: 100%;
	min-height: 100%;
} 
.video-item {
    width: 173px !Important;
    padding-left: 2px !Important;
    padding-right: 2px !Important;
    margin-bottom: 7px;
}

#conteudoTopo div {
    /*float: none !important;*/
}
.album-item {
   width: 173px !Important;
}

h1, h2, h3, h4, h5, h6, span, p, input {
	margin: 0;
	padding: 0;
}

table, tr, td {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

ul, li, ol {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}


