* {
  box-sizing: border-box;
}

:root {
  color-scheme: normal;
  --app-height: 100%;
}

.animate__delay-15s {
  animation-delay: 1.5s !important;
}

.animate__delay-05s {
  animation-delay: 0.5s !important;
}

.animate__fadeInRight2 {
  animation-duration: 0.7s;
  animation-delay: 0.4s;
  animation-name: animate__fadeInRight2;
}

@keyframes animate__fadeInRight2 {
  0% {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
.animate__fadeInLeft2 {
  animation-duration: 0.7s;
  animation-delay: 0.4s;
  animation-name: animate__fadeInLeft2;
}

@keyframes animate__fadeInLeft2 {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes showCurve {
  0% {
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 0 100%, 100% 100%, 0 100%);
  }
  75% {
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  }
}
.tableTbl {
  display: table;
  table-layout: fixed;
  border-collapse: separate;
}

.rowTbl {
  display: table-row;
}

.colTbl {
  display: table-cell;
  vertical-align: top;
}

.colTblLast {
  display: table-cell;
  vertical-align: top;
}

/*Float layouts*/
/** @TODO needs hidden???? **/
.tableFlt {
  overflow: auto;
}

.rowFlt {
  float: left;
  width: 100%;
}

.rowFlt:after {
  clear: both;
  content: "";
  display: block;
}

.colFlt {
  float: left;
}

.tableGrd {
  display: grid !important;
  height: 100%;
  grid-template-columns: 1fr;
  align-content: start;
  grid-gap: 1rem;
}
@media (min-width: 576px) {
  .tableGrd {
    grid-template-columns: inherit;
  }
}
.invisibleComponent, .emptyCellTable, .emptyCellGrid {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
}

#UpperCurve.show {
  animation-delay: 0.5s;
  animation-duration: 2s;
  animation-name: showCurve;
  animation-timing-function: ease-in-out;
}

#LowerCurve.show {
  animation-delay: 0.5s;
  animation-duration: 3s;
  animation-name: showCurve;
  animation-timing-function: ease-in-out;
}

@keyframes showWhatWeDo {
  0% {
    -webkit-clip-path: polygon(0 80%, 25% 80%, 25% 100%, 0 100%);
            clip-path: polygon(0 80%, 25% 80%, 25% 100%, 0 100%);
    opacity: 0;
  }
  50% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.whatWeDo.show {
  animation-delay: 0.5s;
  animation-duration: 1.25s;
  animation-name: showWhatWeDo;
  animation-timing-function: linear;
}
@media (min-width: 576px) {
  .whatWeDo {
    display: inline-block;
  }
}

html {
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}
@media (min-width: 576px) {
  html {
    height: 100% !important;
  }
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 95vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  position: relative;
  background-color: #fafafa;
  scroll-behavior: smooth;
  font-family: "Noto JP", sans-serif;
}
body #fp-nav ul li a span {
  background: #171717;
  transition: all 0.5s ease-in-out;
}
body #fp-nav ul li a span.light {
  background: #ffffff;
}
body #fp-nav.fp-left {
  left: 0px;
}
@media (min-width: 576px) {
  body #fp-nav.fp-left {
    left: 10px;
  }
}
body #fp-nav.fp-left ul li {
  height: 32px;
  width: 4px;
  margin: 0px 0px 10px 0px;
}
body #fp-nav.fp-left ul li a.active span.fp-sr-only {
  width: 4px;
}
body #fp-nav.fp-left ul li a.active span {
  border-radius: unset;
  margin: unset;
  height: unset;
}
body #fp-nav.fp-left ul li a span.fp-sr-only {
  height: 32px;
  width: 2px;
  clip: unset;
  color: transparent;
  margin: -16px 0px -10px -2px;
}
body #fp-nav.fp-left ul li a span {
  border-radius: unset;
  margin: unset;
  height: unset;
}
body #fp-nav.fp-left ul li:last-of-type {
  opacity: 0;
}
body .fp-tableCell {
  background-color: rgba(0, 0, 0, 0);
  transition: all 1s ease-in-out;
}
body .fp-tableCell.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
body #mobile_burger_menue_slide {
  margin-bottom: 0;
  line-height: normal !important;
  font-size: 1rem !important;
  width: 100%;
}
body #mobile_burger_menue_slide li {
  margin-bottom: 0rem !important;
}
body #mobile_burger_menue_slide li a {
  font-size: 2rem;
  color: #e9ecf5;
  transition: all 0.5s ease-in-out;
  text-decoration: none;
  position: relative;
  line-height: normal;
}
@media (min-width: 576px) {
  body #mobile_burger_menue_slide li a {
    font-size: 3rem;
  }
}
body #mobile_burger_menue_slide li a:hover {
  color: #70b6aa;
}
body #mobile_burger_menue_slide li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
body #mobile_burger_menue_slide li a:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #70b6aa;
  transform-origin: bottom right;
  transition: transform 0.5s ease-out;
}
body #mobile_burger_menue_slide li a.active {
  color: #171717;
}
body ul.mobile_submenue {
  padding: 0.1rem 0 0 0 !important;
  margin: 0 0 0rem 0 !important;
  display: none;
  overflow: hidden;
}
@media (min-width: 576px) {
  body ul.mobile_submenue {
    padding: 1rem 0 0 0 !important;
  }
}
body ul.mobile_submenue li {
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  line-height: 2rem !important;
  font-size: unset !important;
}
body ul.mobile_submenue li a {
  margin-bottom: 0.5em;
  font-size: 1.25rem !important;
  display: inline-block;
  margin-left: 1.5rem;
}
@media (min-width: 576px) {
  body ul.mobile_submenue li a {
    font-size: 1.25em !important;
    font-size: 2.1375rem !important;
  }
}
body #fullpage > div.content > div > h1 {
  padding: 72px 15px 0px 15px;
  color: #171717;
}
@media (min-width: 576px) {
  body #fullpage > div.content > div > h1 {
    padding: 36px 62px 36px 62px;
  }
}
@media (min-width: 768px) {
  body #fullpage > div.content > div > h1 {
    padding: 1em 3em;
  }
}
@media (min-width: 992px) {
  body #fullpage > div.content > div > h1 {
    padding: 1em 2em;
  }
}
@media (min-width: 1200px) {
  body #fullpage > div.content > div > h1 {
    padding: 1em 3em;
  }
}
@media (min-width: 1600px) {
  body #fullpage > div.content > div > h1 {
    padding: 1em 6em;
  }
}
@media (min-width: 2000px) {
  body #fullpage > div.content > div > h1 {
    padding: 1em 10em;
  }
}
body #fullpage {
  flex: 1;
  padding-top: 0;
}
body #fullpage span {
  font-family: "Noto JP", sans-serif;
}
body #fullpage > div.content > div > div.headlineGreyContainerText > div > div h1 {
  color: #171717;
  padding: 36px 15px 36px 15px;
  margin-top: 36px;
}
@media (min-width: 576px) {
  body #fullpage > div.content > div > div.headlineGreyContainerText > div > div h1 {
    padding: 36px 62px 36px 62px;
    margin-top: 0px;
  }
}
@media (min-width: 1200px) {
  body #fullpage > div.content > div > div.headlineGreyContainerText > div > div h1 {
    padding: 1em 3em;
  }
}
@media (min-width: 1600px) {
  body #fullpage > div.content > div > div.headlineGreyContainerText > div > div h1 {
    padding: 1em 6em;
  }
}
@media (min-width: 2560px) {
  body #fullpage > div.content > div > div.headlineGreyContainerText > div > div h1 {
    padding: 1em 10em;
  }
}
@media (min-width: 2000px) {
  body #fullpage .tableGrd {
    align-content: center;
  }
}
body #noFullPage #fullpage .gridlayout {
  padding-top: 0px !important;
}
body input[name=submitButton] {
  font-family: "Noto JP", sans-serif;
  background-color: transparent;
}
body form[name=centralLoginForm] {
  padding: 10rem 1rem 1rem 1rem;
}
body input[id=frmElmnt_groupPassword] {
  padding: 1rem 1rem;
  border: solid 1px #bbb;
  border-radius: 3px;
  font-family: "Noto JP", sans-serif;
  font-size: 1.4rem;
  background-color: #ffffff;
  width: 100%;
  max-width: 400px;
}
body span[labelFor=frmElmnt_groupPassword] {
  line-height: 3.4em;
  font-size: 1.25rem;
}
body .mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  z-index: 5000;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
body .mobileMenu .mobileLogo {
  height: 100%;
  overflow: auto;
}
body .mobileMenu .mobileLogo div:nth-child(1) {
  display: none;
  z-index: 20;
}
body .mobileMenu .mobileLogo div:nth-child(2) {
  display: none;
  z-index: 10;
}
body .mobileMenu .mobileLogo div {
  position: absolute;
  margin: 0 0 0 1em;
  top: 50%;
  transform: translateY(-50%);
}
body .mobileMenu .mobileBurger {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body .mobileMenu .mobileBurger .contactButton {
  position: relative;
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  margin-right: 2rem;
  font-family: "Noto JP", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  cursor: pointer;
  height: -moz-fit-content;
  height: fit-content;
  color: #171717;
  border: #171717 solid 3px;
  top: 50%;
  transform: translateY(-50%) scale(0.75);
}
body .mobileMenu .mobileBurger .kathan_menue_burger {
  width: 30px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  transform: translateY(-50%) scale(0.75);
  position: relative;
  top: 50%;
  margin-right: 20px;
}
@media (min-width: 576px) {
  body .mobileMenu .mobileBurger .kathan_menue_burger {
    margin-right: 2rem;
  }
}
body .mobileMenu .mobileBurger .kathan_menue_burger.dark {
  background: white;
}
body .mobileMenu .mobileBurger .kathan_menue_burger.dark::before, body .mobileMenu .mobileBurger .kathan_menue_burger.dark::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: white;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}
body .mobileMenu .mobileBurger .kathan_menue_burger.light {
  background: #171717;
}
body .mobileMenu .mobileBurger .kathan_menue_burger.light::before, body .mobileMenu .mobileBurger .kathan_menue_burger.light::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);
}
body .mobileMenu .mobileBurger .kathan_menue_burger::before, body .mobileMenu .mobileBurger .kathan_menue_burger::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
}
body .mobileMenu .mobileBurger .kathan_menue_burger::before {
  transform: translateY(-13px);
}
body .mobileMenu .mobileBurger .kathan_menue_burger::after {
  transform: translateY(13px);
}
body .mobileMenu.white {
  background-color: transparent;
}
body .mobileMenu.white .mobileLogo div:nth-child(1) {
  display: block;
}
body .mobileMenu.white .mobileBurger .contactButton {
  color: white;
  border-color: white;
}
body .mobileMenu.white .mobileBurger .kathan_menue_burger {
  color: #171717;
}
body .mobileMenu.color .mobileLogo div:nth-child(2) {
  display: block;
}
body .mobileMenu.color .mobileBurger .kathan_menue_burger {
  color: #171717;
}
body .textHeadlinePadding {
  padding: 2em;
  background: rgba(255, 255, 255, 0.8);
  display: inline-block;
  border-radius: 5px;
  margin-top: 2em;
}
@media (min-width: 576px) {
  body .textHeadlinePadding {
    margin-top: unset;
  }
}
body .textHeadlinePadding h1 {
  margin-top: 0 !important;
}
@media (min-width: 2000px) {
  body .textHeadlinePadding {
    padding: 0em;
    background: transparent;
    display: inline-block;
    border-radius: 0px;
  }
}
body .menue {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background: white;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  align-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
  body .menue {
    height: 102px;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .menue {
    height: 60px;
  }
}
body .menue #kathan_logo {
  margin-left: 10px;
  margin-top: 7px;
}
@media (min-width: 576px) {
  body .menue #kathan_logo {
    margin-top: 0px;
    margin-left: 2rem;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .menue #kathan_logo {
    margin-left: 10px;
    margin-top: 7px;
  }
}
body .menue #kathan_logo .kathan_logo_img {
  height: 28px;
}
@media (min-width: 576px) {
  body .menue #kathan_logo .kathan_logo_img {
    height: 35px;
  }
}
body .dropDownMenu {
  display: none;
}
@media (min-width: 576px) {
  body .dropDownMenu {
    display: block;
    position: fixed;
    top: 20px;
    left: 200px;
    z-index: 201;
  }
  body .dropDownMenu div {
    padding: 1em;
    max-height: 0;
    background-color: transparent;
    position: relative;
    border-radius: 15px;
  }
  body .dropDownMenu div a {
    font-family: "Noto JP", sans-serif;
    font-size: 1.25rem;
    padding: 1em;
    text-transform: uppercase;
  }
  body .dropDownMenu div a span {
    text-transform: unset;
  }
  body .dropDownMenu div a.dark {
    color: white;
  }
  body .dropDownMenu div a.light {
    color: #171717;
  }
  body .dropDownMenu div ul {
    list-style: none;
    opacity: 0;
    padding: 0em;
    margin: 0 1em;
    position: relative;
    visibility: hidden;
  }
  body .dropDownMenu div ul li {
    position: relative;
    text-transform: uppercase;
    padding: 0.5em 0 !important;
  }
  body .dropDownMenu div ul li a {
    padding: 0 !important;
  }
  body .dropDownMenu div:hover {
    background-color: #ffffff;
    max-height: 250px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    transition: max-height 0.2s ease-in-out;
  }
  body .dropDownMenu div:hover a.dark {
    color: #171717;
  }
  body .dropDownMenu div:hover ul {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s ease-in-out 0.1s;
  }
}
body #kathan_menue {
  display: flex;
  position: fixed;
  justify-content: right;
  align-items: center;
  height: 54px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  top: 4px;
  right: 0;
  z-index: 202;
  max-width: calc(100% - 2rem);
}
@media (min-width: 576px) {
  body #kathan_menue {
    top: 1.3em;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body #kathan_menue {
    top: 0;
  }
}
body #kathan_menue ul {
  display: none;
  margin: 0 0 10px 0;
  padding: 0;
}
@media (min-width: 576px) {
  body #kathan_menue ul {
    display: block;
  }
}
body #kathan_menue ul li {
  display: inline-block;
  padding-top: 0.5em;
  padding-left: 0px;
  margin-right: 35px;
  padding-bottom: 0px;
  position: relative;
}
body #kathan_menue ul li a {
  color: #171717;
  padding-bottom: 0.25em;
  border-bottom: 2px solid transparent;
  transition: all 0.1s ease-in-out;
}
@media (min-width: 576px) {
  body #kathan_menue ul li a {
    font-size: 1.1rem;
  }
}
@media (min-width: 768px) {
  body #kathan_menue ul li a {
    font-size: 1.25rem;
  }
}
@media (min-width: 2560px) {
  body #kathan_menue ul li a {
    font-size: 2rem;
  }
}
body #kathan_menue ul li a.active {
  transition: all 0.1s ease-in-out;
  border-bottom: 2px solid #02082a;
}
body #kathan_menue ul li a:hover {
  transition: all 0.5s ease-in-out;
  border-bottom: 2px solid #02082a;
  text-decoration: none;
}
body #kathan_menue.dark ul li a {
  color: #ecf2fd;
  transition: all 0.1s ease-in-out;
}
body #kathan_menue.dark ul li a.active {
  border-bottom: 2px solid #ffffff;
}
body #kathan_menue.dark ul li a:hover {
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
body #kathan_menue.dark .submenue .marker {
  border-bottom: solid 2px #ffffff;
  border-left: solid 2px #ffffff;
}
@media (min-width: 576px) {
  body #kathan_menue {
    position: fixed;
  }
}
body #kathan_menue .submenue {
  background-color: #02082a;
  color: #ffffff;
  position: fixed;
  width: 100vw;
  right: 0;
  top: 90px;
  padding: 0.2rem 0rem 0.2rem 0rem;
  text-align: right;
  cursor: default;
}
body #kathan_menue .submenue ul li {
  font-size: 1.25rem;
}
body #kathan_menue .submenue ul li a {
  border-bottom: 2px solid transparent;
  color: #ffffff;
}
body #kathan_menue .submenue ul li a.active {
  transition: all 0.1s ease-in-out;
  border-bottom: 2px solid transparent;
  color: #798be8;
}
body #kathan_menue .submenue ul li a.active:hover {
  border-bottom: 2px solid transparent !important;
}
body #kathan_menue .submenue ul li a:hover {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
}
body #kathan_menue .submenue.hidden {
  display: none;
}
body #kathan_menue .submenue .marker {
  height: 22px;
  width: 12px;
  border-bottom: solid 2px rgba(23, 23, 23, 0.4);
  border-left: solid 2px rgba(23, 23, 23, 0.4);
  position: absolute;
  top: 0px;
  left: 0px;
}
#contactButton {
  border-radius: 2em;
  padding: 0.5em 1em;
  margin-right: 1em;
  font-family: "Noto JP", sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  cursor: pointer;
  color: #171717;
  border: #171717 solid 3px;
  background-color: rgba(18, 41, 117, 0);
  transform: scale(0.75);
}
@media (min-width: 576px) {
  #contactButton {
    margin-right: 0;
  }
}
#contactButton span.text {
  display: none;
}
@media (min-width: 992px) {
  #contactButton span.text {
    display: inline;
  }
}
#contactButton span.mdi {
  display: inline;
  padding: 0 0.5em;
  display: block;
}
@media (min-width: 992px) {
  #contactButton span.mdi {
    display: none;
  }
}
#contactButton.light {
  color: #171717;
  border: #171717 solid 3px;
  transition: all 0.5s ease-in-out;
}
#contactButton.dark {
  color: white;
  border: white solid 3px;
}
#contactButton:hover {
  opacity: 1;
  background-color: rgb(18, 41, 117);
  color: white;
}

.kathan_menue_burger {
  width: 30px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  transform: scale(0.75);
  margin-right: 20px;
}
@media (min-width: 576px) {
  .kathan_menue_burger {
    margin-right: 2rem;
  }
}
.kathan_menue_burger.dark {
  background: white;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.kathan_menue_burger.dark::before, .kathan_menue_burger.dark::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease-in-out;
}
.kathan_menue_burger.light {
  background: #171717;
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
}
.kathan_menue_burger.light::before, .kathan_menue_burger.light::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease-in-out;
}
.kathan_menue_burger::before, .kathan_menue_burger::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 4px;
  background: #171717;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
}
.kathan_menue_burger::before {
  transform: translateY(-13px);
}
.kathan_menue_burger::after {
  transform: translateY(13px);
}

body #kathan_menue.open {
  position: fixed;
}
body #kathan_menue.open .kathan_menue_burger {
  width: 17px;
  background: transparent;
  box-shadow: none;
  margin-left: 13px;
}
body #kathan_menue.open .kathan_menue_burger::before {
  transform: rotate(45deg) translate(-13px, 13px);
}
body #kathan_menue.open .kathan_menue_burger::after {
  transform: rotate(-45deg) translate(-13px, -13px);
}
body #menueSlide {
  background: #171717;
  position: fixed;
  height: 0;
  width: 100vw;
  left: 0;
  top: 0;
  z-index: 199;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
@media (min-width: 576px) {
  body #menueSlide {
    background-image: url("/projects/KathanLab/static/images/bg_menu.jpg");
    background-position-x: right;
    background-position-y: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body #menueSlide {
    overflow: auto;
  }
}
body #menueSlide .submenue {
  margin-left: 1rem;
  font-size: 0.9rem;
}
body #menueSlide #menue_kathan_logo {
  margin-left: 10px;
  margin-top: 7px;
  position: absolute;
}
@media (min-width: 576px) {
  body #menueSlide #menue_kathan_logo {
    margin-left: 24px;
    margin-top: 7px;
  }
}
body #menueSlide #menue_kathan_logo .kathan_logo_img {
  height: 28px;
  margin-top: 11px;
}
@media (min-width: 576px) {
  body #menueSlide #menue_kathan_logo .kathan_logo_img {
    height: 35px;
    margin-top: 24px;
    margin-left: 8px;
  }
}
@media (min-width: 768px) {
  body #menueSlide {
    position: fixed;
    top: 0;
  }
}
body #menueSlide.open {
  height: 100vh;
  opacity: 1;
  z-index: 201;
}
body #menueSlide .row2 {
  display: grid;
  font-family: "Noto JP", sans-serif;
  color: #e9ecf5;
  height: calc(100vh - 100px);
  margin-top: 100px;
  overflow: hidden;
}
@media (min-width: 576px) and (max-height: 550px) {
  body #menueSlide .row2 {
    height: -moz-max-content;
    height: max-content;
    padding-bottom: 2rem;
  }
}
body #menueSlide .row2 div {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0fr 1fr 0fr;
  justify-self: auto;
  align-items: center;
}
@media (min-width: 768px) {
  body #menueSlide .row2 div {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
  }
}
body #menueSlide .row2 ul {
  list-style: none;
  margin: 0 2rem;
  padding: 0px;
  font-family: "Noto JP", sans-serif;
  max-width: calc(100vw - 70px);
}
@media (min-width: 576px) {
  body #menueSlide .row2 ul {
    margin: 0px;
    max-width: unset;
  }
}
body #menueSlide .row2 ul li {
  display: block;
  font-size: 2.5rem;
  color: #e9ecf5;
  transition: all 0.5s ease-in-out;
  padding: 0.1em;
  cursor: pointer;
  margin-bottom: 2rem;
}
body #menueSlide .row2 ul li a.active {
  color: #70b6aa;
  display: inline-block;
}
body #menueSlide .row2 ul li a.active:hover {
  color: #e9ecf5;
}
body #menueSlide .row2 h1 {
  color: #f6f6f6;
  margin: 0;
  justify-self: center;
  display: none;
}
@media (min-width: 768px) {
  body #menueSlide .row2 h1 {
    display: inline-block;
  }
}
body .menueVisible {
  opacity: 1 !important;
}
body #noFullPage .menue2 {
  box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.1);
}
body .menue2 {
  position: fixed;
  height: 60px;
  width: 100%;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  align-content: center;
  opacity: 1;
  background-image: url("kathan_logo_white.png");
  background-size: auto 35px;
  background-repeat: no-repeat;
  background-position: 2em 32px;
}
@media (min-width: 576px) {
  body .menue2 {
    height: 90px;
    position: absolute;
    background-color: transparent;
    background-size: auto 35px;
    position: fixed;
    top: 0;
    left: 0;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .menue2 {
    height: 60px;
  }
}
body .menue2.dark {
  background-image: url("kathan_logo_color.png");
}
body .menue2 #kathan_logo_dynamic {
  margin-left: 2em;
}
body .menueVisible2 {
  opacity: 0 !important;
}
body h1,
body h2 {
  font-family: "Noto JP", sans-serif;
  margin: 0;
  font-weight: 400;
}
body p, body ul, body tr, body td {
  font-family: "Noto JP", sans-serif;
  line-height: 1.4em;
}
@media (min-width: 1200px) {
  body p, body ul, body tr, body td {
    font-size: 1.25rem;
  }
}
body table {
  border-spacing: 0px;
  border-collapse: separate;
}
body a {
  color: #02082a;
  text-decoration: none;
}
body a:hover {
  text-decoration: underline;
}
body .svg_measure_model_make {
  filter: drop-shadow(9px 9px 13px rgba(109, 11, 105, 0.45));
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}
body .page_research_ighlight_slide {
  background-image: url("/projects/KathanLab/static/custom/image/research_highlight_mirror.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 200px;
  background-position-x: 84%;
  height: calc(100vh + 180px);
}
@media (min-width: 992px) {
  body .page_research_ighlight_slide {
    background-position: top;
  }
}
body .page_about {
  background-image: url("about_header.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  background-color: #0b2460;
}
@media (min-width: 576px) {
  body .page_about #introHeadline {
    top: 0% !important;
  }
}
body .page_research_highlight {
  background: #171717;
  background-image: url("research_highlight.jpg");
  background-size: cover;
  background-position-y: center;
  background-position-x: 100%;
  position: relative;
}
body .page_home {
  background: #171717;
  background-size: cover;
  background-position-y: center;
  background-position-x: 100%;
  position: relative;
}
body .page_home *.center {
  align-self: center !important;
}
@media (min-width: 576px) {
  body .page_home {
    background-position-x: 25%;
  }
}
@media (min-width: 768px) {
  body .page_home {
    background-position-x: 45%;
  }
}
@media (min-width: 992px) {
  body .page_home {
    background-position-x: 50%;
  }
}
body .splide {
  width: 85vw;
}
body .splide button {
  background: transparent !important;
}
body .splide .splide__slide.is-active {
  border: solid 3px transparent !important;
  transition: all 0.2s ease;
}
body .splide .splide__list {
  padding: 0;
  margin: 0;
}
body .splide .splide__slide {
  transform: scale(1);
  transition: all 0.2s ease;
  list-style: none;
}
body .splide button.splide__arrow {
  top: 50%;
  color: #171717 !important;
  padding: 0px !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 100%;
  width: 60px;
}
body .splide button.splide__arrow--next {
  right: -40px;
  background: linear-gradient("to left", rgb(255, 255, 255), rgba(255, 255, 255, 0.1)) !important;
}
body .splide button.splide__arrow--prev {
  left: -40px;
  background: linear-gradient("to left", rgb(255, 255, 255), rgba(255, 255, 255, 0.1)) !important;
}
body .joinButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton, body input[name=submitButton] {
  border: solid 2px #171717;
  border-radius: 30px;
  color: #171717;
  padding: 13px 35px 13px 35px;
  text-transform: uppercase;
  display: block;
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  margin: 0px auto;
  font-family: "Noto JP", sans-serif;
  margin-bottom: 2.5rem;
}
@media (min-width: 2560px) {
  body .joinButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton, body input[name=submitButton] {
    font-size: 1.75rem;
  }
}
body .joinButton a, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton a, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton a, body input[name=submitButton] a {
  color: #171717;
  text-decoration: none;
}
body .joinButton a:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton a:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton a:hover, body input[name=submitButton] a:hover {
  text-decoration: none;
}
body .joinButton:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton:hover, body input[name=submitButton]:hover {
  background-color: #171717;
  color: #ffffff;
  transition: all 1s ease-in-out;
}
body .joinButton:hover a, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton:hover a, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton:hover a, body input[name=submitButton]:hover a {
  color: white;
}
body .joinButton.pink, body .row2 .courseCard .genericCardInfo .courseMoreLinks .pink.moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .pink.moodleButton, body input.pink[name=submitButton] {
  background-color: #c91ec3;
  background-color: #c91ec3;
  color: #ffffff;
  transition: all 1s ease-in-out;
}
body .joinButton.pink:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .pink.moreLinkButton:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .pink.moodleButton:hover, body input.pink[name=submitButton]:hover {
  background-color: #fceafb;
}
body .joinButton.small, body .row2 .courseCard .genericCardInfo .courseMoreLinks .small.moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .small.moodleButton, body input.small[name=submitButton] {
  padding: 7px 20px 7px 20px;
}
body .topPub {
  text-align: center;
  color: #70b6aa !important;
  font-weight: 500 !important;
}
body .topPub a {
  margin-top: 1em;
  right: 0;
  right: 0;
  right: 0;
}
body .topPub a:hover {
  text-decoration: none;
}
body .researchContainer {
  display: flex;
  gap: 50px;
  font-family: "Noto JP", sans-serif;
  flex-direction: column;
}
@media (min-width: 576px) {
  body .researchContainer {
    flex-direction: row;
  }
}
body .researchContainer .researchCard {
  border-radius: 4px;
  background-color: #ffffff;
  color: #171717;
  border-radius: 10px;
}
body .researchContainer .researchCard .cardImage {
  background-size: cover;
  background-image: url("research1.jpg");
  background-position-x: right;
  height: 20vh;
  border-radius: 10px 10px 0px 0px;
}
body .researchContainer .researchCard .cardInfo {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  color: #171717;
}
body .researchContainer .researchCard .cardInfo h1 {
  font-size: 2rem !important;
}
body .researchContainer .researchCard .cardInfo p {
  font-size: 1rem !important;
}
body .researchContainer .researchCard .cardAction {
  padding: 16px 50px 50px 50px;
}
body .researchContainer .researchCard .cardAction button {
  border-radius: 4px;
}
body .researchContainer .researchCard .cardAction .readMore {
  border: solid 2px #171717;
  border-radius: 30px;
  padding: 13px 35px 13px 35px;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
body .researchContainer .researchCard .cardAction .readMore:hover {
  background-color: #171717;
  color: #ffffff;
  transition: all 1s ease-in-out;
}
body a[name^=publications] {
  top: -180px;
  display: block;
  position: absolute;
  height: 0px;
  width: 0px;
}
body .imagePreviewContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 12%;
  align-items: end;
}
body .imagePreviewContainer .imagePreviewComponent {
  display: grid;
  border-bottom: solid 5px transparent;
  transition: border-bottom 0.4s ease-in-out;
}
body .imagePreviewContainer .imagePreviewComponent.active {
  border-bottom: solid 5px #70b6aa;
}
body .imagePreviewContainer .imagePreviewComponent img {
  max-width: 100%;
  margin: 1em 0;
}
body #imagePreviewTarget {
  transition: opacity 0.1s ease-in-out;
  opacity: 1;
  position: relative;
  margin-bottom: 32px;
}
@media (min-width: 576px) {
  body #imagePreviewTarget {
    margin: 0;
  }
}
body #imagePreviewTarget.transparent {
  opacity: 0.5;
}
body .slide_card {
  width: 250px;
  height: 160px;
  overflow: hidden;
  font-size: 1rem;
  display: grid;
  align-items: center;
  cursor: default !important;
}
body .slide_card div {
  text-align: center;
}
body .slide_card div span {
  font-size: 4em;
  line-height: 1em;
  color: #171717;
}
body .slide_card div h2 {
  min-height: 3em;
}
body .row2 {
  position: relative;
}
body .row2 div #introHeadline {
  padding: 0px;
  margin: 0px;
  transition: all 0.5s ease-in-out 0s;
  font-size: 2.1375rem !important;
  line-height: 2.1rem !important;
  font-weight: 600 !important;
  transition: all 0.5s ease-in-out 0.1s;
}
body .row2 div #introHeadline.lighterBlueBG {
  background-color: #e9ecf5;
}
body .row2 div #introHeadline.whiteBG {
  background-color: #ffffff;
  color: #171717;
}
body .row2 div #introHeadline.lightGreyBG {
  background-color: #f6f6f6;
}
body .row2 div #introHeadline.pinkBG {
  background-color: #c91ec3;
}
body .row2 div #introHeadline.greenBG {
  background-color: #74c7a4;
}
@media (min-width: 576px) {
  body .row2 div #introHeadline.greenBG {
    background-color: transparent;
  }
}
body .row2 div #introHeadline.yellowBG {
  background-color: #fedc3f;
}
@media (min-width: 576px) {
  body .row2 div #introHeadline.yellowBG {
    background-color: transparent;
  }
}
body .row2 div #introHeadline.darkBlueBG {
  background-color: #171717;
}
@media (min-width: 576px) {
  body .row2 div #introHeadline.darkBlueBG {
    background-color: transparent;
  }
}
body .row2 div #introHeadline.blueBG {
  background-color: transparent;
  color: #ffffff;
}
@media (min-width: 576px) {
  body .row2 div #introHeadline.blueBG {
    background-color: transparent;
    color: #ffffff;
  }
}
@media (min-width: 576px) {
  body .row2 div #introHeadline {
    font-size: 2.1375rem !important;
    line-height: 2.1rem !important;
    background-color: transparent;
  }
  body .row2 div #introHeadline.hidden {
    top: 10%;
    transition: all 0.5s ease-in-out 0.1s;
  }
}
@media (min-width: 576px) and (min-width: 576px) {
  body .row2 div #introHeadline.hidden {
    top: 0%;
  }
}
@media (min-width: 576px) and (min-width: 2000px) {
  body .row2 div #introHeadline.hidden {
    top: 15%;
  }
}
@media (min-width: 768px) {
  body .row2 div #introHeadline {
    font-size: 5.7rem !important;
    line-height: 5.6rem !important;
  }
}
@media (min-width: 992px) {
  body .row2 div #introHeadline {
    font-size: 6.4125rem !important;
    line-height: 6.3rem !important;
  }
}
@media (min-width: 1200px) {
  body .row2 div #introHeadline {
    font-size: 7.125rem;
    line-height: 7rem;
  }
}
@media (min-width: 2000px) {
  body .row2 div #introHeadline {
    top: 35%;
  }
}
body .row2 div #introText {
  display: none;
  transition: all 0.5s ease-in-out 0.1s;
  top: 0;
}
body .row2 div #introText h1 {
  color: transparent;
  font-size: 5rem;
}
@media (min-width: 576px) {
  body .row2 div #introText {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 40px 40px;
    color: #ffffff;
  }
  body .row2 div #introText p {
    color: #ffffff;
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  body .row2 div #introText {
    top: unset;
    top: 0;
  }
}
@media (min-width: 2000px) {
  body .row2 div #introText {
    top: 20%;
  }
}
body .row2 div #introText.hidden {
  top: 50vh;
  opacity: 0;
  transition: all 0.5s ease-in-out 0.1s;
}
body .row2.whiteText h1.headlineColorDark {
  color: #ffffff !important;
}
body .row2.blackText h1, body .row2.blackText p {
  color: #171717 !important;
}
body .row2 h1.headlineColorDark {
  color: #171717 !important;
}
body .row2 .quote {
  font-style: italic;
  font-size: 1.7rem;
}
@media (min-width: 576px) {
  body .row2 .quote {
    font-size: 2rem;
  }
}
body .row2 img {
  padding: 0rem;
  border-radius: 5px;
  background-color: transparent;
  margin: 2rem 0;
  max-width: 100%;
}
body .row2 .graphicResponsive {
  max-width: 80vw;
  max-height: 60vh;
}
@media (min-width: 576px) {
  body .row2 .graphicResponsive {
    max-width: 100%;
    max-height: 100%;
  }
}
body .row2 .responsiveTeamPhoto {
  max-width: 80vw;
  padding: 0;
  border-radius: 0;
}
@media (min-width: 576px) {
  body .row2 .responsiveTeamPhoto {
    right: -6rem;
    position: absolute;
    max-height: 80vh;
    border-radius: 0;
    padding: 0;
    top: 0px;
    right: -6rem;
    background-color: transparent;
    height: calc(100vh - 150px);
  }
}
@media (min-width: 768px) {
  body .row2 .responsiveTeamPhoto {
    top: -6em;
    right: -62px;
    max-width: 50vw;
  }
}
@media (min-width: 992px) {
  body .row2 .responsiveTeamPhoto {
    right: -6rem;
  }
}
@media (min-width: 1200px) {
  body .row2 .responsiveTeamPhoto {
    right: -6rem;
    max-width: unset;
  }
}
@media (min-width: 1600px) {
  body .row2 .responsiveTeamPhoto {
    right: -6rem;
    max-width: unset;
  }
}
body .row2 .teamOverview {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 4rem;
}
body .row2 .teamOverview a {
  text-decoration: none !important;
}
@media (min-width: 768px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 2000px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 2560px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 3500px) {
  body .row2 .teamOverview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
body .row2 .teamOverview .teamMemberCard {
  border-radius: 5px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 1s ease-in-out;
  aspect-ratio: 887/1114;
  flex: 1;
}
body .row2 .teamOverview .teamMemberCard .teamMemberCardImage {
  position: relative;
  height: 100%;
  z-index: 10;
  margin: 0;
  padding: 0;
  top: -1rem;
  aspect-ratio: 887/1114;
  transition: all 1s ease-in-out;
}
body .row2 .teamOverview .teamMemberCard .teamMemberCardImage img {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
body .row2 .teamOverview .teamMemberCard .teamMemberCardImage:hover {
  transition: all 1s ease-in-out;
}
body .row2 .teamOverview .teamMemberCard .teamMemberInfo {
  background-color: #ffffff;
  position: absolute;
  z-index: 20;
  bottom: 0;
  height: 30%;
  width: 100%;
  padding: 1.5rem 1.5rem 0 1.5rem;
  transition: all 1s ease-in-out;
  border-bottom: 5px solid #70b6aa;
}
@media (min-width: 576px) {
  body .row2 .teamOverview .teamMemberCard .teamMemberInfo {
    height: 31%;
  }
}
@media (min-width: 768px) {
  body .row2 .teamOverview .teamMemberCard .teamMemberInfo {
    height: 35%;
  }
}
@media (min-width: 992px) {
  body .row2 .teamOverview .teamMemberCard .teamMemberInfo {
    height: 35%;
  }
}
@media (min-width: 1600px) {
  body .row2 .teamOverview .teamMemberCard .teamMemberInfo {
    height: 35%;
  }
}
body .row2 .teamOverview .teamMemberCard .teamMemberInfo h1 {
  font-size: 1.5rem;
  margin: 0;
}
body .row2 .teamOverview .teamMemberCard .teamMemberInfo h2 {
  font-weight: 600;
  font-size: 1.5em;
}
body .row2 .teamOverview .teamMemberCard .teamMemberInfo .teamMemberEmailIcon {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 2.75rem;
}
body .row2 .teamOverview .teamMemberCard .teamMemberInfo h2 {
  margin-top: 0;
}
body .row2 .teamOverview .teamMemberCard:hover {
  transition: all 0.75 ease-in-out;
}
body .row2 .teamOverview .teamMemberCard:hover .teamMemberCardImage {
  transform: scale(1.025);
  transition: all 1s ease-in-out;
}
body .row2 .teamOverview .teamMemberCard:hover .teamMemberInfo {
  background-color: #70b6aa;
}
body .row2 .teamOverview .teamMemberCard:hover .teamMemberInfo h2, body .row2 .teamOverview .teamMemberCard:hover .teamMemberInfo .teamMemberEmailIcon {
  color: #ffffff;
}
body .row2 .teamOverview .teamMemberCard:hover .teamMemberInfo p {
  color: #ffffff;
}
body .row2 .alumniOverview {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media (min-width: 2000px) {
  body .row2 .alumniOverview {
    grid-template-columns: 1fr 1fr;
  }
}
body .row2 .alumniOverview .alumniCard {
  background-color: white;
  border-radius: 5px;
  display: grid;
  grid-template-rows: 0.1fr 1fr;
  grid-template-columns: auto;
  border-bottom: solid 5px #171717;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}
@media (min-width: 768px) {
  body .row2 .alumniOverview .alumniCard {
    grid-template-rows: auto;
    grid-template-columns: 32% 68%;
  }
}
body .row2 .alumniOverview .alumniCard .alumniCardImage {
  display: grid;
  align-items: start;
  justify-items: center;
}
body .row2 .alumniOverview .alumniCard .alumniCardImage img {
  margin: 0;
  padding: 0;
  border-radius: 5px 0 0 0;
}
body .row2 .alumniOverview .alumniCard .alumniInfo {
  padding: 1.5rem;
}
body .row2 .alumniOverview .alumniCard .alumniInfo h3 {
  color: black;
  font-family: "Noto JP", sans-serif;
}
body .row2 .alumniOverview .alumniCard .alumniInfo p {
  color: black;
  word-break: normal;
}
body .row2 .genericCard, body .row2 .courseCard {
  border-radius: 5px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body .row2 .genericCard .genericCardImage, body .row2 .courseCard .genericCardImage {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  background-position-y: bottom;
  aspect-ratio: 2.21/1;
}
body .row2 .genericCard .genericCardInfo, body .row2 .courseCard .genericCardInfo {
  background-color: #ffffff;
  position: relative;
  height: 100%;
  padding: 2rem 1.5rem 4rem 1.5rem;
  border-bottom: 5px solid #171717;
}
body .row2 .genericCard .genericCardInfo .joinButton, body .row2 .courseCard .genericCardInfo .joinButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton, body .row2 .genericCard .genericCardInfo input[name=submitButton], body .row2 .courseCard .genericCardInfo input[name=submitButton] {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0rem;
}
body .row2 .genericCard .genericCardInfo .joinButton:hover, body .row2 .courseCard .genericCardInfo .joinButton:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton:hover, body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton:hover, body .row2 .genericCard .genericCardInfo input[name=submitButton]:hover, body .row2 .courseCard .genericCardInfo input[name=submitButton]:hover {
  text-decoration: none;
}
body .row2 .courseCard {
  display: grid;
  grid-template-rows: max-content;
}
body .row2 .courseCard .genericCardImage {
  aspect-ratio: 500/400;
}
body .row2 .courseCard .disabled {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.75;
}
body .row2 .courseCard .genericCardInfo {
  display: grid;
  padding: 2rem 1.5rem 0rem 1.5rem;
  grid-template-rows: unset;
}
body .row2 .courseCard .genericCardInfo .courseNumberAndLinks {
  align-self: end;
}
body .row2 .courseCard .genericCardInfo .courseMoreLinks {
  display: grid;
  flex-direction: row;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  align-self: end;
  margin-bottom: 2rem;
}
body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton {
  position: relative;
  margin: 0 0 0rem 0;
  transform: unset;
  left: unset;
  bottom: unset;
}
body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton {
  position: relative;
  margin: 0;
  transform: unset;
  left: unset;
  bottom: unset;
}
body .row2 .headlineGreyContainerText .pYearLine {
  display: none;
}
body .row2 .headlineGreyContainerText .publicationSearchBar {
  display: none;
}
body .row2 .headlineGreyContainerText .publicationContainer {
  padding: 0px;
  width: 100% !important;
}
body form[name=centralLoginForm] {
  padding-top: 100px;
  display: grid;
  justify-items: center;
}
body #tabbox1 .tabNav {
  border-bottom: solid 2px #171717;
  display: flex;
  align-items: stretch; /* Default */
  justify-content: space-between;
  width: 100%;
  margin: 0;
  margin-bottom: 2.5em;
  padding: 0;
}
body #tabbox1 .tabNav li {
  display: flex;
  flex: 0 1 auto; /* Default */
  justify-content: center;
  list-style-type: none;
  width: 100%;
  text-align: left;
  color: #171717;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  padding: 1.25rem 0 1.25rem 0;
  margin-right: 2.5rem;
  position: relative;
}
body #tabbox1 .tabNav li div.dot {
  position: absolute;
  bottom: -12px;
  height: 15px;
  width: 15px;
  border: solid 3px #171717;
  background: #ffffff;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}
body #tabbox1 .tabNav li div.dot.active {
  height: 25px;
  width: 25px;
  bottom: -17px;
  background: #171717;
}
body #tabbox1 .tab.active .tabcontent {
  transition: opacity 0.7s ease-in-out;
  opacity: 1;
  height: -moz-fit-content;
  height: fit-content;
  display: block;
}
body #tabbox1 .tab .tabheadline {
  display: none;
}
body #tabbox1 .tab .tabcontent {
  display: none;
  opacity: 0;
  height: 0;
  transition: opacity 0.5 ease-in-out;
  overflow: hidden;
}
body #tabbox1 .tab .tabcontent p {
  color: #171717;
}
body #tabbox1 .tab .tabcontent h2 {
  color: #171717;
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  body #tabbox1 .tab .tabcontent h2 {
    font-size: 2rem;
    margin-bottom: 1em;
  }
}
@media (min-width: 1200px) {
  body #tabbox1 .tab .tabcontent h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5em;
  }
}
body #tabbox2 .tabNav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px rgba(18, 41, 117, 0.15);
  margin-bottom: 1em;
}
body #tabbox2 .tabNav li {
  color: #171717;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  border-bottom: solid 6px transparent;
  transition: all 0.5s ease-in-out;
  padding: 1.25rem 2.5rem;
}
body #tabbox2 .tabNav li.active {
  border-bottom: solid 6px #74c7a4;
}
body #tabbox2 .tab.active.active .tabcontent {
  transition: opacity 0.7s ease-in-out;
  opacity: 1;
  height: auto;
}
body #tabbox2 .tab .tabheadline {
  display: none;
}
body #tabbox2 .tab .tabcontent {
  opacity: 0;
  height: 0;
  transition: opacity 0.5 ease-in-out;
  overflow: hidden;
}
body #tabbox2 .tab .tabcontent p {
  color: #171717;
}
body #tabbox2 .tab .tabcontent h2 {
  color: #171717;
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  body #tabbox2 .tab .tabcontent h2 {
    font-size: 2rem;
    margin-bottom: 1em;
  }
}
@media (min-width: 1200px) {
  body #tabbox2 .tab .tabcontent h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5em;
  }
}
body .lighterBlueBG {
  background-color: #e9ecf5;
}
body .whiteBG {
  background-color: #ffffff;
}
body .blackBG {
  background-color: transparent;
}
body .greenBG {
  background-color: #74c7a4;
}
body .yellowBG {
  background-color: #fedc3f;
}
body .darkBlueBG {
  background-color: #171717;
}
body .blueBG {
  background-color: #000000;
}
body .pinkBG {
  background-color: #c91ec3;
}
body .lightGreyBG {
  background-color: #f6f6f6;
}
body #infoimg1 {
  position: absolute;
  left: 20%;
  top: 40%;
  height: 100px;
  opacity: 1;
}
body #triggerImg1 {
  position: relative;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
}
body .section {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 95vh;
  width: 99.15vw;
  overflow: hidden;
}
body .section.blackBG {
  background-color: #171717;
}
@media (min-width: 576px) {
  body .section {
    height: initial;
  }
}
body .section.introSlide .gridlayout {
  padding: 85px 15px 15px 15px;
}
@media (min-width: 576px) {
  body .section.introSlide .gridlayout {
    padding: 80px 62px 1.5em 62px;
  }
}
@media (min-width: 1200px) {
  body .section.introSlide .gridlayout {
    padding: 85px 6em 1.5em 6em;
  }
}
@media (min-width: 1600px) {
  body .section.introSlide .gridlayout {
    padding: 85px 12em 1.5em 12em;
  }
}
body .section div.gridlayout {
  display: grid;
  min-height: 100vh;
  width: 100vw;
  padding: 36px 15px 1.5em 15px;
  box-sizing: border-box;
  grid-template-rows: 0fr 3fr 1px;
}
@media (min-width: 576px) {
  body .section div.gridlayout {
    min-height: 95vh;
    padding: 85px 62px 1.5em 62px;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout {
    padding: 85px 6em 1.5em 6em;
  }
}
@media (min-width: 1600px) {
  body .section div.gridlayout {
    padding: 85px 12em 1.5em 12em;
  }
}
@media (min-width: 2560px) {
  body .section div.gridlayout {
    padding: 85px 20em 1.5em 20em;
  }
}
body .section div.gridlayout #researchVideo {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body .section div.gridlayout div.row1 {
  color: #171717;
}
body .section div.gridlayout div.row1 .headline h1 {
  margin: 1rem 0rem;
  font-size: 2.3em;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row1 .headline h1 {
    font-size: 2.5em;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row1 .headline h1 {
    font-size: 4rem;
  }
}
body .section div.gridlayout div.row1 .headline .overline {
  text-decoration: overline;
}
body .section div.gridlayout div.row1 .headline.whiteText {
  color: #afdafa;
}
body .section div.gridlayout div.row2 {
  display: grid;
  align-items: start;
  height: 100%;
  grid-gap: 1em;
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 {
    align-items: center;
  }
}
body .section div.gridlayout div.row2.width-70 {
  width: unset;
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2.width-70 {
    width: 70%;
  }
}
body .section div.gridlayout div.row2 bold {
  font-weight: 600;
}
body .section div.gridlayout div.row2 h1,
body .section div.gridlayout div.row2 h2 {
  color: #171717;
  margin-left: -1px !important;
  margin-top: 2rem;
}
body .section div.gridlayout div.row2 h1.center,
body .section div.gridlayout div.row2 h2.center {
  text-align: center;
}
body .section div.gridlayout div.row2 h2 {
  margin-top: revert;
  margin-bottom: revert;
  font-size: 1.25rem;
}
body .section div.gridlayout div.row2 p,
body .section div.gridlayout div.row2 ul, body .section div.gridlayout div.row2 tr, body .section div.gridlayout div.row2 td {
  color: #171717;
}
body .section div.gridlayout div.row2 p.center,
body .section div.gridlayout div.row2 ul.center, body .section div.gridlayout div.row2 tr.center, body .section div.gridlayout div.row2 td.center {
  text-align: center;
}
body .section div.gridlayout div.row2.dark h1, body .section div.gridlayout div.row2.dark h2,
body .section div.gridlayout div.row2.dark p,
body .section div.gridlayout div.row2.dark ul, body .section div.gridlayout div.row2.dark tr, body .section div.gridlayout div.row2.dark td, body .section div.gridlayout div.row2.dark a {
  color: #ffffff !important;
}
body .section div.gridlayout div.row2.dark h1.center, body .section div.gridlayout div.row2.dark h2.center,
body .section div.gridlayout div.row2.dark p.center,
body .section div.gridlayout div.row2.dark ul.center, body .section div.gridlayout div.row2.dark tr.center, body .section div.gridlayout div.row2.dark td.center, body .section div.gridlayout div.row2.dark a.center {
  text-align: center;
}
body .section div.gridlayout div.row2.dark a {
  text-decoration: underline;
  transition: all 0.5s ease-in-out;
}
body .section div.gridlayout div.row2.dark a:hover {
  text-decoration: none;
}
body .section div.gridlayout div.row2 .grid-center {
  display: grid;
  justify-items: center;
  text-align: center;
}
body .section div.gridlayout div.row2 .grid-center p:nth-child(2) {
  text-align: left;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .grid-center {
    justify-items: start;
    text-align: left;
  }
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2.introSlide {
    width: 80%;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2.introSlide {
    width: 80%;
  }
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2.introSlide {
    width: 70%;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout div.row2.introSlide {
    width: 60%;
  }
}
body .section div.gridlayout div.row2.whiteText {
  color: white;
}
body .section div.gridlayout div.row2.whiteText h1,
body .section div.gridlayout div.row2.whiteText h2,
body .section div.gridlayout div.row2.whiteText p {
  color: white;
}
body .section div.gridlayout div.row2.withTabs {
  height: 100%;
  align-content: start;
}
body .section div.gridlayout div.row2 h1 {
  font-size: 1.7rem;
  line-height: 2.25rem;
  margin-bottom: 1em;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 h1 {
    line-height: unset;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 h1 {
    font-size: 2.5em;
    line-height: 3.3088235294rem;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout div.row2 h1 {
    font-size: 3rem;
    line-height: 3.9705882353rem;
  }
}
@media (min-width: 2560px) {
  body .section div.gridlayout div.row2 h1 {
    font-size: 5rem;
    line-height: 6.6176470588rem;
  }
}
@media (min-width: 2560px) {
  body .section div.gridlayout div.row2 h2 {
    font-size: 2.75rem;
  }
}
body .section div.gridlayout div.row2 p,
body .section div.gridlayout div.row2 ul,
body .section div.gridlayout div.row2 td {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65rem;
}
body .section div.gridlayout div.row2 p.font-large,
body .section div.gridlayout div.row2 ul.font-large,
body .section div.gridlayout div.row2 td.font-large {
  font-size: 2em !important;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 p,
  body .section div.gridlayout div.row2 ul,
  body .section div.gridlayout div.row2 td {
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
  body .section div.gridlayout div.row2 p.font-large,
  body .section div.gridlayout div.row2 ul.font-large,
  body .section div.gridlayout div.row2 td.font-large {
    font-size: 2em !important;
    line-height: 3.6666666667em !important;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 p,
  body .section div.gridlayout div.row2 ul,
  body .section div.gridlayout div.row2 td {
    font-size: 1.25rem;
    line-height: 2.2916666667rem;
  }
  body .section div.gridlayout div.row2 p.font-large,
  body .section div.gridlayout div.row2 ul.font-large,
  body .section div.gridlayout div.row2 td.font-large {
    font-size: 2em !important;
    line-height: 3.6666666667em !important;
  }
}
@media (min-width: 2560px) {
  body .section div.gridlayout div.row2 p,
  body .section div.gridlayout div.row2 ul,
  body .section div.gridlayout div.row2 td {
    font-size: 2rem;
    line-height: 3.6666666667rem;
  }
}
body .section div.gridlayout div.row2 td {
  padding: 0px 1em 1em 0px;
}
body .section div.gridlayout div.row2 .table-cv tbody td:last-child {
  vertical-align: top;
  white-space: nowrap;
  padding-right: 0;
}
body .section div.gridlayout div.row2.twoRows {
  grid-template-rows: 1fr 1fr;
}
body .section div.gridlayout div.row2.twoRows div:first-child {
  align-self: end;
}
body .section div.gridlayout div.row2.twoRows div:last-child {
  align-self: start;
}
body .section div.gridlayout div.row2.twoColumns {
  grid-template-columns: 1fr 1fr;
}
body .section div.gridlayout div.row2.twoColumns.evenWidth {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr !important;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2.twoColumns.evenWidth {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr !important;
  }
}
body .section div.gridlayout div.row2.twoColumns.textLeft {
  grid-template-columns: 1fr;
}
body .section div.gridlayout div.row2.twoColumns.textLeft div:nth-child(1) {
  align-self: center !important;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2.twoColumns.textLeft {
    grid-template-rows: 0.7fr 1fr;
    grid-template-columns: 1fr;
  }
  body .section div.gridlayout div.row2.twoColumns.textLeft div:last-child {
    align-self: center;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2.twoColumns.textLeft {
    grid-template-columns: 5fr 3fr;
    grid-template-rows: 1fr;
  }
  body .section div.gridlayout div.row2.twoColumns.textLeft div:last-child {
    display: block;
  }
}
body .section div.gridlayout div.row2.twoColumns.textRight {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
body .section div.gridlayout div.row2.twoColumns.textRight div:first-child {
  order: 2;
}
body .section div.gridlayout div.row2.twoColumns.textRight div:nth-child(2) {
  order: 1;
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2.twoColumns.textRight {
    grid-template-columns: 3fr 5fr;
    grid-template-rows: 1fr;
  }
  body .section div.gridlayout div.row2.twoColumns.textRight div:first-child {
    order: 1;
  }
  body .section div.gridlayout div.row2.twoColumns.textRight div:nth-child(1) {
    order: 1;
  }
}
.imageRight {
  width: 100%;
  height: 100%;
  display: grid !important;
}
.imageRight img {
  justify-self: center !important;
  align-self: center !important;
  max-height: clamp(5em, 45vh, 60vh) !important;
  max-width: clamp(5em, 50vw, 60vh) !important;
}
.imageRight img.fullHeight {
  right: unset;
  max-width: clamp(5em, 50vw, 60vh) !important;
  top: 0;
  position: relative;
}
@media (min-width: 576px) {
  .imageRight img.fullHeight {
    position: absolute;
    height: calc(100vh - 100px - 1.4em);
    right: -6em;
    max-height: unset !important;
  }
}

.imageLeft {
  width: 100%;
  height: 100%;
  display: grid !important;
}
.imageLeft img {
  justify-self: center !important;
  align-self: center !important;
  max-height: clamp(5em, 45vh, 60vh) !important;
  max-width: clamp(5em, 50vw, 60vh) !important;
}
.imageLeft svg {
  justify-self: center !important;
  align-self: center !important;
  max-height: clamp(5em, 45vh, 60vh) !important;
  max-width: clamp(5em, 50vw, 60vh) !important;
}

body .section div.gridlayout div.row2.twoColumns div {
  min-height: -moz-fit-content;
  min-height: fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
@media (min-width: 576px) and (min-height: 750px) {
  body .section div.gridlayout div.row2.twoColumns div {
    max-height: 90%;
  }
}
body .section div.gridlayout div.row2.twoColumns img {
  max-height: 50%;
}
body .section div.gridlayout div.row2.twoColumns svg {
  max-height: 45vh;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2.twoColumns svg {
    display: block;
  }
}
body .section div.gridlayout div.row2 .testimonial h1 {
  text-align: left;
  margin-bottom: 1em;
}
body .section div.gridlayout div.row2 .testimonial .withFirst {
  font-size: 1em !important;
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .testimonial .withFirst {
    font-size: 1.45em !important;
  }
}
body .section div.gridlayout div.row2 .readMore .moreLink {
  display: none;
  cursor: pointer;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .readMore .moreLink {
    display: inline-block;
  }
}
body .section div.gridlayout div.row2 .readMore .moreLink.hidden {
  display: none;
}
body .section div.gridlayout div.row2 .readMore .more {
  height: auto;
  opacity: 1;
  transition: all 1s ease-in-out;
}
body .section div.gridlayout div.row2 .readMore .more.close {
  height: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}
body .section div.gridlayout div.row2 .twoTextColumns {
  -moz-column-gap: 2em;
       column-gap: 2em;
  -moz-column-count: 1;
       column-count: 1;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .twoTextColumns {
    -moz-column-count: 2;
         column-count: 2;
  }
}
body .section div.gridlayout div.row2 button {
  border-radius: 2em;
  background-color: #171717;
  border: none;
  padding: 0.8em 2em;
  color: #ffffff;
  font-size: 1em;
  cursor: pointer;
}
body .section div.gridlayout div.row2 .textContainer {
  display: grid;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .textContainer {
    grid-template-columns: 4fr 4fr;
    grid-template-rows: unset;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .textContainer {
    grid-template-columns: 4fr 2.5fr;
    grid-template-rows: unset;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout div.row2 .textContainer {
    grid-template-columns: 5fr 4fr;
  }
}
body .section div.gridlayout div.row2 .textContainer div {
  align-self: center;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .textContainer div {
    font-size: 1em;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .textContainer div {
    font-size: 1.25em;
  }
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2 .textContainer div {
    font-size: 1.5em;
  }
}
.spacer200 {
  height: 200px;
}

body .section div.gridlayout div.row2 .reference_card {
  display: grid;
  grid-template-columns: unset;
  margin-bottom: 2em;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .reference_card {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
  }
}
body .section div.gridlayout div.row2 .reference_card .refCardHeadline {
  grid-column: 0 !important;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .reference_card .refCardHeadline {
    grid-column: 1/2 span !important;
  }
}
body .section div.gridlayout div.row2 .reference_card div h2, body .section div.gridlayout div.row2 .reference_card div h3 {
  font-family: "Noto JP", sans-serif;
  margin-bottom: 1em;
  margin-top: 0;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .reference_card div h2, body .section div.gridlayout div.row2 .reference_card div h3 {
    margin-bottom: 0em;
    margin-top: 0;
  }
}
body .section div.gridlayout div.row2 .reference_card div p {
  font-size: 1.1rem;
  line-height: 1.4rem;
}
.hr_profile ul {
  color: #171717;
}

body .section div.gridlayout div.row2 .hr_cards_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2em;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .hr_cards_container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .hr_cards_container {
    grid-template-columns: 1fr 1fr;
  }
}
body .section div.gridlayout div.row2 .hr_cards_container .hr_card {
  border-radius: 5px;
  padding: 1.8em 0.8em;
  align-self: stretch !important;
  box-shadow: 0 0px 14px rgba(0, 0, 0, 0.09);
  cursor: pointer;
}
body .section div.gridlayout div.row2 .hr_cards_container .hr_card:hover h2 {
  transition: all 0.25s ease-in-out;
  color: #171717;
}
.hr_offer {
  display: none;
}
.hr_offer ul li {
  color: #171717;
}

@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .hr_cards_container .hr_card {
    padding: 1.8em 1.8em;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .hr_cards_container .hr_card {
    padding: 1.8em 1.8em;
  }
}
body .section div.gridlayout div.row2 .hr_cards_container .hr_card h2 {
  font-size: 1.5rem;
  transition: all 0.25s ease-in-out;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .hr_cards_container .hr_card h2 {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .hr_cards_container .hr_card h2 {
    font-size: 1.6rem;
  }
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2 .hr_cards_container .hr_card h2 {
    font-size: 1.7rem;
  }
}
body .section div.gridlayout div.row2 .hr_cards_container .hr_card h2 span {
  color: #313131;
  font-size: 0.8em;
}
body .section div.gridlayout div.row2 .headline {
  color: #ffffff;
  display: grid;
  row-gap: 2em;
}
body .section div.gridlayout div.row2 .headline h1 {
  max-width: 93%;
  line-height: 1em;
  align-self: end;
  font-size: 2.3em;
  margin-top: 1em;
}
body .section div.gridlayout div.row2 .headline h1 span {
  display: inline-block;
  word-break: keep-all;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .headline h1 {
    font-size: 2.5em;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .headline h1 {
    font-size: 4.5em;
  }
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2 .headline h1 {
    font-size: 4.75rem;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout div.row2 .headline h1 {
    font-size: 5.75rem;
  }
}
body .section div.gridlayout div.row2 .headline div {
  align-self: start;
}
@media (min-width: 576px) {
  body .section div.gridlayout div.row2 .headline div {
    font-size: 2.5em;
  }
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .headline div {
    max-width: 83%;
    font-size: 3.5em;
  }
}
@media (min-width: 992px) {
  body .section div.gridlayout div.row2 .headline div {
    max-width: 8.2em;
    font-size: 4.75rem;
  }
}
@media (min-width: 1200px) {
  body .section div.gridlayout div.row2 .headline div {
    max-width: 8.2em;
    font-size: 5.75rem;
  }
}
body .section div.gridlayout div.row2 .headline div p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5em;
}
@media (min-width: 768px) {
  body .section div.gridlayout div.row2 .headline div p {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5em;
  }
}
body .section div.gridlayout div.row2 .steps h2 span {
  font-size: 2em;
}
body .section div.gridlayout div.row2 .steps p {
  min-height: 4em;
}
body .section div.gridlayout div.row2 .book {
  display: flex;
  height: calc(80vh - 100px);
  width: 100%;
}
body .section div.gridlayout div.row2 .book .cover {
  width: 50%;
  height: 100%;
}
body .section div.gridlayout div.row2 .book #p1 {
  z-index: 3;
}
body .section div.gridlayout div.row2 .book #p1 .front h2 {
  transform: rotate(-45deg) translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3rem;
}
body .section div.gridlayout div.row2 .book #p2 {
  z-index: 2;
}
body .section div.gridlayout div.row2 .book #p2 div.back div h2 {
  transform: rotate(-45deg) translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3rem;
}
body .section div.gridlayout div.row2 .book #bookLeft.open #p1 {
  transform: rotateY(-180deg);
  z-index: 1;
}
body .section div.gridlayout div.row2 .book #bookRight #p1 {
  transform: rotateY(-180deg);
  z-index: 1;
}
body .section div.gridlayout div.row2 .book #bookRight #p2 {
  transform: rotateY(-180deg);
  z-index: 1;
}
body .section div.gridlayout div.row2 .book #bookRight.open #p2 {
  transform: rotateY(0deg);
  z-index: 1;
}
body .section div.gridlayout div.row2 .book .content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  text-align: center;
  padding: 100px 20px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.025);
  display: grid;
}
body .section div.gridlayout div.row2 .book .back {
  z-index: 99;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
body .section div.gridlayout div.row2 .book .front {
  box-sizing: border-box;
}
body .section div.gridlayout div.row2 .book .book_sides_center {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  align-items: center;
  justify-items: center;
}
body .section div.gridlayout div.row2 .book .book_sides_center h2 {
  align-self: start;
}
body .section div.gridlayout div.row2 .book .book_sides_center img {
  max-width: 100%;
  max-height: 256px;
}
body .section div.gridlayout div.row2 .book .flip {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: 1.5s;
  color: #000;
}
body .section div.gridlayout div.row2 .book .flip-book {
  width: 50%;
  height: 100%;
  position: relative;
  perspective: 1500px;
}
body .section div.gridlayout div.row2 .book img {
  margin: 30px 0;
}
body .breadCrumpContainer {
  font-family: "Noto JP", sans-serif;
  padding: 90px 15px 15px 15px;
}
@media (min-width: 576px) {
  body .breadCrumpContainer {
    margin-top: 90px;
    padding: 16px 62px 16px 62px;
  }
}
@media (min-width: 1200px) {
  body .breadCrumpContainer {
    padding: 16px 6rem 16px 6rem;
  }
}
@media (min-width: 1600px) {
  body .breadCrumpContainer {
    padding: 16px 12rem 16px 12rem;
  }
}
body .breadCrumpContainer .breadcrumpspacer {
  color: #02082a;
}
body .breadCrumpContainer .breadcrumpspacer::before {
  content: " > ";
}
body .team-detail-image {
  max-width: 80% !important;
  padding: 0px !important;
  border-radius: 0px !important;
  margin: 0 !important;
}
body .rendered-form {
  font-size: 1.25rem;
}
body .rendered-form .form-group {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr;
  margin: 1em;
}
@media (min-width: 576px) {
  body .rendered-form .form-group {
    grid-template-columns: 1fr 2fr;
  }
}
body .rendered-form .form-group label, body .rendered-form .form-group input, body .rendered-form .form-group textarea {
  font-family: "Noto JP", sans-serif;
  color: #171717;
  padding: 0.81em;
  font-size: 1.25rem;
  border-radius: 10px;
}
body .rendered-form .form-group input, body .rendered-form .form-group textarea {
  border: solid 1px rgba(0, 0, 0, 0.5);
}
body .rendered-form .form-group button {
  border-radius: 2em;
  padding: 0.5em 1em;
  margin-right: 2em;
  font-family: "Noto JP", sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  cursor: pointer;
  color: #171717;
  border: #171717 solid 3px;
  background-color: rgba(18, 41, 117, 0);
}
body .slide1 {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  height: 100vh;
  background-repeat: no-repeat;
}
body .slide1 .row2 div.introTeaserText p {
  display: block !important;
  padding: 0px;
  font-weight: 300 !important;
  font-size: 1.125rem !important;
}
@media (min-width: 768px) {
  body .slide1 .row2 div.introTeaserText p {
    font-size: 3rem !important;
  }
}
@media (min-width: 992px) {
  body .slide1 .row2 div.introTeaserText p {
    font-size: 3.375rem !important;
  }
}
@media (min-width: 1200px) {
  body .slide1 .row2 div.introTeaserText p {
    font-size: 3.75rem !important;
  }
}
body .slide2 {
  color: #171717;
  display: grid;
  grid-template-rows: 1fr 2fr 2fr;
}
body .slide2 .row1 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  margin: 0 0 2em 0;
}
body .slide2 .row1 .headline h1 {
  font-size: 2.3em;
}
@media (min-width: 576px) {
  body .slide2 .row1 .headline h1 {
    font-size: 2.5em;
  }
}
@media (min-width: 768px) {
  body .slide2 .row1 .headline h1 {
    font-size: 4rem;
  }
}
body .slide2 .row1 .headline .overline {
  text-decoration: overline;
}
body .slide2 .row1 .headline.whiteText {
  color: #ffffff;
}
body .slide2 .steps {
  font-family: "Noto JP", sans-serif;
}
body .slide2 .steps h2 {
  font-weight: 200;
  font-family: "Noto JP", sans-serif;
  font-size: 1em;
}
@media (min-width: 768px) {
  body .slide2 .steps h2 {
    font-size: 2em;
  }
}
body .slide2 .steps h2 span {
  font-weight: 400;
  font-size: 2em;
}
body .slide2 .row2 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 3fr 5fr 3fr 1fr;
  justify-items: center;
}
body .slide2 .row2.whiteText {
  color: #ffffff;
}
body .slide2 .row2 .ideation {
  text-align: right;
}
body .slide2 .row2 .development p {
  word-break: keep-all;
}
body .slide2 .row2 .development p span:nth-child(1) {
  display: none;
}
@media (min-width: 992px) {
  body .slide2 .row2 .development p span:nth-child(1) {
    display: inline-block;
  }
}
body .slide2 .row2 .development p span:nth-child(2) {
  display: inline-block;
}
@media (min-width: 992px) {
  body .slide2 .row2 .development p span:nth-child(2) {
    display: none;
  }
}
body .slide2 .row2 .infoimg {
  display: grid;
  align-self: start;
  justify-items: center;
}
body .slide2 .row3 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  justify-items: center;
}
body .slide2 .row3 .design {
  width: 60%;
}
body .slide2 .row3.whiteText {
  color: #ffffff;
}
body .slide3 .row2 .textContainer {
  color: #171717;
}
body .slide3 .row2 .textContainer div p.info {
  display: none;
}
@media (min-width: 576px) {
  body .slide3 .row2 .textContainer div p.info {
    display: block;
  }
}
body .infoSlideMobile {
  display: block;
}
@media (min-width: 576px) {
  body .infoSlideMobile {
    display: none;
  }
}
body .mobileOnly {
  min-height: auto;
  overflow: visible;
}
body .mobileOnly .gridlayout {
  min-height: auto !important;
}
body .notMobile {
  display: none;
}
@media (min-width: 576px) {
  body .notMobile {
    display: block;
  }
}
body .mobileAnimation {
  color: white !important;
  padding-top: 80px;
}
body .mobileAnimation #ideation1 {
  opacity: 1;
  position: absolute;
  bottom: 4rem;
  margin-right: 36px;
}
body .mobileAnimation #design1 {
  opacity: 0;
  position: absolute;
  bottom: 4rem;
  margin-right: 36px;
}
body .mobileAnimation #development1 {
  opacity: 0;
  position: absolute;
  bottom: 4rem;
  margin-right: 36px;
}
body .mobileAnimation .ideation3 {
  opacity: 0;
  top: 100px;
  font-weight: normal !important;
}
body .mobileAnimation .design {
  opacity: 0;
  height: 0;
  top: 100;
}
body .mobileAnimation .design3 {
  opacity: 0;
  top: 200px;
}
body .mobileAnimation .engineering {
  opacity: 0;
  height: 0;
}
body .mobileAnimation .engineering3 {
  opacity: 0;
  top: 200px;
}
body .footer {
  background: #f0f0f0;
  display: grid;
  justify-items: center;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  font-family: "Noto JP", sans-serif;
  font-size: 1em;
  height: 100px !important;
  min-height: 100px !important;
  transition: bottom 0.5s ease-in-out;
  bottom: 0px;
}
body .footer .wrapper {
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.1fr;
  justify-items: center;
  height: 100px;
  width: 100vw;
}
@media (min-width: 992px) {
  body .footer .wrapper {
    grid-template-columns: 0.2fr 1fr 0.2fr;
  }
}
body .footer ul {
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: center;
}
@media (min-width: 768px) {
  body .footer ul {
    text-align: right;
  }
}
body .footer ul li {
  text-decoration: none;
  color: #484848;
  transition: all 0.5s ease-in-out;
}
body .footer ul li a:link, body .footer ul li a:visited {
  color: #080808;
}
body .footer ul li a:hover, body .footer ul li a:focus body .footer ul li a:active {
  color: #000800;
  text-decoration: underline;
}
body .footer ul li:first-child {
  font-weight: lighter;
  display: block;
}
@media (min-width: 768px) {
  body .footer ul li:first-child {
    display: inline-block;
    margin-right: 1em;
  }
}
body .footer ul li:nth-child(1n+2) {
  display: inline-block;
  margin-left: 0.9em;
}
body .footer.showFooter {
  bottom: 100px;
}
body .outer {
  display: grid;
  grid-auto-rows: 1fr;
  flex-direction: column;
  justify-items: center;
  position: relative;
  height: 100%;
  height: -webkit-fill-available;
}
body .outer .inner:nth-of-type(1) {
  align-self: end;
}
@media (min-width: 576px) {
  body .outer {
    align-items: unset;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .outer {
    align-items: end;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
}
body .outer .inner {
  width: 100%;
  display: flex;
  font-size: 4vw;
  position: absolute;
  left: 0;
  top: 0;
  height: calc(100vh - 200px);
}
@media (min-width: 576px) and (max-height: 550px) {
  body .outer .inner {
    font-size: 2vw;
  }
}
body .outer .inner .split-line {
  position: absolute;
}
body .outer .inner .split-line .char {
  opacity: 0;
}
body .outer .inner .split-line-info {
  position: absolute;
  margin-top: 2rem;
  font-size: 1.75rem;
  opacity: 0;
  top: 0;
  left: 0;
}
body .outer .inner.animation2 {
  flex-wrap: wrap;
  text-transform: uppercase;
  font-weight: 500;
}
body .outer .inner.animation2 .toAnimate {
  margin-right: 1ch;
  font-kerning: none;
  color: white;
  padding-bottom: 1.5rem;
}
body .outer .inner.animation2 .toAnimate:last-child {
  color: black;
  margin-right: 0ch;
}
@media (min-width: 576px) {
  body .outer .inner.animation2 .toAnimate {
    opacity: 0;
    padding: initial;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .outer .inner.animation2 .toAnimate {
    padding-bottom: 1rem;
  }
}
body .outer .inner.animation2 .toAnimate.active {
  opacity: 1;
}
body .outer .inner.animation2 .toAnimate.visited {
  opacity: 0.4;
}
body .outer .inner.animation2 .animationText.hidden {
  display: block;
  position: absolute;
  opacity: 0;
}
body .outer .inner.animation2 .animationText.visibleAnimationText {
  opacity: 1;
}
body .outer .inner.two {
  bottom: 150px;
  top: unset;
  left: 0px;
  position: absolute;
  height: 50%;
  flex-direction: column;
  justify-content: end;
}
@media (min-width: 576px) {
  body .outer .inner.two {
    flex-direction: row;
    justify-content: unset;
    bottom: unset;
    top: 40%;
    left: 0px;
    transform: translateY(-40%);
    position: relative;
    height: -moz-max-content;
    height: max-content;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .outer .inner.two {
    flex-direction: column;
    transform: unset;
    bottom: 0;
    top: unset;
  }
}
body .outer .inner.two .toAnimate:last-child {
  color: black;
  font-weight: 600;
}
body .outer .inner.one {
  position: absolute;
  display: none;
}
@media (min-width: 576px) {
  body .outer .inner.one {
    display: block;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  body .outer .inner.one {
    display: none;
  }
}
body .outer .inner.one #video {
  right: 0px;
  top: 30px;
  position: absolute;
  height: calc(100% - 60px);
}
@media (min-width: 576px) {
  body .outer .inner.one #video {
    display: block;
    right: 0;
  }
}
body .outer .inner.one #videooverlay {
  opacity: 0;
  display: none;
}
@media (min-width: 576px) {
  body .outer .inner.one #videooverlay {
    height: calc(100% - 60px);
    background-color: #70b6aa;
    opacity: 0.999999;
    position: absolute;
    right: 0;
    top: 30px;
    aspect-ratio: 1.77777778/1;
    right: 0;
    display: block;
  }
}

.skipButton {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 30px;
  background: url("../images/skipslide.png");
  cursor: pointer;
}

.kathanlogo {
  position: absolute;
  width: 150px;
  top: 50px;
  right: 15px;
  aspect-ratio: 600/570;
  z-index: 150;
  opacity: 1;
}
@media (min-width: 576px) {
  .kathanlogo {
    top: 12px;
    opacity: 1;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  .kathanlogo {
    opacity: 1;
  }
}
.kathanlogo .layer {
  position: absolute;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
}
.kathanlogo .layer1 {
  z-index: 10;
  background-image: url("/projects/KathanLab/static/images/layer.svg");
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-360deg);
}
.kathanlogo .layer2 {
  z-index: 20;
  background-image: url("/projects/KathanLab/static/images/layer.svg");
  width: 61.804697157%;
  height: 61.804697157%;
  transform: translate(-50%, -50%) rotate(-476.469deg);
}
.kathanlogo .layer3 {
  z-index: 30;
  background-image: url("/projects/KathanLab/static/images/layer.svg");
  width: 38.1982059067%;
  height: 38.1982059067%;
  transform: translate(-50%, -50%) rotate(-592.992deg);
}
.kathanlogo .layer4 {
  z-index: 40;
  background-image: url("/projects/KathanLab/static/images/layer.svg");
  width: 23.60828548%;
  height: 23.60828548%;
  transform: translate(-50%, -50%) rotate(-709.488deg);
}
.kathanlogo .layer5 {
  z-index: 50;
  background-image: url("/projects/KathanLab/static/images/layer.svg");
  width: 14.5910293449%;
  height: 14.5910293449%;
  transform: translate(-50%, -50%) rotate(-825.984deg);
}

.sectionWithAnimation {
  background-color: #70b6aa !important;
}
@media (min-width: 576px) {
  .sectionWithAnimation {
    background-color: #171717 !important;
  }
}
@media (min-width: 576px) and (max-height: 550px) {
  .sectionWithAnimation {
    background-color: #70b6aa !important;
  }
}

.plybtn {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: url("/projects/KathanLab/static/images/plybtn.png") no-repeat center center;
  cursor: pointer;
}

table.contactIcons img {
  width: 50%;
}
@media (min-width: 576px) {
  table.contactIcons img {
    width: 100%;
  }
}

.videoContainer {
  padding: 36px 15px 36px 15px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: none;
  gap: 2rem;
}
@media (min-width: 576px) {
  .videoContainer {
    padding: 36px 62px 36px 62px;
  }
}
@media (min-width: 768px) {
  .videoContainer {
    grid-template-rows: none;
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 1200px) {
  .videoContainer {
    padding: 2em 6em;
  }
}
@media (min-width: 1600px) {
  .videoContainer {
    padding: 2em 12em;
  }
}
@media (min-width: 2560px) {
  .videoContainer {
    padding: 2em 20em;
  }
}
.videoContainer img {
  border-radius: 5px;
  width: 100%;
}
.videoContainer h2 {
  color: #171717;
  font-family: "Noto JP", sans-serif;
  padding: revert;
  margin: revert;
}
.videoContainer .videotext {
  padding: revert;
  margin: revert;
  font-family: "Noto JP", sans-serif;
}
.videoContainer img {
  border-radius: 5px;
}

.videoListing {
  display: grid;
  grid-gap: 2rem;
  grid-template-rows: 1fr;
  justify-items: center;
  padding: 0px 15px 0px 15px;
}
@media (min-width: 576px) {
  .videoListing {
    padding: 0px 62px 0px 62px;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .videoListing {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .videoListing {
    padding: 2em 6em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1600px) {
  .videoListing {
    padding: 2em 12em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 2560px) {
  .videoListing {
    padding: 2em 20em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.videoListing img {
  border-radius: 5px;
  width: 100%;
}

.pResearchContext h2 {
  background-color: #e9ecf5;
  font-size: 1.2rem;
  font-family: "Noto JP", sans-serif;
  padding: 18px;
  margin-bottom: 0 !important;
  margin-top: 2em !important;
}
.pResearchContext p {
  background: #ffffff;
  padding: 18px 18px 18px 18px !important;
  margin: 0px !important;
}
.pResearchContext p:last-child {
  margin-bottom: 18px !important;
}
.pResearchContext em {
  font-size: unset !important;
}

.publicationSearchBar {
  display: grid;
  grid-template-rows: 0 1fr 1fr 0;
  padding: 0px;
  margin: 0px 15px 0px 15px;
  width: calc(100vw - 30px);
}
@media (min-width: 576px) {
  .publicationSearchBar {
    grid-template-columns: 62px 1fr 4fr 62px;
    grid-template-rows: none;
    margin: 0px;
    width: 100vw;
  }
}
@media (min-width: 1200px) {
  .publicationSearchBar {
    grid-template-columns: 6em 1fr 4fr 6em;
    grid-template-rows: none;
  }
}
@media (min-width: 1600px) {
  .publicationSearchBar {
    grid-template-columns: 12em 1fr 4fr 12em;
  }
}
@media (min-width: 2560px) {
  .publicationSearchBar {
    grid-template-columns: 20em 1fr 4fr 20em;
  }
}
.publicationSearchBar .searchInputButton {
  display: grid;
  border-left: 12px transparent solid;
  grid-template-columns: 1fr auto;
}
.publicationSearchBar .searchInputButton input {
  width: calc(100% - 0px);
}
.publicationSearchBar input, .publicationSearchBar button, .publicationSearchBar select {
  padding: 1rem 1rem;
  border: none;
  font-family: "Noto JP", sans-serif;
  font-size: 1.4rem;
  background-color: #ffffff;
}
.publicationSearchBar input:focus, .publicationSearchBar button:focus, .publicationSearchBar select:focus {
  outline: none;
}
.publicationSearchBar select {
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
}
.publicationSearchBar button {
  cursor: pointer;
}
.publicationSearchBar select {
  margin-bottom: 5px;
}
@media (min-width: 576px) {
  .publicationSearchBar select {
    margin-bottom: unset;
  }
}

.publicationContainer {
  display: grid;
  width: 100vw;
  padding: 0px 15px 18px 15px;
}
@media (min-width: 576px) {
  .publicationContainer {
    padding: 0 62px 31px 62px;
  }
}
@media (min-width: 1200px) {
  .publicationContainer {
    padding: 0 6em 3em 6em;
  }
}
@media (min-width: 1600px) {
  .publicationContainer {
    padding: 0 12em 3em 12em;
  }
}
@media (min-width: 2560px) {
  .publicationContainer {
    padding: 0 20em 3em 20em;
  }
}
.publicationContainer .pYearLine {
  margin-bottom: revert;
  color: #171717;
}
.publicationContainer .publication {
  position: relative;
  margin-bottom: 1rem;
}
.publicationContainer .publication .pContext {
  background-color: #e9ecf5;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: 63px 1fr;
  align-items: center;
  font-family: "Noto JP", sans-serif;
}
.publicationContainer .publication .pContext .pIcon {
  padding: 10px 12px;
  background-color: #171717;
  color: #fff;
  margin-right: 20px;
}
.publicationContainer .publication .pContent {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: unset;
  -moz-column-gap: 0;
       column-gap: 0;
  grid-auto-flow: dense;
  direction: rtl;
}
.publicationContainer .publication .pContent a {
  text-decoration: none;
}
.publicationContainer .publication .pContent em {
  font-size: unset !important;
}
@media (min-width: 576px) {
  .publicationContainer .publication .pContent {
    -moz-column-gap: 15px;
         column-gap: 15px;
  }
}
@media (min-width: 768px) {
  .publicationContainer .publication .pContent {
    grid-template-columns: 4fr 1fr;
  }
}
.publicationContainer .publication .pContent > div {
  background-color: #fff;
  padding: 40px 20px 0px 20px;
  margin: 0px 0;
  width: 100%;
  direction: ltr;
}
@media (min-width: 576px) {
  .publicationContainer .publication .pContent > div {
    padding: 40px 20px;
  }
}
.publicationContainer .publication .pContent > div:nth-child(2) {
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}
@media (min-width: 576px) {
  .publicationContainer .publication .pContent > div:nth-child(2) {
    padding: 40px 20px;
  }
}
.publicationContainer .publication .pContent > div:only-child {
  width: 100%;
  text-align: left;
}
.publicationContainer .publication .pContent .pAudio {
  position: relative;
}
.publicationContainer .publication .pContent .pAudio > i {
  font-size: 9rem;
}
.publicationContainer .publication .pContent .pAudio > audio {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.publicationContainer .publication .pContent .pVideo {
  padding: 0;
}
.publicationContainer .publication .pContent .pVideo > video {
  width: 100%;
}
.publicationContainer .publication .pContent .pTitle {
  color: #70b6aa;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 30px 0;
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  transition: -webkit-text-decoration 300ms ease-in-out;
  transition: text-decoration 300ms ease-in-out;
  transition: text-decoration 300ms ease-in-out, -webkit-text-decoration 300ms ease-in-out;
}
@media (min-width: 576px) {
  .publicationContainer .publication .pContent .pTitle {
    font-weight: 400;
    font-size: 2em;
  }
}
.publicationContainer .publication .pContent .pTitle:hover {
  text-decoration-color: #70b6aa;
  transition: all 1s ease-in-out;
}
.publicationContainer .publication .pContent .pAuthors {
  color: #02082a;
  margin: 0 0 30px 0;
}
.publicationContainer .publication .pContent .pToc {
  max-width: 512px;
  width: 100%;
  border: 0;
}
.publicationContainer .publication .pContent .joinButton, .publicationContainer .publication .pContent body input[name=submitButton], body .publicationContainer .publication .pContent input[name=submitButton], .publicationContainer .publication .pContent body .row2 .courseCard .genericCardInfo .courseMoreLinks .moodleButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .publicationContainer .publication .pContent .moodleButton, .publicationContainer .publication .pContent body .row2 .courseCard .genericCardInfo .courseMoreLinks .moreLinkButton, body .row2 .courseCard .genericCardInfo .courseMoreLinks .publicationContainer .publication .pContent .moreLinkButton {
  margin: 0 auto 0 0 !important;
}/*# sourceMappingURL=styles.css.map */