/* 
css reset 
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 100%;
  }
  
  ol,
  ul {
    list-style: none;
  }
  
  img,
  video {
    width: 100%;
  }
  
  a {
    color: black;
    text-decoration: none;
  }
  
/* 
ab hier eigenen code 
*/

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}


.iframe-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.iframe-wrapper {
  flex: 0 0 2vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.iframe-wrapper iframe {
  width: 100vw;
  height: 100vh;
  border: none;
  position: relative;
  pointer-events: auto;
}


.site1 iframe {
  transform: translateX(0vw); /* Adjust to center the view inside the 10vw container */
}

.site2 iframe {
  transform: translateX(-2vw); /* Adjust to center the view inside the 10vw container */
}

.site3 iframe {
  transform: translateX(-4vw); /* Adjust to center the view inside the 10vw container */
}

.site4 iframe {
  transform: translateX(-6vw); /* Adjust to center the view inside the 10vw container */
}

.site5 iframe {
  transform: translateX(-8vw); /* Adjust to center the view inside the 10vw container */
}

.site6 iframe {
  transform: translateX(-10vw); /* Adjust to center the view inside the 10vw container */
}

.site7 iframe {
  transform: translateX(-12vw); /* Adjust to center the view inside the 10vw container */
}

.site8 iframe {
  transform: translateX(-14vw); /* Adjust to center the view inside the 10vw container */
}

.site9 iframe {
  transform: translateX(-16vw); /* Adjust to center the view inside the 10vw container */
}

.site10 iframe {
  transform: translateX(-18vw); /* Adjust to center the view inside the 10vw container */
}

.site11 iframe {
  transform: translateX(-20vw); /* Adjust to center the view inside the 10vw container */
}

.site12 iframe {
  transform: translateX(-22vw); /* Adjust to center the view inside the 10vw container */
}

.site13 iframe {
  transform: translateX(-24vw); /* Adjust to center the view inside the 10vw container */
}

.site14 iframe {
  transform: translateX(-26vw); /* Adjust to center the view inside the 10vw container */
}

.site15 iframe {
  transform: translateX(-28vw); /* Adjust to center the view inside the 10vw container */
}

.site16 iframe {
  transform: translateX(-30vw); /* Adjust to center the view inside the 10vw container */
}

.site17 iframe {
  transform: translateX(-32vw); /* Adjust to center the view inside the 10vw container */
}

.site18 iframe {
  transform: translateX(-34vw); /* Adjust to center the view inside the 10vw container */
}

.site19 iframe {
  transform: translateX(-36vw); /* Adjust to center the view inside the 10vw container */
}

.site20 iframe {
  transform: translateX(-38vw); /* Adjust to center the view inside the 10vw container */
}

.site21 iframe {
  transform: translateX(-40vw); /* Adjust to center the view inside the 10vw container */
}

.site22 iframe {
  transform: translateX(-42vw); /* Adjust to center the view inside the 10vw container */
}

.site23 iframe {
  transform: translateX(-44vw); /* Adjust to center the view inside the 10vw container */
}

.site24 iframe {
  transform: translateX(-46vw); /* Adjust to center the view inside the 10vw container */
}

.site25 iframe {
  transform: translateX(-48vw); /* Adjust to center the view inside the 10vw container */
}

.site26 iframe {
  transform: translateX(-50vw); /* Adjust to center the view inside the 10vw container */
}

.site27 iframe {
  transform: translateX(-52vw); /* Adjust to center the view inside the 10vw container */
}

.site28 iframe {
  transform: translateX(-54vw); /* Adjust to center the view inside the 10vw container */
}

.site29 iframe {
  transform: translateX(-56vw); /* Adjust to center the view inside the 10vw container */
}

.site30 iframe {
  transform: translateX(-58vw); /* Adjust to center the view inside the 10vw container */
}

.site31 iframe {
  transform: translateX(-60vw); /* Adjust to center the view inside the 10vw container */
}

.site32 iframe {
  transform: translateX(-62vw); /* Adjust to center the view inside the 10vw container */
}

.site33 iframe {
  transform: translateX(-64vw); /* Adjust to center the view inside the 10vw container */
}

.site34 iframe {
  transform: translateX(-66vw); /* Adjust to center the view inside the 10vw container */
}

.site35 iframe {
  transform: translateX(-68vw); /* Adjust to center the view inside the 10vw container */
}

.site36 iframe {
  transform: translateX(-70vw); /* Adjust to center the view inside the 10vw container */
}

.site37 iframe {
  transform: translateX(-72vw); /* Adjust to center the view inside the 10vw container */
}

.site38 iframe {
  transform: translateX(-74vw); /* Adjust to center the view inside the 10vw container */
}

.site39 iframe {
  transform: translateX(-76vw); /* Adjust to center the view inside the 10vw container */
}

.site40 iframe {
  transform: translateX(-78vw); /* Adjust to center the view inside the 10vw container */
}

.site41 iframe {
  transform: translateX(-80vw); /* Adjust to center the view inside the 10vw container */
}

.site42 iframe {
  transform: translateX(-82vw); /* Adjust to center the view inside the 10vw container */
}

.site43 iframe {
  transform: translateX(-84vw); /* Adjust to center the view inside the 10vw container */
}

.site44 iframe {
  transform: translateX(-86vw); /* Adjust to center the view inside the 10vw container */
}

.site45 iframe {
  transform: translateX(-88vw); /* Adjust to center the view inside the 10vw container */
}

.site46 iframe {
  transform: translateX(-90vw); /* Adjust to center the view inside the 10vw container */
}

.site47 iframe {
  transform: translateX(-92vw); /* Adjust to center the view inside the 10vw container */
}

.site48 iframe {
  transform: translateX(-94vw); /* Adjust to center the view inside the 10vw container */
}

.site49 iframe {
  transform: translateX(-96vw); /* Adjust to center the view inside the 10vw container */
}

.site50 iframe {
  transform: translateX(-98vw); /* Adjust to center the view inside the 10vw container */
}



@media (max-width: 768px) {
  .iframe-wrapper {
      flex: 0 0 4vw; /* Increase the width to 4vw for mobile */
  }

  /* Adjust the translation for the first 25 iframes */
  .site1 iframe { transform: translateX(0vw); }
  .site2 iframe { transform: translateX(-4vw); }
  .site3 iframe { transform: translateX(-8vw); }
  .site4 iframe { transform: translateX(-12vw); }
  .site5 iframe { transform: translateX(-16vw); }
  .site6 iframe { transform: translateX(-20vw); }
  .site7 iframe { transform: translateX(-24vw); }
  .site8 iframe { transform: translateX(-28vw); }
  .site9 iframe { transform: translateX(-32vw); }
  .site10 iframe { transform: translateX(-36vw); }
  .site11 iframe { transform: translateX(-40vw); }
  .site12 iframe { transform: translateX(-44vw); }
  .site13 iframe { transform: translateX(-48vw); }
  .site14 iframe { transform: translateX(-52vw); }
  .site15 iframe { transform: translateX(-56vw); }
  .site16 iframe { transform: translateX(-60vw); }
  .site17 iframe { transform: translateX(-64vw); }
  .site18 iframe { transform: translateX(-68vw); }
  .site19 iframe { transform: translateX(-72vw); }
  .site20 iframe { transform: translateX(-76vw); }
  .site21 iframe { transform: translateX(-80vw); }
  .site22 iframe { transform: translateX(-84vw); }
  .site23 iframe { transform: translateX(-88vw); }
  .site24 iframe { transform: translateX(-92vw); }
  .site25 iframe { transform: translateX(-96vw); }
  
  /* Hide the rest of the iframes beyond 25 */
  .site26, .site27, .site28, .site29, .site30, .site31, 
  .site32, .site33, .site34, .site35, .site36, .site37, 
  .site38, .site39, .site40, .site41, .site42, .site43, 
  .site44, .site45, .site46, .site47, .site48, .site49, .site50 {
      display: none;
  }
}