@media only screen and (min-width: 1025px) {
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #15181A;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
    
    .onlymobile, .inline-image {display:none;}

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

.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.skw-page__half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.skw-page__complete {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.skw-page__half--left {
  left: 0;
  -webkit-transform: translate3d(-32.4vh, 100%, 0);
          transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page__half--right {
  left: 50%;
  -webkit-transform: translate3d(32.4vh, -100%, 0);
          transform: translate3d(32.4vh, -100%, 0);
}
.skw-page.active .skw-page__half {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.skw-page.active .skw-page__complete {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.skw-page__skewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 140%;
  height: 100%;
  -webkit-transform: skewX(-18deg);
          transform: skewX(-18deg);
  background: #fff;
}

.skw-page__skewed.complete {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skewX(0deg);
          transform: skewX(0deg);
  background: #fff;
    background-image: url("/res/images/Privatpraxis-Ahaus_03.jpg");
    z-index:10;
    background-size:cover;
}

.skw-page__skewed.complete:before {
    content:"";
   position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
    -webkit-transform: skewX(-18deg);
          transform: skewX(-18deg);
    overflow:hidden;
    left:50%;
    background: rgba(255,255,255,.8) none repeat scroll 0 0;
    z-index:-1;
}

.skw-page__skewed.complete:after {
    content:"";
   position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
    overflow:hidden;
    background: rgba(255,255,255,.5) none repeat scroll 0 0;
    z-index:-1;
}

.skw-page__half--left .skw-page__skewed {
  left: -40%;
}
.skw-page__half--right .skw-page__skewed {
  right: -40%;
}
.skw-page__content {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column wrap;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 30%;
  color: #535353;
  -webkit-transform: skewX(18deg);
          transform: skewX(18deg);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s, -webkit-transform 1s;
  background-size: cover;
}

.complete .skw-page__content {
    -webkit-transform: skewX(0deg);
          transform: skewX(0deg);    
}

.skw-page__half--left .skw-page__content {
  padding-left: 30%;
  padding-right: 30%;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
  padding-left: 30%;
  padding-right: 30%;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content {
  opacity: 0.5;
  -webkit-transform: skewX(18deg) scale(0.95);
          transform: skewX(18deg) scale(0.95);
}
.skw-page__heading {
  margin-bottom: 0px;
  font-size: 30px;
  text-align: center;
    font-weight:600;
}
.skw-page__description {
  font-size: 18px;
  text-align: center;
    margin-bottom:32px;
}
.skw-page__link {
  color: #FFA0A0;
}
.skw-page-1 .skw-page__half--left .skw-page__content {
  background-image: url("/res/images/privatpraxis-ahaus.jpg");
}
.skw-page-1 .skw-page__half--right .skw-page__content {
  background: #292929;
}
.skw-page-2 .skw-page__half--left .skw-page__content {
  background: #fff;
}
.skw-page-2 .skw-page__half--right .skw-page__content {
  background-image: url("/res/images/privatpraxis-orthopaedie.jpg");
}
.skw-page-3 .skw-page__half--left .skw-page__content {
  background-image: url("/res/images/privatpraxis-ahaus.jpg");
}
.skw-page-3 .skw-page__half--right .skw-page__content {
  background: #fff;
}

.skw-page-4 .skw-page__half--left .skw-page__content {
  background: #fff;
}
.skw-page-4 .skw-page__half--right .skw-page__content {
  background: #bf0418;
    color:#fff;
}

/* adds */
.skw-page__content h1 {font-weight:400;font-size:60px;}
.skw-page__content img {
    width:100%;
    max-width:250px;
    height:auto;
    margin-bottom:40px;
}

/* button */

a.button {
    background: #bf0418 none repeat scroll 0 0;
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
    z-index: 1;
    color:#fff;
    text-decoration:none;
    position:relative;
}

a.button:before {
    background-color: #720813;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0.5, 1);
    transition: all 0.4s ease 0s;
    width: 100%;
    z-index: -1;
} 

a.button:hover:before {
    opacity: 1;
    transform: scale(1, 1);
}

.skw-page-4 .skw-page__half--right .skw-page__content a.button {background: #fff none repeat scroll 0 0;color:#bf0418;}
.skw-page-4 .skw-page__half--right .skw-page__content a.button:hover {color:#fff;}


.scroll-downs {
  position: fixed;
  right: 0;
  bottom: 20px;
  left: 0;
  margin: auto;
  
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #535353;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #535353;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}
   }

@media only screen and (min-width: 1px) and (max-width: 1024px) { 
 
 *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
    
    html {margin:0px;padding:0px;background: #fff;}

body {
  background: #fff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin:0px;padding:0px;
}
    
    a, a:link, a:visited, a:active {
    color: #bf0418;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
    
    .skw-pages {
      overflow: visible;
      position: relative;
      height: 100%;
    } 
    
    .skw-page {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        display: table;
    }
    
    .skw-page__skewed {
        overflow: visible;
        position: relative;
        top: 0;
        width: 100%;
        /*height: 100vh;*/
        -webkit-transform: skewX(0deg);
        transform: skewX(0deg);
        background: #fff;
    }
    
    .skw-page__skewed.mobileheight {height: 100vh !important;}
    
    .skw-page__half {
      position: relative;
      top: 0;
      width: 100%;
      height: 100%;
        display:table;
      -webkit-transition: -webkit-transform 1s;
      transition: -webkit-transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
    }

    .skw-page__complete {
      position: relative;
      top: 0;
      width: 100%;
      height: 50vh;
        display:table;
      -webkit-transition: -webkit-transform 1s;
      transition: -webkit-transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
    }
    
    .skw-page__skewed.complete {
        overflow: visible;
        position: relative;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: skewX(0deg);
        transform: skewX(0deg);
        background: #fff;
        background-image: url(/res/images/Privatpraxis-Ahaus_04.jpg);
        z-index: 10;
        background-size: cover;
    }
    
    .skw-page__content {
        display: -webkit-box;
        display: table;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-flow: column wrap;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding:0px 5%;
        color: #535353;
        -webkit-transform: skewX(0deg);
        transform: skewX(0deg);
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        transition: opacity 1s, -webkit-transform 1s;
        transition: transform 1s, opacity 1s;
        transition: transform 1s, opacity 1s, -webkit-transform 1s;
        background-size: cover;
        text-align:center;
    }
    
    .skw-page.skw-page-4 {display:none;}
    
    .skw-page-2 .skw-page__half--right .skw-page__content {
  background-image: url("/res/images/privatpraxis-orthopaedie.jpg");
        background-size:100% auto;
    text-align: center;
    background-repeat: no-repeat;
}
.skw-page-3 .skw-page__half--left .skw-page__content {
  background-image: url("/res/images/privatpraxis-ahaus.jpg");
    background-size: 100% auto;
    text-align: center;
    background-repeat: no-repeat;
}
    
    h1,
    p.skw-page__description {color:#535353;}
    p.skw-page__description {padding:0px 10%;}
    
    .content-inner {
        padding:30px 5%;
        height: 100%;
        display: table-cell;
        vertical-align: middle;
    }
    
    /* button */

a.button {
    background: #bf0418 none repeat scroll 0 0;
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
    z-index: 1;
    color:#fff;
    text-decoration:none;
    position:relative;
}

a.button:before {
    background-color: #720813;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0.5, 1);
    transition: all 0.4s ease 0s;
    width: 100%;
    z-index: -1;
} 

a.button:hover:before {
    opacity: 1;
    transform: scale(1, 1);
}
    
    .skw-page.skw-page-3 {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;   
    }
    
    .skw-page__half--left {
        display: flex;
        -webkit-order: 2 !important;
        order: 2 !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;     
    }
    
    skw-page__half--right {
        display: flex;
        -webkit-order: 1 !important;
        order: 1 !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;  
    }
    
    .skw-page__content img {margin-bottom:30px;width:100%;height:auto;max-width:300px;}
    .skw-page__content h2 {margin-bottom:10px;}
    .skw-page__content a.button {margin-top:20px;}
    
    .onlymobile, .inline-image {display:block;}
    .inline-image img {width:100%;height:auto;}
    
}