/* Grundlayout */
html {
  scroll-behavior: smooth;
}

/* Entfernt Browser-Standard-Abstände */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 100%; /* Setzt Schriftgröße auf die des Elternelements */
  font-weight: normal; /* Macht die Schrift normal, nicht fett */
}

@font-face {
       font-family: 'Bronex-BoldExpanded'; /* Name der Schriftart */
       src: url('Bronex-BoldExpanded.ttf') format('truetype'); /* Pfad zur .ttf-Datei */
       font-weight: normal; /* oder bold, light, etc. */
       font-style: normal;  /* oder italic, oblique, etc. */
   }

@font-face {
    font-family: 'HelveticaNeue-Thin';
    font-style: normal;
    font-weight: normal;
    src: local('HelveticaNeue-Thin'), url('HelveticaNeue-Thin.otf') format('woff');
   }

@font-face {
    font-family: 'Signatra';
    font-style: normal;
    font-weight: normal;
    src: local('Signatra'), url('Signatra') format('ttf');
   }

body {
  font-family: "Bronex-BoldExpanded";
  background-color: #090909;
  margin: 0;
  align-items: center;
  padding: 0;
  color: #fff ;
  position: relative;
  z-index: -999;
  scroll-behavior: smooth;
}

a, a:visited, a:link{
  text-decoration: none;
  color: #ffffff;
}

  #nav {
  left: 0;
  position: fixed;
  color: #ffffff;
  z-index: 100;
  width: 94vw;
  font-size: calc(2vh + 2vw);
  justify-content: center;
  align-items: center;
  font-family: "Bronex-BoldExpanded", sans-serif;
  mix-blend-mode: difference;
  display:block;
  }

  .navButton {
  border: 1px #ffffff solid;
  border-radius: 25px;
  margin: 3vh 0vw 3vh 0vw;
  padding: 0 10px 0 10px;
  cursor: pointer;
  }

  #navButtonLeft {
  left: 3vw;
  top: 6vh;
  position: inherit;
  }

  #navButtonRight {
  right: 3vw;
  top: 6vh;
  position: inherit;
  }

.navTitle {
  /* padding: 3vh 3vw 3vh 0vw; */
  border-radius: 25px;
  border: 0px #ffffff solid;
  }


.basic-switch {
    appearance: none;
    display: inline-grid;
    position: relative;
    background-color: #98989d;
    height: 1.5vw;
    width: 1.5vw;
    border-radius: 25px;
    background-image: url('https://unpkg.com/i18n-switch@2.0.0/assets/united-kingdom.png');
    background-position: center;
    background-size: cover;
  }

.basic-switch:checked {
    background-color: #000;
    background-image: url('https://unpkg.com/i18n-switch@2.0.0/assets/germany.png');
}

.basic-switch::thumb {
    background-color: white;
    width: 24px;
    height: 24px;
    margin: -2px -1px;
    transition: all 0.3s;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3)
}

.basic-switch:checked::thumb {
    translate: 22px 0;
}

.basic-switch::thumb,
.basic-switch::track {
    grid-area: 1/1;
}



  .menuItems {
  display: block;
  z-index: 2;
  width: 100%;
  position: relative;
  padding-top: 3vh;
  }

  .menuItem {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: calc(1.5vh + 1.5vw);
  }

  #navImg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2vh;
  bottom: 1vh;
  position: relative;
  cursor: pointer;
  }

  #navMenu img {
  width: 30px;
  height: 30px;
  position: relative;
  bottom: 0px;
  }


.stage_headline {
  font-family: "Bronex-BoldExpanded", sans-serif;
  font-size: calc(1.7vh + 1.7vw);
  padding: 9vh 0 0 3vw;
  }

.stage_content {
  font-family: "HelveticaNeue-Thin";
  font-size: calc(2vh + 2vw);
  width: calc(100vw);
  margin: 0vh 5vw 0vh 0vw;
  height: fit-content;
  word-wrap: break-word
  }

  .stage_text {
  padding: 3vh 0 3vh 0;;
  float:left;
  width: 90vw;
  }

  .stage_text_right {
  left: 35vw;
  position: relative;
  width: 55vw;
  }

    .stage_text .deco {
  font-weight: 550;
  font-size: calc(2.2vh + 2.2vw);
  }


  /********** MAIN STAGE *************/
  
  #main_stage {
  height: 100vh;
  width: 100vw;
  background-color: #3B27BA;
  position: relative;
  z-index: -100;
  }

  #hero_container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: inherit;
  overflow: hidden;
  }

  #heropng {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%) scale(30%,30%);
  z-index: inherit;
  }

  #stars {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -70%);
  }

  #stars {
  display: none;
  }

  @keyframes star {
  to {
  zoom:10%;
  opacity:0;
  }
  from{
  zoom:100%;
  opacity: 1;
  }
  }

  .star {
  animation-name: star;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;

  }
  @keyframes star1 {
  to {
  opacity:0;
  }
  from{
  opacity:1;
  }
  }
  .star1 {
  animation-name: star1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
  }
  @keyframes star2 {
  0% {
  opacity:1;
  }
  45% {
  opacity:1;
  }
  55% {
  opacity:0;
  }
  100% {
  opacity:0;
  }

  }
  .star2 {
  animation-name: star2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
  }

  .subline {
  position: absolute;
  top: 75vh;
  font-family: "HelveticaNeue-Thin";
  font-size: 2.5vb;
  width: 90vw;
  padding-left: 5vw;
  padding-right: 5vw;
  overflow-wrap: break-word;
  text-align: center;
  }

  .deco {
  font-family: "Signatra";
  }

/********** ABOUT STAGE *************/

#about_stage {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  z-index: -90;
  color: #000000;
  overflow: hidden;
  }

  .wave-container {
  position: relative;
  width: 100vw;
  overflow: hidden;
  z-index: inherit;
  display: none;
  }

  #about_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  }


 #about_stage .stage_content {
  width: 100%;
  min-height: 100vh;
  background-color: #ff7bca;
  z-index: inherit;
  color: #000000;
  overflow: hidden;
  }

  #about_stage .stage_content .stage_text {
  font-size: calc(2vh + 2vw);
  margin-left: 6vw;;
  float: none;
  z-index: 100;
  position: relative;
  }

  #about_stage .stage_content .deco {
  font-weight: 100;
  font-size: calc(2.2vh + 2.2vw);
  color: #000 ;
  }


  #svg_hero {
  width: 30vw;
  height: 30vh;
  bottom: 5vh;
  right: 0vw;;
  position: absolute;
  z-index: 0;
  transform-origin: 50% 50%;
  animation: swing 6s ease-in-out infinite;
  filter: drop-shadow(0px 50px 100px rgba(0, 0, 0, 0.7));
  }

  @keyframes swing {
  0% {
  transform: rotate(0deg);
  }
  25% {
  transform: rotate(35deg);
  }
  75% {
  transform: rotate(-35deg);
  }
  100% {
  transform: rotate(0deg);
  }
  }

  .path-0{
  animation:pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  }

  @keyframes pathAnim-0{
  0%{
  d: path("M 0,600 L 0,150 C 38.311616567177154,143.5809461601217 76.62323313435431,137.16189232024337 114,147 C 151.3767668656457,156.83810767975663 187.81868402975982,182.93337687914817 217,189 C 246.18131597024018,195.06662312085183 268.1020307466065,181.10460016316395 296,186 C 323.8979692533935,190.89539983683605 357.77319298381406,214.64822246819605 393,197 C 428.22680701618594,179.35177753180395 464.8051973181374,120.30250996405188 507,121 C 549.1948026818626,121.69749003594812 597.0060177436364,182.14173767559643 635,185 C 672.9939822563636,187.85826232440357 701.1707317073171,133.13053933356235 727,122 C 752.8292682926829,110.86946066643763 776.3110554270953,143.33610499015413 807,154 C 837.6889445729047,164.66389500984587 875.5850465843017,153.52504070582103 912,151 C 948.4149534156983,148.47495929417897 983.3487582356979,154.56373218656177 1015,153 C 1046.651241764302,151.43626781343823 1075.0199204729058,142.2200305479319 1112,135 C 1148.9800795270942,127.7799694520681 1194.571559872679,122.55614562171064 1233,140 C 1271.428440127321,157.44385437828936 1302.6938400363774,197.55538696522555 1336,203 C 1369.3061599636226,208.44461303477445 1404.6530799818113,179.2223065173872 1440,150 L 1440,400 L 0,400 Z");
  }
  25%{
  d: path("M 0,600 L 0,150 C 31.874910865527923,138.8956126149414 63.749821731055846,127.79122522988277 94,143 C 124.25017826894415,158.20877477011723 152.87562394130455,199.7307116954102 194,189 C 235.12437605869545,178.2692883045898 288.7476825037258,115.28592798847633 322,100 C 355.2523174962742,84.71407201152367 368.1336460437921,117.12557635068447 397,128 C 425.8663539562079,138.87442364931553 470.7177333211058,128.21176660878575 505,146 C 539.2822666788942,163.78823339121425 562.9954206717847,210.0273572141725 598,212 C 633.0045793282153,213.9726427858275 679.3005839917555,171.67880453452423 722,176 C 764.6994160082445,180.32119546547577 803.8022433611935,231.2574246477306 834,224 C 864.1977566388065,216.7425753522694 885.4904425634699,151.29149687455333 923,129 C 960.5095574365301,106.70850312544668 1014.2359863849267,127.57658785405614 1044,124 C 1073.7640136150733,120.42341214594386 1079.5656118968236,92.40215170922207 1114,95 C 1148.4343881031764,97.59784829077793 1211.5015660277784,130.81480530905557 1248,141 C 1284.4984339722216,151.18519469094443 1294.4281239920633,138.33862705455556 1322,136 C 1349.5718760079367,133.66137294544444 1394.7859380039683,141.83068647272222 1440,150 L 1440,400 L 0,400 Z");
  }
  50%{
  d: path("M 0,600 L 0,150 C 42.25055824444641,108.53807930934258 84.50111648889282,67.07615861868514 119,89 C 153.49888351110718,110.92384138131486 180.2460922888751,196.23344483460195 214,202 C 247.7539077111249,207.76655516539805 288.51451435560665,133.9900620429069 321,120 C 353.48548564439335,106.00993795709307 377.6958502886983,151.80630699377036 403,178 C 428.3041497113017,204.19369300622964 454.70208448960034,210.78470998201166 495,187 C 535.2979155103997,163.21529001798834 589.4958117529005,109.05485307818311 626,99 C 662.5041882470995,88.94514692181689 681.3146684987976,122.99587770525594 716,153 C 750.6853315012024,183.00412229474406 801.2455142519087,208.96163610079319 841,206 C 880.7544857480913,203.03836389920681 909.7032744935672,171.15757789157132 936,150 C 962.2967255064328,128.84242210842868 985.941387773823,118.4080523329215 1016,115 C 1046.058612226177,111.5919476670785 1082.5311744111402,115.21021277674271 1123,127 C 1163.4688255888598,138.7897872232573 1207.933914581616,158.75109656010775 1247,158 C 1286.066085418384,157.24890343989225 1319.7331672623957,135.78540098282636 1351,131 C 1382.2668327376043,126.21459901717364 1411.133416368802,138.10729950858683 1440,150 L 1440,400 L 0,400 Z");
  }
  75%{
  d: path("M 0,600 L 0,150 C 38.41904055402158,164.99780953695586 76.83808110804316,179.99561907391174 109,162 C 141.16191889195684,144.00438092608826 167.0667161218489,93.01533324130891 200,97 C 232.9332838781511,100.98466675869109 272.8950544045613,159.94304796085265 310,170 C 347.1049455954387,180.05695203914735 381.353066259906,141.21247491528052 412,121 C 442.646933740094,100.78752508471948 469.69268055581483,99.20705237802528 502,115 C 534.3073194441852,130.79294762197472 571.8762115168346,163.95931557261838 610,155 C 648.1237884831654,146.04068442738162 686.8024733768465,94.9556853315012 724,97 C 761.1975266231535,99.0443146684988 796.9138949757796,154.2179431013768 834,168 C 871.0861050242204,181.7820568986232 909.5419467200354,154.17254226299156 941,135 C 972.4580532799646,115.82745773700843 996.9183181440787,105.09188784665695 1027,110 C 1057.0816818559213,114.90811215334305 1092.7847807036492,135.45990635038063 1129,151 C 1165.2152192963508,166.54009364961937 1201.9425590413252,177.06848675182061 1232,171 C 1262.0574409586748,164.93151324817939 1285.4449831310499,142.26614664233696 1319,136 C 1352.5550168689501,129.73385335766304 1396.277508434475,139.86692667883153 1440,150 L 1440,400 L 0,400 Z");
  }
  100%{
  d: path("M 0,600 L 0,150 C 38.311616567177154,143.5809461601217 76.62323313435431,137.16189232024337 114,147 C 151.3767668656457,156.83810767975663 187.81868402975982,182.93337687914817 217,189 C 246.18131597024018,195.06662312085183 268.1020307466065,181.10460016316395 296,186 C 323.8979692533935,190.89539983683605 357.77319298381406,214.64822246819605 393,197 C 428.22680701618594,179.35177753180395 464.8051973181374,120.30250996405188 507,121 C 549.1948026818626,121.69749003594812 597.0060177436364,182.14173767559643 635,185 C 672.9939822563636,187.85826232440357 701.1707317073171,133.13053933356235 727,122 C 752.8292682926829,110.86946066643763 776.3110554270953,143.33610499015413 807,154 C 837.6889445729047,164.66389500984587 875.5850465843017,153.52504070582103 912,151 C 948.4149534156983,148.47495929417897 983.3487582356979,154.56373218656177 1015,153 C 1046.651241764302,151.43626781343823 1075.0199204729058,142.2200305479319 1112,135 C 1148.9800795270942,127.7799694520681 1194.571559872679,122.55614562171064 1233,140 C 1271.428440127321,157.44385437828936 1302.6938400363774,197.55538696522555 1336,203 C 1369.3061599636226,208.44461303477445 1404.6530799818113,179.2223065173872 1440,150 L 1440,400 L 0,400 Z");
  }
  }

  /********** SERVICE STAGE *************/

  #services_stage {
  min-height: 100vh;
  width: 100vw;
  background-color: #000000;
  position: relative;
  z-index: -80;
  overflow: hidden;
  }

  #services_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  margin-top: 3vw;
  }

  #services_stage .stage_text {
  font-size: calc(2vh + 2vw);
  margin-left: 6vw;
  float: left;
  position: relative;
  }

  .boxed {
  width: calc(((100vw - 20vw) / 4 ) );
  float: left;
  height: 40vh;
  margin-right: 1vw;
  position:relative;
  padding: 0vw;
  overflow: hidden;
  font-size: calc(1.3vh + 1.3vw);
  margin-bottom: 3vw;
  border-radius: 2rem;
  }

  #boxed_wrapper {
  height: auto;
  width: auto;
  float: left;
  }

  .boxed_ div {
  vertical-align: bottom;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  }

.boxed_ :first-child {
  font-family: "Bronex-BoldExpanded";;
  }
  .span2 {
  font-size: calc(1.1vh + 1.1vw);
  }

  #box1 {
  background-size: cover;
  background-color: #ff55c4;
  }


  #box2 {
  background-color: #37d0f2;
  background-size: cover;
  }

  #box3 {
  background-size: cover;
  background-color: #60fc1c;
  }

  #box4 {
  background-size: cover;
  background-color: #db36f8;
  }
  
/********** TEAM STAGE *************/

  #team_stage {
  min-height: 100vh;
  width: 100vw;
  background-color: #000000;
  position: relative;
  z-index: -80;
  overflow: hidden;
  }

  #team_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  margin-top: 3vw;
  z-index: 0;
  }

  /********** IMPRINT STAGE *************/

  #imprint_stage {
  min-height: 100vh;
  width: 100vw;
  background-color: #3B27BA;
  position: relative;
  z-index: -80;
  overflow: hidden;
  }

  #imprint_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  margin-top: 3vw;
  z-index: 0;
  }

  #imprint_stage .stage_text {
  font-size: calc(1.7vh + 1.7vw);
  position: relative;
  width: 64vw;
  padding-left: 3vw;
  }

  #imprint_stage .stage_text p {
  margin-top: 0;
  padding-left: 3vw;
  }

/********** CONTACT STAGE *************/

  #contact_stage {
  min-height: 100vh;
  width: 100vw;
  background-color: #005946;
  position: relative;
  z-index: -80;
  overflow: hidden;
  }

  #contact_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  margin-top: 3vw;
  z-index: 0;
  }

  #contact_stage .stage_text {
  font-size: calc(1.7vh + 1.7vw);
  position: relative;
  width: 64vw;
  padding-left: 6vw;
  }

  #contact_stage .stage_text p {
  margin-top: 0;
  padding-left: 3vw;
  }

  .form-group {
  margin-bottom: 15px;
  }

  .form-group label {
  display: block;
  margin-bottom: 5px;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  }

  .submitButton {
  border: 1px #ffffff solid;
  border-radius: 25px;
  margin: 3vh 0vw 3vh 0vw;
  padding: 0 10px 0 10px;
  cursor: pointer;
  font-size: calc(2vh + 2vw);
  font-family: "Bronex-BoldExpanded", sans-serif;
  mix-blend-mode: difference;
  }

  .submitButton:hover {
  mix-blend-mode: normal;
  }

  /********** CUSTOMER STAGE *************/

  #customer_stage {
  min-height: 100vh;
  width: 100vw;
  background-color: #d37714;
  position: relative;
  z-index: -80;
  overflow: hidden;
  }

  #customer_stage .stage_headline {
  font-size: calc(3vh + 3vw);
  line-height: 1.1em;
  margin-left: 3vw;;
  margin-top: 3vw;
  z-index: 0;
  }

  #customer_stage .stage_text {
  font-size: calc(1.7vh + 1.7vw);
  position: relative;
  width: 84vw;
  padding-left: 6vw;
  }

  .quote {
  font-style: italic;
  }

  #customer_stage .stage_text p {
  margin-top: 0;
  }

  .customer_link {
  font-size: calc(0.8vh + 0.8vw);
  }

  .customer_name {
  margin-bottom: 1vh;
  }

  @keyframes shrug67smooth {
    0%   { transform: translateY(0) skewY(0deg); }
    15%  { transform: translateY(-3px) skewY(-5deg); }  /* linke Seite hoch */
    30%  { transform: translateY(0) skewY(0deg); }
    55%  { transform: translateY(-3px) skewY(5deg); }   /* rechte Seite hoch */
    75%  { transform: translateY(0) skewY(0deg); }
    100% { transform: translateY(0) skewY(0deg); }
  }

  .dance-67 {
    animation: shrug67smooth 0.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    transform-origin: center;
  }

  #lfnp {  
    width: 80vw;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    font-family: 'Bronex-BoldExpanded';
    font-size: calc(4vh + 4vw);
    /* transform: rotate(-10deg); */
    color: #ff55c4;
}


/********** MEDIA WIDTH ---- 480 ---- ******************************************************************************************************************************************************/
@media (width <= 480px) {

  #navMenu {
  min-width: 100vw;
  width: 15vw;
  justify-content: center;
  align-items: center;
  position: fixed;
  mix-blend-mode: normal;
  background-color: #00000080;
  height: auto;
  transition: top 0.5s ease-in-out;
  top: -120px;
  z-index: 99;
  }

 .basic-switch {
  width: 20px;
  height: 20px;
}

  /********** SERVICE STAGE *************/

  .boxed_ {
  position:relative;
  padding: 0vw;
  background-color: #99fc3c;
  height: auto;
  bottom: 0;
  top: 1000px;
  overflow: hidden;
  float: none;
  min-height: 10vh;
  color: #000;
  float: none;
  width: calc(((100vw) / 1 ));
  padding-bottom: 1vh;
  padding-left: 3vw;
}

  .boxed_ span {
  /* position: absolute; */
  left: .5vw;
  display: flex;
  padding: 1vh;
  animation: rollon 4s alternate infinite ease-in-out;
  z-index: 99;
  height: auto;
  width: 94vw;
  font-size: calc(1.8vh + 1.8vw);
  }

  /********** TEAM STAGE *************/

  #team_stage .stage_text {
  font-size: calc(1.7vh + 1.7vw);
  float: left;
  position: relative;
  width: 94vw;
  padding-left: 3vw;
  }

  #team_stage .stage_text p {
  margin-top: 0;
  padding-left: 3vw;
  padding-top: 3vh;
  }

  #team_stage #imgWrapper1 {
  position: relative;
  width: calc((100vw - 12vw) / 1 );
  top: 3vh;
  height: 20vh;
  padding-left: 6vw;
  z-index: 100;
  overflow: hidden;
  }

  #team_stage img {
  position: relative;
  width: calc((100vw - 12vw) / 1 );
  height: auto;
  display: block;
  transition: top 0.5s ease-in-out;
  pointer-events: none;
  top: -10vh;
  }


}

/*****************+ MEDIA WIDTH > 400 - 1200 *****************************************************************/
@media ( 480px < width <= 1200px ) {
#nav {
    display: inline;
}

#navButtonLeft {
    top: 3vh;
}

#navButtonRight {
    top: 3vh;
}

#navMenu {
max-width: 250px;
min-width: 150px;
width: 15vw;
justify-content: center;
align-items: center;
transform: translateX(-50%);
left: 50%;
position: fixed;
mix-blend-mode: normal;
background-color: rgb(127, 128, 127);
border-radius: 25px;
height: auto;
transition: top 0.5s ease-in-out;
top: -500px;
}
.menuItem {
font-size: calc(1vh + 1vw);
}

.basic-switch {
  width: 40px;
  height: 40px;
}

.stage_content {
  font-size: calc(1.7vh + 1.7vw);
    }

.stage_text .deco {
  font-size: calc(1.8vh + 1.8vw);
  }

#stars {
  display: inline;
  }


/*********** ABOUT STAGE *********/

.wave-container {
  display: flex;
  }

  #about_stage .stage_content .stage_text {
  font-size: calc(1.5vh + 1.5vw);
  }

  #about_stage .stage_content .deco {
font-size: calc(1.8vh + 1.8vw);
}

/********** SERVICE STAGE *************/

#services_stage .stage_text {
font-size: calc(1.5vh + 1.5vw);
}

.boxed_ {
width: calc(((100vw) / 4 ) );
float: left;
position:relative;
padding: 0vw;
background-color: #99fc3c;
height: 50vh;
bottom: 0;
top: 1000px;
overflow: hidden;
color: #000;
}

.boxed_ span {
position: absolute;
left: .5vw;
display: flex;
padding: 1vh;
width: 85%;
animation: rollon 4s alternate infinite ease-in-out;
z-index: 99;
}

/********** TEAM STAGE *************/

#team_stage .stage_text {
font-size: calc(1.3vh + 1.3vw);
float: left;
position: relative;
width: 64vw;
}

#team_stage .stage_text p {
margin-top: 0;
padding-left: 3vw;
}


#team_stage #imgWrapper1 {
position: relative;
width: calc(((100vw) / 4 ) ); 
top: 3vh;
z-index: 100;
float: left;
}

#team_stage img {
position: relative;
width: calc(((100vw) / 4 ) ); 
height: auto;
display: block;
transition: top 0.5s ease-in-out;
pointer-events: none;
}

  /********** IMPRINT STAGE *************/

#imprint_stage .stage_text {
font-size: calc(1.3vh + 1.3vw);
}

}

/*****************+ MEDIA WIDTH > 1200 *****************************************************************/
@media (width > 1200px) {
  #nav {
        display: inline;
    }
  #navButtonLeft {
    top: 3vh;
    }
    #navButtonRight {
    top: 3vh;
    }
    #navMenu {
max-width: 250px;
min-width: 150px;
width: 15vw;
justify-content: center;
align-items: center;
transform: translateX(-50%);
left: 50%;
position: fixed;
mix-blend-mode: normal;
background-color: rgb(127, 128, 127);
border-radius: 25px;
height: auto;
transition: top 0.5s ease-in-out;
top: -500px;
}
.menuItem {
font-size: calc(1vh + 1vw);
}

#navMenu img {
  width: 40px;
  height: 40px;
  }

.basic-switch {
  width: 40px;
  height: 40px;
}

.stage_content {
  font-size: calc(1.7vh + 1.7vw);
}

.stage_text .deco {
  font-size: calc(1.8vh + 1.8vw);
  }

#stars {
  display: inline;
  }

/*********** ABOUT STAGE *********/
.wave-container {
  display: flex;
  }

#about_stage .stage_content .stage_text {
  font-size: calc(1.5vh + 1.5vw);
  }

  #about_stage .stage_content .deco {
font-size: calc(1.8vh + 1.8vw);
}

  /********** SERVICE STAGE *************/

#services_stage .stage_text {
font-size: calc(1.5vh + 1.5vw);
}

.boxed_ {
width: calc(((100vw) / 4 ) );
float: left;
position:relative;
padding: 0vw;
background-color: #99fc3c;
height: 50vh;
bottom: 0;
top: 1000px;
overflow: hidden;
color: #000;
}

.boxed_ span {
position: absolute;
left: .5vw;
display: flex;
padding: 1vh;
width: 85%;
animation: rollon 4s alternate infinite ease-in-out;
z-index: 99;
}

  /********** TEAM STAGE *************/

#team_stage .stage_text {
font-size: calc(1.3vh + 1.3vw);
float: left;
position: relative;
width: 64vw;
}

#team_stage .stage_text p {
margin-top: 0;
padding-left: 3vw;
}


#team_stage #imgWrapper1 {
position: relative;
width: calc(((100vw) / 4 ) ); 
top: 3vh;
z-index: 100;
float: left;
}



#team_stage img {
position: relative;
width: calc(((100vw) / 4 ) ); 
height: auto;
display: block;
transition: top 0.5s ease-in-out;
pointer-events: none;
}

  /********** IMPRINT STAGE *************/

#imprint_stage .stage_text {
font-size: calc(1.3vh + 1.3vw);
}

}