#menuDemo {
    text-align: center;
}
#cssmenu
{
    width:auto;
    display:block;
    text-align:center;
    font-family:Cormorant;
    line-height:1.2;
    font-family: 'Verdana';
}
#cssmenu ul
{
    width:auto;
    display:block;
    font-size:0;
    text-align:center;
    color:#FFFFFF;
    background-color: rgb(6 38 59);
    border: transparent;
    list-style:none;
    position:relative;
    z-index:999999990;
    padding: 30px 0;
} 

#cssmenu li
{
    display:inline-block;
    position:relative;    
    font-size:0;
    padding: 5px 0;
}

/*Items
---------------------------------------*/

#cssmenu >ul>li>span, #cssmenu >ul>li>a 
{   
    font-size:22px;
    color:inherit;
    text-decoration:none;
    padding:20px 20px; 
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px;   
    display:block;   
    position:relative;
    transition:all 0.3s;
}
#cssmenu li:hover > span, #cssmenu li:hover > a
{  
    color:#FFFFFF;
    background-color:#651d32;
}

.menu-icon {
    display: none;
}

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

    .menu-icon {display:inline-block;}

    #cssmenu  {
        width:100%;
        display:none;
        background-color:#651d32;
        border:1px solid rgba(0,0,0,0.2);
        box-sizing:border-box;
        z-index:999999990;
    }

    /*--marco--*/

    #cssmenu  {
        position:fixed;top:0;bottom:0;left:0;right:0;height:100%!important;
        right:-130%;
        left:auto; box-shadow:-4px 0 18px rgba(0,0,0,0.3);
        transition:all 411ms cubic-bezier(.7, 0,1,.4);
    }

    #cssmenu.active {
        right:0;
        transition:all 411ms cubic-bezier(.16,.76,.45,1);
    }

    #mcmenu {z-index:1000000004;}
-fixed-bg {background:#000;z-index:1000000000;}
-fixed-bg.showing {display:block;opacity:0;}-fixed-bg.active {opacity:0.4;}
.menu-icon.active {position:fixed;top:12px;right:12px;z-index:1000000006;}

    /*--fin del marco--*/

    #cssmenu ul  {
        background-color:transparent;
        transition:all 411ms ease;
        box-sizing:border-box;
        border:none;
        border-radius: 0;
    }

    #cssmenu .mobileHide {
        display:none;
    }

    #cssmenu li {
        text-align:center;
        display:block;
        position:static;
    }

    #cssmenu >ul>li>span, #cssmenu >ul>li>a 
    {       
        font-size:32px;
    }

}
/*----------- icono del menu ----------------*/
.menu-icon-wrapper {
    padding:12px;
    text-align:right;
}
.menu-icon {
    padding:9px;
    cursor: pointer;
    outline: none;
    background-color:#000000;
    border:1px solid transparent;
    border-radius:3px;
    transition: all 0.25s ease-out;
    user-select:none;
    box-sizing:content-box;
    font-size:0;
    position:relative;
}

.menu-icon.active{
    background-color:#000000;
}
.three-line{
  width: 22px;
  height: 20px;
  position: relative;
  display: inline-block;
  font-size: 0;
}
.three-line span{
  background-color:#FFFFFF;
  position: absolute;
  border-radius: 2px;
  transition: transform .5s ease-in-out;
  width:100%;
  height: 2px;
  left: 0;
  transform: rotate(0);
}
.three-line span:nth-child(1){
  top:0;
}
.three-line span:nth-child(2){
  top:9px;
  visibility:visible;
}
.three-line span:nth-child(3){
  bottom:0;
}
.menu-icon.active .three-line span:nth-child(1){
  transform: rotate(225deg);
  top: 9px;
}
.menu-icon.active .three-line span:nth-child(2){
  transform: rotate(180deg);
  visibility:hidden;
}
.menu-icon.active .three-line span:nth-child(3){
  transform: rotate(315deg);
  top: 9px;
}
/*Fin de los estilos en celular*/

@keyframes topItemAnimation{
  from {opacity: 0;  transform:translate3d(0, 10vh, 0);}
  to {opacity: 1; transform:translate3d(0, 0, 0);}
}
#cssmenu li a {animation:none;}
#cssmenu.active li a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.9s backwards;}
#cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.15s backwards;}
#cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.3s backwards;}
#cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.45s backwards;}
#cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.6s backwards;}
#cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.75s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}

/*--Estilo de los íconos del menú--*/
.menu-icon {border-radius:50%;margin-right:12px;}
.menu-icon.active {background-color:transparent;}