.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: -20px; 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: -20px; }
.looper-control:hover { color: #ffffff; text-decoration: none; text-shadow: none; opacity: 0.9; filter: alpha(opacity=90); }