@import url('assets/fonts/Russo_One.ttf');
    html,
    body {
        font-family: 'Russo_One', sans-serif;
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.05rem !important;
    }
    
    .grecaptcha-badge {
        display: none;
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    main {
        flex-grow: 1;
    }
    
    @media (max-width: 576px) {
        h1 {
            font-size: 1.6rem !important;
        }
        h2 {
            font-size: 1.4rem !important;
        }
        h3 {
            font-size: 1.2rem !important;
        }
        .h1 {
            font-size: 1.5rem !important;
        }
    }
    
    li {
        list-style-type: none;
    }
    
    a {
        color: #005689;
    }
    
    a:hover {
        font-weight: bold;
        text-decoration: none;
        color: #ff7f00;
    }
    
    p {
        font-size: 1.1rem;
    }
    
    .markText {
        color: #ff7f00;
    }
    
    #contactButtonIndex:hover {
        font-weight: normal !important;
    }
    
    .checkmark {
        color: green;
        font-weight: bold;
    }
    
    .text-grey {
        color: rgb(161, 161, 161);
    }
    
    .blueText {
        color: #005689;
    }
    
    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto;
        margin-left: auto;
    }
    
    header {
        padding-bottom: 70px;
    }
    
    .emailTOP {
        padding-left: 10px;
    }
    
    .telTOP {
        padding-right: 0px;
        padding-top: 40px;
    }
    
    @media (min-width: 576px) {
        .emailTOP {
            padding-left: 40px;
        }
        .telTOP {
            padding-right: 40px;
            padding-top: 0px;
            font-size: 18px;
        }
    }
    
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
        header {
            padding-bottom: 50px;
        }
    }
    
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    
    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    
    .navbar {
        box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
        z-index: 9999;
        position: absolute;
        width: 100%;
    }
    
    .navbar-custom {
        z-index: 9999;
        position: fixed;
        width: 100%;
        animation-name: fade-in;
        animation-duration: 1s;
    }
    
    .navbar a {
        font-weight: bold;
    }
    
    #indexSite #navindex,
    #aboutSite #navabout,
    #kontaktSite #navkontakt,
    #badewannezuduscheSite #navbarDropdown,
    #badewannentürSite #navbarDropdown,
    #badewanneneinstiegSite #navbarDropdown,
    #sonstigerServiceSite #navbarDropdown,
    #jobsSite #navkarriere {
        color: #005689 !important;
    }
    
    #indexSite header {
        padding-bottom: 0%;
    }
    
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    .content {
        padding: 5% 10%;
        /* text-align: justify */
    }
    
    .btn {
        border: 2px solid;
        border-radius: 3px;
        text-decoration: none;
        display: inline-block;
        padding: 15px 25px;
        font-weight: 600
    }
    
    .twtr {
        margin-top: 100px
    }
    
    .btn.twtr:after {
        content: "\1F426";
        padding-left: 5px
    }
    
    section .container {
        padding: 6% 0%;
    }
    
    footer {
        background: #161d25;
        z-index: 19999;
    }
    
    footer .container-fluid {
        padding: 2% 8%;
        color: white;
    }
    
    footer li {
        list-style-type: none;
    }
    
    footer a {
        color: #d1d1d1;
        text-decoration: none;
    }
    
    footer a:hover {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    /**********************************************************/
    /********* INDEX SITE*********/
    /**********************************************************/
    
    .header {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        height: 50vw;
        min-height: 500px;
        max-height: 700px;
    }
    
    .header .navbar {
        width: 100%;
    }
    
    .header h1 {
        font-size: 2rem;
    }
    
    .header p {
        font-size: 1.5rem;
    }
    
    @media (min-width: 768px) {
        .header h1 {
            font-size: 4rem;
        }
        .header p {
            font-size: 2rem;
        }
        .header .info {
            padding: 15% 10% 0 10%;
        }
    }
    
    .header:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, #005689 150%);
    }
    
    .header:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);
        background: #1B2030 url("../img/header.jpg") center no-repeat;
        background-size: cover;
        background-attachment: fixed;
        animation: grow 60s linear 10ms infinite;
        transition: all 0.2s ease-in-out;
        z-index: -2;
    }
    
    .info {
        width: 100%;
        padding: 30% 10% 0 10%;
        text-align: center;
        position: absolute;
        opacity: 0;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
        animation: fadeZoomIn 3s 10ms;
        animation-delay: .5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        color: #eee;
    }
    
    .meta {
        font-style: italic;
    }
    
    @keyframes grow {
        0% {
            transform: scale(1)
        }
        50% {
            transform: scale(1.2)
        }
    }
    
    @keyframes fadeZoomIn {
        0% {
            transform: scale(1.2);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    .card-image {
        display: block;
        min-height: 20rem;
        background: #fff center center no-repeat;
        background-size: cover;
    }
    
    .card-image>img {
        display: block;
        width: 100%;
        opacity: 1;
    }
    /* Layout Styles */
    
    .card-list {
        display: block;
        margin: 1rem auto;
        padding: 0;
        font-size: 0;
        text-align: center;
        list-style: none;
    }
    
    .card {
        display: inline-block;
        width: 90%;
        max-width: 20rem;
        margin: 1rem;
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
        box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, 0.5);
        transition: transform 0.1s ease-in-out, box-shadow 0.1s;
    }
    
    .card:hover {
        transform: translateY(-0.5rem) scale(1.0125);
        box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
    }
    
    .card-description {
        display: block;
        padding: 1em 0.5em;
        color: #515151;
        text-decoration: none;
    }
    
    .card-description>h2 {
        margin: 0 0 0.5em;
        text-transform: none;
    }
    
    .card-description>p {
        margin: 0;
    }
    
    .card a:hover {
        text-decoration: none;
    }
    
    .pulse {
        background: none;
        border: 2px solid;
        font: inherit;
        line-height: 1;
        margin: 0.5em;
        padding: 1em 2em;
        transition: 0.25s;
    }
    
    .pulse:hover,
    .pulse:focus {
        animation: pulse 1s;
        border-color: #8fc866;
        color: white;
        box-shadow: inset 0 0 0 2em #8fc866;
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 var(--hover);
        }
    }
    /***************** Projekte ************************/
    
    #currentProjectsSectionIndex .container-fluid {
        padding: 0% 10%;
        padding-top: 8% !important;
    }
    
    #currentProjectsSectionIndex .col {
        overflow: hidden;
        position: relative;
        color: #fff;
        flex: 1 1 auto;
        min-height: 500px;
        position: relative;
    }
    
    #currentProjectsSectionIndex .slide {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all 0.275s ease-in-out, visibility 0s 0.275s;
        visibility: hidden;
        will-change: transform;
        transform: translateY(100%);
    }
    
    #currentProjectsSectionIndex .row:hover~.row .slide {
        transform: translateY(-100%);
    }
    
    #currentProjectsSectionIndex .row:hover .slide {
        transform: translateX(100%);
    }
    
    #currentProjectsSectionIndex .row:hover .col:hover~.col .slide {
        transform: translateX(-100%);
    }
    
    #currentProjectsSectionIndex .row:hover .col:hover .slide {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }
    
    #currentProjectsSectionIndex .row {
        display: flex;
    }
    
    #currentProjectsSectionIndex .col h2 {
        font-weight: 300;
        font-size: 1.33333rem;
        line-height: 1.25;
        margin: 0;
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 0;
    }
    
    #currentProjectsSectionIndex .col:nth-child(2) {
        min-width: 20%;
    }
    
    #currentProjectsSectionIndex .col:nth-child(4) {
        min-width: 33%;
    }
    
    #currentProjectsSectionIndex .col:nth-child(3)+.col:nth-child(3) {
        min-width: 50%;
    }
    
    #currentProjectsSectionIndex .photo-container {
        background: #005689 50% 50% / cover;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        /* background: linear-gradient(transparent, rgba(70, 47, 133, 0.5), rgba(26, 36, 129, 0.308)); */
        left: 0;
        transition: 1s;
        transform-origin: bottom right;
    }
    
    #currentProjectsSectionIndex .photo-container::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    #currentProjectsSectionIndex .col:hover .photo-container {
        transform: scale(1.25);
    }
    
    #currentProjectsSectionIndex .slide {
        background: linear-gradient(rgb(3, 169, 244, 0.8), rgba(3, 79, 166, 0.8));
        padding: 0 1.5rem;
    }
    
    #currentProjectsSectionIndex .slide p {
        padding: 10% 10%;
    }
    
    .tales {
        width: 100%;
    }
    
    .carousel-inner {
        width: 100%;
        max-height: 600px !important;
    }
    /***************** Testemonials ************************/
    
    .testimonials {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        grid-gap: 20px;
    }
    
    .testimonials .card {
        position: relative;
        width: 350px;
        margin: 0 auto;
        background: #eee;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
        overflow: hidden;
    }
    
    .testimonials .card .layer {
        position: absolute;
        top: calc(100% - 3px);
        width: 100%;
        height: 100%;
        left: 0;
        background: linear-gradient(#03a9f4, #005689);
        z-index: 1;
        transition: 0.5s;
    }
    
    .testimonials .card:hover .layer {
        top: 0;
    }
    
    .testimonials .card .content {
        position: relative;
        z-index: 2;
    }
    
    .testimonials .card .content p {
        font-size: 18px;
        line-height: 24px;
        color: #333;
    }
    
    .testimonials .card .content .details h2 {
        font-size: 15px;
        color: black;
    }
    
    .testimonials .card .content .details h2 span {
        color: #005689;
        font-size: 12px;
        transition: 0.5s;
    }
    
    .testimonials .card:hover .content .details h2 span {
        color: white;
    }
    
    .testimonials .card:hover .content .details h2 {
        color: white;
        transition: 0.5s;
    }
    
    .testimonials .card:hover .content p {
        color: white;
        transition: 0.5s;
    }
    /**********************************************************/
    /********* KONTAKT - SECTION + KONTAKT - FORMULAR*********/
    /**********************************************************/
    
    #map,
    #contactData {
        height: 475px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    }
    
    #contactData {
        padding: 3% 5%;
        font-size: 1rem;
    }
    
    #contactFormSection {
        background: #eee;
    }
    
    #contactFormSection .container-fluid,
    #contactDataSectionKontaktSite .container-fluid {
        padding-top: 3%;
        padding-bottom: 3%;
        padding-right: 10% !important;
        padding-left: 10% !important;
    }
    
    #dankeSite {
        background: radial-gradient(#005689, #033166);
        color: White;
    }
    
    #dankeSite a {
        color: rgb(195, 195, 195);
    }
    /**********************************************************/
    /********* Jobs - Site *********/
    /**********************************************************/
    
    #jobsSite .header {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        height: 50vw;
        min-height: 500px;
        max-height: 700px;
    }
    
    .modal-backdrop {
        opacity: 0.8 !important;
    }
    
    #jobsSite .info h1 {
        font-size: 3rem;
    }
    
    #jobsSite .info p {
        font-size: 2rem;
    }
    
    #jobsSite .header:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, #005689 120%);
    }
    
    #jobsSite .header:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);
        background: #1B2030 url("../img/jobs/header.jpg") center no-repeat;
        filter: blur(4px);
        background-size: cover;
        background-attachment: fixed;
        animation: grow 60s linear 10ms infinite;
        transition: all 0.2s ease-in-out;
        z-index: -2;
    }
    
    #jobsSite .mitarbeiter-img {
        bottom: 0 !important;
        position: absolute;
        animation: fade-in-from-left 1.5s;
        animation-delay: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    
    #jobsSite .info {
        width: 100%;
        padding: 30% 10% 0 10%;
        text-align: center;
        position: absolute;
        opacity: 0;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
        animation: fadeZoomIn 1.5s;
        animation-delay: .5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        color: #eee;
        z-index: 1;
    }
    
    @media (min-width: 576px) {
        #jobsSite .info h1 {
            font-size: 4rem;
        }
        #jobsSite .info p {
            font-size: 2rem;
        }
        #jobsSite .info {
            padding: 20% 10% 0 10%;
        }
    }
    
    @media (min-width: 768px) {
        #jobsSite .info {
            text-align: right;
        }
        .mitarbeiter-img img {
            width: 55%;
        }
    }
    
    @media (min-width: 992px) {}
    
    @media (min-width: 1200px) {
        #jobsSite .info h1 {
            font-size: 5rem;
        }
        #jobsSite .info p {
            font-size: 3rem;
        }
        .mitarbeiter-img img {
            width: 70%;
        }
    }
    
    #jobSiteButtonTop {
        animation: fade-in 1s 10ms;
        animation-delay: 2s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes fade-in-from-left {
        0% {
            opacity: 0;
            transform: translate(-50px, 0px);
        }
        100% {
            opacity: 1;
            transform: translate(0px, 0px);
        }
    }
    
    #jobsSite {
        background: #eee;
    }
    
    #sucheSectionJobs .container {
        padding: 0%;
    }
    
    .box-part {
        background: #FFF;
        border-radius: 10px;
        padding: 60px 10px;
        margin: 30px 0px;
    }
    
    .text {
        margin: 20px 0px;
    }
    
    .fa {
        color: #4183D7;
    }
    
    #jobsSite #contactFormSection {
        background: #fff;
        border-radius: 10px;
    }
    
    .file-upload {
        display: block;
        text-align: center;
        font-size: 12px;
    }
    
    .file-upload .file-select {
        display: block;
        border: 2px solid #dce4ec;
        color: #34495e;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: left;
        background: #FFFFFF;
        overflow: hidden;
        position: relative;
    }
    
    .file-upload .file-select .file-select-button {
        background: #dce4ec;
        padding: 0 10px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
    }
    
    .file-upload .file-select .file-select-name {
        line-height: 40px;
        display: inline-block;
        padding: 0 10px;
    }
    
    .file-upload .file-select:hover {
        border-color: #34495e;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    
    .file-upload .file-select:hover .file-select-button {
        background: #34495e;
        color: #FFFFFF;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    
    .file-upload.active .file-select {
        border-color: #3fa46a;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    
    .file-upload.active .file-select .file-select-button {
        background: #3fa46a;
        color: #FFFFFF;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    
    .file-upload .file-select input[type=file] {
        z-index: 100;
        cursor: pointer;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    
    .file-upload .file-select.file-select-disabled {
        opacity: 0.65;
    }
    
    .file-upload .file-select.file-select-disabled:hover {
        cursor: default;
        display: block;
        border: 2px solid #dce4ec;
        color: #34495e;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        margin-top: 5px;
        text-align: left;
        background: #FFFFFF;
        overflow: hidden;
        position: relative;
    }
    
    .file-upload .file-select.file-select-disabled:hover .file-select-button {
        background: #dce4ec;
        color: #666666;
        padding: 0 10px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
    }
    
    .file-upload .file-select.file-select-disabled:hover .file-select-name {
        line-height: 40px;
        display: inline-block;
        padding: 0 10px;
    }
    /**********************************************************/
    /********* Erstberatung - Site *********/
    /**********************************************************/
    
    #beratungSite h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: uppercase;
    }
    
    .videocontent.vjs-hd {
        padding-top: 50%;
    }
    
    .videocontent.vjs-sd {
        padding-top: 75%;
    }
    
    .videocontent {
        width: 100%;
        position: relative;
    }
    
    .videocontent .video-js {
        height: 100% !important;
        width: 100% !important;
        max-height: 427px !important;
        max-width: 712px !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #headerErstbeartungSite {
        padding-bottom: 10%;
        padding-top: 7%;
        background-image: url("../img/erstberatung/bgHeaderBeratung.jpg");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        height: 10%;
    }
    
    #cta1BeartungSite ul,
    #headerErstbeartungSite ul {
        padding-left: 0%;
    }
    
    .ctaButtonBeratungContainer {
        text-align: center;
        padding-right: 0%;
    }
    
    .ctaButtonBeratung {
        box-shadow: inset 0px 1px 0px 0px #fff6af;
        background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
        background-color: #ffec64;
        border-radius: 6px;
        border: 1px solid #ffaa22;
        display: inline-block;
        cursor: pointer;
        color: #333333;
        font-size: 12pt;
        font-weight: bold;
        padding: 6px 10px;
        text-decoration: none;
        text-shadow: 0px 1px 0px #ffee66;
        text-transform: uppercase;
    }
    
    .ctaButtonBeratung:hover {
        background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
        background-color: #ffab23;
        color: black;
        font-size: 14pt;
        transition: .25s ease-in-out;
    }
    
    #cta1BeartungSite li {
        line-height: 1.5em;
        font-size: 14pt;
        height: auto;
    }
    
    @media (min-width: 300px) {
        #headerErstbeartungSite {
            height: 10%;
        }
    }
    
    @media (min-width: 480px) {
        #headerErstbeartungSite {
            height: 12%;
        }
    }
    
    @media (min-width: 576px) {
        #headerErstbeartungSite {
            height: 12%;
        }
        .ctaButtonBeratung {
            font-size: 20px;
        }
        .ctaButtonBeratung:hover {
            font-size: 21px;
        }
        #cta1BeartungSite li {
            font-size: 22pt;
        }
    }
    
    @media (min-width: 768px) {
        #headerErstbeartungSite {
            height: 14%;
        }
        .ctaButtonBeratungContainer {
            text-align: right;
            padding-right: 5%;
        }
    }
    
    @media (min-width: 992px) {
        #headerErstbeartungSite {
            height: 16%;
        }
        #cta1BeartungSite ul,
        #headerErstbeartungSite ul {
            padding-left: 5%;
        }
    }
    
    @media (min-width: 1200px) {
        #headerErstbeartungSite {
            height: 11%;
        }
    }
    
    #aboutSectionBeratungSite .container {
        padding-top: 0;
    }
    
    #cta1BeartungSite {
        background-image: url("../img/erstberatung/cta1bg.jpg");
        min-height: 480px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    #cta1BeartungSite h2 {
        text-transform: uppercase;
    }
    
    .firstcta {
        padding-top: 30px;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid {
        position: relative;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid:after {
        clear: both;
        content: '';
        display: block;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature {
        display: inline-block;
        margin-bottom: 3em;
        /* width: 50%; */
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature .content {
        width: 60%;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature .content h4,
    .name {
        text-transform: uppercase;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature .image {
        width: 30%;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature .image img {
        display: inline;
        max-width: 100%;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(odd) .content,
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(odd) .image {
        float: right;
        /* margin-right: 5%; */
        text-align: right;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(even) .content,
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(even) .image {
        float: left;
        /* margin-left: 5%; */
        text-align: left;
    }
    
    @media screen and (max-width: 1280px) {
        #testimonialsSectionErstberatungSite .feature-grid .feature {
            margin-bottom: 2em;
        }
    }
    
    @media screen and (max-width: 980px) {
        #testimonialsSectionErstberatungSite .feature-grid .feature {
            display: block;
            width: 100%;
        }
        #testimonialsSectionErstberatungSite .feature-grid .feature .content {
            width: 65%;
        }
        #testimonialsSectionErstberatungSite .feature-grid .feature .image {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    
    @media screen and (max-width: 736px) {
        #testimonialsSectionErstberatungSite .feature-grid .feature {
            margin-bottom: 1em;
        }
    }
    
    @media screen and (max-width: 480px) {
        #testimonialsSectionErstberatungSite .feature-grid .feature .content,
        #testimonialsSectionErstberatungSite .feature-grid .feature .image {
            display: block;
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: center !important;
            width: 100%;
        }
        #testimonialsSectionErstberatungSite .feature-grid .feature .image {
            margin-bottom: 1em;
        }
    }
    
    #testimonialsSectionErstberatungSite .image.rounded {
        border-radius: 100%;
    }
    /* .image.rounded img {
        border: solid 0.5em #ff7f00;
        border-radius: 100%;
    } */
    
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(odd) .rounded img {
        border: solid 0.5em rgb(255, 127, 0, .8);
        border-radius: 100%;
    }
    
    #testimonialsSectionErstberatungSite .feature-grid .feature:nth-child(even) .rounded img {
        border: solid 0.5em rgb(0, 68, 255, .8);
        border-radius: 100%;
    }
    
    #testimonialsSectionErstberatungSite .image {
        border-radius: 4px;
        border: 0;
        display: inline-block;
        position: relative;
    }
    
    #testimonialsSectionErstberatungSite .image img {
        border-radius: 4px;
        display: block;
    }
    
    #testimonialsSectionErstberatungSite .headerTestimonials {
        text-transform: uppercase;
    }
    
    #cta2BeartungSite .container-fluid {
        background: #005689;
        padding: 5% 0%;
    }
    
    #sucheSectionBeratungSite .container {
        padding-bottom: 10%;
    }
    
    #sucheSectionBeratungSite .box-part {
        background: #f4f4f4;
        border-radius: 10px;
        border-style: dashed;
        border-color: #ccc;
        padding: 60px 10px;
        margin: 30px 0px;
    }
    
    #sucheSectionBeratungSite .text {
        margin: 20px 0px;
    }
    
    @media (min-width: 1000px) {
        #timeline .demo-card:nth-child(odd) .head::after,
        #timeline .demo-card:nth-child(even) .head::after {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }
        #timeline .demo-card:nth-child(odd) .head::before,
        #timeline .demo-card:nth-child(even) .head::before {
            position: absolute;
            content: "";
            width: 9px;
            height: 9px;
            background-color: #bdbdbd;
            border-radius: 9px;
            box-shadow: 0px 0px 2px 8px #f7f7f7;
        }
    }
    
    .demo-card:nth-child(1) {
        order: 1;
    }
    
    .demo-card:nth-child(2) {
        order: 4;
    }
    
    .demo-card:nth-child(3) {
        order: 2;
    }
    
    .demo-card:nth-child(4) {
        order: 5;
    }
    
    .demo-card:nth-child(5) {
        order: 3;
    }
    
    .demo-card:nth-child(6) {
        order: 6;
    }
    
    #timeline {
        padding: 100px 0;
        background: #f7f7f7;
        border-top: 1px solid rgba(191, 191, 191, 0.4);
        border-bottom: 1px solid rgba(191, 191, 191, 0.4);
    }
    
    #timeline h1 {
        text-align: center;
        font-size: 3rem;
        font-weight: 200;
        margin-bottom: 20px;
    }
    
    #timeline p.leader {
        text-align: center;
        max-width: 90%;
        margin: auto;
        margin-bottom: 45px;
    }
    
    #timeline .demo-card-wrapper {
        position: relative;
        margin: auto;
    }
    
    @media (min-width: 1000px) {
        #timeline .demo-card-wrapper {
            display: flex;
            flex-flow: column wrap;
            width: 1170px;
            height: 1250px;
            margin: 0 auto;
        }
        #badewannentürSite #timeline .demo-card-wrapper {
            display: flex;
            flex-flow: column wrap;
            width: 1170px;
            height: 1500px;
            margin: 0 auto;
        }
    }
    
    #timeline .demo-card-wrapper::after {
        z-index: 1;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        border-left: 1px solid rgba(191, 191, 191, 0.4);
    }
    
    @media (min-width: 1000px) {
        #timeline .demo-card-wrapper::after {
            border-left: 1px solid #bdbdbd;
        }
    }
    
    #timeline .demo-card {
        position: relative;
        display: block;
        margin: 10px auto 80px;
        max-width: 94%;
        z-index: 2;
    }
    
    @media (min-width: 480px) {
        #timeline .demo-card {
            max-width: 60%;
            box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
        }
    }
    
    @media (min-width: 720px) {
        #timeline .demo-card {
            max-width: 40%;
        }
    }
    
    @media (min-width: 1000px) {
        #timeline .demo-card {
            max-width: 450px;
            height: 400px;
            margin: 90px;
            margin-top: 45px;
            margin-bottom: 45px;
        }
        #timeline .demo-card:nth-child(odd) {
            margin-right: 45px;
        }
        #timeline .demo-card:nth-child(odd) .head::after {
            border-left-width: 15px;
            border-left-style: solid;
            left: 100%;
        }
        #timeline .demo-card:nth-child(odd) .head::before {
            left: 491.5px;
        }
        #timeline .demo-card:nth-child(even) {
            margin-left: 45px;
        }
        #timeline .demo-card:nth-child(even) .head::after {
            border-right-width: 15px;
            border-right-style: solid;
            right: 100%;
        }
        #timeline .demo-card:nth-child(even) .head::before {
            right: 489.5px;
        }
        #timeline .demo-card:nth-child(2) {
            margin-top: 180px;
        }
    }
    
    #timeline .demo-card .head {
        position: relative;
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: 400;
    }
    
    #timeline .demo-card .head .number-box {
        display: inline;
        /* float: left; */
        margin: 15px;
        padding: 10px;
        font-size: 35px;
        line-height: 35px;
        font-weight: 600;
        background: rgba(0, 0, 0, 0.17);
    }
    
    #timeline .demo-card .head h2 {
        text-transform: uppercase;
        font-size: 1.3rem;
        font-weight: inherit;
        letter-spacing: 2px;
        margin: 0;
        padding-bottom: 6px;
        line-height: 1rem;
    }
    
    @media (min-width: 480px) {
        #timeline .demo-card .head h2 {
            font-size: 165%;
            line-height: 1.2rem;
        }
    }
    
    #timeline .demo-card .head h2 span {
        display: block;
        font-size: 0.6rem;
        margin: 0;
    }
    
    @media (min-width: 480px) {
        #timeline .demo-card .head h2 span {
            font-size: 0.8rem;
        }
    }
    
    #timeline .demo-card .body {
        background: #fff;
        border: 1px solid rgba(191, 191, 191, 0.4);
        border-top: 0;
        padding: 15px;
    }
    
    @media (min-width: 1000px) {
        #timeline .demo-card .body {
            height: 315px;
        }
    }
    
    #timeline .demo-card .body p {
        /*  font-size: 14px;*/
        line-height: 18px;
        margin-bottom: 15px;
    }
    
    #timeline .demo-card .body img {
        display: block;
        width: 100%;
    }
    
    #timeline .demo-card--step1 {
        background-color: #005689;
    }
    
    #timeline .demo-card--step1 .head::after {
        border-color: #005689;
    }
    
    #timeline .demo-card--step2 {
        background-color: #ff7f00;
    }
    
    #timeline .demo-card--step2 .head::after {
        border-color: #ff7f00;
    }
    
    #timeline .demo-card--step3 {
        background-color: #005689;
    }
    
    #timeline .demo-card--step3 .head::after {
        border-color: #005689;
    }
    
    #timeline .demo-card--step4 {
        background-color: #ff7f00;
    }
    
    #timeline .demo-card--step4 .head::after {
        border-color: #ff7f00;
    }
    
    #badewannezuduscheSite #timeline .demo-card--step5 {
        opacity: 0;
        height: 0 !important;
    }
    
    .quote-card {
        background: rgb(243, 243, 243);
        color: #222222;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);
        position: relative;
        overflow: hidden;
        min-height: 120px;
        width: 75%;
    }
    
    .quote-card p {
        /* font-size: 22px; */
        line-height: 1.5;
        margin: 0;
        max-width: 80%;
    }
    
    .quote-card cite {
        font-size: 16px;
        margin-top: 10px;
        display: block;
        font-weight: 200;
        opacity: 0.8;
    }
    
    .quote-card:after {
        font-family: Georgia, serif;
        content: "”";
        position: absolute;
        bottom: -110px;
        line-height: 100px;
        right: -32px;
        font-size: 25em;
        color: rgba(202, 202, 202, 0.8);
        font-weight: normal;
    }
    
    #beratungSection {
        background-image: url("../img/beratung-BG.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    #beratungSection .container {
        padding: 5% 0%;
    }
    
    @-webkit-keyframes pulsate-bck {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        50% {
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @keyframes pulsate-bck {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        50% {
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    
    #mapSectionHaushaltshilfe#map {
        height: 475px;
    }
    
    #haushaltshilfeSite #descriptionTextHaushaltshilfe .container {
        padding-top: 5%;
        padding-bottom: 0%;
    }