audio {
height: 80px;
}
.mejs-container *:focus {
outline: 0 none;
}
.mejs-poster {
background-size: cover;
}
.mejs-container.mejs-audio {
height: 80px !important;
}
.mejs-container .mejs-layers .mejs-poster img {
display: none;
}
.mejs-container .mejs-controls {
background: #efefef;
height: 80px;
}
.mejs-container .mejs-controls div {
font: inherit;
}
.mejs-container .mejs-controls .mejs-time {
position: relative;
padding: 0;
width: 0;
height: 0;
color: #a09795;
overflow: visible;
}
.mejs-container .mejs-controls .mejs-time .mejs-currenttime,
.mejs-container .mejs-controls .mejs-time .mejs-duration {
position: absolute;
top: 5px;
}
.mejs-container .mejs-controls .mejs-time .mejs-currenttime {
margin-left: 5px;
}
.mejs-container .mejs-controls .mejs-time .mejs-duration {
margin-left: -5px;
transform: translateX(-100%);
}
.mejs-container .mejs-controls .mejs-button {
width: 35px;
height: 100%;
}
.mejs-controls .mejs-button button {
margin: 25px 0 0 7px;
text-align: center;
height: 30px;
width: 30px;
line-height: 30px;
outline: 0 none;
background: none;
}
.mejs-controls .mejs-button button:focus {
outline: 0 none;
}
.mejs-controls .mejs-button button:after {
font-family: 'ct-icons';
font-weight: normal;
font-size: 30px;
}
.mejs-container .mejs-controls .mejs-button.mejs-playpause-button {
width: 50px;
}
.mejs-controls .mejs-button.mejs-playpause-button button {
height: 36px;
width: 36px;
line-height: 36px;
margin: 22px 0 0 12px;
}
.mejs-controls .mejs-button.mejs-playpause-button.mejs-play button:after,
.mejs-controls .mejs-button.mejs-playpause-button.mejs-pause button:after {
color: #1b1d1c;
font-size: 36px;
}
.mejs-controls .mejs-button.mejs-playpause-button.mejs-play button:after {
content: '\e655';
}
.mejs-controls .mejs-button.mejs-playpause-button.mejs-pause button:after {
content: '\e656';
}
.mejs-controls div.mejs-time-rail {
padding-top: 32px;
}
.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a {
border-radius: 0;
height: 8px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #cfcfcf;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #ffc601;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
background: #1b1d1c;
}
.mejs-controls .mejs-time-rail .mejs-time-handle {
background: #1b1d1c;
border: 0 none;
width: 3px;
height: 26px;
top: 50%;
margin-top: -13px;
display: block;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
font-size: 10px;
line-height: 12px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
border-color: #1b1d1c transparent transparent;
}
.mejs-controls .mejs-button.mejs-volume-button.mejs-mute button:after {
content: '\e657';
color: #1b1d1c;
}
.mejs-controls .mejs-button.mejs-volume-button.mejs-unmute button:after {
content: '\e658';
color: #1b1d1c;
}
.mejs-controls .mejs-button.mejs-fullscreen-button {
width: 45px;
}
.mejs-controls .mejs-button.mejs-fullscreen-button button {
margin-left: 5px;
}
.mejs-controls .mejs-button.mejs-fullscreen-button button:after {
content: '\e659';
color:#1b1d1c;
}
.mejs-controls .mejs-button.mejs-fullscreen-button.mejs-unfullscreen button:after {
content: '\e65a';
color: #1b1d1c;
}
.mejs-overlay-button {
background: none;
line-height: 100px;
opacity: 0.8;
}
.mejs-overlay-button:after {
font-family: 'ct-icons';
font-weight: normal;
font-size: 100px;
content: '\e655';
color: #ffffff;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider {
background: #f1f5f6;
width: 36px;
left: 5px;
height: 110px;
top: -80px;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
background: #ffc601;
width: 6px;
left: 15px;
top: 10px;
height: 90px;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
background: #1b1d1c;
width: 6px;
left: 15px
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
background: #1b1d1c;
left: 50%;
margin-left: -8px;
}
.mejs-controls a.mejs-horizontal-volume-slider {
margin-top: 37px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
border-radius: 0;
height: 5px;
background: #ffc601;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
border-radius: 0;
height: 6px;
background: #ffc601;
top: 10px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
height: 6px;
background: #1b1d1c;
top: 10px;
}
.mejs-container.mejs-audio .mejs-controls .mejs-button.mejs-volume-button {
width: 50px;
}
.mejs-container.mejs-audio .mejs-controls .mejs-button.mejs-volume-button button {
margin-right: 0;
}
.mejs-overlay-loading {
background: transparent;
}