<div class="device"> <!--all window-->
    <div class="owl-carousel" id="owl-demo">

      <div class="item">
      <div class="planet">
        <img class="main_pictures" src="https://res.cloudinary.com/lenadi07/image/upload/v1468859826/forCodePen/mobileSlider/firstSlider/main.png" alt="" />
      </div>
      <div class="orbit_1 animation">
        <img class="pictures" src="https://res.cloudinary.com/lenadi07/image/upload/v1468859826/forCodePen/mobileSlider/firstSlider/orbit_1.png" alt="" />
      </div>
      <div class="orbit_2">
        <img class="pictures animation_2" src="https://res.cloudinary.com/lenadi07/image/upload/v1468859826/forCodePen/mobileSlider/firstSlider/orbit_2.png" alt="" />
      </div>
      <div class="mid">
         <h1>Welkome to the Webmodeler</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
   </div>

      <div class="item">
        <div class="mountains">
          <img class="mountains_img" src="https://res.cloudinary.com/lenadi07/image/upload/v1468860109/forCodePen/mobileSlider/secondSlider/main.png" alt="" />
        </div>
        <div class="orbit_2">
          <img class="pictures animation_3" src="https://res.cloudinary.com/lenadi07/image/upload/v1468860109/forCodePen/mobileSlider/secondSlider/orbit_1.png" alt="" />
        </div>
        <div class="mid">
            <h1>Welkome to the Webmodeler</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
       </div>

    <div class="item">
    <div class="paper">
      <img class="paper_img" src="https://res.cloudinary.com/lenadi07/image/upload/v1468860233/forCodePen/mobileSlider/thirdSlider/main_3.png" alt="" />
      <img class="lines" src="https://res.cloudinary.com/lenadi07/image/upload/v1468860233/forCodePen/mobileSlider/thirdSlider/lines.png" alt="" />
    </div>
    <div class="border">
      <img class="pictures" src="https://res.cloudinary.com/lenadi07/image/upload/v1468860232/forCodePen/mobileSlider/thirdSlider/border.png" alt="" />
    </div>
    <div class="mid">
       <h1>Welkome to the Webmodeler</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
 </div>

</div>

<div class="btm customNavigation">
  <button type="button" name="button"><a class="btn next">Next</a></button>
</div>
  </div>

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 62%;
}
body {
  background: #bde2f6;
}
.device {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15.5rem;
  margin-top: -20rem;
  width: 31rem;
  background: #ffffff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  -webkit-box-shadow: -1px 24px 41px -6px rgba(0,0,0,0.27);
  -moz-box-shadow: -1px 24px 41px -6px rgba(0,0,0,0.27);
  box-shadow: -1px 24px 41px -6px rgba(0,0,0,0.27);
}

/* start section css */

 /* first div */
.planet {
  margin: 40px;
  position: relative;
  width: 400px;
  height: 200px;
  background-image: url("https://res.cloudinary.com/lenadi07/image/upload/v1468859826/forCodePen/mobileSlider/firstSlider/background.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
}
img.main_pictures {
  width: 40%;
  margin-left: 30px;
}

/* second div */
.mountains{
  margin: 40px;
  position: relative;
  width: 400px;
  height: 200px;
  right: 20px;
}
.mountains_img {
 width: 67%;
}

/* third div */
.paper{
  margin: 30px;
  position: relative;
  width: 400px;
  height: 220px;
}
.paper_img {
 width: 60%;
}
.border {
  position: absolute;
  top: 30px;
  left: 3px;
  width: 320px;
}
.lines {
  position: absolute;
  top: 88px;
  width: 33%;
  left: 64px;
}


/* END MAIN IMAGES */

.orbit_1 {
  position: absolute;
  top: 26px;
  left: 33px;
  width: 230px;
  height: auto;
  z-index: 2;
}
.orbit_2 {
  position: absolute;
  top: 23px;
  right: 14px;
  width: 240px;
  height: 200px;
  z-index: 1;
}
img.pictures {
  width: 90%;
}
.animation {
  animation: orbit 10s ease-in infinite;

}                                               /* animation orbit 1 */
@-webkit-keyframes orbit {
  0% { -webkit-transform: rotate(0deg); }
  40% {-webkit-transform: rotate(180deg); }
  50% {-webkit-transform: rotate(80deg); }
  70% {-webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes orbit {
  0% { transform: rotate(0deg); }
  40% {transform: rotate(180deg); }
  50% {transform: rotate(80deg); }
  70% {transform: rotate(180deg); }
  100% { transform: rotate(0deg); }
}

.animation_2 {
  animation: orbit_2 3s ease-in-out infinite;
}
                                                /*animation orbit 2 */
@keyframes orbit_2 {
  0% { transform: rotate(0deg); }
  50% {transform: rotate(-20deg); }
  100% {transform: rotate(0deg); }
}

@-webkit-keyframes orbit_2 {
  0% {-webkit-transform: rotate(0deg); }
  50% {-webkit-transform: rotate(-20deg); }
  100% {-webkit-transform: rotate(0deg); }
}

.animation_3 {
  animation: orbit_3 3s ease-out infinite;
}
                                                /*animation orbit slide 2 */
@keyframes orbit_3 {
  0% { transform: rotate(0deg); }
  50% {transform: rotate(-20deg); }
  100% {transform: rotate(0deg); }
}

@-webkit-keyframes orbit_3 {
  0% {-webkit-transform: rotate(0deg); }
  50% {-webkit-transform: rotate(-20deg); }
  100% {-webkit-transform: rotate(0deg); }
}
/* MID */
.mid {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 9rem;
  display: inline-block;
}
.mid h1 {
  text-align: center;
  color: #10638e;
  font-size: 18px;
  text-align: center;
}
.mid p {
  padding: 30px;
  text-align: center;
  font-size: 14px;
  color: #c9c9c9;
}
.paper_img {
  z-index: 1;
}
.lines {
  animation: lines_moves 1.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes lines_moves {
  0% {left: 64px; right: 0; }
  50% { left: 69px; right: 25px; }
  100% { left: 64px; right: 0; }
}

/* BTM */
.btm {
 position: relative;
 height: 10rem;
}
button {
  margin-top: 44px;
  background-color: #2196d4;
  color: #ffffff;
  text-align: center;
  width: 100%;
  border: none;
  height: auto;
  box-sizing: border-box;
  padding-top: 17px;
  padding-bottom: 17px;
  font-size: 18px;
}

$(document).ready(function() {

  var owl = $("owl-demo");

  $("#owl-demo").owlCarousel({

      navigation : false, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true

  });
  $(".next").click(function(){
    $("#owl-demo").trigger("owl.next");
  })
});