/*------------------------------------------------------------------*/
/*                  Styles only for the front page                  */
/*------------------------------------------------------------------*/

/*------------------------------------------------------------------*/
/*                              Header                              */
/*------------------------------------------------------------------*/

.homepage .uk-sticky-placeholder:first-of-type {
  height: 0 !important;
}

/*------------------------------------------------------------------*/
/*                           Hero Section                           */
/*------------------------------------------------------------------*/

.homepage .hero {
  height: 100vh;
}

@media (max-width: 640px) {
  .homepage .hero {
    height: 45vh;
  }
}

.homepage .page-container .hero.with-tagline-html .hero-image:after {
  background-image: unset;
}

.homepage .front-button-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.homepage .play-button {
  font-size: 10vw;
  background-color: transparent;
  border: none;
  height: max-content;
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
  border: none;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.homepage .play-button path {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-filter: drop-shadow(0px 0px 10px var(--color-mint));
  filter: drop-shadow(0px 0px 10px var(--color-mint));
}

.homepage .play-button:hover * {
  cursor: pointer;
  color: var(--color-orange);
}

@media (max-width: 640px) {
  .homepage .play-button {
    font-size: 20vw;
    top: 25%;
  }
}

.homepage #player {
  display: none;
  width: 100%;
  margin-top: 95px;
}

@media (max-width: 640px) {
  .homepage #player {
    margin-top: 64px;
  }
}