﻿@media screen and (max-width:420px) {
    .menu_btn {
        position: fixed;
        top: 3px;
        right: 1px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 98;
        background-color: white;
    }
    .menu_btn span,
    .menu_btn span:before,
    .menu_btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color:  #555555;
        position: absolute;
    }
    .menu_btn span:before {
        bottom: 8px;
    }
    .menu_btn span:after {
        top: 8px;
    }  
    #menu_btn_check:checked ~ .menu_btn span {
        background-color:  #555555;
    }
    #menu_btn_check:checked ~ .menu_btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu_btn_check:checked ~ .menu_btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    #menu_btn_check:checked ~ .menu_content {
        left: 0;
    }

    .menu_content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 80;
        background-color: white;
        transition: all 0.5s;
        opacity: 1.0;
        text-align:center;
    }
    .menu_content ul {
        padding: 70px 10px 0;
    }
    .menu_content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
        .menu_content ul li a {
            display: block;
            width: 100%;
            font-size: 20px;
            color:  #555555;
            text-decoration: none;
            padding: 9px 15px 10px 0;
            position: relative;
        }
    .menu_content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }
}

@media screen and (min-width:421px) {
    .hamburger_menu{
        display: none;
    }
}

#menu_btn_check {
    display: none;
}