.oonmedia-offscreen {
  position: absolute;
  left: -999em; }

.oonmedia-video {
  position: relative; }
  .oonmedia-video.oonmedia-placeholder {
    cursor: pointer;
    background-color: #000000;
    background-repeat: no-repeat;
    background-size: 100% 100%; }
  .oonmedia-video .oonmedia-playbutton {
    background-color: #323232;
    background-color: rgba(50, 50, 50, 0.6);
    margin: auto;
    width: 8%;
    height: 12%;
    position: absolute;
    right: 5%;
    bottom: 5%;
    padding: 3% 1% 1% 3%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABNCAYAAAAFICL0AAAABmJLR0QA/wD2AACCbnORAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3ggECR4J+b63nQAAAzFJREFUeNrtnFurFWUch5+fWRR5EYQXCaGUFIQXIRpdiuhHyI/gByjxAHkMT2lkeQDB07V2VZftQBHUQttWKIIIZiZtz23dqXu7/Xmx3gG1NbN1r70OM/N/btfMvPCsF9bDf80Mtr+3PYugOW7wyPZB2++FkeaCMkZs77Y9Lcw0F5QxZHuT7TdCUDE3bC+z/VoIKuay7cW2J4egYs7Z/sS2QlAxv9ieH4LG5kfbs0NQMVlDzQxBxQynhnorBBVzt1IN5faRNdSrIaiYv1JDvRSCijlbyoZy5zlhe15Z/Mi2u7R2H7BUUn8vC5rUxbUXACdTQ70bO6iYEWA/sFrSPyEonyFgB7BR0r8hKJ8bwBbgG0n3Q1A+l4D1wF5JoyEon7PAGkmHQlAxx4EVko6EoLEbaomk36rcQa021K+pod6JHVTMMHAAWCVpIATlcxfYCWyQNBiC8rkObAW2SXoQgvL5E9jQakNVWVDGGWDteBuqDoIyjgHLJR0NQWM31GeSfq9yB7XaUP2poWbEDnq+hlop6WoIyucOsAtYL+lOCMrnGvAV8LWk4RCUz0VgI7AnBBWzeVI4aMpJYKGk5SHoac4Di4CPJPUBTA4nAFwB1gL7JY08+UHdBd0GNgHbJf3X7IC6CroHfAt8Kelm0YF1E/QQ2Ad8Ieny85xQF0EGvqMxlj33IifWQdDhNOb4eTwnV1lQP43ba/pauUgVO+hCapk5rcqp2g4aAFY1a5m6CxqkMZzfIWlooi9eZkEPgG3AVknX27VIGQWNAntpDLcutXuxsgk6ROMvnDOdWrAsgo6mljnW6YV7XdAfwKcT8XNdtQ66mFrmw27K6cUddA34HDiQDc27Ta8IysYPmyXd6qVvrNuCsvHDOkl/9+YcoDtkj3G+3/uDks7zk+25pSmvDoo5ZXtB6bq9A2LOl/plBG0UcyU9ivlyqWcFbRBzOz3M+3olpkwTKOZeehz8TarEBIh5mF4o8DZVpEU5B21/QJUZp5jDtj+mDrygmNOlbJkOCLqQWqZ+t8uMIWYgtcwr1JUcMYOpZaZQd54Rcz+1zFSCpwSNppaZHkb+L+iHeJdrPo8BFRlCtLybEEYAAAAASUVORK5CYII=");
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDcyIDc3Ij4KICA8cG9seWdvbiBwb2ludHM9IjAgMCAwIDc3IDcyIDM4LjUiIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPgoK"), linear-gradient(transparent, transparent); }
  .oonmedia-video .oonmedia-geoprotected-message {
    background-color: #323232;
    background-color: rgba(50, 50, 50, 0.6);
    left: 0px;
    bottom: 0px;
    padding: 10px 6px 6px 10px;
    width: calc(100% - 16px);
    position: absolute;
    color: white;
    display: none;
    line-height: 16px; }
  .oonmedia-video.oonmedia-is-geoprotected.oonmedia-client-not-austria .oonmedia-geoprotected-message {
    display: block; }
  .oonmedia-video.oonmedia-is-geoprotected.oonmedia-client-not-austria .oonmedia-playbutton {
    display: none; }
  .oonmedia-video video {
    width: 100%;
    height: 100%; }
  .oonmedia-video .oonmedia-video-container {
    width: 100%;
    height: 100%;
    position: relative;
    /* fullscreen fixes */
    /* on touch devices do not hide control bar during ad */
    /** controls for small player **/ }
    .oonmedia-video .oonmedia-video-container :-webkit-full-screen {
      background-color: transparent; }
    .oonmedia-video .oonmedia-video-container[data-fullscreen=true] {
      max-width: 100%;
      width: 100% !important;
      height: auto !important;
      margin: 0;
      padding: 0;
      max-height: 100%;
      /** control sizing if fullscreen **/ }
      .oonmedia-video .oonmedia-video-container[data-fullscreen=true] video::-webkit-media-controls {
        display: none !important; }
      .oonmedia-video .oonmedia-video-container[data-fullscreen=true] video:-webkit-full-screen + .controls {
        background: #ccc; }
      .oonmedia-video .oonmedia-video-container[data-fullscreen=true] video:-webkit-full-screen + .controls progress {
        margin-top: 0.5rem; }
      .oonmedia-video .oonmedia-video-container[data-fullscreen=true] .oonmedia-controls {
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2147483647; }
    .oonmedia-video .oonmedia-video-container.is-touch-device.is-advertising .oonmedia-controls {
      opacity: 1; }
    .oonmedia-video .oonmedia-video-container[data-size=small] .oonmedia-controls .oonmedia-timecontainer {
      display: none; }
    .oonmedia-video .oonmedia-video-container[data-size=small] .oonmedia-controls[data-fullscreen=true] .oonmedia-timecontainer {
      display: none; }
    .oonmedia-video .oonmedia-video-container[data-size=small] .oonmedia-controls .oonmedia-volume-progress {
      width: 0px; }
    .oonmedia-video .oonmedia-video-container.is-advertising .oonmedia-playpause {
      display: none;
      pointer-events: none; }
    .oonmedia-video .oonmedia-video-container.is-advertising .oonmedia-progress {
      pointer-events: none; }
    .oonmedia-video .oonmedia-video-container.is-advertising .oonmedia-timecontainer {
      display: none; }
    .oonmedia-video .oonmedia-video-container.is-advertising .oonmedia-ad-disclaimer {
      display: block; }
    .oonmedia-video .oonmedia-video-container.oonmedia-livestream .oonmedia-controls .oonmedia-progress {
      display: none; }
    .oonmedia-video .oonmedia-video-container.oonmedia-livestream .oonmedia-controls .oonmedia-timecontainer {
      display: none; }
    .oonmedia-video .oonmedia-video-container.oonmedia-livestream .oonmedia-controls .oonmedia-live-disclaimer {
      display: block; }
    .oonmedia-video .oonmedia-video-container.oonmedia-is-loading .oonmedia-controls * {
      display: none; }
    .oonmedia-video .oonmedia-video-container.oonmedia-is-loading .oonmedia-controls .oonmedia-loading-disclaimer {
      display: block; }
    .oonmedia-video .oonmedia-video-container.oonmedia-is-error .oonmedia-controls *, .oonmedia-video .oonmedia-video-container.oonmedia-is-error.oonmedia-is-loading .oonmedia-controls * {
      display: none; }
    .oonmedia-video .oonmedia-video-container.oonmedia-is-error .oonmedia-controls .oonmedia-error-disclaimer, .oonmedia-video .oonmedia-video-container.oonmedia-is-error.oonmedia-is-loading .oonmedia-controls .oonmedia-error-disclaimer {
      display: block; }
  .oonmedia-video .oonmedia-controls {
    overflow: hidden;
    background: transparent;
    width: calc(100% - 12px);
    height: 50px;
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 250ms;
    margin: 0;
    padding: 0px 6px;
    /* Chrome requires its own rule for this, otherwise it ignores it */ }
    .oonmedia-video .oonmedia-controls[data-state=hidden] {
      opacity: 0;
      pointer-events: none; }
    .oonmedia-video .oonmedia-controls[data-state=visible] {
      opacity: 1;
      pointer-events: auto; }
    .oonmedia-video .oonmedia-controls > * {
      float: left;
      width: 45px;
      height: 100%;
      height: 50px;
      padding: 0px 5px;
      margin: 0;
      display: block;
      color: #8297BD; }
      .oonmedia-video .oonmedia-controls > *:hover {
        color: #B5CEFF; }
    .oonmedia-video .oonmedia-controls > .oonmedia-textcontainer {
      font-size: 12px;
      color: white;
      position: relative;
      text-transform: uppercase;
      top: 34%;
      height: 66%; }
    .oonmedia-video .oonmedia-controls > .oonmedia-control-right {
      float: right; }
    .oonmedia-video .oonmedia-controls > .oonmedia-fullscreen.oonmedia-hidden {
      display: none; }
    .oonmedia-video .oonmedia-controls > button > svg {
      width: 100%;
      height: 20px;
      display: block; }
    .oonmedia-video .oonmedia-controls .oonmedia-timecontainer {
      width: 80px;
      transition: width 250ms; }
      .oonmedia-video .oonmedia-controls .oonmedia-timecontainer > * {
        float: left;
        width: 48%;
        height: auto;
        text-align: center; }
      .oonmedia-video .oonmedia-controls .oonmedia-timecontainer > .oonmedia-timeseperator {
        width: 4%; }
    .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator.oonmedia-hidden {
      display: none; }
    .oonmedia-video .oonmedia-controls .oonmedia-error-disclaimer, .oonmedia-video .oonmedia-controls .oonmedia-loading-disclaimer {
      display: none;
      width: 100%; }
    .oonmedia-video .oonmedia-controls .oonmedia-progress {
      cursor: pointer; }
    .oonmedia-video .oonmedia-controls .oonmedia-volume-progress {
      width: 0%;
      transition: width 250ms;
      padding: 0px; }
    .oonmedia-video .oonmedia-controls .oonmedia-closed-captions {
      display: none;
      text-transform: uppercase;
      width: 45px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer; }
      .oonmedia-video .oonmedia-controls .oonmedia-closed-captions.oonmedia-visible {
        display: block; }
    .oonmedia-video .oonmedia-controls .oonmedia-playpause[data-state=play] svg {
      height: 18px; }
    .oonmedia-video .oonmedia-controls .oonmedia-ad-disclaimer {
      display: none;
      width: 64px; }
    .oonmedia-video .oonmedia-controls .oonmedia-live-disclaimer {
      display: none; }
    .oonmedia-video .oonmedia-controls.oonmedia-show-volume-progress .oonmedia-timecontainer {
      width: 0px;
      padding: 0px;
      overflow: hidden; }
    .oonmedia-video .oonmedia-controls.oonmedia-show-volume-progress .oonmedia-volume-progress {
      cursor: pointer;
      width: 80px;
      padding: 0px 5px; }
    .oonmedia-video .oonmedia-controls button {
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: none;
      cursor: pointer;
      background: transparent; }
    .oonmedia-video .oonmedia-controls button:hover > svg, .oonmedia-video .oonmedia-controls button:focus > svg {
      color: #B5CEFF; }
    .oonmedia-video .oonmedia-controls progress {
      position: relative;
      top: 43%;
      height: 10%;
      width: 100%;
      border: none;
      overflow: hidden;
      display: block;
      /* Internet Explorer uses this value as the progress bar's value colour */
      color: #8297BD;
      -webkit-appearance: none; }
    .oonmedia-video .oonmedia-controls progress::-moz-progress-bar {
      background-color: #8297BD; }
    .oonmedia-video .oonmedia-controls progress::-webkit-progress-value {
      background-color: #8297BD; }
    .oonmedia-video .oonmedia-controls progress::-webkit-progress-bar {
      background-color: white; }
    .oonmedia-video .oonmedia-controls button[data-state="play"] svg use.pause {
      display: block; }
    .oonmedia-video .oonmedia-controls button[data-state="play"] svg use.play {
      display: none; }
    .oonmedia-video .oonmedia-controls button[data-state="pause"] svg use.pause {
      display: none; }
    .oonmedia-video .oonmedia-controls button[data-state="pause"] svg use.play {
      display: block; }
    .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator {
      padding: 5px 0px 0px 12px; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume {
        position: relative;
        width: 100%;
        height: 100%;
        display: block; }
        .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume > span {
          display: block;
          position: absolute;
          width: 2px;
          background-color: #ccc; }
        .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume > .volume-bar-25 {
          left: 0px;
          top: 16px;
          height: 8px; }
        .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume > .volume-bar-50 {
          left: 4px;
          top: 14px;
          height: 12px; }
        .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume > .volume-bar-75 {
          left: 8px;
          top: 12px;
          height: 16px; }
        .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator .oonmedia-current-volume > .volume-bar-100 {
          left: 12px;
          top: 10px;
          height: 20px; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-25"] .volume-bar-25 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-50"] .volume-bar-25 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-50"] .volume-bar-50 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-75"] .volume-bar-25 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-75"] .volume-bar-50 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-75"] .volume-bar-75 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-100"] .volume-bar-25 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-100"] .volume-bar-50 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-100"] .volume-bar-75 {
        background: #8297BD; }
      .oonmedia-video .oonmedia-controls .oonmedia-volume-indicator[data-state="volume-100"] .volume-bar-100 {
        background: #8297BD; }