/**********************
** Animations
***********************/
/**
  Animation transitions variables
 */
/*$transition-timing-function: ease-in-out;
*/
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/**********************
** Init
***********************/
*, *:after, *:before {
  box-sizing: border-box;
}

.hidden {
  display: none;
}

/* RESET FONT SIZE => 10PX BASE SIZE */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* BODY */
body {
  font-size: var(--wp--preset--font-size--default);
  line-height: 166.6666666667%;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

:where(figure) {
  margin: 0 0 3rem;
}

:where(body .is-layout-flex) {
  gap: 3rem;
}

/*#page {
  margin: 0 auto;
  max-width: $max-wrapper-width;
  width: 100%;
}*/
#content {
  margin: 12rem 0 0;
  min-height: 50vh;
  padding: 6rem;
  position: relative;
  z-index: 55;
}
#content .entry-header:not(.alignwide):not(.alignfull), #content .entry-content:not(.alignwide):not(.alignfull), #content .entry-aside:not(.alignwide):not(.alignfull), #content .entry-footer:not(.alignwide):not(.alignfull) {
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
}
#content .entry-header .entry-title {
  margin: 2.5rem 0 calc(2.5rem + 2.5vw);
  padding-bottom: 3rem;
  position: relative;
  text-align: center;
  /*&::after {
    @include before-after;

    background: url(../svg/orbiform.svg) center center no-repeat;
    background-size: contain;
    bottom: 0;
    height: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
  }*/
}
#content .yugening-header-wrapper {
  margin: 2.5rem auto calc(2.5rem + 2.5vw);
  max-width: var(--wp--style--global--content-size);
  width: 100%;
}
@media (max-width: 1920px) {
  #content {
    padding: 3.125vw;
  }
}

/* ALIGN WIDE AND FULL */
.alignwide {
  margin-left: calc(50% - var(--wp--style--global--wide-size) / 2);
  margin-right: calc(50% - var(--wp--style--global--wide-size) / 2);
  max-width: 100vw !important;
  width: var(--wp--style--global--wide-size);
}
@media (max-width: 1366px) {
  .alignwide {
    margin-left: calc(50% - 50vw + 3.125vw);
    margin-right: calc(50% - 50vw + 3.125vw);
    max-width: 93.75vw !important;
  }
}

.alignfull {
  margin-left: calc(50% - 960px);
  margin-right: calc(50% - 960px);
  max-width: 1920px !important;
  width: auto;
}
@media (max-width: 2040px) {
  .alignfull {
    margin-left: calc(50% - 50vw + 6rem);
    margin-right: calc(50% - 50vw + 6rem);
    max-width: calc(100vw - 6rem - 6rem) !important;
  }
}
@media (max-width: 1920px) {
  .alignfull {
    margin-left: calc(50% - 50vw + 3.125vw);
    margin-right: calc(50% - 50vw + 3.125vw);
    max-width: 93.75vw !important;
  }
}

:root {
  --thumb-size: 80%;
  --avatar-size: 17.5%;
  --thumb-offset: calc( ( 100% - var(--thumb-size) ) / 2 );
  --avatar-offset: calc( ( 100% - var(--avatar-size) ) / 2 );
  --rotation: 320deg;
}

#clippath-shadow-wrap {
  height: 0;
  width: 0;
  visibility: hidden;
}

/* Global styles */
nav {
  font-size: 0;
  line-height: 0;
}
nav ul {
  margin: 0 !important;
}
nav ul.menu-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
nav ul.menu-wrapper li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
nav ul.menu-wrapper li a {
  display: block;
  font-size: var(--wp--preset--font-size--default);
  line-height: var(--wp--preset--font-size--large);
  outline: none;
  position: relative;
  text-decoration: none;
}
nav ul.menu-wrapper li a span {
  display: inline-block;
  position: relative;
}
nav ul.menu-wrapper li a:hover {
  color: inherit !important;
}
nav ul.menu-wrapper li.contact > a {
  background: linear-gradient(0deg, rgba(212, 21, 110, 0.5) 0%, rgba(235, 121, 134, 0.5) 100%);
  backdrop-filter: blur(1rem);
  border-radius: 999rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.1);
  transition: background 0.35s cubic-bezier(0.5, 0, 0.5, 1) !important;
}
nav ul.menu-wrapper li.contact > a::after {
  display: none !important;
}
nav ul.menu-wrapper li.contact.sfHover > a, nav ul.menu-wrapper li.contact > a:hover {
  background: linear-gradient(0deg, rgba(124, 171, 78, 0.5) 0%, rgba(226, 175, 99, 0.5) 100%);
}
nav ul.menu-wrapper > li > a::after {
  content: "";
  display: block;
  position: absolute;
  background-color: currentColor;
  bottom: 0;
  height: 0.1rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), filter 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
}
@media (max-width: 900px) {
  nav ul.menu-wrapper > li > a {
    display: inline-block;
  }
}
nav ul.menu-wrapper > li > a span.yu-dumb-title {
  background: var(--wp--preset--color--black-10);
  border-radius: 0.5rem;
  bottom: 100%;
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  left: 50%;
  line-height: var(--wp--preset--font-size--default);
  opacity: 0;
  padding: 0.5rem 1rem;
  position: absolute;
  text-transform: none;
  transform: translate(-50%, 100%) scale(0);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  white-space: nowrap;
}
nav ul.menu-wrapper > li > a span.yu-dumb-title::before {
  content: "";
  display: block;
  position: absolute;
  border-top: 0.8rem solid var(--wp--preset--color--black-10);
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
}
nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title) {
  padding-right: 2.6rem;
}
nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::after {
  content: "";
  display: block;
  position: absolute;
  background-color: currentColor;
  border-radius: 0.1rem;
  height: 0.2rem;
  right: 1rem;
  top: 1.8rem;
  transform-origin: 100% 50%;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), top 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 0.8rem;
  z-index: 2;
}
nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::before {
  transform: rotate(45deg);
}
nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::after {
  transform: rotate(-225deg);
}
nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::after, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::after {
  top: 1.4rem;
}
nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::before {
  transform: rotate(-45deg);
}
nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::after, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::after {
  transform: rotate(-135deg);
}
@media (max-width: 900px) {
  nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children > a > span:not(.yu-dumb-title)::after {
    top: 1.4rem;
  }
  nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children.sfHover > a > span:not(.yu-dumb-title)::after, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::before, nav ul.menu-wrapper > li.menu-item-has-children > a:hover > span:not(.yu-dumb-title)::after {
    top: 0.8rem;
  }
}
nav ul.menu-wrapper > li.current-menu-ancestor > a::after, nav ul.menu-wrapper > li.current-menu-item > a::after, nav ul.menu-wrapper > li.current-menu-parent > a::after, nav ul.menu-wrapper > li.sfHover > a::after, nav ul.menu-wrapper > li > a:hover::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: bottom left;
}
nav ul.menu-wrapper > li.sfHover > a span.yu-dumb-title, nav ul.menu-wrapper > li > a:hover span.yu-dumb-title {
  opacity: 1;
  transform: translate(-50%, 0%) scale(1);
}
nav ul.menu-wrapper ul.sub-menu {
  background: var(--wp--preset--color--black-10);
  background: rgba(221, 221, 221, 0.8);
  backdrop-filter: blur(1rem);
  border: 0.1rem solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  left: 50%;
  margin-top: 2rem !important;
  padding: 1rem;
  position: absolute;
  top: -99999rem;
  transform: translateX(-50%);
  width: 30rem;
}
nav ul.menu-wrapper ul.sub-menu::before {
  content: "";
  display: block;
  position: absolute;
  border-bottom: 1rem solid var(--wp--preset--color--black-10);
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  left: 50%;
  top: -1rem;
  transform: translateX(-50%);
}
nav ul.menu-wrapper ul.sub-menu li {
  display: block;
  padding: 0.3rem 0;
}
nav ul.menu-wrapper ul.sub-menu li + li {
  border-top: 0.1rem solid var(--wp--preset--color--neutral-20);
}
nav ul.menu-wrapper ul.sub-menu li > a {
  text-align: center;
}
nav ul.menu-wrapper ul.sub-menu li > a > span::after {
  content: "";
  display: block;
  position: absolute;
  background-color: currentColor;
  bottom: 0;
  height: 0.1rem;
  left: 20%;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), filter 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 60%;
}
nav ul.menu-wrapper ul.sub-menu li.current-menu-item > a > span::after, nav ul.menu-wrapper ul.sub-menu li.current-menu-ancestor > a > span::after, nav ul.menu-wrapper ul.sub-menu li.current-menu-parent > a > span::after, nav ul.menu-wrapper ul.sub-menu li.sfHover > a > span::after, nav ul.menu-wrapper ul.sub-menu li > a:hover > span::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: bottom left;
}
nav ul.menu-wrapper > li.sfHover ul.sub-menu {
  display: block;
  margin-top: 0.5rem;
  top: 100%;
}

.site-header-wrap {
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(1rem);
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.1);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
  will-change: transform; /* hint voor compositor */
  z-index: 77;
}
body.admin-bar .site-header-wrap {
  top: 3.2rem;
}
body.nav-active .site-header-wrap, .site-header-wrap.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header-wrap {
    transition: none;
  }
}
.site-header--inner {
  align-items: center;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: auto auto;
  margin: 0 auto;
  max-width: 1920px;
  padding: 1rem 14rem 1rem 6rem;
  width: 100%;
}

:root {
  --logo-logo-num: 15;
  --logo-delay: 0.0125s;
  --logo-speed: 0.5s;
  --logo-main-speed: 0.5s;
}

.site-logo {
  font-size: 0;
  justify-self: start;
  line-height: 0;
}
.site-logo--main {
  display: block;
  margin: 0 0 0 -1rem;
  padding: 0rem 1rem;
  text-decoration: none;
}
.site-logo--main svg {
  fill: var(--wp--preset--color--black);
  height: 10rem;
  width: 40rem;
}
.site-logo--main svg .logo, .site-logo--main svg .cls-2 {
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--logo-main-speed);
  transition-delay: var(--logo-main-speed);
}
.site-logo--main svg .cls-3 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: var(--logo-delay);
}
.site-logo--main svg .logo-0 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 0) * var(--logo-delay));
}
.site-logo--main svg .logo-1 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 1) * var(--logo-delay));
}
.site-logo--main svg .logo-2 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 2) * var(--logo-delay));
}
.site-logo--main svg .logo-3 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 3) * var(--logo-delay));
}
.site-logo--main svg .logo-4 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 4) * var(--logo-delay));
}
.site-logo--main svg .logo-5 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 5) * var(--logo-delay));
}
.site-logo--main svg .logo-6 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 6) * var(--logo-delay));
}
.site-logo--main svg .logo-7 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 7) * var(--logo-delay));
}
.site-logo--main svg .logo-8 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 8) * var(--logo-delay));
}
.site-logo--main svg .logo-9 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 9) * var(--logo-delay));
}
.site-logo--main svg .logo-10 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 10) * var(--logo-delay));
}
.site-logo--main svg .logo-11 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 11) * var(--logo-delay));
}
.site-logo--main svg .logo-12 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 12) * var(--logo-delay));
}
.site-logo--main svg .logo-13 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 13) * var(--logo-delay));
}
.site-logo--main svg .logo-14 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: calc((var(--logo-logo-num) - 14) * var(--logo-delay));
}
.site-logo--main.hover svg .logo, .site-logo--main.hover svg .cls-2 {
  opacity: 0;
  transition-delay: calc(16 * var(--logo-delay));
}
.site-logo--main.hover svg .cls-3 {
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--logo-speed);
  transition-delay: var(--logo-main-speed);
}
.site-logo--main.hover svg .logo-0 {
  opacity: 1;
  transition-delay: calc(0 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-1 {
  opacity: 1;
  transition-delay: calc(1 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-2 {
  opacity: 1;
  transition-delay: calc(2 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-3 {
  opacity: 1;
  transition-delay: calc(3 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-4 {
  opacity: 1;
  transition-delay: calc(4 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-5 {
  opacity: 1;
  transition-delay: calc(5 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-6 {
  opacity: 1;
  transition-delay: calc(6 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-7 {
  opacity: 1;
  transition-delay: calc(7 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-8 {
  opacity: 1;
  transition-delay: calc(8 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-9 {
  opacity: 1;
  transition-delay: calc(9 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-10 {
  opacity: 1;
  transition-delay: calc(10 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-11 {
  opacity: 1;
  transition-delay: calc(11 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-12 {
  opacity: 1;
  transition-delay: calc(12 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-13 {
  opacity: 1;
  transition-delay: calc(13 * var(--logo-delay) + var(--logo-main-speed));
}
.site-logo--main.hover svg .logo-14 {
  opacity: 1;
  transition-delay: calc(14 * var(--logo-delay) + var(--logo-main-speed));
}

.primary-navigation {
  justify-self: end;
}
.primary-navigation .menu-wrapper > li + li {
  margin-left: 2rem;
}
.primary-navigation .menu-wrapper > li a {
  color: var(--wp--preset--color--black);
  padding: 1rem 3rem;
  text-transform: uppercase;
}
.primary-navigation .menu-wrapper > li a::after {
  bottom: 0;
  left: 3rem;
  width: calc(100% - 3rem - 3rem);
}
.primary-navigation .menu-wrapper > li.menu-item-has-children a::after {
  width: calc(100% - 3rem - 3rem - 2.6rem);
}

.mobile-navigation--toggle {
  /*
   height: 5rem;
   outline: none;
   position: absolute;
   right: calc( 50% - ( $max-wrapper-width / 2 ) + 6rem );
   text-decoration: none;
   top: 50%;
   transform: translateY( calc( -50% - 1rem ) );
   width: 5rem;
   z-index: 9999;
   -webkit-appearance: none;
  */
  height: 5rem;
  outline: none;
  position: fixed;
  right: calc(50% - 960px + 6rem);
  top: 7rem;
  transform: translateY(calc(-50% - 1rem));
  width: 5rem;
  z-index: 9999;
  -webkit-appearance: none;
}
.mobile-navigation--toggle svg {
  fill: var(--wp--preset--color--white);
  height: 5rem;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  transform: translate(-50%, calc(-50% - 0.4rem)) rotate(180deg);
  transform-origin: center center;
  transition: fill 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1), transform 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  top: calc(50% + 0.2rem);
  width: 5rem;
}
.mobile-navigation--toggle:hover svg {
  opacity: 1;
}
.mobile-navigation--toggle .icon-toggle {
  background-color: var(--wp--preset--color--black);
  border-radius: 999rem;
  display: block;
  height: 0.4rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.35s cubic-bezier(0.5, 0, 0.5, 1), transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 2rem;
  z-index: 100;
}
.mobile-navigation--toggle .icon-toggle--1 {
  transform: translate(-50%, calc(-50% - 0.8rem));
}
.mobile-navigation--toggle .icon-toggle--4 {
  transform: translate(-50%, calc(-50% + 0.8rem));
}
body.nav-active .mobile-navigation--toggle svg {
  fill: var(--wp--preset--color--black);
  opacity: 1;
  transform: translate(-50%, -50%) rotate(360deg);
}
body.nav-active .mobile-navigation--toggle .icon-toggle {
  background-color: var(--wp--preset--color--white);
}
body.nav-active .mobile-navigation--toggle .icon-toggle--1 {
  opacity: 0;
  transform: translate(-50%, -50%);
}
body.nav-active .mobile-navigation--toggle .icon-toggle--2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body.nav-active .mobile-navigation--toggle .icon-toggle--3 {
  transform: translate(-50%, -50%) rotate(45deg);
}
body.nav-active .mobile-navigation--toggle .icon-toggle--4 {
  opacity: 0;
  transform: translate(-50%, -50%);
}
body:not(.home).admin-bar .mobile-navigation--toggle {
  top: 10.2rem;
}

@media (max-width: 1920px) {
  .site-header--inner {
    padding: 1rem calc(4rem + 5.2083333333vw) 1rem 3.125vw;
  }
  .primary-navigation .menu-wrapper > li + li {
    margin-left: 1.0416666667vw;
  }
  .primary-navigation .menu-wrapper > li > a {
    padding: 1rem 1.5625vw;
  }
  .mobile-navigation--toggle {
    right: 3.125vw;
  }
}
@media (max-width: 1600px) {
  .site-logo--main svg {
    height: 6.25vw;
    width: 25vw;
  }
  .mobile-navigation--toggle {
    top: 4.375vw;
  }
  body.admin-bar .mobile-navigation--toggle {
    top: calc(4.375vw + 3.2rem);
  }
}
@media (max-width: 1200px) {
  .primary-navigation {
    display: none;
    visibility: hidden;
  }
}
@media (max-width: 1000px) {
  .site-logo--main svg {
    height: 6.25rem;
    width: 25rem;
  }
  .mobile-navigation--toggle {
    top: 5rem;
  }
  body.admin-bar .mobile-navigation--toggle {
    top: 8.2rem;
  }
}
.mobile-navigation {
  background: linear-gradient(0deg, rgba(238, 238, 238, 0.8) 0%, rgba(221, 221, 221, 0.8) 100%);
  backdrop-filter: blur(1rem);
  margin-top: -100%;
  min-height: 100vh;
  transition: margin 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  /*@media ( max-width: 900px ) {
    min-height: calc( 100vh - pxtovw( 130px, 900px ) );

    &--wrap {
      top: pxtovw( 130px, 900px );
    }
  }

  @media ( max-width: 600px ) {
    min-height: calc( 100vh - 8.667rem );

    &--wrap {
      top: 8.667rem;
    }
  }*/
}
.mobile-navigation--wrap {
  display: block;
  height: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 75;
}
.mobile-navigation--wrap > svg {
  height: 0;
  width: 0;
}

body.nav-active .mobile-navigation {
  margin: 0;
}
body.nav-active .mobile-navigation--wrap {
  display: block;
  min-height: 100vh;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  margin: 0;
  /*min-height: calc( 100vh - 13rem );*/
  min-height: 100vh;
  padding: 10vh 5vw;
  text-align: center;
  /*@media ( max-width: 900px ) {
    min-height: calc( 100vh - pxtovw( 130px, 900px ) );
  }

  @media ( max-width: 600px ) {
    min-height: calc( 100vh - 8.667rem );
  }*/
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li {
  align-content: center;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li > a {
  color: var(--wp--preset--color--black);
  display: block;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 125%;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li > a span {
  display: inline-block;
  padding: 2rem 5rem;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li.menu-item-has-children ul.sub-menu {
  align-items: flex-start;
  display: inline-flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  margin: 1rem 0 !important;
  padding: 0;
  /*@media ( max-width: 900px ) {
    gap: pxtovw( 10px, 900px ) calc( 1rem + pxtovw( 10px, 900px ) );

    li {
      & > a {
        span {
          padding: pxtovw( 10px, 900px ) calc( 1rem + pxtovw( 10px, 900px ) );
        }
      }
    }
  }*/
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li.menu-item-has-children ul.sub-menu li {
  flex-grow: 1;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li.menu-item-has-children ul.sub-menu li > a {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--default);
  line-height: 125%;
  text-decoration: none;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li.menu-item-has-children ul.sub-menu li > a span {
  display: inline-block;
  padding: 1rem 2rem;
}
body.nav-active .mobile-navigation .mobile-menu-wrapper > li + li::before {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--wp--preset--color--black);
  height: 0.1rem;
  left: 50%;
  opacity: 0.5;
  top: 0;
  transform: translateX(-50%);
  width: 4rem;
}

:root {
  --direction: -1; /* 1: clockwise | -1: counter clockwise */
  --sphere-wrapper-offset: 36deg; /* Degrees offset of the circles */
  --sphere-wrapper-rotation: calc( 180deg + ( 3 * 72deg ) ); /* Rotation offset */
  --hue-offset: 0; /* Degrees offset of the color hue */
  --light-size: 62vh; /* Size of the 'orbiform wrapper' effect */
  --sin-factor: 3.5vh; /* Factor of the SIN / COS */
  --orbiform-offset: 0.75vh; /* Offset function to 'match' the incorrect orbiform drawing */
  --orbiform-blur: 0.5rem; /* BLUR amount of the fake white orbiform background */
  --orbiform-size: 0.9; /* Relative size compared to the --light-size */
  --logo-phase1-size: 0.65; /* Start size of the logo */
  --light-phase3-factor: 1.5;
  --light-phase3-size: calc( var(--light-size) * 1.9 * var(--light-phase3-factor) );
  --light-phase3-left: calc( 50% - var(--light-size) / 1.9 * var(--light-phase3-factor) );
  /* ANIMATION TIMINGS */
  --speed: 0.4; /* Relative speed */
  --speed-sphere-wrapper: calc( 10s * var(--speed) );
  --speed-sphere: calc( 10s * var(--speed) );
  --speed-logo-bg: calc( 10s * var(--speed) );
  --speed-logo: calc( 4s * var(--speed) );
  --speed-logo-orbiform: calc( 4s * var(--speed) );
  --speed-intro-overlay: calc( 3s * var(--speed) );
  --delay-logo: calc( 7s * var(--speed) );
  --delay-logo-orbiform: calc( 7s * var(--speed) );
  --delay-intro-overlay: calc( 8s * var(--speed) );
}
@media screen and (orientation: portrait) {
  :root {
    --light-size: 48vh;
  }
}

/* RESET & CLEANUP FOR HOME */
body.home .site-logo--main svg .logo,
body.home .site-logo--main svg .cls-2 {
  display: none;
}
body.home.nav-active .site-header-wrap {
  background-color: var(--wp--preset--color--white);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
body.home #content {
  display: none;
}
body.home .site-footer {
  display: none;
}

@keyframes sphere-wrapper {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(calc((var(--sphere-wrapper-offset) + 10deg) * var(--direction))) scale(1);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(calc((var(--sphere-wrapper-rotation) + var(--sphere-wrapper-offset) + 36deg + 10deg) * var(--direction)));
  }
}
@keyframes sphere {
  0% {
    left: calc(50% - 0 * var(--sin-factor));
    top: calc(50% - 1 * var(--sin-factor));
  }
  10% {
    height: calc(var(--light-size));
    left: calc(50% - 0.1736481777 * var(--sin-factor));
    top: calc(50% - 0.984807753 * var(--sin-factor));
    width: calc(var(--light-size));
  }
  20% {
    height: calc(var(--light-size));
    left: calc(50% - 0 * var(--sin-factor));
    top: calc(50% - -1 * var(--sin-factor));
    width: calc(var(--light-size));
  }
  30% {
    height: calc(var(--light-size));
    left: calc(50% - -1 * var(--sin-factor));
    top: calc(50% - 0 * var(--sin-factor));
    width: calc(var(--light-size));
  }
  40% {
    height: calc(var(--light-size));
    left: calc(50% - 0 * var(--sin-factor));
    top: calc(50% - 1 * var(--sin-factor));
    width: calc(var(--light-size));
  }
  100% {
    height: var(--light-phase3-size);
    left: var(--light-phase3-left);
    top: 50%;
    width: var(--light-phase3-size);
  }
}
@keyframes logo-bg {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(calc((var(--sphere-wrapper-offset) - 144deg + 10deg) * var(--direction))) scale(0.75);
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(calc((var(--sphere-wrapper-rotation) + var(--sphere-wrapper-offset) + 36deg - 144deg + 10deg) * var(--direction))) scale(1);
  }
}
@keyframes logo-orbiform {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(calc(-90deg * var(--direction)));
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
}
#intro-wrapper {
  background: var(--wp--preset--color--white);
  display: block;
  font-size: 0;
  height: 100vh;
  left: 50vw;
  line-height: 0;
  max-width: 100vw !important;
  overflow: hidden;
  position: fixed;
  top: 50vh;
  transform: translate3d(-50%, -50%, 0);
  visibility: visible;
  width: 100vw;
  z-index: 74;
}
#intro-wrapper .sphere-wrapper {
  border-radius: 50%;
  height: 62vh;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(var(--sphere-wrapper-offset));
  width: 62vh;
  will-change: fill;
  animation: sphere-wrapper var(--speed-sphere-wrapper) ease-in-out forwards;
}
#intro-wrapper .sphere {
  background-color: hsla(calc(72 * var(--index)), 100%, 50%, 0.5);
  background: transparent;
  display: block;
  height: 2px;
  left: 50%;
  mix-blend-mode: screen;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(calc(72deg * (var(--index) + var(--hue-offset)) - 18deg));
  transform-origin: 50% 50%;
  width: 100vh;
  will-change: opacity;
}
#intro-wrapper .sphere .light {
  background-color: hsla(calc(72 * var(--index)), 100%, 50%, 0.5);
  background: radial-gradient(circle, hsla(calc(72 * var(--index)), 95%, 40%, 0.8) 0%, hsla(calc(72 * var(--index)), 100%, 50%, 0.8) 50%, hsla(calc(72 * var(--index)), 100%, 50%, 0.85) 60%, hsla(calc(72 * var(--index)), 100%, 50%, 0.9) 60.5%, hsla(calc(72 * var(--index)), 100%, 50%, 0.6) 61.5%, hsla(calc(72 * var(--index)), 100%, 50%, 0.05) 65%, hsla(calc(72 * var(--index)), 100%, 50%, 0) 66%);
  border-radius: 50%;
  display: block;
  height: var(--light-size);
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: var(--light-size);
  animation: sphere var(--speed-sphere) linear forwards;
}
#intro-wrapper .sphere#sphere_0 {
  --index: 0;
}
#intro-wrapper .sphere#sphere_1 {
  --index: 1;
}
#intro-wrapper .sphere#sphere_2 {
  --index: 2;
}
#intro-wrapper .sphere#sphere_3 {
  --index: 3;
}
#intro-wrapper .sphere#sphere_4 {
  --index: 4;
}
#intro-wrapper .sphere#sphere_5 {
  --index: 5;
}
#intro-wrapper .svg-icon.orbiform {
  fill: var(--wp--preset--color--white);
  filter: blur(var(--orbiform-blur));
  height: calc(var(--light-size) * var(--orbiform-size));
  left: 50%;
  opacity: 0;
  position: absolute;
  top: calc(50% - var(--orbiform-offset));
  transform: translate3d(-50%, -50%, 0) rotate(180deg);
  width: calc(var(--light-size) * var(--orbiform-size));
  z-index: 10;
  animation: logo-bg var(--speed-logo-bg) ease-in-out forwards;
}
#intro-wrapper .svg-icon.logo {
  fill: var(--wp--preset--color--black-90);
  height: calc(var(--light-size) * var(--logo-phase1-size));
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: calc(var(--light-size) / 3 * 2 * var(--logo-phase1-size));
  z-index: 15;
  animation: fade-in var(--speed-logo) ease-in forwards var(--delay-logo);
}
#intro-wrapper .svg-icon.logo .orbiform {
  opacity: 0;
}
#intro-wrapper .svg-icon.logo2 {
  fill: var(--wp--preset--color--black-90);
  height: calc(var(--light-size) * var(--logo-phase1-size));
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-15deg);
  transform-origin: 50% 25%;
  width: calc(var(--light-size) / 3 * 2 * var(--logo-phase1-size));
  z-index: 15;
  animation: logo-orbiform var(--speed-logo-orbiform) ease-in-out forwards var(--delay-logo-orbiform);
}
#intro-wrapper .svg-icon.logo2 .logo {
  opacity: 0;
}
#intro-wrapper .svg-icon.logo2 .orbiform {
  opacity: 1;
}
#intro-wrapper .intro-overlay {
  background: var(--wp--preset--color--white);
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  animation: fade-in var(--speed-intro-overlay) ease forwards var(--delay-intro-overlay);
}

body.home.home-has-bg #intro-wrapper {
  animation: fade-out calc(4.5s * var(--speed)) ease-out forwards calc(10.5s * var(--speed));
}
body.home #intro-background {
  font-size: 0;
  /*height: calc( 100vh - 2rem - 12rem );*/
  height: 100vh;
  left: 0;
  line-height: 0;
  position: fixed;
  /*top: calc( 2rem + 12rem );*/
  top: 0;
  width: 100vw;
  z-index: 73;
  /*@media ( max-width: 1200px ) {
    height: calc( 100vh - 2rem - pxtovw( 120px, 1200px ) );
    top: calc( 2rem + pxtovw( 120px, 1200px ) );
  }
  @media ( max-width: 800px ) {
    height: calc( 100vh - 2rem - 8rem );
    top: calc( 2rem + 8rem );
  }*/
}
body.home #intro-background img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

body.page-has-bg #content article {
  position: relative;
  z-index: 10;
}
body.page-has-bg #content .page-bg-image {
  height: 100%;
  left: calc((100vw - 192rem) / 2);
  position: absolute;
  top: 0;
  width: 192rem;
}
body.page-has-bg #content .page-bg-image img {
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: top center;
  position: absolute;
  right: 0;
  top: 0;
}

body.page-template-custom-header #contents {
  display: block;
  margin-top: -18rem;
  padding-top: 18rem;
}

#content .yugening-header-wrap {
  align-items: center;
  display: grid;
  gap: 2rem 6rem;
  grid-template-columns: 3fr 2fr;
  margin: -13rem auto 15rem;
  max-width: 144rem;
  padding: 13rem 0 0;
  position: relative;
}
#content .yugening-header-wrap .yugening-header .entry-header {
  margin: 0;
}
#content .yugening-header-wrap .yugening-header .entry-header .entry-title {
  margin: 0;
  padding: 0;
  text-align: left;
  text-transform: none;
}
#content .yugening-header-wrap .yugening-header h3.yu,
#content .yugening-header-wrap .yugening-header h3.entry-date {
  font-size: var(--wp--preset--font-size--default);
  font-weight: normal;
}
#content .yugening-header-wrap .yugening-header .entry-excerpt {
  margin-top: 3rem;
}
#content .yugening-header-wrap .yugening-header .entry-excerpt > *:last-child {
  margin-bottom: 0 !important;
}
#content .yugening-header-wrap .yugening-thumbnail {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0 0 100%;
  position: relative;
}
#content .yugening-header-wrap .yugening-thumbnail svg {
  filter: url(#clippath-shadow);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
#content .yugening-header-wrap .yugening-thumbnail svg clipPath {
  transform-origin: 50% 50%;
}
#content .yugening-header-wrap .yugening-thumbnail svg image {
  object-fit: cover;
  transition: filter 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yugening-header-wrap .yugening-thumbnail svg.yugi-thumbnail {
  height: 100%;
  width: 100%;
}
#content .yugening-header-wrap .yugening-readmore {
  grid-column: 1/span 2;
  grid-row: 2;
  justify-self: center;
  font-size: 0;
  height: 6rem;
  line-height: 0;
  position: relative;
  width: 6rem;
}
#content .yugening-header-wrap .yugening-readmore svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transition: top 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yugening-header-wrap .yugening-readmore svg.bg {
  fill: var(--wp--preset--color--black-10);
  height: 5rem;
  transform: translate(-50%, -50%) rotate(180deg);
  width: 5rem;
  z-index: 1;
}
#content .yugening-header-wrap .yugening-readmore svg.bg .reference,
#content .yugening-header-wrap .yugening-readmore svg.bg .orbiform9 {
  display: none;
}
#content .yugening-header-wrap .yugening-readmore svg.arrow {
  fill: var(--wp--preset--color--black);
  height: 2rem;
  transform: translate(-50%, -50%);
  width: 2rem;
  z-index: 2;
}
#content .yugening-header-wrap .yugening-readmore:hover svg.arrow {
  top: calc(50% + 0.5rem);
}
#content .yugening-header-wrap #clippath-shadow-wrap {
  grid-column: 1/span 2;
  grid-row: 2;
}
#content .yugening-header-wrap:not(.has-thumbnail) {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}
#content .yugening-header-wrap:not(.has-thumbnail) .yugening-header {
  padding: 5vw 0;
}
#content .yugening-header-wrap:not(.has-thumbnail) .yugening-readmore {
  grid-column: 1;
}
@media (max-width: 900px) {
  #content .yugening-header-wrap {
    grid-template-columns: 1fr;
  }
  #content .yugening-header-wrap .yugening-header {
    grid-row: 2;
  }
  #content .yugening-header-wrap .yugening-thumbnail {
    grid-row: 1;
    height: 32rem;
    padding: 0;
    width: 32rem;
  }
  #content .yugening-header-wrap #clippath-shadow-wrap,
  #content .yugening-header-wrap .yugening-readmore {
    grid-column: 1;
    grid-row: 3;
  }
}
@media (max-width: 360px) {
  #content .yugening-header-wrap .yugening-thumbnail {
    height: 88vw;
    width: 88vw;
  }
}

body.single-yugis #content .yugening-header-wrap .yugening-thumbnail.has-avatar svg.yugi-thumbnail {
  height: var(--thumb-size);
  width: var(--thumb-size);
  left: calc(50% + sin(var(--rotation) + 180deg) * var(--thumb-offset));
  top: calc(50% + cos(var(--rotation) + 180deg) * var(--thumb-offset));
}
body.single-yugis #content .yugening-header-wrap .yugening-thumbnail.has-avatar svg.yugi-avatar {
  height: var(--avatar-size);
  width: var(--avatar-size);
  left: calc(50% + sin(var(--rotation)) * var(--avatar-offset));
  top: calc(50% + cos(var(--rotation)) * var(--avatar-offset));
}
body.single-yugis #content .yugening-header-wrap .yugening-header .entry-excerpt p {
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
}

.yugening-video-track {
  min-height: 100vh;
  margin: 0 auto;
  max-width: 120rem;
  position: sticky;
  top: 0;
  width: 100%;
}
.yugening-video-track-wrap {
  font-size: 0;
  line-height: 0;
  margin: 0 0 3rem;
  min-height: 250vh;
  position: relative;
}
.yugening-video-track-wrap .video-anchor {
  background: transparent;
  bottom: 100vh;
  display: block;
  height: 0.1rem;
  left: 0;
  position: absolute;
  width: 1rem;
  z-index: -100;
}
.yugening-video-track .yugening-video {
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0 0 56.25%;
  transform: scale(0.8);
}
.yugening-video-track .yugening-video-wrap {
  align-items: center;
  display: grid;
  height: 100vh;
  padding: 13rem 0 0;
}
@media (max-width: 1200px) {
  .yugening-video-track .yugening-video-wrap {
    padding: 10.8333333333vw 0 0;
  }
}
.yugening-video-track .yugening-video a {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  text-decoration: none;
  top: 0;
  width: 100%;
}
.yugening-video-track .yugening-video a img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.yugening-video-track .yugening-video a::before {
  content: "";
  display: block;
  position: absolute;
  background: var(--wp--preset--color--black-90);
  height: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
  z-index: 5;
}
.yugening-video-track .yugening-video a .button {
  display: block;
  height: 10rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10rem;
  z-index: 10;
}
.yugening-video-track .yugening-video a .button svg {
  left: 50%;
  position: absolute;
  top: 50%;
}
.yugening-video-track .yugening-video a .button svg.bg {
  fill: var(--wp--preset--color--white);
  height: 100%;
  opacity: 0.8;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
  z-index: 1;
}
.yugening-video-track .yugening-video a .button svg.bg .reference,
.yugening-video-track .yugening-video a .button svg.bg .orbiform9 {
  fill: none;
}
.yugening-video-track .yugening-video a .button svg.play {
  fill: var(--wp--preset--color--black);
  height: 4rem;
  transform: translate(-50%, -50%);
  width: 4rem;
  z-index: 2;
}
.yugening-video-track .yugening-video a:hover::before {
  opacity: 0.4;
}
.yugening-video-track .yugening-video a:hover .button svg.bg {
  opacity: 1;
}
.yugening-video-track .yugening-video-wrap.short {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}
.yugening-video-track .yugening-video-wrap.short .yugening-video {
  padding: 0 0 177.78%;
}

.yugening-content-wrap {
  margin-top: -18rem;
  padding-top: 18rem;
}

.entry-aside {
  margin-top: -18rem;
  padding-top: 18rem;
}

section.single-section.yugening-projects, section.single-section.yugening-posts, section.single-section.yugening-yugiwiki {
  padding-top: 18rem;
}
section.single-section.yugening-projects .entry-header, section.single-section.yugening-posts .entry-header, section.single-section.yugening-yugiwiki .entry-header {
  padding: 3rem 0 10rem;
  text-align: center;
}

#single-section-nav {
  font-size: 0;
  line-height: 0;
  position: fixed;
  right: 3rem;
  top: calc((100vh + 13rem) / 2);
  transform: translateY(-50%);
  z-index: 99999;
}
#single-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
#single-section-nav ul li {
  display: block;
}
#single-section-nav ul li + li {
  margin-top: 0.5rem;
}
#single-section-nav ul li a {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: block;
  height: 4rem;
  position: relative;
  text-decoration: none;
  width: 4rem;
}
#single-section-nav ul li a svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: all 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#single-section-nav ul li a svg .reference,
#single-section-nav ul li a svg .orbiform9 {
  display: none;
}
#single-section-nav ul li a svg.in {
  fill: var(--wp--preset--color--black-20);
  height: 1.2rem;
  width: 1.2rem;
  z-index: 2;
}
#single-section-nav ul li a svg.out {
  fill: var(--wp--preset--color--black);
  height: 1.4rem;
  width: 1.4rem;
  z-index: 1;
}
#single-section-nav ul li a span.label {
  background-color: var(--wp--preset--color--black-10);
  border-radius: 0.5rem;
  display: inline-block;
  padding: 0.5rem 1rem;
}
#single-section-nav ul li a span.label-wrap {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--preset--font-size--default);
  overflow: hidden;
  position: absolute;
  right: 4rem;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  transition: width 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 0;
}
#single-section-nav ul li a.current svg {
  transform: translate(-50%, -50%) rotate(90deg);
}
#single-section-nav ul li a.current svg.in {
  fill: var(--wp--preset--color--white);
  height: 1.6rem;
  width: 1.6rem;
  z-index: 2;
}
#single-section-nav ul li a.current svg.out {
  fill: var(--wp--preset--color--black);
  height: 2rem;
  width: 2rem;
  z-index: 1;
}
#single-section-nav ul li a:hover span.label-wrap {
  width: 15rem;
}
@media (max-width: 1200px) {
  #single-section-nav {
    bottom: 3rem;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  #single-section-nav ul li {
    display: inline-block;
    vertical-align: top;
  }
  #single-section-nav ul li + li {
    margin-left: 0.5rem;
    margin-top: 0;
  }
  #single-section-nav ul li a span.label-wrap {
    bottom: 100%;
    left: 50%;
    right: auto;
    text-align: center;
    top: auto;
    transform: translateX(-50%);
  }
}
@media (pointer: none), (pointer: coarse), (hover: none) {
  #single-section-nav ul li a span {
    display: none;
  }
}

body.single-project #content .yu-archive-wrap {
  margin-top: calc(5rem + 5vw);
  padding-top: calc(5rem + 5vw);
}

.tribbles-scroll {
  align-content: center;
  display: grid;
  position: relative;
  width: 100%;
  z-index: 0;
}
.tribbles-scroll-container {
  margin: 0 auto;
  max-width: 144rem;
  padding: 10rem 0;
  width: 100%;
}
.tribbles-scroll-container .anchor {
  display: block;
}
.tribbles-scroll .tribbles-content-container {
  position: relative;
  z-index: 10;
}
.tribbles-scroll .tribbles-content > *:last-child {
  margin: 0;
}
.tribbles-scroll .tribbles-items ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10;
}
.tribbles-scroll .tribbles-items ul li a {
  display: block;
  font-size: 0;
  height: 6rem;
  line-height: 0;
  position: relative;
  text-decoration: none !important;
  width: 6rem;
  z-index: 20;
}
.tribbles-scroll .tribbles-items ul li a figure {
  height: 100%;
  position: relative;
  width: 100%;
}
.tribbles-scroll .tribbles-items ul li a figure img {
  height: 100%;
  left: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}
.tribbles-scroll .tribbles-items ul li a span {
  background: var(--wp--preset--color--black-10);
  border-radius: 0.5rem;
  color: var(--wp--preset--color--black);
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--preset--font-size--normal);
  padding: 0.5rem 1rem;
  text-align: center;
}

.tribbles-scroll-container:not(.js) .tribbles-scroll {
  gap: 2rem 6rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1200px) {
  .tribbles-scroll-container:not(.js) .tribbles-scroll {
    grid-template-columns: 1fr;
  }
}
.tribbles-scroll-container:not(.js) .tribbles-items {
  align-self: center;
  justify-self: center;
}
.tribbles-scroll-container:not(.js) .tribbles-items ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
}
.tribbles-scroll-container:not(.js) .tribbles-items ul li a span {
  display: none;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  top: calc(100% + 1rem);
}
.tribbles-scroll-container:not(.js) .tribbles-items ul li a:hover span {
  display: block;
}
.tribbles-scroll-container.js {
  height: 250vh;
  position: relative;
}
.tribbles-scroll-container.js .tribbles-scroll {
  height: calc(100vh - 18rem);
  position: sticky;
  top: 18rem;
}
.tribbles-scroll-container.js .tribbles-content-container {
  margin-bottom: 20rem;
  width: calc(50% - 3rem);
}
.tribbles-scroll-container.js .tribbles-items {
  height: 100%;
  left: calc(50% - 50vw);
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 20;
}
.tribbles-scroll-container.js .tribbles-items::before {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, white 80%, white 100%);
  height: 10vh;
  left: calc(50% - 50vw);
  top: 0;
  width: 100vw;
  z-index: 50;
}
.tribbles-scroll-container.js .tribbles-items li.tribble {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.tribbles-scroll-container.js .tribbles-items li.tribble a span {
  background: #f3f3f3;
  position: absolute;
  right: calc(100% + 3rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.tribbles-scroll-container.js .tribbles-items .path {
  border-radius: 50%;
  border: 1px dashed var(--wp--preset--color--black-10);
  bottom: 10rem;
  display: block;
  height: 62vh;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  z-index: 0;
}
@media (max-width: 1200px) {
  .tribbles-scroll-container.js .tribbles-content-container {
    margin-bottom: 0;
    width: calc(100% - 20rem);
  }
  .tribbles-scroll-container.js .tribbles-items::before {
    height: 3rem;
  }
}

/* TODO */
/*.site-footer {
  align-items: center;
  display: grid;
  font-size: var(--wp--preset--font-size--small);
  grid-gap: 2rem 12rem;
  grid-template-columns: repeat( 2, 1fr );
  margin: 0 auto;
  max-width: 144rem;
  padding: 4rem;

  p,
  ul {
    margin: 0;
    white-space: nowrap;
  }

  a {
    color: inherit;
    position: relative;
    text-decoration: none;

    &::after {
      @include before-after;

      background-color: currentColor;
      bottom: 0;
      height: 0.1rem;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform $transition, filter $transition, opacity $transition;
      width: calc( 100% );
    }
  }

  .current-menu-ancestor > a,
  .current-menu-item > a,
  .current-menu-parent > a,
  .sfHover > a,
  a:hover {
    &::after {
      opacity: 1;
      transform: scaleX(1);
      transform-origin: bottom left;
    }
  }

  section.vcard {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    grid-gap: 1rem 4rem;
    justify-items: end;
    justify-self: start;
  }
  section.legal {
    display: grid;
    grid-gap: 1rem 4rem;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    justify-self: end;

    nav {
      & > ul {
        & > li {
          & + li {
            margin-left: 4rem;
          }

          a {
            font-size: var(--wp--preset--font-size--small);
            line-height: percentage(5/3);
          }
        }
      }
    }
  }

  @media ( max-width: 1440px ) {
    grid-gap: 1rem pxtovw( 120px, 1440px );
    max-width: 80rem;
    padding: 4rem pxtovw( 40px, 1440px );

    section.vcard {
      grid-gap: 1rem pxtovw( 40px, 1440px );

      p.adr {
        grid-column: 1 / span 2;
        grid-row: 1;
      }
      p.tel,
      p.email {
        grid-row: 2;
      }
    }

    section.legal {
      p.vat {
        grid-column: 1;
        grid-row: 1;
      }
      nav {
        grid-column: 1;
        grid-row: 2;

        & > ul {
          & > li {
            & + li {
              margin-left: pxtovw( 40px, 1440px );
            }
          }
        }
      }
    }
  }

  @media ( max-width: 768px ) {
    grid-template-columns: 1fr;

    section.vcard,
    section.legal {
      justify-self: center;
      text-align: center;

      p.vat-number {
        text-align: center !important;
      }
    }
  }
}*/
#colophon ul.breadcrumb {
  margin: 5rem auto 10rem;
  text-align: center;
}

/**
  Anchors
 */
/**
  Paragraph
 */
p {
  margin: 0 0 3rem;
  text-align: justify;
}

/**
  Heading
 */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 3rem;
}

/**
  Lists
 */
/**
  Quote
 */
/**
  Code block
 */
/**
  Preformatted text
 */
/**
  Pullquote
 */
/**
  Table
 */
figure.wp-block-table {
  overflow-x: auto;
}
/**
  Verse
 */
/**********************
** WP media
***********************/
/**
  Image
 */
.wp-block-image,
figure.wp-block-image {
  position: relative;
}
.wp-block-image.placeholder,
figure.wp-block-image.placeholder {
  background-color: var(--wp--preset--color--black-10);
}
.wp-block-image.placeholder svg,
figure.wp-block-image.placeholder svg {
  fill: var(--wp--preset--color--black);
  height: 50%;
  left: 50%;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}
.wp-block-image.aligncenter,
figure.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-image.alignleft,
figure.wp-block-image.alignleft {
  margin-right: auto;
}
.wp-block-image.alignright,
figure.wp-block-image.alignright {
  margin-left: auto;
}

/**
  Gallery
 */
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link) {
  display: block;
  overflow: hidden;
  position: relative;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link) img {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 0;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link)::before {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--wp--preset--color--white);
  height: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
  z-index: 5;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link)::after {
  display: none !important;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link):hover img {
  transform: scale(1.15);
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link):hover::before {
  opacity: 0.5;
}
.wp-block-gallery.has-nested-images .wp-block-image figcaption.wp-element-caption {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.2;
  padding: 1rem 2rem 0.5rem 1rem;
  position: absolute;
  text-align: center;
  text-shadow: none;
  width: auto;
  z-index: 100;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image img {
  aspect-ratio: 1/1;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .mask {
  background: url(../img/mask.png) center center no-repeat;
  background-size: 100% 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption {
  background: transparent;
  bottom: auto;
  left: 10%;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  display: inline-block;
  padding: 1rem;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span a {
  background: transparent !important;
  color: inherit;
  display: inline;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span a::before {
  display: none !important;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a + .wp-element-caption {
  cursor: pointer;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a + .wp-element-caption span {
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover a::before {
  opacity: 0.5;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover a img {
  transform: scale(1.15);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover > a + .wp-element-caption span,
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a:hover + .wp-element-caption span {
  opacity: 1;
  transform: scale(1);
}

/**
  Icons
 */
/**
  Audio
 */
/**
  Cover
 */
/**
  File
 */
/**
  Media & text
 */
/**
  Media & text
 */
.wp-block-media-text {
  grid-gap: 3rem 6rem;
  margin-bottom: 6rem;
  margin-top: 0;
}
.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}
.wp-block-media-text .wp-block-media-text__content > *:last-child {
  margin-bottom: 0;
}
@media (max-width: 1920px) {
  .wp-block-media-text {
    grid-gap: 3rem 3.125vw;
  }
}
@media (max-width: 900px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    max-width: 30rem;
    width: 100%;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

/**
  Video
 */
/**********************
** WP design
***********************/
#content {
  /**
    Buttons
   */
  /**
    Columns
   */
  /**
    Group
   */
  /**
    Row
   */
  /**
    More
   */
  /**
    Page break
   */
  /**
    Seperator
   */
  /**
    Spacer
   */
  /**
    Navigation
   */
}
#content a:not(.wp-block-button__link) {
  color: inherit;
  text-decoration: underline;
}
#content a:not(.wp-block-button__link):hover {
  text-decoration: none;
}
#content a:not(.wp-block-button__link).return--link {
  padding-left: 2rem;
  position: relative;
  text-decoration: none;
}
#content a:not(.wp-block-button__link).return--link::before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.2rem solid currentColor;
  border-top: 0.2rem solid currentColor;
  height: 0.8rem;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0.8rem;
}
#content a:not(.wp-block-button__link).return--link::after {
  transform-origin: bottom left;
}
#content a:not(.wp-block-button__link).return--link:hover {
  text-decoration: underline;
}
#content .wp-block-buttons {
  margin-bottom: 3rem;
}
#content .wp-block-buttons:last-child {
  margin-bottom: 0;
}
#content .wp-block-columns {
  gap: 6rem;
}
:where(#content .wp-block-columns.has-background) {
  padding: 3rem;
}
@media (max-width: 1920px) {
  #content .wp-block-columns {
    gap: 3.125vw;
  }
}
:where(#content .wp-block-group.is-style-glass-left), :where(#content .wp-block-group.is-style-glass-right) {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
:where(#content .wp-block-group.is-style-glass-left)[class*=-background-color], :where(#content .wp-block-group.is-style-glass-right)[class*=-background-color] {
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.1);
}
:where(#content .wp-block-group.is-style-glass-left).has-white-background-color, :where(#content .wp-block-group.is-style-glass-right).has-white-background-color {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-10-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-10-background-color {
  background-color: rgba(221, 221, 221, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-20-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-20-background-color {
  background-color: rgba(213, 213, 213, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-30-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-30-background-color {
  background-color: rgba(203, 203, 203, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-40-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-40-background-color {
  background-color: rgba(190, 190, 190, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-50-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-50-background-color {
  background-color: rgba(174, 174, 174, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-60-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-60-background-color {
  background-color: rgba(154, 154, 154, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-70-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-70-background-color {
  background-color: rgba(129, 129, 129, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-80-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-80-background-color {
  background-color: rgba(98, 98, 98, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-90-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-90-background-color {
  background-color: rgba(59, 59, 59, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-background-color {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
#content .wp-block-separator {
  border-bottom-width: 0.1rem;
  margin-bottom: 6rem;
  margin-top: 6rem;
  width: 20rem;
}

/**
  Anchors
 */
/**
  Paragraph
 */
p {
  margin: 0 0 3rem;
  text-align: justify;
}

/**
  Heading
 */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 3rem;
}

/**
  Lists
 */
/**
  Quote
 */
/**
  Code block
 */
/**
  Preformatted text
 */
/**
  Pullquote
 */
/**
  Table
 */
figure.wp-block-table {
  overflow-x: auto;
}
/**
  Verse
 */
/**********************
** WP media
***********************/
/**
  Image
 */
.wp-block-image,
figure.wp-block-image {
  position: relative;
}
.wp-block-image.placeholder,
figure.wp-block-image.placeholder {
  background-color: var(--wp--preset--color--black-10);
}
.wp-block-image.placeholder svg,
figure.wp-block-image.placeholder svg {
  fill: var(--wp--preset--color--black);
  height: 50%;
  left: 50%;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}
.wp-block-image.aligncenter,
figure.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-image.alignleft,
figure.wp-block-image.alignleft {
  margin-right: auto;
}
.wp-block-image.alignright,
figure.wp-block-image.alignright {
  margin-left: auto;
}

/**
  Gallery
 */
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link) {
  display: block;
  overflow: hidden;
  position: relative;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link) img {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 0;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link)::before {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--wp--preset--color--white);
  height: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
  z-index: 5;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link)::after {
  display: none !important;
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link):hover img {
  transform: scale(1.15);
}
.wp-block-gallery.has-nested-images .wp-block-image a:not(.return--link):hover::before {
  opacity: 0.5;
}
.wp-block-gallery.has-nested-images .wp-block-image figcaption.wp-element-caption {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.2;
  padding: 1rem 2rem 0.5rem 1rem;
  position: absolute;
  text-align: center;
  text-shadow: none;
  width: auto;
  z-index: 100;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image img {
  aspect-ratio: 1/1;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .mask {
  background: url(../img/mask.png) center center no-repeat;
  background-size: 100% 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption {
  background: transparent;
  bottom: auto;
  left: 10%;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  display: inline-block;
  padding: 1rem;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span a {
  background: transparent !important;
  color: inherit;
  display: inline;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image .wp-element-caption span a::before {
  display: none !important;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a + .wp-element-caption {
  cursor: pointer;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a + .wp-element-caption span {
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover a::before {
  opacity: 0.5;
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover a img {
  transform: scale(1.15);
}
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image.hover > a + .wp-element-caption span,
.wp-block-gallery.has-nested-images.is-style-orbiforms .wp-block-image a:hover + .wp-element-caption span {
  opacity: 1;
  transform: scale(1);
}

/**
  Icons
 */
/**
  Audio
 */
/**
  Cover
 */
/**
  File
 */
/**
  Media & text
 */
/**
  Media & text
 */
.wp-block-media-text {
  grid-gap: 3rem 6rem;
  margin-bottom: 6rem;
  margin-top: 0;
}
.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}
.wp-block-media-text .wp-block-media-text__content > *:last-child {
  margin-bottom: 0;
}
@media (max-width: 1920px) {
  .wp-block-media-text {
    grid-gap: 3rem 3.125vw;
  }
}
@media (max-width: 900px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    max-width: 30rem;
    width: 100%;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

/**
  Video
 */
/**********************
** WP design
***********************/
#content {
  /**
    Buttons
   */
  /**
    Columns
   */
  /**
    Group
   */
  /**
    Row
   */
  /**
    More
   */
  /**
    Page break
   */
  /**
    Seperator
   */
  /**
    Spacer
   */
  /**
    Navigation
   */
}
#content a:not(.wp-block-button__link) {
  color: inherit;
  text-decoration: underline;
}
#content a:not(.wp-block-button__link):hover {
  text-decoration: none;
}
#content a:not(.wp-block-button__link).return--link {
  padding-left: 2rem;
  position: relative;
  text-decoration: none;
}
#content a:not(.wp-block-button__link).return--link::before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.2rem solid currentColor;
  border-top: 0.2rem solid currentColor;
  height: 0.8rem;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0.8rem;
}
#content a:not(.wp-block-button__link).return--link::after {
  transform-origin: bottom left;
}
#content a:not(.wp-block-button__link).return--link:hover {
  text-decoration: underline;
}
#content .wp-block-buttons {
  margin-bottom: 3rem;
}
#content .wp-block-buttons:last-child {
  margin-bottom: 0;
}
#content .wp-block-columns {
  gap: 6rem;
}
:where(#content .wp-block-columns.has-background) {
  padding: 3rem;
}
@media (max-width: 1920px) {
  #content .wp-block-columns {
    gap: 3.125vw;
  }
}
:where(#content .wp-block-group.is-style-glass-left), :where(#content .wp-block-group.is-style-glass-right) {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
:where(#content .wp-block-group.is-style-glass-left)[class*=-background-color], :where(#content .wp-block-group.is-style-glass-right)[class*=-background-color] {
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.1);
}
:where(#content .wp-block-group.is-style-glass-left).has-white-background-color, :where(#content .wp-block-group.is-style-glass-right).has-white-background-color {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-10-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-10-background-color {
  background-color: rgba(221, 221, 221, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-20-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-20-background-color {
  background-color: rgba(213, 213, 213, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-30-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-30-background-color {
  background-color: rgba(203, 203, 203, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-40-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-40-background-color {
  background-color: rgba(190, 190, 190, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-50-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-50-background-color {
  background-color: rgba(174, 174, 174, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-60-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-60-background-color {
  background-color: rgba(154, 154, 154, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-70-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-70-background-color {
  background-color: rgba(129, 129, 129, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-80-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-80-background-color {
  background-color: rgba(98, 98, 98, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-90-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-90-background-color {
  background-color: rgba(59, 59, 59, 0.3) !important;
}
:where(#content .wp-block-group.is-style-glass-left).has-black-background-color, :where(#content .wp-block-group.is-style-glass-right).has-black-background-color {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
#content .wp-block-separator {
  border-bottom-width: 0.1rem;
  margin-bottom: 6rem;
  margin-top: 6rem;
  width: 20rem;
}

/* ELEMENTS */
figure.entry-thumbnail,
figure.entry-avatar {
  /*background: lightgrey;
  border-radius: 50%;*/
  font-size: 0;
  height: 12rem;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  width: 12rem;
}
figure.entry-thumbnail svg,
figure.entry-avatar svg {
  filter: url(#clippath-shadow);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-style: preserve-3d;
  width: auto;
  will-change: transform;
}
figure.entry-thumbnail svg clipPath,
figure.entry-thumbnail svg g,
figure.entry-avatar svg clipPath,
figure.entry-avatar svg g {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
figure.entry-thumbnail svg image,
figure.entry-avatar svg image {
  object-fit: cover;
  transform-origin: 50% 50%;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
figure.entry-thumbnail svg image:not(.is-loaded),
figure.entry-avatar svg image:not(.is-loaded) {
  opacity: 0;
}
figure.entry-thumbnail svg image:is-loaded,
figure.entry-avatar svg image:is-loaded {
  opacity: 1;
}

#content figure.entry-thumbnail-png {
  background: white;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.3rem var(--wp--preset--color--white);
  font-size: 0;
  height: auto;
  line-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0 0 100% !important;
  position: relative;
  width: 100%;
}
#content figure.entry-thumbnail-png img {
  border-radius: 50%;
  height: calc(100% - 0.3rem);
  left: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 0.3rem);
  z-index: 5;
}
#content figure.entry-thumbnail-png span.mask {
  background: url(../img/mask.png) center center no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
#content figure.entry-thumbnail-png span.gradient {
  border-radius: 50%;
  display: block;
  height: calc(100% - 0.3rem);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: calc(100% - 0.3rem);
  z-index: 0;
}

#content .entry-taxonomy {
  margin: 0 calc(50% - 50vw + 3rem) 6rem;
  max-width: calc(100vw - 3rem - 3rem) !important;
  padding: 0;
  text-align: center;
  transition: background 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: auto;
}
#content .entry-taxonomy--list.menu-wrapper {
  background-color: rgba(204, 204, 204, 0.25);
  backdrop-filter: blur(1rem);
  border: 0.1rem solid rgba(255, 255, 255, 0.15);
  border-radius: 3.5rem;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 1rem 3rem;
}
#content .entry-taxonomy.fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 2rem;
  z-index: 9999;
}
#content .entry-taxonomy li.taxonomy {
  padding: 0.5rem;
  position: relative;
  text-align: center;
}
#content .entry-taxonomy li.taxonomy a {
  color: var(--wp--preset--color--black);
}
#content .entry-taxonomy li.taxonomy.current-menu-item > a::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: bottom left;
}

nav.pagination {
  margin: calc(3vw + 3rem) auto 6rem;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
}
nav.pagination h2.screen-reader-text {
  display: none;
}
nav.pagination .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
nav.pagination .nav-links .page-numbers {
  display: block;
  height: 4rem;
  position: relative;
  text-decoration: none;
  width: 4rem;
  z-index: 10;
}
nav.pagination .nav-links .page-numbers span {
  display: none;
}
nav.pagination .nav-links .page-numbers svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  transition: all 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
nav.pagination .nav-links .page-numbers svg .reference,
nav.pagination .nav-links .page-numbers svg .orbiform9 {
  display: none;
}
nav.pagination .nav-links .page-numbers svg.in {
  fill: var(--wp--preset--color--black-20);
  height: 1.6rem;
  width: 1.6rem;
  z-index: 2;
}
nav.pagination .nav-links .page-numbers svg.out {
  fill: var(--wp--preset--color--black);
  height: 1.8rem;
  width: 1.8rem;
  z-index: 1;
}
nav.pagination .nav-links .page-numbers.current svg {
  transform: translate(-50%, -50%) rotate(0deg);
}
nav.pagination .nav-links .page-numbers.current svg.in {
  fill: var(--wp--preset--color--white);
  height: 2.2rem;
  width: 2.2rem;
  z-index: 2;
}
nav.pagination .nav-links .page-numbers.current svg.out {
  fill: var(--wp--preset--color--black);
  height: 2.4rem;
  width: 2.4rem;
  z-index: 1;
}
nav.pagination .nav-links a.page-numbers:hover svg {
  transform: translate(-50%, -50%) rotate(90deg);
}

.scroll-to-top {
  display: block;
  height: 6rem;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  width: 6rem;
}
.scroll-to-top-wrap {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(1rem);
  border-radius: 50%;
  bottom: 3rem;
  font-size: 0;
  line-height: 0;
  position: fixed;
  right: 3rem;
}
@media (max-width: 900px) {
  .scroll-to-top-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
.scroll-to-top svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transition: top 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
.scroll-to-top svg.bg {
  fill: var(--wp--preset--color--black-10);
  height: 5rem;
  transform: translate(-50%, -50%) rotate(180deg);
  width: 5rem;
  z-index: 1;
}
.scroll-to-top svg.bg .reference,
.scroll-to-top svg.bg .orbiform9 {
  display: none;
}
.scroll-to-top svg.arrow {
  fill: var(--wp--preset--color--black);
  height: 2rem;
  transform: translate(-50%, -50%);
  width: 2rem;
  z-index: 2;
}
.scroll-to-top:hover svg.arrow {
  top: calc(50% - 0.5rem);
}

.yu-siblings-navigation {
  font-size: 0;
  line-height: 0;
}
.yu-siblings-navigation a {
  display: block;
  height: 6rem;
  margin: 0 auto;
  position: fixed;
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  width: 6rem;
}
.yu-siblings-navigation a svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transition: top 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
.yu-siblings-navigation a svg.bg {
  fill: var(--wp--preset--color--black-10);
  height: 5rem;
  width: 5rem;
  z-index: 1;
}
.yu-siblings-navigation a svg.bg .reference,
.yu-siblings-navigation a svg.bg .orbiform9 {
  display: none;
}
.yu-siblings-navigation a svg.arrow {
  fill: var(--wp--preset--color--black);
  height: 2rem;
  transform: translate(-50%, -50%);
  width: 2rem;
  z-index: 2;
}
.yu-siblings-navigation a.prev {
  left: 3rem;
}
.yu-siblings-navigation a.prev svg.bg {
  transform: translate(-50%, -50%) rotate(90deg);
}
.yu-siblings-navigation a.next {
  right: 3rem;
}
.yu-siblings-navigation a.next svg.bg {
  transform: translate(-50%, -50%) rotate(-90deg);
}
@media (max-width: 1200px) {
  .yu-siblings-navigation a.prev {
    left: 2.5vw;
  }
  .yu-siblings-navigation a.next {
    right: 2.5vw;
  }
}
@media (max-width: 900px) {
  .yu-siblings-navigation a {
    bottom: 3rem;
    top: auto;
    transform: translateX(-50%);
  }
  .yu-siblings-navigation a.prev {
    left: calc(50% - 7.5rem);
  }
  .yu-siblings-navigation a.next {
    right: auto;
    left: calc(50% + 7.5rem);
  }
}

ul.breadcrumb {
  margin-bottom: 9rem;
  padding-inline-start: 0;
}
ul.breadcrumb li {
  color: var(--wp--preset--color--black-60);
  display: inline-block;
  position: relative;
  vertical-align: top;
}
ul.breadcrumb li + li::before {
  content: ">";
  margin: 0 0.5rem;
}
ul.breadcrumb li a,
ul.breadcrumb li span {
  color: inherit;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--preset--font-size--default);
}
ul.breadcrumb li a {
  position: relative;
  text-decoration: none;
}
ul.breadcrumb li a::after {
  content: "";
  display: block;
  position: absolute;
  background-color: currentColor;
  bottom: 0;
  height: 0.1rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), filter 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  width: 100%;
}

.iframe {
  border: 0 none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.iframe-wrap {
  background: var(--wp--preset--color--black-20);
  height: 0;
  overflow: hidden;
  padding: 0 0 50%;
  position: relative;
  width: 100%;
}

.orbiforms {
  display: grid;
  font-size: 0;
  grid-gap: 1rem;
  grid-template-columns: repeat(30, 1fr);
  line-height: 0;
}
@media (max-width: 960px) {
  .orbiforms {
    grid-template-columns: repeat(15, 1fr);
  }
  .orbiforms figure:nth-child(2n) {
    display: none;
  }
}
@media (max-width: 600px) {
  .orbiforms {
    grid-template-columns: repeat(10, 1fr);
  }
  .orbiforms figure:nth-child(2n),
  .orbiforms figure:nth-child(3n) {
    display: none;
  }
}
.orbiforms figure img {
  height: auto;
  width: 100%;
}

#content .yu-archive {
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
}
#content .yu-archive article {
  position: relative;
}
#content .yu-archive article + article {
  margin-top: 6rem;
}
#content .yu-archive article a {
  background: transparent;
  border-radius: 0.5rem;
  display: grid;
  gap: 1rem 3rem;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content max-content;
  padding: 1rem 2rem 1rem 1rem;
  text-decoration: none;
}
#content .yu-archive article a .entry-header {
  color: var(--wp--preset--color--black);
  grid-column: 2;
  grid-row: 1;
  max-width: 100%;
  padding: 0;
  text-align: left;
}
#content .yu-archive article a .entry-header h2,
#content .yu-archive article a .entry-header h3 {
  color: inherit;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}
#content .yu-archive article a .entry-header h2 {
  font-size: var(--wp--preset--font-size--large);
}
#content .yu-archive article a .entry-header h3 {
  font-size: var(--wp--preset--font-size--normal);
  margin-top: 0.25rem;
}
#content .yu-archive article a .entry-excerpt {
  grid-column: 2;
  grid-row: 2;
}
#content .yu-archive article a .entry-excerpt > *:last-child {
  margin: 0;
}
#content .yu-archive article a .entry-thumbnail,
#content .yu-archive article a .entry-thumbnail-png {
  align-self: center;
  grid-column: 1;
  grid-row: 1/span 2;
}
#content .yu-archive article a .entry-thumbnail-png {
  height: 12rem;
  margin: 0;
  width: 12rem;
}
#content .yu-archive article a:hover {
  background: linear-gradient(90deg, var(--wp--preset--color--white) 20%, var(--wp--preset--color--black-10) 100%);
}
#content .yu-archive article:not(.has-excerpt) a {
  grid-template-rows: 1fr;
}
#content .yu-archive article:not(.has-excerpt) a header {
  align-self: center;
}
#content .yu-archive article:not(.has-excerpt) a figure {
  grid-row: 1;
}

#content .yu-archive-project {
  display: grid;
  gap: 10rem 2rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  max-width: 100vw;
  overflow: hidden;
  padding-top: 5em;
}
#content .yu-archive-project article.project + article.project {
  margin-top: 0;
}
#content .yu-archive-project article.project a {
  background: transparent !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: 0;
}
#content .yu-archive-project article.project a .entry-header {
  grid-column: 1;
  grid-row: 2;
}
#content .yu-archive-project article.project a .entry-header h2,
#content .yu-archive-project article.project a .entry-header h3 {
  text-align: center;
}
#content .yu-archive-project article.project a .entry-header h2 {
  font-size: var(--wp--preset--font-size--medium);
}
#content .yu-archive-project article.project a .entry-header h3 {
  font-size: var(--wp--preset--font-size--normal);
  margin-top: 0.25rem;
}
#content .yu-archive-project article.project a .entry-thumbnail {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  margin: 10% 0 0;
  padding: 0 0 80%;
  width: 100%;
}
#content .yu-archive-project article.project a .entry-thumbnail-png {
  height: 0;
  margin: 0;
  padding: 0 0 100%;
  width: 100%;
}
#content .yu-archive-project article.project a .entry-thumbnail-png img {
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yu-archive-project article.project.has-thumb a .entry-thumbnail-png img {
  opacity: 0.99;
}
#content .yu-archive-project article.project.has-thumb a .entry-thumbnail-png span.gradient {
  display: none;
}
#content .yu-archive-project article.project.has-thumb a .entry-thumbnail-png::before {
  content: "";
  display: block;
  position: absolute;
  display: none;
  border-radius: 50%;
  border: 0.3rem solid var(--wp--preset--color--white);
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 100;
}
#content .yu-archive-project article.project.has-thumb a:hover .entry-thumbnail svg image.is-loaded,
#content .yu-archive-project article.project.has-thumb a.hover .entry-thumbnail svg image.is-loaded {
  opacity: 0.5;
}
#content .yu-archive-project article.project.has-thumb a:hover .entry-thumbnail-png img,
#content .yu-archive-project article.project.has-thumb a.hover .entry-thumbnail-png img {
  opacity: 0.5;
}
#content .yu-archive-project article.project.small a .entry-header {
  margin-top: -25%;
}
#content .yu-archive-project article.project.small a .entry-thumbnail {
  margin: 20% 0 0;
  padding: 0 0 60%;
}
#content .yu-archive-project article.project.small a .entry-thumbnail-png {
  transform: scale(0.56);
}
#content .yu-archive-project article.project.default a .entry-header {
  margin-top: -10%;
}
#content .yu-archive-project article.project.default a .entry-thumbnail-png {
  transform: scale(0.78);
}
#content .yu-archive-project article.project.medium a .entry-thumbnail {
  margin: 0;
  padding: 0 0 100%;
}
#content .yu-archive-project article.project.large a .entry-thumbnail {
  margin: 0;
  padding: 0 0 100%;
}
@media (min-width: 801px) {
  #content .yu-archive-project article.project.large {
    grid-column: auto/span 2;
    grid-row: auto/span 2;
  }
}
@media (max-width: 800px) {
  #content .yu-archive-project {
    gap: 10rem;
    grid-template-columns: 1fr;
  }
  #content .yu-archive-project article.project.small a .entry-thumbnail {
    margin: 20% 0 0;
    padding: 0 0 60%;
  }
  #content .yu-archive-project article.project.small a .entry-thumbnail-png {
    transform: scale(0.6);
  }
  #content .yu-archive-project article.project.default a .entry-thumbnail {
    margin: 15% 0 0;
    padding: 0 0 70%;
  }
  #content .yu-archive-project article.project.default a .entry-thumbnail-png {
    transform: scale(0.7);
  }
  #content .yu-archive-project article.project.medium a .entry-thumbnail {
    margin: 10% 0 0;
    padding: 0 0 80%;
  }
  #content .yu-archive-project article.project.medium a .entry-thumbnail-png {
    transform: scale(0.8);
  }
  #content .yu-archive-project article.project.large a .entry-thumbnail {
    margin: 0;
    padding: 0 0 100%;
  }
}
#content .yu-archive-project[data-num-items="1"] {
  max-width: 34rem;
}
#content .yu-archive-project[data-num-items="2"] {
  max-width: 66rem;
}
#content .yu-archive-project[data-num-items="3"] {
  max-width: 98rem;
}

#content .yu-archive-yugis {
  display: grid;
  gap: 9rem 6rem;
  margin-bottom: 12.5%;
  max-width: 100%;
  /* HANDHELD: show title because no hover */
}
#content .yu-archive-yugis article.yugi + article.yugi {
  margin-top: 0;
}
#content .yu-archive-yugis article.yugi a {
  background: transparent !important;
  border-radius: 50%;
  display: block;
  padding: 0;
  position: relative;
}
#content .yu-archive-yugis article.yugi a .entry-header {
  color: var(--wp--preset--color--white);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100%;
  /*height: var(--thumb-size);*/
  /*left: calc( 50% + sin( var(--rotation) + 180deg ) * var(--thumb-offset) );*/
  left: 0;
  opacity: 0;
  padding: 10%;
  place-items: center;
  position: absolute;
  text-align: center;
  /*top: calc( 50% + cos( var(--rotation) + 180deg ) * var(--thumb-offset) );*/
  top: 0;
  /*transform: translate(-50%,-50%);*/
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  /*width: var(--thumb-size);*/
  width: 100%;
  z-index: 15;
}
#content .yu-archive-yugis article.yugi a .entry-header h2,
#content .yu-archive-yugis article.yugi a .entry-header h3 {
  color: inherit;
  font-weight: normal;
  margin: 0;
  text-align: center;
}
#content .yu-archive-yugis article.yugi a .entry-header h2 span,
#content .yu-archive-yugis article.yugi a .entry-header h3 span {
  display: inline-block;
  padding: 0.5rem 1rem;
}
#content .yu-archive-yugis article.yugi a .entry-yugi {
  font-size: 0;
  height: auto;
  line-height: 0;
  margin: 0;
  padding: 0 0 100%;
  width: 100%;
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi,
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-avatar {
  border-radius: 50%;
  position: absolute;
  /*transform: translate(-50%,-50%);*/
  z-index: 10;
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi .entry-thumbnail-png,
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-avatar .entry-thumbnail-png {
  height: 100%;
  width: 100%;
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi {
  height: 0;
  margin: 0;
  padding: 0 0 100%;
  width: 100%;
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi img:not(.yugi-avatar) {
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi img.yugi-avatar {
  filter: grayscale(1);
  z-index: 4;
}
#content .yu-archive-yugis article.yugi a .entry-yugi .thumbnail-yugi .gradient {
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 9;
}
#content .yu-archive-yugis article.yugi.has-thumb a:hover .entry-header,
#content .yu-archive-yugis article.yugi.has-thumb a.hover .entry-header {
  opacity: 0.99;
}
#content .yu-archive-yugis article.yugi.has-thumb a:hover .entry-yugi .thumbnail-yugi .gradient,
#content .yu-archive-yugis article.yugi.has-thumb a.hover .entry-yugi .thumbnail-yugi .gradient {
  opacity: 0.99;
}
#content .yu-archive-yugis article.yugi.has-thumb a:hover .entry-yugi .thumbnail-yugi .entry-thumbnail-png.has-avatar img:not(.yugi-avatar),
#content .yu-archive-yugis article.yugi.has-thumb a.hover .entry-yugi .thumbnail-yugi .entry-thumbnail-png.has-avatar img:not(.yugi-avatar) {
  opacity: 0;
}
#content .yu-archive-yugis article.yugi.has-thumb a:hover .entry-yugi .thumbnail-yugi .entry-thumbnail-png.has-avatar .gradient,
#content .yu-archive-yugis article.yugi.has-thumb a.hover .entry-yugi .thumbnail-yugi .entry-thumbnail-png.has-avatar .gradient {
  opacity: 0.85;
}
#content .yu-archive-yugis article.yugi:not(.has-thumb) a .entry-header {
  opacity: 0.99;
}
#content .yu-archive-yugis article.yugi:not(.has-thumb) a .entry-yugi .thumbnail-yugi .gradient {
  opacity: 0.99;
}
@media (min-width: 1921px) {
  #content .yu-archive-yugis {
    grid-template-columns: repeat(4, 1fr);
  }
  #content .yu-archive-yugis article.yugi:nth-child(2n+1) {
    top: 50%;
  }
  #content .yu-archive-yugis[data-num-items="3"] {
    grid-template-columns: repeat(3, 1fr);
    max-width: 192rem;
    margin: 0 auto 12.5%;
  }
  #content .yu-archive-yugis[data-num-items="3"] article.yugi:nth-child(2n+1) {
    top: 0;
  }
  #content .yu-archive-yugis[data-num-items="3"] article.yugi:nth-child(3n+2) {
    top: 50%;
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #content .yu-archive-yugis {
    grid-template-columns: repeat(3, 1fr);
  }
  #content .yu-archive-yugis article.yugi:nth-child(3n+2) {
    top: 50%;
  }
}
@media (min-width: 1441px) {
  #content .yu-archive-yugis[data-num-items="2"] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 144rem;
    margin: 0 auto 12.5%;
  }
  #content .yu-archive-yugis[data-num-items="2"] article.yugi:nth-child(2n+1) {
    top: 33% !important;
  }
  #content .yu-archive-yugis[data-num-items="2"] article.yugi:nth-child(1n) {
    top: 0;
  }
}
@media (max-width: 1440px) {
  #content .yu-archive-yugis {
    grid-template-columns: repeat(2, 1fr);
  }
  #content .yu-archive-yugis article.yugi:nth-child(2n+1) {
    top: 33%;
  }
}
@media (max-width: 1200px) {
  #content .yu-archive-yugis article.yugi a .entry-header h2 {
    font-size: 2.5vw;
  }
  #content .yu-archive-yugis article.yugi a .entry-header h3 {
    font-size: 1.5vw;
  }
}
@media (min-width: 801px) {
  #content .yu-archive-yugis[data-num-items="1"] {
    grid-template-columns: 1fr;
    max-width: 80rem;
    margin: 0 auto 12.5%;
  }
  #content .yu-archive-yugis[data-num-items="1"] article.yugi {
    top: 0 !important;
  }
}
@media (max-width: 800px) {
  #content .yu-archive-yugis {
    gap: 10rem;
    grid-template-columns: 1fr;
  }
  #content .yu-archive-yugis article.yugi:nth-child(2n+1) {
    top: 0;
  }
  #content .yu-archive-yugis article.yugi a .entry-header h2 {
    font-size: 2rem;
  }
  #content .yu-archive-yugis article.yugi a .entry-header h3 {
    font-size: 1.2rem;
  }
}
@media (pointer: none), (pointer: coarse), (hover: none) {
  #content .yu-archive-yugis article.yugi {
    padding-bottom: 7.5rem;
  }
  #content .yu-archive-yugis article.yugi a .entry-header {
    bottom: -7.5rem;
    color: var(--wp--preset--color--dark);
    display: block;
    height: auto;
    opacity: 1;
    padding: 0;
    top: auto !important;
  }
  #content .yu-archive-yugis article.yugi a .entry-header h3 {
    margin-top: 0;
  }
}

#content .yu-archive-yugiwiki {
  display: grid;
  gap: 10rem 2rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  max-width: 100vw;
  overflow: hidden;
  padding-top: 5em;
}
#content .yu-archive-yugiwiki article.yugiwiki + article.yugiwiki {
  margin-top: 0;
}
#content .yu-archive-yugiwiki article.yugiwiki a {
  background: transparent !important;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto;
  padding: 0;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-header {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 10;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-header h2 {
  font-size: var(--wp--preset--font-size--medium);
  text-align: center;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-excerpt {
  display: none;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-thumbnail {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  margin: 10% 0 0;
  padding: 0 0 80%;
  width: 100%;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-thumbnail-png {
  grid-row: 1;
  height: 0;
  margin: 0;
  padding: 0 0 100%;
  position: relative;
  transform: scale(0.78);
  width: 100%;
  z-index: 5;
}
#content .yu-archive-yugiwiki article.yugiwiki a .entry-thumbnail-png img {
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a .entry-thumbnail-png img {
  opacity: 0.99;
}
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a .entry-thumbnail-png span.gradient {
  display: none;
}
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a .entry-thumbnail-png::before {
  content: "";
  display: block;
  position: absolute;
  display: none;
  border-radius: 50%;
  border: 0.3rem solid var(--wp--preset--color--white);
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 100;
}
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a:hover .entry-thumbnail svg image.is-loaded,
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a.hover .entry-thumbnail svg image.is-loaded {
  opacity: 0.5;
}
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a:hover .entry-thumbnail-png img,
#content .yu-archive-yugiwiki article.yugiwiki.has-thumb a.hover .entry-thumbnail-png img {
  opacity: 0.5;
}
@media (max-width: 800px) {
  #content .yu-archive-yugiwiki {
    gap: 10rem;
    grid-template-columns: 1fr;
  }
  #content .yu-archive-yugiwiki article.project a .entry-thumbnail {
    margin: 15% 0 0;
    padding: 0 0 70%;
  }
  #content .yu-archive-yugiwiki article.project a .entry-thumbnail-png {
    transform: scale(0.7);
  }
}
#content .yu-archive-yugiwiki[data-num-items="1"] {
  max-width: 34rem;
}
#content .yu-archive-yugiwiki[data-num-items="2"] {
  max-width: 66rem;
}
#content .yu-archive-yugiwiki[data-num-items="3"] {
  max-width: 98rem;
}

#content .yu-archive-tribbles {
  display: grid;
  gap: 10rem 2rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: 100vw;
  overflow: hidden;
  padding-top: 5em;
}
#content .yu-archive-tribbles article.tribbles + article.tribbles {
  margin-top: 0;
}
#content .yu-archive-tribbles article.tribbles a {
  background: transparent !important;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto;
  padding: 0;
}
#content .yu-archive-tribbles article.tribbles a .entry-header {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 10;
}
#content .yu-archive-tribbles article.tribbles a .entry-header h2 {
  font-size: var(--wp--preset--font-size--default);
  text-align: center;
}
#content .yu-archive-tribbles article.tribbles a .entry-excerpt {
  display: none;
}
#content .yu-archive-tribbles article.tribbles a .entry-thumbnail {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  margin: 10% 0 0;
  padding: 0 0 80%;
  width: 100%;
}
#content .yu-archive-tribbles article.tribbles a .entry-thumbnail-png {
  grid-row: 1;
  height: 0;
  margin: 0;
  padding: 0 0 100%;
  position: relative;
  transform: scale(0.78);
  width: 100%;
  z-index: 5;
}
#content .yu-archive-tribbles article.tribbles a .entry-thumbnail-png img {
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0.5, 1);
}
#content .yu-archive-tribbles article.tribbles.has-thumb a .entry-thumbnail-png img {
  opacity: 0.99;
}
#content .yu-archive-tribbles article.tribbles.has-thumb a .entry-thumbnail-png span.gradient {
  display: none;
}
#content .yu-archive-tribbles article.tribbles.has-thumb a .entry-thumbnail-png::before {
  content: "";
  display: block;
  position: absolute;
  display: none;
  border-radius: 50%;
  border: 0.3rem solid var(--wp--preset--color--white);
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 100;
}
#content .yu-archive-tribbles article.tribbles.has-thumb a:hover .entry-thumbnail svg image.is-loaded,
#content .yu-archive-tribbles article.tribbles.has-thumb a.hover .entry-thumbnail svg image.is-loaded {
  opacity: 0.5;
}
#content .yu-archive-tribbles article.tribbles.has-thumb a:hover .entry-thumbnail-png img,
#content .yu-archive-tribbles article.tribbles.has-thumb a.hover .entry-thumbnail-png img {
  opacity: 0.5;
}

body.post-type-archive-tribbles #content {
  padding: 0;
}
body.post-type-archive-tribbles #content .yugening-header-wrapper {
  left: 0;
  padding: 3.125vw;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
body.post-type-archive-tribbles .scroll-to-top-wrap,
body.post-type-archive-tribbles #colophon {
  display: none;
}

#tribbles-canvas {
  background: var(--wp--preset--color--white);
  height: calc(100vh - 14rem);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw !important;
  width: 100vw;
}

/*# sourceMappingURL=style.css.map */