@media only screen and (min-width: 731px) and (max-width: 900px) {

  nav[role="navigation"] {
    margin:0 0 0 45px;
  }

  main[role="main"] {
    box-sizing:border-box;
    background:url(../img/back-streifen-grau.jpg) left bottom repeat-x;
    position:relative;
    box-shadow:0px -2px 3px rgba(0,0,0,0.3);
    z-index:99;
    padding:45px 20px 50px 50px;
  }

  footer[role="contentinfo"].info {
    padding:30px 20px 20px 45px;
  }
}



@media only screen and (max-width: 730px),
only screen and (max-device-width: 730px) {

  .menu {
    display:none;
  }

  .mobil {
    display:none;
  }

  .menubutton {
    display:block;
    left:0;
    top:4px;
  }

  .menubuttonon {
    display:none;
  }

  ul.socialmedia li:first-child {
    display:inline-block;
  }

  nav[role="navigation"] {
    box-sizing:border-box;
    padding:18px 16px 24px 16px;
    display:block;
    float:left;
    margin-left:-100%;
    width:100%;
    height:100%;
    z-index:50000;
    background:#85004e url(../img/back.png) repeat top left;
  }

  nav[role="navigation"] ul {
    margin:50px 0 0 0;
    padding:0;
    width:100%;
  }

  nav[role="navigation"] li {
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }

  nav[role="navigation"] a {
    display:block;
    width:100%;
    padding:12px 10px;
    font-size:26px;
    line-height:1.15;
    border-bottom:1px solid rgba(255,255,255,0.18);
    box-sizing:border-box;
  }

  nav[role="navigation"] li:last-child a {
    border-bottom:none;
  }

  .menubuttonon {
    float:left;
    margin-left:0px;
  }

  body.active nav[role="navigation"] {
    margin-left:0;
  }

  body.active nav[role="navigation"] .mobil {
    display:block;
  }

  body.active #wrapper {
    float:right;
    margin-right:-100%;
    display:none;
  }

  body.active #wrapper:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background-color:#4e4e4e;
  }

  body.active .menubuttonon {
    z-index:50006;
    display:block;
    position:absolute;
    right:0;
    left:auto;
    top:4px;
  }

  body.active .menubutton {
    display:none;
  }

  #logo {
    background:url(../img/pia-kehl2.png) no-repeat left top;
    background-size:145px auto;
    position:absolute;
    bottom:-6px;
    left:15px;
    z-index:100;
    width:145px;
    height:132px;
    box-shadow:none;
  }

  #logo a {
    display:block;
    width:145px;
    height:132px;
  }

  main[role="main"] {
    box-sizing:border-box;
    background:url(../img/back-streifen-grau.jpg) left bottom repeat-x;
    position:relative;
    box-shadow:0px -2px 3px rgba(0,0,0,0.3);
    z-index:99;
    padding:20px 20px 30px 20px;
  }

  .main {
    width:100%;
    max-width:100%;
  }

  .footer-flex {
    display:flex;
    flex-direction:column;
  }

  footer[role="contentinfo"] {
    display:block !important;
    padding:20px 20px 25px 20px;
    font-size:18px;
    height:auto;
  }

  footer[role="contentinfo"].info {
    display:block;
    padding:18px 20px;
  }

  #left,
  .meinung,
  #right,.kundenstimmen-gesamt  {
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 15px 0;
    border:none;
  }

  #left {
    flex:none;
    max-width:100%;
    display:block;
    padding:0 0 5px 0 !important;
    margin:0 0 8px 0;
  }

  #left p {
    margin:0 0 10px 0;
  }

  #left ul {
    margin:5px 0 0 0;
    padding:0;
  }

  #left ul li {
    float:none;
    padding:0;
    margin:0;
    height:auto;
    line-height:normal;
  }

  #left ul li img {
    width:150px;
    max-width:100%;
    height:auto;
  }

  .meinung,
  #right,
  .kundenstimmen-gesamt  {
    flex:none;
    padding:12px 0 0 0 !important;
  }

  .meinung {
    border-top:1px solid rgba(255,255,255,0.15);
  }

  #right {
    border-top:1px solid rgba(255,255,255,0.15);
  }

  h1,
  h1.home,
  h2,
  h3 {
    word-wrap:break-word;
    hyphens:auto;
  }

  .socialmedia li {
    margin-right:5px;
  }
}



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

  .menubutton {
    left:0;
  }

  body.active .menubuttonon {
    right:0;
  }

  nav[role="navigation"] {
    padding:16px 14px 20px 14px;
  }

  nav[role="navigation"] ul {
    margin-top:46px;
  }

  nav[role="navigation"] a {
    padding:11px 8px;
    font-size:22px;
  }

  .footer-flex > div::before {
  display:none;
}

  #logo {
    background:url(../img/pia-kehl2.png) no-repeat left top;
    background-size:125px auto;
    position:absolute;
    bottom:-6px;
    left:15px;
    width:125px;
    height:114px;
  }

  #logo a {
    width:125px;
    height:114px;
  }

  main[role="main"] {
    padding:18px 20px 25px 20px;
  }

  footer[role="contentinfo"] {
    padding:18px 20px 20px 20px;
  }

  footer[role="contentinfo"].info {
    padding:15px 20px;
  }

  #left ul li img {
    width:130px;
  }

  h1 {
    font-size:28px;
    line-height:1.1;
  }

  h1.home {
    font-size:24px;
  }

  h2 {
    font-size:24px;
  }

  h3 {
    font-size:19px;
  }
}



.flex-direction-nav .flex-prev {
  opacity:0;
  left:10px;
}

.flex-direction-nav .flex-next {
  opacity:0;
  right:10px;
}