/* BASICS */
@font-face {
  font-family: 'GT Cinetype Bold';
  src: url("../webfonts/GT-Cinetype-Bold.eot");
  src: url("../webfonts/GT-Cinetype-Bold.eot?#iefix") format("embedded-opentype"), url("../webfonts/GT-Cinetype-Bold.woff") format("woff"), url("../webfonts/GT-Cinetype-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  overflow-y: scroll; }

html, body {
  position: relative;
  height: 100%; }

body {
  background: #eee;
  font-family: "GT Cinetype Bold", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  font-size: 1.8rem;
  font-weight: normal;
  color: white;
  margin: 0;
  padding: 0; }

/* POSITIONIERUNG */
header {
  position: absolute;
  bottom: 5vh;
  left: 3vw;
  right: 3vw;
  text-align: center;
  z-index: 100; }
  header h2 {
    display: none; }
  header p {
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1.15; }
  header a {
    color: inherit; }

.portfolio .swiper-slide header p {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s; }
.portfolio .swiper-slide-active header p {
  opacity: 1 !important; }

.schaltegger-about h1, .schaltegger-about p {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out; }
.schaltegger-about.swiper-slide-active h1, .schaltegger-about.swiper-slide-active p {
  opacity: 1 !important; }

.swiper-container-v0 {
  background-color: black !important; }

.schaltegger-about {
  padding-top: 6vh;
  background-color: black;
  color: white; }
  .schaltegger-about h1 {
    font-size: 1.8rem;
    font-weight: normal;
    padding-top: 0;
    cursor: pointer; }
  .schaltegger-about p {
    font-size: 1.8rem; }
  .schaltegger-about p a {
    color: inherit;
    position: relative;
    z-index: 1000; }

header * {
  margin: 0; }

em {
  font-weight: normal; }

.projekt-beschrieb {
  padding: 10vh 10vw; }

.projekt-beschrieb > *, .schaltegger-about > * {
  text-align: left;
  width: 88vw; }

.schaltegger-about > * {
  margin-left: 5vw; }

footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  text-align: center !important; }
  footer a {
    color: white;
    text-decoration: none;
    padding: 1em;
    font-size: 2em;
    display: none; }

.swiper-container {
  width: 100%;
  height: 100vh; }

.swiper-slide {
  text-align: center;
  background: #fff;
  position: relative; }

.swiper-container-v {
  background: #eee; }

small {
  font-weight: normal; }

.swiper-slide, div.randabfallend {
  position: relative; }

.auf-breite-anpassen, .auf-hoehe-anpassen, div.randabfallend, .unbeschnitten {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center; }

.kachel {
  min-width: 50vw;
  display: table-cell;
  background-size: cover;
  overflow: hidden;
  z-index: 1; }

.kacheln-2 {
  display: table-row; }

.kacheln-2 .kachel {
  height: 100vh; }

.kacheln-4 .zeile {
  display: table-row;
  width: 100vw; }

.kacheln-4 .kachel {
  height: 50vh; }

@-moz-document url-prefix() {
  .kacheln-2 .kachel {
    height: 50vh !important; } }
.auf-breite-anpassen {
  background-size: 100% auto !important; }

.auf-hoehe-anpassen {
  background-size: auto 100%  !important; }

div.randabfallend {
  background-size: cover; }

.unbeschnitten {
  background-size: contain; }

.swiper-slide span {
  position: absolute;
  top: 5vh;
  left: 5vw;
  text-align: left; }

.swiper-pagination {
  z-index: 1000; }

.move-to-left > p {
  width: 50%;
  float: left;
  margin-left: -1.5vw; }

.move-to-right > p {
  width: 50%;
  float: right;
  margin-right: -1.5vw; }

.address.back-to-projects {
  margin-top: 0;
  visibility: hidden;
  width: 100%; }

address {
  position: fixed;
  z-index: 1000;
  top: 106vh;
  left: 5vw;
  text-align: left;
  font-style: normal;
  color: black;
  font-size: 1.8rem;
  line-height: 1.3; }

address a {
  color: white;
  text-decoration: none;
  -webkit-transition: 0.6s ease color;
  transition: 0.6s ease color; }

body.plus {
  cursor: url("/assets/img/SNS-Cursor-Right.svg"), e-resize; }

body.minus {
  cursor: url("/assets/img/SNS-Cursor-Left.svg"), w-resize; }

.schaltegger-about footer {
  cursor: url("/assets/img/SNS-Cursor-Down.svg"), s-resize; }

.swiper-pagination {
  display: none; }

.swiper-slide {
  overflow: hidden; }

.kacheln-4 .kachel {
  position: relative;
  overflow: hidden; }

.kacheln-4 video {
  min-width: 50vw;
  min-height: 50vh;
  width: auto !important;
  height: auto !important;
  position: absolute;
  top: 50vh;
  left: 50vw;
  -webkit-transform: translateX(-50vw) translateY(-50vh);
          transform: translateX(-50vw) translateY(-50vh);
  overflow: hidden; }

/*
	video.randabfallend {  // http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    min-width: 100%;
	    min-height: 100%;
	    width: auto;
	    height: auto;
	    transform: translateX(-50%) translateY(-50%);
	    background-size: cover; 
		}
	.kacheln-2 .kachel video.randabfallend { transform: translateX(-75%) translateY(-50%); }
	.kacheln-2 .kachel + .kachel video.randabfallend { transform: translateX(-25%) translateY(-50%); }
*/
.video-parent {
  overflow: hidden;
  position: relative;
  /* or absolute or fixed */ }

/* 
	Blueprint:
	https://stackoverflow.com/a/29997746/1858185 
*/
video.querformat.randabfallend {
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.kacheln-2 video.hochformat.unbeschnitten {
  height: 100%;
  width: 80vh;
  max-width: 100%;
  max-height: 62.5vw; }
.kacheln-2 video.hochformat.randabfallend {
  height: 100%;
  width: 80vh;
  min-width: 100%;
  min-height: 125vw; }
.kacheln-2 video.hochformat.auf-breite-anpassen {
  width: 50vw;
  height: 62.5vw;
  min-width: 100%; }
.kacheln-2 video.hochformat.auf-hoehe-anpassen {
  height: 100vh;
  width: 80vh;
  min-height: 100%; }

.block-trailer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .block-trailer iframe {
    width: 70vw;
    height: 39.375vw;
    border: none; }

.projekt-einstieg p a:hover {
  opacity: 0.75 !important; }
.projekt-einstieg p a:active {
  opacity: 1 !important; }

@media screen and (max-width: 1200px) {
  html {
    font-size: 54%; } }
@media screen and (min-width: 1800px) {
  html {
    font-size: 80%; } }