body {
  margin: 0px;
  overflow: hidden;
}

/*FONT STYLES*/

h1,
h2,
h3,
h4,
h5,
p,
a {
  font-family: Nunito, sans-serif;
  color: #5d666f;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

/*HELPERS*/

.text-center {
  text-align: center;
}

.hide {
  display: none;
}

/* SECTION STYLES */

header.invisible,
footer.invisible {
  opacity: 0;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  opacity: 1;
  transition: opacity 1s ease-in-out 3s;
  z-index: 10;
}

footer {
  position: absolute;
  left: 0;
  bottom: 24px;
  height: 64px;
  width: 100vw;
  opacity: 1;
  z-index: 10;
  transition: opacity 1s ease-in-out 3s;
}

/* HEADER STYLES */

.logo.logo-brand {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  height: 24px;
}

.logo.logo-brand > svg {
  height: 100%;
}

.link-intern--back,
.link-intern--back:hover,
.link-intern--back:focus {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  z-index: 3;
}

/* OTHER STUFF- @ToDo: Restructure */

video {
  object-fit: cover;
}

@keyframes animatebottom {
  from {
    bottom: -387px;
    opacity: 0;
  }

  to {
    bottom: 10px;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .logo {
    position: absolute;
  }
}

/* BUTTON STYLES */

button {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button:hover,
button:focus {
  background: transparent;
}

button:focus {
  outline: none;
  outline-offset: 0;
}

/* OVERLAY STYLES */

.overlay-marker {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 240px;
  padding: 26px;
  z-index: 6;
  background-color: #000;
  opacity: 0.5;
  text-align: center;
}

.overlay-marker > p {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

.overlay-marker > img {
  height: 180px;
  margin-right: -60px;
}

/* FOOTER ELEMENTS STYLES */

.link-tinymodal--questionmark {
  position: absolute;
  bottom: 0;
  left: 16px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: white;
}

.link-tinymodal--questionmark:before {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #4ecdc4;
  font-size: 19px;
  letter-spacing: 0px;
  line-height: 1;
  font-weight: 600;
}

.link-intern--simplevideo {
  position: absolute;
  bottom: 2vh;
  right: 4vw;
  left: 50%;
  z-index: 3;
  width: 240px;
  height: 50px;
  border-radius: 25px;
  border: 4px solid white;
  background: #4ecdc4;
  color: white;
  line-height: 40px;
  text-align: center;
  transform: translateX(-50%);
}

.btn-play {
  position: absolute;
  bottom: 30vh;
  left: 50%;
  display: block;
  transform: perspective(10px) translateX(-42%) translateZ(1px);
  z-index: 20;
  width: 90px;
  height: 90px;
  border: 8px solid #4ecdc4;
  border-radius: 50px;
  background: transparent;
  transition: 2s;
  transition-timing-function: ease;
}

.btn-play.playing {
  bottom: 3vh;
  width: 70px;
  height: 70px;
  border: 6px solid #4ecdc4;
}

.btn-play > svg {
  position: absolute;
  top: 0;
  left: 0;
}

.icon-pause {
  display: none;
}

.btn-play.playing .icon-pause {
  display: block;
}

.btn-play.playing .icon-play {
  display: none;
}

.link-intern--arrow {
  position: absolute;
  bottom: 2vh;
  right: 9vw;
  display: inline-block;
  transform: perspective(10px) translateZ(1px);
  z-index: 20;
  color: white;
  height: 50px;
  width: 50px;
  border: 4px solid #4ecdc4;
  border-radius: 30px;
}

.simple-button {
  display: inline-block;
  transform: perspective(10px) translateZ(1px);
  z-index: 20;
  color: white;
  height: 40px;
  width: 40px;
}

/* ~~~ Define blink class for Questionmark Link ~~~ */

/* Firefox old*/
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* IE */
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.blink-image {
  -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
  -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
  -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
  animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

.tinymodal-active .blink-image {
  visibility: hidden;
}

/* SPLASH ANIMATION STYLES */

.screen-splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.con-allow-camera {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 25vh;
  padding: 1.5em;
  z-index: 3;
  background-color: #4ecdc4;
  border-radius: 0 0 10px 10px;
}

.con-allow-camera .con-scale--svg {
  width: 72px;
  height: 59px;
}

.con-allow-camera .con-scale--svg > svg {
  width: 100%;
  height: auto;
}

.con-allow-camera > p,
span {
  margin-bottom: 0;
  padding: 0;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 20px;
}

.con-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 50%;
  height: auto;
}

.con-lottie {
  position: absolute;
  width: 200vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (min-width: 769px) {
  .con-logo {
    width: 25%;
  }
  .con-lottie {
    width: 150vw;
  }
}

@media only screen and (min-width: 1024px) {
  .con-allow-camera > p,
  span {
    font-size: 28px;
  }
  .con-lottie {
    width: 120vw;
  }
}

@media only screen and (min-width: 1200px) {
  .con-allow-camera {
    height: 30vh;
  }

  .con-allow-camera .con-scale--svg {
    width: 144px;
    height: 118px;
  }
  .con-allow-camera > p,
  span {
    font-size: 36px;
  }
  .con-lottie {
    width: 110vw;
  }
}