@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-ms-transition-property:$transition-property;
  -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;

  @if $transition-timing == ease-out-quart {
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {
    -webkit-transition-timing-function:$transition-timing;
    -moz-transition-timing-function:$transition-timing;
    -o-transition-timing-function:$transition-timing;
    transition-timing-function: $transition-timing;
  }
}
@mixin boxsizing() {
-moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}
@mixin centerit() {
  position: absolute; top:50%;left:50%; transform: translate(-50%,-50%);
}



$color_highlight: #cb1919;

/* functional styling / chassis */
.dzs-tabs{
  @include boxsizing();
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 5px;



  .dzs-tab-tobe{
    display: none;
  }

  .goto-prev-tab, .goto-next-tab{
    cursor: pointer;

  }


  .tabs-menu{
    width: auto;
    .tab-menu-con{
      display: inline-block;
      .tab-menu{
        display: inline-block;
        padding: 3px 6px;
        text-align: center;
        cursor: pointer;

        > i{
          display: inline-block;
          margin-right: 10px;
        }
      }

      .tab-menu-content-con{
        display: none;
        .tab-menu-content{
          display: none;
          text-align: left;
        }
      }

    }
    .tab-menu-con.tab-disabled{
      opacity: 0.5;
      pointer-events: none;
    }
  }


  $transition-property: height;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;


  .tabs-content{
    position: relative;
    width:100%;
    height: 0;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    $transition-property: top,left,opacity,visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;


    .tab-content{
      position: absolute;
      top:0;
      left:0;
      opacity: 0;
      visibility: hidden;
      width: 100%;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
    div.tab-content.active{
      top:0;
      left:0;
      opacity: 1;
      visibility: visible;
    }
  }

  *{

    @include boxsizing();
  }
}


.dzs-tabs.tab-menu-content-con---no-padding .tabs-menu .tab-menu-con .tab-menu-content-con{
  padding:0!important;
}

.dzs-tabs.transition-none{


  $transition-property: none;
  $transition-duration: 0s;
  $transition-timing: ease-out;


  .tabs-content {

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
    .tab-content {
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }
}


.tabs-left.transition-slide, .tabs-right.transition-slide{

  >.tabs-content{

    > .tab-content {
      top:100%;
    }
  }


}
.tabs-top.transition-slide, .tabs-bottom.transition-slide{

  >.tabs-content {

    > .tab-content {
      left: 100%;
    }
  }
}


.dzs-tabs.tabs-left,.dzs-tabs.tabs-right{
  .tabs-menu{
    float:left;
    .tab-menu-con{
      display: block;
    }
  }
  .tabs-content{
    overflow: hidden;
    width: auto;
  }
}
.dzs-tabs.tabs-right{
  .tabs-menu{
    float:right;

  }
}

.dzs-tabs.is-toggle{
  .tabs-menu{
    width: 100%;
    .tab-menu-con{
      display: block;
      width: 100%;

      $transition-property: height;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      .tab-menu-content-con{
        width: 100%;
        overflow: hidden;
        display: block;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
        .tab-menu-content{
          width: 100%;
          display: block;
        }
      }
    }
  }

  .tabs-content{
    display: none;
  }
}




.dzs-tabs:after{
  content: "";
  clear: both;
  display: block;;
}

/* ---- estethic styling */


.dzs-tabs.skin-default{

  $transition-property: border-color;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .tabs-menu {
    .tab-menu-con {
      .tab-menu {
        padding: 6px 6px;
        border-bottom: 3px solid transparent;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    .tab-menu-con.active {
      .tab-menu {
        border-bottom: 3px solid $color_highlight;
      }
      .tab-menu-content-con{
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
      }
    }
  }

  .tabs-content{
    border-top: 1px solid rgba(200,200,200,0.2);
    padding-top: 10px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    .tab-content{
      top: 10px;
    }
    .tab-content.active{
      top: 10px;
    }
  }
}

/* ---- skin-blue */

$color_highlight: #05abe0;
.dzs-tabs.skin-blue{

  $transition-property: background, color;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  > .tabs-menu {
    .tab-menu-con {
      .tab-menu {
        padding: 10px 15px;
        border-right: 1px solid rgba(0,0,0,0.1);
        background-color: #eee;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    .tab-menu-con:last-child{
      .tab-menu {
        border-right: 0px solid rgba(0,0,0,0.2);
      }
    }


    .tab-menu-con.active {
      .tab-menu {
        background-color: $color_highlight;
        color: #fafafa;
      }
      .tab-menu-content-con{
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
      }
    }
  }

  .tabs-content{
    padding-top: 20px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    .tab-content{
      top: 20px;
    }
    .tab-content.active{
      top: 20px;
    }
  }
}
.dzs-tabs.is-toggle.skin-blue{
  .tabs-menu{
    .tab-menu-con{
      .tab-menu{
        width: 100%;
        text-align: left;
        padding-left: 45px;
        position: relative;
        border-right: 0px solid rgba(0,0,0,0.1);
      }
      .tab-menu:before,.tab-menu:after{
        width: 20px;
        height: 20px;
        position: absolute;
        content: "";
        top:10px;
        left:11px;
        background-image: url(img/skin_blue_plus.png);
        background-repeat: none;
        background-position: center center;
        background-size: cover;
      }
      .tab-menu:after{
        background-image: url(img/skin_blue_minus.png);
        opacity: 0;
        visibility: hidden;
      }
    }
    .tab-menu-con.active{
      .tab-menu:after {
        opacity: 1;
        visibility: visible;
      }

    }
  }
}

/* ---- skin-blue END */

/* ---- skin-chef */

$color_highlight: #d1b97e;
.dzs-tabs.skin-chef{

  $transition-property: background, color,border;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .tabs-menu {
    .tab-menu-con {
      .tab-menu {
        padding: 10px 15px;
        border-right: 1px solid rgba(0,0,0,0.1);
        background-color: #eee;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    .tab-menu-con:last-child{
      .tab-menu {
        border-right: 0px solid rgba(0,0,0,0.2);
      }
    }


    .tab-menu-con.active {
      .tab-menu {
        background-color: $color_highlight;
        color: #fafafa;
      }
      .tab-menu-content-con{
        padding: 0px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
  }

  .tabs-content{
    padding-top: 20px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    .tab-content{
      top: 20px;
    }
    .tab-content.active{
      top: 20px;
    }
  }
}
.dzs-tabs.is-toggle.skin-chef{
  .tabs-menu{
    .tab-menu-con{
      .tab-menu{
        width: 100%;
        text-align: left;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 32px;
        position: relative;
        border: 1px solid #d3d3d3;
        background-color: #f5f5f5;
        margin-bottom: 1px;


        $transition-property: all;
        $transition-duration: 0.5s;
        $transition-timing: ease-out;
        > .plus-sign{

          position: absolute;
          top:21px;
          left:10px;

          circle, rect{
            transform-origin: 50% 50%;
            @include apply_transition($transition-property, $transition-duration, $transition-timing);
          }
        }
      }
    }
    .tab-menu-con.active{
      .tab-menu{
        background-color: $color_highlight;
        border: 1px solid rgba(0,0,0,0);
      }
      .plus-sign{
        circle{
          fill: #f5f5f5;
        }
        rect{
          fill: $color_highlight;
        }
        .rect1{
          transform:scaleY(0);
        }
      }
      > .tab-menu-content-con{
        border: 1px solid #eeeeee;
        margin-bottom: 1px;
        >.tab-menu-content{

          padding: 20px;
        }
      }

    }
  }
}

/* ---- skin-move */

$color_highlight: #59c8ef;


.dzs-tabs.skin-move{

  $transition-property: background-color, color, padding;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .tabs-menu {
    margin-bottom: 10px;
    .tab-menu-con {
      border: 1px solid #7b7b7b;
      color: #7b7b7b;
      margin-right: 12px;
      .tab-menu {
        padding: 10px 15px;
        width: 100%;
        background-color: transparent;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    .tab-menu-con:last-child{
      .tab-menu {
        border-right: 0px solid rgba(0,0,0,0.2);
      }
    }


    .tab-menu-con.active {
      border: 1px solid $color_highlight;
      color: $color_highlight;
      .tab-menu {
      }
      .tab-menu-content-con{
        padding: 30px 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        .tab-menu-content{
          padding: 0 15px;
        }
      }
    }
  }

  $offset: 10px;
  .tabs-content{
    color: #cbcbcb;
    border: 1px solid $color_highlight;
    .tab-content{
      padding: 25px 15px;
    }
    .tab-content.active{
    }
  }

  .color-highlight{
    color: $color_highlight;
  }
}
.dzs-tabs.skin-move.tabs-left{

  $offset: 10px;
  .tabs-menu{

    margin-right: 10px;
    .tab-menu-con{

      margin-right: 0px;
      margin-bottom: 12px;
    }
  }
  .tabs-content {
    border: 1px solid $color_highlight;
    .tab-content{
    }
  }

  .tab-content.active{
  }

  .tab-menu-con{
    .tab-menu{
      text-align: left;
    }
  }

}
.dzs-tabs.is-toggle.skin-move{
  .tabs-menu{
    .tab-menu-con{
      margin-right: 0px;
      margin-bottom: 12px;
      width: 100%;
      .tab-menu{
        width: 100%;
        text-align: left;
        position: relative;
        border-right: 0px solid rgba(0,0,0,0.1);
      }
      .tab-menu:before,.tab-menu:after{
        width: 10px;
        height: 10px;
        position: absolute;
        content: "+";
        top:9px;
        right:8px;
        background-repeat: none;
        background-position: center center;
        background-size: cover;
      }
      .tab-menu:after{
        opacity: 0;
        visibility: hidden;
        content: "-";
      }
    }
    .tab-menu-con.active{
      color: #cbcbcb;
      .tab-menu{
        padding-left: 20px;
        color: $color_highlight;
      }
      .tab-menu:before {
        opacity: 0;
        visibility: hidden;
      }
      .tab-menu:after {
        opacity: 1;
        visibility: visible;
      }

    }
  }
}

/* ---- skin-melbourne */

$color_highlight: #a59c8e;


.dzs-tabs.skin-melbourne{

  $transition-property: background-color, color, padding;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .tabs-menu {
    margin-bottom: 10px;
    .tab-menu-con {
      border: 1px solid #7b7b7b;
      color: #7b7b7b;
      margin-right: 12px;
      .tab-menu {
        padding: 10px 15px;
        width: 100%;
        background-color: transparent;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    .tab-menu-con:last-child{
      .tab-menu {
        border-right: 0px solid rgba(0,0,0,0.2);
      }
    }


    .tab-menu-con.active {
      border: 1px solid $color_highlight;
      color: $color_highlight;
      .tab-menu {
      }
      .tab-menu-content-con{
        padding: 30px 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        .tab-menu-content{
          padding: 0 15px;
        }
      }
    }
  }

  $offset: 10px;
  .tabs-content{
    color: #cbcbcb;
    border: 1px solid $color_highlight;
    .tab-content{
      padding: 25px 15px;
    }
    .tab-content.active{
    }
  }

  .color-highlight{
    color: $color_highlight;
  }
}
.dzs-tabs.skin-melbourne.tabs-left{

  $offset: 10px;
  .tabs-menu{

    margin-right: 10px;
    .tab-menu-con{

      margin-right: 0px;
      margin-bottom: 12px;
    }
  }
  .tabs-content {
    border: 1px solid $color_highlight;
    .tab-content{
    }
  }

  .tab-content.active{
  }

  .tab-menu-con{
    .tab-menu{
      text-align: left;
    }
  }

}
.dzs-tabs.is-toggle.skin-melbourne{
  .tabs-menu{
    .tab-menu-con{
      margin-right: 0px;
      margin-bottom: 12px;
      width: 100%;
      .tab-menu{
        width: 100%;
        text-align: left;
        position: relative;
        border-right: 0px solid rgba(0,0,0,0.1);
      }
      .tab-menu:before,.tab-menu:after{
        width: 10px;
        height: 10px;
        position: absolute;
        content: "+";
        top:9px;
        right:8px;
        background-repeat: none;
        background-position: center center;
        background-size: cover;
      }
      .tab-menu:after{
        opacity: 0;
        visibility: hidden;
        content: "-";
      }
    }
    .tab-menu-con.active{
      color: #cbcbcb;
      .tab-menu{
        color: $color_highlight;
      }
      .tab-menu:before {
        opacity: 0;
        visibility: hidden;
      }
      .tab-menu:after {
        opacity: 1;
        visibility: visible;
      }

    }
  }
}

$color_bg: #fff;
$color_text: #111;

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

.dzs-tabs.skin-box{
  .tabs-menu{
    position: relative;
    z-index:8;
    .tab-menu-con{
      border: 1px solid rgba(0,0,0,0.3);
      border-left: 0px solid rgba(0,0,0,0.3);
      background: $color_bg;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
      .tab-menu{
        padding: 10px 14px;

        color: $color_text;
      }
    }
    .tab-menu-con:first-child{
      .tab-menu{

      }
      border-left: 1px solid rgba(0,0,0,0.3);
    }

    .tab-menu-con.active{
      border-bottom: 1px solid $color_bg;
      .tab-menu{
      }
    }
  }

  .tabs-content{
    margin-top: -1px;
    .tab-content{
      padding: 10px 15px;
      border: 1px solid rgba(0,0,0,0.3);
      background-color: $color_bg;
    }
  }
}
.dzs-tabs.skin-box.is-toggle{

  .tab-menu-con, .tab-menu-con.active{
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;

    .tab-menu{
      padding-left: 30px;
      position: relative;
      width: 100%;
      text-align: left;


    }


    $transition-property: all;
    $transition-duration: 0.2s;
    $transition-timing: ease-out;

    .tab-menu:before{
      content: "+";
      position: absolute;
      left: 12px;
      top:10px;
      font-weight: normal;
      font-size: 18px;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      font-family: Courier New, Arial;
      opacity: 0.5;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);

    }

    $transition-property: height;
    $transition-duration: 0.5s;
    $transition-timing: ease-out-quart;

    .tab-menu-content-con{
      .tab-menu-content{
        padding: 10px 15px 15px;
        color: $color_text;
      }
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }
  .tab-menu-con.active{
    .tab-menu{

    }
    .tab-menu:before{
      transform: rotate(43deg);
      -webkit-transform: rotate(45deg);
    }
  }
}



$color_bg: #fff;
$color_text: #111;
$color_highlight: #e74c3c;

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

.dzs-tabs.skin-qcre{


  .tabs-menu{
    position: relative;
    z-index:8;
    .plus-sign{
      display: none;
    }
    .tab-menu-con{
      border: 1px solid #DDDDDD;
      border-left: 1px solid rgba(0,0,0,0);
      background: $color_bg;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
      .tab-menu{
        padding: 10px 14px;

        color: #999999;
        font-family: "Open Sans", arial, serif;
      }
    }
    .tab-menu-con:first-child{
      .tab-menu{

      }
      border-left: 1px solid rgba(0,0,0,0.3);
    }

    .tab-menu-con.active{
      border-bottom: 1px solid $color_highlight;
      border-left: 1px solid $color_highlight;
      border-top: 1px solid $color_highlight;
      border-right: 1px solid $color_highlight;
      .tab-menu{
        background-color: $color_highlight;
        color: #FFFFFF;
      }
    }
  }

  .tabs-content{
    margin-top: -1px;
    .tab-content{
      padding: 20px;
      border: 1px solid #DDDDDD;
      background-color: $color_bg;
    }
  }
}
.dzs-tabs.skin-qcre.is-toggle{

  .tabs-menu{
    .tab-menu-con{
      border: 0px solid rgba(0,0,0,0);
      .tab-menu{
        width: 100%;
        text-align: left;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 39px;
        position: relative;
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
        margin-bottom: 1px;


        $transition-property: all;
        $transition-duration: 0.5s;
        $transition-timing: ease-out;
        > .plus-sign{

          display: inline-block;
          position: absolute;
          top:16px; 
          left:15px;



          circle, rect{
            transform-origin: 50% 50%;
            @include apply_transition($transition-property, $transition-duration, $transition-timing);
          }
        }

      }


      .tab-menu-content{

        padding: 20px;
      }
    }
    .tab-menu-con.active{
      .tab-menu{
        background-color: $color_highlight;
        border: 1px solid rgba(0,0,0,0);
      }
      .plus-sign{
        circle{
          fill: #f5f5f5;
        }
        rect{
          fill: $color_highlight;
        }
        .rect1{
          transform:scaleY(0);
        }
      }
      > .tab-menu-content-con{
        border: 1px solid #DDDDDD;
        margin-bottom: 1px;

      }

    }
  }
}

$color_bg: #fff;
$color_text: #111;
$color_highlight: #e74c3c;

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

.restaurant-menu-item{

  margin-bottom: 19px;


  .restaurant-menu-item--image{
    float:left;
    width: 65px;

    margin-right: 15px;


    .the-image{
      width: 65px;
      height: 65px;

      background-size: cover;
      background-position: center center;
    }
  }

  a.restaurant-menu-item--image{
    display: block;
    position: relative;

    overflow: hidden;
  }

  a.restaurant-menu-item--image:before{
    content: "";

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

    background-color: rgba(0,0,0,.5);


    opacity:0; visibility: hidden;


    $transition-property: opacity,visibility,top;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
  a.restaurant-menu-item--image:after{
    content: "\f002";

    position: absolute;
    top:50%; left:50%;
    font-family: "FontAwesome";

    color: #ffffff;
    font-size: 18px;

    transform: translate(-50%,-50%);

    opacity:0; visibility: hidden;

    margin-top: 10px;

    $transition-property: opacity,visibility,margin;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  a.restaurant-menu-item--image:hover:before{
    top:0;
  }

  a.restaurant-menu-item--image:hover:after{
    margin-top: 0px;
  }

  a.restaurant-menu-item--image:hover:before,a.restaurant-menu-item--image:hover:after{

    opacity:1; visibility: visible;
  }

  .restaurant-menu-item--content{
    overflow: hidden;
  }

  .the-title{
    font-size: 20px;
    font-weight: 700;
    color: #222222;
    float:left;
    margin-right: 10px;
    margin-top: -1px;
  }

  .the-price{
    font-size: 19px;
    font-weight: bold;
    font-family: "Open Sans",serif;

    color: #222222;
    float:right;

    margin-left: 10px;
  }

  .dots{
    display: block;
    overflow: hidden;

    background-image: url(img/dot2px.svg);
    height: 2px;

    position: relative;
    top: 24px;
  }

  .the-ingredients{

    font-weight: bold;
    font-family: "Open Sans",serif;

    font-size: 14px;
    font-style: italic;
  }

  .the-ingredients{
    float:left;
    color: #777777;
    font-weight: bold;
    font-family: "Open Sans",serif;

    font-size: 14px;
    margin-top: -5px;
    font-style: italic;


  }
  .the-mentions{
    float:right;

    font-size:0;

    .mention{
      display: inline-block;

      margin-left: 1px;

      font-weight: 700;
      font-family: "Lato",serif;

      font-size: 11px;

      background-color: #ff8000;
      color: #ffffff;
      line-height: 1;

      padding:4px 5px;

    }
  }
}
.restaurant-menu-item:after{
  content: "";
  display: block;
  clear: both;
}

.dzs-tabs.skin-menu{


  .tabs-menu{
    position: relative;
    z-index:8;
    background-color: #EEEEEE;

    padding: 20px;
    text-align: center;
    .plus-sign{
      display: none;
    }
    .tab-menu-con{
      border: 0px solid #DDDDDD;
      border-left: 0px solid rgba(0,0,0,0);
      background-color: transparent;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
      .tab-menu{
        padding: 1px 6px;

        color: #222;
        font-size: 14px;
        font-weight: bold;
        font-family: "Lato", arial, serif;


        background-color: rgba(231,76,60,0);

        $transition-property: color,background;
        $transition-duration: 0.25s;
        $transition-timing: ease-in;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }

      position: relative;
    }

    .tab-menu-con:before{
      content: "";
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid $color_highlight;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -7px;
      opacity: 0;

      $transition-property: opacity;
      $transition-duration: 0.25s;
      $transition-timing: ease-in;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }


    .tab-menu-con:first-child{
      .tab-menu{

      }
      border-left: 0px solid rgba(0,0,0,0.3);
    }

    .tab-menu-con.active,.tab-menu-con:hover{
      border-bottom: 0px solid $color_highlight;
      border-left: 0px solid $color_highlight;
      border-top: 0px solid $color_highlight;
      border-right: 0px solid $color_highlight;
      .tab-menu{
        background-color: $color_highlight;
        color: #FFFFFF;
      }
    }
    .tab-menu-con.active:before,.tab-menu-con:hover:before{
      opacity: 1;
    }
  }

  .tabs-content{
    margin-top: -1px;
    .tab-content{
      padding: 39px 0 0;
      border: 0px solid #DDDDDD;
      background-color: transparent;
    }
  }
}
.dzs-tabs.skin-menu.is-toggle{

  .tabs-menu{
    .tab-menu-con{
      border: 1px solid rgba(0,0,0,0);
      .tab-menu{
        width: 100%;
        text-align: left;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 39px;
        position: relative;
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
        margin-bottom: 1px;


        $transition-property: all;
        $transition-duration: 0.5s;
        $transition-timing: ease-out;
        > .plus-sign{

          display: inline-block;
          position: absolute;
          top:16px;
          left:15px;



          circle, rect{
            transform-origin: 50% 50%;
            @include apply_transition($transition-property, $transition-duration, $transition-timing);
          }
        }

      }


      .tab-menu-content{

        padding: 20px;
      }
    }
    .tab-menu-con.active{
      .tab-menu{
        background-color: $color_highlight;
        border: 1px solid rgba(0,0,0,0);
      }
      .plus-sign{
        circle{
          fill: #f5f5f5;
        }
        rect{
          fill: $color_highlight;
        }
        .rect1{
          transform:scaleY(0);
        }
      }
      > .tab-menu-content-con{
        border: 1px solid #DDDDDD;
        margin-bottom: 1px;

      }

    }
  }
}


.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;
    }
  }


}




.bg-image-cover{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 300px;
}

.waiting-read-more-click{
  display: none;
}



.button {
  max-width: 250px;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background: none;
  color: inherit;
  vertical-align: middle;
  position: relative;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;

}

.button.smaller-padding{
  padding: 3px 15px 5px;
}

.button.dashed-border{
  border-style: dashed;
}

a.button{
  display: inline-block;
  text-align: center;
  cursor: pointer;
}





.button--vive{
  background-color: $color_highlight;

  border-radius: 6px;



  text-transform: uppercase;


  font-weight: bold;


  font-size: 11px;

  padding: 6px 12px;


  color: #ffffff;

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

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


}


.button--vive:hover{


  color: #eee;
}