#cv-about {
    color: black;
    text-align: center;
}

#cv-about h2 {
    margin: 75px auto;
    font-size: 3em;
    font-weight: 100;
}

#cv-about h3 {
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 0;
}

#cv-about h4 {
    font-size: 1.0em;
    font-weight: 300;
    margin-top: 0.5em;
}

#cv-about > div {
    width: 15%;
    display: inline-block;
    margin: 0px 5% 125px 5%;
    vertical-align: top;
}

#cv-about .circle {
    margin: 5% auto;
    width: 150px;
    height: 150px;
    border: 3px solid rgb(18, 122, 189);
    border-radius: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#cv-about div .circle:after {
    content: "";
    display: block;
    height: 100%;
    background-size: contain;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
    background-position: 0% 0%;
    background-size: 200%;
}


#cv-about div:hover .circle:after {
    background-position: 100% 0%;
}

#cv-about div:nth-of-type(1) .circle:after {
    background-image: url("img/nils.jpg");
}

/* #cv-about div:nth-of-type(2) .circle:after {
    background-image: url("img/tom.jpg");
}

#cv-about div:nth-of-type(3) .circle:after {
    background-image: url("img/lukas.jpg");
} */

#cv-about div:nth-of-type(2) .circle:after {
    background-image: url("img/you.png");
}


#cv-about .circle img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 100%;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}

/*MobileFriendly*/
@media screen and (max-width: 650px) {
    #cv-about > div {
        width: 50%;
        margin: 0px 5% 75px 5%;
    }
}