@font-face {
    font-family: OpenSans;
    src: url(../font/OpenSans-Regular.ttf);
}

@font-face {
    font-family: OpenSansBold;
    src: url(../font/OpenSans-Bold.ttf);
}

body {
  background: #5a535a;
  font-family: OpenSans;
  color: #f8f8f8;
  overflow: hidden;
}

#watchface {
  position: absolute;
  background: #4a434a;
}

#dial {
  position: absolute;
  transition: transform 0.2s linear;
}

.hand {
  position: absolute;
  top: 0;
  left: 50%;
}

.center {
  transform-origin: bottom center;
}

.hnd {
  margin: 6% 0 0 -1.9%;
  height: 0;
  width: 1.8%;
  transform-origin: center 105%;
}

.cmp {
  margin: 6% 0 0 -.6%;
  height: 42%;
  width: 1.2%;
  transform-origin: center 105%;
  background: #efcb44;
}

.m {
  margin: 1.5% 0 0 -.6%;
  height: 48.5%;
  width: 1.2%;
  box-sizing: border-box;
}

.f {
  margin: 1.5% 0 0 -.6%;
  height: 48.5%;
  width: 1.4%;
  box-sizing: border-box;
}

.t {
  margin: 1.5% 0 0 -.9%;
  height: 48.5%;
  width: 1.8%;
  box-sizing: border-box;
}

#n {
  border-color: #efcb44;
}

#f0, #m0 {
  display: none;
}

#pointer {
  z-index: 2;
  transition: transform 1s ease;
}

#signpost {
  z-index: 1;
  transition: transform 1s ease;
}

#height {
  text-align: center;
  margin-top: 18%;
}

.small {
  font-size: 50%;
}

#town {
  margin: auto;
  margin-top: -5%;
}

.right {
  text-align: right;
}

.num {
  margin: 14% 0 0 -.9%;
  width: 1.8%;
}

#p1 {
  position: absolute;
  top: 22%;
  left: 70%;
}

#p2 {
  position: absolute;
  top: 56.5%;
  left: 64.5%;
}

#p3 {
  position: absolute;
  top: 56.5%;
  left: 24%;
}

#p4 {
  position: absolute;
  top: 22%;
  left: 18%;
}

.dir {
  font-family: OpenSansBold;
  position: absolute;
  color: #efcb44;
}

#north {
  top: 7%;
  left: 47.5%;
}

#east {
  top: 40%;
  right: 15.5%;
  transform: rotate(90deg);
}

#south {
  bottom: 7.5%;
  left: 47.5%;
  transform: rotate(180deg);
}

#west {
  top: 40%;
  left: 14.5%;
  transform: rotate(-90deg);
}

#previous {
  position: absolute;
  top: 84%;
  left: 0;
  background: #4a434a url("../img/previous.png") 0px 0px / 100% 100% no-repeat;
  border: 0;
  height: 16%;
  width: 16%;
  border-radius: 50%;
  cursor: pointer;
}

#next {
  position: absolute;
  top: 84%;
  left: 84%;
  background: #4a434a url("../img/next.png") 0px 0px / 100% 100% no-repeat;
  border: 0;
  height: 16%;
  width: 16%;
  border-radius: 50%;
  cursor: pointer;
}

#reset {
  position: absolute;
  top: 0;
  left: 84%;
  background: #4a434a url("../img/reload.png") 0px 0px / 100% 100% no-repeat;
  border: 0;
  height: 16%;
  width: 16%;
  border-radius: 50%;
  cursor: pointer;
}

#orientate {
  position: absolute;
  top: 0;
  left: 0;
  background: #4a434a url("../img/compass.png") 0px 0px / 100% 100% no-repeat;
  border: 0;
  height: 16%;
  width: 16%;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

.grey {
  color: #aaa;
}

.yellow {
  font-family: OpenSansBold;
  color: #efcb44;
}

#copy {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  color: #aaa;
}

#copy a, #year {
  color: #aaa;
}

@media only screen and (orientation: landscape) {
  #watchface, #dial {
    top: 0;
    left: 50%;
    margin: 0 0 0 -50vh;
    height: 100vh;
    width: 100vh;
    border-radius: 50vh;
  }

  .m {
    border-top: 3.2vh #aaa solid;
  }

  .f {
    border-top: 7vh #aaa solid;
  }

  .t {
    border-top: 12vh #aaa solid;
  }

  .hnd {
    border-bottom: 42vh solid #f8f8f8;
    border-left: 1vh solid transparent;
    border-right: 1vh solid transparent;
  }

  #north, #east, #south, #west {
    font-size: 6vh;
  }

  #height {
    font-size: 16vh;
  }

  #town {
    font-size: 4vh;
  }

  #copy {
    font-size: 3vh;
  }

  #town td {
    padding-right: 2vh;
  }

  .num {
    font-size: 6vh;
  }

  #copy {
    transform-origin: 1.5vh 1.5vh;
    transform: rotate(-90deg);
  }
}

@media only screen and (orientation: portrait) {
  #watchface, #dial {
    top: 50%;
    left: 0;
    margin: -50vw 0 0 0;
    height: 100vw;
    width: 100vw;
    border-radius: 50vw;
  }

  .m {
    border-top: 3.2vw #aaa solid;
  }

  .f {
    border-top: 7vw #aaa solid;
  }

  .t {
    border-top: 12vw #aaa solid;
  }

  .hnd {
    border-bottom: 42vw solid #f8f8f8;
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
  }

  #north, #east, #south, #west {
    font-size: 6vw;
  }

  #height {
    font-size: 16vw;
  }

  #town {
    font-size: 4vw;
  }
  
  #copy {
    font-size: 3vw;
  }

  #town td {
    padding-right: 2vw;
  }

  .num {
    font-size: 6vw;
  }

  #copy {
    width: 100vw;
    text-align: center;
  }
}