
@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;
}
@mixin boxsizing() {
 box-sizing:        border-box;
}


@mixin centerit() {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}


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

.contentscroller{
  position:relative; width:100%;

  opacity: 0;

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

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

  &.init-setuped{
    opacity: 1;
  }

  @include boxsizing();
  *{

    @include boxsizing();
  }

  >.items{
    display: none;


  }
  .feed-description{
    display: none;
  }

  &.autoheight-off{


    .csc-item--inner{
      position: relative;
      height: 100%;
    }

    .thumbsCon{
      .csc-item{
        .divimage{
          width: 100%;
          height: 100%;
        }
      }
    }

    &.direction-vertical{

      .thumbsCon{
        width: 100%;
      }
      .thumbsClip{
        width: 100%;
      }

      .csc-item{
        width: 100%;
        height: 100%;
      }

    }
    &.direction-horizontal{

      .csc-item{
        height: 100%;
        .divimage{
          width: 100%;
        }
      }
      .thumbsCon{
        height: 100%;
      }
      .thumbsClip{
        height: 100%;
      }
      .csc-item {
        height: 100%;
      }
    }
  }
  .thumbsClip{


    width: 100%;
    overflow: hidden;;

    .thumbsCon{

      white-space: nowrap;
      display: inline-block;
      vertical-align: top;
      position: relative;


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

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

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

        float:none;
        >.csc-item--inner{
          display: block;
        }

      }
    }
  }

  &.no-scroll-horizontal{
    .thumbsClip{
      text-align: center;
    }
  }

  .thumbsCon{

    margin-left: 0px;


    &:after{










    }
  }
  .csc-row-part{
    img{
      max-width: 100%;
    }
    .csc-item--inner{
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  &.direction-horizontal{
    &.is-onlyone{
      .thumbsCon{
        width: 100%;

      }
      .csc-item{
        width: 100%;
      }
    }
  }
  &.direction-vertical{
    .thumbsClip{
      height: 100%;
    }
    .csc-item--inner{
      >.divimage{
        height: 100%;
      }
    }

    &.is-onlyone{
      .thumbsCon{
        width: 100%;

      }
      .csc-item{
        width: 100%;
      }
    }
  }


  &.only-one-off{
    .thumbsCon{
      display: inline-block;
      white-space: nowrap;
    }

    .csc-row-part-2{
      width: 50%;


    }
    .csc-row-part-3{
      width: 33.3333%;


    }
    .csc-row-part-4{
      width: 25%;

    }
    .csc-row-part-5{
      width: 20%;

    }
    .csc-row-part-6{
      width: 16.66666%;

    }
  }

  &.animate-height{
    .thumbsClip{

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

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }
  &.direction-vertical{

    text-align: center;
    .thumbsClip{
      .thumbsCon{

        width: 100%;
        white-space: normal;


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

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

        >.csc-item{
          display: block;
        }
      }
    }
  }






}


.contentscroller.skin-default{

}


.advancedscroller-con{ position:relative; width:100%;
}




.advancedscroller.with-shadow{
  margin-bottom: 35px;
}
.advancedscroller.item-padding-20{
  margin-left: -10px;
  margin-right: -10px;
  width: auto;

  .thumbsClip > .item{
    padding-left: 10px;
    padding-right: 10px;
  }
}






$border-visible:1px solid rgba(0,0,0,0.3);
$border-invisible:1px solid rgba(0,0,0,0);













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




$color_highlight: #3dbcda;


















$color_highlight: #8c8b47;
@import "cssinc/transitions";
@import 'css_common/dzs-button';







@import "cssinc/skin_nova";




@import "cssinc/arrows";

@import "cssinc/arrows_skin_bare";
@import "cssinc/captions";
@import "cssinc/bullets";
@import "cssinc/misc";


