.wrapper{
  width:100%;
  position:relative;
  margin-top:20px;
}
.carousel{
	width: 100%;
	position: absolute;
	padding-top: 35%;
	overflow: hidden;
}

.inner{
	width: 100%;
	height: auto;
	position: absolute;
	top:0;
	left: 0;
}

.slide{
	width: 100%;
	height: auto;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

.js-reset-left{left:auto}

.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}
/* ---- */

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}


.transition .slide{
	transition-property: right, left, margin;
}

.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

/**
 * ==========================
 * Arrows
 *
 */
 .carousel .arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow-left{
  left:20px;
  transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  transform:rotate(45deg);
}

.slide{
	text-align:center;
  	/* padding-top:25%; */
  	background-size:cover;
}