:root {
  --black: #222;
  --white: #fff;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: fade 0.3s ease both; }
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- links, images & animations ---------- */

a, a img, .uk-link, .uk-button, #scroll-arrow a { transition: all 200ms ease-in-out; }
a:hover img, a.uk-logo:hover { filter: brightness(1.02); }
a.uk-position-absolute { transition: none; }

.fade-in, .fade-in-up, .delay { opacity: 0; }
.fade-in { animation: fadeIn 200ms linear forwards; }
.fade-in-up { animation: fadeInUp 500ms ease-in-out forwards; }
.delay { animation-delay: 1s; }

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- typography ---------- */

em { color: inherit; }

.el-content ul {
  line-height: 2;
  margin-bottom: 2rem;
}

/* ---------- cards ---------- */

.side-photo .uk-card { min-height: 500px; }

/* ---------- video ---------- */

.embed-container, .responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed, .responsive-container iframe, .responsive-container object, .responsive-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------- accordion ---------- */

/*
.uk-open .uk-accordion-title {  }

.uk-accordion-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2332658A' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E"); }

.uk-open>.uk-accordion-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2373BFB8' d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"); }
*/

/* ---------- footer ---------- */

#scroll-arrow {
  position: fixed;
  bottom: 40px;
  right: 40px;
}
.uk-totop, .uk-totop:hover { background-color: transparent; }
#scroll-arrow a {
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  line-height: 1;
  display: block;
  padding: 15px 0 0 16px;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  opacity: 0.8;
}
#scroll-arrow a:hover { opacity: 1; }
#scroll-arrow.uk-visible {
  display: block;
  animation: fadeIn 1s linear forwards;
}

/* ---------- responsive ---------- */

ul.uk-nav.uk-nav-default.uk-nav-center { margin-bottom: 2rem; }

@media only screen and (max-width: 960px) {

  .side-photo .uk-card { min-height: 400px; }

  #scroll-arrow {
    bottom: 0;
    right: 10px;
  }

}