.blink {
    animation: blink 3s infinite;
  }
  
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


.zone1 {
    position: absolute;
    top: -31%;
    left: 27%;
}

.zone2 {
    position: absolute;
    top: -31%;
    left: 27%;
}

.zone3 {
    position: absolute;
    top: -31%;
    left: 27%;
}

.zone4 {

    position: absolute;
    top: -31%;
    left: 27%;
}

.zone5 {

    position: absolute;
    top: -31%;
    left: 27%;
}

.zone6 {

    position: absolute;
    top: -31%;
    left: 27%;
}

.zone7 {

    position: absolute;
    top: -31%;
    left: 27%;
}

/* zone 1 */
#zone-1-green {
    display: unset;
}

#zone-1-yellow {
    display: none;
}

#zone-1-orange {
    display: none;
}

#zone-1-red {
    display: none;
}

/* zone 2 */
#zone-2-green {
    display: unset;
}

#zone-2-yellow {
    display: none;
}

#zone-2-orange {
    display: none;
}

#zone-2-red {
    display: none;
}

/* zone 3 */
#zone-3-green {
    display: unset;
}

#zone-3-yellow {
    display: none;
}

#zone-3-orange {
    display: none;
}

#zone-3-red {
    display: none;
}

/* //zone 4 */
#zone-4-green {
    display: unset;
}

#zone-4-yellow {
    display: none;
}

#zone-4-orange {
    display: none;
}

#zone-4-red {
    display: none;
}

/* //zone 5 */
#zone-5-green {
    display: unset;
}

#zone-5-yellow {
    display: none;
}

#zone-5-orange {
    display: none;
}

#zone-5-red {
    display: none;
}

/* //zone 6 */
#zone-6-green {
    display: unset;
}

#zone-6-yellow {
    display: none;
}

#zone-6-orange {
    display: none;
}

#zone-6-red {
    display: none;
}

/* //zone 7 */
#zone-7-green {
    display: unset;
}

#zone-7-yellow {
    display: none;
}

#zone-7-orange {
    display: none;
}

#zone-7-red {
    display: none;
}