header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 0 10px 0;
    box-shadow:0 5px 10px #00000020;
}

header .logo_container{
    margin-left:15px;
}

header .logo_container img{
    height:60px;
    width:auto;
    max-width:unset !important;
}

header .hamburger{
    width:20px;
    height:20px;
    background-color:red;
}

header .header-links_container > div{
    display:flex;
    align-items: center;
}

header .header_link{
    margin:0 15px 0 0;
    color:#7b1832;

}


.content-area{
    margin-top:10px;
}


@media screen and (max-width:1200px){

    header{
        z-index:1;
    }


    .content-area{
        position:relative;
        z-index:2;
        margin-top:15px;
    }

    header .header-links_container{
        display:unset;
        position: fixed;
        height: 100vh;
        width: 100%;
        left:100%;
        top:0;
        opacity: 0;
        transition: opacity 100ms;
        z-index:0;
    }

    header .header-links_container > div{
        display:unset;
        height: 100%;
        width: 80%;
        max-width: 300px;
        position: absolute;
        right: -100%;
        background: #fff;
        transition:right 500ms;
        padding:15px 10px 0 10px;
    }

    header[data-show="false"]{
        z-index:1;
    }
    header[data-show="false"] .hamburger{
        z-index:10;
    }
    
    header[data-show="true"]{
        z-index:1000;
        
    }
    header[data-show="true"] .header-links_container{
        background-color:#00000050;
        z-index:1000;
        left:0;
        opacity:1;
    }
    header[data-show="true"] .header-links_container > div{
        right:0;
    }

    header[data-show="false"] .header-links_container{

        
    }
    header[data-show="false"] .header-links_container > div{
        right:-100%;
    }

    .close_container{
        text-align:right;
    }

    .menu_title{
        font-size:25px;
        font-weight:bold;
        margin:20px 0 10px 0;
    }

    header .header_link{
        display:block;
        padding: 0.4em 0;
    }
    /* .header-links_container[data-show="true"]{
        left:0;
        background-color:#00000030;
        opacity:1
    }

    .header-links_container[data-show="false"]{
        transition: left 500ms;
    } */
}