body {background: #fff;}
#wrapper {width: 100%; }
#wrapper, #wrapper .hbox {margin: 0;}
.margintop0 {margin-top: 0;}
.startpage-header-grid {
    background-color: rgba(255, 255, 255, 0.6);
    /*position: absolute;*/
    width: 100%;
    /*top: -7%;*/
    padding: 40px 0;
}

.container-maxwidth {max-width: 1280px;}
.margin-centered {margin: 0 auto;}

.startpage-top, .startpage-bottom {
    max-width: 1140px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}
.startpage-top h1 { font-size: 24px; }
.startpage-top h2 { font-size: 42px; margin-bottom: 15px;}
.startpage-top h3 { margin: 0 0 30px 0; font-size: 15px; line-height: 1.5;}
.startpage-bottom { margin: 160px auto 60px auto; line-height: 1.5;}
.startpage-bottom p {font-size: 24px !important;}
.startpage-top #home-typewrite .Typewriter__cursor {color:#686868; font-size: 40px; border-right: 2px solid black;}

.startpage-boxes {
    display: grid;
    grid-template-columns: 350px 350px 350px;
    margin: 50px 0 100px 0;
    column-gap: 50px;
    row-gap: 50px;
}
    .startpage-boxes-headers {
        display: grid;
        grid-template-columns: 350px 350px 350px;
        column-gap: 50px;
        row-gap: 50px;
    }

.startpage-boxes .cell {
    padding: 10px 10px 20px 10px;
    box-shadow: 5px 10px 18px #e1e1e1;
    color: #686868;
    min-height: 230px;
    text-align: center;
}
    .startpage-boxes .cell h4 {font-size: 14px; font-weight: bold;}
    .startpage-boxes .cell p {font-size: 12px !important;}

.startpage-2colstext {padding: 0 10px; margin: 60px auto 100px auto; }
.startpage-2colstext .text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
    .startpage-2colstext .text div {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding-right: 20px;
    }

.startpage-appstore .appstore-box1 {padding-bottom: 48px; font-size: 20px; margin-left: 50%;}
.startpage-appstore .appstore-box2 { height: 250px; color: white; display: flex; flex-wrap: wrap; padding: 0 50px;}
.startpage-appstore .appstore-box2 h3 {font-size: 30px; margin-bottom: 0;}
.startpage-appstore .appstore-box3 {clear: both; text-align: center; padding: 5px 0;}
.startpage-appstore__img {max-width: 1000px; position: relative; top: -127px; flex: 60; padding: 0 40px 0 0;}
.startpage-appstore .right-side {flex: 40;}
.startpage-appstore .right-side .storeIcons img {width: 200px;}
.startpage-appstore .right-side h4 {margin-bottom: 18px;}

.startpage-home2ColsTextProccessBar .cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 40px);
}
.startpage-home2ColsTextProccessBar .cols  div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
    .startpage-home2ColsTextProccessBar h4 {margin: 100px 0 30px 0;}
    .startpage-home2ColsTextProccessBar h6 {margin: 10px 0 4px 0;}
    .startpage-home2ColsTextProccessBar .proccessbar {background: #f2f2f2; border: 0; width: 500px; height: 10px;}
    .startpage-home2ColsTextProccessBar .proccessbar::-webkit-progress-value, 
    .startpage-home2ColsTextProccessBar .proccessbar::-moz-progress-bar {
        background-color: #44b444;
    }

    progress::-webkit-progress-bar {
        background-color: #f2f2f2;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        -webkit-user-modify: read-only !important;
    }
    .startpage-home2ColsTextProccessBar .sourcedata {margin-top: 50px;}

.startpage-mitglied {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    column-gap: 50px;
    row-gap: 50px;
    justify-content: center;
    margin: 40px 20px 60px 20px;
}
    .startpage-mitglied .cell {height: 250px; position: relative;}
    .startpage-mitglied-headers {
        display: grid;
        column-gap: 50px;
        row-gap: 50px;
    }

    .startpage-mitglied p { 
        opacity: 0; 
        transform: scale(0); 
        transition: all 0.4s ease-in-out;  
        position: absolute; top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 210px;
        padding: 20px;
        line-height: 1.6;
        text-align: center;
    }
    .startpage-mitglied .icon-img { height: 150px; display: flex; justify-content: center; align-items: center;}

    .startpage-mitglied .cell:hover p{
        transform: scale(1);
        opacity: 1;
        transition: all 0.4s ease-in-out;
        transform: scale(1);
    }
    .startpage-mitglied .bg-color-green p {background: rgba(161, 217, 161, 0.9); color: #000;}
    .startpage-mitglied .bg-color-darkgrey p {background: rgba(242, 242, 242, 0.9);}
    .startpage-mitglied .bg-color-darkgreen p {background: rgba(138, 156, 145, 0.9);}

    .startpage-join_md a {
        background: #44b444;
        color: #fff;
        padding: 20px 80px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 18px;
        border: 1px solid #44b444;
        background: linear-gradient(to left, #fff 50%, #44b444 50%) left;
        background-size: 200%;
        transition: .5s ease-out;
    }

    .startpage-join_md a:hover {
        color: #44b444;
        background-position: right;
    }

@media only all and (max-width: 1480px) { 
    /*.startpage-header-grid { top: -9%; } */
}

@media only all and (max-width: 1280px) { 
    .startpage-2colstext {padding: 0 10px; margin: 60px 20px 100px 20px; }
    .startpage-mitglied-headers, .startpage-home2ColsTextProccessBar .cols, .startpage-boxes-headers {margin:0 20px;}
    .startpage-boxes .cell { padding: 10px 10px 20px 20px; }
    .startpage-2colstext {padding: 0;}
}

.tx-rfsearch { background: #44b444; padding: 12px 0;}
@media only all and (max-width: 1279px) { 
    .startpage-header-grid { position: relative; top:auto; }
    /*.tx-rfsearch { background: #44b444; padding: 30px 0;}*/
    .startpage-top .startpage-top-text-down {display:block !important;}
    .startpage-appstore .right-side .storeIcons img { width: 165px; }
    .startpage-boxes, .startpage-boxes-headers { grid-template-columns: 300px 300px 300px; }
    .startpage-boxes {margin-left: 20px;}
}

@media only all and (max-width: 1024px) { 
    #container { margin-bottom: 0 !important; } 
    #wrapper { margin: 0; }
    .startpage-top h1 { margin-top: 0; }
    .startpage-2colstext .text {flex-direction: column;}
    .startpage-2colstext .text div { margin-bottom: 16px; }
    .startpage-appstore__img, .startpage-appstore .right-side { flex: auto; }
    .startpage-appstore .appstore-box2 { height: auto; padding: 0 0 20px 0; }
    .startpage-appstore__img {top: -130px; margin-bottom: -130px; padding: 0;}
    .startpage-appstore .appstore-box1 { padding-bottom: 0; text-align: center; margin-left: 0; margin-bottom: 150px;}
    .startpage-appstore {padding: 0;}
    .startpage-appstore .right-side { text-align: center;  }
    .startpage-2colstext .text div { padding-right: 0; }
    .startpage-2colstext .text div:first-child { padding-right: 0; margin-bottom: 40px; }
    .startpage-boxes-headers, .startpage-mitglied-headers { grid-template-columns: auto; }
    .startpage-boxes, .startpage-mitglied { grid-template-columns: 48% 48%; } 
    .startpage-boxes {margin: 50px 20px 100px 20px;}
    .startpage-boxes .cell { margin-right: 20px;}

    .startpage-home2ColsTextProccessBar .cols { flex-direction: column; }
    .startpage-home2ColsTextProccessBar .proccessbar { width: 100%; }
    .startpage-home2ColsTextProccessBar .cols .padding-r-100 { padding-right: 0; }
    .startpage-home2ColsTextProccessBar h4 { margin: 50px 0 30px 0; }
    .startpage-home2ColsTextProccessBar .sourcedata { margin-top: 25px;  }
    .startpage-bottom { margin: 160px 20px 60px 20px; width: auto; }
}

@media only all and (max-width: 768px) {
    .startpage-boxes, .startpage-mitglied {
        grid-template-rows: auto;
        grid-template-columns: 100%;
    }
    .startpage-top #home-typewrite .Typewriter__cursor {font-size: 30px;}
    .startpage-boxes .cell {padding: 20px 0; margin: 0 20px;}
    .startpage-boxes { margin: 50px 0 100px 0; }
}

@media only all and (max-width: 600px) {
    #wrapper { width: 100%;  }
    .startpage-boxes .cell {  min-height: auto; }
}

@media only all and (max-width: 550px) { 
    .tx-rfsearch .searchtxt {float: none; display: block; margin: 0 auto; margin-bottom: 20px; width: 230px;}
    .selectsearchtxt { display: block; margin: 0 auto; max-width: 272px; padding-left: 7px;}
    .startpage-top h2 { font-size: 30px; }
    .startpage-appstore .appstore-box1 { font-size: 18px; }
    .startpage-appstore__img { top: -90px; margin-bottom: -90px;  }
    .startpage-appstore .appstore-box1 { margin-bottom: 120px; }
}

@media only all and (max-width: 380px) {
    .startpage-appstore .space3 {display: none;}
    .startpage-appstore .storeIcons {width: 250px; margin: 0 auto;}
}

@media only all and (max-width: 349px) {
    .tx-rfsearch .searchtxt { width: 215px; }
    h1, h2, h3, h4, h5, h6 {line-break: anywhere;}
    .startpage-join_md a { padding: 20px 40px; }
    .startpage-appstore .appstore-box1, .startpage-appstore .appstore-box3 h5, .startpage-fullwidthbar div { padding: 0 15px; }
}