.media_object_container {
   display: inline;
   max-width: 100%;
}

.mp-container {
   position: relative;
   cursor: pointer;
   display: inline-block;
   max-width: 100%;
   background: #000;
}

.mp-container * {
   display: block;
}

.mp-container .mp-responsive img {
   position: absolute;
}

.mp-container button {
   font-size: 0;
}

.mp-responsive {
   position: relative;
   max-width: 100%;
   height: 0;
   overflow: hidden;
}

.mp-container .mp-controls-wrapper {
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 30px;
}

.mp-container .mp-controls {
   cursor: default;
   position: relative;
}

.mp-video .mp-controls {
   background-image: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
}

.mp-audio .mp-controls {
   background-image: linear-gradient(rgb(50,50,50), rgb(0,0,0));
}

.mp-video .mp-controls {
   height: 100%;
}

.mp-audio .mp-controls {
   height: 30px;
}

.mp-controls button,
.mp-controls .mp-progress-holder,
.mp-controls input[type=range],
.mp-controls .mp-current-time,
.mp-controls .mp-remaining-time {
   position: absolute;
   bottom: 9px;
}

.mp-controls .mp-play-button,
.mp-controls .mp-pause-button {
   left: 8px;
}

.mp-container .mp-play-button,
.mp-container .mp-big-play-button:before {
   width: 0;
   height: 0;
   padding: 0;
}

.mp-container .mp-play-button {
   border-top: 6px solid transparent;
   border-left: 12px solid #E6E6E6;
   border-bottom: 6px solid transparent;
}

.mp-container .mp-pause-button {
   width: 12px;
   height: 12px;
   background-image: linear-gradient(to left,  #E6E6E6 0%,  #E6E6E6 32%, transparent 33%, transparent 66%,  #E6E6E6 67%,  #E6E6E6 100%);
}

.mp-container .mp-big-play-button {
   display: block;
   width: 65px;
   height: 65px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -32px;
   margin-left: -32px;
   border-radius: 50%;
   border: 4px solid white;
   box-shadow: 0 0 10px #555;
   background: rgba( 0, 0, 0, .5 );
}

.mp-container .mp-big-play-button:before {
   content: ' ';
   position: absolute;
   margin-top: -20px;
   margin-left: -14px;
   border-top: 20px solid transparent;
   border-left: 36px solid white;
   border-bottom: 20px solid transparent;
}

.mp-container:hover .mp-big-play-button {
   box-shadow: 0 0 10px white;
}

.mp-container .mp-current-time,
.mp-container .mp-remaining-time {
   line-height: 10px;
   font-size: 11px;
   text-align: right;
   text-shadow: 0 0 1px black;
   color: white;
}

.mp-container .mp-current-time {
   left: 30px;
}

.mp-container .mp-remaining-time {
   right: 110px;
}

.mp-container .mp-volume-button,
.mp-container .mp-fs-button {
   width: 14px;
   height: 14px;
   background-image: url(/Shared/UIComponents/Internal/MediaPlayer/Images/controls.svg);
}

.mp-container .mp-volume-button {
   right: 90px;
   padding: 0;
   background-position: 0 -16px;
}

.mp-container .mp-volume-button.mp-volume-muted {
   background-position: 0 0;
}

.mp-container .mp-volume-button.mp-volume-muted:after {
   background: black;
}

.mp-container .mp-label span {
   display: none;
}

.mp-container .mp-progress-holder {
   left: 80px;
   right: 160px;
   text-align: left;
   cursor: pointer;
}

.mp-container progress[value] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 100%;
   height: 12px;
   background-image: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
   border-radius: 2px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
   color: #E6E6E6;
   border: none;
}

.mp-container progress[value]::-webkit-progress-bar {
   background-image: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
   border-radius: 2px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.mp-container progress[value]::-webkit-progress-value {
   border-radius: 2px;
   background-image: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
}

.mp-container progress[value]::-moz-progress-bar {
   border-radius: 2px;
   background-image: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
}

.mp-container progress[value]::-moz-progress-value {
   border-radius: 2px;
   background-image: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
}

.mp-container .mp-fs-button {
   right: 5px;
   background-position: 0 14px;
}

.mp-container video {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.mp-container input[type=range] {
   -webkit-appearance: none;
   right: 30px;
   width: 50px;
   height: 12px;
   padding: 0;
   margin: 0;
   background-color: transparent;
}

.mp-container input[type=range]::-webkit-slider-runnable-track {
   height: 5px;
   cursor: pointer;
   background: #E6E6E6;
}

.mp-container input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 10px;
   height: 10px;
   margin-top: -3px;
   background: white;
   border: 1px solid black;
   border-radius: 50%;
   cursor: pointer;
}

.mp-container input[type=range]::-moz-range-track {
   height: 5px;
   cursor: pointer;
   background: #E6E6E6;
}

.mp-container input[type=range]::-moz-range-thumb {
   -moz-appearance: none;
   width: 10px;
   height: 10px;
   margin-top: -3px;
   background: white;
   border: 1px solid black;
   border-radius: 50%;
   cursor: pointer;
}

.mp-container input[type=range]::-ms-track {
   height: 5px;
   background: transparent;
   color: transparent;
   border-color: transparent;
   cursor: pointer;
}

.mp-container input[type=range]::-ms-fill-lower {
   background: #E6E6E6;
}

.mp-container input[type=range]::-ms-fill-upper {
   background: #E6E6E6;
}

.mp-container input[type=range]::-ms-thumb {
   appearance: none;
   width: 10px;
   height: 10px;
   background: white;
   border: 1px solid black;
   border-radius: 50%;
   cursor: pointer;
}

.mp-audio .mp-progress-holder {
   right: 140px;
}

.mp-audio .mp-remaining-time {
   right: 90px;
}

.mp-audio .mp-volume-button {
   right: 70px;
}

.mp-audio input[type=range] {
   right: 10px;
}

.mp-placeholder {
   display: table-cell;
   vertical-align: bottom;
   font-size: 11px;
   text-align: center;
   background: black;
   color: white;
   min-width: 120px;
}

.mp-placeholder span {
   display: block;
   width: 100%;
   height: 100%;
   margin-bottom: 15px;
   transform: translateY( 50% );
}
