@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 {

}





$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";