/*   Huddersfield.guide pictures.css   v28.025  ©2025  */

/* styles+buttonpics+pictures>wide>small>smallwide>tablet */

/* slides */

div#text {overflow: hidden;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: top;
  background: transparent;
}

.slider{
  width: 1300px;
  height: 650px;
  border-top: solid 6px white;
  border-bottom: solid 6px white;
  overflow: visible;
}

.slides{
  width: 500%;
  height: 650px;
  display: flex;
}

.slides input{
  display: none;
}

.slide{
  width: 20%;
  transition: 1.5s;
}

.slide img{
  width: 1300px;
  height: 650px;
}

/* manual move */

.move-manual{
  position: absolute;
  width: 1300px;
  margin-top: -100px;
  display: flex;
  justify-content: center;
}

.blob{
  border: 2px solid white;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: 1s;
}

.blob:not(:last-child){
  margin-right: 40px;
}

.blob:hover{
  background: chartreuse;
}

#blob1:checked ~ .first{
  margin-left: 0;
}

#blob2:checked ~ .first{
  margin-left: -20%;
}

#blob3:checked ~ .first{
  margin-left: -40%;
}

#blob4:checked ~ .first{
  margin-left: -60%;
}

#blob5:checked ~ .first{
  margin-left: -80%;
}

#blob6:checked ~ .first{
  margin-left: -100%;
}

#blob7:checked ~ .first{
  margin-left: -120%;
}

#blob8:checked ~ .first{
  margin-left: -140%;
}

#blob9:checked ~ .first{
  margin-left: -160%;
}

#blob10:checked ~ .first{
  margin-left: -180%;
}

#blob11:checked ~ .first{
  margin-left: -200%;
}

#blob12:checked ~ .first{
  margin-left: -220%;
}

/* auto move */

.move-auto{
  position: absolute;
  display: flex;
  width: 1300px;
  justify-content: center;
  margin-top: 550px;
}

.move-auto div{
  border: 2px solid white;
  padding: 10px;
  border-radius: 5px;
  transition: 1s;
}

.move-auto div:not(:last-child){
  margin-right: 40px;
}

#blob1:checked ~ .move-auto .auto-blob1{
  background: white;
}

#blob2:checked ~ .move-auto .auto-blob2{
  background: white;
}

#blob3:checked ~ .move-auto .auto-blob3{
  background: white;
}

#blob4:checked ~ .move-auto .auto-blob4{
  background: white;
}

#blob5:checked ~ .move-auto .auto-blob5{
  background: white;
}

#blob6:checked ~ .move-auto .auto-blob6{
  background: white;
}

#blob7:checked ~ .move-auto .auto-blob7{
  background: white;
}

#blob8:checked ~ .move-auto .auto-blob8{
  background: white;
}

#blob9:checked ~ .move-auto .auto-blob9{
  background: white;
}

#blob10:checked ~ .move-auto .auto-blob10{
  background: white;
}

#blob11:checked ~ .move-auto .auto-blob11{
  background: white;
}

#blob12:checked ~ .move-auto .auto-blob12{
  background: white;
}