@mixin css_animation($transition-property, $transition-duration, $transition-timing) {
transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-ms-transition-property:$transition-property;
-ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;
}
@mixin boxsizing() {
-moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}

$mainclass : ".advancedscroller";
$classcon : ".advancedscroller-con";

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

.advancedscroller{
  @include boxsizing();
  *{

    @include boxsizing();
  }
}

/* -- functional styling */
#{$classcon}{ position:relative; width:100%;
}
#{$mainclass}{ position:relative; width:100%;
  min-height: 50px;
}

/* ==== hide the images until loaded */
#{$mainclass} .item-tobe{
  display: none; -webkit-backface-visibility: hidden;
}

#{$mainclass}.loaded .item{
  position: relative;
}

/* ----reset ul style */
#{$mainclass} ul{ display:block; list-style:none; padding:0; margin:0;
}
#{$mainclass} ul > li{ display:block; list-style:none; padding:0; margin:0;
}
#{$mainclass}:after{ content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
      clear:both;
}
#{$mainclass} ul:after{ content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
      clear:both;
}

#{$mainclass} .item-tobe{ position:relative;
}

$transition-property: height;
$transition-duration: 0.3s;
$transition-timing: ease-out;
#{$mainclass} .thumbsCon{ display:block; overflow:hidden; position:relative; z-index:3;
  @include css_animation($transition-property, $transition-duration, $transition-timing);
}
#{$mainclass} .bulletsCon{ display:block; position:relative; z-index:4;
}
#{$mainclass} .bulletsCon:after{
  display:block; content: " ";
  clear: both;
}
#{$mainclass} .arrowsCon{ 
}
$transition-property: left;
$transition-duration: 0.9s;
$transition-timing: ease-out;
#{$mainclass} .thumbsClip{
    position:relative;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
@include css_animation($transition-property, $transition-duration, $transition-timing);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.1); 
   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.1); 
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.1); 
     -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.1); 
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.1); /* easeOutBack */
    }
#{$mainclass} .thumbsClip > *{ display:block; float:left;
}
#{$mainclass}.no-need-for-nav .bulletsCon{ display:none;
}
#{$mainclass}.no-need-for-nav .arrowsCon{ display:none;
}
img.fullwidth{ width:100%; display:block;
    }
#{$mainclass}.dzsportfolio{

    overflow: visible;
    }
#{$mainclass}.dzsportfolio .items{
    display: none;
    }
/* -- estethic styling */
#{$mainclass}{
        font-family:  'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
font-size: 11px;
        }
        
#{$mainclass} .the-thumb-con{
    position: relative;
    }
#{$mainclass} .item .the-thumb{
    width: 100%;
    height: 100%;
    background-size: cover;
}
#{$mainclass} .item p:empty{
  display: none;
}
#{$mainclass} .preloader{ 
    
    width:128px;
    height:40px;
    background: transparent url(img/preloader.gif) center center no-repeat;
    margin-left: -64px; margin-top: -20px;
    position: absolute;
    top:50%; left:50%; 
}
        #{$mainclass}.swipe-enabled{
            cursor: move;
            cursor: -moz-grab;
            cursor: grab;
            cursor: url(img/openhand.cur) 4 4, move;
            }
        #{$mainclass}.swipe-enabled.closedhand {
            cursor: url(img/closedhand.cur) 4 4, move;
            }


#{$mainclass} .thumbsClip > *.currItem{
  z-index: 5;
}

.advancedscroller.mode-onlyoneitem{
  .thumbsCon{
    .thumbsClip{
      > li{
        width: 100%;
      }
    }
  }
}


$transition-property: left;
$transition-duration: 0s;
$transition-timing: linear;
        #{$mainclass}.swipe-enabled.closedhand .thumbsClip{
@include css_animation($transition-property, $transition-duration, $transition-timing);
}
$transition-property: border, padding, opacity, visibility;
$transition-duration: 0.5s;
$transition-timing: ease-out;
$border-visible:1px solid rgba(0,0,0,0.3);
$border-invisible:1px solid rgba(0,0,0,0);
#{$mainclass} .thumbsClip > *{
        padding:0px 10px; border-right:$border-visible; 
@include css_animation($transition-property, $transition-duration, $transition-timing);
        }
#{$mainclass} .thumbsClip > *.last-in-row{
        border-right:$border-invisible; 
        }
#{$mainclass} .thumbsClip > *:last-child{
        border-right:$border-invisible; 
        }
#{$mainclass}.islastpage .thumbsClip > *.last-in-row{
        border-right:$border-visible; 
        }
#{$mainclass}.islastpage .thumbsClip > *:last-child{
        border-right:$border-invisible; 
        }
        
#{$mainclass} .bulletsCon{ height:20px; text-align:center; margin:15px auto;
cursor: pointer;
}
$transition-property: background;
$transition-duration: 0.3s;
$transition-timing: ease-out;
$bulletsize: 10px;
#{$mainclass} .bulletsCon span.bullet{ width:$bulletsize; height:$bulletsize; background-repeat:no-repeat; background-position: 0 0%; background-color:transparent;
background-image: url(img/bullet.png); display:inline-block;
margin-right:3px;
@include css_animation($transition-property, $transition-duration, $transition-timing)
}

#{$mainclass} .bulletsCon span.bullet:hover{
    background-position: 0 100%;
    }
#{$mainclass} .bulletsCon span.bullet.active{
    background-position: 0 100%;
    }
#{$mainclass} .name{
    text-align:center;
    margin-top:10px;
    }
#{$mainclass} .price{
    text-align:center;
    margin-top:5px;
    font-weight:bold;
    }
#{$mainclass} .price > span{
    display:inline-block;
    }
#{$mainclass} .addtocart-con{
    text-align:center;
    margin-top:10px;
    }
#{$mainclass} .addtocart-con > .button-addtocart{
    margin-top:0px;
    }

div.button-addtocart a{
  color: #fff;
}
$transition-property: opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;
    $size_arrow: 30px;
#{$mainclass} .arrowsCon > .arrow-left, #{$mainclass} .arrowsCon > .arrow-right{
    background-position:center center; background-repeat:no-repeat; background-color:transparent;
    background-image: url('img/arrow-left.png');
    width:$size_arrow;
    height: $size_arrow;
    position:absolute;
    left:5px;
    top:45%;
    margin-top:- ($size_arrow/2);
    cursor:pointer;
    opacity:0.69;
    z-index:4;
@include css_animation($transition-property, $transition-duration, $transition-timing)
    }
#{$mainclass} .arrowsCon > .arrow-right{
    background-image: url('img/arrow-right.png');
    left:auto;
    right:5px;
    top:45%;
    }
#{$mainclass} .arrowsCon > .arrow-left:hover, #{$mainclass} .arrowsCon > .arrow-right:hover{
    opacity:1;
    }
    
img.fullwidth{ margin-top:5px;
    }
.button-addtocart{
	font-family:Helvetica, Arial, sans-serif; background:rgba(0,0,0,0.5); padding:8px 15px; font-size:12px; text-align:center; 
	
  cursor: pointer;
  display: inline-block;
  margin: 10px 0;
  padding: 4px 10px;
  text-decoration: none;
  border-radius:3px;
color:#fafafa; 
border:1px solid rgba(0,0,0,0.5);
background: rgb(186,43,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JhMmIwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjFhMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(186,43,0,1) 0%, rgba(255,26,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(186,43,0,1)), color-stop(100%,rgba(255,26,0,1)));
background: -webkit-linear-gradient(top, rgba(186,43,0,1) 0%,rgba(255,26,0,1) 100%);
background: -o-linear-gradient(top, rgba(186,43,0,1) 0%,rgba(255,26,0,1) 100%);
background: -ms-linear-gradient(top, rgba(186,43,0,1) 0%,rgba(255,26,0,1) 100%);
background: linear-gradient(to bottom, rgba(186,43,0,1) 0%,rgba(255,26,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba2b00', endColorstr='#ff1a00',GradientType=0 );
        font-family:  'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
font-size: 9px;
}
.old-price{
    margin-right:5px;
    color:red;
    text-decoration: line-through;
    }






    $mainclass: '.advancedscroller.mode-onlyoneitem';
$transition-property: height;
$transition-duration: 0.3s;
$transition-timing: ease-out;
#{$mainclass} .thumbsClip.center-it{
  position: absolute;
  margin-left: -50%;
}
#{$mainclass} .thumbsClip > *{
        padding:0px;
    }
#{$mainclass} {

  .thumbsClip li > img{
    display: block;
  }
  .thumbsClip li > a > img{
    display: block;
  }
}
    
    $mainclass: '.advancedscroller.skin-white';
        #{$mainclass}{
            margin-top:10px;
            }
    #{$mainclass} a{
        color: inherit;
        text-decoration: none;
        }
    #{$mainclass} a:hover{
        opacity: 0.7;
        }
#{$mainclass} .thumbsClip > *{
        padding:10px;
    border-right: 0;
    }
#{$mainclass} .thumbsClip > *.last-in-row{
        padding:10px;
    border-right: 0;
    }
    
    $size_arrow: 30px;
#{$mainclass} .arrowsCon > .arrow-left, #{$mainclass} .arrowsCon > .arrow-right{
    background-position:center center; background-repeat:no-repeat; background-color:transparent;
    background-image: url('img/arrow-left-white.png');
    width:$size_arrow;
    height: $size_arrow;
    position:absolute;
    left: auto;
    right:65px;
    top:-15px;
    margin-top:- ($size_arrow/2);
    cursor:pointer;
    opacity:0.69;
    z-index:4;
@include css_animation($transition-property, $transition-duration, $transition-timing)
    }
#{$mainclass} .arrowsCon > .arrow-right{
    background-image: url('img/arrow-right-white.png');
    left:auto;
    right:45px;
    top:-15px;
    }
#{$mainclass} .arrowsCon > .arrow-left:hover, #{$mainclass} .arrowsCon > .arrow-right:hover{
    opacity:1;
    }

$mainclass: '.advancedscroller.skin-black';
#{$mainclass}{
  margin-top:10px;
}
#{$mainclass} a{
  color: inherit;
  text-decoration: none;
}
#{$mainclass} a:hover{
  opacity: 0.7;
}
#{$mainclass} .thumbsClip > *{
  padding:10px;
  border-right: 0;
}
#{$mainclass} .thumbsClip > *.first-in-row{
  padding:10px;
  padding-left:0px;
  border-right: 0;
}
#{$mainclass} .thumbsClip > *.last-in-row{
  padding:10px;
  padding-right:0px;
  border-right: 0;
}

$size_arrow: 30px;
#{$mainclass} .arrowsCon > .arrow-left, #{$mainclass} .arrowsCon > .arrow-right{
  background-position:center center; background-repeat:no-repeat; background-color:transparent;
  background-image: url('img/arrow-left-black-small.png');
  width:$size_arrow;
  height: $size_arrow;
  position:absolute;
  left: auto;
  right:20px;
  top:-15px;
  margin-top:- ($size_arrow/2);
  cursor:pointer;
  opacity:0.69;
  z-index:4;
  @include css_animation($transition-property, $transition-duration, $transition-timing)
}
#{$mainclass} .arrowsCon > .arrow-right{
  background-image: url('img/arrow-right-black-small.png');
  left:auto;
  right:0px;
  top:-15px;
}
#{$mainclass} .arrowsCon > .arrow-left:hover, #{$mainclass} .arrowsCon > .arrow-right:hover{
  opacity:1;
}
$mainclass: '.advancedscroller.skin-inset';
#{$mainclass} .thumbsClip > *{
        padding:0px;
    }
    
$size_arrow: 40px;
#{$mainclass} .arrowsCon > .arrow-left, #{$mainclass} .arrowsCon > .arrow-right{
    background-position:center center; background-repeat:no-repeat; background-color:transparent;
    background-image: url('img/arrow-left-black.png');
    width:$size_arrow;
    height: $size_arrow;
    position:absolute;
    left:5px;
    top:45%;
    margin-top:- ($size_arrow/2);
    cursor:pointer;
    opacity:0.69;
    z-index:4;
@include css_animation($transition-property, $transition-duration, $transition-timing)
    }
#{$mainclass} .arrowsCon > .arrow-right{
    background-image: url('img/arrow-right-black.png');
    left:auto;
    right:5px;
    top:45%;
    }
#{$mainclass} .arrowsCon > .arrow-left:hover, #{$mainclass} .arrowsCon > .arrow-right:hover{
    opacity:1;
    }


#{$mainclass}.transition-fade .thumbsClip > *{
  opacity: 0;
  visibility: hidden;
}
#{$mainclass}.transition-fade .thumbsClip > *.currItem{
  opacity: 1;
  visibility: visible;
}


$mainclass: '.advancedscroller.skin-regen';
#{$mainclass} .thumbsClip > *{
        padding:0px;
    }

$size_arrow: 50px;
#{$mainclass} .arrowsCon > .arrow-left, #{$mainclass} .arrowsCon > .arrow-right{
    background-position:center center; background-repeat:no-repeat; background-color:transparent;
    background-image: url('img/arrow-round-left.png');
    width:$size_arrow;
    height: $size_arrow;
    position:absolute;
    left:15px;
    top:50%;
    margin-top:- ($size_arrow/2);
    cursor:pointer;
    opacity:0.69;
  background-size: cover;
    z-index:4;
@include css_animation($transition-property, $transition-duration, $transition-timing)
    }
#{$mainclass} .arrowsCon > .arrow-right{
  background-image: url('img/arrow-round-right.png');
    left:auto;
    right:15px;
  top:50%;
    }
#{$mainclass} .arrowsCon > .arrow-left:hover, #{$mainclass} .arrowsCon > .arrow-right:hover{
    opacity:1;
    }


#{$mainclass}.transition-fade .thumbsClip > *{
  opacity: 0;
  visibility: hidden;
}
#{$mainclass}.transition-fade .thumbsClip > *.currItem{
  opacity: 1;
  visibility: visible;
}


#{$mainclass} .bulletsCon{ display:block; position:absolute; width: 100%;
  top:auto; bottom: 10px;
}


$transition-property: background;
$transition-duration: 0.3s;
$transition-timing: ease-out;
$bulletsize: 10px;
#{$mainclass} .bulletsCon span.bullet{ width:$bulletsize; height:$bulletsize; background-repeat:no-repeat;
  border-radius:50%;
  background-image: none; display:inline-block;
//  float:left;
  margin-right:8px;
  background-color: rgba(0,0,0,0.4);
  @include css_animation($transition-property, $transition-duration, $transition-timing);
}

$bulletsize: 14px;
#{$mainclass} .bulletsCon span.bullet.active{
  background-color: rgba(0,0,0,0.7);
  width:$bulletsize; height:$bulletsize;
  position: relative;
  top:2px;
}

.dzsas-second-con{
  position: relative;
  overflow: hidden;
  $transition-property: left;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .dzsas-second-con--clip{
    position: relative;
    @include css_animation($transition-property, $transition-duration, $transition-timing);
    $transition-property: opacity,visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    > *{
      position: absolute;
      top:0;left:0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      @include css_animation($transition-property, $transition-duration, $transition-timing);
    }
    > *.active{
      opacity: 1;
      visibility: visible;
    }
  }
}



/* ====== caption styling mami

*/

$mainclass: '.caption';
#{$mainclass}{
  position: absolute;
}

$transition-property: bottom;
$transition-duration: 1.2s;
$transition-timing: ease-out;

$mainclass: '.caption.skin-underlay';
$c_bg: rgba(230,230,230,0.9);
#{$mainclass}{

  bottom:-70%;
  left:0;
  width: 100%;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:12px;
  font-weight: 300;
  padding: 10px 10px;
  background: $c_bg;
  color: #111;
  @include css_animation($transition-property, $transition-duration, $transition-timing)
}
.item.currItem #{$mainclass}{
  bottom: 0;
}


.imagediv{
  display: block;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}



/* ====== misc

*/

#parallax {position:absolute; top:0; left:0; width:100%; height:850px; overflow:hidden;z-index: 2; margin:0;
}
#parallax li {position:absolute; top:0; left:0;}
#parallax li.prl1 {background:url(bokeh/b1.png); width:2200px; height:800px;}
#parallax li.prl2 {background:url(bokeh/b2.png); width:2050px; height:600px;}
#parallax li.prl3 {background:url(bokeh/b3.png); width:2500px; height:700px;}
#parallax li.prl4 {background:url(bokeh/b4.png); width:1900px; height:700px;}