:root {
  --slideW: 100vw;
  --klouCol: #53a6a9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
}

.spacer {
  width: 20px;
  height: 100vh;
  display: block;
  background-color: white;
}

.fullViewer {
  position: fixed;
  display: flex;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.smooth {
  scroll-behavior: smooth;
}

.fullviewer img[attr="watermark"] {
  position: fixed;
  z-index: 100;
  top: 5vw;
  opacity: 0.5;
  height: 15vw;
  min-height: 130px;
}

.fullViewer .stage {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  width: var(--slideW);
  min-width: var(--slideW);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
}

.bgformat {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.stage1 {
  position: absolute;
  width: var(--slideW);
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 1;
}
.stage2 {
  position: absolute;
  width: var(--slideW);
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0;
}

.stage3 {
  position: absolute;
  width: var(--slideW);
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0;
}

#sl1 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_BasisFlat.jpg);
}

#sl2 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K01flat.jpg);
}

#sl2 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K01comp.jpg);
}

#sl2 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K01ex.jpg);
}

#sl3 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K02flat.jpg);
}

#sl3 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K02comp.jpg);
}

#sl3 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K02ex.jpg);
}
/*
#sl4 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K03flat.jpg);
}

#sl4 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K03comp.jpg);
}

#sl4 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K03ex.jpg);
}
*/

#sl5 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K04flat.jpg);
}

#sl5 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K04comp.jpg);
}

#sl5 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K04ex.jpg);
}

#sl6 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K04+01flat.jpg);
}

#sl6 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K04+01comp.jpg);
}

#sl6 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K04+01ex.jpg);
}

#sl7 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K05flat.jpg);
}

#sl7 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K05comp.jpg);
}

#sl7 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K05ex.jpg);
}

#sl8 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_K05+01flat.jpg);
}

#sl8 div[attr="stage2"] {
  background-image: url(bilder/r_klou_1x1_K05+01comp.jpg);
}

#sl8 div[attr="stage3"] {
  background-image: url(bilder/r_klou_1x1_K05+01ex.jpg);
}

#sl10 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_FamilyComp.jpg);
}

#fakesl1 div[attr="stage1"] {
  background-image: url(bilder/r_klou_1x1_BasisFlat.jpg);
}

#sl9 div[attr="stage1"] {
  background-image: url(img/bastel1.jpg);
}

#sl9 div[attr="stage2"] {
  background-image: url(img/bastel2.jpg);
}

#sl9 div[attr="stage3"] {
  background-image: url(img/bastel3.jpg);
}

.slideNumber {
  position: fixed;
  display: none;
  z-index: 100;
  width: 50px;
  height: 50px;
  top: 30px;
  left: 30px;
}

.slideNumber div {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
}

.controlBar {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  width: 60%;
  height: 40px;
  background-color: #ffffff55;
  border-radius: 999px;
  z-index: 5;
  bottom: 30px;
  left: 50vw;
  transform: translateX(-50%);
}

.controlBar .start {
  width: 90px;
  height: 40px;

  background-image: url(img/pause.svg);
  background-repeat: no-repeat;
  background-position: 2px center;
}

.controlBar .dots {
  position: relative;
  width: 100%;
  height: 2px;
  top: 19px;
  background-color: #ccc;
}

.controlBar .spacer {
  width: 23px;
  height: 100%;
  opacity: 0;
}

.controlBar .slidindi {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  top: 1px;
  left: 0%;
  background-color: #ccc;
  transform: translateX(-50%) translateY(-50%);
}

/*
.dots::after {
  position: absolute;
  display: block;
  width: calc(88% + 13px);
  height: 2px;
  background-color: #ccc;
  right: 14px;
  top: 19px;
  content: "";
}
*/

.controlBar .bubble {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background-color: var(--klouCol);
  top: 1px;
  left: 0%;
  z-index: 1;
  transform: translateX(-50%) translateY(-50%);
  transition: all;
  transition-duration: 0.3s;
  transition-delay: 0.5s;
}

.videoFrame {
  position: fixed;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: none;
}

.videoFrame button {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  z-index: 100;
  display: block;
  background-color: white;
  border-radius: 999px;
  background-image: url(img/closeVid.svg);
  background-size: cover;
  border: none;
}

.videoFrame video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
}

.videoButton {
  display: flex;
  width: 80px;
  height: 80px;
  background-color: var(--klouCol);
  position: fixed;
  z-index: 10;
  top: 20px;
  right: 20px;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  color: white;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 12pt;
  display: none;
}

.inlineVideoFrame {
  width: 100%;
  height: 100%;
}

.inlineVideoFrame video {
  min-width: 100vw;
  min-height: 100vh;
  position: relative;
  top: 50vh;
  left: 50vw;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 480px) {
  .controlBar {
    width: 97%;
  }
}