/*========== ======
    Menu responsivo 
=================*/

/*container*/
.mres{  
    margin-top:35px;
    margin-right:10px;
    min-width: 300px;    
    background: #BE0005;
    position: absolute;
    right:0;
    z-index: 200;

}

/*botão open close menu*/
.mres-buttom{
    width: 50px;
    height: 48px;
    background: #E74040;
    border:none;
    cursor: pointer;
    position: absolute;
    top:35px;
    right: 10px;
    z-index: 205;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    color: #FFF;
    -webkit-box-shadow: -3px 3px 5px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    -3px 3px 5px 0px rgba(50, 50, 50, 0.25);
    box-shadow:         -3px 3px 5px 0px rgba(50, 50, 50, 0.25);
    padding:15px 10px 0 10px;
    display: none; /*oculta botão do menu responsivo*/
}

.mres-buttom span{
    width: 30px;
    height: 3px;
    display: block;
    background: #FFF;
    border-radius:5px;
    margin-top: 4px;
    transition-duration: 500ms;
}

.mres-buttom.open span:first-child{ 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mres-buttom.open span:last-child{
    margin-top:-2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/* desenho interno do mres-buttom */


/*listagem */

.mres nav{
    overflow: hidden;
}

.mres nav ul{
    display: none;
    margin-left: -500px;  /*margem para esconder elemento da transição*/
}

.mres nav ul li{

}


.mres nav ul li a{
    width: 100%;
    height: 100%;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color:#FFF;
    padding:18px 8% 18px 8%  ;
    transition:500ms;
    white-space: nowrap ;
    overflow:hidden;
    border-bottom: 1px solid #D84747;

}


/*hover*/
.mres nav ul li a:hover{
    text-decoration: none;
    background:rgba(255, 255, 255, 0.21); 
}

.mres nav ul li a.active{

    background:rgba(255, 255, 255, 0.21);
}

.mres nav ul li span{}


/*=========
    Resposivo 
=========*/

@media screen and (max-width: 37.5em) {  /*600px*/
    .mres{
        margin-right:0px;
        width: 100%;
        margin-top:0px;
    }

    .mres-buttom{
        top:0px;
    }

}