body {
  background-color: #777;
  color: #fff;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}

#wrapper {
  width: 270px;
  margin: 5em auto 0 auto;
}

#s1,
#s4 {
  box-sizing: border-box;
  /*border: 1px dotted #f00;*/
  height: 30px;
  width: 240px;
  margin: 0 15px;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

#s2,
#s3 {
  box-sizing: border-box;
  /*border: 1px dotted #f00;*/
  width: 30px;
  display: inline-block;
  margin: 0;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

#s3 {
  margin-left: 200px;
}

.gabor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 6px 10px;
  display: inline-block;
  background: linear-gradient(90deg, #fff 0, #000 25%, #fff 50%, #000 75%, #fff 100%);
  /*background: linear-gradient(90deg, #fff 0, #000 16.7%, #fff 33.3%, #000 50%, #fff 66.7%, #000 83.3%, #fff 100%);*/
  background-size: 200% 200%;
  animation: HorizontalRight .5s linear infinite;
}

.p7 {
  animation: HorizontalLeft .5s linear infinite;
}

#s1 .gabor,
#s4 .gabor {
  background: linear-gradient(0deg, #fff 0, #000 25%, #fff 50%, #000 75%, #fff 100%);
  /*background: linear-gradient(0deg, #fff 0, #000 16.7%, #fff 33.3%, #000 50%, #fff 66.7%, #000 83.3%, #fff 100%);*/
  background-size: 200% 200%;
  animation: VerticalUp .5s linear infinite;
}

#s1 .p7,
#s4 .p7 {
  animation: VerticalDown .5s linear infinite;
}

.p2 {
  animation: HorizontalRight 1s linear infinite;
}

.p6 {
  animation: HorizontalLeft 1s linear infinite;
}

#s1 .p2,
#s4 .p2 {
  animation: VerticalUp 1s linear infinite;
}

#s1 .p6,
#s4 .p6 {
  animation: VerticalDown 1s linear infinite;
}

.p3 {
  animation: HorizontalRight 1.5s linear infinite;
}

.p5 {
  animation: HorizontalLeft 1.5s linear infinite;
}

#s1 .p3,
#s4 .p3 {
  animation: VerticalUp 1.5s linear infinite;
}

#s1 .p5,
#s4 .p5 {
  animation: VerticalDown 1.5s linear infinite;
  /* for posts animation-direction: alternate;*/
}

.p4 {
  animation: none;
}

#s1 .p4,
#s4 .p4 {
  animation: none;
}

#toLeft:checked ~ #wrapper .gabor {
  animation: HorizontalLeft .5s linear infinite;
}

#toLeft:checked ~ #wrapper .p7 {
  animation: HorizontalRight .5s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .gabor,
#toLeft:checked ~ #wrapper #s4 .gabor {
  animation: VerticalDown .5s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .p7,
#toLeft:checked ~ #wrapper #s4 .p7 {
  animation: VerticalUp .5s linear infinite;
}

#toLeft:checked ~ #wrapper .p2 {
  animation: HorizontalLeft 1s linear infinite;
}

#toLeft:checked ~ #wrapper .p6 {
  animation: HorizontalRight 1s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .p2,
#toLeft:checked ~ #wrapper #s4 .p2 {
  animation: VerticalDown 1s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .p6,
#toLeft:checked ~ #wrapper #s4 .p6 {
  animation: VerticalUp 1s linear infinite;
}

#toLeft:checked ~ #wrapper .p3 {
  animation: HorizontalLeft 1.5s linear infinite;
}

#toLeft:checked ~ #wrapper .p5 {
  animation: HorizontalRight 1.5s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .p3,
#toLeft:checked ~ #wrapper #s4 .p3 {
  animation: VerticalDown 1.5s linear infinite;
}

#toLeft:checked ~ #wrapper #s1 .p5,
#toLeft:checked ~ #wrapper #s4 .p5{
  animation: VerticalUp 1.5s linear infinite;
}

#toLeft:checked ~ #wrapper .p4 {
  animation: none;
}

#toLeft:checked ~ #wrapper #s1 .p4,
#toLeft:checked ~ #wrapper #s4 .p4 {
  animation: none;
}

@keyframes HorizontalLeft {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 200% 50%
  }
}

@keyframes HorizontalRight {
  0% {
    background-position: 200% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes VerticalDown {
  0% {
    background-position: 50% 200%
  }
  50% {
    background-position: 50% 100%
  }
  100% {
    background-position: 50% 0%
  }
}

@keyframes VerticalUp {
  0% {
    background-position: 50% 0%
  }
  50% {
    background-position: 50% 100%
  }
  100% {
    background-position: 50% 200%
  }
}