html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: wask new;
  text-align: left;
  font-size: 130%
}

@font-face {
  font-family:"wask new";
  src:url("font/wask_new-webfont.woff") format('opentype');
}

@font-face {
  font-family: "wask new";
  font-weight: bold;
  src: url("font/wask_new_bold-webfont.woff") format('opentype');
}

section{
  min-height: 100%;
  margin:0;
  padding: 0;

}



h1, h2,h3{
  font-weight: bold;
}
h1{
  font-size: 8em;
margin: 0 auto 0 auto;
padding: 0;
  transform: rotate(-90deg);
}
h2{
  font-size: 4em;
    transform: rotate(-90deg);
    margin: auto auto 20% -80%;
    padding: 0;
}
h3{
  font-size: 2em;
  margin-left: 64%;
  padding: 0;
}


p{
  padding: 0;
  font-size: 1em;
  margin: 0 auto  0 20%;
}

hr{
  width: 380px;
height: 4px;
background: #000000;
border: 0;
margin: -64px auto 0 64%;
padding: 0;

}

img{
  padding: 0;
  margin-left: 82%;
  margin-top: -200px;
  clear: both;
  display: block;
  transform: translate(0,-300px);}

  .logo img, .scetch p, .play img{transition: all 300ms;-webkit-transition: all 300ms;
    -moz-transition: all 300ms;-o-transition: all 300ms;}
/* Header********************************************/
  header{
    position: fixed;
    width:100%;
    height:20px
    top:0;
    left: 0;
      z-index: 1;
  }

  .logo{
    margin:8% auto 0 82%;
  }
  .logo img{
    margin:0 auto 0 0;
    transform: translate(0,0);
  }
  .logo img:hover, .scetch p:hover, .play img:hover{
    opacity: 0.7;
    padding-top: 5px;
  }
a{
  text-decoration: none;
}

/* Übergänge********************************************/
/*section#bergang {
    min-height: 80px;
}

#bergang{
background: url(footage/titelseite/zwischen3.jpg);
background-color: #4fbfd5;
background-position: center center;
background-size: cover;
}*/
/* Home********************************************/


#home{
  width: 100%;
  height: 100%;
  overflow: hidden;
position: relative;
background-image: url(footage/titelseite/titelbilder.jpg);
/*background-position: center center;*/
background-size: cover;
animation: fader 10s infinite;

}
#home p{
  margin: 6% auto 0 71%;


}
#home h1{
  padding: 0;
  margin: -55% -55% auto auto;

}
#home hr{
  padding: 0;
  margin: 0 0 0 0;
}
@keyframes fader {
  0%{
    background-image: url(footage/titelseite/titelbilder.jpg);
  }
  30%{
    background-image: url(footage/titelseite/titelseite2.jpg);
  }
  60%{ background-image: url(footage/titelseite/titelseite2.jpg);}
  90%{background-image: url(footage/titelseite/titelbilder.jpg);}
  100%{background-image: url(footage/titelseite/titelbilder.jpg);}
}
/* CV********************************************/

#cv{
  white-space: nowrap;
}

#cv p{
  margin: 6% auto 0 20%;
}
#cv h2{
  margin: -15% 80% 0 0;
}
#cv h3,hr{
  transform: translate(0,-250px);
}

/* zukunftsorte Bild********************************************/
#bildlight slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildlight slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: sliden 12s infinite;
  overflow: hidden;
}
#bildlight slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/lightup/website.jpg);
  background-size: cover;
  background-position: center;
}
#bildlight slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/lightup/website2.jpg);
  background-size: cover;
  background-position: center;
}
#bildlight slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/lightup/phone.jpg);
  background-size: cover;
  background-position: center;
}
#bildlight slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/lightup/handy2.jpg);
  background-size: cover;
  background-position: center;
}
@keyframes sliden {
  0%{left: 100%; width: 100%;}
  8% {left: 0%;}
  25% {left: 0%;}
  33% {left: -100%; width: 100%;}
  33.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}


/* zukunftsorte text********************************************/
#textlight{
  white-space: nowrap;
}

#textlight p{
  margin: 2% auto 0 20%;
  transform: translate(0,40px);
}
#textlight h2{
  margin: -12% 80% 0 0;
}
#textlight h3,hr{
  transform: translate(0,-250px);
}


/* zukunftsorte Bild********************************************/
#bildzu slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildzu slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: sliden 12s infinite;
  overflow: hidden;
}
#bildzu slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/zukunftsorte/website.jpg);
  background-size: cover;
  background-position: center;
}
#bildzu slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/zukunftsorte/website-sammlung.jpg);
  background-size: cover;
  background-position: center;
}
#bildzu slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/zukunftsorte/phone.jpg);
  background-size: cover;
  background-position: center;
}
#bildzu slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/zukunftsorte/handy2.jpg);
  background-size: cover;
  background-position: center;
}
@keyframes sliden {
  0%{left: 100%; width: 100%;}
  8% {left: 0%;}
  25% {left: 0%;}
  33% {left: -100%; width: 100%;}
  33.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}


/* zukunftsorte text********************************************/
#textzu{
  white-space: nowrap;
}

#textzu p{
  margin: 2% auto 0 20%;
  transform: translate(0,40px);
}
#textzu h2{
  margin: -12% 80% 0 0;
}
#textzu h3,hr{
  transform: translate(0,-250px);
}

/* COO bild********************************************/
#bildcoo slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildcoo slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: fade 15s infinite;
overflow: hidden;
}
#bildcoo slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/corporateidentity/cooperateidentity.jpg);
  background-size: cover;
  background-position: center;
}
#bildcoo slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/corporateidentity/cooperateidentity2.jpg);
  background-size: cover;
  background-position: center;
}
#bildcoo slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/corporateidentity/brochure.jpg);
  background-size: cover;
  background-position: center;
}
#bildcoo slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/corporateidentity/website.jpg);
  background-size: cover;
  background-position: center;
}
#bildcoo slide:nth-child(5){
  left: 100%;
  animation-delay: 11s;
  background-image: url(footage/corporateidentity/website2.jpg);
  background-size: cover;
  background-position: center;
}
@keyframes fade {
  0%{left: 100%; width: 100%;}
  5% {left: 0%;}
  20% {left: 0%;}
  25% {left: -100%; width: 100%;}
  25.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}



}

/* COO text********************************************/
#textcoo{
  white-space: nowrap;
}

#textcoo p{
  margin: 2% auto 0 20%;
  transform: translate(0,40px);
}
#textcoo h2{
  margin: -12% 80% 0 0;
}
#textcoo h3,hr{
  transform: translate(0,-250px);
}

/* redesign bild********************************************/
#bildre slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildre slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: sliden 12s infinite;
  overflow: hidden;
}
#bildre slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/redesign/redesign_titel2.jpg);
  background-size: cover;
  background-position: center;
}
#bildre slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/redesign/redesign2.jpg);
  background-size: cover;
  background-position: center;
}
#bildre slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/redesign/redesign3.jpg);
  background-size: cover;
  background-position: center;
}
#bildre slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/redesign/redesign4.jpg);
  background-size: cover;
  background-position: center;
}
@keyframes sliden {
  0%{left: 100%; width: 100%;}
  8% {left: 0%;}
  25% {left: 0%;}
  33% {left: -100%; width: 100%;}
  33.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}


/* redesign text********************************************/
#textre{
  white-space: nowrap;
}

#textre p{
  margin: 2% auto 0 20%;
  transform: translate(0,40px);
}
#textre h2{
  margin: -12% 80% 0 0;
}
#textre h3,hr{
  transform: translate(0,-250px);
}

/* Interaction1 Bild********************************************/
#bildint slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildint slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: animate 18s infinite;
overflow: hidden;
}
#bildint slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/interaction1/hologram-1.jpg);
  background-size: cover;
  background-position: center;
}
#bildint slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/interaction1/hologram-2.jpg);
  background-size: cover;
  background-position: center;
}
#bildint slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/interaction1/hologram-6.jpg);
  background-size: cover;
  background-position: center;
}
#bildint slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/interaction1/hologram-4.jpg);
  background-size: cover;
  background-position: center;
}
#bildint slide:nth-child(5){
  left: 100%;
  animation-delay: 11s;
  background-image: url(footage/interaction1/hologram-5.jpg);
  background-size: cover;
  background-position: center;
}
#bildint slide:nth-child(6){
  left: 100%;
  animation-delay: 14s;
  background-image: url(footage/interaction1/hologram-7.png);
  background-size: cover;
  background-position: center;
}
@keyframes animate {
  0%{left: 100%; width: 100%;}
  5% {left: 0%;}
  16.8% {left: 0%;}
  23% {left: -100%; width: 100%;}
  23.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}

/*#bildillu{
background: url(footage/illustration/elefantgr.jpg);
background-position: center center;
background-size: cover;
}*/

/* Interaction1 Text********************************************/
#textint{
  white-space: nowrap;
}

#textint p{
  margin: 6% auto 0 20%;
}
#textint h2{
  margin: -15% 80% 0 0;
}
#textint h3,hr{
  transform: translate(0,-250px);
}

/* Info Bild********************************************/
.scetch{
  margin: 40% 0 0 80%;

}

#bildinfo{
background: url(footage/info/vorschau.png);
background-position: center center;
background-size: cover;
}
#bildinfo p{
  margin: 0 0 0 0;

  font-size: 1.5em;
  font-weight: bold;
  color: #ffffff;
}

/* Info Text********************************************/
#textinfo{
  white-space: nowrap;
}

#textinfo p{
  margin: 6% auto 0 20%;

}
#textinfo h2{
  margin: -15% 80% 0 0;
}
#textinfo h3,hr{
  transform: translate(0,-250px);
}

/* Illu Bild********************************************/
#bildillu slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildillu slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: animate 18s infinite;
overflow: hidden;
}
#bildillu slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/illustration/aufplatte.jpg);
  background-size: cover;
  background-position: center;
}
#bildillu slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/illustration/berlin.jpg);
  background-size: cover;
  background-position: center;
}
#bildillu slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/illustration/illustrationen.jpg);
  background-size: cover;
  background-position: center;
}
#bildillu slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/illustration/hoodie-college-front.jpg);
  background-size: cover;
  background-position: center;
}
#bildillu slide:nth-child(5){
  left: 100%;
  animation-delay: 11s;
  background-image: url(footage/illustration/n.jpg);
  background-size: cover;
  background-position: center;
}
#bildillu slide:nth-child(6){
  left: 100%;
  animation-delay: 14s;
  background-image: url(footage/illustration/can.jpg);
  background-size: cover;
  background-position: center;
}
@keyframes animate {
  0%{left: 100%; width: 100%;}
  5% {left: 0%;}
  16.8% {left: 0%;}
  23% {left: -100%; width: 100%;}
  23.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}

/*#bildillu{
background: url(footage/illustration/elefantgr.jpg);
background-position: center center;
background-size: cover;
}*/

/* Illu Text********************************************/
#textillu{
  white-space: nowrap;
}

#textillu p{
  margin: 6% auto 0 20%;
}
#textillu h2{
  margin: -15% 80% 0 0;
}
#textillu h3,hr{
  transform: translate(0,-250px);
}


/* Photo bild********************************************/
#bildphoto slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildphoto slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: slide 30s infinite;
overflow: hidden;
}
#bildphoto slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/fotografie/websitefoto1.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/fotografie/websitefoto-2.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/fotografie/websitefoto3.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/fotografie/websitefoto4.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(5){
  left: 100%;
  animation-delay: 11s;
  background-image: url(footage/fotografie/websitefoto5.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(6){
  left: 100%;
  animation-delay: 14s;
  background-image: url(footage/fotografie/websitefoto6.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(7){
  left: 100%;
  animation-delay: 17s;
  background-image: url(footage/fotografie/websitefoto7.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(8){
left: 100%;
  animation-delay: 20s;
  background-image: url(footage/fotografie/websitefoto8.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(9){
left: 100%;
  animation-delay: 23s;
  background-image: url(footage/fotografie/websitefoto9.jpg);
  background-size: cover;
  background-position: center;
}
#bildphoto slide:nth-child(10){
  left: 100%;
  animation-delay: 26s;
  background-image: url(footage/fotografie/websitefotoalle.jpg);
  background-size: cover;
  background-position: center;
}

@keyframes slide {
  0%{left: 100%; width: 100%;}
  5% {left: 0%;}
  10% {left: 0%;}
  15% {left: -100%; width: 100%;}
  15.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}

/*#bildphoto{
background: url(footage/fotografie/websitefoto2.jpg);
background-position: top top;
background-size: cover;
}

#bildphoto{
background: url(footage/fotografie/websitefoto2.jpg);
background-position: center center;
background-size: cover;
}***********/


/* Photo text********************************************/
#textphoto{
  white-space: nowrap;
}

#textphoto p{
  margin: 2% auto 0 20%;
  transform: translate(0,40px);
}
#textphoto h2{
  margin: -15% 80% 0 0;
}
#textphoto h3,hr{
  transform: translate(0,-250px);
}
/* Interaction2 Bild********************************************/
#bildinteraction{
background: url(footage/interaction/hintergrund.png);
background-position: center center ;
background-size: cover;
position:relative;
}

.play{
  position: absolute;
top: 105%;
left: 40%;

margin: 0 0 0 0;
padding: 0;

}

/* Interaction2 Text********************************************/
#textinteraction{
  white-space: nowrap;
}

#textinteraction p{
  margin: 6% auto 0 20%;
}
#textinteraction h2{
  margin: -15% 80% 0 0;
}
#textinteraction h3,hr{
  transform: translate(0,-250px);
}

/* Art Bild********************************************/
#bildart slider
{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
overflow: hidden;
  position: absolute;
}
#bildart slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  animation: fade 15s infinite;
overflow: hidden;
}
#bildart slide:nth-child(1){
  left: 0;
  animation-delay: -1s;
  background-image: url(footage/art/muster.jpg);
  background-size: cover;
  background-position: center;
}
#bildart slide:nth-child(2){
left: 100%;
  animation-delay: 2s;
  background-image: url(footage/art/plattensw.jpg);
  background-size: cover;
  background-position: center;
}
#bildart slide:nth-child(3){
left: 100%;
  animation-delay: 5s;
  background-image: url(footage/art/cubesfrontal.jpg);
  background-size: cover;
  background-position: center;
}
#bildart slide:nth-child(4){
  left: 100%;
  animation-delay: 8s;
  background-image: url(footage/art/echt.png);
  background-size: cover;
  background-position: center;
}
#bildart slide:nth-child(5){
  left: 100%;
  animation-delay: 11s;
  background-image: url(footage/art/seite.png);
  background-size: cover;
  background-position: center;
}
@keyframes fade {
  0%{left: 100%; width: 100%;}
  5% {left: 0%;}
  20% {left: 0%;}
  25% {left: -100%; width: 100%;}
  25.0001% {left: -100%; width: 0%;}
  100% {left: 100%; width: 0%;}

}

/*#bildart{
background: url(footage/art/muster.jpg);
background-position: center center;
background-size: cover;
}*/

/* Art Text********************************************/
#textart{
  white-space: nowrap;
}
a{
  color: #000000;
}
#textart p{
  margin: 6% auto 0 20%;
  color: #000000;
}
#textart h2{
  margin: -15% 80% 0 0;
}
#textart h3,hr{
  transform: translate(0,-250px);
}
/* Add ons********************************************/
.abschluss hr{
  margin: 0 0 0 0;
  transform: translate(0,0);
  width: 380px;
height: 4px;
background: #FFFFFF;
border: 0;
padding: 0;
}
.abschlusss hr{
  margin: 0 0 0 0;
  transform: translate(0,0);
  width: 380px;
height: 4px;
background: #000000;
border: 0;
padding: 0;
}
.abschlussss hr{
  margin: 0 0 0 0;
  transform: translate(0,0);
  width: 80px;
height: 4px;

border: 0;
padding: 0;
  background: #2b2b2d;
}



/* Footer********************************************/
li{list-style-type: none;}
footer{
  width:100%;
  height:70px;
  background-color: #000000;
  white-space: nowrap;
}
footer ul{
  margin: 0 0 0 0;
}
footer p{
  font-size: 1em;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0;

}
footer ul li{
float: left;
margin-right: 35%;
margin-top: 10px;}


footer#standig {
  position: fixed;
  width:100%;
  height:20px
  left: 0;
  bottom: 0;
  background-color:rgba(201, 76, 76, 0);


  }

  .navigation p{

  margin: -5% 0 auto 82%;

  transform: translate(-100px,0);

    text-align:right;


    font-size: 1.3em;

  }
/* Impressum********************************************/

#impressum h1{
  transform: translate(0);
  margin: 0 0 0 0;
  font-size: 4em;
  padding: 6%;
}
#impressum h2{
  transform: translate(0);
  margin: 6% 0 0 6%;
  font-size: 3em;
}
#impressum h3{
  transform: translate(0);
  margin: 5% 0 0 6%;
}
#impressum p{
  transform: translate(0);
  margin: 0 0 0 0;
  margin: 3% 10% 3% 10%;
  color: #000000;
}
/* Formate********************************************/
.desktopHide h3{
  text-align: center;
  margin: 100px 0 0 0;
  transform: translate(0);

}
.desktopHide p{
  text-align: center;
  margin: 10px 0 0 0;


}