/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #212121;
  font-family: "Josefin Sans", sans-serif;
  color: #eee;
}
/* ******************************** Preloader ********************************* */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #212121;
}

.preloader .logo {
  position: absolute;
  width: 80px;
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.preloader .logo img {
  width: 100%;
  height: auto;

  -ms-filter: drop-shadow(3px 3px 0px #26313580);
  -webkit-filter: drop-shadow(3px 3px 0px #26313580);
  filter: drop-shadow(3px 3px 0px #26313580);
  -webkit-animation-name: rotateLogo 2s infinite linear 0.5s forwards infinite;
  -ms-animation-name: rotateLogo 2s infinite linear 0.5s forwards infinite;
  animation-name: rotateLogo 2s infinite linear 0.5s forwards infinite;
}

@keyframes rotateLogo {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.page {
  width: 100%;
  margin: 0 auto;
  z-index: 999;
  position: relative;
}

.header {
  width: 80%;
  margin: 0 auto;
}

.logo {
  width: 50px;
  position: absolute;
}

.header h1 {
  margin-left: 70px;
}

.header h3 {
  margin-left: 70px;
  margin-top: -20px;
}

.content .top {
  width: 80%;
  margin: 0 auto;
}

.test.change.p {
  margin: 0 0 0 16px;
}

#ui {
  opacity: 0;
}

#ui.enabled {
  opacity: 1;
}

.btn {
  border-radius: 4px;
  height: 25px;
  border: 0px;
  background: #fff;
  position: relative;
  padding: 8px 9px 0;
  color: #333;
  cursor: pointer;
  width: 180px;
  text-align: center;
  margin: 15px auto 30px;
  opacity: 1;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.btn:active {
  background: #eee;
}

.btn.walking {
  opacity: 0;
}

.btn.play,
.btn.playing {
  opacity: 1;
}

.play.p.active {
  background-color: #eee;
}

.test {
  background-color: #e08d7b;
  display: none;
  width: 90px;
}

.state {
  font-size: 40px;
  color: #967f53;
  text-align: center;

  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
}

.state.no-opacity {
  opacity: 0;
}

.next-point {
  opacity: 0;

  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

#distance {
  color: #967f53;
}

.audios {
  width: 80%;
  margin: 20px auto;
}

.audios > p {
  margin: 15px 0;
  font-size: 12px;
}

.state a,
.audios a {
  color: #967f53;
}

#map {
  width: 100%;
  height: 500px;
}

#loader {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
}

#loader.disabled {
  display: none;
}

#loader .loader-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #967f53;
  border-bottom-width: 0;
  border-left-width: 0;
  animation: rotate 2s ease-in-out infinite forwards;
}

/* Audio Only Page*/

.inst {
  font-size: 13px;
}

.audio-show p {
  color: #967f53;
  margin: 15px 0 5px;
}

.audio-show .audio {
  width: 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}