.switchcluster input
{
  display: none;
}

.switchcluster 
{
  display: inline-block;
  width: 30px; /*=w*/
  height: 15px; /*=h*/
  margin: 2px;
  /*transform: translateY(50%);*/
  position: relative;
}

.slidercluster
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 15px;
  box-shadow: 0 0 0 1px #777, 0 0 2px #777;
  cursor: pointer;
  border: 5px solid transparent;
  overflow: hidden;
  transition: 0.2s;
  scale:0.8;
  background-color: #FAFAD2;

}

.slidercluster:before
{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 15px;
  transform: translateX(-15px); /*translateX(-(w-h))*/
  transition: 0.2s;
}

input:checked + .slidercluster:before
{
  transform: translateX(15px); /*translateX(w-h)*/
  background-color: "#336699";


}

input:checked + .slidercluster
{
  box-shadow: 0 0 0 1px #00000080, 0 0 4px #00000080;
  background-color: #FAFAD2;

}