/*smart phone*/

@media screen and (min-width: 310px) {
  h1 {
      font-size: 35px;
  }

  h2 {
      font-size: 30px;
  }

  h3 {
      font-size: 25px;
  }

  h4 {
      font-size: 20px;
  }

  .panel-title a {
      font-size: 30px;
  }
}

@media screen and (min-width: 410px) {
  h2 {
      font-size: 24px;
  }
}

@media screen and (min-width: 410px) {
    #kontakt {
      text-align: center;
  }

  .header-responsive-left {
      float: left;
      width: 50%;
    }

  p, ul {
      font-size: 22px;
  }
}


/*tablet hoch*/

@media screen and (min-width: 768px) {
  h2 {
      font-size: 30px;
  }
  
  .page__border--top, .page__border--bottom, .page__border--left, .page__border--right {
      display: inline-block;
  }

  .header_image {
      margin: 100px 0px;
  }

  .header-responsive {
      text-align: left;
  }
  
  #logo {
      display: inline-block;
  }

  #logo-mobile {
      display: none;
  }

  .navbar {
      display: none;
  }

  .nav_element_one {
      display: inline-block;
  }

  .nav_element_two {
      display: inline-block;
  }

  .nav_element_three {
      display: inline-block;
  }

  .nav_element_four {
      display: inline-block;
  }

  .nav_element_four_footer {
      display: none;
  }

  .image-wrapper img {
      max-width: 70%; 
      padding: 150px 70px 20px 0px;
  }

  #kontakt {
      padding-top: 160px;
  }

  #projekte {
      padding: 80px 10px 10px 150px;
  }

  #home {
      padding: 50px 10px 50px 150px;
  }

  #leistungen {
      padding: 150px 10px 100px 180px;
  }

  #impressum, #datenschutz {
      padding: 100px 10px 50px 180px;
      width: 800px;
  }
}


/*break col*/

@media screen and (min-width: 992px) {
  .string_right {
      display: inline-block;
  }

  .string_left {
      display: inline-block;
  }

  .string_bottom {
      display: inline-block;
  }

  .projektbezeichnung {
      display: inline-block;
  }

  .header-responsive {
      display: none;
  }

  .header {
      display: inline-block;
  }

  .slick-mobile {
      display: none;
  }

  #kontakt {
      margin-left: 50px;
  }

  .image-wrapper {
      padding-left: 50px;
      padding-top: 50px;
  }

  .image-wrapper img {
      padding: 40px 70px 20px 0px;
  }


  .slick img {
      max-width: 70%;
  }
}


/*laptop oder tablet quer*/

@media screen and (min-width: 1200px) {
  #projekte {
      width: 100%;
      padding: 80px 150px 150px;
  }
}