@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.case_container{
    width: 100%; max-width: 1400px;
    display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    margin:0; padding: 20px 0; gap:4%;
}

.aside_case_container{
    flex:1 1 22%;
}

.aside_case_container > h4{
    margin: 0; color:var(--menubackground); font-weight: 500;
    padding:10px 0; border-bottom: 1px var(--menubackground) solid;
    transition: all .2s linear;
}

.aside_case_container > nav{width: 100%; height:auto;}
.aside_case_container > nav > ul{ 
    width: 100%; display: flex; flex-direction: column;
    padding: 0; margin: 0; list-style: none;
}

.aside_case_container > nav > ul > li{
    padding:10px 15px;
    border-bottom: 1px var(--menubackground) dashed;
    width: 100%;
    transition: all .2s linear;
    position: relative;
}

.aside_case_container > nav > ul > li > a{
    font-size:14pt; color:var(--menubackground); 
    position: relative; transition: all .2s linear;
    width: 100%; display: inline-block;
}

.aside_case_container > nav > ul > li > a > .menu_arrow{
    width:27px; height:27px; 
    border-radius: 50%; border:1px var(--menubackground) solid;
    position: absolute; top:50%; 
    left: calc( 100% - 27px ); 
    transform: translateY(-50%);
    display: inline-flex; justify-content: center; align-items: center;
    font-family: 'Poppins',sans-serif;
    font-weight: 400; font-style: normal;
}

.aside_case_container > nav > ul > li:hover{background-color: var(--menubackground);}
.aside_case_container > nav > ul > li:hover > a{color:#fff;}
.aside_case_container > nav > ul > li:hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}
.aside_case_container > nav > ul > li.hover{background-color: var(--menubackground);}
.aside_case_container > nav > ul > li.hover > a{color:#fff;}
.aside_case_container > nav > ul > li.hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}

.dist_page{ 
    width: max-content; margin:5px 0 0; padding:5px 0 ; 
    border-top:1px var(--green) solid; color:var(--coffee);
    font-size:17pt;
}

.main_case_container{
    flex:1 1 78%;
}

.main_case_container > ul{
    width: 100%; display: flex; flex-direction: row;
    justify-content: flex-start; align-items: flex-start;
    list-style: none; margin: 0; padding: 0;
    flex-wrap: wrap; gap:30px;
}

.main_case_container > ul > li{
    flex:0 0 calc(100% / 3 - (40px / 3 * 2));
    cursor: pointer;
}

.main_case_container > ul > li > div{
    width: 100%; position: relative;
    overflow: hidden; transition: all .3s linear;
    box-shadow: 0 0 9px #999;
    border:5px #fff solid;
}

.main_case_container > ul > li > div::after{
    content: ''; width: 100%; padding-top:75%; 
    left:0; top:0; display: block; position: relative;
    
}

.main_case_container > ul > li > div > img{
    width: 100%; position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%); display: block;
    transition: all .2s linear;
}

.main_case_container > ul > li > h4{
    text-align: center; margin: 0; padding:10px 0;
    font-weight: 400; transition: all .2s linear;
    font-size:15pt;
}

.main_case_container > ul > li:hover > div{
    border:5px var(--menubackground) solid;
    box-shadow: 0 0 9px #555;
}

.main_case_container > ul > li.hover > div{
    border:5px var(--menubackground) solid;
    box-shadow: 0 0 9px #555;
}

.main_case_container > ul > li:hover > div > img{
    transform:translate(-50%,-50%) scale(1.2);
}

.main_case_container > ul > li:hover > h4{
    font-weight: 600;
}

.main_case_container > ul > li:hover > h4{
    color:var(--menubackground)
}


@media screen and ( max-width:1279px ) {
    
    .main_case_container > ul{gap:20px;}
    .main_case_container > ul > li{
        flex : 0 0 calc(100% / 3 - (20px / 3 * 2))
    }
    .main_case_container > ul > li > h4{font-size: 15pt;}
}

@media screen and ( max-width:1023px ) {
    .aside_case_container > nav > ul > li > a{ 
        font-size: 12pt;
        position: relative;
    }
    .aside_case_container > nav > ul > li > a > .menu_arrow{
        width: 21px; height: 21px;
        left:calc( 100% - 21px );
    }
    .main_case_container > ul{gap:15px;}
    .main_case_container > ul > li{
        flex : 0 0 calc(100% / 3 - (15px / 3 * 2))
    }
    .main_case_container > ul > li > h4{font-size:14pt;}

    .aside_case_container > nav > ul > li{padding:10px 8px}

    
    
}

@media screen and ( max-width:767px ) {
    .case_container{
        flex-direction: column; gap: 20px;
        border:0px #c00 solid;
    }
    .aside_case_container{
        flex:100%; border:0px #c00 solid;
        width: 100%; position: relative;
    }

    .aside_case_container.hover > nav{ height:0;}
    .aside_case_container > nav{
        overflow: hidden; height: 0;
        position: absolute; top:100%; left:0;
        z-index: 1;
        background-color:#fff;
        display: block;
        transition: height .2s linear;
    }
    .aside_case_container > h4{
        background-color: var(--menuhover); color:#fff; text-align: center;
        cursor: pointer;
    }

    .aside_case_container > nav > ul > li > a { font-size:13pt; }
    .aside_case_container > nav > ul > li.hover:hover{background-color: var(--menubackground);}
    .aside_case_container > nav > ul > li.hover{background-color: var(--menubackground);}
    .aside_case_container > nav > ul > li:hover{background-color: var(--menuhover);}

    .main_case_container{
        flex: 100%; width: 100%;
    }
    .main_case_container > ul > li{margin-bottom: 20px;}
    .main_case_container > ul > li > div{border-width:3px}
    .main_case_container > ul > li:hover > div{border-width:3px}
}

@media screen and ( max-width:559px ) {
    .main_case_container > ul > li{
        flex : 0 0 calc(100% / 2 - (15px / 2))
    }
}