@charset 'utf-8';



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



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

html,
body {
  overflow-x: hidden;
}

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

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  outline: none;
}

a img { /* Remove border around linked images in IE10 and below */
  border: 0;
}



/*
 * Transitions & Animations
 * ----------------------------------------- */

a, a:hover {
  -webkit-transition: border .2s ease-in-out;
     -moz-transition: border .2s ease-in-out;
      -ms-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}



/*
 * Basic
 * ----------------------------------------- */

html {
  font-size: 20px;
}

body {
  margin: 0;
  background: #0c0c0c;
  color: #f6f1d6;
  font-family: 'Lato', 'futura', 'helvetica', sans-serif;
  color: #fff;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'onum';
     -moz-font-feature-settings: 'onum=1';
     -moz-font-feature-settings: 'onum';
      -ms-font-feature-settings: 'onum' 1;
          font-feature-settings: 'onum';
  font-size: 1.12rem;
}



/*
 * Layout
 * ----------------------------------------- */
  a.slider_nav.slider1_nav.down {
      top: 100%;
      left: 50%;
      transform: rotate(90deg);
  }

 .language-container {
    /* font-weight: bold; */
    /* color: rgba(255, 255, 255, 0.38); */
    font-size: 0.8em;
    padding: 5px;
    background: rgba(0, 0, 0, 0.55);
    right: 22px;
    position: fixed;
    z-index: 100;
    /* width: 200px; */
    /* top: 5px; */
    /* padding: 9px; */
    /* padding-top: 2px; */
}

.language-container div {
    padding-left: 7px;
    float: left;
    padding-right: 6px;
    /* margin: 6px; */
    margin-bottom: 6px;
    margin-top: 6px;
}

.language-container a {
  color: rgba(255, 255, 255, 0.38);
  border: none;
}
.language-container a:hover {
  border: none;
}

.language-container .de {
  border-right: 1px solid #AFAFAF;
}

.language-container .active a {
    /* font-weight: bold; */
    color: #FFF;
}

.container {
  margin: 0 auto;
  width: 80%;
  max-width: 1400px;
}

section {
  xmargin-bottom: 3rem;
  padding-top: 7rem;
  padding-bottom: 7rem;
  box-sizing: border-box;
}

section:last-of-type {
  margin-bottom: 0;
}

[class*='span'] {
  float: left;
  margin-right: 4rem;
}

.span-1 {
  width: calc( 50% - 4rem );
}

.span-right {
  margin-top: 6rem;
}



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

header {
  position: relative;
  width: 100%;
  height: 97vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
  color: #f6f1d6;
}

.header-inner {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to bottom, rgba( 0,0,0, .35 ) 0%,rgba( 0,0,0, .35) 100% );
  background-size: 100% 100%;
  text-align: center;
}

.slider-inner {
  display: table;
  width: 100%;
  height: 100%;
}

.project-container {
  display: table-cell;
  vertical-align: middle;
}



/*
 * Project title
 */

.project-title {
  margin-top: 3rem;
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.3;
}

.project-title-main {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  font-weight: 900;
}

/*
 * Blockquotes
 */

.blockquotes {
  margin: 0 auto;
  max-width: 48rem;
}

blockquote {
  margin-top: 7rem;
  margin-bottom: 1rem;
  font-size: 1.375rem;
}

.blockquote-author,
.blockquote-year {
  font-size: 1rem;
  font-weight: bold;
}

.blockquote-year {
  display: inline-block;
  margin-left: .25rem;
  font-weight: normal;
  letter-spacing: .1em;
}

.blockquote-info {
  position: absolute;
  right: 2rem;
  bottom: 5vh;
  font-size: .875rem;
}



/*
 * Sections
 * ----------------------------------------- */

/*
 * About
 */

.about {
  background-color: #555;
}

.about.clearfix {
  margin-bottom: 0px;
}


/*
 * Info
 */

.info {
  background-color: #333;
	color: #aaa;
}


/*
 * Vis
 */

.vis {
  padding: 5rem 0;
	background-color: #1c1e1f;
}

.vis .container {
  min-height: 300px;
  box-sizing: border-box;
  position: relative;
}

.link-to-vis {
  position: absolute;
  top: calc( 50% - 10rem );
  left: calc( 50% - 9rem );
  display: inline-block;
  width: 18rem;
  height: 18rem;
  /* background-color: #f6f1d6; */
  background-color: #f6f1d6ba;
  border-radius: 100%;
  text-align: center;
  color: #000;
  display: table;
  font-size: 1rem;
  xtext-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.2;
}

.link-to-vis-inner {
  display: table-cell;
  vertical-align: middle;
}

.link-to-vis-title {
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 900;
}

.link-to-vis:hover {
  background-color: #555555ca;
  color: #f6f1d6;
}

.link-to-vis:hover .arrow-down-black:after {
 background-image: url( '../img/arrow-down.svg' );
}

.vis-info {
text-align: center;
font-size: 1rem;
color: #f6f1d6;
}

.msg-no-mobile .arrow {
  margin-top: 2rem;
  margin-bottom: 1.75rem;
}

.msg-no-mobile .link-to-vis {
  background-color: #555;
}

.msg-no-mobile .link-to-vis:hover {
  color: #000;
}

.msg-no-mobile .link-to-vis:hover .arrow-down-black:after {
 background-image: url( '../img/arrow-down-black.svg' );
}


/*
 * Research
 */

.research {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: #363636;
  margin: 0;
}

.research .container {
  text-align: center;
  max-width: 48rem;
}


/*
 * Imprint
 */

.imprint {
  font-size: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #888;
}

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



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

h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 900;
}

h2:first-of-type {
  margin-top: 0;
}

h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}

p {
  margin-bottom: 1.5rem;
}

p:last-of-type {
  margin-bottom: 0;
}



/*
 * Links & Buttons
 * ----------------------------------------- */

a {
  color: #fff;
  border-bottom: 2px solid rgba( 255,255,255, .5 );
}

a:hover {
  border-bottom: 2px solid rgba( 255,255,255, 1 );
}

.btn-feedback {
  display: inline-block;
  margin-top: 1.5rem;
  border: 2px solid rgba( 255,255,255, .5 );
  padding: .2rem 1rem .25rem;
}

.btn-feedback:hover {
  border: 2px solid rgba( 255,255,255, 1 );
}



/*
 * Slider
 * ----------------------------------------- */

.slider-container{
  position: relative;
}

.slider {
  height: 97vh;
  position: relative;
  list-style: none;
  overflow: hidden;
  font-size: 0;
}

.slider li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
}

.slider li:first-child {
  position: relative;
  display: block;
  float: left;
}

.slider_nav {
  opacity: 1;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 5rem;
  width: 3rem;
  margin-top: -4rem;
  background-color: rgba(0,0,0, .5);
  background-image: url( '../img/slider-arrow.svg' );
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: 1rem auto;
  border: 0 !important;
}

.slider_nav.prev {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}

.slider_nav.next {
  left: auto;
  right: 0;
}

.slider p {
  margin-bottom: 0;
}




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

ul li {
  margin-bottom: 1.5rem;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

img {
  width: 100%;
  height: auto;
}

.arrow {
  position: relative;
}

.arrow:after {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  content: '';
  display: block;
  background-size: 1.5rem auto;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  bottom: -6rem;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

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

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

.arrow-down-black:after {
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem auto;
  bottom: -1.5rem;
  background-image: url( '../img/arrow-down-black.svg' );
}

.visible-desktop {
  -webkit-target-new: window;
  display: inline-block;
}

.hidden-desktop {
  display: none;
}


/* .container { max-width: 1000px; }  .container { max-width: 1200px; }   */
@media all and (max-width: 1800px) {   html { font-size: 18px; }   }
@media all and (max-width: 1500px) {   html { font-size: 16px; }    }
@media all and (max-width: 1300px) {   html { font-size: 15px; }   }
@media all and (max-width: 1170px) {   html { font-size: 14px; }   }
@media all and (max-width:  740px) {   html { font-size: 13px; }   }
@media all and (max-width:  500px) {   html { font-size: 12px; }   }




@media all and (max-width: 640px) and (max-height: 720px) {

  .project-title {
    margin-bottom: 10vh;
  }

  .blockquotes {
    display: none;
  }

}



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

  .blockquotes {
    max-width: 38rem;
  }

  .visible-desktop {
    display: none;
  }

  .hidden-desktop {
    display: inline-block;
  }

}



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

  .span-1 {
    width: 100%;
  }

  .span-right {
    /* margin-top: 1.5rem; */
  }

  .arrow-right:after {
    display: none;
  }

}



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

  .blockquote-info {
    display: none;
  }

}



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

  .slider_nav {
    display: none;
  }

  .project-title {
    font-size: 1.5rem;
  }

  .project-title-main {
    font-size: 2.5rem;
  }

}

/* Base styles for larger screens */
.container .two-col-text {
  display: flex;
  align-items: baseline;
  flex-direction: row; /* default setting for larger screens */
}

/* Media query for screens smaller than 768 pixels */
@media (max-width: 768px) {
  .container .two-col-text {
    flex-direction: column; /* stacks the child divs vertically on smaller screens */
    margin-top: 1.5rem;
  }
  .span-right {
    margin-top: 1.5rem;
  }
  
}




.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.125em;
}