.e5-team-container {
	display: flex;
    min-height: 760px;
    padding-right: 16px;
}

.e5-team-departments-container {
    display: flex;
    flex: 0.3;
    justify-content: end;
    background-color: #C8CDD0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.e5-team-employees-container {
    flex: 0.7;
    margin-left: 125px;
}

.e5-headline {
    display: flex;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
}

.e5-headline-height {
    height: 115px;
}

.e5-underline {
    height: 20px;
    width: 500px;
    border-bottom: 2px solid #0069B4;
    margin-left: auto;
    margin-right: auto;
}

.e5-departments {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-right: -60px;
    margin-top: 115px;
    margin-bottom: 115px;
}

.e5-department {
    display: flex;
    align-items: center;
    height: 60px;
    width: 445px;
    color: #0069B4;
    background-color: #FFFFFF;
    border-radius: 7px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
    z-index: 1;
}

.e5-department-name {
    font-size: 20px;
    font-weight: bold;
}

.e5-team-employees-container {
    max-width: 974px;
}

.e5-employees-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
    margin-bottom: 20px;
}

.e5-employee-card {
    max-width: 465px;
    min-height: 645px;
}

.e5-employee-image {
    display: block;
    width: auto;
    height: auto;
    max-height: 315px;
    border-radius: 10px;
}

.e5-employee-name {
    margin-top: 20px;
    color: #0069B4;
    font-weight: bold;
    font-size: 24px;
}

.e5-employee-role {
    margin-top: 6px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
}

.e5-employee-since {
    margin-top: 24px;
}

.e5-employee-team {
    margin-top: 10px;
}

.e5-employee-cantons {
    margin-top: 10px;
}

.e5-department-active {
    border: 2px solid #0069B4;
    box-shadow: 0px 3px 6px #00000029;
}

.e5-department-button-inactive::after {
    display: block;
    content: '';
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy44LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNSAyNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMwMDY5QjQ7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8ZyBpZD0iRWxsaXBzZV8xMyI+DQoJPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIuNSIgY3k9IjEyLjUiIHI9IjEyLjAzIi8+DQo8L2c+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTguNTIsMTIuNXYwLjAxYzAsMC41NS0wLjQ1LDEuMDEtMS4wMSwxLjAxaC0zLjk5djMuOTljMCwwLjU2LTAuNDUsMS4wMS0xLjAxLDEuMDFzLTEuMDEtMC40NS0xLjAxLTEuMDENCgl2LTMuOTlINy41MWMtMC41NiwwLTEuMDItMC40Ni0xLjAyLTEuMDFWMTIuNWMwLTAuNTUsMC40Ni0xLjAxLDEuMDItMS4wMWgzLjk5VjcuNWMwLTAuNTYsMC40NS0xLjAxLDEuMDEtMS4wMXMxLjAxLDAuNDUsMS4wMSwxLjAxDQoJdjMuOTloMy45OUMxOC4wNywxMS40OSwxOC41MiwxMS45NSwxOC41MiwxMi41eiIvPg0KPC9zdmc+DQo=');
    height: 28px;
    width: 28px;
}

.e5-department-button-active::after {
    display: block;
    content: '';
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy44LjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNSAyNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMwMDY5QjQ7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8ZyBpZD0iRWxsaXBzZV8xM18wMDAwMDA3NTg2ODM5MzE2NTQ1MjkyMDQ3MDAwMDAwMDU5NTk5NDk1MzA4NTk0ODgzMF8iPg0KCTxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyLjUiIGN5PSIxMi41IiByPSIxMiIvPg0KPC9nPg0KPGcgaWQ9IkVsbGlwc2VfMTNfMDAwMDAxNDI4NzIxMzI5MzAzNTcwNjc4MjAwMDAwMTM1NzMzMDcyODAyNjYyMTUzNTVfIj4NCgk8Y2lyY2xlIGNsYXNzPSJzdDEiIGN4PSIxMi41IiBjeT0iMTIuNSIgcj0iMTEiLz4NCjwvZz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjUsMTIuNUw2LjUsMTIuNWMwLTAuNiwwLjQtMSwxLTFoMTBjMC42LDAsMSwwLjQsMSwxbDAsMGMwLDAuNi0wLjUsMS0xLDFoLTEwQzYuOSwxMy41LDYuNSwxMy4xLDYuNSwxMi41eiINCgkvPg0KPC9zdmc+DQo=');
    height: 28px;
    width: 28px;
}

.e5-pointer {
    cursor: pointer;
}

.e5-hide-employee {
    display: none;
}

.e5-employee-contact-container {
    display: flex;
    align-items: center;
}

.e5-employee-contact {
    color: #0069B4;
    cursor: pointer;
    text-transform: none;
}

.e5-employee-conatact-icon {
    height: 16px;
    width: 16px;
    margin-right: 8px
}

.e5-employees-container-mobile {
    display: none;
}

/* RESPONSIVE */
@media screen and (max-width: 400px) {
    .e5-department {
        height: 40px;
        width: 300px;
    }

    .e5-department-button-active::after {
        width: 20px;
        height: 20px;
    }

    .e5-department-button-inactive::after {
        width: 20px;
        height: 20px;
    }

    .e5-employees-container-mobile {
        width: 300px;
    }
    
    .e5-employee-name {
        font-size: 20px;
    }

    .e5-employee-role {
        font-size: 14px;
    }

    .e5-employee-contact {
        font-size: 13px;
    }

    .e5-employee-since {
        font-size: 13px;
    }

    .e5-employee-team {
        font-size: 13px;
    }

    .e5-employee-cantons {
        font-size: 13px;
    }
}

@media screen and (min-width: 400px) and (max-width: 549px) {
    .e5-department {
        height: 50px;
        width: 390px;
    }

    .e5-department-button-active::after {
        width: 22px;
        height: 22px;
    }

    .e5-department-button-inactive::after {
        width: 22px;
        height: 22px;
    }

    .e5-employees-container-mobile {
        width: 390px;
    }
}

@media screen and (max-width: 849px) {
    .e5-hide-mobile {
        display: none !important;
    }

    .e5-team-departments-container {
        flex: 0.85;
    }

    .e5-departments {
        margin-top: 45px;
        margin-bottom: 45px;
        align-items: end;
        gap: 0;
    }

    .e5-department:not(:first-of-type) {
        margin-top: 24px;
    }

    .e5-employees-container-mobile {
        display: block;
        background-color: #FFFFFF;
        margin-top: -4px;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
        padding-left: 16px;
    }

    .e5-hide-employees {
        display: none;
    }

    .e5-employees-container-mobile .e5-employee-card > :last-child {
        padding-bottom: 16px;
    }

    .e5-employee-card {
        min-height: 0;
    }

    .e5-employee-image {
        margin-top: 24px;
    }

    .e5-department-name {
        font-size: 16px;
    }
}

@media screen and (min-width: 549px) and (max-width: 848px) {
    .e5-employees-container-mobile {
        width: 445px;
    }

    .e5-department {
        width: 500px;
    }

    .e5-employees-container-mobile {
        width: 500px;
    }

    .e5-employee-card {
        max-width: 500px;
    }
}

@media screen and (min-width: 400px) and (max-width: 1199px) {
    .e5-employee-name {
        font-size: 22px;
    }

    .e5-employee-role {
        font-size: 16px;
    }

    .e5-employee-contact {
        font-size: 14px;
    }

    .e5-employee-since {
        font-size: 14px;
    }

    .e5-employee-team {
        font-size: 14px;
    }

    .e5-employee-cantons {
        font-size: 14px;
    }
}

@media screen and (min-width: 849px) and (max-width: 1199px) {
    .e5-team-container {
        min-height: 600px;
        padding-right: 8px;
    }
    
    .e5-team-employees-container {
        margin-left: 100px;
    }

    .e5-departments {
        gap: 25px;
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .e5-department {
        width: 300px;
        height: 50px;
    }

    .e5-department-name {
        font-size: 16px;
    }

    .e5-underline {
        width: 400px;
    }

    .e5-headline {
        font-size: 26px;
    }

    .e5-employees-container {
        gap: 30px;
        margin-bottom: 20px;
    }

    .e5-employee-card {
        min-height: 530px;
    }

    .e5-headline-height {
        height: 100px;
    }

    .e5-department-button-inactive::after {
        width: 24px;
        height: 24px;
    }

    .e5-department-button-active::after {
        width: 24px;
        height: 24px;
    }
}

@media screen and (min-width: 849px) {
    .e5-hide-desktop {
        display: none !important;
    }
}