comp-team{
    margin: 150px auto 20px auto;
    width: 1500px;
    text-align: center;
    display: block;
}
div.comp-team_wrapper-teammembers {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

div.comp-team_teammember-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    padding-bottom: 60%;
}

p.comp-team_teammember-function {
    font-weight: 500;
    color: #4CB658;
    padding: 10px;
}

p.comp-team_teammember-description {
    padding: 10px;
}

/* employee-cards */

div.comp-team_wrapper-teammember {
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex: 0 0 50%;
    transition: transform ease-in-out 1s;
    transform-style: preserve-3d;
}

div.comp-team_wrapper-teammember.flipped {
    transform: rotateY(180deg);
}

div.comp-team_wrapper-teammember-card button {
    margin-top: 15px;
}

div.comp-team_wrapper-teammember-card {
    transition: all ease-in-out .1s;
    background-color: white;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; 
    width: 100%;
}

div.comp-team_wrapper-teammember-card.card-backface {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;    
    align-items: center;
    position: absolute;
    background: linear-gradient(100deg, #65CC71 0%, #3BAB48 100%);
    color: white;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
}

div.comp-team_wrapper-teammember-card.card-backface h2 {
    color: white;
}




.close-card-button {
    height: 30px;
    width: 15px;
    padding-left: 15px;
    position: relative;
    box-sizing: content-box;
    cursor: pointer;
}
.close-card-button::after {
    content: "";
    height: 30px;
    width: 2px;
    background-color: white;    
    transform: rotate(-45deg); 
    position: absolute;
}
.close-card-button::before {
    content: "";
    height: 30px;
    width: 2px;
    background-color: white;    
    transform: rotate(45deg);
    position: absolute;
}

.icon-row {
    display: flex;
    position: fixed;
    flex-direction: row-reverse;
    margin: 30px;
    right: 0px;
    top: 0px;
    z-index: 100;
}



@media(max-width: 1500px)
{
    comp-team{
        margin: 100px 0px 20px 0px;
        width: 100%;
        text-align: center;
        padding: 0px 80px;
    }
}

@media(max-width: 900px)
{
    div.comp-team_wrapper-teammember {
        flex: 0 0 100%;
    }
}

@media(max-width: 580px)
{
    comp-team{
        margin: 50px 0px;
        width: 100%;
        text-align: center;
        padding: 0px 30px;
    }

    
    div.comp-team_wrapper-teammember {
        padding: 30px 0px;
    }

    div.comp-team_wrapper-teammember-card.card-backface {
        width: 100%;
        height: calc(100% - 60px)
    }

    div.comp-team_teammember-image {
        padding-bottom: 100%;
    }
}