.sl-slider-wrapper {
  width: 100%;
  height: 520px;
  position: relative;
  overflow: hidden;
}
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.sl-slide {
  z-index: 1;
}
.sl-content-slice {
  overflow: hidden;
  position: absolute;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
  width: 100%;
  height: 50%;
  left: -200px;
  -webkit-transform: translateY(0%) scale(1);
  -moz-transform: translateY(0%) scale(1);
  -o-transform: translateY(0%) scale(1);
  -ms-transform: translateY(0%) scale(1);
  transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
  top: -200px;
  padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-child(2) {
  top: 50%;
  padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
  width: 50%;
  height: 100%;
  top: -200px;
  -webkit-transform: translateX(0%) scale(1);
  -moz-transform: translateX(0%) scale(1);
  -o-transform: translateX(0%) scale(1);
  -ms-transform: translateX(0%) scale(1);
  transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
  left: -200px;
  padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
  left: 50%;
  padding: 200px 200px 200px 0px;
}
/* Content wrapper */
.sl-content-wrapper {
  position: absolute;
}
.sl-content {
  width: 100%;
  height: 100%;
  background: #fff;
}
/* Background colors */
.sl-slide {
  display: none;
}
.item1 .sl-slide-inner {
  background: #0d720d;
  /* background: #008c00; */
}
.item2 .sl-slide-inner {
  background: #00cec8;
}
.item3 .sl-slide-inner {
  background: #098fe9;
}
.sl-slider h2 {
  padding: 170px 0 0;
  margin: 0;
  position: relative;
  font-size: 60px;
  line-height: normal;
  z-index: 100;
}
.sl-slider h2,
.sl-slider h3 {
  color: #fff;
}
.sl-slider h3 {
  margin-top: 0;
  position: relative;
  line-height: normal;
  z-index: 100;
}
/* Navigation arrows */
.nav-arrows {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -40px;
  height: 80px;
  display: block;
  z-index: 2000;
}
.nav-arrows span {
  position: absolute;
  cursor: pointer;
  width: 50px;
  height: 80px;
  display: block;
  line-height: 80px;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  cursor: pointer;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -ms-transition: 300ms;
  transition: 300ms;
}
.nav-arrows span:hover {
  color: #fff;
}
.nav-arrows span.nav-arrow-prev {
  left: 0;
}

.nav-arrows span.nav-arrow-next {
  right: 0;
}
/* Animations */
@-webkit-keyframes roll {
  0% {
    -webkit-transform: translateX(500px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@-moz-keyframes roll {
  0% {
    -moz-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}
@-o-keyframes roll {
  0% {
    -o-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -o-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}
@-ms-keyframes roll {
  0% {
    -ms-transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    -ms-transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll {
  0% {
    transform: translateX(500px) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(40px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}
@-moz-keyframes moveUp {
  0% {
    -moz-transform: translateY(40px);
  }
  100% {
    -moz-transform: translateY(0px);
  }
}
@-o-keyframes moveUp {
  0% {
    -o-transform: translateY(40px);
  }
  100% {
    -o-transform: translateY(0px);
  }
}
@-ms-keyframes moveUp {
  0% {
    -ms-transform: translateY(40px);
  }
  100% {
    -ms-transform: translateY(0px);
  }
}
@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scaleDown {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
  }
}
@-moz-keyframes scaleDown {
  0% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(0.5);
  }
}
@-o-keyframes scaleDown {
  0% {
    -o-transform: scale(1);
  }
  100% {
    -o-transform: scale(0.5);
  }
}
@-ms-keyframes scaleDown {
  0% {
    -ms-transform: scale(1);
  }
  100% {
    -ms-transform: scale(0.5);
  }
}
@keyframes scaleDown {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Media Queries */
@media screen and (max-width: 660px) {
  .demo-1 .deco {
    width: 130px;
    height: 130px;
    margin-left: -65px;
    margin-bottom: 50px;
  }
  .demo-1 [data-icon]:after {
    width: 110px;
    height: 110px;
    line-height: 110px;
    font-size: 40px;
    margin: -55px 0 0 -55px;
  }
  .demo-1 .sl-slide blockquote {
    margin-bottom: -120px;
  }
  .demo-1 .sl-slide h2 {
    line-height: 22px;
    font-size: 18px;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  .demo-1 .sl-slide blockquote p:before {
    line-height: 10px;
    width: 40px;
    height: 40px;
    font-size: 120px;
    left: -45px;
  }
  .demo-2 .sl-slider-wrapper {
    height: 500px;
  }

  .demo-2 .sl-slider h2 {
    font-size: 36px;
  }
  .demo-2 .sl-slider blockquote {
    font-size: 16px;
  }
}