.gps-rec-centre {
  text-align: center;
}

#gps-rec-buttons {
  width: 285px;
  margin: 6em auto 2em auto;
}

#gps-rec-bin, #gps-rec-record {
  width: 140px;
}

#gps-rec-gps {
  display: block;
  fill: lightgray;
  margin: 1em auto;
}

#gps-rec-gr {
  margin-top: 10px;
  letter-spacing: 1px;
  font-weight: 600;
}
#gps-rec-prefix, #gps-rec-e3, #gps-rec-n3 {
  font-size: 24px;
}
#gps-rec-e4, #gps-rec-n4 {
  font-size: 20px;
  color: red;
  position: relative;
  top: -3px;
}
#gps-rec-e5, #gps-rec-n5 {
  font-size: 16px;
  color: orange;
  position: relative;
  top: -6px;
}
#gps-rec-accuracy {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
}

#gps-rec-altitude {
  font-size: 16px;
}

#gps-rec-latlon {
  margin-top: 10px;
  font-size: 16px;
}

#gps-rec-tetrad {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  display: none;
}
#gps-rec-tetrad.show {
  display: block;
}

#gps-rec-elapsed {
  margin-top: 10px;
  font-size: 16px;
}

#gps-rec-msg {
  margin: 2em;
  font-size: 14px;
}

#gps-rec-home {
  margin-top: 7em;
}

@keyframes flash-mic {0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;}}
@keyframes blink-gps {0%{fill: lightgray;} 50%{fill:rgb(12, 237, 12);} 100%{fill: lightgray;}}

.flashing {
  animation-name: flash-mic;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.blink-gps {
  animation-name: blink-gps;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* cursor:pointer required on iOS browsers otherwise
 * click event not recognised 
 */
#gps-rec-bin, #gps-rec-record {
  cursor: pointer;
}