body {
  margin: 0;
  padding: 0;
  font-family: arial, sans-serif, monospace, helvetica;
}

#slider {
  width: 660px;
  height: 480px;
  overflow: hidden;
  position: relative;
  margin:30px auto;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 400px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 660px;
  height: 480px;
  background-position: 50% 50%;
  background-size: cover;
}

/* helper css, since we don't have images */

.slide1 {
  background: red;
  background-image: url(https://unsplash.it/1200/800/?random);
}

.slide2 {
  background: blue;
  background-image: url(https://unsplash.it/1200/700/?random)
}

.slide3 {
  background: green;
  background-image: url(https://unsplash.it/800/600/?random)
}

.slide4 {
  background: purple;
  background-image: url(https://unsplash.it/800/700/?random)
}

.slide5 {
  background: pink;
  background-image: url(https://unsplash.it/1000/600/?random)
}

.slide6 {
  background: orange;
  background-image: url(https://unsplash.it/1000/750/?random)
}

.slide div {
  margin: 15% auto;
  padding: .5em 3em .5em 1em;
  left: 25%;
  background-color: rgba(50,50,50,0.4);
  width: 50%;
}

.slide div h2, .slide div h3, .slide div h4 {
  color: orange;
  font-size: 200%;
}

.slide div span {
  color: #fff;
  font-size: 130%;
}

.arrow {
  height: 480px;
  width: 50px;
  background: rgba(0,0,0,0.0);
  z-index: 99;
  line-height:480px;
  text-align:center;
  color:#fff;
}

.arrow:hover { background: rgba(0,0,0,0.3); }

.arrow-left {
  top: 0;
  left: 0;
  position: absolute;
}

.arrow-right {
  top: 0;
  right: 0;
  position: absolute;
}

.loading {
  position: absolute;
  width: 0px;
  background-color: rgba(200,200,200,0.5);
  top: 465px;
  height: 15px;
  left: 0;
  z-index: 999;
}