/* Follow me for more pens like this! */

.iconoamenidad {
  position: absolute;
  width: 60px;
  z-index: 100;
  cursor: pointer;
}
.pluma {
  left: 11%;
  top: 38%;
}
.pluma2 {
  left: 11%;
  top: 64%;
}
.luces {
  left: 33%;
  top: 66%;
}
.jardin {
  left: 93%;
  top: 69%;
}
.alberca {
  left: calc(55% + 5px);
  top: 57%;
}
.imagenamenidad {
  width: 275px;
  height: 290px;
  position: absolute;
  z-index: 99;
  background-size: contain;
  background-repeat: no-repeat;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
.toggle-control {
  position: relative;
  padding-left: 100px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}
.toggle-control input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-control input:checked ~ .control::after {
  background: #c1ac9f;
  left: 62px;
}
.toggle-control .control {
  position: absolute;
    border: 1px solid #bc734a;
    top: 0;
    left: 0;
    height: 75px;
    width: 150px;
    border-radius: 80px;
    background-color: #ebebeb;
    transition: background-color 0.125s ease-in;
    background-image: url(../img/luna.svg), url(../img/Sol.svg);
    background-position: 90px center, 6px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 45px, 60px;

}
.toggle-control .control {
  position: absolute;
  border: 1px solid #bc734a;
  top: 0;
  left: 0;
  height: 60px;
  width: 120px;
  border-radius: 80px;
  background-position: 70px center, 6px center;
  background-repeat: no-repeat, no-repeat;
  background-size: 39px, 48px;
}
.toggle-control .control::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 50px;
  height: 50px;
  border-radius: 35px;
  background: #c1ac9f;
  transition: all 0.125s ease-in;
}
/* Center the control */