.dzs-tabs.skin-events {

  h3 {
    padding: 0;

    margin-top: 0;

    text-align: left;

    margin-bottom: 5px;

    font-size: 20px;
  }

  .tab-menu-con {
    background-color: rgba(15, 15, 15, 0.2);

    margin-bottom: 10px;

    position: relative;


    $transition-property: background, color;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    .tab-menu {

      padding: 0;
      display: block;
    }

    .tab-menu:after {

      content: "";
      display: block;
      clear: both;

    }
  }

  $post-date-w: 70px;
  $post-date-h: 70px;

  .post-date {
    position: absolute;
    top: 0;
    left: 0;
    width: $post-date-w;

    height: $post-date-h;


    $transition-property: width;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    .post-date--day {
      font-size: 23px;

      margin-bottom: 3px;

      font-weight: bold;
      display: block;
    }

    .post-date--month {
      text-transform: uppercase;

      display: block;
    }

    .the-image-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background-size: cover;

    }

    .the-color-bg {
      background-color: #948E6B;

      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      opacity: 0.7;


      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-in;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }

    .post-date--text {
      @include centerit();


      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-in;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }

  .post-date--placeholder {
    float: left;
    width: $post-date-w;
    height: $post-date-h;

    margin-right: 10px;


    $transition-property: width;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .content-right {
    position: absolute;
    right: 33px;

    top: 50%;
    transform: translateY(-50%);


    width: 93px;

    .button {
      max-width: none;

      width: 100%;
      position: relative;

      text-align: center;
    }


    $transition-property: all;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .post-meta {
    overflow: hidden;

    padding: 10px 5px;

    text-align: left;


    $transition-property: padding;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .post-meta--location, .post-meta--hour {
    font-size: 11px;

    > i, > .the-text {

      display: inline-block;


      vertical-align: middle;
    }

    > i {

      font-size: 14px;

      margin-right: 5px;
    }

    > .the-text {

    }
  }

  .post-meta--location {
    margin-right: 10px;
  }

  .tab-menu-content-con {
    display: none !important;
  }


  $circle-w: 5px;

  .circle1, .circle2, .circle3 {
    position: absolute;
    right: 15px;

    width: $circle-w;
    height: $circle-w;

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(255, 255, 255, 0.3);


    pointer-events: none;

    $transition-property: margin, opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .circle1 {
    margin-top: -10px;
  }

  .circle3 {
    margin-top: 10px;
    transition-delay: 0.1s;
  }

  .tab-menu-con:hover {

    background-color: rgba(15, 15, 15, .3);

    .circle1 {
      margin-top: 0;
    }

    .circle3 {
      margin-top: 0;
    }
  }


  .tab-menu-con.active {

    background-color: #ffffff;

    color: #222222;

    .post-date {
      width: 100%;
      height: 100px;
    }

    .content-right {

    }

    .post-date--placeholder {
      width: 0;
    }

    .the-color-bg {
      opacity: 0;
    }

    .post-date--text {

      opacity: 0;
    }


    .post-meta {
      padding: 120px 10px 20px;
    }

    .content-right {
      margin-top: 7px;
    }

    .circle1, .circle2, .circle3 {
      opacity: 0;
    }
  }


}