#slider-box {

    animation: autoSlider 8s infinite linear;

    height: 100%;
    width: 200%;
}

#slider-container {
    height:800px;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.element-blue,
.element-green,{
    width: 100%;
    height:800px;
}

.element-blue {
  width: 100%;
  height: 800px;
  background-color: transparent;
  background:url("../image/slider/03.png") center no-repeat;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.element-green {
  width: 100%;
  height: 800px;
  background-color: transparent;
  background:url("../image/slider/02.png") center no-repeat;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*.element-red {
  width: 100%;
  height: 800px;
  background-color: transparent;
  background:url("../image/slider/01.png") center no-repeat;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}*/

.slider-element {
    float: left;
    width: 50%;
}

@keyframes autoSlider {
  0% {
      margin-left: 0;
  }

  30% {
      margin-left: 0;
  }

  35% {
      margin-left: 0%;
  }

  65% {
      margin-left: -100%;
  }

  70% {
      margin-left: -100%;
  }

  95% {
      margin-left: -100%;
  }

  100% {
      margin-left: 0;
  }
}
@media (min-width: 320px)and (max-width :767px ){
  #slider-container {
      height:300px;
      margin: 0 auto;
      overflow: hidden;
      text-align: left;
      width: 100%;
  }
  .element-blue {
    width: 100%;
    height: 300px;
  }
  .element-green {
    width: 100%;
    height: 300px;
  }

  /*.element-red {
    width: 100%;
    height: 400px;
  }*/
}