body {
    overflow-x  : hidden;
    font-family : 'Roboto', sans-serif;
}

p, li, a, h1, h2, h3, h4, h5 {
    color : #191919;
    /*font-family : Helvetica;*/
}

p {
    font-size : 18px;
}

h2 {
    font-size : 38px;
}

.klartxt-logo {
    height : 50px;
    width  : auto;
    margin : 50px 90px 20px 90px;

}

.relative {
    position : relative;
}

button:focus {
    outline : none;
}

#klartxt-office {
    width     : 100%;
    height    : auto;
    max-width : 952px;
    position  : absolute;
    bottom    : 0;
    right     : 20px;
    width     : 50%;
    height    : auto;
}

@media (max-width : 767px) {
    .klartxt-logo {
        margin-left : 0;
    }
}

.header-row {
    position         : relative;
    background-color : #f8fbfd;
}

.header-row .spacer {
    margin : 40px 0;
}

.header-content {
    padding  : 100px;
    z-index  : 20;
    position : relative;
}

.header-content a {
    color : #009cb3;
}

.header-content a:hover {
    color           : #009cb3;
    text-decoration : none;
}

#head-button {
    position : absolute;
    right    : 100px;
    bottom   : 100px;
    display  : none;
}

button#head-button {
    font-size          : 18px;
    background-color   : #009cb3;
    box-shadow         : 0px 10px 24px #ccc;
    color              : white;
    border-radius      : 4px;
    padding            : 15px;
    float              : right;
    border             : none;
    -webkit-transition : box-shadow 0.5s; /* Safari */
    transition         : box-shadow 0.5s;
}

@media (max-width : 991px) {
    button#head-button {

        /* right: 100px; */
        right  : unset;
        bottom : 0;

    }
}

button#head-button:hover {
    box-shadow         : none;
    -webkit-transition : box-shadow 0.5s; /* Safari */
    transition         : box-shadow 0.5s;
}

@media (max-width : 1199px) {
    .header-row .header-content {
        padding-bottom : 100px;
    }

    .header-row #klartxt-office {
        padding-left  : 20px;
        padding-right : 40px;
        width         : 100%;
        max-width     : 800px;
        left          : 0;
        right         : 0;
        margin        : 0 auto;
        height        : 100%;
    }

    #klartxt-office {
        display  : block;
        width    : 100%;
        position : relative;
    }
}

@media (max-width : 991px) {
    /*.header-row .header-content {*/
    /*padding-top    : 0;*/
    /*padding-bottom : 600px;*/
    /*}*/
}

@media (max-width : 767px) {
    .header-row .header-content {
        padding        : 20px;
        padding-top    : 0;
        padding-bottom : 100px;
    }

}

.header-content h1 {
    font-size   : 42px;
    line-height : 54px;
    font-weight : bold;
    color       : #191919;
}

.header-content p {
    font-size   : 20px;
    line-height : 32px;
    font-weight : 400;
}

#wave {
    width    : 101%;
    height   : auto;
    position : absolute;
    z-index  : 10;
    bottom   : -1px;
    left     : -3px;
}

#arrow {
    box-shadow    : 0px 10px 24px #ccc;
    margin        : auto;
    position      : absolute;
    bottom        : 100px;
    border-radius : 25px;
    left          : 0;
    width         : 50px;
    height        : 50px;
    right         : 0;
    z-index       : 50;
    box-shadow    : none;
    cursor        : pointer;
}

.background-blue {
    background-color : #009bb4;
    padding-top      : 30px;
    padding-bottom   : 150px;
    color            : #fff;
    text-align       : center;
}

.background-blue a {
    color           : #fff;
    text-decoration : underline;
}

@media (max-width : 991px) {
    .background-blue {
        padding-bottom : 80px;
    }
}

.stats-row {
    width           : 900px;
    margin          : auto;
    display         : flex;
    justify-content : space-between;
}

.stat-box {
    width         : 30%;
    margin-bottom : 60px;
    margin-top    : 20px;
}

.stat-box-alt {
    width         : 30%;
    margin-bottom : 30px;
    margin-top    : 20px;
}

@media (max-width : 991px) {
    .stat-box-alt {
        width         : 100%;
        margin-bottom : 30px;
        margin-top    : 20px;
    }
}

.stat-box img {
    height : 150px;
    width  : auto;
}

.stat-box h3 {
    padding : 17px 0 12px 0;
}

@media (max-width : 991px) {
    .stats-row {
        width   : 100%;
        display : block;
    }

    .stat-box {
        margin : 0 auto 50px;
        width  : 30%;
        display: inline-block;
    }

    .stat-box img {
        height     : auto;
        max-height : 150px;
        width      : 100%;
    }

}

.background-blue button {
    box-shadow : 0px 10px 24px #006c7d;
}

.background-blue p, .background-blue h2, .background-blue h1, .background-blue h3 {
    color : #fff;
}

.background-blue .spacer {
    background-color : #fff;
    margin           : 40px auto;
}

.spacer {
    width            : 85px;
    height           : 4px;
    display          : block;
    background-color : #191919;
    margin           : 40px auto;
}

button {
    padding            : 10px 20px;
    background-color   : #fff;
    box-shadow         : 0px 10px 24px #525252;
    font-size          : 18px;
    color              : #009bb4;
    border-radius      : 4px;
    border             : none;
    display            : block;
    -webkit-transition : box-shadow 0.5s; /* Safari */
    transition         : box-shadow 0.5s;
    cursor             : pointer;
}

button:hover {
    box-shadow         : none;
    -webkit-transition : box-shadow 0.5s; /* Safari */
    transition         : box-shadow 0.5s;
}

.grey-border {
    border                : none;
    box-shadow            : 0px 1px 3px #232323;
    -webkit-border-radius : 4px;
    -moz-border-radius    : 4px;
    border-radius         : 4px;
    outline               : none;
}

input {
    margin : 20px 0;
}

input[type = text], input[type = number] {
    width            : 100%;
    padding          : 10px 20px;

    background-color : white;

}

.col-participants {
    line-height : 84px;
    text-align  : right;
}

.col-participants label {
    text-align : right;
}

label.check-row {
    float      : left;
    width      : 100%;
    text-align : left;
}

input[type=checkbox] {
    visibility : hidden;
    position   : absolute;
}

input[type=checkbox]:checked ~ span.checkmark {
    background-image : url("/public/img/haken.svg");
}

label {
    position     : relative;
    padding-left : 40px;
}

label p {
    display : inline;

}

span.checkmark {

    height                : 15px;
    width                 : 15px;
    background-size       : contain;
    background-repeat     : no-repeat;
    background-position-y : 2px;
    position              : absolute;
    top                   : 5px;
    left                  : 0;
    background-color      : white;

}

footer .klartxt-logo {
    margin-top : 15px;
}

@media (max-width : 991px) {
    footer .klartxt-logo {
        margin-left : 20px;
    }

    footer nav#footer-nav {
        margin-right : 20px;
    }
}

nav#footer-nav {
    float        : right;
    margin-right : 100px;
    margin-top   : 30px;
}

nav#footer-nav ul {
    padding : 0;

}

nav#footer-nav ul li {
    padding-left : 20px;
    list-style   : none;
    display      : inline-block;
}

#modal-datenschutz button {
    box-shadow : none;
}

.m-b-50px {
    margin-bottom : 50px;
}

.p-center-text {
    text-align : center;
}

.p-text-left {
    text-align : left;
}

label.error {
    color       : #242424;
    font-weight : 500;
}

@media (min-width : 576px) {
    .modal-dialog {
        max-width : 80%;
        margin    : 1.75rem auto;
    }
}