body {
  background: #fff;
  font-weight: 300;
}
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  background-size: cover;
  background-position: center;
  text-rendering: optimizeLegibility;
}
.background:after {
  content: '';
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 2px solid rgba(0,0,0,1);
}
.wrapper {
  display: none;
}

/* 1. Intro Keyframe
--------------------------------------- */
#intro {
  position: fixed;
  top: 25%;
  left: 10%;
  width: 80%;
  color: black;
  text-align: center;
}

.name {
  font-size: 35px;
  letter-spacing: 12px;
  line-height: 1.5;
  font-weight: 900;
}

.logor {
    height:200px;
    width:auto;
}

.logoe {
    height:200px;
    width:auto;
    margin-left:-160px;
}

.byline { 
  font-size: 15px;
  letter-spacing: 4px;
  text-align: center;
  font-weight: 300;
}

.whiteback {
  position: fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: white;
  z-index: -1;
}

.ampersand {
  font-family: "Adobe Caslon Pro", "brandon-grotesque";
  font-style: italic;
}

.buro1 {
  position: fixed;
  width: 100%;
  height: auto;
  top:0px;
  left:0px;
  z-index: -2;
}
.slogan_oben {
  color: #000;
  z-index: 9999999;
  position: fixed;
  top:45%;
  left: 50%;
  margin-left: -130px;
  z-index:-2;
  font-family: 'Comfortaa', cursive;
  text-transform: uppercase;
}
.slogan_unten {
  color: #000;
  z-index: 9999999;
  position: fixed;
  top:45%;
  left: 50%;
  margin-left: -130px;
  margin-top:20px;
  z-index:-2;
   font-family: 'Comfortaa', cursive;
  text-transform: uppercase;
}
.clients {
    z-index: -1;
  text-align: center;
  color: #000;
  z-index: 9999999;
  position: fixed;
  width: 100%;
  height: 100vh;
  top:50px;
  z-index:-2;
  font-family: 'Comfortaa', cursive;
  text-transform: uppercase;
}
.clients_container {
    position:fixed;
    top:100px;
    width:100%;
    max-width: 1200px;
    text-align: center;
}
.clients_container2 {
    position:fixed;
    top:100px;
    width:100%;
    max-width: 1200px;
    text-align: center;
}
.clients_content {
    z-index: -2;
    max-width: 600px;
    float:left;
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}
.clients_content2 {
    z-index: -2;
    max-width: 600px;
    float:left;
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

.clients_content.row2, .clients_content.row2.column2 {
    top:40%;
}
.clients_content.row3, .clients_content.row3.column2 {
    top:70%;
}
.clients_content div {
        width:25%;
        float:left;
        text-align: center;
        line-height: 110px;
        height:110px;
}
.clients_content div img {
        max-width: 150px;
        max-height: 100px;
        vertical-align: middle;
}
.strich1 {
  height:1px;
  width:100px;
  position:absolute;
  left:50%;
  margin-left:-100px;
  background-color: black;
}

.strich2 {
  height:1px;
  width:100px;
  position:absolute;
  left:50%;
  background-color: black;
}


/* 2. Explosion/Images/Links Structure and Text
--------------------------------------- */

#explosion,
#images {
  position: fixed;
  top: 100%;
  width: 100%;
  height: 100%;
}

.explosion-byline,
.images-byline {
  position: fixed;
  top: 63%;
  left: 10%;
  color: white;
  max-width: 22%;
  opacity: 0;
}

.images-byline-2 {
  text-align: center;
  position: fixed;
  top: 93%;
  left: 25%;
  color: white;
  width: 50%;
  opacity: 0;
}

.buro {
  position: fixed;
  width: 100%;
  height: auto;
  top:0px;
  left:0px;
  
}

.berg1 {
  position: fixed;
  width: 23%;
  height: auto;
  top:51%;
  left:45%;
  z-index:-2;
}

.berg2 {
  position: fixed;
  width: 25%;
  height: auto;
  top:19%;
  left:25%;
  z-index:-3;
}

.berg3 {
  position: fixed;
  width: 40%;
  height: auto;
  top:20%;
  left:30%;
  z-index:-5;
}

.wolke1 {
  position: fixed;
  width: 25%;
  height: auto;
  top:20%;
  left:60%;
  z-index:-4;
}

.fly {
  position: fixed;
  width: 40%;
  height: auto;
  top:20%;
  left:0%;
  margin-left:-300px;
  z-index:-4;
}

/* 3. Explosion Keyframe
--------------------------------------- */
#domExplosionList {
  position: fixed;
  width: 270px;
  top: 100%;
  right: 15%;
  opacity: 0;
}
.dom-explosion-item {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fff;
}
@media only screen and (min-width: 890px) {
    .clients_container {
        left:50%;
        margin-left: -50%;
    }
    .clients_content {
        width: 50%;
    }
    .clients_content div {
        width: 50%;
        max-width: calc( 50% - 80px );
        float:left;
        padding:40px;
        text-align: center;
    }
    .clients_content div img.kuc {
        max-width: 220px;
    }
}


@media only screen and (min-width: 1200px) {
    .clients_container {
        margin-left: -600px;
    }
}
@media only screen and (min-width: 561px) and (max-width: 889px) {
    .clients_container {
        left:50%;
        margin-left: -50%;
    }
    .clients_content {
        width: 50%;
    }
    .clients_content div {
        width: 50%;
        max-width: calc( 50% - 20px );
        float:left;
        padding:10px;
        text-align: center;
    }
    .clients_content.row2{
        margin-top: 50px;  
    }
    .clients_content.row3{
        margin-top: 50px; 
    }
}
@media only screen and (max-width: 560px) {
    .clients_content div {
        width:50%;
    }
    .clients_content.row1{
        top: 140px;  
    }
    .clients_content.row1.column2{
        top: 260px;
    }
    .clients_content.row2{
        top: 380px;  
    }
    .clients_content.row2.column2{
        top: 500px;
    }
    .clients_content.row3{
        top: 620px;  
    }
    .clients_content.row3.column2{
        top: 740px;
    }
    .clients_content div img {
        max-height: 80px;
        padding: 4px 0;
    }
}

.bg {
  -webkit-animation:slide 13s ease-in-out infinite alternate;
          animation:slide 13s ease-in-out infinite alternate;
  background-image: -webkit-linear-gradient(150deg, #8888880f 50%, #9999991f 50%);
  background-image: linear-gradient(-60deg, #8888880f 50%, #9999991f 50%);
  bottom:0;
  left:-50%;
  opacity:.2;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  -webkit-animation-direction:alternate-reverse;
          animation-direction:alternate-reverse;
  -webkit-animation-duration:14s;
          animation-duration:14s;
}

.bg3 {
  -webkit-animation-duration:15s;
          animation-duration:15s;
}

.content {
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  position:fixed;
  text-align:center;
  top:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  height: 449px;
}


@-webkit-keyframes slide {
  0% {
    -webkit-transform:translateX(-25%);
            transform:translateX(-25%);
  }
  100% {
    -webkit-transform:translateX(25%);
            transform:translateX(25%);
  }
}

@keyframes slide {
  0% {
    -webkit-transform:translateX(-25%);
            transform:translateX(-25%);
  }
  100% {
    -webkit-transform:translateX(25%);
            transform:translateX(25%);
  }
}

@media only screen and (max-width: 720px) {
    .content {
        height: 59vw;
        width: 90%;
    }
    .content img {
        width:100%;
    }
}