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

    .menu-responsivo {
        display: table;
        overflow: hidden;
        }

        button.menu-responsivo-site {
            padding: 5px 10px;
            font-size: 20px;
            border-style: solid;
            border-width: 1px;
            border-color: white;
            color: white;
            background-color: transparent;
            position: relative;
            margin-right: 10px;
            border-radius: 5px;
        }

        button.menu-responsivo-site-fixo {
            padding: 5px 10px;
            font-size: 20px;
            border-style: solid;
            border-width: 1px;
            border-color: #333;
            color: #333;
            background-color: transparent;
            position: relative;
            margin-right: 10px;
            border-radius: 5px;
            float: right;
        }


        button.menu-responsivo-close {
            font-size: 40px;
            line-height: 40px;
            color: white;
            border-style: none;
            background-color: transparent;
            position: absolute !important;
            right:15px !important;
            top: 15px !important;
            left: auto;
            bottom: auto;
            display: block !important;
            padding:0px;
       }

        .menu-total {display: none;}

        .menu-total-show {
            display: block;
            width: 100%;
            height: 100vh;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 99;
            animation: menu-total1 0.5s 1;
            background-color: black;
            background-image: url(./fotos/fundo-quemsomos.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 50px 0px 0px 0px;
            }

            @keyframes menu-total1 {
                0%  { right: -100%; top: 0;}
                 100%  { right: 0px; top: 0;}
                    }


                    .menu-total-show-close {
                        display: block;
                        width: 100%;
                        height: 100vh;
                        right: -100%;
                        position: absolute;
                        animation: menu-totalclose 0.5s 1;
                        background-color: black;
                        background-image: url(./fotos/fundo-quemsomos.png);
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        padding: 50px 0px 0px 0px; 
                        }
            
                        @keyframes menu-totalclose {
                            0%  { right: 0; top: 0;}
                             100%  { right: -100%; top: 0;}
                                }


.menu-total a{
    color:white;
    font-size: 20px;
    display: table;
    margin: auto auto 20px auto;
    line-height: 20px;
}

}