body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
    background-color: #211D26;
    -ms-user-select: None;
    -moz-user-select: None;
    -webkit-user-select: None;
    user-select: None; 
} 
.wrapper {
    font-family: Arial;
    color: rgb(56, 66, 94);
    width: 100%;
   
}
.box1-headline {
    margin: 0;
    padding: 0;
    background-color: #211D26;   
} 
.headline {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    line-height: 4vw;
    float: left;
}
 .headline2 {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    line-height: 4vw;
    float: right; 
    text-align: right
}   
.head1 {
    float: left;
    text-decoration: none;
}
.head2 {
    display: none;
    color: white;
    font-size: 12vw;
    position: absolute;
  } 
.box-container {
    margin-left: 15vw;
    padding: 0;
    bottom: 0;
}
.portfolio {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    position: absolute;
    top: 15vw;
    left: -22vw;
} 
.trans-portfolio {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.trans-portfolio-active {
  position: absolute;
  top: 15vw;
  left: 0vw;
}
.portfolio2 {
    display: none;
}
.portfolio-gray {
    color: #556;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    position: absolute;
    top: 15vw;
    left: 0vw;

} 
.video {
    position: absolute;
    left: 1vw;
    display: block;
}
.video-gray {
    position: absolute;
    left: 1vw;
    display: none;
    } 
.grafik {
    position: absolute;
    top: 5vw;
    left: 1vw;
    display: block;
    } 
.grafik-gray {
    position: absolute;
    top: 5vw;
    left: 1vw;
    display: none;
}
.web {
    position: absolute;
    top: 9vw;
    left: 1vw;
    display: block;
    } 
.web-gray {
    position: absolute;
    top: 9vw;
    left: 1vw;
    display: none;
    } 
.leistung {
     position: absolute;
    /display: none;
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    line-height: 4vw;
    text-align: right;
    left: 100%;
    width: 40%;
    top: 16vw;
    z-index: -1;

} 
.trans-leistung {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.trans-leistung-active {
  left: 58vw;

}

.leistung2 {
    position: absolute;
    display: none;
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    line-height: 10vw;
    text-align: right;
    left: -100vw;
    width: 40%;
    top: 110vw;
    z-index: -1;

} 
  .pfeilbox1 {
  position: absolute;
  top: 15vw;
  left: 1.4vw;   /* pfeil pos 1   */
  width: 9vw;

}
.pfeilbox2 {
  position: absolute;
  top: 15vw;
  left: 45vw;   /* pfeil pos 2   */
  width: 9vw;

}  
.pfeil-static {
  position: absolute;
  top: 15vw;
  left: 45vw;   /* pfeil pos 2   */
  width: 9vw;
  transform: rotate(180deg);
  display: none;

}   
.transform1 {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.transform-active1 {
  position: absolute;
  top: 15vw;
  left: 45vw;  /* pfeil pos 2   */
} 
.rotate1 {
 transform: rotate(0deg);
}
.rotate-active1 {
  transform: rotate(180deg);
    transition: 0.3s;
}
.transform2 {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.transform-active2 {
  position: absolute;
  top: 15vw;
  left: 1.4vw;    /* pfeil pos 1   */
} 
.rotate2 {
 transform: rotate(180deg);
}
.rotate-active2 {
  transform: rotate(0deg);
    transition: 0.3s;
}   
.hide-none1 {
   display:block;
} 
.hide-hidden1 {
   display:none;
} 
.hide-none2 {
   display:block;
} 
.hide-hidden2 {
   display:none;
}
.hide-none3 {
   display:block;
} 
.hide-hidden3 {
   display:none;
} 
.hide-none4 {
   display:block;
} 
.hide-hidden4 {
   display:none;
}   
.footbox p {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-family: 'Courier', arial;
    text-decoration: none!important;
    -webkit-text-decoration: none!important;
    text-align: center;
    font-size: 1.77vw;
    color: white;
} 
.footbox a {
    color: white;
    text-decoration: none!important;
} 
.videotext {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    line-height: 4vw;
    position: absolute;
    top: 27.9vw;
    left: 0vw;
    height: 23vw;
    display: none;
  } 
.videotext-active {
    display: block;
  }
.grafiktext {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    line-height: 4vw;
    position: absolute;
    top: 27.9vw;
    left: 0vw;
    height: 23vw;
    display: none;
  } 
.grafiktext-active {
    display: block;
  }
.webtext {
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    line-height: 4vw;
    position: absolute;
    top: 27.9vw;
    left: 0vw;
    height: 23vw;
    display: none;
  } 
.webtext-active {
    display: block;
  }
/* *************************************** starkes quer ********************************************* */

@media (min-aspect-ratio: 16/8 ) {
.headline {
    color: white;
    font-size: 5vw;
    word-spacing: 6vw;
    line-height: 4.3vw;
}
.headline2 {
    font-size: 5vw;
    line-height: 4.3vw;
}    
.portfolio {
    word-spacing: 6vw;
    font-size: 5vw;
    top: 12vw;
    } 
.portfolio-gray {
    color: #556;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    position: absolute;
    top: 12vw;
    left: 0vw;

} 
.leistung {
    font-size: 5vw;
    top: 12vw;
    line-height: 4.3vw;
    }
.trans-leistung-active {
  top: 12vw;
} 
.leistung2 {
        display: none;
} 
.pfeilbox1 {
    width: 9vw;
    top: 12vw;
    left: 1.5vw;
    }
.pfeilbox2 {
    width: 9vw;
    top: 12vw;
    left: 45vw;
    } 
.pfeil-static {
  position: absolute;
  top: 12vw;
  left: 45vw;   
  width: 9vw;
  transform: rotate(180deg);
  display: none;

}   
.transform-active1 {
  left: 45vw;
} 
.transform-active2 {
  left: 1.5vw;
}
.videotext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
  }
.grafiktext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
} 
.webtext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
  } 
.footbox p {
    font-size: 1.77vw;
    text-decoration: none!important; 
}
}

/* *************************************** extrem quer ********************************************* */
@media (min-aspect-ratio: 20/8 ) {

.headline {
    color: white;
    font-size: 5vw;
    word-spacing: 6vw;
    line-height: 4.3vw;
}
.headline2 {
    font-size: 5vw;
    line-height: 4.3vw;
}  

.portfolio {
    display: none;
    color: white;
    word-spacing: 6vw;
    font-size: 5vw;
    top: 12vw;
    } 
.portfolio2 {
    display: block;
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vw;
    padding: 1vw;
    word-spacing: 6vw;
    position: absolute;
    top: 12vw;
    left: -22vw;
} 
.trans-portfolio2 {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.trans-portfolio2-active {
  position: absolute;
  top: 12vw;
  left: 0vw;
} 

.leistung {
    font-size: 5vw;
    top: 12vw;
    line-height: 4.3vw;
    }
.trans-leistung-active {
  top: 12vw;
} 
.leistung2 {
    display: none;
} 
.pfeilbox1 {
    width: 9vw;
    top: 12vw;
    left: 1.5vw;
    }
.pfeilbox2 {
    width: 9vw;
    top: 12vw;
    left: 45vw;
    } 
.pfeil-static {
  position: absolute;
  top: 12vw;
  left: 45vw;   
  width: 9vw;
  transform: rotate(180deg);
  display: none;

}   
.transform-active1 {
  left: 45vw;
} 
.transform-active2 {
  left: 1.5vw;
}
.videotext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
  }
.grafiktext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
} 
.webtext {
    font-size: 5vw;
    line-height: 4.3vw;
    top: 24.8vw;
  } 
.footbox p {
    font-size: 1.77vw;
    text-decoration: none!important; 
} 
}
/* *************************************** Quad ************************************************* */
 
@media (max-aspect-ratio: 1/1 ) {
.headline {
    color: white;
    font-size: 8vw;
    word-spacing: 9.7vw;
    line-height: 6.5vw;
}
 .headline2 {
    font-size: 8vw;
    word-spacing: 8.7vw;
    line-height: 6.5vw;
}   
 .pfeilbox1 {
    width: 13vw;
    top: 25vw;
    left: 2vw;
    }
.pfeilbox2 {
    width: 13vw;
    top: 25vw;
    left: 85vw;
    }
.pfeil-static {
    width: 13vw;
    top: 25vw;
    left: 85vw;   /* pfeil pos 2   */
    transform: rotate(180deg);
    display: none;

}  
.transform-active1 {
    top: 25vw;
    left: 85vw;
} 
.transform-active2 {
    top: 25vw;
    left: 2vw;
} 
.portfolio {
    font-size: 8vw;
    top: 38vw;
    left: -45vw;
    } 
.trans-portfolio-active {
    left: 0vw;
} 
.portfolio-gray {
    font-size: 8vw;
    top: 38vw;
    left: 0vw;

} 
.leistung {
    font-size: 8vw;
    left: 100%;
    width: 0%;
    top: 39vw;
    line-height: 6.5vw;
    }
.trans-leistung-active {
   left: 37vw;
}
.leistung2 {
    display: none;
} 
.head1 {
    float: none;
    text-decoration: none;
    }
.head2 {
    display: block;
    text-decoration: none;
    font-size: 9vw;
    line-height: 7.3vw;
    }
.video {
    }
.grafik {
    position: absolute;
    top: 7.4vw;
    left: 1vw;
    } 
.web {
    position: absolute;
    top: 13.9vw;
    left: 1vw;
    } 
.video-gray {
    position: absolute;
    display: none;
    } 
.grafik-gray {
    position: absolute;
    top: 7.4vw;
    display: none;
}
.web-gray {
    position: absolute;
    top: 13.9vw;
    display: none;
    } 
.videotext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.grafiktext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.webtext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.footbox p {
    position: absolute;
    bottom: 0;
    text-align: left;
    font-size: 3vw;
    padding-left: 2vw;
    color: white;
    } 
}
/* *************************************** iPad ************************************************* */
  
@media (max-aspect-ratio: 5/6 ) {
.headline {
    color: white;
    font-size: 8vw;
    word-spacing: 9.7vw;
    line-height: 6.5vw;
}
 .headline2 {
    font-size: 8vw;
    word-spacing: 8.7vw;
    line-height: 6.5vw;
}   
 .pfeilbox1 {
    width: 13vw;
    top: 25vw;
    left: 2vw;
    }
.pfeilbox2 {
    width: 13vw;
    top: 25vw;
    left: 85vw;
    }
.pfeil-static {
    width: 13vw;
    top: 25vw;
    left: 85vw;   /* pfeil pos 2   */
    transform: rotate(180deg);
    display: none;

}  
.transform-active1 {
    top: 25vw;
    left: 85vw;
} 
.transform-active2 {
    top: 25vw;
    left: 2vw;
} 
.portfolio {
    font-size: 8vw;
    top: 38vw;
    left: -45vw;
    } 
.trans-portfolio-active {
    left: 0vw;
} 
.portfolio-gray {
    font-size: 8vw;
    top: 38vw;
    left: 0vw;

} 
.leistung {
    font-size: 8vw;
    left: 100%;
    width: 0%;
    top: 39vw;
    line-height: 6.5vw;
    }
.trans-leistung-active {
   left: 37vw;
}
.leistung2 {
    display: none;
} 
.head1 {
    float: none;
    text-decoration: none;
    }
.head2 {
    display: block;
    text-decoration: none;
    font-size: 9vw;
    line-height: 7.3vw;
    }
.video {
    }
.grafik {
    position: absolute;
    top: 7.4vw;
    left: 1vw;
    } 
.web {
    position: absolute;
    top: 13.9vw;
    left: 1vw;
    } 
.video-gray {
    position: absolute;
    display: none;
    } 
.grafik-gray {
    position: absolute;
    top: 7.4vw;
    display: none;
}
.web-gray {
    position: absolute;
    top: 13.9vw;
    display: none;
    } 
.videotext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.grafiktext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.webtext {
    font-size: 8vw;
    line-height: 6.5vw;
    top: 65vw;
  } 
.footbox p {
    position: absolute;
    bottom: 0;
    text-align: left;
    font-size: 4vw;
    padding-left: 2vw;
    color: white;
    } 
}
/* *************************************** iPhone *************************************************** */
@media (max-aspect-ratio: 3/5 ) {
.headline {
    color: white;
    word-spacing: 15vw;
    line-height: 10vw;
    font-size: 12vw;
    }       
.headline2 {
    position: absolute;
    top: 20vw;
    word-spacing: 15vw;
    line-height: 10vw;
    font-size: 12vw;
    float: left!important;
    text-align: left!important;
    }
 .pfeilbox1 {
    width: 20vw;
    top: 47vw;
    left: 2vw;
    }
.pfeilbox2 {
    width: 20vw;
    top: 47vw;
    left: 71vw;
    }
.pfeil-static {
    width: 20vw;
    top: 47vw;
    left: 71vw;   /* pfeil pos 2   */
    transform: rotate(180deg);
    display: none;
}  
.transform-active1 {
    top: 47vw;
    left: 71vw;
} 
.transform-active2 {
    top: 47vw;
    left: 2vw;
} 
.trans-leistung-active {
  top: 107vw;
} 
.portfolio {
    font-size: 12vw;
    top: 60vw;
    left: -50vw;
    } 
.trans-portfolio-active {
    left: 0vw;
} 
.portfolio-gray {
    font-size: 12vw;
    top: 60vw;
    left: 0vw;
} 
.leistung {
    display: none!important;
    }
.leistung2-hide {
    display: block;
} 
.leistung2 {
    position: absolute;
    display: block;
    color: white;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12vw;
    padding: 1vw;
    word-spacing: 6.2vw;
    line-height: 10vw;
    text-align: right;
    left: -100vw;
    width: 40%;
    top: 100vw;
    z-index: -1;

} 
.trans-leistung2 {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}
.trans-leistung2-active {
  left: 0vw;

}   

.head1 {
    float: none;
    text-decoration: none;
    }
.head2 {
    display: block;
    text-decoration: none;
    font-size: 12vw;
    line-height: 10vw;
    }
.video {
    }
.grafik {
    position: absolute;
    top: 11vw;
    left: 1vw;
    } 
.web {
    position: absolute;
    top: 21vw;
    left: 1vw;
    }
.video-gray {
    position: absolute;
    display: none;
    } 
.grafik-gray {
    position: absolute;
    top: 11vw;
    display: none;
}
.web-gray {
    position: absolute;
    top: 21vw;
    display: none;
    } 
.videotext {
    font-size: 12vw;
    line-height: 10vw;
    top: 100vw;
  } 
.grafiktext {
    font-size: 12vw;
    line-height: 10vw;
    top: 100vw;
  } 
.webtext {
    font-size: 12vw;
    line-height: 10vw;
    top: 100vw;
  } 
.footbox p {
    position: absolute;
    bottom: 0;
    text-align: left;
    font-size: 3vw!important;
    padding-left: 2vw;
    color: white;
   } 
}