html {
    width:100%;
    min-height:100%;
    background:#fafafa;
    font-size:14px;
}
body {
    font-family:sans-serif;
    width:100%;
    min-height:100%;
}
html,
body {
    margin:0;
    padding:0;
}
a.box img { border:none; }

/*
 *
 *  WELCOME PAGE
 *
 */

#welcome {
    margin:150px auto 0 auto;
    height:500px;
}
#welcome #title {
    font-variant:small-caps;
    text-align:center;
    padding:0 40px;
    color:#777;
    max-width:700px;
    margin:0 auto 40px auto;
}
#welcome #title > div:nth-child(1) { font-size:45px; margin-bottom:10px; border-bottom:1px solid #aaa;}
#welcome #title > div:nth-child(2) { font-size:30px; }

#welcome #text { text-align:center; padding:40px 0 100px 0; color:#777; font-size:16px; line-height: 28px; }
#auswahl {
    text-align:center;
}

#auswahl .box { 
    position:relative; 
    display:inline-block; 
    vertical-align:top; 
    text-decoration:none; 
    width:50%;
    height:200px;
    z-index:1;
}
#auswahl .box:nth-child(1) { background:#C9D28F; }
#auswahl .box:nth-child(2) { background:#988EBD; }

#auswahl .box:nth-child(1):after { 
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(to right, #F6FFBB 0%, #C9D28F 70%);
    opacity:0;
    z-index:2;
    -webkit-transition:opacity 0.4s ease;
    transition:opacity 0.4s ease;
}
#auswahl .box:nth-child(2):after { 
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(to left,  #E1DDF0 0%, #988EBD 70%); 
    opacity:0;
    z-index:2;
    -webkit-transition:opacity 0.4s ease;
    transition:opacity 0.4s ease;
}
#auswahl .box:hover:after {
    opacity:1;
}
#auswahl .box > div {
    z-index:3;
    position:relative;
}
#auswahl .box:nth-child(1) > div { 
    float:right;
}
#auswahl .box:nth-child(2) > div { 
    float:left; 
}

#auswahl .logo {
    width:200px;
    height:200px;
    background-repeat:no-repeat;
    background-position:center;
}
#auswahl .logo > div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    margin: 40px auto;
}
#auswahl .logo img { border-radius:50%; padding:5px; }
#auswahl .box > div:nth-child(2) {
    color:#fff;
    padding:74px 0 0 0;
    font-size:17px;
}
#auswahl .box > div:nth-child(2) > div:nth-child(1) { 
    font-size:18px;
    margin-bottom:10px;
}
#auswahl .box > div:nth-child(2) > div:nth-child(2) { }

@media screen and (max-width: 999px) {
    #welcome { margin: 40px auto 0 auto; }
    #auswahl .logo { height:auto; }
    #auswahl .box { height:auto; }
    #auswahl .box:nth-child(2) > div,
    #auswahl .box:nth-child(1) > div {
        float:none;
        display:block;
        margin:0 auto;
    }
    #auswahl .box > div:nth-child(2) {
        padding:0 10px 40px 10px;
    }
}
@media screen and (max-width: 599px) {
    #welcome #title { padding:0 10px; }
    #welcome #title > div:nth-child(1) { font-size:40px; }
    #welcome #title > div:nth-child(2) { font-size:26px; }
    #auswahl .logo { width:auto; }
    #auswahl .logo > div {
        width:100px;
        height:100px;
    }
    #auswahl .logo img {
        width:90px;
        height:90px;
    }
}
@media screen and (max-width: 499px) {
    #auswahl .box { min-height:300px; }
}
@media screen and (max-width: 399px) {
    #welcome #title > div:nth-child(1) { font-size:32px; }
    #welcome #title > div:nth-child(2) { font-size:20px; }
    #auswahl .box > div:nth-child(2) > div:nth-child(1) { font-size:16px; }
    #auswahl .box > div:nth-child(2) > div:nth-child(2) { font-size:14px; }
}