.about {
  position: absolute;
  left: -50vw;
  width: 50vw;
  height: 100vh;
  padding-top: 30vh;
  background: #FFF;
  z-index: 90;
  -webkit-transition: all 500ms ease-out .2s;
  -moz-transition: all 500ms ease-out .2s;
  -o-transition: all 500ms ease-out .2s;
  transition: all 500ms ease-out .2s; }
  .about.show {
    left: 0vw; }
  @media (max-width: 1140px) {
    .about {
      left: -50vw;
      width: 50vw;
      padding-top: 10vh;
      position: fixed; } }
  @media (max-width: 830px) {
    .about {
      left: -100vw;
      width: 100vw;
      padding-top: 17vh; } }
  @media (max-width: 640px) {
    .about {
      left: -100vw;
      width: 100vw;
      padding-top: 0px;
      z-index: 100; } }
  .about .about-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99;
    cursor: pointer; }
  .about .textblock {
    font-size: 18px;
    line-height: 30px;
    color: #000;
    opacity: 0.85;
    font-weight: 500;
    padding: 0 70px 0 15px; }
    @media (max-width: 830px) {
      .about .textblock {
        margin-bottom: 15px;
        padding: 0 15px; } }
  .about .details {
    margin: 35px 0 70px 0; }
    .about .details h4 {
      font-weight: 800;
      font-size: 22px;
      margin: 15px 0 0 0; }
      @media (max-width: 830px) {
        .about .details h4 {
          margin: 5px 0 0 0; } }
    .about .details i {
      padding: 10px;
      display: block;
      float: left;
      text-align: center;
      font-size: 14px; }

.startseite {
  -webkit-transition: all 500ms ease-out .2s;
  -moz-transition: all 500ms ease-out .2s;
  -o-transition: all 500ms ease-out .2s;
  transition: all 500ms ease-out .2s;
  left: 0vw; }
  .startseite.slide {
    left: 10vw; }
  .startseite .about-trigger {
    float: left;
    color: #FFF;
    font-size: 20px;
    cursor: pointer; }
    @media (max-width: 640px) {
      .startseite .about-trigger {
        font-size: 16px;
        font-weight: 500; } }
  .startseite .welcome {
    padding: 40vh 0 0 12vw;
    color: #FFF;
    opacity: 1;
    position: relative;
    left: 0;
    -webkit-transition: all 500ms ease-out .2s;
    -moz-transition: all 500ms ease-out .2s;
    -o-transition: all 500ms ease-out .2s;
    transition: all 500ms ease-out .2s; }
    .startseite .welcome h3 {
      margin: 0;
      font-size: 18px; }
    .startseite .welcome p {
      font-size: 30px;
      font-weight: 700;
      margin: 0;
      max-width: 600px; }
    .startseite .welcome.fade {
      opacity: 0;
      left: -500px; }
    @media (max-width: 1140px) {
      .startseite .welcome {
        padding: 30vh 0 0 20px; } }
    @media (max-width: 640px) {
      .startseite .welcome {
        padding: 10vh 0 0 20px; }
        .startseite .welcome h3 {
          font-size: 12px; }
        .startseite .welcome p {
          font-size: 16px;
          font-weight: 400; } }
  .startseite .swiper-wrapper {
    height: 100vh !important;
    overflow: hidden !important; }
    @media (max-width: 830px) {
      .startseite .swiper-wrapper {
        display: block;
        height: 100%;
        min-height: 1400px; } }
  .startseite .swiper-container {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    border: 2px solid green; }
  .startseite .swiper-pagination-bullet-active {
    background: #FFF; }
  .startseite .swiper-slide {
    height: 100%; }
    .startseite .swiper-slide.one {
      background: url(../img/bgfk.jpg) no-repeat #405765;
      background-size: 100%;
      background-position: center bottom; }
    .startseite .swiper-slide.two {
      background: url(../img/sinojobs.jpg) no-repeat #E2001A;
      background-size: cover; }
    .startseite .swiper-slide.three {
      background: url(../img/premio.jpg) no-repeat #01589B;
      background-size: cover; }
    .startseite .swiper-slide.four {
      background: url(../img/quick.jpg) no-repeat #E2001A;
      background-size: cover; }
    .startseite .swiper-slide.five {
      background: url(../img/kettlebelldaddy.jpg) no-repeat #E2001A;
      background-size: cover; }
    .startseite .swiper-slide.six {
      background: url(../img/tuning.jpg) no-repeat #E2001A;
      background-size: cover; }
    .startseite .swiper-slide.seven {
      background: url(../img/bier.jpg) no-repeat #E2001A;
      background-size: cover; }
      .startseite .swiper-slide.sevenh2 {
        color: #000; }
    @media (max-width: 640px) {
      .startseite .swiper-slide {
        width: 100%;
        height: 200px;
        float: none;
        position: relative; } }
  .startseite .shade {
    opacity: 0;
    background: #000;
    position: absolute;
    width: 100vw;
    height: 100vh;
    -webkit-transition: all 500ms ease-out .2s;
    -moz-transition: all 500ms ease-out .2s;
    -o-transition: all 500ms ease-out .2s;
    transition: all 500ms ease-out .2s; }
    .startseite .shade.show {
      opacity: 0.4; }
    @media (max-width: 830px) {
      .startseite .shade {
        opacity: 0.4; } }
  .startseite .work-trigger {
    overflow: hidden;
    padding-bottom: 20vh; }
    .startseite .work-trigger h2 {
      margin: 0 auto;
      color: #FFF;
      font-size: 120px;
      font-weight: 800;
      text-align: center;
      padding-top: 40vh;
      position: relative;
      cursor: pointer;
      opacity: 0;
      transform: scale(2);
      top: -200px; }
      @media (min-width: 830px) {
        .startseite .work-trigger h2 {
          -webkit-transition: all 500ms ease-out .2s;
          -moz-transition: all 500ms ease-out .2s;
          -o-transition: all 500ms ease-out .2s;
          transition: all 500ms ease-out .2s;
          -webkit-animation-fill-mode: initial; } }
      @media (max-width: 830px) {
        .startseite .work-trigger h2 {
          margin: -40px 0 0 0;
          padding: 0;
          font-size: 80px;
          padding-top: 18vh;
          top: 0px;
          left: 0px;
          opacity: 1;
          width: 100vw !important;
          display: block;
          transform: scale(1);
          font-size: 40px; } }
    .startseite .work-trigger:hover h2 {
      top: 0px;
      opacity: 1;
      transform: scale(1); }
    @media (max-width: 830px) {
      .startseite .work-trigger {
        position: absolute;
        width: 100vw; } }
@-webkit-keyframes h1fade {
  0% {
    opacity: 0;
    transform: scale(3);
    top: -200px; }
  100% {
    opacity: 1;
    top: 0px; } }

/*# sourceMappingURL=startseite.css.map */