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



$color_highlight: #cb1919;


.zoomtimeline{

  margin-bottom: 30px;

  @include boxsizing();

  *{
    @include boxsizing();
  }

  .items{


    opacity: 0;
    visibility: hidden;


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

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


  .ztm-item{
    display: block;
  }

  .clear{
    display: block;
    clear:both;
  }

  .the-heading{
    margin-bottom: 20px;
  }

  p{
    margin-bottom: 15px;
  }

  .scroller-con.skin_luna{
    margin-bottom: 0px;
    .scrollbar{
      height: 20px;
      position: absolute;
      top:0; bottom:auto;
      width: 100%;
      background-color: rgba(255,255,255,0.1);

      //overflow: hidden;


    }

  }
  .scroller-con.dragging{

    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
    .scrollbar .scrollbarx {
      cursor: -webkit-grabbing;
      cursor: -moz-grabbing;
      cursor: grabbing;
    }
  }
  .scroller-con.skin_luna .scrollbarx{
    margin-top: 2px;

    border-radius: 3px;
    top:0;

    cursor: -webkit-grab; cursor:-moz-grab;
    cursor: grab;

    .the-year{
      position: absolute;
      top:50%;
      left:50%;

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

      color: #444;

      font-weight: bold;
      font-size: 10px;
    }
  }
  .scroller-con.skin_luna .scrollbarx_bg{
    margin-top: 0px;

    top:0;
    background-color: rgba(200,200,200,0.4);
  }

  a{
    color:$color_highlight;
  }


  .thumbs-gallery-con{

    padding: 5px 5px 0;

    margin-left: -2px;
    margin-right: -2px;
    position: relative;
    background-color: rgba(20,20,20,.5);

    display: inline-block;



    .thumbs-gallery{

    }

    .thumb-smoothie{
      position: relative;

      width: 45px;
      height: 45px;
    }
  }

  .thumbs-gallery-con:before{
    content: "";

    position: absolute;
    top:0px;
    left:2px;

    width: calc(100% - 4px);
    height: 100%;
  }




  .preloader-wave{
    position: absolute;
    top:50%;
    left:50%;

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

    opacity: 1;
    visibility: visible;


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

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

  .preloader-wave span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#dddddd;
    position:absolute;
    animation: preloader_audio 1.5s  infinite ease-in-out;
  }

  .preloader-wave span:nth-child(2){
    left:11px;
    animation-delay: .2s;

  }
  .preloader-wave span:nth-child(3){
    left:22px;
    animation-delay: .4s;
  }
  .preloader-wave span:nth-child(4){
    left:33px;
    animation-delay: .6s;
  }
  .preloader-wave span:nth-child(5){
    left:44px;
    animation-delay: .8s;
  }
  @keyframes preloader_audio {
    0% {height:5px;transform:translateY(0px);background:#BF959D;}
    25% {height:30px;transform:translateY(15px);background:#BF959D;}
    50% {height:5px;transform:translateY(0px);background:#cccccc;}
    100% {height:5px;transform:translateY(0px);background:#aaaaaa;}
  }


  .overflow-it{
    overflow: hidden;
    width: auto;
  }
}

.zoomtimeline.content-position-bottom{
  .scroller-con.skin_luna{
    .scrollbar{
      top: auto;
      bottom: 0;
    }
  }

}


.zoomtimeline.ztm-ready{

  .preloader-wave{

    opacity: 0;
    visibility: hidden;
  }

  .items{

    opacity: 1; visibility: visible;
  }
}

.zoomtimeline:after{
  content:"";
  clear: both;
  display: block;
}


$color_line_bg: #ddd;

$color_text: #777;

$aux_size: 70px;

.zoomtimeline.mode-default{

  line-height: 1;
  position: relative;

  p{
    line-height: 1.6;
  }

  .ztm-item{

    position: relative;
    margin-bottom: 30px;





    .hex-icon {
      position: absolute;
      top:10px;
      left: $aux_size/2-20;


      width: 40px;
      height: 23.09px;
      background-color: $color_line_bg;
      margin: 11.55px 0;
    }

    .hex-icon:before,
    .hex-icon:after {
      content: "";
      position: absolute;
      width: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
    }

    .hex-icon:before {
      bottom: 100%;
      border-bottom: 11.55px solid $color_line_bg;
    }

    .hex-icon:after {
      top: 100%;
      width: 0;
      border-top: 11.55px solid $color_line_bg;
    }


    .hex-icon{
      .the-icon{
        font-size: 16px;
        color: $color_text;

        position: absolute;
        top:50%;left:50%;

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

    .ztm-content{
      padding: 10px 0 20px;
      position: relative;
      left: 0px;
      padding-left: $aux_size + 30;


      >*:first-child.the-heading{

        margin-top:0;
      }
    }


    .hex-desc-con{

      width: $aux_size;
      position: absolute;

      top: $aux_size - 2;

      height: 30px;


      .hex-desc{


        position: absolute;

        top:0;
        left:0;
        width: 100%;

        text-align: center;

        font-size: 9px;
        text-transform: uppercase;
        //transform: translate(-50%,0);

        font-weight:900;
        font-family: "Lato", "Open Sans", "Helvetica", serif;

        background-color: $color_line_bg;

        color: $color_text;

        padding:5px 3px;

        white-space: nowrap;
      }
    }
  }



  .thumbs-gallery-con {
    background-color: rgba(0, 0, 0, .12);
  }




}
.zoomtimeline.mode-default:before{
  content:"";
  height: 100%;
  width: 1px;
  background-color: $color_line_bg;

  opacity: 0.5;

  position: absolute;
  left: $aux_size/2-1;

}

.zoomtimeline.mode-default.under-400{

  padding-top: 15px;
  .hex-icon{

    width: 7px;
    height: 7px;
    border-radius: 50%;

    top:3px;

    left: 4px;
    >.the-icon{
      display: none;
    }
  }
  .hex-icon:before, .hex-icon:after{
    display: none;


  }

  .hex-desc-con{

    top: -13px;
    left: -5px;
  }
  .hex-desc-con:before{
    content:"";


    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

    border-top: 4px solid #ddd;

    position: absolute;
    top:19px;
    left:9px;
  }

  .ztm-item{
    .ztm-content{
      padding-left: 15px;
    }
  }
}
.zoomtimeline.mode-default.under-400:before{


  left: 7px;
}



.zoomtimeline.mode-oncenter{
  position:relative;

  padding-bottom: 15px;

  .hex-desc-con{
    position: absolute;
    left: 50%;
    width: 70px;
    margin-left:-35px;
    text-align:center;
    padding: 3px;
    background-color: rgba(255,255,255,1);

    font-size: 9px;
    color: #555555;
    font-weight: bold;
    font-family: "Lato", serif;
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .hex-desc{


      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  }

  .ztm-item{
    position: relative;

    margin-bottom: 15px;

    .the-image-con{

      width: calc(50% - 60px);
      float:right;
      text-align:left;

      position: relative;

      top: 15px;

      $size: 70px;
      .the-image{
        display: inline-block;

        width: $size;
        height: $size;
        border-radius:50%;

        border: 1px solid rgba(20,20,20,0.3);
        box-shadow: 0 0 0 3px rgba(255,255,255,0.5);

        background-size: cover;
        background-position: center center;
      }
    }
    .ztm-content{
      width: calc(50% - 60px);
      text-align:right;
      float:left;

      p:last-child{
        margin-bottom: 0;
      }

    }

    .the-heading{
      margin-top: 26px;
      margin-bottom: 8px;
    }
  }


  .ztm-item:before{
    content: "";
    position: absolute;
    top: 38px;
    left: 50%;

    width: 46px;
    height: 1px;

    margin-left: 1px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+1,0+100 */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 1%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 1%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 1%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

  }


  .ztm-item:after{
    content: "";
    position: absolute;
    top: 48px;
    left: 50%;

    width: 46px;
    height: 1px;

    margin-left: -46px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.5+99 */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 99%,rgba(255,255,255,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 99%,rgba(255,255,255,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=1 ); /* IE6-9 */

  }




  .ztm-item:nth-child(odd){
    .ztm-content{
      float:right;
      text-align:left;

    }
    .the-image-con{
      float:left;
      text-align:right;
    }
  }


  .ztm-item:nth-child(even):after{
    top:38px;


  }

  .ztm-item:nth-child(even):before{
    top:48px;


  }
  .ztm-item.no-image:nth-child(even):before{
    display: none;

  }
  .ztm-item.no-image:nth-child(odd):after{
    display: none;

  }
}


$color_line_bg: #fff;


.zoomtimeline.mode-oncenter:before{
  content:"";
  height: 100%;
  width: 1px;
  background-color: $color_line_bg;

  opacity:0.5;


  position: absolute;
  left: 50%;

}





$color_line_bg: #222222;

.zoomtimeline.mode-oncenter.skin-dark{
  .hex-desc-con{
    background-color: rgba(30,30,30,1);

    color: #FFFFFF;

  }

  .thumbs-gallery-con{

    background-color: rgba(20,20,20,.15);
  }


  .ztm-item:before{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#383838+0,303030+100&0.5+1,0+99,0+100 */
    background: -moz-linear-gradient(left,  rgba(56,56,56,0.5) 0%, rgba(56,56,56,0.5) 1%, rgba(48,48,48,0) 99%, rgba(48,48,48,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(56,56,56,0.5) 0%,rgba(56,56,56,0.5) 1%,rgba(48,48,48,0) 99%,rgba(48,48,48,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(20,20,20,0.5) 0%,rgba(15,15,15,0.5) 1%,rgba(48,48,48,0) 99%,rgba(20,20,20,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80383838', endColorstr='#00303030',GradientType=1 ); /* IE6-9 */


  }


  .ztm-item:after{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#303030+0,383838+100&0+0,0+1,0.5+99 */
    background: -moz-linear-gradient(left,  rgba(48,48,48,0) 0%, rgba(48,48,48,0) 1%, rgba(56,56,56,0.5) 99%, rgba(56,56,56,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(48,48,48,0) 0%,rgba(48,48,48,0) 1%,rgba(56,56,56,0.5) 99%,rgba(56,56,56,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(20,20,20,0) 0%,rgba(15,15,15,0) 1%,rgba(20,20,20,0.5) 99%,rgba(20,20,20,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00303030', endColorstr='#80383838',GradientType=1 ); /* IE6-9 */

  }


  .the-image-con {

    .the-image {
      border: 1px solid rgba(255,255,255,0);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
    }
  }
}

.zoomtimeline.mode-oncenter.skin-dark:before{
  background-color: $color_line_bg;


}


.zoomtimeline.mode-slider{

  .ztm-item{
    display: none;
  }

  .scroller-con{
    margin-bottom: 0;
  }
  a{
    padding: 2px 4px;

    background-color: #f9f2f4;

    font-size: 11px;
  }

  .feature-image{
    background-size: cover;
    width: 120px;
    height: 120px;
    margin-bottom: 15px;


    border: 3px solid #222;

    //margin: 0 auto 15px;
  }


  .inner{
    >img{
      max-width: none;
    }
  }

  .the-item{
    display: inline-block;
    white-space: normal;
    vertical-align: bottom;

    padding: 0 15px;

    position: relative;


    .hex-desc{
      font-size: 11px;
      font-weight: bold;
      font-family: "Lato",serif;
    }

    h3{
      margin-top: 7px;

      margin-bottom: 15px;
      font-size: 23px;
      font-weight: 200;


      color: #A08E2A;

      font-family: "Raleway",serif;
    }


    p{
      font-style: italic;
    }

    .the-content:last-child{
      p:last-child{
        margin-bottom: 0;
      }
    }
  }


  .the-item:before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 1px;
    height: calc(100% + 19px);

    //background-color: rgba(50, 50, 50, 0.1);
    border-left: 1px dashed rgba(50,50,50,0.1)
  }

  .inner{
    padding-bottom: 20px;
    >.the-item:first-child:before{
      display: none;
    }
  }
  .scrollbar{
    position: relative;
    top:-20px;
  }
  .sc-descriptions-content{
    >.the-item:first-child:before{
      display: none;
    }
  }

  .sc-descriptions{
    white-space: nowrap;

    width: 100%;
    overflow: hidden;
    //background-color: #f8f8f8;

    .sc-descriptions-content{

      white-space: nowrap;
      display: inline-block;

      position: relative;
    }



    .the-item{
      display: inline-block;
      vertical-align: top;

      position: relative;

      padding-top: 20px;


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

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



      >.the-content{
        position: relative;
      }

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

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

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

    }

    .the-item:before{
      top:-30px;
    }

  }
}

.zoomtimeline.mode-slider.skin-light{
  .scroller-con.skin_cerc .scrollbarx_bg{
    background-color: rgba(255,255,255,0.3);
  }

  .the-item:before{
    border-left-color: rgba(255,255,255,0.3);
  }
}


.zoomtimeline.mode-slider-variation{

  a{
    color: $color_highlight;

    background-color: rgba(214,189,189,0.3);

    padding: 1px 3px;

    display: inline-block;
  }

  .ztm-item{
    display: none;
  }

  >.scroller-con{
    background-color: #FFFFFF;
  }

  .inner{
    >img{
      max-width: none;
    }
  }

  $size: 9px;
  .hexa-mark-con{

    position: absolute;
    top: 5px;

    width: auto;
    height: $size;


    cursor: pointer;

    .hexa-content{
      background-color: rgba(255,255,255,1);

      color: #222222;
      position: absolute;
      bottom:25px;


      left: 50%;

      transform: translateX(-50%);

      white-space: nowrap;
      padding: 4px 12px;

      font-size: 10px;
      font-weight: 300;

      max-width: 140px;

      opacity: 0;
      visibility: hidden;


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

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


      >span{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
      }
    }
    .hexa-content:after{
      content: "";
      position: absolute;
      left: 50%;
      top:100%;

      width: 0;
      height:0;

      margin-left: 0px;


      border-left: 5px solid transparent;
      border-right: 5px solid transparent;

      border-top: 6px solid #ffffff;
    }


    .hexa-inshow{
      white-space: nowrap;

      font-weight: bold;

      font-size: 9px;

      position: relative;
      top:-0px;

      left:-0px;

      color: #444;

      pointer-events: none;

      opacity: .7;



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

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

  .hexa-mark{

    width: $size;
    height: $size;

    background-color: #ffffff;

    transform: rotate(45deg);

    position: absolute;
    top: 0px;
    left:0;

    box-shadow: 0 0 0 1px rgba(0,0,0,.1);

    cursor: pointer;
    //border: 1px solid #aaaaaa;


  }

  .hexa-mark-con:hover{
    .hexa-content{
      opacity: 1;
      visibility: visible;
    }

  }


  .hexa-mark-con:hover{

    .hexa-inshow{
      opacity: 1;
    }
  }

  .sc-descriptions{
    white-space: nowrap;

    width: 100%;
    background-color: #f8f8f8;
    overflow: hidden;

    .sc-descriptions-content{

      white-space: nowrap;
      display: inline-block;

      position: relative;
    }



    .sc-description{
      display: inline-block;
      vertical-align: top;

      padding: 25px 20px 15px;
      position: relative;

      text-align: center;
      white-space: normal;
      color: #777;


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

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


      p{
        font-style: italic;
      }

      >.the-content{
        position: relative;
      }

      >.the-bg{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: #f8f8f8;

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

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

    .sc-description.active{
      color: #222;



      >.the-bg{
        background-color: #FFFFFF;
      }
    }

    .the-heading{
      margin-top: 0;
      margin-bottom: 15px;
    }

    .sc-description .the-after{
      content: "";
      position: absolute;
      right: 100%;
      top:0;


      height: 100%;
      width: 1px;

      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+47,b4b3b1+100&0+1,0.05+30,0.13+47,0.05+68,0+100 */
      background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.13) 47%, rgba(71,71,70,0.05) 68%, rgba(180,179,177,0) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.13) 47%,rgba(71,71,70,0.05) 68%,rgba(180,179,177,0) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.13) 47%,rgba(71,71,70,0.05) 68%,rgba(180,179,177,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00b4b3b1',GradientType=0 ); /* IE6-9 */


    }
  }

  .preloader-wave{

    opacity: 1;
    visibility: visible;
  }

  .items,.sc-descriptions,.scroller-con{

    opacity: 0;
    visibility: hidden;


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

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

  }
}


.zoomtimeline.mode-slider-variation.ztm-ready{

  .preloader-wave{

    opacity: 1;
    visibility: visible;
  }

  .items,.sc-descriptions,.scroller-con{

    opacity: 0;
    visibility: hidden;
  }
}

.zoomtimeline.mode-slider-variation.ztm-ready.reinited-finished-loading-all-images{

  .preloader-wave{

    opacity: 0;
    visibility: hidden;
  }

  .sc-descriptions,.scroller-con{

    opacity: 1;
    visibility: visible;
  }
}


$color_bg : rgba(34,34,34,1);
.zoomtimeline.mode-yearslist{

  .ztm-item{
    display: none;
  }

  .yearlist-line{
    content:"";
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px dotted rgba(255,255,255,0.3);

    position: absolute;
    top:100%;
    margin-top: -24px;
  }


  .yearlist-container:before,.yearlist-container:after{
    content: "";

    position: absolute;
    top:0;
    left:0;

    width: 65px;
    height: 100%;

    z-index:1;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#222222+0,222222+21,222222+100&1+0,1+21,0+100 */
    background: -moz-linear-gradient(left,  rgba(34,34,34,1) 0%, rgba(34,34,34,1) 21%, rgba(34,34,34,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(34,34,34,1) 0%,rgba(34,34,34,1) 21%,rgba(34,34,34,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(34,34,34,1) 0%,rgba(34,34,34,1) 21%,rgba(34,34,34,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#00222222',GradientType=1 ); /* IE6-9 */


  }

  .yearlist-container:after{
    content: "";

    right:0;
    left:auto;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#222222+0,222222+79,222222+100&0+0,1+79,1+100 */
    background: -moz-linear-gradient(left,  rgba(34,34,34,0) 0%, rgba(34,34,34,1) 79%, rgba(34,34,34,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 79%,rgba(34,34,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(34,34,34,0) 0%,rgba(34,34,34,1) 79%,rgba(34,34,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#222222',GradientType=1 ); /* IE6-9 */

  }

  .yearlist-con{
    white-space: nowrap;

    text-align: center;
    background-color: $color_bg;
    padding: 13px 0 30px;

    line-height: 1;
    position: relative;
    width: 100%;

    color: #EEEEEE;


    .yearlist{
      display: inline-block;
      position: relative;

      height: 30px;
      text-align: left;
      width: 100%;

      left:0;

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

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

    }


    .year{
      width: 160px;

      display: inline-block;
      text-align: center;



      position: relative;
      top:50%;

      height: 30px;

      transform: translateY(-50%);


      span.the-year{
        display: inline-block;
        vertical-align: bottom;

        opacity: 0.65;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;

        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%,0%);


        $transition-property: opacity,visibility,font-size;
        $transition-duration: 0.3s;
        $transition-timing: ease-in;

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

    }

    $size: 6px;

    .year:after{
      content:"";
      position: absolute;
      top:100%;
      left:50%;
      width: $size;

      height: $size;
      display: block;

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

      margin-left: -($size / 2);
      margin-top: 14px;

      transform: rotate(45deg);



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

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


    .year.active{

      span.the-year{

        font-size: 21px;
        opacity:1;

      }
    }
    .year.active:after{

      background-color: rgba(255,255,255,1);
    }
  }

  .yearlist-container{

    height: 70px;
  }
  .yearlist-container, .details-container{
    width: 1170px;
    margin: 0 auto;
    position: relative;

    overflow: hidden;

    max-width: 100%;

  }


  .details-container{
    white-space: nowrap;

    height:0px;


    .diamond-arrow-left,.diamond-arrow-right{
      position: absolute;
      top:50%;
      left: 38px;

      transform: translateY(-50%);

      cursor: pointer;

      z-index: 1;


      $transition-property: opacity,visibility;
      $transition-duration: 0.25s;
      $transition-timing: ease-out;

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

    .diamond-arrow-right{
      left: auto;
      right: 38px;
    }

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

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

    .detail{
      display: inline-block;
      width: 100%;

      left: 100%;

      position: absolute;
      padding: 25px 140px;

      white-space: normal;
      .detail-image-con{
        width: 350px;
        height: auto;
        margin-right: 30px;

        margin-bottom: 30px;

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

        position: relative;


        .detail-image{
          position: relative;
          top:0;
          left:0;
          width: 100%;
          height: auto;

          z-index: 1;
        }
      }


      .detail-image-shadow-con{

        position: relative;
        .detail-image-shadow-left{


          content: "";


          background: -moz-linear-gradient(left, rgba(180,179,177,0) 0%, rgba(144,143,142,0.1) 20%, rgba(0,0,0,0.3) 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(180,179,177,0)), color-stop(20%,rgba(144,143,142,0.1)), color-stop(100%,rgba(0,0,0,0.3))); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(left, rgba(180,179,177,0) 0%,rgba(144,143,142,0.1) 20%,rgba(0,0,0,0.3) 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(left, rgba(180,179,177,0) 0%,rgba(144,143,142,0.1) 20%,rgba(0,0,0,0.3) 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(left, rgba(180,179,177,0) 0%,rgba(144,143,142,0.1) 20%,rgba(0,0,0,0.3) 100%); /* IE10+ */
          background: linear-gradient(to right, rgba(180,179,177,0) 0%,rgba(144,143,142,0.2) 20%,rgba(0,0,0,0.9) 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4b3b1', endColorstr='#4d000000',GradientType=1 ); /* IE6-9 */

          width: 50%;
          height: 50px;

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

          transform: rotate(-6deg) translate(0,-44px);

          filter: blur(5px);
          -webkit-filter: blur(5px);
        }


        .detail-image-shadow-right{

          content: "";

          background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(144,143,142,0.1) 80%, rgba(180,179,177,0) 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(80%,rgba(144,143,142,0.1)), color-stop(100%,rgba(180,179,177,0))); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(144,143,142,0.1) 80%,rgba(180,179,177,0) 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(144,143,142,0.1) 80%,rgba(180,179,177,0) 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(144,143,142,0.1) 80%,rgba(180,179,177,0) 100%); /* IE10+ */
          background: linear-gradient(to right, rgba(0,0,0,0.9) 0%,rgba(144,143,142,0.2) 80%,rgba(180,179,177,0) 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00b4b3b1',GradientType=1 ); /* IE6-9 */

          width: 50%;
          height: 50px;

          position: absolute;
          top:100%;left:50%;

          transform: rotate(6deg) translate(0,-44px);

          filter: blur(5px);
          -webkit-filter: blur(5px);
        }
      }


      .detail-excerpt{

        .the-heading{
          margin-top: 5px;

          font-size: 14px;

          margin-bottom: 15px;
          font-weight: bold;

          text-transform: uppercase;
        }
      }

      p{
      }

    }
    .detail:after{
      content: "";
      display: block;
      clear: both;
    }

    .detail.active{
      position: relative;
      height: auto;
    }


  }

}



.zoomtimeline.mode-yearslist{

  .preloader-wave{

    opacity: 1;
    visibility: visible;
  }

  .items,.yearlist-con,.details-container{

    opacity: 0;
    visibility: hidden;


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

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

  }
}
.zoomtimeline.mode-yearslist.ztm-ready{

  .preloader-wave{

    opacity: 0;
    visibility: hidden;
  }

  .items,.yearlist-con,.details-container{

    opacity: 1;
    visibility: visible;
  }
}

.zoomtimeline.mode-yearslist.under-900{

  .details-container{

    .detail-image-con{
      width: 150px;
    }
  }
}

.zoomtimeline.mode-yearslist.under-600{

  .diamond-arrow-left,.diamond-arrow-right{
    transform: translateY(0%) scale(0.7);
    position: relative;
    float:left;
    margin-top: 5px;
    top:0;


  }
  .diamond-arrow-right{
    float:right;
  }

  .details-container {
    .detail {
      padding: 10px 40px;

      .detail-image-con{
        width: 100%;
        display: block;
        float: none;
      }
    }
  }
}

/* mode-YEARSLIST END */












/* mode-3dslider START */
$color_bg : rgba(34,34,34,1);
$color_highlight : rgba(220, 167, 167, 1);
.zoomtimeline.mode-3dslider {

  width: 100%;
  overflow: hidden;
  position: relative;

  font-family: "Dosis","Open Sans",Helvetica,serif;
  .ztm-item {
    display: none;
  }

  a.detail{
    text-decoration: none;
  }

  $item_w : 300px;
  $item_h : 400px;

  .yearlist-con{
    position: absolute;

    width: 100%;

    .yearlist-container{
      margin: 0 auto;

      max-width: 1170px;

      overflow: hidden;

      position: relative;

      top: ($item_h/2 + 60);
      height: ($item_h);

      -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), color-stop(0.9, rgba(0,0,0,1)), to(rgba(0,0,0,0)));


      .yearlist-container-inner{

        -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), color-stop(0.1, rgba(0,0,0,1)), to(rgba(0,0,0,1)));
        height: 100%;
      }

    }

    .yearlist{
      white-space: nowrap;
      position: relative;


      left: 0;


      $transition-property: left;
      $transition-duration: 0.25s;
      $transition-timing: ease-out;

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


      .year{
        display: inline-block;
        vertical-align: top;

        text-align: center;

        width: 20%;

        font-size: 13px;
        position: relative;

        font-weight: bold;
        color: #EEEEEE;


        top:0;
        $transition-property: top,font-size;
        $transition-duration: 0.25s;
        $transition-timing: ease-in;

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

        .the-year{
          display: block;
        }

        figure{
          position: relative;
          top:8px;

          opacity: 1;

          width:10px;
          height: 10px;

          left: 50%;
          margin-left: -6px;

          //border: 3px solid (transparentize($color_highlight, 0.5));
          //border: 5px solid rgba(255,255,255,0.5);
          box-shadow: 0 0 0 4px rgba(255,255,255,0.25);

          background-color: $color_highlight;

          border-radius: 50%;

          $transition-property: opacity,visibility;
          $transition-duration: 0.25s;
          $transition-timing: ease-in;

          @include apply_transition($transition-property, $transition-duration, $transition-timing);
          polygon{
            fill:  $color_highlight;
          }

          polyline{
            stroke: rgba(255,255,255,0.9);
          }

        }
      }

      .year.curr-item{

        top: ($item_h/2 + 18);

        font-size: 21px;

        figure{
          opacity: 0;
          visibility: hidden;
        }
      }


    }

  }
  .yearlist-con:after{
    position: absolute;
    top: ($item_h/2 + 90);

    width: 100%;
    height: 2px;

    content: "";

    background-color: $color_highlight;

  }
  .details-container{

    position: relative;

    perspective: 600px;

    opacity: 0;
    visibility: hidden;

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

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


    >.detail{

      position: absolute;
      text-align: center;
      width: $item_w;
      top:0;

      visibility: visible;
      opacity: 1;


      left: 50%;

      margin-left: -$item_w/2;
      $transition-property: all;
      $transition-duration: 0.25s;
      $transition-timing: ease-out;

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


      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      perspective: 600px;
      -webkit-perspective: 600px;


      .detail-image-con{
        position: relative;
        transform: rotateY(0deg) scale(1) translate3d(0,0,0);
        -webkit-transform: rotateY(0deg) scale(1) translate3d(0,0,0);


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

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

        $transition-property: opacity,visibility;
        $transition-duration: 0.25s;
        $transition-timing: ease-out;

        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
      .detail-image,.detail-image--border{
        position: relative;

        width: 100%;
        height: $item_h;

        border-radius: 5px;

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

      .detail-image--border{
        border: 2px solid rgba(220, 167, 167, 0.7);


        position: absolute;

        border-radius:0;

        $transition-property: background,border;
        $transition-duration: 0.25s;
        $transition-timing: ease-out;

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


      }

      .detail-excerpt{
        font-size: 14px;

        padding-top: 60px;

        opacity: 0;

        visibility: hidden;

        color: #ffffff;


        margin-left: -10%;
        margin-right: -10%;


        $transition-property: opacity,visibility;
        $transition-duration: 0.25s;
        $transition-timing: ease-out;

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

        p{
          line-height: 1.7;
        }

        font-family: Raleway, "Open Sans",serif;
      }
      >.the-heading{
        color: #ffffff;
        transform: rotateY(0deg) scale(1) translate3d(0,0,0);
        -webkit-transform: rotateY(0deg) scale(1) translate3d(0,0,0);
        $transition-property: all;
        $transition-duration: 0.25s;
        $transition-timing: ease-out;

        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
    >.curr-item{
      position: absolute;


      z-index: 55;

      max-width: 100%;
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);


      .detail-image--border{
        opacity: 0;
      }
      .detail-image{

        box-shadow: 0 0 8px 0 rgba(0,0,0,0.5);
      }

      .detail-image-con{

        transform: rotateY(0deg) scale(1) translate3d(0,0,0);
        -webkit-transform: rotateY(0deg) scale(1) translate3d(0,0,0);
      }

      >.the-heading{

      }


      .detail-excerpt{
        visibility: visible;
        opacity: 1;
      }


    }
    >.next-item,>.prev-item,>.next-next-item,>.prev-prev-item,>.prev-prev-prev-item,>.next-next-next-item{
    }
    >.next-item,>.prev-item{
      position: absolute;

      cursor: pointer;

      //left: calc(50% + #{$item_w/2});

      //transform: rotateY(-32deg) scale(0.8);

      transform: translate3d(calc(#{$item_w/2} + 3vw),0,0);
      -webkit-transform: translate3d(calc(#{$item_w/2} + 3vw),0,0);

      z-index: 30;
      .detail-image{

        opacity: 0.3;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0);


        -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), color-stop(0.4, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      }

      .detail-image-con{

        transform: rotateY(-32deg) scale(0.75) translate3d(0,0,0);
        -webkit-transform: rotateY(-32deg) scale(0.75) translate3d(0,0,0);
      }

      >.the-heading{

        transform: rotateY(-10deg) scale(0.75) translate3d(0,20px,0);
        opacity: 0.5;
      }


    }

    >.prev-item{

      transform: translate3d(calc(#{-$item_w/2} - 3vw),0,0);
      -webkit-transform: translate3d(calc(#{-$item_w/2} - 3vw),0,0);


      .detail-image-con{

        transform: rotateY(32deg) scale(0.75) translate3d(0,0,0);
        -webkit-transform: rotateY(32deg) scale(0.75) translate3d(0,0,0);
      }

      .detail-image{

        -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), color-stop(0.6, rgba(0,0,0,1)), to(rgba(0,0,0,1)));
      }
      >.the-heading{

        transform: rotateY(10deg) scale(0.75) translate3d(0,20px,0);
        -webkit-transform: rotateY(10deg) scale(0.75) translate3d(0,20px,0);
        opacity: 0.3;
      }
    }
    >.next-next-item,>.prev-prev-item{
      cursor: pointer;

      //left: calc(50% + #{$item_w});

      //transform: rotateY(-32deg) scale(0.65) translate3d(#{$item_w+120},0,0);


      transform: translate3d(calc(#{$item_w} + 5vw),0,0);
      -webkit-transform: translate3d(calc(#{$item_w} + 5vw),0,0);
      .detail-image--border{
        background-color: rgba(0,0,0,0);
        border-color: rgba(220, 167, 167, 0.5);
      }
      .detail-image{

        opacity: 0;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0);
      }

      .detail-image-con{

        transform: rotateY(-32deg) scale(0.65) translate3d(0,40px,0);
        -webkit-transform: rotateY(-32deg) scale(0.65) translate3d(0,40px,0);
      }

      .detail-excerpt{
        visibility: hidden;
        opacity: 0;
      }
      >.the-heading{

        transform: rotateY(-15deg) scale(0.75) translate3d(0,40px,0);
        -webkit-transform: rotateY(-15deg) scale(0.75) translate3d(0,40px,0);
        opacity: 0.15;
      }

    }


    >.prev-prev-item{

      transform: translate3d(calc(#{-$item_w} - 5vw),0,0);
      -webkit-transform: translate3d(calc(#{-$item_w} - 5vw),0,0);

      .detail-image{
        opacity: 0;

      }

      .detail-image-con{

        transform: rotateY(32deg) scale(0.65) translate3d(0,0,0);
        -webkit-transform: rotateY(32deg) scale(0.65) translate3d(0,0,0);
      }
      >.the-heading {

        transform: rotateY(15deg) scale(0.75) translate3d(0, 40px, 0);
        -webkit-transform: rotateY(15deg) scale(0.75) translate3d(0, 40px, 0);
      }
    }

    >.prev-prev-prev-item{

      visibility: hidden;
      opacity: 0;

      transform: translate3d(calc(#{-$item_w*1.5} - 5vw),0,0);
      -webkit-transform: translate3d(calc(#{-$item_w*1.5} - 5vw),0,0);

      .detail-image{
        opacity: 0;
      }

      .detail-image-con{


        transform: rotateY(32deg) scale(0.65) translate3d(0,0,0);
        -webkit-transform: rotateY(32deg) scale(0.65) translate3d(0,0,0);
      }
    }
    >.next-next-next-item{

      visibility: hidden;
      opacity: 0;

      transform: translate3d(calc(#{$item_w*1.5} + 5vw),0,0);
      -webkit-transform: translate3d(calc(#{$item_w*1.5} + 5vw),0,0);
      .detail-image{
        opacity: 0;

      }
      .detail-image-con{

        transform: rotateY(-32deg) scale(0.65) translate3d(0,0,0);
        -webkit-transform: rotateY(-32deg) scale(0.65) translate3d(0,0,0);
      }
    }
  }
}

.zoomtimeline.mode-3dslider.ztm-ready{
  .details-container{
    opacity: 1;
    visibility: visible;

  }
}
.zoomtimeline.mode-3dslider.skin-dark{

  .details-container{

    > .detail > .the-heading{
      color: #555555;
    }
  }

  .yearlist-con .yearlist{
    >.year{

      color: #555;
    }
  }
  .details-container > .detail .detail-excerpt p, .details-container div.paragraph{
    color: #222222;
  }
}

.zoomtimeline.mode-3dslider.under-600{
  .details-container{
    >.detail{
      max-width: none;
      .detail-excerpt{
        margin-left:0;
        margin-right:0;
        width: 100%;
      }
    }
  }
}

.zoomtimeline.circuit-the-timeline-off{

}
.zoomtimeline.circuit-the-timeline-off.first-item-active{

  .diamond-arrow-left{
    opacity: 0;
    visibility: hidden;
  }
}
.zoomtimeline.circuit-the-timeline-off.last-item-active{

  .diamond-arrow-right{
    opacity: 0;
    visibility: hidden;
  }
}

  /* mode-3dslider END */

/* mode-BLACKWHITE START */
.zoomtimeline.mode-blackwhite{

  .ztm-item{
    display: block;
    font-size:0;
    background-color: #FFFFFF;
    position: relative;
    .hex-icon,.hex-desc-con{

    }


    $color_bg: #555555;
    .hex-desc-con{
      position: absolute;

      top:50%;
      right: auto;
      left: 50%;

      transform: translate3d(0,-50%,0);

      margin-left: -10px;

      margin-top: -5px;

      font-size: 13px;

      .hex-desc{
        background-color: $color_bg;
        color: #ffffff;

        padding: 5px 10px;

        font-weight: bold;
        &:after{
          content:"";

          position: absolute;

          width: 0;
          height: 0;
          border-top: 10px solid $color_bg;
          border-right: 0px solid transparent;
          border-left: 10px solid transparent;

          top:100%;

          opacity: 0.6;

          left: auto;
          right: calc(100% - 10px);
        }
      }

    }

    .image-con+.hex-desc-con{

      margin-left: 0px;
      margin-right: -10px;
      right: 50%;
      left:auto;

      .hex-desc{

        &:after{
          border-right: 10px solid transparent;
          border-left: 0px solid transparent;

          top:100%;

          opacity: 0.6;

          left: calc(100% - 10px);
          right: auto;
        }
      }
    }

    .image-con,.ztm-content{
      display: inline-block;
      width: 50%;
      vertical-align: middle;
      font-size: 13px;
    }

    .image-con{
      >.fullwidth{
        display: block;
        margin-top: 0;
      }
    }

    .the-heading{
      font-size: 14px;
      font-weight: bold;
      font-family: "Lato",serif;

      margin-top:0;

      text-transform: uppercase;

      position: relative;

      padding-bottom: 12px;
      margin-bottom: 15px;
    }
    .the-heading:after{
      content:"";
      position: absolute;
      top:100%;
      left:50%;
      margin-left: -10px;
      width: 20px;
      height: 2px;
      background-color: #222222;

    }

    .ztm-content{
      padding: 30px;
      color: #222222;
      text-align:center;

      p:last-child{
        margin-bottom: 0;
      }
    }
  }

  //>.ztm-item:nth-child(even){
  //  .ztm-content{
  //    text-align:right;
  //
  //    .the-heading:after{
  //      left: auto; right:0;
  //    }
  //  }
  //}
}

.zoomtimeline.mode-blackwhite.under-400{
  .ztm-item{
    margin-bottom: 30px;
  }
  .ztm-content,.image-con{
    width: 100%;
    margin-bottom: 10px;
  }
}

/* -- mode-blackwhite END */


/* -- mode-masonry START */
.zoomtimeline.mode-masonry{
  margin-left: -15px;
  margin-right: -15px;

  .ztm-item{
    width: 33.33%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;

    float:left;

    .hex-desc-con{

      font-family: "Raleway","Open Sans",sans-serif;
      font-size: 11px;

      font-style: italic;

      opacity: 0.5;

      text-align: center;
    }


    .ztm-item--inner{

      background-color: #ffffff;

      color: #222222;
      .ztm-content{
        padding: 30px 30px 25px;

        text-align: center;
        font-family: "Raleway","Open Sans",sans-serif;
        font-size: 13px;
        font-weight: 400;

        p{

        }

        >.the-heading{
          margin-top: 0;

          font-family: "Raleway","Open Sans",sans-serif;
          font-weight: 200;
          font-size: 28px;

          position: relative;


          padding-bottom: 15px;
          margin-bottom: 15px;
        }


        .the-heading:after{
          content:"";
          position: absolute;
          top:100%;
          left:50%;
          margin-left: -10px;
          width: 20px;
          height: 1px;
          background-color: #222222;

        }

        *:last-child{
          margin-bottom: 0;
        }
      }

      a.image-con{

        overflow: hidden;

        position: relative;
        display: block;

        img{
          margin-top: 0;
        }


        .the-label{

          position: absolute;
          white-space: nowrap;

          top:50%;
          left:50%;

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

          display: block;


          background-color: #222;

          padding: 3px 5px;

          color: #fff;



          font-size: 11px;
          font-weight: 700;

          opacity: 0;
          visibility: hidden;

          margin-top: 20px;



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

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

        }

      }
      a.image-con: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: top,opacity,visibility;
        $transition-duration: 0.3s;
        $transition-timing: ease-in;

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

      }

      a.image-con:hover{
        .the-label{


          opacity: 1;
          visibility: visible;

          margin-top: 0px;
        }
      }
      a.image-con:hover:before{
        opacity: 1;
        visibility: visible;
        top:0;
      }
    }


    .thumbs-gallery-con {
      background-color: rgba(20, 20, 20, .15);
    }
  }
}



.zoomtimeline.mode-masonry.ztm-ready{

  .preloader-wave{

    opacity: 1;
    visibility: visible;
  }

  .items{

    opacity: 0;
    visibility: hidden;
  }
}

.zoomtimeline.mode-masonry.ztm-ready.reinited-finished-loading-all-images{

  .preloader-wave{

    opacity: 0;
    visibility: hidden;
  }

  .items{

    opacity: 1;
    visibility: visible;
  }
}

.zoomtimeline.mode-masonry.under-900{
  .ztm-item{
    width: 50%;
  }
}
.zoomtimeline.mode-masonry.under-600{
  .ztm-item{
    width: 100%;
  }
}


/* -- mode-masonry END */



.thumbs-gallery-con--global{

  padding: 5px 5px 0;

  margin-left: -2px;
  margin-right: -2px;
  position: relative;
  background-color: rgba(20,20,20,.5);

  display: inline-block;



  .thumbs-gallery{

  }

  span.thumb-smoothie{
    display: inline-block;
  }

  .thumb-smoothie{
    position: relative;

    width: 45px;
    height: 45px;
  }
}


.float-left{
  float: left;
}
.overflow-it{
  overflow: hidden;
}

.normal-weight{
  font-weight: 400;
}

.full-bg,.full-bg--overlay{
  position: absolute;
  top:0; left:0;
  width: 100%; height: 100%;

  background-size: cover;

  background-position:  center center;
}

.full-bg.blurred{
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.full-bg--overlay{
  background-color: rgba(50,50,50,0.7);
}