/* ######################################
                ALLGEMEIN
####################################### */
@media (max-width: 1399px) {
  .sharingiscaring_dialog {
    width: 45%;
  }
}
@media (max-width: 1199px) {
  .einfache_seite__body {
    padding: 0 6%;
  }
}

@media (max-width: 991px) {
  #main {
    padding: 40px 2% 170px;
  }

  #block-views-block-organisationen-uebersicht::after {
    bottom: -170px;
  }
}

@media (max-width: 520px) {
  .no-sidebar #content {
    /*margin-left: 0;*/
  }

  .content {
    width: 100%;
  }

  #content-wrapper,
  .no-sidebar #content {
    margin: 0;
    width: 100%;
  }

  .einfache_seite__body {
    padding: 0;
  }

  #main {
    padding: 40px 2% 90px;
  }

  #block-views-block-organisationen-uebersicht::after {
    bottom: -90px;
  }

  .sharingiscaring_dialog {
    height: 83vh;
    display: block;
    bottom: inherit;
    top: 59vh;
    padding: 1% 1% 2%
  }

  .sharingiscaring_dialog a {
    width: 40%;
    position: relative;
  }

  h1,
  h1 span {
    hyphens: auto;
    font-size: 40px;
  }

  h2 {
     hyphens: auto;
     font-size: 30px;
  }
  #footer_nav p a:first-of-type::after {
    display: none;
  }
}

@media (max-width: 340px) {
  .sharingiscaring_dialog h2 {
    font-size: 2.3em;
  }

  .sharingiscaring_dialog p {
    font-size: 18px;
  }

  .sharingiscaring_dialog a {
    width: 33%;
  }
}

/* ######################################
                NAVIGATION
####################################### */
@media (max-width: 991px) {
  #menu-region {
    flex-basis: 76%;
  }

  #main_menu li.menu-item {
    margin: 0 19px;
  }

  #main_menu .menu-item a {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  #header {
    position: relative;
    z-index: 10;
  }

  #menu-region {
    width: 10%;
    display: block;
    min-width: inherit;
    margin-right: 60px;
  }

  #block-faire-vermieter-main-menu {
    width: 55px;
    height: 40px;
    background-image: url(/themes/custom/faire_vermieter/images/nav-burger.svg);
    background-repeat: no-repeat;
    margin: 31px 106px 0 0;
    float: right;
    cursor: pointer;
  }

  #block-faire-vermieter-main-menu #main_menu {
    position: fixed;
    width: 100vw;
    left: 0;
    height: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: -1;
    overflow: hidden;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    min-width: inherit;
    padding-right: 0;
    display: flex;
  }

    #block-faire-vermieter-main-menu.menu-open #main_menu {
      height: 100vh;
    }

    #block-contactbutton {
      width: 149px;
    }

    #kontakt_wrap {
      margin: 0;
    }

    #main_menu ul.menu {
      width: 100%;
      flex-direction: column;
      justify-content: center;
    }

    #main_menu li.menu-item {
      margin: 3% 0;
      width: 100%;
      position: relative;
      text-align: center;
    }

    #main_menu li.menu-item::after {
      width: 100%;
      content: "";
      height: 1px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      left: 0;
      bottom: -18px;
    }

    #main_menu .menu-item a {
      font-size: 30px;
      font-weight: 500;
    }

}

@media (max-width: 420px) {
  #header {
    height: 80px;
  }

  #main_menu li.menu-item::after {
    display: none;
  }

  #fairMieten_logo {
    height: 80px;
  }

  #block-faire-vermieter-main-menu {
    margin: 27px 56px 0 0;
    width: 35px;
    height: 32px;
  }

  #block-contactbutton {
    padding: 23px 10px 21px 10px;
    width: 110px;
  }

  #kontakt_icon, #share_icon {
    width: 35px;
  }

  #kontakt_icon {
    margin-top: 3px;
  }
}

/* ######################################
                STARTSEITE
####################################### */
@media (max-width: 1599px) {
  .schaubild_1_wrapper .slick-track {
    height: 475px;
  }

  .einfache_seite__body > div:nth-of-type(4) {
    padding: 90px 0 470px;
  }

  .schaubild_1_wrapper .schaubild_holder {
    height: auto!important;
  }

  .schaubild_1_wrapper .schaubild_holder img {
    height: 180px;
  }

  .schaubild_item::after {
    width: 100px;
    height: 25px;
    background-size: 100px 25px;
    bottom: 13%;
    right: -57px;
  }

  .einfache_seite__body > div:nth-of-type(4) {
    padding: 90px 0 540px;
  }
}
@media (max-width: 1199px) {
  .frontpageanchor {
    margin: 0 3vw;
  }

  .frontpagebobble {
    height: 23vw;
    margin: 0 2.5vw;
  }

  .frontpagebobble h2 {
    font-size: 25px;
  }

  .holder_headerimage {
    height: 420px;
  }

  .einfache_seite__body > div:nth-of-type(4) > ul {
    width: auto;
  }

  .frontpagebobble svg {
    height: 70px;
    top: 11%;
  }

  .schaubild_1_wrapper .slick-track {
    height: 405px;
  }

  .schaubild_1_wrapper ul.slick-dots,
  #block-mieterpiktogramm ul.slick-dots {
    width: 100%;
    text-align: center;
    bottom: -22px;
  }

  #block-mieterpiktogramm ul.slick-dots {
    bottom: -37px
  }

  .schaubild_1_wrapper ul.slick-dots li,
  #block-mieterpiktogramm ul.slick-dots li {
    margin: 0!important;
    display: inline-block;
  }

  .schaubild_1_wrapper ul.slick-dots li::before,
  #block-mieterpiktogramm ul.slick-dots li::before {
    display: none!important;
  }

  .schaubild_1_wrapper ul.slick-dots li button,
  #block-mieterpiktogramm ul.slick-dots li button {
    color: #434343;
    background-color: #434343;
  }

  .schaubild_1_wrapper ul.slick-dots li.slick-active button,
  #block-mieterpiktogramm ul.slick-dots li.slick-active button {
    color: #FF9900;
    background-color: #FF9900;
  }

  .schaubild_1_wrapper ul.slick-dots li button::before,
  #block-mieterpiktogramm ul.slick-dots li button::before {
    display: none;
  }

  .schaubild_1_wrapper::after {
    bottom: -30px;
    height: 60px;
  }

  #block-mieterpiktogramm::after {
    height: 60px;
    bottom: -50px;
  }
}

@media (max-width: 1024px) {
  .holder_headerimage {
    background-attachment: inherit;
  }
}

@media (max-width: 991px) {
  .frontpagebobble h2::after {
    top: 75px;
    width: 30px;
    height: 18px;
  }
  .frontpageanchor {
    margin: 0;
  }
  .frontpagebobble svg {
    height: 55px;
  }

  .schaubild_item {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .frontpagebobble h2::after {
    top: 60px;
    width: 25px;
    height: 15px;
    left: calc(50% - 12.5px);
  }

  .holder_headerimage {
    background-size: 130%;
  }

  .schaubild_1_wrapper .slick-track {
    height: 435px;
  }

  #content_kontakt {
    flex-direction: column;
    display: block;
  }

  #content_kontakt .ansprechpartner:first-of-type {
    margin-bottom: 80px;
    position: relative;
  }

  #content_kontakt .ansprechpartner:first-of-type::after {
    width: 200px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #ff9900;
    left: calc(50% - 100px);
    bottom: -35px;
  }
  .ansprechpartner_zitat {
    width: 90%;
  }

  .frontpagebobble h2 {
    font-size: 20px;
  }

  .frontpagebobble svg {
    height: 50px;
  }
}

@media (max-width: 680px) {
  .holder_headerimage {
    background-size: 170%;
    background-position: 70% -10vh;
    height: 370px;
  }

  .front .einfache_seite__body {
    margin-top: 0;
    display: block;
    text-align: center;
  }

  .front .einfache_seite__body > div:first-of-type {
    display: block;
    width: 60%;
    display: inline-block;
    margin-left: 20%;
  }

  .frontpageanchor {
    width: 100%;
    flex: none;
    margin: 0!important;
  }

  .inner-bobble > a.frontpageanchor {
    position: absolute;
    left: -102px;
    top: 9px;
  }

  .frontpagebobble {
    background-color: transparent;
    height: auto;
    width: 100%;
    text-align: left;
    justify-content: inherit;
    position: relative;
    padding: 37px 0;
    margin: 0 0 20px;
  }

  .frontpagebobble svg {
    position: relative;
    top: inherit;
    margin: 0 40px 0 22px;
    height: 60px;
    width: auto;
  }

  .frontpagebobble h2 {
    margin-top: 0;
  }

  .frontpagebobble h2::after {
    left: 220px;
    top: 8px;
    pointer-events: none;
  }

  .frontpagebobble::after {
    width: 100px;
    height: 100px;
    content: "";
    position: absolute;
    z-index: -1;
    background-color: #F0EFEF;
    left: -100px;
    border-radius: 50%;
    top: 0;
  }

  .einfache_seite__body > div:nth-of-type(3) {
    flex-direction: column;
  }

  .schaubild_1_wrapper .slick-track {
    height: 465px;
  }

  .einfache_seite__body > div:nth-of-type(4) {
    padding: 90px 0 530px;
  }

  ul.slick-dots {
    width: 100%;
    text-align: center;
    bottom: -22px;
  }

  ul.slick-dots li {
    margin: 0!important;
    display: inline-block;
  }

  ul.slick-dots li::before {
    display: none!important;
  }

  ul.slick-dots li button {
    color: #434343;
    background-color: #434343;
  }

  ul.slick-dots li.slick-active button {
    color: #FF9900;
    background-color: #FF9900;
  }

  ul.slick-dots li button::before {
    display: none;
  }

  .schaubild_2_wrapper {
    padding-top: 0;
  }

  .betweenpartner {
    margin: 40px 0 30px;
    position: relative;
  }

  .betweenpartner::after {
    width: 270px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #F39719;
    z-index: -2;
  }

  .betweenpartner::before {
    content: "";
    width: 200px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    z-index: -1;
  }
}

@media (max-width: 530px) {
  .front .einfache_seite__body > div:first-of-type {
    width: 100%;
    margin-left: 0;
  }

  .frontpagebobble {
    padding: 37px 0 37px 90px;
  }

  .frontpagebobble h2::after {
    left: inherit;
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 195px;
  }

  .frontpagebobble::after {
    left: -2px;
  }

  .inner-bobble > a.frontpageanchor {
    left: -4px;
  }

  .partner img {
    width: 70%;
  }

  h1 a,
  h1 span {
    padding: 0;
  }

  h1::after {
    display: none;
  }

  .ansprechpartner_zitat::before {
    left: -25px;
  }

  .ansprechpartner_zitat::after {
    right: -25px;
  }
}

@media (max-width: 480px) {
  .schaubild_1_wrapper .slick-track {
    height: 370px;
  }

  .einfache_seite__body > div:nth-of-type(4) {
    padding: 90px 0 460px;
  }

  .schaubild_item::after {
    right: 13px;
    bottom: 20%;
  }
}

@media (max-width: 390px) {

  .front .einfache_seite__body > div:first-of-type {
    margin-bottom: 0;
  }

  .holder_headerimage {
    height: 45vh;
    background-size: 180%;
    background-position: -50vw 0vh;
  }

  .frontpagebobble {
    text-align: center;
    justify-content: center;
    padding: 0 0 23px;
    margin-bottom: 60px;
  }

  .frontpagebobble svg {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 60px;
    height: auto;
  }

  .frontpagebobble h2 {
    width: 100%;
  }

  .frontpagebobble h2::after {
    position: absolute;
    top: 40px;
    margin-left: 0;
    left: calc(50% - 12.5px);
  }

  .frontpagebobble::after {
    display: none;
  }

  .frontpageanchor {
    margin: 0 0 140px 0;
    animation: none;
    opacity: 1;
    margin-top: 0;
  }

  .inner-bobble > a.frontpageanchor {
    position: relative;
    top: inherit;
    left: inherit;
  }

  .frontpageanchor::after {
    content: "";
    width: 80vw;
    height: 1px;
    background-color: #E3E3E3;
    position: absolute;
    z-index: 1;
    left: calc(50% - 40vw);
    top: 140px;
  }

  .frontpageanchor:last-child::after {
    display: none;
  }
}
/* ######################################
                  SLIDER
####################################### */
@media (max-width: 768px) {
  #block-views-block-organisationen-uebersicht .slide__caption .text_vertreter p {
    width: 75%;
  }

  #slick-views-organisationen-uebersicht-slider-ororga-uebers-slider-1-thumbnail-slider .slide img {
    height: 90px;
  }
}

@media (max-width: 680px) {
  #slick-views-organisationen-uebersicht-slider-ororga-uebers-slider-1-thumbnail {
    display: none;
  }
}

/* ######################################
                KONTAKT
####################################### */
@media (max-width: 520px) {
  .section-kontakt form .form-item.form-item-anrede,
  .section-kontakt form .form-item.form-item-vorname,
  .section-kontakt form .form-item.form-item-nachname,
  .section-kontakt form .form-item.form-item-telefon,
  .section-kontakt form .form-item.form-item-e-mail {
    width: 100%;
    margin: 0 0 20px;
  }

  .section-kontakt form .form-item.form-item-terms-of-service #edit-terms-of-service {
    margin: 11px 15px 20px 0;
  }

  .section-kontakt form label {
    hyphens: none;
  }
}

/* ######################################
            INFOBROSCHÜRE
####################################### */
@media (max-width: 991px) {
  .filedownload {
    flex-basis: 18%;
  }
}

@media (max-width: 768px) {
  .filetype_pdf,
  .filetype_doc,
  .filetype_docx,
  .filetype_txt {
    width: 135px;
    height: 135px;
  }
}

@media (max-width: 680px) {
  .filetype_pdf,
  .filetype_doc,
  .filetype_docx,
  .filetype_txt {
    width: 95px;
    height: 105px;
  }

  .filedownload {
    padding-bottom: 7px;
    flex-basis: 23%;
  }
  .filedownload a {
    font-size: 16px;
  }

  .filedownload a::after {
    width: 90%;
    height: 85%;
    left: 5%;
  }

  .block-views-block-download-liste-block-1 .fileitem .filecontent {
    padding: 10px 15px 10px 0;
  }
}

@media (max-width: 530px) {
  .block-views-block-download-liste-block-1 .fileitem {
    flex-wrap: wrap;
  }

  .filedownload {
    flex-basis: 100%;
    height: 85px;
    padding: 10px 0;
  }

  .filedownload a::after {
    width: 70px;
    left: calc(50% - 35px);
  }
}

/* ######################################
                  FAQ
####################################### */
@media (max-width: 480px) {
  .faq-liste .views-field-title h2 {
    padding: 17px 68px 17px 23px;
  }

  .faq-liste .views-field-title h2::after {
    top: calc(50% - 9px);
  }
}

@media (max-width: 420px) {
  .faq-liste .views-field-title h2 {
    padding: 17px 23px 51px;
    text-align: center;
  }

  .faq-liste .views-field-title h2::after {
    top: inherit;
    bottom: 19px;
    left: calc(50% - 15px);
  }
}

/* ######################################
                FOOTER
####################################### */
@media (max-width: 991px) {
  #footer::before {
    width: 330px;
    height: 171px;
    top: -170px;
  }
}

@media (max-width: 680px) {
  #footer::before {
    width: 230px;
    height: 119px;
    top: -118px;
  }
}

@media (max-width: 520px) {
  #footer::before {
    width: 160px;
    height: 83px;
    top: -82px;
    right: 6vw;
  }
}

@media (max-width: 390px) {
  #footer {
    padding: 1% 4%;
  }
}