/* Semáforo CSS vertical */

ul.semaforo1 {
display: inline-block;
position: relative;
width: 110px;
margin: 30px 40px;
padding: 15px;
list-style-type: none;
border: 6px double grey;
background: black;
background: linear-gradient( -90deg, #45484d 0%, #000000 100%);
border-radius: 20%;
box-shadow: 0px 0px 0 20px rgba(0,0,0,.8);
}
ul.semaforo li {
position:relative;
width: 80px;
height: 80px;
border-radius: 50%;
background: lightgrey;
margin: 10px 0;
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4),
0 0 1px #000;
}
ul.semaforo li:after {
content: "";
width: 60px;
height: 30px;
position: absolute;
left: 20px;
top: 10px;
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 15px;
}
.rojo li:nth-of-type(1) {
background: #ff0000;
}
.naranja li:nth-of-type(2) {
background: #ff9933;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}
