/*
Widget Name: W26 Media
Description: Displays a video or audio player or a file download
Author: Univers Labs Ltd
Author URI: https://univ.rs/
*/
.so-widget-w26-media > .inner .media-container {
  background: #E7E7EC;
}
.so-widget-w26-media > .inner .media-container:fullscreen {
  width: 100%;
  height: 100%;
}
.so-widget-w26-media > .inner .media-container:fullscreen .video-holder {
  width: 100%;
  height: calc(100% - 60px);
  padding-bottom: 0;
}
.so-widget-w26-media > .inner .media-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
.so-widget-w26-media > .inner .media-container:-webkit-full-screen .video-holder {
  width: 100%;
  height: calc(100% - 60px);
  padding-bottom: 0;
}
.so-widget-w26-media > .inner .media-container:-moz-full-screen {
  width: 100%;
  height: 100%;
}
.so-widget-w26-media > .inner .media-container:-moz-full-screen .video-holder {
  width: 100%;
  height: calc(100% - 60px);
  padding-bottom: 0;
}
.so-widget-w26-media > .inner .media-container:-ms-full-screen {
  width: 100%;
  height: 100%;
}
.so-widget-w26-media > .inner .media-container:-ms-full-screen .video-holder {
  width: 100%;
  height: calc(100% - 60px);
  padding-bottom: 0;
}
.so-widget-w26-media > .inner .media-container.video-container .controls-holder .timeline-holder {
  width: calc(100% - (60px * 3));
}
.so-widget-w26-media > .inner .media-container.audio-container .controls-holder .timeline-holder {
  width: calc(100% - (60px * 2));
}
.so-widget-w26-media > .inner .media-holder {
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.so-widget-w26-media > .inner .media-holder.file-holder {
  background-color: #FFF;
  height: 185px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .icon-container {
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 57.5px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper {
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > .h2-28 {
  margin-bottom: 10px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b {
  color: #B88865;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after {
  content: 'keyboard_arrow_right';
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  font-size: 20px;
  vertical-align: -5px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-70 {
  font-size: 70px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-36 {
  font-size: 36px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-34 {
  font-size: 34px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-32 {
  font-size: 32px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-20 {
  font-size: 20px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-18 {
  font-size: 18px;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-white {
  color: #FFF;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-inner-temple-blue {
  color: #0A1347;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-tint-10 {
  color: #E7E7EC;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-tint-30 {
  color: #B6B8C7;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-tint-50 {
  color: #8589A2;
}
.so-widget-w26-media > .inner .media-holder.file-holder > .text-wrapper > a.p-14b:after.md-bronze {
  color: #B88865;
}
.so-widget-w26-media > .inner .media-holder.video-holder {
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.so-widget-w26-media > .inner .media-holder.audio-holder {
  width: 100%;
  height: 220px;
}
.so-widget-w26-media > .inner .media-holder.audio-holder audio {
  display: none;
}
.so-widget-w26-media > .inner .media-holder > .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.so-widget-w26-media > .inner .media-holder > .media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-blend-mode: multiply;
  opacity: 1;
  visibility: visible;
  -webkit-transition-property: opacity, visibility;
  -moz-transition-property: opacity, visibility;
  -o-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
.so-widget-w26-media > .inner .media-holder > .media-overlay.hide {
  opacity: 0;
  visibility: hidden;
}
.so-widget-w26-media > .inner .media-holder > .media-overlay .h4-14b,
.so-widget-w26-media > .inner .media-holder > .media-overlay .h2-28b {
  color: #FFF;
}
.so-widget-w26-media > .inner .controls-holder > div {
  display: inline-block;
  vertical-align: top;
}
.so-widget-w26-media > .inner .controls-holder .media-button {
  position: relative;
  width: 60px;
  height: 60px;
  background: #FFF;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 18px;
  z-index: 1;
  -webkit-transition: background-color 0.15s;
  -moz-transition: background-color 0.15s;
  -o-transition: background-color 0.15s;
  transition: background-color 0.15s;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button {
  background: #B88865;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button:hover {
  background: #FFF;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button:hover > i {
  color: #B88865;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button > .pause-icon {
  display: none;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button.playing > .pause-icon {
  display: block;
}
.so-widget-w26-media > .inner .controls-holder .play-pause-button.playing > .play-icon {
  display: none;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder {
  overflow: hidden;
  padding: 0 22px;
  height: 60px;
  background: #FFF;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .time-holder {
  position: relative;
  padding-top: 14px;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .time-holder > .h4-14b {
  display: inline-block;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .time-holder > .remaining-time {
  position: absolute;
  top: 14px;
  right: 0;
  text-align: right;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .progress-bar-holder {
  position: relative;
  padding: 5px 0 15px 0;
  cursor: pointer;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .progress-bar-holder .progress-bar,
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .progress-bar-holder .progress-bar-track {
  width: 100%;
  height: 4px;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .progress-bar-holder .progress-bar-track {
  background-color: #E7E7EC;
}
.so-widget-w26-media > .inner .controls-holder .timeline-holder > .progress-bar-holder .progress-bar {
  position: absolute;
  top: 5px;
  left: 0;
  background: #B88865;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -o-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.so-widget-w26-media > .inner .controls-holder .volume-button:hover,
.so-widget-w26-media > .inner .controls-holder .fullscreen-button:hover {
  background: #E7E7EC;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.up .volume-up {
  display: block;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.up .volume-down,
.so-widget-w26-media > .inner .controls-holder .volume-button.up .volume-off {
  display: none;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.down .volume-down {
  display: block;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.down .volume-up,
.so-widget-w26-media > .inner .controls-holder .volume-button.down .volume-off {
  display: none;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.off .volume-off {
  display: block;
}
.so-widget-w26-media > .inner .controls-holder .volume-button.off .volume-down,
.so-widget-w26-media > .inner .controls-holder .volume-button.off .volume-up {
  display: none;
}
.so-widget-w26-media > .inner .controls-holder .volume-button:hover > .volume-slider-holder {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.so-widget-w26-media > .inner .controls-holder .volume-button > .volume-slider-holder {
  position: absolute;
  height: 100px;
  width: 100%;
  left: 0;
  bottom: 100%;
  background: #FFF;
  padding-top: 22px;
  padding-bottom: 22px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  -moz-transition-property: opacity, visibility, -moz-transform;
  -o-transition-property: opacity, visibility, -o-transform;
  transition-property: opacity, visibility,-webkit-transform,-moz-transform,-o-transform,transform;
  -webkit-transition-duration: 0.15s;
  -moz-transition-duration: 0.15s;
  -o-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transform: translateY(15px);
  -moz-transform: translateY(15px);
  -o-transform: translateY(15px);
  -ms-transform: translateY(15px);
  transform: translateY(15px);
}
.so-widget-w26-media > .inner .controls-holder .volume-button > .volume-slider-holder > .volume-slider-track,
.so-widget-w26-media > .inner .controls-holder .volume-button > .volume-slider-holder > .volume-slider {
  width: 4px;
  height: 100px;
}
.so-widget-w26-media > .inner .controls-holder .volume-button > .volume-slider-holder > .volume-slider-track {
  margin: 0 auto;
  background: #E7E7EC;
}
.so-widget-w26-media > .inner .controls-holder .volume-button > .volume-slider-holder > .volume-slider {
  position: absolute;
  bottom: 22px;
  left: 50%;
  margin-left: -2px;
  background: #B88865;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
@media (max-width: 1185px) {
  .so-widget-w26-media > .inner .controls-holder .volume-button,
  .so-widget-w26-media > .inner .controls-holder .fullscreen-button {
    display: none;
  }
  .so-widget-w26-media > .inner .media-container.video-container .controls-holder .timeline-holder,
  .so-widget-w26-media > .inner .media-container.audio-container .controls-holder .timeline-holder {
    width: calc(100% -  60px);
  }
}
@media (max-width: 740px) {
  .so-widget-w26-media > .inner .media-holder.audio-holder {
    height: 160px;
  }
  .so-widget-w26-media > .inner .controls-holder .timeline-holder > .time-holder > .remaining-time {
    display: none;
  }
}