.semaphore {
  width: 120px;
  float: right;
  margin-top:25px;
  background: #333;
  padding: 5px 10px;
  border-radius: 50px;
  box-sizing: content-box !important;
}

.semaphore div {
  width: 30px;
  height: 30px;
  margin: 5px 5px 0 5px;
  display: inline-block;
  background: red;
  border-radius: 50%;
  opacity:.1;
  position:relative;
}

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

.semaphore {
width:30px;
margin-top:0;
}
.semaphore div {
display:block;
margin:5px 0;
}
}

.semaphore.yellow div.yellow {
  opacity:1;
}

.semaphore.red div.red {
  opacity:1;
}

.semaphore.green div.green {
  opacity:1;
}

.semaphore div.green, #film .rest .box a.green:after {
  background:green;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #00cc00 10%, #009900 80%, #062745 100%);
}

.semaphore div.yellow, #film .rest .box a.yellow:after {
  background:yellow;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #cccc00 10%, #999900 80%, #062745 100%);
}

.semaphore div.red, #film .rest .box a.red:after {
  background:red;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #cc0000 10%, #990000 80%, #062745 100%);
}

.semaphore div:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

.semaphore div .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}