@font-face {
  font-family: pixelfont;
  src: url(pixelfont.woff);
}
@-webkit-keyframes blinkFlash {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blinkFlash {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
*:focus {
  box-shadow: none;
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

p {
  font-size: 17px;
  text-align: left;
  text-align: center;
  color: rgb(255, 255, 3);
}

a {
  text-decoration: underline;
  color: rgb(255, 255, 3);
}

h3 {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  background-color: transparent;
}

h4 {
  font-size: 19px;
  font-weight: 500;
  text-align: left;
  padding: 2px;
}

h5 {
  font-size: 19px;
  font-weight: 500;
  text-align: center;
  padding: 2px;
  background-color: transparent;
}

body {
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-family: pixelfont;
  color: rgb(255, 255, 3);
  font-weight: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 6px solid rgb(0, 150, 136);
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.header-index {
  background-color: rgb(48, 213, 95);
  border-bottom: 6px solid rgb(0, 150, 136);
  box-shadow: rgb(56, 44, 56) 0px -3px 13px 0px;
  outline: none;
  color: rgb(255, 255, 3);
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: transform 0.7s ease-out;
  z-index: 2;
  position: absolute;
  padding: 3px;
  top: 0;
  left: 0;
}
.header-index.is-open {
  transform: translateY(-101%);
}

#logo {
  height: auto;
  max-width: 100%;
  margin: auto;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

.wrapper-index {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 150, 136);
  position: static;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-rows: 100vh 0;
  grid-template-areas: "map" "slider";
}
.wrapper-index.clicked {
  -webkit-animation: blinkFlash 0.5s ease-in-out;
          animation: blinkFlash 0.5s ease-in-out;
}
.wrapper-index .map-class {
  grid-area: map;
  height: 95%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 1;
}
.wrapper-index .map-class #map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper-index .map-class #map .mapboxgl-user-location-dot:before {
  background-color: rgb(223, 79, 207);
}
.wrapper-index .map-class #map .mapboxgl-user-location-dot:after {
  background-color: rgb(223, 79, 207);
}
.wrapper-index .map-class #map .mapboxgl-user-location-accuracy-circle {
  background-color: rgba(223, 79, 206, 0.25);
}
.wrapper-index .map-class #map .mapboxgl-ctrl-group {
  border-radius: 0px !important;
  background-color: transparent;
}
.wrapper-index .map-class #map .mapboxgl-ctrl-group:not(:empty) {
  box-shadow: none;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate {
  width: 58px !important;
  height: 58px !important;
  background-color: transparent;
  display: block;
  cursor: pointer;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  -webkit-animation: none !important;
          animation: none !important;
  background-image: url(geolocate_toggle.png) !important;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate:disabled {
  opacity: 1;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  -webkit-animation: none !important;
          animation: none !important;
  background-image: url(geolocate_toggledisabled.png) !important;
  opacity: 0.5 !important;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  -webkit-animation: none !important;
          animation: none !important;
  background-image: url(geolocate_togglepressed.png) !important;
  opacity: 1 !important;
}
.wrapper-index .map-class #map button.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  -webkit-animation: none !important;
          animation: none !important;
  background-image: url(geolocate_toggle.png) !important;
  opacity: 1 !important;
}
.wrapper-index .slider {
  grid-area: slider;
  border: 6px solid rgb(0, 150, 136);
  background-color: rgb(48, 213, 95);
  box-shadow: rgb(56, 44, 56) 0px 6px 13px 0px;
  width: 100%;
  height: 100vh;
  z-index: 2;
  overflow: auto;
  transition: transform 0.7s ease-out;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "title" "camera" "functions";
}
.wrapper-index .slider.is-open {
  transform: translateY(-85vh);
}
.wrapper-index .slider.clicked {
  transform: translateY(-100vh);
  height: 100vh;
}
.wrapper-index .slider .slider-title {
  grid-area: title;
  position: relative;
  border-bottom: 6px solid rgb(0, 150, 136);
  background-color: rgb(48, 213, 95);
  display: flex;
  align-items: center;
  z-index: 2;
}
.wrapper-index .slider .slider-title #location {
  background-color: transparent;
  font-size: 19px;
  -webkit-font-smoothing: antialiased;
  font-family: pixelfont;
  font-weight: 500;
  color: rgb(255, 255, 3);
  text-align: center;
  flex-wrap: wrap;
  flex: 2;
}
.wrapper-index .slider .slider-title .slider-toggle {
  flex: 0 0 58px;
  background-image: url(toggle.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(48, 213, 95);
  border: none;
  width: 58px;
  height: 58px;
  cursor: pointer;
}
.wrapper-index .slider .slider-title .slider-toggle:active {
  background-image: url(toggle_clicked.png);
}
.wrapper-index .slider .slider-cam {
  grid-area: camera;
  border-bottom: 6px solid rgb(0, 150, 136);
  display: block;
  height: auto;
  max-height: 100%;
  width: 100%;
  z-index: 3;
}
.wrapper-index .slider .slider-cam #camFeed {
  display: block;
  height: auto;
  max-height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(56, 44, 56);
  border: 10px solid rgb(56, 44, 56);
  z-index: 3;
}
.wrapper-index .slider .slider-functions {
  grid-area: functions;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1;
}
.wrapper-index .slider .slider-functions .slider-text {
  flex: initial;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(48, 213, 95);
  opacity: 1;
  text-align: center;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
.wrapper-index .slider .slider-functions .slider-text.clicked {
  transform: translateY(-116px);
  height: 116px;
  opacity: 0;
}
.wrapper-index .slider .slider-functions .slider-text .take-selfie {
  background: url(selfie.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
  height: 116px;
  width: 232px;
  cursor: pointer;
}
.wrapper-index .slider .slider-functions .slider-text .take-selfie:active {
  background: url(selfie_pressed.png);
}
.wrapper-index .slider .slider-functions .slider-buttons {
  flex: initial;
  background-color: rgb(48, 213, 95);
  width: 100%;
  height: 0;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: "delete" "save";
  z-index: 3;
  opacity: 0;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
.wrapper-index .slider .slider-functions .slider-buttons.clicked {
  transform: translateY(-116px);
  opacity: 1;
  height: 100%;
}
.wrapper-index .slider .slider-functions .slider-buttons .save-it {
  grid-area: "save";
  height: 116px;
  width: 232px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(save.png);
  background-repeat: no-repeat;
  background-size: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin: auto;
  border: none;
  cursor: pointer;
}
.wrapper-index .slider .slider-functions .slider-buttons .save-it:active {
  background: url(save_pressed.png);
}
.wrapper-index .slider .slider-functions .slider-buttons .delete-it {
  grid-area: "delete";
  height: 116px;
  width: 232px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(delete.png);
  background-repeat: no-repeat;
  background-size: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin: auto;
  border: none;
  cursor: pointer;
}
.wrapper-index .slider .slider-functions .slider-buttons .delete-it:active {
  background: url(delete_pressed.png);
}
.wrapper-index .slider .slider-functions .slider-spacer {
  flex: initial;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  background-color: rgb(48, 213, 95);
  z-index: 1;
  overflow-y: auto;
  transition: transform 0.7s ease-in-out;
}
.wrapper-index .slider .slider-functions .slider-spacer.clicked {
  transform: translateY(-116px);
}

.footer-index {
  background-color: rgb(0, 150, 136);
  overflow: hidden;
  color: rgb(255, 255, 3);
  width: 100%;
  height: 5%;
  padding: 3px;
  transition: transform 0.7s ease-in-out;
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
}
.footer-index.is-open {
  transform: translateY(101%);
}
.footer-index p {
  text-align: left;
}

.wrapper-faq {
  overflow-y: auto;
  background-color: rgb(223, 79, 207);
  height: 100%;
  width: 100%;
  position: static;
}
.wrapper-faq .header {
  background-color: rgb(223, 79, 207);
  overflow: hidden;
  color: rgb(255, 255, 3);
  width: 100%;
  height: auto;
  z-index: 3;
  padding: 3px;
}
.wrapper-faq .header h1 {
  color: rgb(255, 255, 3);
  font-size: 25px;
  text-align: center;
}
.wrapper-faq .main-text {
  min-height: 100%;
  height: auto;
  width: 100%;
  background-color: rgb(223, 79, 207);
  padding: 5px;
  z-index: 4;
}
.wrapper-faq .main-text #example {
  height: auto;
  max-width: 75%;
  padding: 15px;
  margin: auto;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}
.wrapper-faq .main-text h4 {
  padding-left: 10px;
  padding-right: 5px;
}
.wrapper-faq .main-text p {
  text-align: left;
  font-size: 15px;
  padding-left: 13px;
  padding-right: 9px;
}
.wrapper-faq .footer {
  background-color: rgb(125, 63, 89);
  color: rgb(255, 255, 3);
  overflow: hidden;
  width: 100%;
  height: 5%;
  padding: 3px;
  border: none;
  z-index: 3;
}
.wrapper-faq .footer p {
  text-align: left;
}

.wrapper-about {
  overflow-y: auto;
  background-color: rgb(0, 175, 255);
  height: 100%;
  width: 100%;
  position: static;
}
.wrapper-about .header {
  background-color: rgb(0, 175, 255);
  overflow: hidden;
  color: rgb(255, 255, 3);
  width: 100%;
  height: auto;
  z-index: 3;
  padding: 3px;
}
.wrapper-about .header h1 {
  color: rgb(255, 255, 3);
  font-size: 25px;
  text-align: center;
}
.wrapper-about .main-text {
  min-height: 100%;
  height: auto;
  width: 100%;
  background-color: rgb(0, 175, 255);
  padding: 5px;
  z-index: 4;
}
.wrapper-about .main-text h4 {
  padding-left: 10px;
  padding-right: 5px;
}
.wrapper-about .main-text p {
  text-align: left;
  font-size: 15px;
  padding-left: 13px;
  padding-right: 9px;
}
.wrapper-about .footer {
  background-color: rgb(40, 53, 147);
  color: rgb(255, 255, 3);
  overflow: hidden;
  width: 100%;
  height: 5%;
  padding: 3px;
  border: none;
  z-index: 3;
}
.wrapper-about .footer p {
  text-align: left;
}/*# sourceMappingURL=main.css.map */