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

$mainclass : ".advancedscroller";

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

  .divimage{
    background-size: cover;
    background-position: center center;
  }

  &.autoheight-off{


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

    .thumbsCon{

    }

    &.direction-vertical{

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

      .csc-item{
        width: 100%;
        height: 100%;
        .divimage{
          width: 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{
    // -- todo: y tho ?
    margin-left: 0px;
    //margin-right: -15px;

    &:after{

      // -- todo: y tho ?


      //position: relative;
      //content: " ";
      //display: inline-block;
      //opacity: 0;
      //width: 30px;
      //height: 1px;
    }
  }
  .csc-row-part{
    img{
      max-width: 100%;
    }
    .csc-item--inner{
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  &.direction-horizontal{
    .bulletsCon{
      text-align: center;

      margin: 10px auto;
    }

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

      }
      .csc-item{
        width: 100%;
      }
    }
  }
  &.direction-vertical{
    .thumbsClip{
      height: 100%;
    }
    .bulletsCon{
      text-align: center;

      margin: 10px auto;
    }
    .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;
        }
      }
    }
  }


  $size: 9px;
  .bulletsCon{
    .bullet{
      display: inline-block;
      width: $size;
      height: $size;

      cursor: pointer;

      border-radius: 50%;

      margin-right: 8px;

      background-color: #ffffff;

      &.active{
        background-color:#8195a7;
      }
    }
  }

  &.bullets-right{

    .bulletsCon{
      position: absolute;
      right: 15px;
      top:50%;
      transform: translate3d(0%,-50%,0);

      .bullet{
        display: block;
        margin-right: 0;


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

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

        &+.bullet{
          margin-top: 8px;
        }
      }

    }
  }





}


.contentscroller.skin-default{

}

/* -- functional styling */
.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);










.skin-vive-heading{
  color: #FFFFFF;
  text-align: center;

  font-size: 14px;

  margin-bottom: 15px;

  font-size: 36px;
  padding:0;

  text-shadow: 0 0 1px rgba(0,0,0,.4);
  font-weight: 400;
}
hr.skin-vive{
  width: 80%;
  height: 1px;
  border:0;
  margin: 15px auto;
  background-color: rgba(255,255,255,0.5);
}



.skin-vive-heading+hr.skin-vive{
  margin-top: 0;
}

.skin-vive-subheading{

  color: #FFFFFF;
  text-align: center;


  margin-bottom: 25px;

  font-size: 18px;
  padding:0;

  font-family: "Open Sans", Arial;
  font-weight: 300;

  line-height: 1.6;

  text-shadow: 0 0 2px rgba(0,0,0,.4)
}

/* ====== misc

*/

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




$color_highlight: #3dbcda;




















img.fullwidth{ ; display:block;
}



$color_highlight: #8c8b47;

button.dzs-button{
  border:0;
  background-color: transparent;
}
.dzs-button{
  position: relative;
  padding: 15px;

  cursor: pointer;

  line-height: 1;

  white-space: nowrap;

  font-size: 13px;

  background-color: transparent;



  &.padding-small{
    padding: 10px;
    font-weight: bold;
    font-size:11px;
  }
}

a.dzs-button {
  display: inline-block;
}





@import "cssinc/skin_nova";






.arrow-con{
  $size: 30px;
  width: $size;
  height: $size;

  display: inline-block;

  background-color: #eeeeee;

  color: #444444;

  position: relative;

  border-radius: 50%;
  >.the-icon{
    @include centerit();
  }

  &+.arrow-con{
    margin-left: 5px;
  }
}


.contentscroller:hover{

  .arrowsCon{
    opacity: 1;
  }
}
.arrowsCon{

  line-height: 1;

  opacity: 0.5;
  >*{

    display: inline-block;

    cursor: pointer;
    margin-left: 5px;
  }

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


  .cs-arrow{
    $size: 40px;
    width: $size;
    height: $size;


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

    border-radius: 5px;


    >svg{
      $size: 17px;
      width: $size;
      height: $size;

      @include  centerit();

      path{
        fill: #444444;
      }
    }
  }

  .cs-arrow-left,.cs-arrow-right{
    top: 50%;
    left: 15px;
    position: absolute;
    transform: translate3d(0,-50%,0);
  }

  .cs-arrow-right{
    left: auto;
    right: 15px;
  }

  .arrow-con{

    color: #ffffff;


    opacity: 0.8;

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

    &:hover{
      opacity: 1;
    }
  }
  &.theme-dark{

    .arrow-con{

      color: #444444;
    }


  }

}
.contentscroller.no-need-for-nav{
  .bulletsCon{ display:none;
  }
  .arrowsCon{ display:none;
  }
}

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


