.image{
  /* width: 450px; */
  /* height: 400px; */
  overflow: hidden;
}

.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

#selector{
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 30px;
  margin: 8px;
  cursor: pointer;
  transition: 0.4s;
  flex-flow: row;
  z-index: 1;
}
#selector:hover{
  background: rgba(255, 255, 255, .85);
}

input[type="radio"]:checked + label{
  background: rgba(255, 255, 255, .85);
}
input{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 1000%;
  height: 100%;
  display: flex;
}
.slide{
  width: 10%;
  transition: 0.6s;
}
.slide img{
  /* width: 100%;
  height: 100%; */
}

@media screen and (max-width: 736px) {

  #selector{
    width: 10px;
    height: 10px;
  }
}

@media screen and (max-width: 980px) {

  #selector{
    width: 15px;
    height: 15px;
  }
}