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

@media 
screen and (max-width: 672px) {
    section { overflow: hidden;}

    .section1 {
        position: relative;
        width: 100%;
        height: 65rem;
    }
    
    .headline {
        position: relative;
        top: 5rem;
        text-align: center;
        font-size: 3rem;
        color: var(--primary);
    }
    
    .section1 ul {
        position: relative;
        top: 10rem;
        left: 5%;
        width: 90%;
        height: 42rem;
    }
    
    .section1 ul .team-member {
        position: relative;
        top: 0;
        float: left;
        width: 45%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        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: -.5rem;
        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 .team-name {
        position: relative;
        top: -.6rem;
        font-size: 1rem;
        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.1) 0px 4px 12px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
        animation: .5s openTeamInfo forwards;
        -webkit-animation: .5s openTeamInfo forwards;
        display: none;
    }
    
    @keyframes openTeamInfo {
        100% {
            top: 15rem;
            left: 5%;
            width: 90%;
            height: 35rem;
        }
    }
    
    @keyframes closeTeamInfo {
        100% {
            top: 2rem;
            left: 2%;
            width: 5%;
            height: 2rem;
        }
    }
    
    .section1 .team-info .close-btn {
        position: sticky;
        top: .3rem;
        left: 84%;
        font-size: 1.5rem;
        padding: .8rem;
        color: rgb(230, 230, 230);
        z-index: 15;
        transition: .1s;
        -webkit-transition: .1s;
        -moz-transition: .1s;
        -ms-transition: .1s;
        -o-transition: .1s;
        text-shadow: 1px 1px 1.1px rgb(158, 158, 158);
}
    
    .section1 .team-info .close-btn:hover {
        cursor: pointer;
        color: var(--primary);
    }
    
    .section1 .team-info .img-box {
        position: relative;
        top: -2rem;
        left: 0;
        width: 100%;
        height: 22rem;
        overflow: hidden;
    }
    
    .section1 .team-info .img-box img {
        display: block;
        position: relative;
        left: -5rem;
        height: 100%;
    }
    
    .section1 .team-info .info-box {
        position: relative;
        top: -2rem;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.185);
        padding: 0;
        margin: 0;
    }
    
    .section1 .team-info .info-box .team-name {
        position: relative;
        top: .8rem;
        left: 1.5rem;
        font-size: 2rem;
        color: var(--primary);
    }
    
    .section1 .team-info .info-box .team-position {
        position: relative;
        top: .8rem;
        left: 1.5rem;
        font-size: 1.1rem;
        font-weight: 400;
        color: var(--secondary);
    }
    
    .section1 .team-info .info-box .team-mission {
        position: relative;
        top: 3rem;
        left: 1.5rem;
        font-size: 1.3rem;
        font-weight: 500;
        color: var(--secondary);
    }
    
    .section1 .team-info .info-box .aufgaben-liste {
        position: relative;
        top: 4rem;
        left: 2.5rem;
        width: 80%;
        min-height: 5rem;
        height: auto;
        list-style: outside;
    }
    
    .section1 .team-info .info-box .aufgaben-liste .aufgaben {
        padding: .2rem;
        font-size: 1.1rem;
    }

    /* SECTION 2 */
    .section2 {
        position: relative;
        top: 0;
        width: 100%;
        height: 5rem;
        margin-bottom: 1rem;
    }
    
    .section2 .headline {
        position: relative;
        top: .7rem;
        text-align: center;
        font-size: 3rem;
        color: var(--primary);
    }
    
    .side { 
        overflow: hidden;
    }
    
    .side .img-headline {
        position: relative;
        line-height: 5rem;
        font-size: 1.5rem;
        text-align: center;
        color: var(--primary);
    }
    
    .img-side { 
        width: 100%;
        /* z-index: -10; */
    }
    
    .text-side {
        width: 100%;
        z-index: 40;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    
    /* .side img {
        position: relative;
        left: 0rem;
        height: 100%;
        width: 100% auto;
        display: block;
        margin: 0 auto;
        min-width: 100%;
    } */
    
    .side img {
        position: relative;
        left: -10rem;
        height: 100%;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    /* SECTION 7 */
    .section7 {
        position: relative;
        top: 0;
        width: 100%;
        height: 25rem;
    }
        
    .section7 .right-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25rem;
    }
        
    .section7 .left-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
    }

    /* SECTION 3 */
    .section3 {
        position: relative;
        top: 0;
        width: 100%;
        height: 25rem;
    }

    .section3 .left-side {
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        height: 80%;
        z-index: 10;
    }
    
    .section3 .right-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
    
        background-color: white;
    }
    
    /* SECTION 4 */
    .section4 {
        position: relative;
        top: 0;
        width: 100%;
        height: 25rem;
    }
    
    .section4 .right-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25rem;
    }
    
    .section4 .left-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
    }
    
    /* SECTION 5 */
    .section5 {
        position: relative;
        top: 0;
        width: 100%;
        height: 25rem;
    }
    
    .section5 .right-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
    }
    
    .section5 .left-side {
        position: absolute;
        left: 0;
        width: 100%;
        height: 25rem;
    }
    
    /* SECTION 6 */
    .section6 {
        position: relative;
        top: 0;
        width: 100%;
        height: 25rem;
    }
    
    .section6 .right-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25rem;
    }
    
    .section6 .left-side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
    }
}