/*-------------------------------------------------------------------------------------------------------*/

@keyframes logo-desktop-deslizar {
    from {transform: TranslateX(-100%);}
    to {transform: TranslateX(0%);}
}

@keyframes logo-mobile-surgir {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

/*-------------------------------------------------------------------------------------------------------*/

#logo-menu-principal-mobile {
    float:left;    
}

#options-menu-principal-mobile {
    background:     linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(248,232,64,0.95), rgba(232,216,48,0.98), rgba(0,0,0,1)); 
    width:          calc(100% + 5px); 
    max-width:      389px; 
    height:         calc(100% - 70px); 
    position:       fixed; 
    top:            calc(0% + 70px); 
    right:          calc(-50% - 400px);
    z-index:        15;            
    border-left:    5px solid #777;
    box-shadow:     -2px 0 5px 0 rgba(0,0,0, 0.5);
    display:block;
}

#options-menu-principal-mobile ul {
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
    background: white;
    text-align:center;    
    box-shadow: 0 2px 2px 0 black;    
}

#options-menu-principal-mobile ul li {
    width:100%;            
    padding: 2vh 0 2vh 0;
    border-bottom: 2px solid #ccc;          
}        

#options-menu-principal-mobile ul li a, #button-menu-principal-mobile a {
    text-decoration:    none;
    color: black;
    font-size: 22px; 
    font-weight: 600;           
}

#button-menu-principal-mobile a {
    border-bottom:3px solid transparent;
}

#options-menu-principal-mobile ul li a:hover {
    text-shadow: 0 0 1px rgb(248,232,64);
    color:black; 
    cursor: pointer;    
}

#button-menu-principal-mobile a:hover {
    cursor:pointer;    
    border-bottom:3px solid black;
}

#options-menu-principal-mobile li:hover {
    background:rgb(248,232,64);         
}

#options-menu-principal-mobile ul li a:active {
    text-shadow: 0 0 1px rgb(0,128,256);
    color:rgb(0,64,128);
}

#background-menu-principal-mobile {   
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.5), rgba(0,0,0,0.25));
    width:      100%; 
    height:     calc(100% - 69px); 
    position:   fixed; 
    top:        69px; 
    z-index:    5;
    display:none;
}
    
#options-menu-principal-desktop {        
    background: white;
    width:100%; 
    height:100%;
    text-align:right;   
    overflow: hidden;
}

#options-menu-principal-desktop li {
    display: inline-block;
    padding: 20px 25px;
    height:100%;                
    color: black;   
    text-align:center; 
    text-shadow: 0 0 0px black;
}

#options-menu-principal-desktop a {    
    color: black;
    text-decoration: none; 
    font-size:20px;
    font-weight: 600;
    cursor: pointer;
}

#options-menu-principal-desktop a:hover {
    border-bottom:3px solid rgb(248,232,64);
}

#sec-menu-desktop, #sec-menu-mobile {
    background: white;
    width:100%; 
    height:100%;
    text-align:left;   
    overflow: hidden;
}

/*-------------------------------------------------------------------------------------------------------*/

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

    #logo-menu-principal-desktop {
        display:none; 
    } 

    #logo-menu-principal-mobile {         
        animation-name: logo-mobile-surgir;
        animation-duration: 1s;
    }

    #logo-menu-principal-mobile a img {
        margin-left:5px;
        float:left;        
        height:64px;        
        position:inline;                 
    }
}

/*-------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 390px) {
    
    #logo-menu-principal-desktop {
        display:block; 
    }

    #logo-menu-principal-desktop a img {
        height:64px;
        position:absolute;
        padding:2px 0px;
        left:0;
        top:1px;
        margin-left:1vw;
        animation-name: logo-desktop-deslizar;
        animation-duration: 1s;
    }    

    #logo-menu-principal-mobile {        
        display: none;        
    }         
}

/*-------------------------------------------------------------------------------------------------------*/

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

    #button-menu-principal-mobile {
        float: right;
        display: block;
        margin: 19px 25px;  
    }

    #options-menu-principal-desktop {
        display: none;
    }
}

/*-------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1501px) {

    #sec-menu-mobile {
        display:none;
    }

    #options-menu-principal-mobile {
        display: none;        
    }

    #background-menu-principal-mobile {
        display: none;             
    }
}