ul.topnav{
  list-style-type:none;
  margin:0;
  padding:0;
  text-align:top;
  font-family:Lato;
  overflow:hidden;
  background-color:#333;
}

li.navitem {
  display:inline;
  float: left;
}

li.navitem > a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.navitem > a:hover {
  background-color: #111;
}

.active {
  background-color:#a9a9a9;
  float:right;
}

li.active > a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.slide-container {
  width: 600;
  height: 400;
  margin-left: auto;
  margin-right:auto;
  overflow:hidden;
  text-align: center;
}

.image-container {
  width: 1800px;
  height: 400px;
  position: relative;
  transition: left 2s;
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  -o-transition: left 2s;
}

.slider-image {
  float:left;
  margin:0px;
  padding:0px;
}

.button-container {
  top: -20px;
  position:relative;
}
.slider-button {
  display: inline-block;
  height: 10px;
  width:10px;
  border-radius:5px;
  background-color:white;
}
#slider-image-1:target ~ .image-container{
  left:0px;
}

#slider-image-2:target ~ .image-container {
  left: -600px
}

#slider-image-3:target ~ .image-container {
  left: -1200px;
}