#playerBeat {
    display: block;
    background: #f6f6f6;
    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;} .iconStoped .icon i {font-size: 70px; color: var(--p4)}
#playpause .iconPlaying { background: #000000; color:#fff; cursor: pointer; position: relative; display: block; z-index: 2; border-radius: 50%; width: 70px; height: 70px; padding-top: 12%; padding-left: 30%; font-size:37px;}	
#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; height:30px; background: #000000;}
#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: 13px; padding-left: 10px; padding-top:9px; color:#fff; }
#playpause .iconVolume i  {font-size: 12px; color:#fff; display: block; background: #000000; border-radius: 50%; width:30px; height: 30px; line-height: 30px; text-align: center;}
.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 #000000; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; display: block; position: absolute;}
.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: -35px; top: 60px; 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:#000000; border: solid 1px #000000; 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:#000000; border: solid 1px #000000; position: absolute; bottom: 0px;}
#playerBeat .fa-volume-down {position:absolute; left:-22px; top:-3px; font-size: 15px; color: #000000} #playerBeat .imgPlayerCapa {float: left; border-radius: 50%; overflow: hidden; border: solid 3px #000000; 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: #000000; 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: #000000;} #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; padding: 0px 2px;} .linksPlayrs li a { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; text-align: center; display: block; 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: #000000; 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 #000000; position: absolute; top: -5px; left: 54px; } .linksPlayrs li .tooltip { opacity: 0; width: 115px; left: -38px; top: 75px; background: #000000; 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:#000000;}
.tooltip.bottom .tooltip-arrow { border-bottom-color:#000000;}	.tooltip.top .tooltip-arrow { border-top-color:#000000;}.tooltip.left .tooltip-arrow { border-left-color:#000000;}	
.tooltip.right .tooltip-arrow { border-right-color:#000000;} #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: 1320px; } } @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; }

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}