.looper {
  position: relative;
  z-index: 1;
  line-height: 1;
  width: auto;
  height: auto;
}
.looper:focus {
  outline: 0;
}
.looper .looper-inner {
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}
.looper .item {
  display: none;
  position: relative;
  z-index: 3;
}
.looper .item.active,
.looper .item.next,
.looper .item.prev {
  display: block;
}
.looper .item.active {
  top: 0;
  left: 0;
  z-index: 4;
}
.looper .item > img {
  display: block;
  line-height: 1;
}
.looper.xfade .looper-inner {
  height: 100%;
}
.looper.xfade .item {
  -webkit-transition: 0.5s ease-in opacity;
  -moz-transition: 0.5s ease-in opacity;
  -o-transition: 0.5s ease-in opacity;
  transition: 0.5s ease-in opacity;
  position: absolute;
  width: 100%;
  opacity: 0;
}
.looper.xfade .item.go {
  opacity: 1;
}
.looper.xfade .item.active {
  opacity: 1;
}
.looper.xfade .item.active.go {
  opacity: 0;
}
.looper.slide.xfade .item {
  -webkit-transition: 0.5s ease-in-out left, 0.5s ease-in opacity;
  -moz-transition: 0.5s ease-in-out left, 0.5s ease-in opacity;
  -o-transition: 0.5s ease-in-out left, 0.5s ease-in opacity;
  transition: 0.5s ease-in-out left, 0.5s ease-in opacity;
}
.looper.slide .item {
  -webkit-transition: 0.5s ease-in-out left;
  -moz-transition: 0.5s ease-in-out left;
  -o-transition: 0.5s ease-in-out left;
  transition: 0.5s ease-in-out left;
}
.looper.slide .item.next,
.looper.slide .item.prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.looper.slide .item.next {
  left: 100%;
}
.looper.slide .item.prev {
  left: -100%;
}
.looper.slide .item.active.prev,
.looper.slide .item.active.next {
  position: relative;
  left: 0;
}
.looper.slide .item.go {
  left: 0;
}
.looper.slide .item.go.active {
  left: -100%;
}
.looper.slide .item.go.active.prev {
  left: 100%;
}
.looper.slide.right .item.next {
  left: -100%;
}
.looper.slide.right .item.prev {
  left: 100%;
}
.looper.slide.right .item.go {
  left: 0;
}
.looper.slide.right .item.go.active {
  left: 100%;
}
.looper.slide.right .item.go.active.prev {
  left: -100%;
}
.looper.slide.down .looper-inner {
  height: 100%;
}
.looper.slide.down .item {
  -webkit-transition: 0.5s ease-in-out top;
  -moz-transition: 0.5s ease-in-out top;
  -o-transition: 0.5s ease-in-out top;
  transition: 0.5s ease-in-out top;
}
.looper.slide.down .item.next,
.looper.slide.down .item.prev {
  left: 0;
}
.looper.slide.down .item.next {
  top: -100%;
}
.looper.slide.down .item.prev {
  top: 100%;
}
.looper.slide.down .item.go {
  top: 0;
}
.looper.slide.down .item.go.active {
  top: 100%;
  left: 0;
}
.looper.slide.down .item.go.active.prev {
  top: -100%;
}
.looper.slide.down.xfade .item {
  -webkit-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  -moz-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  -o-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
}
.looper.slide.up .looper-inner {
  height: 100%;
}
.looper.slide.up .item {
  -webkit-transition: 0.5s ease-in-out top;
  -moz-transition: 0.5s ease-in-out top;
  -o-transition: 0.5s ease-in-out top;
  transition: 0.5s ease-in-out top;
}
.looper.slide.up .item.next,
.looper.slide.up .item.prev {
  left: 0;
}
.looper.slide.up .item.next {
  top: 100%;
}
.looper.slide.up .item.prev {
  top: -100%;
}
.looper.slide.up .item.go {
  top: 0;
}
.looper.slide.up .item.go.active {
  top: -100%;
  left: 0;
}
.looper.slide.up .item.go.active.prev {
  top: 100%;
}
.looper.slide.up.xfade .item {
  -webkit-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  -moz-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  -o-transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
  transition: 0.5s ease-in-out top, 0.5s ease-in opacity;
}
.looper-control {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 10px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 30px;
  line-height: 40px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  background: #333333;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.looper-control.right {
  left: auto;
  right: 10px;
}
.looper-control:hover {
  color: #ffffff;
  text-decoration: none;
  text-shadow: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.looper-nav {
  background: transparent;
  text-align: center;
  list-style-type: none;
  margin: 0;
	position:absolute;
	z-index:3;
	left:0px;
	right:0px;
	bottom:0px;
}
.looper-nav > li {
  display: inline-block;
  font-size: 36px;
}
.looper-nav > li a {
  color: #FFF;
text-decoration:none;
}
.looper-nav > li a:hover {
  color: #cdcdcd;
}
.looper-nav > li.active a,
.looper-nav > li.active a:hover {
  color: #cdcdcd;
}
.looper-control .material-icons {
font-size:30px;
line-height:40px;
}

/** overlays **/
.looper,
.looper .item,
.looper .itemimage,
.looper .layout-wrapper {
	height: 500px;
}

.looper .layout-wrapper {
	display: flex;
	align-items:center;
	padding-left:60px;
	padding-right:60px;
	box-sizing:border-box;
	}

	.looper .itemimage {
		background-size: cover;
		background-position: center center;
	}
.overlay,
.overlay h1 {
color:#FFF;
}
.item .overlay-container {
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
.item .overlay {
background:rgba(0,0,0,.65);
padding:20px;
}
.overlay-center .layout-wrapper {
justify-content:center;
}
.overlay-right .layout-wrapper {
justify-content:right;
}
.looper nav {
	position:static;
}
.looper ul li a {
	font-size:40px;
	font-family:Arial,sans-serif;
}

@media (min-width : 1824px) {
	.looper,
	.looper .item,
	.looper .itemimage,
	.looper .layout-wrapper {
		height: 650px;
	}
}
@media (max-width :767px) {
	/* Styles */
.looper nav {
display:none;
}
.looper,
.looper .looper-inner {
height:auto;
}
.looper .itemimage {
	height: 250px;
}
.looper .item {
	height: 250px;
}
.looper .layout-wrapper {
height:initial;
}
.looper .layout-wrapper {
display:block;
align-items:center;
padding-left:0px;
padding-right:0px;
}
.looper .overlay-container {
padding-top:250px;
position:relative;
top:initial;
left:initial;
right:initial;
bottom:initial;
float:left;
width:100%;
}
.item .overlay {
background:rgba(0,0,0,1);
}
}