/* --- SLIDER --- */

.zb-slider {
	position: relative;
	padding: 0 !important;
    white-space: nowrap;
	margin: auto;
	overflow: hidden;
    transition: height 0.6s;
    width: 100%;
    display: flex;
    align-items: flex-start;
}
.zb-slider > * {
    width: 100%;
    /*display: inline-block !important;*/
    opacity: 0;
    white-space: normal;
    margin: auto;
}

html .zb-slider > :first-child{
    position: absolute;
    left: 0;
    opacity : 1;
    text-align: center;
    z-index: 2;
}

/* Action */

.zb-slider .current, .zb-slider .next, .zb-slider .prev{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.zb-slider .prev, .zb-slider.forward .current{
    left: -100%;
}
.zb-slider .next, .zb-slider.backward .current{
    left: 100%;
}
.zb-slider .current, .zb-slider.forward .next, .zb-slider.backward .prev  {
    opacity: 1;
    left: 0;
}
.zb-slider.forward > *, .zb-slider.backward > * {
    transition: left 0.6s, top 0.6s, height 0.6s
}

/* --- FORWARD / BACKWARD BUTTON --- */

.zb-slider .bwd, .zb-slider .fwd{
    position: absolute;
    top: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
    z-index: 2;
}
.zb-slider .bwd:before, .zb-slider .fwd:before, .zb-slider > :first-child:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.zb-slider > :first-child.default .bwd:after, .zb-slider > :first-child.default .fwd:after, .zb-slider .bwd > *, .zb-slider .fwd > * {
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
}
.zb-slider > :first-child.default .bwd:after, .zb-slider > :first-child.default .fwd:after{
    content: "";
    display: inline-block;
    border-right: 4px solid #262626;
    border-bottom: 4px solid #262626;
    padding: 8px; 
    margin: 15px;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    transition: padding 0.2s;
}
.zb-slider > :first-child.default .bwd:after{
  transform: rotate(-225deg);
  left: 3px;
}
.zb-slider > :first-child.default .fwd:after{
  transform: rotate(-45deg);
  right: 3px;
}
.zb-slider .bwd{
	left: 0px;
}
.zb-slider .fwd {
    right: 0px;
}
.zb-slider:hover .bwd, .zb-slider:hover .fwd, .zb-slider:hover .bullets{
	opacity: 1;
}

/* --- BULLETS --- */

.bullets{
    position: absolute;
    opacity: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    transition: opacity 0.5s;
}
.bullets > * {
    display: inline-block;
    cursor: pointer;
    padding: 4px 15px;
    border-radius: 1px;
    margin: 15px 5px;
    background: #C8C8C8;
    vertical-align: middle;
}
.bullets > .active{
    background: #fff;;
    border: solid 1px #BABABA;
    height: 10px;
}

/* --- PLAY / PAUSE BUTTON --- */

.zb-slider .play, .zb-slider .pause{
    background: rgba(0,0,0,0.45);
    position: relative;
    vertical-align: middle;
    opacity: 0;
    display: inline-block;
    border-radius: 50%;
    z-index: 2;
    padding: 20px;
    transition: opacity 0.5s ease 0s;
    line-height: 0;
}
.zb-slider .pause:after, .zb-slider .play:after{
    content: '';
    display: inline-block;
    height: 24px;
}
.zb-slider .pause:after{
    width: 10px;
    background: transparent;
    border-right: solid #fff 6px;
    border-left: solid #fff 6px;
    border-radius: 1px;
    box-sizing: content-box;
}
.zb-slider .play:after{
    height: 1px;
    border-style: solid;
    border-width: 12px 0px 12px 22px;
    border-color: transparent transparent transparent #fff;
    border-radius: 2px;
    position: relative;
    left: 2px;
}

/* --- SLIDER CUSTOM --- */

/* Up and down */
.zb-slider.up-n-down.forward .current:nth-child(2n){
    left: 0%;
    top: -100%;
}
.zb-slider.up-n-down.backward .current:nth-child(2n){
    left: 0%;
    top: -100%;
}
.zb-slider.up-n-down.forward .current{
    left: 0%;
    top: 100%;
}
.zb-slider.up-n-down.backward .current{
    left: 0%;
    top: 100%;
}
.zb-slider.up-n-down .current, {
    z-index: 0;
}
.zb-slider.up-n-down > :first-child{
    z-index: 2;
}
.zb-slider.up-n-down .prev, .zb-slider.up-n-down .next{
    z-index: 1;
}

/* Fade */
.zb-slider.fade .prev, .zb-slider.fade .next, .zb-slider.fade .current{
    left: 0%;
    opacity: 0;
    transition: opacity 1s;
}
.zb-slider.fade .current{
    opacity: 1
}
.zb-slider.fade.forward .current, .zb-slider.fade.backward .current {
    opacity: 0;
}
.zb-slider.fade.forward .next, .zb-slider.fade.backward .prev {
    opacity: 1;
}