* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

#slide{
  position:relative;
  margin:20px auto;
  width: 100%;
  overflow:hidden;
}

#slide ul{
  position:relative;
  margin:auto;
  height: auto;
  width:500%;
}

#slide ul li{
  float:left;
  width:20%;
}

#slide ul li img{
  width:100%;
}

#slide ul li .caption{
  display:none;
}

#indicator{
  display:none;
}

#indicator li{
  display:inline-block;
  margin:0 5px;
  cursor:pointer;
  opacity:.5;
  color:black;
  text-shadow:0px 0px 5px #333;
}

#indicator li:first-child{
  opacity:1;
}

#left{
  position:absolute;
  top:40%;
  left:2%;
  font-size:2em;
  color:white;
  cursor:pointer;
}

#right{
  position:absolute;
  top:40%;
  right:2%;
  font-size:2em;
  color:white;
  cursor:pointer;
}

@media (min-width:768px){
  #slide{
    position:relative;
    margin:20px auto;
    width: 50%;
    overflow:hidden;
  }

  #slide ul{
    position:relative;
    margin:auto;
    height: auto;
    width:500%;
  }

  #slide ul li{
    float:left;
    width:20%;
  }

  #slide ul li img{
    width:100%;
  }

  #slide ul li .caption{
    display:block;
    position:relative;
    width:100%;
    top:-70px;
    text-align: center;
    z-index:1;
    color:white;
  }

  #slide ul li .caption h2{
    background-color: rgba(0,0,0,.5);
    padding: 5px 0;
  }

  #slide ul li .caption h4{
    background-color: rgba(0,0,0,.5);
    padding-bottom: 10px;
  }

  #indicator{
    display:block;
    position:relative;
    width:100%;
    margin:auto;
    height: 10px;
    text-align: center;
    top:-62px;
  }

  #indicator li{
    display:inline-block;
    margin:0 5px;
    cursor:pointer;
    opacity:.5;
    color:black;
    text-shadow:0px 0px 5px #333;
  }

  #indicator li:first-child{
    opacity:1;
  }
}