@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/opensans/OpenSans-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/opensans/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansExtraBold';
    src: url('../fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('../fonts/opensanscondensed/OpenSansCondensed-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansCondensedBold';
    src: url('../fonts/opensanscondensed/OpenSansCondensed-Bold.ttf') format('truetype');
}

html, body{
    background: #fff;
    font-family: OpenSans;
}

header{
    background: #ffa512;
}

header nav a{
    color: #fff;
    font-family: OpenSansBold;
}

header nav a:hover,
header nav a:active{
    color: #05728d;
}

.cta{
    background: #FFA512;
    position: absolute;
    bottom: 40px;
    right: 50px;
    border-radius: 0;
    box-shadow: 3px 3px 6px #0004;
}
.cta:hover,
.cta:active,
.cta:focus{
    background: #F8CF8E;
}

.navbar-brand{
    font-family: OpenSansBold;
    line-height: 1;
    text-transform: uppercase;
}
.navbar-brand .firstname{
    color: #05728d;
}
.navbar-brand .lastname{
    color: #05728d;
}

.carousel{
    overflow: hidden;
}

.row{
    margin-bottom: 30px;
}

main{
    margin: 0 0 30px 0;
    color: #222;
}

a{
    color: #05728d;
}

a:hover,
a:focus,
a:active{
    color: #ffa512;
    text-decoration: none;
}

.blue-area{
    background: #05728d;
}

.title-special{
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
    padding: 15px;
    
    background: #ffa512;
    
    font-family: OpenSansCondensedBold;
    text-align: center;
    text-shadow: 1px 1px 3px #0004;
    color: #fff;
}

.box-special{
    padding: 20px;
    background: #fff;
    box-shadow: 3px 3px 6px #0005;
    color: #000;
}

.box-special ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.box-special li{
    padding: 10px 0;
    border-top: 1px solid #ccc;
    font-size: 14px;
}

.box-special li:first-of-type{
    border-top: none;
    padding: 0 0 10px 0;
}
.box-special li:last-of-type{
    padding: 10px 0 0 0;
}

h1{
    color: #05728d;
    font-family: 'OpenSansCondensedBold';
}

.blue-area h1{
    color: #ffa512;
    font-family: 'OpenSansCondensedBold';
}

ul{
    padding-left: 15px;
}

.text-2-col{
    text-align: justify;
    column-count: 2;
    column-gap: 30px;
}

.icon-large{
    margin-bottom: 20px;
    text-align: center;
}

.icon-large i{
    color: #04728d;
    font-size: 60px;
}

.scale{
    margin-bottom: 20px;
}
.scale .prozent{
    margin-bottom: 20px;
}

.scale .bar{
    display: block;
    margin: 5px 0;
    border-radius: 5px;
    background: #05728d;
}

.scale .filler{
    display: block;
    height: 10px;
    border-radius: 5px 0 0 5px;
    background: #ffa512;
}

footer{
    padding: 50px 0;
    margin-top: 50px;
    
    box-shadow: 0 -3px 6px #0007;
    background: #05728d;
    color: #fff;
}
footer a{
    color: #ffa512;
}
footer a:hover,
footer a:active,
footer a:focus{
    color: #fff;
    text-decoration: none;
}

form{
    background: #05728d;
    padding: 30px;
}

form label{
    color: #fff;
}

form .form-control{
    border-radius: 0;
    border: 2px solid #fff;
    background: #05728d;
    color: #fff;
}

form .form-control:hover,
form .form-control:active,
form .form-control:focus{
    border: 2px solid #ffa512;
    background: #05728d;
    color: #fff;
}
form .btn.btn-default{
    background: #FFA512;
    border-radius: 0;
    box-shadow: 3px 3px 6px #0004;
}
form .btn.btn-default:hover,
form .btn.btn-default:active,
form .btn.btn-default:focus{
    background: #F8CF8E;
    color: #212529;
}

@media (max-width: 768px) {
    .text-2-col{
        column-count: 1 !important;
    }
    footer .right-footer a{
        display: block;
        width: 100%;
        padding: 15px 0;
        
        background: #ffa512;
        text-align: center;
        color: #fff;
    }
    footer .right-footer a:hover{
        background: #F8CF8E;
    }
}