@font-face {
  font-family: "Diatype";
  src: url("../fonts/ABCDiatypeEdu-Regular.woff");
  font-variation-settings: "srff" 100, "ital" 0, "wght" 70;
}
html,
body {
  background: #fff;
  font-family: "Diatype";
  font-size: 16px;
  font-weight: normal;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(246, 246, 246);
}

a,
button,
input,
label {
  cursor: pointer;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.work{
  z-index: 2;
  font-size: 60px;
  
}

.contact{
  z-index: 2;
  font-size: 60px;
  
}

.X{
  font-size: 60px;
  display: none;
  z-index: 3;

}

.wrapper-work {
  position: fixed;
  height: 100vh;
  width: 100vw;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  z-index: 2;
  background-color: rgb(194, 194, 194);
  margin-top: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper{
  width: 100vw;
  height: 59vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.wrapperR{
  width: 100vw;
  height: 59vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.scroller{
  height: 500vh;
  display: block;
}

.z1{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 33.2vw;
  left: 2vw;
}

.z2{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 27.4vw;
  left: 6vw;
}

.z3{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 21.3vw;
  left: 4vw;
}

.z4{
  width: 13vw;
  height: 13vw;
  position: absolute;
  top: 9vw;
  left: 3vw;
}

.z5{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 4vw;
  left: 13vw;
}

.z6{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 9vw;
  left: 20.5vw;
}

.z7{
  width: 15vw;
  height: 15vw;
  position: absolute;
  top: 15.2vw;
  left: 19vw;
}

.z8{
  width: 18vw;
  height: 18vw;
  position: absolute;
  top: 29.4vw;
  left: 15vw;
}

.z9{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 11.5vw;
  left: 30.2vw;
}

.z10{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 7.4vw;
  left: 36vw;
}

.z11{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 14.5vw;
  left: 41.5vw;
}

.z12{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 21vw;
  left: 41.5vw;
}

.z13{
  width: 13vw;
  height: 13vw;
  position: absolute;
  top: 27.7vw;
  left: 38.5vw;
}

.z14{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 40.2vw;
  left: 39.5vw;
}

.z15{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 46.2vw;
  left: 35.5vw;
}
.z16{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 45.9vw;
  left: 50.5vw;
}

.z17{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 39.4vw;
  left: 51.5vw;
}

.z18{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 33.6vw;
  left: 54.5vw;
}

.z19{
  width: 13vw;
  height: 13vw;
  position: absolute;
  top: 21vw;
  left: 51.5vw;
}

.z20{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 15.7vw;
  left: 59.5vw;
}

.z21{
  width: 15vw;
  height: 15vw;
  position: absolute;
  top: 2vw;
  left: 51.5vw;
}

.z22{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 2.5vw;
  left: 65.7vw;
}

.z23{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 5.5vw;
  left: 74vw;
}

.z24{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 4.5vw;
  left: 80.5vw;
}

.z25{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 12vw;
  left: 85.5vw;
}

.z26{
  width: 18vw;
  height: 18vw;
  position: absolute;
  top: 18.5vw;
  left: 78.5vw;
}

.z27{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 29.5vw;
  left: 73.3vw;
}

.z28{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 28.5vw;
  left: 62.5vw;
}

.z29{
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 34.5vw;
  left: 69.2vw;
}

.z30{
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 40.5vw;
  left: 71vw;
}

.z31{
  width: 13vw;
  height: 13vw;
  position: absolute;
  top: 43.5vw;
  left: 78.4vw;
}


.r{
  transform: translate(-10vw, 20dvh);
}

.zahnrad.loaded {
  transition: all 1s cubic-bezier(0, 0, .2, 1);
}

.wrapper-work {
  transition: all 1s cubic-bezier(0, 0, .2, 1);
}

@media only screen and (max-width: 600px) {
 
  .X{
    font-size: 60px;
    z-index: 3;
    display: block;
  }

  .work{
    z-index: 2;
    font-size: 60px;
    
  }
  
  .contact{
    z-index: 2;
    font-size: 60px;
  }
 
  .wrapper-work {
    position: fixed;
    height: 100vh;
    width: 100vw;
    padding-bottom: 20vh;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    z-index: 2;
    background-color: rgb(197, 197, 197);
    margin-top: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
 
  .wrapper-out {
    display: flex;
    flex-direction: column;
    transform: scale(1.2);
    transform-origin: center center;
    position: fixed;
    height: 135vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .wrapperR {
    width: 50vw;
    height: 65vw;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .wrapper{
    width: 50vw;
    height: 45vw;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .z16 {
    width: 9vw;
    height: 9vw;
    position: absolute;
    top: 45.9vw;
    left: 0.5vw;
  }
  
  .z17 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 39.4vw;
    left: 1.5vw;
  }
  
  .z18 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 33.6vw;
    left: 4.5vw;
  }
  
  .z19 {
    width: 13vw;
    height: 13vw;
    position: absolute;
    top: 21vw;
    left: 1.5vw;
  }
  
  .z20 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 15.7vw;
    left: 9.5vw;
  }
  
  .z21 {
    width: 15vw;
    height: 15vw;
    position: absolute;
    top: 2vw;
    left: 1.5vw;
  }
  
  .z22 {
    width: 9vw;
    height: 9vw;
    position: absolute;
    top: 2.5vw;
    left: 15.7vw;
  }
  
  .z23 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 5.5vw;
    left: 24vw;
  }
  
  .z24 {
    width: 9vw;
    height: 9vw;
    position: absolute;
    top: 4.5vw;
    left: 30.5vw;
  }
  
  .z25 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 12vw;
    left: 35.5vw;
  }
  
  .z26 {
    width: 18vw;
    height: 18vw;
    position: absolute;
    top: 18.5vw;
    left: 28.5vw;
  }
  
  .z27 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 29.5vw;
    left: 23.3vw;
  }
  
  .z28 {
    width: 9vw;
    height: 9vw;
    position: absolute;
    top: 28.5vw;
    left: 12.5vw;
  }
  
  .z29 {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 34.5vw;
    left: 19.2vw;
  }
  
  .z30 {
    width: 9vw;
    height: 9vw;
    position: absolute;
    top: 40.5vw;
    left: 21vw;
  }
  
  .z31 {
    width: 13vw;
    height: 13vw;
    position: absolute;
    top: 43.5vw;
    left: 28.4vw;
  }
  

}