@import url("https://fonts.googleapis.com/css?family=Exo+2&display=swap");
@import url("https://fonts.googleapis.com/css?family=BioRhyme:400,800&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Chivo:300&display=swap");
:root {
  --h5: 3vw;
  --h6: 2.5vw;
}

html[data-theme="light"] {
  --c1: #1a535c;
  --c1font: #bacbcd;
  --c2: #4ecdc4;
  --c2font: #2d5d65;
  --c3: #f7fff7;
  --c3font: #5f6c74;
  --c4: #ff6b6b;
  --c4font: #4c2020;
  --c5: #ffe66d;
  --c5font: #62644b;
}

#colors {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  bottom: 2cm;
  width: calc((2cm * 5) + $finger);
  height: calc(1cm * 5);
  left: calc(-14cm + (1cm * 4));
  z-index: 50;
  text-transform: uppercase;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#c1:hover,
#c2:hover,
#c3:hover,
#c4:hover,
#c5:hover {
  left: 10cm;
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

#c1,
#c2,
#c3,
#c4,
#c5 {
  position: relative;
  width: calc(2cm * 5);
  height: 1cm;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 1cm;
}

#c1 {
  /*@include color-c1();*/
  background-color: var(--c1);
  color: var(--c1font);
}

#c2 {
  /*@include color-c2();*/
  background-color: var(--c2);
  color: var(--c2font);
}

#c3 {
  /*@include color-c3();*/
  background-color: var(--c3);
  color: var(--c3font);
}

#c4 {
  /*@include color-c4();*/
  background-color: var(--c4);
  color: var(--c4font);
}

#c5 {
  /*@include color-c5();*/
  background-color: var(--c5);
  color: var(--c5font);
}

body {
  margin: 0;
  padding: 0;
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
}

#background {
  position: absolute;
  display: block;
  z-index: -1;
  height: 100%;
  width: 100%;
  /*@include color-c1();*/
  background-color: var(--c1);
  color: var(--c1font);
  /*
  background: url("https://i.pinimg.com/originals/d6/b3/cc/d6b3ccdd1618d4197d0e27d582de1613.jpg");
  background-position: center bottom;
  background-attachment: scroll;
  background-size: 10cm;
  background-repeat: no-repeat;
  */
}

#wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2cm 2cm 2cm;
      grid-template-columns: 2cm 2cm 2cm;
  -ms-grid-rows: 1cm 2cm 1cm;
      grid-template-rows: 1cm 2cm 1cm;
  grid-column-gap: 0.3cm;
  grid-row-gap: 0.3cm;
  position: absolute;
  width: 100vw;
  background: transparent;
  height: calc(2cm + (1cm * 2) + (0.3cm * 4));
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  bottom: 2cm;
  left: 0;
  padding: 0;
  margin: 0;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#uphour,
#upminute,
#upampm,
#downhour,
#downminute,
#downampm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2cm;
  height: 1cm;
  margin-left: 1vw;
  margin-right: 1vw;
  border: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

#uphour,
#upminute,
#upampm {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-size: contain;
}

#downhour,
#downminute,
#downampm {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/><path fill='none' d='M0 0h24v24H0V0z'/></svg>");
  background-size: contain;
}

.animated {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2cm;
  height: 2cm;
  margin-left: 1vw;
  margin-right: 1vw;
  border: 0;
  border-radius: 0.5cm;
  overflow: hidden;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c8c8c8), color-stop(white), to(#c8c8c8));
  background-image: linear-gradient(#c8c8c8, white, #c8c8c8);
  -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
  color: black;
  -webkit-border-radius: 0.5cm;
  -moz-border-radius: 0.5cm;
  -ms-border-radius: 0.5cm;
  -o-border-radius: 0.5cm;
}

#minute,
#hour,
#ampm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*background: rgba(255,0,0,.4); for testing of animation only*/
  width: 2cm;
  height: 2cm;
  border: 0;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.8cm;
}

.animateDown {
  -webkit-animation-name: downandout;
  /* Safari 4.0 - 8.0 */
  animation-name: downandout;
  -webkit-animation-duration: 500ms;
  /* Safari 4.0 - 8.0 */
  animation-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
          transition-timing-function: cubic-bezier(1, 0, 0, 1);
}

.animateUp {
  -webkit-animation-name: upandout;
  /* Safari 4.0 - 8.0 */
  animation-name: upandout;
  -webkit-animation-duration: 500ms;
  /* Safari 4.0 - 8.0 */
  animation-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
          transition-timing-function: cubic-bezier(1, 0, 0, 1);
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes downandout {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 100%;
    left: 0;
  }
  42% {
    top: 100%;
    left: calc(2cm * 2);
  }
  48% {
    top: -110%;
    left: calc(2cm * 2);
  }
  50% {
    top: -110%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

/* Standard syntax */
@keyframes downandout {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 100%;
    left: 0;
  }
  42% {
    top: 100%;
    left: calc(2cm * 2);
  }
  48% {
    top: -110%;
    left: calc(2cm * 2);
  }
  50% {
    top: -110%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes upandout {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: -100%;
    left: 0;
  }
  42% {
    top: -100%;
    left: calc(2cm * 2);
  }
  48% {
    top: 110%;
    left: calc(2cm * 2);
  }
  50% {
    top: 110%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

/* Standard syntax */
@keyframes upandout {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: -100%;
    left: 0;
  }
  42% {
    top: -100%;
    left: calc(2cm * 2);
  }
  48% {
    top: 110%;
    left: calc(2cm * 2);
  }
  50% {
    top: 110%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

.pac-container {
  /*@include color-c4();*/
  background-color: var(--c4);
  color: var(--c4font);
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
  top: auto !important;
  bottom: calc(2cm * 1);
  border: 0 !important;
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
}

.pac-item-query {
  /*@include color-c4();*/
  background-color: var(--c4);
  color: var(--c4font);
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
  border: 0;
}

.pac-icon {
  width: 0;
  height: 0;
  border: 0;
}

.pac-item {
  /*@include color-c4();*/
  background-color: var(--c4);
  color: var(--c4font);
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
  border: 0;
}

.pac-matched {
  color: black;
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
  border: 0;
}

.pac-item:hover,
.pac-item:focus,
.pac-item:hover .pac-item-query,
.pac-item:focus .pac-item-query,
.pac-matched:hover,
.pac-matched:focus,
.pac-item-query:hover,
.pac-item-query:focus {
  /*@include color-c5();*/
  background-color: var(--c5);
  color: var(--c5font);
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
  border: 0;
}

.mapControls {
  -webkit-box-shadow: 0px 0px black !important;
  box-shadow: 0px 0px black !important;
}

#searchMapInput {
  /*border-radius: 5px;*/
  width: 90vw;
  bottom: 1cm;
  position: absolute;
  height: 1cm;
  /*@include color-c5();*/
  background-color: var(--c5);
  color: var(--c5font);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--c3);
  font-size: calc(1cm / 2);
  font-weight: bold;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: var(--c1font);
}

#searchMapInput:focus {
  border-bottom: 3px solid var(--c2);
}

#searchMapInput::-webkit-input-placeholder,
#searchMapInput:focus::-webkit-input-placeholder {
  /*@include font-main();*/
  font-family: "Exo 2", sans-serif;
  font-size: calc(1cm / 2) !important;
}

#searchMapInput::-webkit-input-placeholder {
  color: var(--c1font);
}

#searchMapInput:focus::-webkit-input-placeholder {
  color: var(--c1font);
}

.locationName {
  /*@include font-flashy();*/
  font-family: "Playfair Display", serif;
  /*@include bigText();*/
  font-size: 2cm;
  line-height: 1.7cm;
  margin-top: -0.6cm;
  margin-bottom: -0.3cm;
  color: var(--c5);
}

.intro,
.subtitle {
  /*@include font-chivo();*/
  font-family: "Chivo", sans-serif;
  color: var(--c4);
}

.intro {
  /*@include introText();*/
  font-size: 0.8cm;
  line-height: 0.9;
}

.subtitle {
  /*@include introText();*/
  font-size: 0.8cm;
  line-height: 0.9;
}

div#lat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  text-align: center;
  padding: 10vw;
}
/*# sourceMappingURL=main.css.map */