@media only screen and (min-width: 320px) {
  .start-hero {
    background: transparent url("../img/hero-1-small.jpg") center center no-repeat;
    background-size: cover;
  }
  .footer-hero {
    background: transparent url("../img/hero-6-small.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.legal-head {
    background: transparent url("../img/hero-7-small.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.unternehmen-head {
    background: transparent url("../img/hero-8-small.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.unternehmen-head-2 {
    background: transparent url("../img/hero-8-small.jpg") center center no-repeat;
    background-size: cover;
  }
}
@media only screen and (min-width: 640px) {
  .start-hero {
    background: transparent url("../img/hero-1-medium.jpg") center center no-repeat;
    background-size: cover;
  }
  .footer-hero {
    background: transparent url("../img/hero-6-medium.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.legal-head {
    background: transparent url("../img/hero-7-medium.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.unternehmen-head {
    background: transparent url("../img/hero-8-medium.jpg") center center no-repeat;
    background-size: cover;
  }  
  .start-hero.unternehmen-head-2 {
    background: transparent url("../img/hero-8-medium.jpg") center center no-repeat;
    background-size: cover;
  }
}
@media only screen and (min-width: 1280px) {
  .start-hero {
    background: transparent url("../img/hero-1-large.jpg") center center no-repeat;
    background-size: cover;
  }
  .footer-hero {
    background: transparent url("../img/hero-6-large.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.legal-head {
    background: transparent url("../img/hero-7-large.jpg") center center no-repeat;
    background-size: cover;
  }
  .start-hero.unternehmen-head {
    background: transparent url("../img/hero-8-large.jpg") center center no-repeat;
    background-size: cover;
  }  
  .start-hero.unternehmen-head-2 {
    background: transparent url("../img/hero-8-large.jpg") center center no-repeat;
    background-size: cover;
  }
}
@media only screen and (min-width: 1620px)  {
  // Close icon
  button.mfp-close {
    right: -23px;
    top: -53px;
  }  
    .grid, .grid-header {
      width: 80%;
      margin: 0 10%; 
    }
    .owl-theme .owl-nav .owl-prev {
      left: 10%;
    }
    .close,
    .owl-theme .owl-nav .owl-next {
      right: 10%;
    }
    .start-hero .start-hero-txt-head::before {
        left: -10vw;
        width: calc(10vw - 2rem);
    }
    .pic-txt-3::before {
      width: 80vw;
      right: 10vw;
      height: calc(80vw * (3/4));
      top: -25%;
    }
    .pic-txt-2 .grid {
      position: relative;
      &::before {
        width: 80vw;
        height: calc(80vw * (1/1));
      }
    }
    #menu {
      margin: 48px 0 0 calc(10% - 64px);
    }
}
@media only screen and (min-width: 1920px)  {
  .start-hero .start-hero-txt-head::before {
      left: -15vw;
      width: calc(15vw - 2rem);
  }
    .grid, .grid-header {
      width: 70%;
      margin: 0 15%; 
    }
    .pic-txt-4::before {
      top: -40%;
    }
    .pic-txt-3::before {
      width: 75vw;
      right: 15vw;
      height: calc(75vw * (3/4));
    }
    .pic-txt-5::before {
      top: -120%;
    }
    .pic-txt-2 .grid {
      position: relative;
      &::before {
        width: 60vw;
        height: calc(60vw * (1/1));
        bottom: 20%;
      }
    }
    .owl-theme .owl-nav .owl-prev {
      left: 15%;
    }
    .close,
    .owl-theme .owl-nav .owl-next {
      right: 15%;
    }
    #menu {
      margin: 48px 0 0 calc(15% - 64px);
    }
}
@media only screen and (min-width: 2200px)  {
    .grid, .grid-header {
      width: 65%;
      margin: 0 17.5%; 
    }
    #menu {
      margin: 48px 0 0 calc(17.5% - 64px);
    }
    .pic-txt-1 {
     &::before {
       top: -21rem; 
     }
    }
    .owl-theme .owl-nav .owl-prev {
      left: 17.5%;
    }
    .close,
    .owl-theme .owl-nav .owl-next {
      right: 17.5%;
    }
    .start-hero .start-hero-txt {
        margin-top: calc(100vw * (9/16) * .55);
    }
    .start-hero .start-hero-txt-head::before {
        left: -17.5vw;
        width: calc(17.5vw - 2rem);
    }
    .pic-txt-4::before {
      top: -60%;
    }
    .pic-txt-5::before {
      top: -140%;
    }
    .pic-txt-3::before {
      width: 70vw;
      right: 17.5vw;
      top: -30%;
      height: calc(70vw * (3/4));
    }
    .pic-txt-2 .grid {
      position: relative;
      &::before {
        width: 55vw;
        height: calc(55vw * (1/1));
      }
    }
}
@media only screen and (min-width: 2400px)  {
    .pic-txt-4::before {
      top: -80%;
    }
    .pic-txt-5::before {
      top: -155%;
    }
}


@media only screen and (max-width: 1919px) {
	.start-hero {
	  	.start-hero-txt {
			margin-top: calc(100vw * (9/16) * .6);
		}
		.start-hero-txt-p {
			margin-top: 2rem;
			width: span(12);
		}
	}
  .pic-txt-5::before {
      top: -110%;
  }
  .pic-txt-5::before {
    top: -110%;
  }
  .row .link-box {
    width: span(4);
  }
}
@media only screen and (max-width: 1620px)  {
html {
	font-size: 62.5%;
}
.start-hero .start-hero-txt-p {
	width: span(8);
}
.pic-txt-2::before {
    width: 80vw;
    height: calc(80vw * (1/1));
}
.pic-txt-3::before {
    top: -40%;
}
.pic-txt-5::before {
  top: -130%;
}
.pic-txt .pic {
    border-right: 15px solid #FF4E00;
}
.pic-txt .txt + .pic {
  border-left: 15px solid $orange;
}

}

@media only screen and (max-width: 1440px)  {
   .start-hero .start-hero-txt-p {
   	width: span(12);
   }
    .pic-txt-4::before {
       top: -40%;
   }
   h2, .txt-head h1 {
       font-size: 2.5rem;
   }
   .txt-head h2 {
    font-size: 2.4rem;
   }
   section.xxl-pad {
     padding: 10rem 0;
   }
   .pic-txt-2::before {
       width: 70vw;
       height: calc(70vw * (1/1));
   }
   .pic-txt-3::before {
       top: -60%;
   }
   .start-hero .start-hero-txt-head::before {
       left: -5vw;
       width: calc(5vw - 2rem);
   }
   .pic-txt {
       margin-top: 24px;
   }
   #menu {
    margin: 48px 0 0 0;
   }
}
@media only screen and (max-width: 1350px) {
    .pic-txt-2::before {
        bottom: 45%;
    }
    .pic-txt-3::before {
        top: -40%;
    }
    .pic-txt-5::before {
        top: -120%;
    }
    .pic-txt {
        .pic {
          width: span(2);
        }
        .txt {
          width: span(8);
        }
    }
    .row .link-box {
      width: span(5);
    }
    .start-hero {
        .start-hero-txt {
        margin-top: calc(100vw * (9/16) * .5);
      }
    }
}

@media only screen and (max-width: 1240px) {
  .pic-txt-3::before {
      top: -30%;
  }
   .pic-txt-4::before {
      top: -15%;
  }
  .pic-txt-5::before {
      top: -100%;
  }
  .start-hero.kontakt-head .start-hero-txt {
  width: 50%;
  }
  h4, h3, .legal ul, .grey-bg h3, p {
    font-size: 1.6rem;
  }
  .row .link-box {
    width: span(6);
  }
  .footer-hero .footer-hero-txt {
      margin-top: 40px;
      padding-bottom: 40px;
  }
  p.spec-btn, p.print-btn, p.brochure-btn {
    margin-top: 30px;
}
}
@media only screen and (max-width: 1150px) {
  .start-hero .start-hero-txt {
      margin-top: calc(100vw * (9/16) * .5);
  }
  .pic-txt-3::before {
      top: -30%;
  }
  // .footer-hero {
  //     width: 100vw;
  //     min-width: 100%;
  //     height: calc(100vw * (10/16));
  // }
  .mfp-ajax-holder .mfp-content::before
  {
    right: 0px;
  }
  .pic-txt-4::before {
      top: -5%;
      width: 90vw;
      height: calc(90vw * (9/16));
  }
  .unternehmen-head .txt-head h1 {
    width: span(2 wide);
  }
  .unternehmen-head .pic-txt {
      .pic {
        width: span(2 wide);
      }
      .txt {
        width: span(9);
      }
  }
  .white-popup {
    min-width: 50vw;
  }
  .pic-txt .pic {
      border-right: 10px solid #FF4E00;
  }
  .pic-txt .txt + .pic {
    border-left: 10px solid $orange;
  }

  .pic-txt {
      margin-top: 12px;
  }
  .start-hero.unternehmen-head {
      min-width: 100%;
      height: calc(100vw * (1/1));
  }
}
@media only screen and (max-width: 1024px)  {
        html {
          font-size: 55%;
        }
        // .pic-txt-2::before {
        //     width: 65vw;
        //     height: calc(65vw * (1/1));
        // }
        .start-hero .start-hero-txt {
            margin-top: calc(100vw * (9/16) * .6);
        }
        section.xxl-pad {
          padding: 8rem 0;
        }
       .right-txt {
           width: span(7);
           margin-left: span(5 wide);
       }
       .left-txt {
           width: span(7);
       }
       .pic-txt-1 {
        &::before {
          top: -5rem; 
          width: 50vw;
          height: calc(50vw * (3/4));
        }
       }
       .pic-txt-3::before {
           top: -30%;
           right: 5vw;
           width: 60vw;
           height: calc(60vw * (3/4));
       }
       .pic-txt-4::before {
          top: -5%;
          width: 60vw;
          height: calc(60vw * (9/16));
      }
      .pic-txt-5::before {
      width: 60vw;
      height: calc(60vw * (9/16));
    }
      .white-popup {
          min-width: 40vw;
      }
  .start-hero.kontakt-head .start-hero-txt {
  width: 100%;
  }
}

@media only screen and (max-width: 960px)  {
  html {
    font-size: 60%;
  }
  .start-hero .start-hero-txt {
    margin-top: calc(100vw * (9/16) * .55);
  }
  .start-hero.unternehmen-head {
    height: auto;
    padding: 4rem 0;
  }
  .pic-txt-3::before {
      top: -100%;
      right: 5vw;
      width: 60vw;
      height: calc(60vw * (1/3));
  }
  .white-popup {
      min-width: 70vw;
  }
  .webp .pic-txt-3::before {
      background-image: url(../img/Outstar48-3-960.webp);
  }
  .pic-txt-3::before {
      background-image: url(../img/Outstar48-3-960.png);
  }
  .pic-txt-5::before {
      top: -220%;
  }
  section.xxl-pad {
    padding: 4rem 0;
  }
   h1 {
    font-size: 4rem;
   }
   h2 {
    font-size: 2rem;
   }
   .right-txt {
       width: span(10);
       margin-left: 0;
   }
   .left-txt {
       width: span(10);
   }
   .pic-txt-1::before {
       top: 90%;
       width: 50vw;
       height: calc(50vw * (3/4));
   }
   .pic-txt-2::before {
       width: 60vw;
       height: calc(60vw * (1/1));
       bottom: 60%;
   }
   .pic-txt-3 .left-txt {
        width: span(10);
    }
    .txt-3 .right-txt {
        width: span(10);
    }
   section.xxl-pad + section.xxl-pad {
      padding: 0 0 4rem 0;
      h3 {
        padding-top: 2rem;
      }
   }
   section.xxl-pad.pic-txt-3,
   section.xxl-pad.pic-txt-4 {
    padding: 4rem 0 0 0;
   }
   .pic-txt-4::before {
       top: -260%;
   }
   // .footer-hero {
   //    height: auto;
   //    padding-bottom: 50px;
   // }
}
@media only screen and (max-width: 900px) {
  .unternehmen-head-2 .txt-head h1 {
    font-size: 2.1rem;
  }
  .unternehmen-head-2 .txt-head h2 {
      font-size: 2.0rem;
  }
  .unternehmen-head-2 .pic-txt .txt {
    width: span(10);
  }
  .pic-txt-4::before {
      top: -190%;
  }
  footer {
    font-size: 14px;
    .footer-center {display: none;}
  }
  .row .link-box {
    width: span(7);
  }
  .link-box-txt {
    font-size: 18px;
  }
}
@media only screen and (max-width: 820px) {
    .start-hero .start-hero-txt {
    margin-top: calc(100vw * (9/16) * .45);
  }
    .left-txt,
    .right-txt,
    .txt-3 .right-txt,
    .pic-txt-3 .left-txt,
    .pic-txt-4 .right-txt {
        width: 100%;
    }
    .pic-txt-3::before {
        top: -200%;
        right: 5vw;
        width: 80vw;
        height: calc(80vw * (3/4));
    }
    .pic-txt-5::before {
        top: -190%;
    }
    .pic-txt-5::before {
        top: -230%;
    }
    section.xxl-pad + section.xxl-pad h3 {
        padding-top: 0;
    }
    section.xxl-pad + section.xxl-pad {
      padding: 4rem 0;
    }
}


@media only screen and (max-width: 768px) {
    .pic-txt-4::before {
      top: -200%;
    }
    .pic-txt-1::before {
        top: 65%;
        width: 50vw;
        height: calc(50vw * (3/4));
    }
    .pic-txt-3 .left-txt {
      width: span(12);
      margin-left: 0;
    }
    .pic-txt-3::before {
      background-image: url("../img/Outstar48-3-768.png");
      top: -120%;
      right: 5vw;
      width: 90vw;
      height: calc(90vw * (1/3));
    }
    .left-txt, .right-txt {
      border-left: 10px solid $orange;
      padding-left: 2rem;
    }
    section.xxl-pad + section.xxl-pad h3 {
        padding-top: 2rem;
    }
    section.xxl-pad + section.xxl-pad {
      padding: 0 0 4rem 0;
    }
    .pic-txt {
        .pic {
          width: span(2);
        }
        .txt {
          width: span(10);
        }
    }
}
@media only screen and (max-width: 720px) {
  .start-hero .start-hero-txt {
      margin-top: calc(100vw * (9/16) * .4);
  }
  section.xxl-pad {
    padding: 6rem 0;
  }
  .pic-txt-3::before {
    top: -100%;
  }
  .pic-txt-1::before {
      top: 75%;
      width: 55vw;
      height: calc(55vw * (3/4));
  }
  .pic-txt {
      margin-top: 24px;
  }
  .pic-txt-4::before {
      top: -150%;
  }
}

@media only screen and (max-width: 640px) {
  html {
    font-size: 50%;
  }
  .start-hero .start-hero-txt {
    // text-shadow: 1px 1px 1px #000;
      margin-top: calc(100vw * (9/16) * .3);
  }
}
@media only screen and (max-width: 560px) {
    .pic-txt-3::before {
      top: -50%;
    }
    #menu li {
      margin: 0;
    }
    .pic-txt-4::before {
        top: -135%;
    }
    .pic-txt-2::before {
        bottom: 80%;
        width: 60vw;
        height: calc(60vw * (1/1));
    }
   .row {
      display: block;
      .link-box {
        width: 100%;
        margin-top: 30px;
      }
    }
    // footer .grid {
    //   justify-content: space-between;
    //   .footer-left,
    //   .footer-center,
    //   .footer-right {
    //     margin: 0 10px;
    //   }
    //   li {
    //     margin: 0 20px;
    //   }
    //   .footer-center {
    //     text-align: right;
    //     margin: 0;
    //     // position: relative;
    //     // top: 16px;
    //   }
    // }
    .head-left,
    .head-center,
    .head-right
    .footer-left,
    .footer-center,
    .footer-right
    {
      width: auto;
    }
  .start-hero {
    height: 350px;
  }
}
@media only screen and (max-width: 410px) {
  html {
    font-size: 48.5%;
  }
  .pic-txt-1::before {
      top: 85%;
  }
  .pic-txt-4::before {
      top: -90%;
  }
  .footer-left,.footer-right,.footer-left a,.footer-right a{
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    line-height: 24px;
  }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  body.galerie, body.kontakt .start-hero {
        height: auto;
    }
  body.galerie footer, body.kontakt footer {
      position: static;
    }
body.kontakt .start-hero{
      padding-bottom: 100px;
    }
}

@media only screen and (max-height: 800px)  {
  body.kontakt footer {
      position: static;
    }
body.kontakt .start-hero{
      padding-bottom: 100px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: portrait)  {
        #menu li {font-size: 4rem;}
}