.calendar-block {
  article {
    &.fake--article {
      .fake--image {
        width: 100%;
        height: 303px;
      }
      .fake--title {
        width: 75%;
        height: 20px;
      }
      .fake--text {
        div {
          width: 75%;
          height: 10px;
          margin-bottom: 10px;
          &:nth-child(2) {
            width: 55%;
          }
          &:nth-child(3) {
            width: 35%;
          }
        }
      }
    }
    //margin-bottom: $md-space;
    margin-bottom: 50px;
    .article--image {
      margin-bottom: $xs-space;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 303px;
      width: 100%;
      &:hover {
        .caption {
          text-decoration: none;
        }
      }
      .caption {
        font-size: 16px;
        margin-bottom: 0px;
      }
    }
  }
  .loading-container {
    height: 100px;
    padding: 10px;
  }
  .loading {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: wave;
    animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    -webkit-animation-timing-function: linear;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wave;
    -moz-animation-timing-function: linear;
    background: $bg-grey;
    background-image: -webkit-gradient(
      linear,
      left center,
      right center,
      from($bg-grey),
      color-stop(0.2, #fff),
      color-stop(0.4, #fff),
      to($bg-grey)
    );
    background-image: -webkit-linear-gradient(
      left,
      $bg-grey 0%,
      #fff 20%,
      #fff 40%,
      $bg-grey 100%
    );
    background-image: -moz-gradient(
      linear,
      left center,
      right center,
      from($bg-grey),
      color-stop(0.2, #fff),
      color-stop(0.4, #fff),
      to($bg-grey)
    );
    background-image: -moz-linear-gradient(
      left,
      $bg-grey 0%,
      #fff 20%,
      #fff 40%,
      $bg-grey 100%
    );
    background-repeat: no-repeat;
    background-size: cover;
    height: 104px;
    position: relative;
  }
  .reverse-direction .loading {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
  }

  @-webkit-keyframes wave {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  @-moz-keyframes wave {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
}

@element .calendar-block and (max-width: 399px) {
  :self article .article--image {
      height: 200px;
  }
}

@element .calendar-block and (min-width: 400px) {
  :self article .article--image {
      height: 250px;
  }
}

@element .calendar-block and (min-width: 600px) {
  :self article .article--image {
      height: 300px;
  }
}

@element .calendar-block and (min-width: 900px) {
  :self article .article--image {
      height: 600px;
  }
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.modal-container {
  width: 50%;
  margin: 0px auto;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: $box-shadow;
  transition: all 0.2s ease;
  @include media-breakpoint-down(xs) {
    width: 100%;
    padding: 0px;
    border-radius: 0px;
  }
  @include media-breakpoint-down(sm) {
    width: 100%;
    padding: 0px;
    border-radius: 0px;
  }
  @include media-breakpoint-up(md) {
    width: 75%;
  }
  @include media-breakpoint-up(lg) {
    width: 50%;
  }
}
.modal-header h3 {
  margin-top: 0;
}
.modal-body {
  padding: $xs-space $xs-space;
  transition: all 0.3s ease;
  @include media-breakpoint-down(xs) {
    overflow-y: scroll;
    -webkit-overflow-scrolling: auto;
    height: 100vh;

    padding: $xs-space $xs-space $md-space $xs-space;
  }
  @include media-breakpoint-down(sm) {
    overflow-y: scroll;
    -webkit-overflow-scrolling: auto;
    height: 100vh;
    padding: $xs-space $xs-space $md-space $xs-space;
  }
}
.modal-default-button {
  float: right;
}
.modal-enter {
  opacity: 1;
}
.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}