@charset "utf-8";



/*
 * Webfonts
 * ----------------------------------------- */

@font-face {
  font-family: 'apercu';
  src: url( '../fonts/apercu-regular.eot' );
  src: url( '../fonts/apercu-regular.eot?#iefix' ) format( 'embedded-opentype' ),
       url( '../fonts/apercu-regular.woff' ) format( 'woff' ),
       url( '../fonts/apercu-regular.woff2' ) format( 'woff2' ),
       url( '../fonts/apercu-regular.ttf' ) format( 'truetype' ),
       url( '../fonts/apercu-regular.svg' ) format( 'svg' );
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'apercu';
  src: url( '../fonts/apercu-regular-italic.eot' );
  src: url( '../fonts/apercu-regular-italic.eot?#iefix' ) format( 'embedded-opentype' ),
       url( '../fonts/apercu-regular-italic.woff' ) format( 'woff' ),
       url( '../fonts/apercu-regular-italic.woff2' ) format( 'woff2' ),
       url( '../fonts/apercu-regular-italic.ttf' ) format( 'truetype' ),
       url( '../fonts/apercu-regular-italic.svg' ) format( 'svg' );
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'apercu';
  src: url( '../fonts/apercu-bold.eot' );
  src: url( '../fonts/apercu-bold.eot?#iefix' ) format( 'embedded-opentype' ),
       url( '../fonts/apercu-bold.woff' ) format( 'woff' ),
       url( '../fonts/apercu-bold.woff2' ) format( 'woff2' ),
       url( '../fonts/apercu-bold.ttf' ) format( 'truetype' ),
       url( '../fonts/apercu-bold.svg' ) format( 'svg' );
  font-weight: 700;
  font-style: normal;
}



/*
 * Resets
 * ----------------------------------------- */

html,
body {
  margin: 0;
}

h1, h2, h3,
p,
ul, li,
blockquote  {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  outline: none;
  cursor: hand;
  cursor: pointer;
  color: #040037;
  border-bottom: 1px solid;
}

a:hover {
  border-color: transparent;
}

.img-link,
.project-thumb-link, /* Remove border below images on front page */
a img { /* Remove border around linked images in IE10 and below */
  border: 0;
}

::-moz-selection {
  background: #ffdee4;
}

::selection {
  background: #ffdee4;
}

.preload-imgs {
  margin-left: -9999px;
  width: 0;
  height: 0;
}



/*
 * Basics
 * ----------------------------------------- */

html {
  font-size: 36px;
}

body {
  color: #040037;
  font-family: 'Apercu', 'helvetica', sans-serif;
  line-height: 1.5;
  font-size: .875rem;
  letter-spacing: .025em;
  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  background-image: url( '../img/tildentango.svg' );
  background-size: 22.75% auto;
  background-attachment: fixed;
  background-position: center top;
}

body.no-scroll {
  overflow: hidden;
}



/*
 * Layout
 * ----------------------------------------- */

section {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.header-inner,
.section-inner {
  margin: 0 auto;
  width: 90%;
  max-width: 2500px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.col {
  margin-right: 1.5%;
  margin-left: 1.5%;
  box-sizing: border-box;
}

.col-span-3 { flex-basis: calc( 37.5% - 3% ); }
.col-span-4 { flex-basis: calc( 50%   - 3% ); }
.col-span-5 { flex-basis: calc( 62.5% - 3% ); }
.col-span-6 { flex-basis: calc( 75%   - 3% ); }

.col-span-offset-1 { margin-left: calc( 12.5% + 1.5% ); }
.col-span-offset-2 { margin-left: calc( 25%   + 1.5% ); }
.col-span-offset-3 { margin-left: calc( 37.5% + 1.5% ); }
.col-span-offset-4 { margin-left: calc( 50%   + 1.5% ); }

/* Helper element to calculate responsive CSS columns */
.col-helper { height: 0; margin-left: -9999px; }
.col-span-2-clients { flex-basis: calc( 25%   - 3% ); }




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

header {
  width: 100%;
  color:  #ffe3dc;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.is-firefox header,
.is-chrome header {
  z-index: auto;
  position: static;
  height: 100vh;
}

.is-mobile header {
  position: relative;
  background-image: url( '../img/k-monogramm.svg'), -webkit-linear-gradient(top, #ffdacd -10%, #040037 110% );
  background-image: url( '../img/k-monogramm.svg'),    -moz-linear-gradient(top, #ffdacd -10%, #040037 110% );
  background-image: url( '../img/k-monogramm.svg'),         linear-gradient(to bottom, #ffdacd -10%, #040037 110% );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdacd', endColorstr='#040037',GradientType=0 );
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-position: fixed;
  z-index: 10;
}

.header-inner {
  height: 100vh;
}

.is-firefox .header-inner,
.is-chrome .header-inner {
  height: auto;
}

.is-mobile .header-inner {
  height: auto;
}

.header-content {
  position: fixed;
  pointer-events: none;
}

.is-firefox .header-content,
.is-chrome .header-content,
.is-mobile .header-content {
  position: static;
}

.about-teaser {
  width: 88%;
  margin-bottom: 10vh;
}

.clients {
  flex-basis: 73.5%;
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  font-style: italic;
}

.clients:before, /* Middle line */
.clients:after, /* Last line */
.clients li:first-child:before /* First line */ {
  content: '';
  background-image: url( '../img/tilde.svg' );
  background-size: 1.125rem auto;
  background-repeat: no-repeat;
  width: 1.125rem;
  height: 1rem;
  font-weight: 400;
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: -3px;
}

.header-background {
  position: absolute;
  background: -webkit-linear-gradient(top, #ffdacd -10%, #040037 110% );
  background:    -moz-linear-gradient(top, #ffdacd -10%, #040037 110% );
  background:         linear-gradient(to bottom, #ffdacd -10%, #040037 110% );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdacd', endColorstr='#040037',GradientType=0 );
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.is-firefox .header-background,
.is-chrome .header-background {
  z-index: -1;
}

.is-mobile .header-background {
  display: none;
}

.k {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url( '../img/k-monogramm.svg' );
  background-size: 100vh auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

.is-mobile .k {
  display: none;
}

.noise {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  opacity: .5;
  background-image: url( '../img/img-noise-300x300.png' );
  background-size: 150px 150px;
}



/*
 * Content
 * ----------------------------------------- */

.content {
  padding-top: 5rem;
  padding-bottom: 5rem;
  z-index: 0;
}

.is-mobile .content  {
  padding-top: 2.75rem;
  padding-bottom: 5rem;
}



/*
 * Thumbs
 * ----------------------------------------- */

.row-project-thumb {
  margin-bottom: 6rem;
}

.project-thumb-container {
  position: relative;
}

.project-thumb {
	position: relative;
  line-height: 0;
}

/* Shadow */
.project-thumb:before {
  content: '';
	position: absolute;
	z-index: -1;
	top: .75rem;
	left: .75rem;
	width: 100%;
	height: 100%;
  background: rgb(0,20,65);
  background: -webkit-linear-gradient(45deg, #040037 0%, #ffdacd 100%);
  background:    -moz-linear-gradient(45deg, #040037 0%, #ffdacd 100%);
  background:         linear-gradient(45deg, #040037 0%, #ffdacd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040037', endColorstr='#ffdacd',GradientType=1 );
}

/* Shadow hover */
.project-thumb:hover:before {
	top: .375rem;
	left: .375rem;
}

.project-thumb img {
  filter: url( "data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale" ); /* Firefox 3.5+ */
  -webkit-filter: grayscale( 100% );
     -moz-filter: grayscale( 100% );
      -ms-filter: grayscale( 100% );
          filter: grayscale( 100% );
}

.project-thumb:hover img {
  filter: none;
  -webkit-filter: grayscale( 0 );
     -moz-filter: grayscale( 0 );
      -ms-filter: grayscale( 0 );
          filter: grayscale( 0 );
}

.project-thumb:hover .project-thumb-title,
.project-thumb:hover .project-thumb-link:before,
.project-thumb:hover .project-thumb-link:after {
  opacity: 0;
}

.is-mobile .project-thumb:hover .project-thumb-title,
.is-mobile .project-thumb:hover .project-thumb-link:before,
.is-mobile .project-thumb:hover .project-thumb-link:after {
  opacity: 1;
}

.project-thumb-title {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: calc( 50% + .5em ); /* half letter spacing */
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1em;
  word-spacing: -.5em;
  font-style: italic;
  color: #ffdee4;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  pointer-events: none;
}

/* Overlay color */
.project-thumb-link:before {
  content: '';
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100.1%;
	background-color: #040037;
	opacity: .5;
	pointer-events: none;
}

/* Inner border */
.project-thumb-link:after {
  position: absolute;
  z-index: 3;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  border: 2px solid #ffdee4;
  pointer-events: none;
}

/* Inner border square */
.project-thumb-link:after {
  width: calc( 100% - 30% );
  height: calc( 100% - 30% );
}


/* Inner border portrait format */
.project-thumb-link.project-thumb-portrait:after {
  width: calc( 100% - 40% );
  height: calc( 100% - 30% );
}

/* Inner border landscape format */
.project-thumb-link.project-thumb-landscape:after {
  width: calc( 100% - 30% );
  height: calc( 100% - 40% );
}

.project-type {
  position: absolute;
  left: -1.5rem;
  top: -4rem;
  margin-top: 1.25rem;
  -webkit-transform: rotate( 90deg );
     -moz-transform: rotate( 90deg );
      -ms-transform: rotate( 90deg );
       -o-transform: rotate( 90deg );
          transform: rotate( 90deg );
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: bottom left;
  z-index: 2;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1em;
}






/*
 * Border text
 * ----------------------------------------- */

.border-text {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  height: 2rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  pointer-events: none;
}

.border-text a {
  pointer-events: all;
}

.border-text-foreground a {
  color: #ffdee4;
}

.is-mobile .border-text-foreground {
  color: #040037;
}

.border-text-top {
  left: 0;
  top: .5rem;
  text-align: center;
  width: 100%;
}

.border-text-left {
  top: -2rem;
  left: 2.75rem;
  margin-left: -2rem;
  width: 100vh;
  -webkit-transform: rotate( 90deg );
     -moz-transform: rotate( 90deg );
      -ms-transform: rotate( 90deg );
       -o-transform: rotate( 90deg );
          transform: rotate( 90deg );
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: bottom left;
}

.border-text-right {
  top: 100vh;
  left: calc( 100% - 2.75rem );
  width: 100vh;
  -webkit-transform: rotate( -90deg );
     -moz-transform: rotate( -90deg );
      -ms-transform: rotate( -90deg );
       -o-transform: rotate( -90deg );
          transform: rotate( -90deg );
          transform-origin: top left;
}

.is-firefox .border-text-foreground,
.is-chrome .border-text-foreground {
  display: none;
}

.is-firefox .border-text-background,
.is-chrome .border-text-background {
  z-index: 99;
}

/* Languag switcher */
.lang-btn {
  position: relative;
  display: inline-block;
  margin: .5rem;
  padding: 0 .1em 0 .25em;
  pointer-events: all;
}

.slash {
  display: block;
  background-image: url( '../img/slash.svg' );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 200%;
  background-position: top left;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.no-scroll .slash {
  display: none;
}

.is-mobile .border-text.lang-switcher {
  z-index: 5;
}

.no-scroll .border-text.lang-switcher {
  z-index: 200 !important;
}



/*
 * Text-level elements
 * ----------------------------------------- */

h1,
h2 {
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: .75rem;
}

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

.tilde-top {
  position: relative;
  padding-top: 1.25rem;
}

.gnaltrok {
  unicode-bidi: bidi-override;
  direction: rtl;
  cursor: hand;
  cursor: pointer;
}

.row-legal {
  display: none;
  margin-top: 3rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .25em;
}



/*
 * Overlay
 * ----------------------------------------- */

.overlay {
  position: fixed;
  overflow: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: rgba( 255,255,255, .95 );
}

[aria-hidden="true"] {
  width: 100vw;
  z-index: -1;
  display: none;
}

[aria-hidden="false"] {
  width: 100%;
  display: block;
}

.project,
.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
  pointer-events: none !important;
  font-weight: 400;
  padding-bottom: 4rem;
  -webkit-overflow-scrolling: touch;
}

.project .col:last-of-type,
.page .col:last-of-type {
  margin-bottom: 0;
}

.overlay .row {
  justify-content: center;
}

.row-inner {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 75%;
  pointer-events: all !important;
  padding-top: 5rem;
}

.overlay .col {
  box-sizing: border-box;
  margin-left: 1.5%;
  margin-right: 1.5%;
  margin-bottom: 6rem;
}

.overlay [class*='col-span'] {
  margin-left: 2%;
  margin-right: 2%;
}

.overlay .col-span-3 { flex-basis: calc( 50%     - 4% ); }
.overlay .col-span-4 { flex-basis: calc( 66.667% - 4% ); }
.overlay .col-span-5 { flex-basis: calc( 83.334% - 4% ); }
.overlay .col-span-6 { flex-basis: calc( 100%    - 4% ); }

.overlay .col.col-span-offset-1 { margin-left: calc( 16.667% + 2% ); }
.overlay .col.col-span-offset-2 { margin-left: calc( 33.334% + 2% ); }
.overlay .col.col-span-offset-3 { margin-left: calc( 50%     + 2% ); }

/*
 * Projects
 */

.project-info-container {
  margin-bottom: 5rem;
}

.project-title {
  margin-bottom: 1.5rem;
}

.page-title {
  margin-top: 3rem;
}

.page-title:first-of-type {
  margin-top: 0;
}

.project-summary,
.project-description {
  font-style: italic;
}

.project-title,
.project-subtitle,
.page-title,
.page-subtitle {
  margin-bottom: .75rem;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  font-style: italic;
}

.project p {
  margin-bottom: .75rem;
}

.page p {
  margin-bottom: 1.5rem;
}

.project-subtext {
 font-style: italic;
}

.page-title {
  margin-bottom: 1.5rem;
}

/*
 * Overlay buttons
 */

/* Hide buttons by default */
.overlay-btn,
.close-overlay-x {
  display: none;
}

/* Show buttons when overlay is active */
.no-scroll.projects-open .overlay-btn,
.no-scroll .close-overlay-x {
  display: block;
}

.overlay-btn,
.overlay-btn:after {
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: top left;
  z-index: 200;
}

.overlay-btn {
  position: fixed;
  padding: .5rem;
}

.overlay-btn:after {
  content: '';
  display: inline-block;
}

.overlay-btn:hover,
.overlay-btn:hover:after {
  background-position: bottom left;
}

/* No hover on mobile */
.is-mobile .overlay-btn:hover,
.is-mobile .overlay-btn:hover:after {
  background-position: top left;
}

/*
 * Closing X
 */

.close-overlay-x,
.close-overlay-x:after {
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: top left;
}

.is-mobile .close-overlay-x {
  top: .25rem;
}

.close-overlay-x:after {
  content: '';
  display: block;
  background-image: url( '../img/close-x.svg' );
}

.close-overlay-x:hover,
.close-overlay-x:hover:after {
  background-position: bottom left;
}

.close-overlay-area {
  display: inline-block;
  width: 100%;
}

/*
 * Prev / next arrows
 */

.arrow {
  top: calc( 50% - .75rem );
}

.arrow:after {
  background-image: url( '../img/arrow.svg' );
}

.arrow-left {
  left: .75rem;
}

.arrow-right {
  left: calc( 100% - 2.75rem );
  -webkit-transform: rotate( 180deg );
     -moz-transform: rotate( 180deg );
      -ms-transform: rotate( 180deg );
       -o-transform: rotate( 180deg );
          transform: rotate( 180deg );
          transform-origin: center center;
}

.is-mobile .arrow-left,
.is-mobile .arrow-right {
  top: calc( 50% - .5rem );
}

.is-mobile .arrow-right {
  left: calc( 100% - 2.75rem );
}

.no-scroll.projects-open .is-inactive {
  opacity: .25;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.no-scroll.projects-open .is-inactive:hover:after {
  background-position: top left;
  cursor: default;
}

/*
 * Project margins
 */

.project-img-margin-top {
  margin-top: 25%;
}

.subtitle-negative-margin-top {
  margin-top: -3rem;
}

/*
 * Project exceptions
 */

#mui .col {
  margin-bottom: 0;
}

#mui .col img {
  margin-left: -3.5%;
  margin-top: 3rem;
}



/*
 * Etc
 * ----------------------------------------- */

video,
img {
  width: 100%;
  max-width: 100%;
}



/*
 * Arrow down
 * ----------------------------------------- */

.arrow-down {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: auto;
  bottom: 1rem;
  opacity: 1;
  -webkit-transform: rotate( -90deg );
     -moz-transform: rotate( -90deg );
      -ms-transform: rotate( -90deg );
       -o-transform: rotate( -90deg );
          transform: rotate( -90deg );
}

.arrow-down:after {
  background-position: bottom left;
}

/* No hover on mobile */
.is-mobile .arrow-down:hover,
.is-mobile .arrow-down:hover:after {
  background-position: bottom left;
}

.arrow-down:hover {
  cursor: hand;
  cursor: pointer;
}

.no-scroll.projects-open .arrow-down {
  pointer-events: none;
}



@media all and ( max-width: 2400px ) {   html { font-size: 30px; } }
@media all and ( max-width: 2030px ) {   html { font-size: 27px; } .header-inner, .section-inner { width: 85%; }   }
@media all and ( max-width: 1470px ) {   html { font-size: 23px; } }
@media all and ( max-width: 1300px ) {   .about-teaser { font-size: 1.5rem; }   }
@media all and ( max-width: 1100px ) {   html { font-size: 20px; } .header-inner, .section-inner { width: 80%; }   }
@media all and ( max-width:  760px ) {   html { font-size: 23px; }  }
@media all and ( max-width:  550px ) {   html { font-size: 20px; }  }



@media all and (max-width: 1100px) {

  .row-project-thumb {
    margin-bottom: 3rem;
  }

  .project-type {
    top: -2.125rem;
  }

  .overlay [class*='col-span'] {
    margin-left: 1.5%;
    margin-right: 1.5%;
  }

  .overlay .row {
    width: 100%;
  }

  .row-inner {
    flex-basis: 100%;
  }

}



@media all and ( max-width: 1040px ) {

  .about-teaser {
    margin-bottom: 6.5vh;
  }
  .clients {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }

  /* From 3 to 2 column width*/
  .col-span-2-clients {
    flex-basis: calc( 37.5% - 3% );
  }

  .clients:after {
    display: none;
  }

}



@media all and (max-width: 930px) {

  /* From 3 to 2 column width */
  .col-span-3 {
    flex-basis: calc( 50%   - 3% );
  }

  .about-teaser {
    font-size: 1.5rem;
    margin-bottom: 7vh;
  }

  .project-type {
    font-size: .6rem;
  }

  .project-thumb-title {
    font-size: .9rem;
  }

}



@media all and ( max-width: 760px ) {

  /* Make all columns full width */
  [class*='col-span'] { flex-basis: calc( 100% - 3% ); }
  .overlay [class*='col-span'] { flex-basis: calc( 100% - 3% ); }

  /* Reset col-span-offset */
  [class*='col-span-offset'] { margin-left: 1.5%; }
  .overlay .col[class*='col-span-offset'] { margin-left: 2%; }

  .border-text-left  { display: none; }
  .border-text-right { display: none; }

  .about-teaser {
    margin-bottom: 0;
    font-size: 1.25rem;
  }

  .clients {
    display: none;
  }

  .project-thumb {
    margin-bottom: 2rem;
  }

  .project-type {
    font-size: .75rem;
  }

  .project-img-margin-top {
    margin-top: 0;
  }

  .overlay .col {
    margin-bottom: 3rem;
  }

  .image-margin-top {
    margin-top: 0;
  }

  .subtitle-negative-margin-top {
      margin-top: -2rem;
  }

  .row-legal {
    display: block;
  }

  .tilde-top {
    padding-top: 2rem;
  }

  /* Hide last mui entry */
  .mui .col:nth-last-child(1),
  .mui .col:nth-last-child(2) {
    display: none;
  }

}



@media all and ( max-width: 480px ) {

  .is-mobile header {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .about-teaser {
    font-size: 1.125rem;
  }

  .row-project-thumb {
   margin-bottom: 1.5rem;
  }

  .close-overlay-area {
    display: none;
  }

  .overlay .col {
    margin-bottom: 1.5rem;
  }

  .arrow-left {
   left: 0;
  }

  .is-mobile .arrow-right {
    left: calc( 100% - 2rem );
  }

  .border-text-left {
   left: 15rem;
  }

  .subtitle-negative-margin-top {
    margin-top: -1rem;
  }

}



@media all and ( min-width: 760px ) and ( max-height: 700px ) {   .about-teaser { font-size: 1.5rem; }  }
@media all and ( min-width: 760px ) and ( max-height: 640px ) {   .about-teaser { font-size: 1.375rem; }  }



@media all and ( max-height: 600px ) {

  .clients {
    display: none;
  }

  .about-teaser {
    margin-bottom: 0;
    font-size: 1.125rem;
    width: 93%;
  }

}