/* Inner Styles */

/* ///////////////////// */

/* -------------- */
/* SETUP */
/* DESKTOP */
/* TABLET */
/* MOBILE */
/* MINI-MOBILE */
/* SPECIAL BREAKPOINTS */
/* -------------- */

/* DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
02. Components
*/

/*
-----------------------------------------------------------------------------

01. Inner Content

-----------------------------------------------------------------------------
*/

/* POPUP *******************************************************************************/

aside.popup-wrap .popup {
  z-index: 999;
  position: fixed;
  top: 13rem;
  left: -3rem;
  width: min(30rem, 99vw);
  background-color: var(--blue);
  padding: 1.5rem 2.1875em 1.875rem 5.1875rem;
  box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 35%);
  transform: skewX(-10deg) translate3d(-100%,0,0);
  transition: 0.6s transform ease-out;
}

aside.popup-wrap .popup .popup__inner {
  transform: skewX(10deg);
}

/* --- Popup Content */

aside.popup-wrap .popup h3,
aside.popup-wrap .popup span {
  color: var(--white);
}

aside.popup-wrap .popup h3 {
  margin-top: 0;
}

aside.popup-wrap .popup span.p {
  display: inline-block;
  margin: 1em 0;
  margin-top: 0;
}

aside.popup-wrap .popup .block--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* --- Close Trigger */

aside.popup-wrap .popup .popup-close-trigger {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5rem;
  transform: skewX(10deg) translate3d(-1.5rem,1rem,0);
  cursor: pointer;
}

/* --- Open Trigger */

aside.popup-wrap .popup-open-trigger {
  position: fixed;
  z-index: 999;
  top: 13rem;
  padding: 1rem;
  left: -1rem;
  font-size: 1.75rem;
  background-color: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.375rem 0.75rem 2.25rem;
  box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 35%);
  transform: skewX(-10deg) translate3d(0,0,0);
  transition: 0.35s transform ease-out 0.6s;
  cursor: pointer;
}

aside.popup-wrap .popup-open-trigger .popup-open-trigger__inner {
  transform: skewX(10deg);
}

/* --- Popup Open State */

aside.popup-wrap.open .popup-open-trigger {
  transform: skewX(-10deg) translate3d(-100%,0,0);
  transition: 0.35s transform ease-out;
}

aside.popup-wrap.open .popup {
  transform: skewX(-10deg) translate3d(0,0,0);
  transition: 0.7s transform ease-out 0.2s;
}









/* POSTS *******************************************************************************/

/***** Post grid */

.post-grid .covered-image-wrap {
  height: 15.625em;
}

/* SINGLE POST *******************************************************************************/

/***** Layout */

.layout-wrap [class*="block--"] {
  margin: 3.125em 0;
}

/* Image */

.layout-wrap .block--single-image img {
  min-width: 100%;
}

/* GENERAL FORM STYLES *******************************************************************************/

.form-wrap .grid-wrap .box {
  padding: 0.625em;
}

/***** Labels */

.form-wrap span.label {
  margin-bottom: 0.5em;
  display: inline-block;
  font-size: 0.75em;
}

/***** Input fields  */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
  border: 0.0625em solid #000;
  padding: 0.625em 0.625em 0.625em 0.625em;
  border-radius: 0;
  margin-bottom: 0;
  background: #f4f4f4;
  color: #000;
}

.search-form input[type="search"] {
  -moz-appearance: none;/* older firefox */
  -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
  appearance: none; /* rest */
  border-radius: 0.1875em;
  margin-bottom: 0;
  background: #f4f4f4;
}

input, select, textarea {
  color: #000 !important;
  width: 100%;
}

textarea {
  background: #f4f4f4;
  padding: 0.625em;
  line-height: 1.5625em;
  max-height: 20em;
  border: 0.0625em solid black;
  border-radius: 0;
  margin: 0em;
  resize: none;
}

textarea:focus, input:focus,
textarea:active, input:active {
  color: #fff;
  border: 0.0625em solid #878787;
}

::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
}

/***** Submit button */

input[type="submit"] {
  float: right;
  background: #000;
  color: #fff !important;
  border-radius: 12.5em;
  padding: 0.3em 1em 0.45em;
  border: unset;
  margin-top: 0em;
  display: inline-block;
  cursor: pointer;
  width: auto;
}

/***** error handling */

.form-wrap .error-msg {
  color: #585758;
  font-size: 0.75em;
}

.form-wrap input.has-error {
  border-color: #585758;
}

/***** success handling */

form.submitted {
  display: none !important;
}

/* PASSWORD FORM STYLES *******************************************************************************/

.post-password-form p:nth-of-type(1) {
  display: none;
}

span.custom-password-message {
  display: block;
  margin: auto;
  max-width: 10em;
  padding: 0.125em;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.17);
  color: #585758;
}

.post-password-form label {
  font-size: 0em;
}
.post-password-form label input {
  font-size: 1.875em;
  padding: 0.25em 0.9375em;
  text-align: center;
}

.post-password-required input[type="submit"] {
  position: relative;
  float: unset;
  margin: 1.5625em auto;
  display: block;
}


/* IMPRINT + DATA PRIVACY *******************************************************************************/

.laws .box:nth-child(odd) {
  padding-right: 1.5625em;
}

.laws .box:nth-child(even) {
  padding-left: 1.5625em;
}

.laws a:hover,
.laws a.active-link,
.laws a {
  color: var(--blue);
  border-bottom: 0.0625em solid var(--blue);
  word-break: break-all;
}

.laws #oho-table p {
  margin: 0;
}

.laws #impressum-oho-logo {
  width: 1.5em;
  margin-right: 1.25em;
  margin-top: 0.3125em;
}

/* 404 *******************************************************************************/

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

.error404 h1 {
  margin: 0em 0 1.875em 0;
}

.error-404 p a:hover {
  cursor: pointer;
  border-bottom: 0.0625em solid #585758;
  color: #585758;
}


/*
-----------------------------------------------------------------------------

02. Components

-----------------------------------------------------------------------------
*/

/****** Swiper Gallery slider */
/*
.slider-wrap {
position: relative;
padding: 0 4rem;
}

.slider-wrap .slider {
overflow: hidden;
}

.slider-wrap .swiper-slide {
cursor: pointer;
}
*/

/****** Gallery slider */

.slick-next {
  display: none;
  font-size: 0em;
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 0;
  font-size: 0;
  height: 100%;
  width: 5em;
  right: 0;
  top: 0;
  z-index: 9;
  outline: none;
  background-color: #f6f6f6;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.slick-next::after {
  font-family: 'Icons Base'; /* insert 'Icons Base Rounded' for rounded version */
  position: absolute;
  content:'\0046';
  top: calc(50% - 20px);
  right: 1.125em;
  font-size: 2.5em;
}

.slick-next:hover {
  background-position: 1.75em center;
}

.slick-prev {
  display: none;
  font-size: 0em;
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 0;
  font-size: 0;
  height: 100%;
  width: 5em;
  left: 0;
  top: 0;
  z-index: 9;
  outline: none;
  background-color: #f6f6f6;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.slick-prev::after {
  font-family: 'Icons Base'; /* insert 'Icons Base Rounded' for rounded version */
  position: absolute;
  content:'\0045';
  top: calc(50% - 20px);
  left: 1.125em;
  font-size: 2.5em;
}

.slick-prev:hover {
  background-position: 1.375em center;
}

.gallery-slider {
  position: relative;
  overflow: hidden;
  background: transparent;
  height: 30em;
}

.gallery-slider__images {
  margin: 0;
  position: relative;
}
.gallery-slider__images.lightbox:hover {
  cursor: pointer;
}

.gallery-slider__images .item {
  padding: 0;
}

.gallery-slider__images .item .img-fill {
  height: 43.75em;
  overflow: hidden;
  text-align: center;
  float: left;
}

.gallery-slider__images .item .img-fill img {
  position: absolute;
  height: 43.75em;
  top: 50%;
  left: 50%;
  max-width: none !important;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.gallery-slider .img-fill {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.gallery-slider .slick-slider {
  padding: 0 !important;
}

.gallery-slider .slick-slide {
  float: left;
  outline: none;
  cursor: -webkit-grab;
  cursor: grab;
}

/**/

.slick-lightbox .slick-next {
  height: 100%;
  top: 0;
  right: 0;
  color: #fff;
  background: rgba(255,255,255,0);
}

.slick-lightbox .slick-prev {
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background: rgba(255,255,255,0);
}

.slick-lightbox-close {
  position: absolute;
  top: 0.9375em;
  right: 0.9375em;
  display: block;
  height: 3.75em;
  width: 3.75em;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  z-index: 99;
}

.slick-lightbox-close:focus {
  outline: none
}

.slick-lightbox-close:before {
  font-size: 0.9375em;
  color: #fff;
  font-family: 'Icons Base'; /* insert 'Icons Base Rounded' for rounded version */
  content:'\004a';
}

/***** Contact Form */

.layout-wrap .block--form {
  padding: 2rem 0;
}

.layout-wrap .block--form .form-wrap {
  max-width: 43.75em;
}

.layout-wrap .block--form .form-wrap .field-wrap {
  width: 100%;
  margin-bottom: 2rem;
}

.layout-wrap .block--form .form-wrap .success-wrap {
  padding: 2em;
}

/***** Gallery slider */
.slick-next {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 0;
  font-size: 0;
  height: 3.5rem;
  width: 3.5rem;
  right: -2rem;
  top: calc(50% - 2.5rem);
  z-index: 9;
  outline: none;
  color: #fff;
  background-color: #000;
  padding: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
}
.slick-next::after {
  font-family: 'Icons Base';
  position: absolute;
  content:'\0043';
  top: calc(50% - 1rem);
  right: .7rem;
  font-size: 2rem;
}

.slick-next:hover {
  background-position: 1.75rem center;
}

.slick-prev {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 0;
  font-size: 0;
  height: 3.5rem;
  width: 3.5rem;
  left: -2rem;
  top: calc(50% - 2.5rem);
  z-index: 9;
  outline: none;
  color: #fff;
  background-color: #000;
  padding: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
}
.slick-prev::after {
  font-family: 'Icons Base';
  position: absolute;
  content:'\0044';
  top: calc(50% - 1rem);
  left: .7rem;
  font-size: 2rem;
}

.slick-prev:hover {
  background-position: 1.375rem center;
}

.gallery-slider {
  position: relative;
}

.gallery-slider__images {
  margin: 0;
  position: relative;
}
.gallery-slider__images.lightbox:hover {
  cursor: pointer;
}

.gallery-slider__images .item {
  padding: 0;
}

.gallery-slider__images .item .img-fill {
  height: 30em;
  overflow: hidden;
  text-align: center;
  float: left;
}

.gallery-slider__images .item .img-fill img {
  position: absolute;
  height: 100%;
  top: 50%;
  width: 100%;
  left: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  max-width: none!important;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 0 0.5em;
}

.gallery-slider .img-fill {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.gallery-slider .slick-slider {
  height: 100%;
  padding: 0 !important;
}

.gallery-slider .slick-slide {
  float: left;
  outline: none;
}

.gallery-captions {
  margin: 2rem 0;
}

/**/

.slick-lightbox {
  background: rgba(255,255,255,.95) !important;
}

.slick-lightbox .slick-lightbox-slick-caption {
  padding-top: 1.5rem;
  max-width: 62.5em;
  margin: auto;
  display: block;
  color: #000;
  font-size: 0.95rem;
  line-height: 1.5rem;
}

.slick-lightbox .slick-next {
  height: 100%;
  top: 0;
  right: 0;
  width: 5rem;
  color: #fff;
  background: rgba(255,255,255,0);
  opacity: 1;
}
.slick-lightbox .slick-next::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 2.5rem);
  width: 5rem;
  height: 5rem;
  background: var(--blue);
}
.slick-lightbox .slick-next::after {
  right: 1.2rem;
  font-size: 2.5rem;
  top: calc(50% - 1.3rem);
}

.slick-lightbox .slick-prev {
  height: 100%;
  top: 0;
  left: 0;
  width: 5rem;
  color: #fff;
  background: rgba(255,255,255,0);
  opacity: 1;
}
.slick-lightbox .slick-prev::before {
  content: '';
  position: absolute;
  right: 0;
  top: calc(50% - 2.5rem);
  width: 5rem;
  height: 5rem;
  background: var(--blue);
}
.slick-lightbox .slick-prev::after {
  left: 1.2rem;
  font-size: 2.5rem;
  top: calc(50% - 1.3rem);
}

.slick-lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 3.75rem;
  width: 3.75rem;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: #000;
  padding: 0;
  border: none;
  z-index: 99;
}

.slick-lightbox-close:focus {
  outline: none
}

.slick-lightbox-close:before {
  font-size: 1.5rem;
  line-height: 1.2rem;
  font-family: 'Icons Base';
  content:'\004a';
}

/***** Quote Slider */

.layout-wrap .block--quote-slider {
  margin-top: -3rem;
}

.layout-wrap .block--quote-slider .quote-wrap {
  min-height: 6.25em;
  padding: 2em 8em 2em 2em;
  position: relative;
}

.layout-wrap .block--quote-slider .quote-wrap::after {
  content: '"';
  text-align: center;
  position: absolute;
  z-index: 1;
  font-style: italic;
  right: .2rem;
  top: -2.5rem;
  font-size: 15rem;
  width: 10rem;
}

.layout-wrap .block--quote-slider .quote-wrap p {
  margin-top: 0;
}

.layout-wrap .block--quote-slider .box-portrait .covered-image-wrap {
  min-height: 25em;
}

.layout-wrap .block--quote-slider .box-portrait ~ .box-quote .quote-wrap {
  min-height: 25em;
}

.layout-wrap .block--quote-slider .box:nth-of-type(1) {
  padding-right: 0;
  margin: 0 auto;
}
.layout-wrap .block--quote-slider .box:nth-of-type(2) {
  padding-left: 0;
}

.layout-wrap .block--quote-slider .box--middleHeight .quote-wrap {
  min-height: 25em;
}

.layout-wrap .block--quote-slider .box--middleHeight.box-quote {
  margin-bottom: 0;
}

/**/

.layout-wrap .block--quote-slider .slick-prev {
  left: -1rem;
}
.layout-wrap .block--quote-slider .slick-next {
  right: -1rem;
}
.layout-wrap .slick-dots {
  text-align: center;
}
.layout-wrap .slick-dots li {
  display: inline-block;
}
.layout-wrap .slick-dots li::before {
  content: none;
}
.layout-wrap .slick-dots li button {
  text-indent: -62499.9375em;
  font-size: 0;
  background: #fff;
  border: .1rem solid #dfdfdf;
  width: 0.9375em;
  height: 0.9375em;
  margin: 0 0.625em;
}
.layout-wrap .slick-dots li.slick-active button {
  background: #000;
  border: .1rem solid #000;
}

/***** Contact persons */

.layout-wrap .block--contact-person {
  position: relative;
  padding: 3rem 0 0;
  margin: 2rem 0;
}

.layout-wrap .block--contact-person::after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0); /* fallback to prevent display glitches */
  background: #ececec;
  left: -50vw;
  top: 0;
  width: 200vw;
  height: 100%;
}

.layout-wrap .block--contact-person .portrait-box {
  height: 15rem;
}

.layout-wrap .block--contact-person .grid-wrap .grid-wrap .box:first-of-type {
  padding-left: 0;
}

/***** Video iframe */

.video-wrap {
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.video-wrap iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/***** Accordion */

.accordion-wrap {
  border: 0.125em solid;
  padding: 0;
}

.accordion-trigger {
  padding: 1.5625em 1.25em;
  position: relative;
  cursor: pointer;
}

.accordion-trigger::after {
  font-family: 'Icons Base';
  content: "\0045";
  position: absolute;
  right: 1.25em;
  top: 1.6875em;
  font-size: 1.875em;
}
.accordion-trigger.active::after {
  content: "\0048";
}

.accordion-trigger h3 {
  margin: 0;
}

.accordion-content {
  max-height: 0;
  padding: 0 1.25em;
  overflow: hidden;
}

/* CUSTOM COMPONENTS  **************************************************************************************************************************************************************************/

/******* Fly-in */

.fly-in-wrap {
  position: absolute;
  top: 225px;
  right: -0.225em;
  height: 100%;
  pointer-events: none;
}

.fly-in {
  z-index: 999;
  position: -webkit-sticky;
  position: sticky;
  top: 8.99em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  border: 0.1em solid var(--white);
  background: var(--white);
  padding: 0.3em 2em 0.35em;
  pointer-events: all;
  /* -webkit-transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out;
  -o-transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out;
  transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out; */
}

.fly-in .fly-in__content {
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
  -webkit-transition: color 300ms ease-out;
  transition: color 300ms ease-out;
  color: var(--blue);
}

/*-- Scrolled Nav Fly In  -*/

.scrolled-nav .fly-in {
  top: 4.99em;
  /* -webkit-transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out;
  -o-transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out;
  transition: border 300ms ease-out, background 300ms ease-out, top 500ms ease-out; */
}

/*--- Intersected Fly-in -*/

.fly-in.invert {
  background: var(--blue);
  border: 0.1em solid var(--blue);
}

.fly-in.invert .fly-in__content {
  color: var(--white);
}


/****** home hero */

body.home .sec-wrap.hero {
  margin-top: 0;
  padding-top: 0;
}

body.home .sec-wrap.hero .sec-wrap__inner {
  margin: 0 auto;
}

/* --- hero video slider */

body.home .sec-wrap.hero .slider-wrap {
  position: relative;
  width: 100%;
  height: 50rem;
  padding: 0;
}

body.home .sec-wrap.hero .slider-wrap::before {
  z-index: 2;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgb(0,33,131);
  background: -webkit-linear-gradient(top, rgba(0,33,131,1) 0%, rgba(0,33,131,0) 25%);
  background: linear-gradient(180deg, rgba(0,33,131,1) 0%, rgba(0,33,131,0) 25%);
}

body.home .sec-wrap.hero video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

body.home .sec-wrap.hero video:not(:first-child) {
  opacity: 0;
}

/* --- hero title on video */

body.home .sec-wrap.hero .video-title-wrap {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 79.375em;
  height: auto;
  margin: auto;
  padding: 4.25em 2.1875em;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
}

body.home .sec-wrap.hero h1.title {
  margin-bottom: 0;
}


/****** home content */

.sec-wrap.home-content h2.secondary-title {
  margin-bottom: 2em;
}


/****** Dark overlay */

.dark-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--trans-black);
}


/******* Global Thumbnails */

.thumbnail-wrap .slanted-wrap {
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  border: 0.1em solid var(--blue);
}

.thumbnail-wrap .thumbnail--top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  min-height: 8rem;
  margin-bottom: 2em;
}

.thumbnail-wrap h3.title {
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
  margin: 0;
  padding: 0.3em 0.625em 0.3em;
  text-align: center;
}

.thumbnail-wrap .square-ratio-wrap {
  position: relative;
  padding-top: 100%;
  height: 0;
  overflow: hidden;
}

.thumbnail-wrap .square-ratio-wrap .covered-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* width: 20vw;
  height: 20vw;
  max-width: 20rem;
  max-height: 20rem; */
}


/****** Overflow Box */

/* .overflow-box {
position: relative;
width: 100%;
height: 17rem;
max-height: 20vw;
}

.overflow-box h3.title {
z-index: 10;
position: relative;
margin: -0.75em 0 0 0;
max-width: 90%;
}

.overflow-box .image-wrap.overflow {
padding: 1em 2em 0;
}

.overflow-box .image-wrap.overflow .inner-image-wrap::before {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
background: var(--bg--grey-img);
}

.overflow-box .inner-image-wrap {
overflow: hidden;
}

.overflow-box .inner-image-wrap img {
transform: scale(1.1) translateY(0);
transition: transform 700ms cubic-bezier(.4,1.8,.62,.98);
}
*/
/*--- overflow-box hover state */
/*
.overflow-box:hover .inner-image-wrap img {
transform: scale(1.1) translateY(2%);
} */


/******* Text Box */

.text-box {
  background-color: var(--white);
  padding: 1em;
}

.text-box.full-height {
  height: 100%;
}

.text-box h3.title {
  margin-top: 0;
}

.text-box.trans-bg {
  background-color: transparent;
  padding: 1em 0;
}


/******* About Logo Sizes */

.image-wrap.gassner-wrap {
  max-width: 10rem;
  width: 12vw;
}

.image-wrap.moba-wrap {
  width: 10vw;
  max-width: 9rem;
}

.image-wrap.rds-wrap {
  width: 18vw;
  max-width: 15rem;
}

.image-wrap.minebea-wrap {
  width: 13vw;
  margin-top: 1.5rem;
}

.image-wrap.argeo-wrap {
  margin-top: -1rem;
  width: 13vw;
}

/*--- image wrap hover */

.image-wrap.dropHover .inner-image-wrap {
  overflow: hidden;
}

.image-wrap.dropHover .inner-image-wrap  img {
  -webkit-transform: scale(1.1) translateY(0);
  transform: scale(1.1) translateY(0);
  -webkit-transition: -webkit-transform 700ms cubic-bezier(.4,1.8,.62,.98);
  transition: -webkit-transform 700ms cubic-bezier(.4,1.8,.62,.98);
  transition: transform 700ms cubic-bezier(.4,1.8,.62,.98);
  transition: transform 700ms cubic-bezier(.4,1.8,.62,.98), -webkit-transform 700ms cubic-bezier(.4,1.8,.62,.98);
}

.image-wrap.dropHover:hover .inner-image-wrap img {
  -webkit-transform: scale(1.1) translateY(2%);
  transform: scale(1.1) translateY(2%);
}


/* ABOUT PAGE *******************************************************************************/

/****** Partner Section */

/*--- Partner Logos */

/* .sec-wrap.about-wrap .sec-wrap__inner.second img {
width: 12rem;
}

.sec-wrap.about-wrap .sec-wrap__inner.second img.rds-logo {
width: 18rem;
} */


/********* Custom Accordion */

.custom-accordion__input {
  position: absolute;
  display: block;
  opacity: 0;
  z-index: -1;
}

.custom-accordion__label {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  padding-left: 4em;
  cursor: pointer;
}

.custom-accordion__content {
  max-height: 0;
  opacity: 0;
  -webkit-transition: unset;
  transition: unset;
}

label.custom-accordion__label::before {
  z-index: 1;
  font-size: 1.75em;
  color: var(--blue);
  content: '+';
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  left: 15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

label.custom-accordion__label::after {
  content: '';
  position: absolute;
  width: 2.5em;
  height: 1.75em;
  top: 50%;
  left: 0;
  -webkit-transform: skewX(-10deg) translateY(-50%);
  transform: skewX(-10deg) translateY(-50%);
  border: 0.1em solid var(--blue);
}

.custom-accordion__input:checked~label.custom-accordion__label::before {
  content: '–';
  color: var(--white);
  top: 48%;
  left: 14px;
}

.custom-accordion__input:checked~label.custom-accordion__label::after {
  background: var(--blue);
}

.custom-accordion__input:checked~.custom-accordion__content {
  max-height: 100%;
  opacity: 1;
  padding: 1em 0 0;
  -webkit-transition: 500ms all cubic-bezier(.4,1.8,.62,.98);
  transition: 500ms all cubic-bezier(.4,1.8,.62,.98);
}




/* TABLET //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
02.
*/

@media only screen and (max-width: 55em) {

  /*
  -----------------------------------------------------------------------------

  01. Inner Content

  -----------------------------------------------------------------------------
  */

  /* POPUP *******************************************************************************/

  aside.popup-wrap .popup-open-trigger,
  aside.popup-wrap .popup {
    z-index: 100;
    top: 7rem;
  }


  aside.popup-wrap .popup {
    padding: 1.125rem 2.1875em 1.5rem 5.1875rem;
  }



  /****** home hero */

  /* --- hero video slider */

  body.home .sec-wrap.hero .slider-wrap {
    height: 40rem;
  }

  body.home .sec-wrap.hero .slider-wrap::before {
    content: none;
    display: none;
  }

  /* --- hero title on video */

  body.home .sec-wrap.hero .video-title-wrap::before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,33,131);
    background: -webkit-linear-gradient(top, rgba(0,33,131,0) 0%, rgba(0,33,131,1) 100%);
    background: linear-gradient(180deg, rgba(0,33,131,0) 0%, rgba(0,33,131,1) 100%);
  }



  /*
  -----------------------------------------------------------------------------

  02. Components

  -----------------------------------------------------------------------------
  */

  /***** Gallery slider */

  .gallery-slider,
  .gallery-slider__images .item .img-fill,
  .gallery-slider__images .item .img-fill img {
    height: 30vw;
  }

  .slick-next,
  .slick-prev {
    width: 3.75em;
  }

  .slick-next::after {
    right: 0.5em;
    font-size: 1.875em;
    top: calc(50% - 15px);
  }

  .slick-prev::after {
    left: 0.5em;
    font-size: 1.875em;
    top: calc(50% - 15px);
  }

  /* gallery lightbox */

  .slick-lightbox .slick-prev::before {
    right: unset;
    left: 50%;
    top: 50%;
    width: 4rem;
    height: 4rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .slick-lightbox .slick-prev::after {
    left: 50%;
    font-size: 2rem;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .slick-lightbox .slick-next::before {
    right: unset;
    left: 50%;
    top: 50%;
    width: 4rem;
    height: 4rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .slick-lightbox .slick-next::after {
    right: unset;
    left: 50%;
    font-size: 2rem;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  /***** Quote Slider */

  .space-md .layout-wrap .block--quote-slider .box--evenPad {
    padding: 0 1.25em;
  }

  .space-md .layout-wrap .block--quote-slider .box-portrait {
    margin-bottom: 0;
  }

  .layout-wrap .block--quote-slider .box:nth-of-type(1) {
    padding-right: 1.25em;
  }
  .layout-wrap .block--quote-slider .box:nth-of-type(2) {
    padding-left: 1.25em;
  }

  .layout-wrap .block--quote-slider .box-portrait ~ .box-quote .quote-wrap {
    min-height: auto;
  }

  .layout-wrap .block--quote-slider .quote-wrap::after {
    right: .1em;
  }


  /* CUSTOM COMPONENTS  **************************************************************************************************************************************************************************/


  /******* Fly-in */

  .fly-in-wrap {
    display: none;
    /* top: 5vh; */
  }

  .fly-in {
    display: none;
    /* z-index: 0;
    position: relative; */
  }

  /* .home .fly-in-wrap {
  display: none;
  top: 10vh;
  } */



  /************** Overflow Box */

  .overflow-box {
    max-height: 30vw;
  }

  .overflow-box .image-wrap.overflow {
    padding: 1em .75em 0;
  }


  /* .overflow-box .image-wrap.overflow .inner-image-wrap::before {
  width: calc(100% - 1.5em);
  } */


  /******* About Logo Sizes */

  .image-wrap.minebea-wrap {
    margin-top: 1rem;
  }

  .image-wrap.half-medium img {
    width: 100%;
  }

  .image-wrap.gassner-wrap {
    width: 22vw;
    max-width: 15rem;
  }

  .image-wrap.moba-wrap {
    width: 22vw;
    max-width: 15rem;
  }

  .image-wrap.moba-wrap img {
    margin-left: -3px;
  }

  .image-wrap.rds-wrap {
    width: 30vw;
    min-width: 6rem;
    max-width: 20rem;

  }

  .image-wrap.minebea-wrap {
    margin-top: 27px;
    width: 20vw;
  }

  .image-wrap.argeo-wrap {
    margin-top: -1em;
    margin-left: -1.15em;
    width: 25vw;
  }


  /* IMPRINT + DATA PRIVACY *******************************************************************************/

  .laws #impressum-oho-logo {
    width: 3vw;
  }



}


/* MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
02. Components
*/

@media only screen and (max-width: 36.25em) {


  /*
  -----------------------------------------------------------------------------

  01. Inner Content

  -----------------------------------------------------------------------------
  */

  /* POPUP *******************************************************************************/

  aside.popup-wrap .popup {
    left: -3.5rem;
  }

  aside.popup-wrap .popup-open-trigger {
    font-size: 1.5rem;
    padding: 0.375em 0.75em 0.375em 1.25em;
  }

  aside.popup-wrap .popup .popup-close-trigger {
    font-size: 1.25rem;
    transform: skewX(10deg) translate3d(-1.25rem,0.75rem,0);
  }
  

  /****** Global Thumbnails */

  .thumbnail-wrap {
    max-width: 20rem;
    margin: 0 auto;
  }

  .thumbnail-wrap .thumbnail--top {
    min-height: 5rem;
  }

  /****** home hero */

  /* --- hero video slider */

  body.home .sec-wrap.hero .slider-wrap {
    height: 30rem;
  }

  /* --- hero title on video */

  body.home .sec-wrap.hero .video-title-wrap {
    padding: 2.25em 1.5625em;
  }


  /*  IMPRINT + DATA PRIVACY *******************************************************************************/

  .laws .box:nth-child(odd),
  .laws .box:nth-child(even) {
    padding: 0;
  }

  /*
  -----------------------------------------------------------------------------

  02. Components

  -----------------------------------------------------------------------------
  */

  /***** Gallery slider */

  .slick-lightbox-close {
    top: 0;
    right: -0.3125em;
  }

  /***** Quote Slider */
  .space-md .layout-wrap .block--quote-slider .box--evenPad {
    padding: 0 0.9375em;
  }

  .layout-wrap .block--quote-slider .box-portrait .covered-image-wrap {
    min-height: 62vw;
  }

  .layout-wrap .block--quote-slider .quote-wrap {
    padding: 2em 5em 2em 2em;
  }

  .layout-wrap .block--quote-slider .box:nth-of-type(1) {
    padding-right: .9375em;
  }
  .layout-wrap .block--quote-slider .box:nth-of-type(2) {
    padding-left: .9375em;
  }

  /* gallery lightbox */

  .slick-lightbox .slick-prev::before {
    width: 2.5rem;
    height: 2.5rem;
  }

  .slick-lightbox .slick-prev::after {
    font-size: 5vw;
  }

  .slick-lightbox .slick-next::before {
    width: 2.5rem;
    height: 2.5rem;
  }

  .slick-lightbox .slick-next::after {
    font-size: 5vw;
  }


  /* CUSTOM COMPONENTS  **************************************************************************************************************************************************************************/


  /******* Fly-in */
  /*
  .fly-in-wrap {
  top: 2vh;
}

.home .fly-in-wrap {
top: 10vh;
}
*/


/************** Overflow Box */

.overflow-box {
  max-height: 35vw;
}

.overflow-box .image-wrap.overflow {
  padding: 0.65em 0.3em ;
}

/* .overflow-box .image-wrap.overflow .inner-image-wrap::before {
width: calc(100% - 0.6em);
} */


/******* About Logo Sizes */

.image-wrap.gassner-wrap {
  width: 29vw;
}

.image-wrap.moba-wrap {
  width: 29vw;
}

.image-wrap.rds-wrap {
  width: 42vw;
}

.image-wrap.minebea-wrap {
  margin-top: 1em;
  width: 32vw;
}

.image-wrap.argeo-wrap {
  margin-left: -1em;
  width: 38vw;
}


/* IMPRINT + DATA PRIVACY *******************************************************************************/

.laws #impressum-oho-logo {
  width: 4vw;
}


}

/* MINI-MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Inner Content
02. Components
*/

@media only screen and (max-width: 23.125em) {

  /*
  -----------------------------------------------------------------------------

  01. Inner Content

  -----------------------------------------------------------------------------
  */

  /* POPUP *******************************************************************************/

  aside.popup-wrap .popup-open-trigger,
  aside.popup-wrap .popup-close-trigger {
    font-size: 1.375rem;
  }


  aside.popup-wrap .popup-open-trigger,
  aside.popup-wrap .popup {
    top: 5rem;
  }



  /****** Global Thumbnails */

  .thumbnail-wrap .thumbnail--top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    min-height: 0;
    margin-top: 2em;
    margin-bottom: 1.5em;
  }



  /*
  -----------------------------------------------------------------------------

  02. Components

  -----------------------------------------------------------------------------
  */

  /***** Gallery slider */

  .gallery-slider,
  .gallery-slider__images .item .img-fill,
  .gallery-slider__images .item .img-fill img {
    height: 45vw;
  }

  .slick-next,
  .slick-prev {
    width: 1.875em;
  }

  .slick-next::after {
    right: 0.3125em;
    font-size: 1.25em;
    top: calc(50% - 10px);
  }

  .slick-prev::after {
    left: 0.3125em;
    font-size: 1.25em;
    top: calc(50% - 10px);
  }


  /* CUSTOM COMPONENTS  **************************************************************************************************************************************************************************/

  /********* Custom Accordion */

  label.custom-accordion__label::before {
    font-size: 1.5em;
    left: 16px;
  }

  .custom-accordion__input:checked~label.custom-accordion__label::before {
    left: 15px;
  }


  /* IMPRINT + DATA PRIVACY *******************************************************************************/

  .laws #impressum-oho-logo {
    width: 4.4vw;
    margin-right: 1em;
  }



}


/* SPECIAL BREAKPOINTS //////////////////////////////////////////////////////// */