*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.skw-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}

.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 20;
}
.skw-page-side-left {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100vh;
  transition: transform 1s;
}
.skw-page-side-right {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: transform 1s;
}
.skw-page-full-line-down, .skw-page-full-line-up{
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: transform 1s;
}
.skw-page-half--left {
  left: 0;
  transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page-half--left-line-up {
  left: 0;
  transform: translate3d(0vh, 100%, 0);
}
.skw-page-half--left-line-down {
  left: 0;
  transform: translate3d(0vh, -100%, 0);
}
.skw-page-half--right {
  left: 25%;
  transform: translate3d(32.4vh, -100%, 0);
}
.skw-page-half--right-line-up {
  left: 25%;
  transform: translate3d(0vh, 100%, 0);
}
.skw-page-half--right-line-down {
  left: 25%;
  transform: translate3d(0vh, -100%, 0);
}

.skw-page-full-line-up {
  transform: translate3d(0vh, 100%, 0);
}
.skw-page-full-line-down {
  transform: translate3d(0vh, -100%, 0);
}
.skw-page.active .skw-page-side-left, .skw-page.active .skw-page-side-right, .skw-page.active .skw-page-full-line-up, .skw-page.active .skw-page-full-line-down {
  transform: translate3d(0, 0, 0);
}
.skw-page-skewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  transform-origin: 100% 0%;
  background: #000;
}

@media (min-width: 1260px) {
  .skw-page-skewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  transform-origin: 100% 0%;
  transform: skewX(-18deg);
  background: #212529!important;
  }
}
.skw-page-notskewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;  
  background: #212529!important;
}
.skw-page-half--left .skw-page-skewed, .skw-page-half--left-line-up .skw-page-skewed {
  left: 0%;
}

.skw-page-half--right .skw-page-skewed, .skw-page-half--right-line-up .skw-page-skewed {
  right: 0%;
}
.skw-page-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  color: #fff;
  transform-origin: left top;
  transition: transform 1s, opacity 1s;
  background-size: cover;
}
@media (min-width: 1260px) {
  .skw-page-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  color: #fff;
  transform-origin: left top;
  transform: skewX(18deg);
  transition: transform 1s, opacity 1s;
  background-size: cover;
}
}

.skw-page-half--left .skw-page-content, .skw-page-half--left-line-up .skw-page-content {
  padding-left: 6rem;
  transform-origin: 100% 0;
}
.skw-page-half--right .skw-page-content, .skw-page-half--right-line-up .skw-page-content {
  transform-origin: 0 100%;
}
.skw-page-full-line-down .skw-page-content, .skw-page-full-line-up .skw-page-content {
  transform-origin: 0 100%;
}
.skw-page.inactive .skw-page-content {
  opacity: 0.5;
  transform: skewX(18deg);
}
.skw-page-heading {
  margin-bottom: 15px;
  text-transform: uppercase;
  font-size: 25px;
  text-align: center;
}
.skw-page-description {
  font-size: 18px;
  text-align: center;
}
.skw-page-link {
  color: #FFA0A0;
}

.skw-page-2 .skw-page-half--right-line-up .skw-page-content {
  background-image: url(../../assets/img/02_Leistungen.jpg)
}
.skw-page-3 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/03_shapeedition.jpg)
}
.skw-page-4 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/04_VliesakustiX.jpg)
}
.skw-page-5 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/05_Lawona.jpg)
}
.skw-page-6 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/06_ipaint.jpg)
}
.skw-page-7 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/07_designfilz.jpg)
}
.skw-page-8 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/08_Service.jpg)
}
.skw-page-9 .skw-page-half--right .skw-page-content {
  background-image: url(../../assets/img/09_Uberuns.JPG)
}