/* Responsive */

@media screen and (max-width: 1440px) {

  #high .section-img {
    background-size: 700px;
  }

}


@media screen and (max-width: 1199px) {

  .header-img{
    top: -30px;
    bottom: -55px;
  }

}

@media screen and (max-width: 991px) {
  #low .container {
    position: relative;
    height:100%;
  }

  body {
    font-size:18px;
  }

  #low > div.container {
    width:100%;
    max-width:100%;
  }

  #high .section-img {
    background-size: 600px;
  }

}

@media screen and (max-width: 767px) {

  body {
    font-size:16px;
  }

  .logo{
    width: 225px;
  }

  h1{
    font-size: 32px;
  }

  h2{
    font-size: 52px;
  }

  h3{
    font-size: 35px;
  }

  .huge{
    font-size: 26px;
  }

  .section-img{
    min-height: 400px;
  }

  .text{
    margin-top: -68px;
  }

  .header-img{
    top:0;
    bottom:0;
    background-size: contain;
  }

  .preview-text {
    margin:0;
    padding:0 15px;
  }

  .low_action{
    padding-left: 30px;
    padding-right: 30px;
  }

  #high .section-img {
    background-size: contain;
  }

  #high .preview-text {
    padding: 0;
  }

  #low .container {
    width:100%;
    max-width:none;
  }

  #low, #medium, #high {
    margin: 100px auto;
  }

  #low {
    margin-top: 0px;
  }

  .text {
    padding:20px 0;
  }

  .klappbar {
    margin-top:35px;
  }

  .button.mobile,
  .button.mobile:link,
  .button.mobile:active,
  .button.mobile:focus {
    display:block;
    margin:20px auto 20px;
    margin-left:0;
  }

  footer {
    padding:30px 0 35px;
  }

  footer .row > div:nth-child(2) {
    margin-top:10px;
  }


}

@media screen and (max-width: 575px) {

  h2{
    font-size: 45px;
  }

  section.text > div.container-small,
  footer > div.container-small {
    padding:0px;
  }

  .page_title {
  bottom:0;
  }

  .button.mobile {
    display:block;
    margin:0 auto;
  }

  .card-body .row .col-3 {
    padding-right:0;
  }

  .card-body img{
    margin-bottom: 15px;
    max-height: 150px;
    max-width: 100px;
    height: auto;
    width: auto;
  }

  footer h3 {
      margin-bottom: 5px;
      font-size: 18px;
  }

  footer p,
  footer a {
    font-size:16px;
  }

  .button, .button:link, .button:active, .button:visited{
    max-width: 100%;
    width: 100%;
  }

  .low_action > .row > .col-12:first-child{
    margin-bottom: 30px;
  }

}

@media screen and (max-width: 480px){

  .infobox{
    height: auto;
  }

  .infobox img{
    max-width: 100%;
    max-height: 200px
  }

  .infobox .box-content, .infobox img{
    width: 100%;
  }

}

@media screen and (max-width: 350px){

  h1{
    font-size: 30px;
  }

  h2{
    font-size: 40px;
  }

  h3{
    font-size: 33px;
  }

  footer h3 {
      margin-bottom: 5px;
      font-size: 18px;
  }

  footer p,
  footer a {
    font-size:16px;
  }

}