/* regex for searching two returns: ^(\s*\r?\n){2,} */
/* regex for missing space behind colon: :[\S] */
/* regex for missing space before swingy bracket: [\S]\{ */
@media only screen and (min-width:  320px) {
  /* For mobile phones:  */
  @font-face {
    font-family: ptsans;
    src: url("../../assets/fonts/PTSans-Regular.ttf");
  }

  @font-face {
    font-family: passionone;
    src: url("../../assets/fonts/PassionOne-Regular.otf");
  }

  * {
    box-sizing: border-box;
  }
    
  html {
    font-size: 10px;
  }

  body {
    font-family: ptsans;
    color: black;
  }

  /* GENERICS */
  .s1 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 400;
  }

  h0 {
    font-family: passionone;
    font-size: 4rem;
    line-height: 3rem;
  }

  h1 {
    font-family: passionone;
    font-size: 4rem;
    margin: 0;
  }

  .h1-custom {
    font-family: "Baron";
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
  }

  .h2-custom {
    font-size: 1.6rem;
    margin-bottom: 2rem;
	  margin-top: 0;
  }

  .p-custom {
    font-size: 1.4rem;
    padding-bottom: 1rem;
  }

  .rubric {
    font-weight: 800;
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
  }
    
  .btn-standard {
    border: 0.1rem solid black;
    background-color: transparent;
    padding: 1.5rem 4.0rem 1.5rem 4.0rem;
    margin-bottom: 2rem;
    border-radius: 0;
    font-size: 2rem;
  }
    
  .white {
    color: white;
  }

  .red {
	color: #FF0000;	
  }

  .blue {
    color: #0078AA;
  }

  .black {
    color: black;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }
    
  .text-center {
    text-align: center;
  }

  .right {
    float: right;
  }

  .left {
    float: left;
  }
    
  .bold {
    font-weight: 600;
  }

  .flex-row {
    flex-direction: row;
  }
    
  .flex-container > .flex-row {
    flex-direction: row;
    padding: 0 .5rem .5rem 0;
  }

  .module {
    padding-left: 3rem;
    padding-right: 3rem;
  }
    
  .module-black {
    background-color: black;
  }

  .module-red {
    background-color: #FF0000;
    padding: 2rem;
  }

  .module-blue {
    background-color: #0078AA;
  }

  .hide-mobile {
    display: none;
  }

  .hide-tablet-destop {
    display: none;
  }

  .hide-desktop {
    display: block;
  }
  /* END GENERICS */

  .main-kleben {
    /*background-image: url('../images/bg-grau.svg');*/
    background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 110% 100%;
    /*background-position: -2rem -1rem;*/
    background-position: -2rem -2rem;
    background-origin: border-box;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 10rem;
    margin-bottom: 10rem;
  }

  .main-logo {
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
    float: left;
    z-index: 2;
  }

  .main-logo img {
      width: 13rem;
  }
   
  /* NAV */
  .navbar-toggle .icon-bar {
    background-color: black;
    height: .3rem;
    border-radius: 25px;
  }

  .navbar {
    position: absolute;
    right: 0;
    z-index: 1;
    width: 100%;
    padding-top: 1rem;
    right: .1rem;
  }

  .navbar-nav {
    margin: unset;
    padding: 10rem 0 4rem 7rem;
  }

  #navbutton {
    margin-right: 0;
    z-index: 2;
  }

  #mobile-collapse-front {
    background-color: yellow;
    position: relative;
    width: 100.5%;
    top: -7.2rem;
  }


  .nav li a {
    color: rgb(68, 66, 66);
    font-size: 2.4rem;
    line-height: 5.5rem;
    font-family: ptsans;
    padding: 0;
  }

  .nav > li > a:hover {
    background-color: transparent;
    color: red;
  }
  /* END NAV */

  .main-head-img img {
    height: 28rem;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 3rem;
  }

  .main-head,
  .main-head-img,
  .services-head,
  .projects-head,
  .contact-head {
    background-color: white;
  }

  .main-head header {
    padding-bottom: 3rem;
  }

  .divider {
    background-color: black;
    border-top: .3rem solid black;
    width: 6rem;
    margin-top: 0;
    margin-bottom: 3rem;
  }

  .divider-long {
    background-color: black;
    border-top: .3rem solid black;
    width: 100%;
    margin-top: 0;
    margin-bottom: 3rem;
  }

  .main-head .s1 {
    padding-bottom: 1rem;
  }

  .main-head .request-btn {
    padding-bottom: 7rem;
    position: relative;
    height: 0;
    top: 5rem;
  }

  .request-btn a,
  #contact-form .request-btn {
    color: white;
    font-family: passionone;
    font-size: 2.4rem;
    background-color: rgb(24, 24, 24);
    padding: 2rem 3rem;
  }

  .request-btn-inv a {
    color: black;
    font-family: passionone;
    font-size: 2.4rem;
    background-color: white;
    padding: 2rem 3rem;
  }

  .main-kleben,
  .services-services {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .main-kleben {
    text-align: center;
    margin-bottom: 7rem;
  }

  .main-kleben #kleben {
    width: 25rem;
    position: relative;
    left: -2rem;
    top: -4rem;
  }

  .main-kleben #main-dots {
    display: inline-block;
    position: relative;
    left: 8.5rem;
    top: -6.5rem;
    width: 12rem;
  }

  .main-opening {
    background-image: url('../images/bg-yellow.png');
    background-repeat: no-repeat;
    background-size: 250% 115%;
    background-position: -5rem -2rem;
    background-origin: border-box;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 39rem;
    padding-bottom: 7rem;
    padding-top: 5rem;
  }

  .main-opening h1 {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .main-opening .s1 {
    padding-bottom: 5rem;
  }

  .main-opening .s1 .small {
    font-size: 1.2rem;
  }

  .main-insta {
    background-image: url('../images/bg-insta.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: border-box;
  }

  .main-insta header {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .flex-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
  }

  .flex-container > div {
    text-align: left;
  }

  .flex-row {
    flex-direction: row;
  }
    
  .flex-container > .flex-row {
    flex-direction: row;
    padding: 0 .5rem .5rem 0;
  }

  .main-insta .flex-item {
    padding-bottom: 5rem;
    width: 100%;
    max-width: 100%;
  }

  .instagram-media,
  .main-insta .insta-list .flex-item iframe {
    min-width: 100%!important;
    max-width: 100%;
    width: 100%;
  }

  .insta-hide-4 {
    display: none;
  }

  .services-claim {
    background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 100%;
    background-position: -3rem -7rem;
    background-origin: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
    padding-top: 5rem;
  }

  #services-dots {
    display: none;
  }

  .services-head,
  .projects-head,
  .contact-come {
    padding-bottom: 5rem;
  }

  .contact-head {
    padding-bottom: 4rem;
  }

  .contact-claim img {
    position: relative;
    top: 1rem;
    left: -1rem;
    width: 29rem;
  }

  .services-head h1,
  .projects-head h1,
  .contact-head h1 {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .services-claim img {
    width: 22rem;
    height: 15.5rem;
    position: relative;
    top: 2rem;
  }

  .services-services,
  .projects-projects,
  .contact-contact {
    text-align: center;
  }

  .services-services .service,
  .contact-contact #contact-form {
    text-align: left;
  }

  /* COLLAPSIBLES */
  .collapsible {
    font-family: passionone;
    background-color: transparent;
    font-size: 2.4rem;
    cursor: pointer;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    padding-bottom: 3rem;
  }

  /* TODO: change classes from collapsible-inactive back to collapsible when content is there */
  .collapsible-inactive {
    font-family: passionone;
    background-color: transparent;
    font-size: 2.4rem;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    padding-bottom: 3rem;
  }

  .active, .collapsible:hover {
    /* TODO: reintroduce when content is there color: red;*/
  }
  
  .filter-small {
    display: block;
  }

  .filter-large {
    display: none;
  }

  .service .content,
  .projects-filter .content {
    padding: 0;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .collapsible:after {
    content: url('../images/list-arrow-down.png');
    float: right;
    display: none; /* TODO: Reintroduce when content is there */
  }
  
  .active:after {
    content: url('../images/list-arrow-up.png'); /* Unicode character for "minus" sign (-) */
  }
  /* COLLAPSIBLES  */
  #yeah {
    position: relative;
    left: -2rem;
  }

  #heart {
    position: relative;
    left: 6rem;
    top: -3rem;
    z-index: 0;
  }

  .services-projects {
    background-image: url('../images/bg-yellow.png');
    background-repeat: no-repeat;
    background-size: 250% 115%;
    background-position: -5rem 3rem;
    background-origin: border-box;
    position: relative;
    width: 100%;
    height: 32rem;
    padding-bottom: 7rem;
  }

  .services-projects .request-btn {
    position: relative;
    top: -14rem;
  }

  .projects-projects {
    padding: 4rem 3rem;
    margin: auto;
  }

  .projects-claim {
    background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 100%;
    background-position: -3rem -4rem;
    background-origin: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
    padding-top: 5rem;
  }

  .projects-claim img {
    width: 29rem;
    position: relative;
    left: -2rem;
    height: 9rem;
    top: 1rem;
  }

  .projects-contact {
    background-image: url('../images/bg-yellow.png');
    background-repeat: no-repeat;
    background-size: 250% 115%;
    background-position: -5rem 3rem;
    background-origin: border-box;
    position: relative;
    width: 100%;
    height: 36rem;
    padding-bottom: 7rem;
  }

  .project-modal {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: white;
    position: fixed;
    z-index: 2;
    padding-bottom: 7rem;
    overflow: scroll;
    top: 0;
    left: 0;
  }

  .project-modal img {
    width: 5rem;
    position: absolute;
    right: 0;
    padding: 2rem 3rem 0 0;
  }

  .projects-list {
    justify-content: center;
  }

  .projects-list .signs img {
    width: 100%;
  }

  .projects-list > div {
    text-align: center;
  }

  .project {
    width: 100%;
    padding-bottom: 4rem;
  }

  .filter-button {
    color: black;
    font-family: passionone;
    font-size: 2.4rem;
    background-color: transparent;
    padding: 1rem 0;
    display: block;
    border-width: 0;
    border-style: unset;
    border-color: unset;
    border-image: unset;
  }

  .projects-filter button {
    padding-left: 0;
  }

  .contact-btns {
    padding: 5rem 3rem 0 3rem;
    background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 120%;
    background-position: -3rem -1rem;
    background-origin: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
  }

  .contact-claim {
    background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 100%;
    background-position: -3rem -13rem;
    background-origin: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
  }

  .contact-btns img {
    position: absolute;
    left: -8rem;
    top: -5rem;
    z-index: 0;
  }

  .contact-btns .request-btn-inv {
    padding-bottom: 5rem;
    z-index: 1;
    position: relative;
  }

  .contact-btns .request-btn-inv a {
    width: 80%;
    display: block;
    margin: auto;
    padding: 1rem 3rem;
  }

  .contact-contact {
    padding-bottom: 5rem;
    position: relative;
    z-index: 0;
  }

  .contact-contact img {
    max-width: 28.3rem;
    max-height: 17.4rem;
  }

  #contact-form {
    padding-top: 1rem;
  }

  #contact-form input,
  #contact-form textarea {
    width: 100%;
    max-width: 100%;
    border: .1rem solid black;
  }

  #contact-form input {
    height: 3.5rem;
  }

  #contact-form label {
    font-family: passionone;
    font-size: 2.4rem;
    padding-top: 2rem;
    letter-spacing: .1rem;
  }

  #contact-form #approve-ds {
    margin-top: 2rem;
    display: inline-block;
    width: 1rem;
    margin-right: 1rem;
    position: relative;
    top: 1rem;
  }

  #contact-form #label-approve {
    font-size: 1.8rem;
    display: inline;
  }

  #contact-form .request-btn {
    margin-top: 3rem;
    padding-bottom: 5rem;
  }

  #contact-form .flex-item {
    width: 100%;
  }

  .contact-come h1 {
    padding-bottom: 3rem;
  }

  #contact-footer {
    display: none;
  }

  #gmap_canvas {
    display: none;
  }

  footer {
    background-color: rgb(24, 24, 24);
    padding: 5rem 2rem 0 2rem;
  }

  footer .request-btn-inv {
    padding-bottom: 3rem;
  }
  
  footer .request-btn {
    padding-bottom: 1rem;
  }

  footer .request-btn-inv a,
  footer .request-btn a {
    display: block;
    width: 80%;
    margin: auto;
  }

  .imprint,
  .privacy {
    padding-top: 7rem;
    padding-bottom: 5rem;
    font-size: 1.4rem;
  }

  .thanks {
    padding-top: 10rem;
    padding-bottom: 5rem;
    height: calc(100vh - 32.3rem);
  }

  .bni-super {
    color: white;
    font-size: 1.5rem;
  }

  footer div .bni-sub {
    padding-top: 0;
  }

  #logo-bni {
    width: 4rem;
  }

  #pixlee_container {
    height: 45rem;
    overflow: hidden;
  }

}


@media only screen and (min-width: 401px) {
  /*.main-kleben {
    background-size: 210% 200%;
    background-position: -39rem -9rem;
  }*/

  .services-projects .request-btn {
    top: 0;
  }

  #heart {
    top: 10rem;
    left: 2rem;
  }

  #yeah {
    top: -5rem;
    left: 3rem;
  }

  .projects-claim img {
    width: 37rem;
    height: 11rem;
    top: 2rem;
  }

  .projects-projects {
    padding-top: 5rem;
  }

  .contact-claim img {
    top: 1rem;
    left: 0rem;
  }
}


@media only screen and (min-width: 434px) {
  /*.main-kleben #kleben {
    width: 30rem;
    left: -3rem;
    top: -.5rem;
  }*/
  .main-kleben #main-dots {
    left: 12rem;
    top: -7.5rem;
    width: 18rem;
  }

  .projects-claim img {
    width: 40rem;
    height: 13rem;
    top: 3rem;
  }

  .projects-projects {
    padding-top: 6rem;
  }

  .services-claim img {
    width: 25rem;
    height: 17.5rem;
    top: 3rem;
  }
}


@media only screen and (min-width: 544px) {
  .main-kleben #kleben {
    width: 35rem;
    top: -6.5rem;
    /*left: -6rem;*/
  }

  .main-kleben {
    background-position: -2rem -1rem;
  }

  .main-kleben #main-dots {
    left: 12.6rem;
    top: -8rem;
    width: 22rem;
  }

  .projects-claim {
    padding-top: 1rem;
  }

  .projects-projects {
    padding-top: 7rem;
  }

  .services-claim {
    padding-top: 0;
  }

  .services-claim img {
    width: 30rem;
    height: 21rem;
    top: 5rem;
  }

  .contact-claim {
    background-position: -3rem -17rem;
  }

  .contact-claim img {
    width: 35rem;
    top: 1rem;
    left: 1rem;
  }
}


@media only screen and (min-width: 576px) {
  /* For tablet */
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }

  .hide-tablet-destop {
    display: block;
  }

  .insta-hide-4 {
    display: block;
  }

  .lb-mobile {
    display: none;
  }

  /* NAVBAR */
  #mobile-collapse-front {
    position: absolute;
    right: -.2rem;
    top: -.2rem;
    width: 25rem;
  }

  .navbar-nav {
    padding-top: 8rem;
    padding-left: 3rem;
  }
  /* NAVBAR */
  
  .main-head-img img {
    height: 60rem;
    padding-bottom: 0;
  }

  .main-head h0 {
    font-size: 6rem;
    line-height: 6rem;
  }

  .module,
  footer {
    width: 100%;
  }

  .main-head {
    position: absolute;
    top: 18rem;
    margin: 0 3rem;
    width: 90%;
  }

  .main-head .main-header {
    padding: 6rem 5rem 3rem 5rem;
  }

  .main-head .s1 {
    padding: 0 2rem;
  }

  .main-head img {
    position: absolute;
    top: -3rem;
    left: 0;
  }

  .main-kleben {
    position: absolute;
    top: 80rem;
    padding-top: 12rem;
    text-align: center;
    height: 30rem;
    background-position: -2rem -8rem;
  }

  .main-kleben #kleben {
    /*margin-top: 7rem;
    width: 100%;
    max-width: 35rem;
    max-height: 16rem;*/
    top: -1rem;
  }

  .main-opening {
    position: absolute;
    top: 115rem;
    padding-top: 6rem;
  }

  .main-insta {
    position: absolute;
    top: 154rem;
    padding-bottom: 5rem;
  }

  .main-insta .flex-item {
    width: 45%;
    padding: 0 1rem 2rem 1rem;
    margin: auto;
    align-self: flex-start;
  }

  .main-footer {
    position: absolute;
    top: 264rem;
  }

  .nav-container {
    padding-bottom: 7rem;
  }

  .services-head,
  .projects-head,
  .contact-head {
    margin: 0 3rem;
    width: auto;
  }

  .services-head h1 {
    padding-top: 5rem;
  }

  .services-services,
  .contact-contact {
    padding-top: 5rem;
  }

  .services-services .service .content {
    padding-right: 10rem;
  }

  /*.services-claim {
    background-position: -3rem -11rem;
  }*/

  /*.services-claim img {
    width: 40rem;
    max-width: unset;
    height: 18rem;
    max-height: unset;
  }*/

  #yeah {
    top: -5rem;
    left: -8rem;
  }

  .projects-projects img {
    margin: auto;
    max-height: 38rem;
    max-width: 55rem;
  }

  .projects-claim {
    background-position: -3rem -4rem;
  }

  .projects-projects {
    padding-top: 7rem;
  }

  .projects-claim img {
    position: relative;
    left: -3rem;
    width: 45rem;
    max-height: 30rem;
  }

  .projects-contact .request-btn {
    position: relative;
    top: 0rem;
  }

  .projects-projects .s1 {
    padding-bottom: 2rem;
  }

  .projects-contact {
    padding-bottom: 5rem;
  }

  .project {
    width: 45%;
    padding: 1rem;
  }

  .contact-claim {
    height: 22rem;
    background-position: -3rem -12rem;
  }

  .contact-claim img {
    top: 3rem;
  }

  .contact-claim .hide-mobile {
    width: unset;
    top: -23rem;
    left: -8rem;
    z-index: -1;
  }

  #contact-form .flex-item {
    width: 50%;
    padding-right: 1rem;
  }

  #contact-form #flex-phone,
  #contact-form #flex-size {
    padding-right: 0;
  }

  #contact-form .flex-container {
    justify-content: center;
  }

  #contact-form .button-right {
    text-align: center;
  }

  #contact-form .request-btn {
    width: 30%;
  }

  .contact-come {
    padding-top: 5rem;
    background-image: url('../images/bg-yellow.png');
    background-repeat: no-repeat;
    background-size: 250% 340%;
    background-position: -5rem 3rem;
    background-origin: border-box;
    position: relative;
    width: 100%;
  }

  #contact-footer {
    display: block;
  }

  .project-modal .bold-text {
    font-family: passionone;
    font-size: 2.4rem;
    padding-top: 2rem;
    letter-spacing: .1rem;
  }
  
  .project-modal .small-text {
    font-family: ptsans;
    font-size: 1.8rem;
    letter-spacing: .1rem;
  }

  .projects-list > .flex-item {
    text-align: center;
  }

  .project-modal-single {
    display: none;
  }

  .project-modal-single img {
    position: relative;
    width: auto;
    max-height: 30rem;
    margin: auto;
    padding-right: 0;
    max-height: unset;
    max-width: unset;
  }

  .projects-projects .projects-list img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
  }

  .project-modal-img {
    margin-top: 6rem;
    margin-bottom: 8rem;
    overflow: hidden;
    height: 30rem;
  }

  #mod-prev {
    right: unset;
    left: 0;
    top: 23%;
    z-index: 1;
    padding: unset;
    padding-left: 1rem;
  }
  
  #mod-next {
    top: 23%;
    z-index: 1;
    padding: unset;
    padding-right: 1rem;
  }

  #gmap_canvas {
    display: block;
    position: relative;
    left: -3rem;
    width: 100vw;
    height: 50rem;
    margin: 5rem 0;
  }

  footer {
    padding: 0 3rem 3rem 3rem;
  }

  footer .flex-item {
    width: 50%;
  }

  footer .flex-container .right {
    text-align: right;
    padding-top: 4rem;
  }

  footer .flex-container .right a {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  footer .flex-container .right .request-btn {
    padding-bottom: 0;
  }

  .imprint,
  .privacy {
    padding-top: 0;
    font-size: 1.6rem;
  }

  .thanks {
    padding-left: 5rem;
    padding-right: 5rem;
    height: calc(100vh - 28.76rem);
  }
}


@media only screen and (min-width: 634px) {
  /*.main-kleben #kleben {
    left: -10rem;
    top: -.5rem;
  }*/

  .main-kleben #main-dots {
    width: 25rem;
    left: 14.2rem;
    top: -12.5rem;
  }

  .main-footer {
    top: 264rem;
  }

  .projects-claim img {
    width: 52rem;
    height: 16rem;
    left: -1rem;
    top: 5rem;
  }

  .projects-projects {
    padding-top: 9rem;
  }
}


@media only screen and (min-width: 657px) {
  .main-opening h1 {
    padding-top: 5rem;
  }

  .main-head {
    top: 23rem;
  }

}


@media only screen and (min-width: 664px) {
  /*.main-kleben #kleben {
    left: 7rem;
    top: -.5rem;
  }*/

  .main-opening {
    height: 44rem;
  }

  .main-insta {
    top: 159rem;
  }

  .main-footer {
    top: 272rem;
  }

  .main-kleben #main-dots {
    left: .8rem;
    top: 2.9rem;
  }
  
  .services-claim img {
    width: 33rem;
    height: auto;
    top: 7rem; 
  }

  .main-head {
    top: 29rem;
  }
}


@media only screen and (min-width: 768px) {
  /* For portrait tablets and large phones: */
  .navbar {
    position: relative;
    margin-bottom: 0;
  }

  .nav-container {
    padding-bottom: 2rem;
  }
    
  .nav > li > a {
    font-size: 1.6rem;
  }

  .navbar-nav > li {
    font-weight: 400;
    padding-left: 2rem;
  }

  #mobile-collapse-front {
    float: right;
    background-color: transparent;
    top: -6.5rem;
    width: unset;
  }

  .main-logo {
    padding-left: 2rem;
    padding-top: 2rem;
  }

  .main-head {
    top: 33rem;
  }

  .main-kleben {
    background-position: -2rem -7rem;
  }

  .main-kleben #kleben {
    top: 0;
  }

  .main-footer {
    top: 276rem;
  }

  .services-bg-wrapper {
    /*background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 120%;
    background-position: -2rem -2rem;*/
    background-color: #91aab9;
  }

  .services-claim {
    background-position: -3rem -14rem;
  }

  .services-claim img {
    width: 40rem;
    top: 3rem;
  }

  .service .content {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  .projects-claim {
    padding-top: 0;
    height: 13rem;
  }

  .projects-claim img {
    top: 2rem;
  }

  .projects-bg-wrapper {
    /*background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 120%;
    background-position: -2rem -2rem;*/
    height: 21rem;
    background-color: #91aab9;
  }

  .project-modal-img {
    max-width: 80%;
    margin: 5rem auto;
  }

  .contact-bg-wrapper {
    /*background-image: url('../images/bg-grau.png');
    background-repeat: no-repeat;
    background-size: 120% 120%;
    background-position: -2rem -2rem;*/
    background-color: #91aab9;
  }

  .contact-claim {
    height: 26rem;
  }

  .contact-claim img {
    width: 40rem;
    left: 2rem;
    top: 6rem;
  }

  .contact-claim .hide-mobile {
    top: -40rem;
  }


  #gmap_canvas {
    position: static;
    width: 100%;
  }

  .imprint,
  .privacy {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .thanks {
    padding-left: 10rem;
    padding-right: 10rem;
    height: calc(100vh - 30rem);
  }
  
  #logo-bni {
    width: 3.5rem;
  }

}


@media only screen and (min-width: 840px) {
  .main-head {
    position: relative;
    top: -38rem;
    width: 80%;
    margin: auto;
  }

  /*.main-kleben {
    background-position: -39rem -25rem;
  }*/

  .services-head,
  .services-services,
  .projects-head,
  .projects-list,
  .projects-filter,
  .project-modal-single,
  .contact-head,
  .contact-contact {
    width: 80%;
    margin: auto;
  }

  .main-footer {
    top: 281rem;
  }

  .services-claim img {
    position: relative;
    left: 5rem;
  }

  .projects-claim img {
    left: 5rem;
  }

  .contact-claim img {
    left: 5rem;
    top: 6rem;
  }

  #gmap_canvas {
    width: 90%;
    margin: 5rem auto;
  }
}


@media only screen and (min-width: 922px) {
  .main-footer {
    top: 285rem;
  }

  .services-claim img {
    left: 7rem;
  }

  .contact-claim img {
    left: 7rem;
  }

  .main-head {
    top: -36rem;
  }
}


@media only screen and (min-width: 992px) {
  /* For smaller desktops and laptops: */
  #main {
    padding-top: 1rem;
  }

  /*.main-kleben {
    background-position: -39rem -29rem;
  }*/

  .main-kleben #kleben {
    left: -3rem;
  }

  .main-kleben #main-dots {
    width: 40rem;
    left: -9.5rem;
    top: .9rem;
  }

  .services-claim img {
    left: 7rem;
  }

  .services-projects {
    height: 37rem;
  }

  .projects-claim img {
    left: 7rem;
  }

  .contact-claim img {
    left: 7rem;
  }
}


@media only screen and (min-width: 1024px) {
  .main-head,
  .projects-head,
  .projects-list,
  .projects-filter,
  .project-modal-single,
  .contact-head,
  .contact-contact {
    width: 70%;
  }

  .main-kleben {
    background-position: -2rem -8rem;
  }

  .main-kleben #kleben {
    width: 40rem;
    top: -2rem;
  }

  .main-footer {
    top: 291rem;
  }
  
  .services-claim img {
    left: 13rem;
  }

  .projects-claim img {
    left: 11rem;
    top: 1rem;
    width: 60rem;
    height: 18rem;
  }

  .services-head,
  .services-services {
    width: 70%;
    margin: auto;
  }

  .contact-claim img {
    left: 13rem;
  }

  .contact-claim .hide-mobile {
    left: 0;
  }
}

@media only screen and (min-width: 1200px) {
  /* For desktops: */
  .container-1200,
  .module {
    max-width: 120rem;
    margin: auto;
  }

  .main-head {
    width: 80%;
  }

  #nav-container-1000 {
    max-width: 103rem;
    margin: auto;
  }

  #mobile-collapse-front {
    padding-right: 0;
    padding-top: .5rem;
  }

  .main-logo img {
    width: 23rem;
  }

  .main-logo {
    padding-bottom: 0;
    padding-top: 1.5rem;
  }

  .main-head-img {
    max-width: 100rem;
    max-height: 60rem;
    margin: auto;
  }

  .main-kleben {
    height: 50rem;
    top: 55rem;
    width: 99.2vw;
    max-width: 99.2vw;
    left: 0;
    right: 0;
    /*background-position: -39rem -35rem;*/
  }

  .main-kleben #kleben {
    width: 43.1rem;
    top: 16rem;
    /*max-height: 17.3rem;
    position: relative;
    left: 0rem;
    margin-top: 25rem;*/
  }

  .main-kleben #main-dots {
    left: -8.5rem;
    top: 10.5rem;
  }

  .main-opening {
    top: 107rem;
    height: 64rem;
    background-position: -5rem -5rem;
    width: 99.2vw;
    max-width: 99.2vw;
    left: 0;
    right: 0;
  }

  .main-insta {
    top: 152rem;
    width: 100rem;
    margin: auto;
    left: 0;
    right: 0;
  }

  .main-insta .flex-item {
    width: 24%;
  }

  #kleben img {
    padding-right: .4rem;
  }

  .main-footer {
    top: 216rem;
    left: 0;
    right: 0;
  }

  .services-bg-wrapper {
    height: 50rem;
    width: 99.7vw;
    right: 0;
    position: relative;
    left: calc(-99.7vw + 120rem + ((99.3vw - 120rem) / 2));
  }

  #services-nav-container,
  #projects-nav-container,
  #contact-nav-container {
    width: 99.2vw;
    max-width: 99.2vw;
  }

  .services-claim {
    width: 99.2vw;
    max-width: unset;
    left: 0;
    right: 0;
    padding-top: 0;
    background-position: -3rem -19rem;
    position: absolute;
  }

  .services-claim img {
    top: -2rem;
    left: 18rem;
  }

  .services-head {
    width: 86rem;
    max-width: 86rem;
    height: 45rem;
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .services-head h1 {
    font-size: 6rem;
    padding-bottom: 5rem;
  }

  #services-dots {
    display: block;
    position: relative;
    right: -68rem;
    top: -14rem;
  }

  #heart {
    top: 11rem;
  }

  #yeah {
    top: -9rem;
  }

  .services-services img {
    max-width: 52.3rem;
    max-height: 20.1rem;
    position: relative;
    left: -23rem;
  }

  .service {
    z-index: 2;
    background-color: white;
    position: relative;
  }

  .service button,
  .service .content {
    padding-left: 1rem;
  }

  .services-services {
    position: absolute;
    top: 84rem;
    left: 0;
    right: 0;
  }

  .services-services .service {
    max-width: 65.5rem;
    margin: auto;
  }

  .services-projects {
    position: absolute;
    top: 162rem;
    background-position: -5rem -1rem;
    width: 99.2vw;
    max-width: unset;
    left: 0;
    right: 0;
  }

  .service button {
    font-size: 2.4rem;
  }

  .service .content {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  .services-footer {
    position: absolute;
    left: 0;
    right: 0;
    top: 197rem;
  }

  .projects-head {
    width: 86rem;
  }

  .projects-head h1 {
    padding-top: 5rem;
    font-size: 6rem;
    padding-bottom: 5rem;
  }

  .projects-head .s1 {
    font-size: 1.8rem;
  }

  .projects-bg-wrapper {
    height: 30rem;
    width: 99.6vw;
    right: 0;
    position: relative;
    left: calc(-99.7vw + 120rem + ((99.3vw - 120rem) / 2));
  }
  
  .projects-claim {
    background-position: -3rem -4rem;
    width: 100vw;
    max-width: unset;
    left: -1rem;
    right: 0;
    position: absolute;
  }

  .projects-claim img {
    width: 55rem;
    max-width: unset;
    left: 17rem;
    height: 28rem;
    top: -3rem;
  }

  .projects-projects > picture > img {
    position: relative;
    left: -23rem;
  }

  .projects-list > .flex-item {
    width: 30%;
  }

  .filter-small {
    display: none;
  }

  .filter-large {
    display: block;
  }

  .filter-buttons-list {
    padding-bottom: 5rem;
  }

  .projects-filter .content {
    max-height: unset;
  }

  .projects-filter button {
    padding: 1rem 2rem;
    border: .2rem solid black;
    margin: 1rem;
  }

  .filter-button-d {
    color: black;
    font-family: passionone;
    font-size: 2.4rem;
    background-color: white;
    padding: 2rem 3rem;
  }

  .projects-projects img {
    max-width: 81.6rem;
    max-height: 21.7rem;
  }

  .project-modal {
    left: 0;
    right: 0;
    border: .2rem solid black;
    overflow: unset;
  }

  .project-modal-img {
    max-width: 80rem;
    max-height: 50rem;
    height: 50rem;
    margin-top: 8rem;
    margin-bottom: 1rem;
  }

  .project-modal-single img {
    max-width: 80rem;
    max-height: 50rem;
  }

  #mod-next {
    right: 16rem;
    top: 33%;
  }

  #mod-prev {
    left: 16rem;
    top: 33%;
  }

  #mod-close {
    right: 5rem;
    top: 3rem;
  }

  .projects-contact {
    background-position: -5rem -1rem;
    width: 99.2vw;
    max-width: unset;
    left: calc(-99.3vw + 120rem + ((99.3vw - 120rem) / 2));
    right: 0;
  }

  .projects-contact #heart {
    left: 2rem;
  }

  .projects-projects {
    margin-bottom: 10rem;
    margin-top: 16rem;
  }

  .contact-head {
    width: 86rem;
    max-width: 86rem;
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .contact-head h1 {
    padding-top: 5rem;
    padding-bottom: 5rem;
    font-size: 6rem;
  }

  .divider {
    margin-bottom: 5rem;
  }

  .contact-bg-wrapper {
    height: 38rem;
    width: 99.7vw;
    right: 0;
    position: relative;
    left: calc(-99.7vw + 120rem + ((99.3vw - 120rem) / 2));
  }

  .contact-head .s1 {
    font-size: 4rem;
    line-height: 5rem;
  }

  .contact-claim {
    background-position: -3rem -10rem;
    width: 100vw;
    max-width: unset;
    left: -1rem;
    right: 0;
    position: absolute;
    height: 24rem;
  }

  .contact-contact {
    padding-top: 33rem;
  }

  /*.contact-claim img {
    max-width: 76.2rem;
    max-height: 22rem;
    position: relative;
    left: 14rem;
    width: 76rem;
    margin-bottom: 10rem;
  }*/
  .contact-claim img {
    left: 17rem;
    margin-bottom: 10rem;
  }

  .contact-claim .hide-mobile {
    top: -53rem;
  }

  /*.contact-claim .hide-mobile {
    max-width: unset;
    max-height: unset;
    position: relative;
    left: 0;
    top: -46rem;
    margin-bottom: 10rem;
  }*/

  #contact-form {
    padding-bottom: 7rem;
  }

  .contact-come {
    padding-top: 0;
    background-position: -5rem 42rem;
    background-size: 150% 140%;
    width: 99.2vw;
    max-width: unset;
    left: calc(-99.3vw + 120rem + ((99.3vw - 120rem) / 2));
    right: 0;
  }

  .contact-come h1 {
    padding-bottom: 5rem;
    font-size: 6rem;
  }

  .contact-come .s1 {
    font-size: 4rem;
    line-height: 5rem;
  }

  #contact-footer {
    position: absolute;
    left: 0;
    right: 0;
    top: 242rem;
  }

  #gmap_canvas {
    width: 70%;
    margin-bottom:10rem;
  }

  .container-1200 {
    max-width: 120rem;
    margin: auto;
  }

  footer .hide-mobile {
    padding: 0 10rem;
  }

  .imprint,
  .privacy {
    padding-top: 5rem;
    padding-left: 20rem;
    padding-right: 20rem;
  }

  .thanks {
    padding-left: 15rem;
    padding-right: 15rem;
    height: calc(100vh - 30rem);
  }

  #pixlee_container {
    height: 45rem;
    overflow: hidden;
  }
}


@media only screen and (min-width:  1300px) {
  #services-nav-container,
  #projects-nav-container,
  #contact-nav-container {
    width: 99.3vw;
    max-width: unset;
  }

  .contact-bg-wrapper,
  .projects-bg-wrapper,
  .services-bg-wrapper {
    width: 99.7vw;
  }
}


@media only screen and (min-width:  1500px) {
  .projects-claim img {
    width: 70rem;
    transform: rotate(2deg);
  }

  #services-nav-container,
  #projects-nav-container,
  #contact-nav-container {
    width: 99.4vw;
    max-width: 99.4vw;
  }

  .contact-bg-wrapper,
  .projects-bg-wrapper,
  .services-bg-wrapper {
    left: calc(-99.4vw + 120rem + ((99.3vw - 120rem) / 2));
    width: 99.45vw;
  }

  .contact-claim {  
    width: 100vw;
  }
}