/**
 * SoundManager 2: "Bar UI" player - CSS
 * Copyright (c) 2014, Scott Schiller. All rights reserved.
 * http://www.schillmania.com/projects/soundmanager2/
 * Code provided under BSD license.
 * http://schillmania.com/projects/soundmanager2/license.txt
 */

.audio-player {

}

.audio-player.big {
}

.single {}


.sm2-bar-ui {
 /*position: relative;*/
 /*display: inline-block;*/
 width: 100%;
 /* prevent background border bleed */
 /*overflow: hidden;*/
 /* just for fun (animate normal / full-width) */
 transition: max-width 0.2s ease-in-out;
  font-size: 15px;
 text-shadow: none;
}

.sm2-bar-ui .sm2-playlist li {
 display: none;
}

.sm2-bar-ui .bd {
 display: flex;
 border-bottom: none;
}


.sm2-bar-ui,
.sm2-bar-ui .bd a {
 color: #fff;
}

.sm2-bar-ui.dark-text,
.sm2-bar-ui.dark-text .bd a {
 color: #000;
}


.sm2-bar-ui .bd a {
 text-decoration: none;
}

/*.sm2-bar-ui .bd .sm2-button-element:hover {
 background-color: rgba(0,0,0,0.1);
 background-image: url(../image/black-10.png);
 background-image: none, none;
}

.sm2-bar-ui .bd .sm2-button-element:active {
 background-color: rgba(0,0,0,0.25);
 background-image: url(../image/black-25.png);
 background-image: none, none;
}*/

.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active .sm2-inline-button,
.sm2-bar-ui .bd .active .sm2-inline-button/*,
.sm2-bar-ui.playlist-open .sm2-menu a */{
 -ms-transform: scale(0.9);
 -webkit-transform: scale(0.9);
 -webkit-transform-origin: 50% 50%;
 /* firefox doesn't scale quite right. */
 transform: scale(0.9);
 transform-origin: 50% 50%;
 /* firefox doesn't scale quite right. */
 -moz-transform: none;
}
/*
.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:hover,
.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active,
.sm2-bar-ui .bd .active {
 background-color: rgba(0,0,0,0.1);
 background-image: url(../image/black-10.png);
 background-image: none, none;
}
    */
/*.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active {
 box-shadow: none;
}*/


.sm2-bar-ui .sm2-inline-element {
 position: relative;
 display: inline-block;
 vertical-align: middle;
 padding: 0px;
 overflow: hidden;
}


.sm2-bar-ui .sm2-inline-element, .sm2-bar-ui .sm2-button-element .sm2-button-bd {
    /*
 min-width: 2.8em;
 min-height: 2.8em;
 */
 position: relative;
 width: 42px;
 height: 42px;
}

.sm2-bar-ui.big .sm2-inline-element, .sm2-bar-ui.big .sm2-button-element .sm2-button-bd {
    /*
 min-width: 2.8em;
 min-height: 2.8em;
 */
 position: relative;
 width: 80px !important;
 height: 80px !important ;

 /*teste*/
 width: 65px !important;
 height: 65px !important;


}



.sm2-bar-ui .sm2-inline-button {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}

.sm2-bar-ui .sm2-extra-controls .bd {
 /* don't double-layer. */
 background-image: none;
 background-color: rgba(0,0,0,0.15);
}

.sm2-bar-ui .sm2-extra-controls .sm2-inline-element {
 width: 25px; /* bare minimum */
 min-height: 1.75em;
 min-width: 2.5em;
}
/*
.sm2-bar-ui .sm2-inline-status {
 line-height: 100%;

 display: inline-block;
 min-width: 200px;
 max-width: 20em;

 padding-left: 0.75em;
 padding-right: 0.75em;
}
*/


/*.sm2-bar-ui .sm2-inline-element:first-of-type {
 border-top-left-radius: 3px;
 border-bottom-left-radius: 3px;
 overflow: hidden;
}

.sm2-bar-ui .sm2-inline-element:last-of-type {
 border-right: none;
 border-top-right-radius: 3px;
 border-bottom-right-radius: 3px;
}*/

.sm2-bar-ui.small .sm2-inline-element:last-of-type {
    width: calc(100% - 42px) !important;
    background-color: transparent;
}

.sm2-bar-ui.big .sm2-inline-element:last-of-type {
    width: calc(100% - 100px) !important;
    background-color: transparent;
    margin: 0 20px;
}



.sm2-bar-ui .sm2-inline-status a:hover {
 background-color: transparent;
 text-decoration: underline;
}

.small .sm2-inline-time, .small .sm2-inline-duration {
display: none;
}

.sm2-inline-time,
.sm2-inline-duration {
 display: table-cell;
 width: 1%;
 font-size: 75%;
 line-height: 0.9em;
 min-width: 2em; /* if you have sounds > 10:00 in length, make this bigger. */
 vertical-align: middle;

}

.sm2-bar-ui .sm2-playlist {
display: none;
}

.big .sm2-inline-time,
.big .sm2-inline-duration {
 display: unset;
 
 font-size: 11px;
 letter-spacing: 1px;
 line-height: unset;
  font-family: 'Roboto', sans-serif;
 vertical-align: middle;
}


.big .sm2-inline-time:after {
    content: "/";
    padding: 0 5px;
}



.sm2-row {
 position: relative;
 display: table-row;
}

.sm2-progress {
 position: absolute;
 top:43%;
 width: 100%;
 text-align: right;
}


.sm2-progress-bd {
 /* spacing between progress track/ball and time (position) */
 padding: 0px 0.8em;
}

.big .sm2-progress-bd {
    padding: 0px 0px 0px 0.8em;
    margin: 0px 0 10px 0;

    /* teste */
    margin: 0px 0 0px 0;
}



.sm2-progress .sm2-progress-track,
.sm2-progress .sm2-progress-ball,
.sm2-progress .sm2-progress-bar {
 position: relative;
 width: 100%;
 height: 4px;
 border-radius: 0.65em;
}

.big .sm2-progress .sm2-progress-track,
.big .sm2-progress .sm2-progress-ball,
.big .sm2-progress .sm2-progress-bar {
 height: 10px;
}




.sm2-progress .sm2-progress-bar {
 /* element which follows the progres "ball" as it moves */
 position: absolute;
 left: 0px;
 top: 0px;
 width: 0px;
 /*background-color: rgba(0,0,0,0.33);*/ 
 background-color: #BDBDBD; 
 background-color: #383838;
}

.volume-shade, .playing .sm2-progress .sm2-progress-track, .paused .sm2-progress .sm2-progress-track {
 cursor: pointer;
}

/*.playing .sm2-progress .sm2-progress-ball {
 cursor: -moz-grab;
 cursor: -webkit-grab;
 cursor: grab;
}*/

.sm2-progress .sm2-progress-ball {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 1em;
 height: 1em;
 margin: -0.2em 0px 0px -0.5em;
 width: 14px;
 height: 14px;
 margin: -2px 0px 0px -7px;
 width: 0.9333em;
 height: 0.9333em;
 margin: -5px 0px 0px -0.466em;
 background-color: #fff;
 padding: 0px;
 border: 3px solid #1f1f1f;

/*
 z-index: 1;
*/
 -webkit-transition: -webkit-transform 0.15s ease-in-out;
 transition: transform 0.15s ease-in-out;
}


.light .sm2-progress .sm2-progress-ball
{
    background-color: #1f1f1f;
    border: 3px solid #ffffff;
}



.big .sm2-progress .sm2-progress-ball {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 20px;
 height: 20px;
 margin: -5px 0px 0px -0.466em;
 background-color: #fff;
 padding: 0px;
 border: 3px solid #1f1f1f;
 -webkit-transition: -webkit-transform 0.15s ease-in-out;
 transition: transform 0.15s ease-in-out;
}



/*
.sm2-bar-ui.dark-text .sm2-progress .sm2-progress-ball {
 background-color: #000;
}
*/

.sm2-progress .sm2-progress-track {
 background-color: rgba(0,0,0,0.4);
 background-image: url(../image/black-33.png); /* legacy */
 background-image: none, none; /* modern browsers */
}


.sm2-progress .sm2-progress-track {
 background-color: rgba(0,0,0,0.4);
 background-image: url(../image/black-33.png); /* legacy */
 background-image: none, none; /* modern browsers */
}



.sm2-bar-ui.grabbing .sm2-progress .sm2-progress-ball {
 -webkit-transform: scale(1.15);
 transform: scale(1.15);
}

.sm2-inline-button {
 background-position: 50% 50%;
 background-repeat: no-repeat;
 /* hide inner text */
 line-height: 10em;
 /**
  * image-rendering seems to apply mostly to Firefox in this case. Use with caution.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#Browser_compatibility
  */
 image-rendering: -moz-crisp-edges;
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
 -ms-interpolation-mode: nearest-neighbor;
 -ms-interpolation-mode: bicubic;
}





.play-pause,
.play-pause:hover,
.paused .play-pause:hover {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/play.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/play.svg);
 background-size: 67.5%;
 background-position: 40% 53%;
}

.light .play-pause,
.light .play-pause:hover,
.light .paused .play-pause:hover {
 background-image: url(../image/icomoon/entypo-25px-000000/PNG/play.png);
 background-image: none, url(../image/icomoon/entypo-25px-000000/SVG/play.svg);
 background-size: 67.5%;
 background-position: 40% 53%;
}


.playing .play-pause {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/pause.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/pause.svg);
 background-size: 57.6%;
 background-position: 50% 53%;
}

.light .playing .play-pause {
 background-image: url(../image/icomoon/entypo-25px-000000/PNG/pause.png);
 background-image: none, url(../image/icomoon/entypo-25px-000000/SVG/pause.svg);
 background-size: 57.6%;
 background-position: 50% 53%;
}
.sm2-volume-control {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/volume.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/volume.svg);
}


.sm2-bar-ui.big .play-pause {
    border-radius: 50%;
    background-color: #383838;
    text-indent: -9999px;
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/play.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/play.svg);
    background-size: 24px;
    background-position: 24px center;

    /* teste */
    background-color: #e4001d;
    background-position: 18px center;
    border-radius: unset;
}

.sm2-bar-ui.big .play-pause:hover,
.sm2-bar-ui.big .paused .play-pause:hover {
    
    background-color: #ec1b24;
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/play.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/play.svg);
    background-size: 24px;
    background-position: 18px center;
}


.sm2-bar-ui.big.playing .play-pause {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/pause.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/pause.svg);
background-size: 24px;
    background-position: 20px center;
}

.sm2-bar-ui.big .sm2-volume-control {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/volume.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/volume.svg);
}

.sm2-playlist-wrapper  {
    display: none;
}

.sm2-progress-ball .icon-overlay {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 background: none, url(../image/icomoon/free-25px-000000/SVG/spinner.svg);
 background-size: 72%;
 background-position: 50%;
 background-repeat: no-repeat;
 display: none; 
}

.playing.buffering .sm2-progress-ball .icon-overlay {
 display: block;
 -webkit-animation: spin 0.6s linear infinite;
 animation: spin 0.6s linear infinite;
}

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

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

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}

.sm2-element ul {
 font-size: 95%;
 list-style-type: none;
}

.sm2-element ul, .sm2-element ul li {
 margin: 0px;
 padding: 0px;
}

.bd.sm2-playlist-drawer {
 /* optional: absolute positioning */
 /* position: absolute; */
 z-index: 3;
 border-radius: 0px;
 width: 100%;
 height: 0px;
 border: none;
 background-image: none;
 display: block;
 overflow: hidden;
 transition: height 0.2s ease-in-out;
}

.sm2-bar-ui .disabled {
 filter: alpha(opacity=33); /* <= IE 8 */
 opacity: 0.33;
}

.sm2-bar-ui .bd .sm2-button-element.disabled:hover {
 background-color: transparent;
}

.sm2-bar-ui .active,
/*.sm2-bar-ui.playlist-open .sm2-menu,*/
.sm2-bar-ui.playlist-open .sm2-menu:hover {
 /* depressed / "on" state */
 box-shadow: inset 0px 0px 2px rgba(0,0,0,0.1);
 background-image: none;
}



/* --- full width stuff --- */
/*
.sm2-bar-ui .sm2-inline-element {
 display: flex;
}

.sm2-bar-ui .sm2-inline-element {
 width: 1%;
}

.sm2-bar-ui .sm2-inline-status {
 width: 100%;
 min-width: 100%;
 max-width: 100%;
}
*/

/*
.sm2-bar-ui > .bd {
 width: 100%;
}
    */
.sm2-bar-ui .sm2-playlist-drawer {
 /* re-hide playlist */
 display: none;
 overflow: hidden;
}


.sm2-bar-ui .sm2-inline-texture {
 background: transparent;
}

.sm2-playlist {
    display: none;    
}