$multimedia-alert-typography: () !default;

$multimedia-alert-headline-typography: () !default;

$multimedia-alert-close-button-typography: () !default;

.multimedia_alert {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  background-color: rgba(0,0,0,0.6);
  opacity: 1;
  z-index: 90;
  color: white;
  text-align: center;
  overflow: hidden;

  .multimedia_alert_box {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -250px;
    margin-top: -290px;
    width: 500px;
    height: 580px;
    max-width: 500px;
    @include standard-typography(
      $multimedia-alert-typography,
      (
        font-family: "SourceSansPro",
        font-size: 1.4em
      )
    );

    @media (max-width: 500px) {
      margin-left: -155px;
      margin-top: -175px;
      width: 310px;
      font-size: 0.8em;
      height: 350px;
    }

    .alert_headline {
      @include standard-typography(
        $multimedia-alert-headline-typography,
        (
          font-family: "SourceSansProLight",
          font-size: 2.2em,
          text-transform: uppercase,
          font-weight: normal
        )
      );
    }
    .close {
      border: 1px solid white;
      border-radius: 7px;
      padding: 16px 32px;
      color: white;
      text-decoration: none;
      @include standard-typography(
        $multimedia-alert-close-button-typography,
        (
          font-family: "SourceSansProLight",
          font-size: 1.4em,
          text-transform: uppercase,
          font-weight: normal
        )
      );

      &:hover {
        text-decoration: underline;
      }
    }

    &:before {
      width: 963px;
      height: 963px;
      content: "";
      background-image: image-url('pageflow/alert_vignette.png');
      position: absolute;
      top: -191px;
      left: -231px;
      z-index: -1;
    }

    p {
      font-weight: normal;
      margin-top: 0;
    }
    p.scroll_hint {
      margin-bottom: 3em;
    }

    .alert_icon {
      width: 40px;
      height: 40px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;

      &.speaker {
        background-image: image-url('pageflow/alert_icon_sound.png');
      }
      &.scrolling {
        background-image: image-url('pageflow/alert_icon_scrolling.png');
      }
    }
  }

}

.has_no_mobile_platform {
  p.mobile {
    display: none;
  }
}

.has_mobile_platform {
  p.desktop {
    display: none;
  }
}

.initially_hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-transition: 0s ease !important;
  -moz-transition: 0s ease !important;
  transition: 0s ease !important;
}

.multimedia_alert  {
  @include phone {
    @media (orientation: landscape) {
      .multimedia_alert_box {
        width: 100%;
        left: 0;
        top: 50%;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        font-size: 0.8em;
        max-width: 100%;
        @include transform(translate(0,-50%));

        .alert_block {
          display: inline-block;
          width: 45%;
          vertical-align: top;
          position: relative;
          padding: 0 2%;

          .alert_headline {
            display: none;
          }
          .alert_icon {
          /*margin-top: 10px; */
          }
          .close {
            margin-left: auto;
            width: 87px;
            display: block;
          }
        }
      }
    }
  }
}
