@import url("../../../global/css/main.css");

section { overflow: hidden;}

.section1 {
    position: relative;
    width: 100%;
    height: 50%;
}

.headline {
    position: relative;
    top: 8rem;
    text-align: center;
    font-size: 3rem;
    color: var(--primary);
}

.section1 ul {
    position: relative;
    top: -5rem;
    left: 2.5%;
    width: 100%;
    height: 42rem;
}

.section1 ul .team-member {
    position: relative;
    top: 15rem;
    float: left;
    width: 15%;
    margin: 2%;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: center;
    overflow: hidden;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    color: var(--text-grey);
}

.section1 ul .team-member:hover{
    cursor: pointer;
    top: 13rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--primary);
}

.section1 ul .team-member img {
    position: relative;
    top: -1rem;
    width: 100%;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.section1 ul .team-member:hover img {
    height: 110%;
}

.section1 ul .team-member span {
    position: relative;
    top: -.6rem;
    font-size: 1.5rem;
    font-weight: 400;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.section1 .team-info {
    position: absolute;
    top: 2rem;
    left: 2%;
    width: 5%;
    height: 2rem;
    border-radius: 10px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
    display: block;
    animation: .5s openTeamInfo forwards;
    -webkit-animation: .5s openTeamInfo forwards;
    display: none;
}

@keyframes openTeamInfo {
    100% {
        top: 13rem;
        left: 20%;
        width: 60%;
        height: 30rem;
    }
}

@keyframes closeTeamInfo {
    100% {
        top: 2rem;
        left: 2%;
        width: 5%;
        height: 2rem;
    }
}

.section1 .team-info .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
    padding: .5rem;
    color: var(--text-grey);
    z-index: 15;
}

.section1 .team-info .close-btn:hover {
    cursor: pointer;
    color: var(--primary);
}

.section1 .team-info .img-box {
    position: relative;
    top: 0;
    left: 0;
    width: 39%;
    height: 100%;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.section1 .team-info .img-box img {
    display: block;
    position: relative;
    left: -9rem;
    height: 100%;
}

.section1 .team-info .info-box {
    position: relative;
    top: -29rem;
    left: 43%;
    width: 60%;
    height: 100%;
    background-color: white;
}

.section1 .team-info .info-box .team-name {
    position: relative;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    color: var(--primary);
}

.section1 .team-info .info-box .team-position {
    position: relative;
    top: 1rem;
    left: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--secondary);
}

.section1 .team-info .info-box .team-mission {
    position: relative;
    top: 5rem;
    left: 1rem;
    font-size: 1.5rem;
    color: var(--secondary);
}

.section1 .team-info .info-box .aufgaben-liste {
    position: relative;
    top: 6rem;
    left: 2rem;
    list-style:outside;
}

.section1 .team-info .info-box .aufgaben-liste .aufgaben {
    padding: .2rem;
    font-size: 1.3rem;
}

/* SECTION 2 */
.section2 {
    position: relative;
    top: 0rem;
    width: 100%;
    height: 10rem;
}

.section2 .headline {
    position: relative;
    top: 3rem;
    text-align: center;
    font-size: 3rem;
    color: var(--primary);
}

.section3 .left-side {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;

    /* background-color: red; */
}

.side { 
    overflow: hidden;
}

.side .img-headline {
    position: relative;
    line-height: 35rem;
    font-size: 2.5rem;
    text-align: center;
    color: var(--primary);
}

.img-side { 
    width: 50%;
    z-index: -10;
}

.text-side {
    width: 50%;
    z-index: 40;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.side img {
    position: relative;
    left: -5rem;
    height: 100%;
    width: 100% auto;
    display: block;
    margin: 0 auto;
    min-width: 100%;

}

/* SECTION 7 */
.section7 {
    position: relative;
    top: 0;
    width: 100%;
    height: 40rem;
    /* background-color: aqua; */
}

.section7 .right-side {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;

    /* background-color: blue; */
}

.section7 .left-side {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;

    /* background-color: red; */
}

/* SECTION 3 */
.section3 {
    position: relative;
    top: 0;
    width: 100%;
    height: 40rem;
    /* background-color: aqua; */
}

.section3 .right-side {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;

    /* background-color: blue; */
}

/* SECTION 4 */
.section4 {
    position: relative;
    top: 0;
    width: 100%;
    height: 40rem;
    /* background-color: aqua; */
}

.section4 .right-side {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;

    /* background-color: blue; */
}

.section4 .left-side {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;

    /* background-color: red; */
}

/* SECTION 5 */
.section5 {
    position: relative;
    top: 0;
    width: 100%;
    height: 40rem;
    /* background-color: aqua; */
}

.section5 .right-side {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;

    /* background-color: blue; */
}

.section5 .left-side {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;

    /* background-color: red; */
}

/* SECTION 6 */
.section6 {
    position: relative;
    top: 0;
    width: 100%;
    height: 40rem;
    /* background-color: aqua; */
}

.section6 .right-side {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 100%;

    /* background-color: blue; */
}

.section6 .left-side {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;

    /* background-color: red; */
}