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

@media 
(min-width: 990px) 
and (max-width: 1296px) {
    section { overflow: hidden;}

    .section1 {
        position: relative;
        width: 100%;
        height: 35rem;
    }
    
    .headline {
        position: relative;
        top: 6rem;
        text-align: center;
        font-size: 3rem;
        color: var(--primary);
    }
    
    .section1 ul {
        position: relative;
        top: -6rem;
        left: 2.5%;
        width: 100%;
        height: 40rem;
    }
    
    .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 .team-name {
        position: relative;
        top: -.6rem;
        font-size: 1.2rem;
        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: 7rem;
            left: 10%;
            width: 80%;
            height: 25rem;
        }
    }
    
    @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: 1rem;
        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: -8rem;
        height: 100%;
    }
    
    .section1 .team-info .info-box {
        position: relative;
        top: -24rem;
        left: 40%;
        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;
        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: 0;
        width: 100%;
        height: 10rem;
        /* background-color: aqua; */
    }
    
    .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: 25rem;
        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;
        height: 100%;
        width: 100% auto;
        display: block;
        margin: 0 auto;
        min-width: 100%;
    }

        /* SECTION 7 */
        .section7 {
            position: relative;
            top: 0;
            width: 100%;
            height: 25rem;
            /* 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: 25rem;
        /* 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: 25rem;
        /* 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: 25rem;
        /* 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: 25rem;
        /* 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; */
    }
}