/* body{ overflow: hidden; } */
    .nav{
        z-index: 900;
        height: 5.5rem; width: 100%;
        padding: 0rem 7rem; border:none; margin: 0%;

        display: flex; flex-flow: row nowrap; 
        justify-content: center ; align-items: center;


        background-color: var( --greenDarck2 );
       
    }
    .nav__row{
        height: 100%; width: 1440px; 
        border:none; margin: 0%;
        box-sizing: border-box;

        display: flex; flex-flow: row nowrap; 
        justify-content: space-between ; align-items: center;
        
        background-color: transparent;            

    }
        .nav-toggle{
            box-sizing: border-box;
            height: 100%; width: 10%; 
            border: none;

            display: flex; flex-direction: column; 
            justify-content: center; 
            align-content: center; align-items: center;
 
            display: none;
        }
            .row_toggle{
                height: 100%; width: 100%;
                padding: 0%; border: 0rem; margin: 0rem;

                 /* display: none; */
       
            }
            .nav-toggle--item{
                height: 3.3rem; border: none;
                filter: invert(96%);
            }

        .nav--contenedor--logo{
            align-self: flex-end!important; 
            justify-self: flex-end!important;
            
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;

            display: flex; flex-direction: column; 
            justify-content: center; 
            align-items: center; align-content: center;
        
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;

                display: flex; flex-direction: column; 
                justify-content: center; 
                align-items: center; align-content: center;
                
                background-image: url("../../../pisctures/logoDefinitivo.png");
      
                filter: invert(96%);

                background-repeat: no-repeat; background-position: center;
                background-size: contain; 
                background-color: transparent;
       
            }

        .nav-ul{
            box-sizing: border-box;
            height: 100%!important; width: 32rem;
            margin: 0; padding: 0;
            
            display: flex; flex-flow: row wrap; 
            justify-content: space-between; 
            align-items: center; align-content: center;

        }
            .li-items{
                z-index: 580;
                
                height: 100%; width: 15%; 
                /* background-color: rgb(255, 81, 0); */
                box-sizing: border-box;

                display: flex; flex-flow: column; 
                justify-content: center; 
                align-items: center; align-content: center;

            }
                .nav-items{
                    z-index: 600;
                    
                    height: 100%; width: 100%; 
                    /* margin: 5px 5px 5px 5px; */
                    box-sizing: border-box;

                    display: flex; flex-direction: column; 
                    justify-content: center; align-items: center;
                 
                    color: var( --grayLight )!important;
                    /* background-color: rgb(255, 247, 0); */
                    font-size: 15px;
            
                    
                }


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

/*LISTO*/
@media (min-width: 1484px) and (max-height: 600px) {    

    
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
   
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 12rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
   
        }

                
        .nav-items{
            height: 100%; width: 100%; 
    
            font-size: 14px!important;
            letter-spacing: 1.2px;
        }
                                         

}

@media (min-width: 1484px) and (min-height: 600px) {


.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
   
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 13rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }

                
        .nav-items{
            height: 100%; width: 100%; 
 
            font-size: 14px!important;
            letter-spacing: 1.2px;
        }


}

@media (min-width: 1484px) and (min-height: 700px) {

.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
   
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }
                
        .nav-items{
            height: 100%; width: 100%; 

            font-size: 14px!important;
            letter-spacing: 1.2px;
        }                                                   

}

@media (min-width: 1484px) and (min-height: 880px) {

.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
   
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 15rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }

                
        .nav-items{
            height: 100%; width: 100%; 
  
            font-size: 16px!important;
            letter-spacing: 1.2px;
        }                                                  

}

@media (min-width: 1484px) and (min-height: 1050px) {
 
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
                
        .nav-items{
            height: 100%; width: 100%; 
          
            font-size: 18px!important;
            letter-spacing: 1.2px;
        }                                                  

}

@media (min-width: 1484px) and (min-height: 1300px) {
   
    .nav-ul{

        box-sizing: border-box;
        height: 100%!important;  width: 40rem;
        margin: 0rem;
        padding: 0rem 2rem 0rem 0rem;

    }
        .nav-items{
            height: 100%; width: 100%; 
      
            font-size: 22px!important;
            letter-spacing: 1.2px;
        }
 
}

/**PANTALLAS LARGE VERTICALES*/
@media (min-width: 1484px) and (min-height: 1500px) {
    
.nav{

    height: 5.5rem; width: 100%;
    padding: 0rem 7rem; border:none; margin: 0%;

    display: flex; flex-flow: row nowrap; 
    justify-content: center ; align-items: center;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 2rem 0rem 3rem; 
        border:none; margin: 0% 0% 0% 0%;
        
        box-sizing: border-box;
        
        display: flex; flex-flow: row nowrap; 
        justify-content: space-between ; 
        align-items: center;
             
    }
        
    .nav--contenedor--logo{
        
        height: 100%; width: 12rem;
        margin: auto 0rem;

    

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;

        }    

        .nav-items{
            height: 100%; width: 100%; 

            font-size: 18px!important;
            letter-spacing: 1.2px;
        }                                      

}


/**NOTEBOOKS*/

@media (max-width: 1484px) and (max-height: 539px) {
 
    .nav{
        height: 5.5rem; width: 100%;
        padding: 0rem 7rem;
       
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }
        
                .nav-items{
                    height: 100%; width: 100%; 
      
                    font-size: 15px!important;
                    letter-spacing: 1.2px;
                }                                        

}

@media (max-width: 1484px) and (min-height: 540px) {  
  
    .nav{
        height: 5.5rem; width: 100%;
        padding: 0rem 7rem;
       
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }
    
            
                .nav-items{
                    height: 100%; width: 100%; 

                    display: flex; flex-direction: column; 
                    justify-content: center; align-items: center;
                
                    font-size: 15px!important;
                    letter-spacing: 1.2px;
                }
                                                    

}

@media (max-width: 1484px) and (min-height: 600px) {
 
    .nav{
        height: 5.5rem; width: 100%;
        padding: 0rem 7rem;
       
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
   
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }  
            
                .nav-items{
                    height: 100%; width: 100%; 
        
                    font-size: 16px!important;
                    letter-spacing: 1.2px;
                }                                     

}

@media (max-width: 1484px) and (min-height: 700px) {
 
    .nav{
        height: 5.5rem; width: 100%;
        padding: 0rem 7rem;
       
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 13rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }
           
            
            .nav-items{
                height: 100%; width: 100%; 
       
                font-size: 16px!important;
                letter-spacing: 1.2px;
            }
                                                    
}

@media (max-width: 1484px) and (min-height: 800px) {

 
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 13rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }
          
            
            .nav-items{
                height: 100%; width: 100%; 
       

                font-size: 18px!important;
                letter-spacing: 1.2px;
            }
                                                    

}

@media (max-width: 1484px) and (min-height: 900px) {   
   
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;

    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 13.5rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
     
        }      
            
            .nav-items{
                height: 100%; width: 100%; 
            
                font-size: 20px!important;
                letter-spacing: 1.2px;
            }
                                                    

}

@media (max-width: 1484px) and (min-height: 1100px) {
  
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 1440px ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
   
        }      
            
            .nav-items{
                height: 100%; width: 100%; 
            
                font-size: 20px!important;
                letter-spacing: 1.2px;
            }
                                      

}

@media (max-width: 1484px) and (min-height: 1400px) {

    
    .nav{
        height: 7.5rem; width: 100%;
        padding: 0rem 7rem;
        
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 1440px ; 
        padding: 0rem 2rem 0rem 3rem; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 7.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            /* border: solid 1px red; */
            }      
             
            
                .nav-items{
                    height: 100%; width: 100%; 
            
                    font-size: 18px!important;
                    letter-spacing: 1.2px;
                }
                                                    

}

    

/* Listo */
@media (max-width: 1368px) and (max-height: 1380px) {
          
    .nav{
        height: 7.5rem; width: 100%;
        padding: 0rem 5rem;
        
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 7.5rem; width: 15rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
 
            }      
      

        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 

                    display: flex; flex-direction: column; 
                    justify-content: center; align-items: center;
                
                    font-size: 20px;
                    letter-spacing: 1.6px;
                }


}

@media (max-width: 1368px) and (max-height: 1280px) {
      
    .nav{
        height: 7.5rem; width: 100%;
        padding: 0rem 7rem;
        
    }
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 7.5rem; width: 14rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }      
       

       
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 46rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
            
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 
        
                    font-size: 20px;
                    letter-spacing: 1.6px;
                }

}

@media (max-width: 1368px) and (max-height: 1140px) {
   
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 7.5rem; width: 14rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
  
            }      
      
    
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 45rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
      
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 
            
                    font-size: 20px;
                    letter-spacing: 1.6px;
                }

}

/* Ipad Pro */
@media (max-width: 1368px) and (max-height: 1024px) {
   
    
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }      
   
        
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 38rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
    
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 
  
                
                    font-size: 20px;
                    letter-spacing: 1.6px;
                }


}

/*Surface Pro 7 */
@media (max-width: 1368px) and (max-height: 912px) {
 
    
.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 6.5rem; width: 13.5rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }      
      
        
  
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 39rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
   
        }
            .li-items{
                height: 100%; width: 15%; 
 
            }
                .nav-items{
                    height: 100%; width: 100%; 
            
                    font-size: 16px!important;
                    letter-spacing: 1.2px;
                }

}

@media (max-width: 1368px) and (max-height: 770px) {
    
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 12rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }      
  
        

        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 39rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 

            }
                .nav-items{
                    height: 100%; width: 100%; 
   
                    font-size: 16px!important;
                    letter-spacing: 1.2px;
                }


}

@media (max-width: 1368px) and (max-height: 676px) {
 
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;

    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 12rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
            
        }      
  
        
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 34rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 
           
                    font-size: 16px!important;
                    letter-spacing: 1.2px;
                }

}

@media (max-width: 1368px) and (max-height: 585px) {
   
   
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 12rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;

        }      
          

        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
      
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    height: 100%; width: 100%; 

                    display: flex; flex-direction: column; 
                    justify-content: center; align-items: center;
                
                    font-size: 16px!important;
                    letter-spacing: 1.2px;
                }

}


/* Listo */

@media (max-width:1281px) and (max-height: 854px) {

.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 6.5rem; width: 13rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;

        }      
    
 
        .nav-ul{

            box-sizing: border-box;
            height: 100%!important;  width: 34rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
            
         
        }
            .li-items{
                height: 100%; width: 15%; 

            }
                .nav-items{
                    height: 100%; width: 100%; 
              
                    font-size: 18px;
                    letter-spacing: 1.2px;
                }


}

@media (max-width:1281px) and (max-height: 700px) {
  
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 6rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 5.5rem; width: 12rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;

        }      
    
    .nav-ul{

        box-sizing: border-box;
        height: 100%!important;  width: 32rem;
        margin: 0rem;
        padding: 0rem 0rem 0rem 0rem;
    
    }      

            .li-items{
                height: 100%; width: 15%; 

            }
                .nav-items{
                    height: 100%; width: 100%; 

                    font-size: 15px!important;
                    letter-spacing: 1.2px;
                }

}


@media (max-width: 1281px) and (min-height: 920px) {
   
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 7rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
    
        }      
    
    .nav-ul{

        box-sizing: border-box;
        height: 100%!important;  width: 36rem;
        margin: 0rem;
        padding: 0rem 0rem 0rem 0rem;
    
    }
        
            
            .nav-items{
                height: 100%; width: 100%; 


                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;
            
                font-size: 20px!important;
                letter-spacing: 1.2px;
            }

}

@media (max-width: 1281px) and (min-height: 1157px) {
    
   
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 5rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;
    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;
 
        }      
  
            .nav-items{
                height: 100%; width: 100%; 

            
                font-size: 18px!important;
                letter-spacing: 1.2px;
            }

}

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

/* Listo */
@media (max-width: 1084px) and (max-height: 1168px) {

    .nav{
        height: 6.5rem; width: 100%;
        padding: 0rem 3rem;
    
    }
        .nav__row{
            box-sizing: border-box;
            height: 100%; width: 100% ; 
            padding: 0rem 0rem ; 
            border:none; margin: 0% 0% 0% 0%;
            
        }
            .nav--contenedor--logo{ 
                height: 6.5rem; width: 13rem;
                margin: auto 0rem;
        
            }
                .nav--logo{
                    height: 100%; width: 100%;
                    padding: 0rem;
                    margin: 0rem auto;
  
                }      
             
            .nav-ul{
            
                box-sizing: border-box;
                height: 100%!important;  width: 32rem;
                margin: 0rem;
                padding: 0rem 2rem 0rem 0rem;
                
            }
                .li-items{
    
                    height: 100%; width: 15%; 
             
                }
                    .nav-items{
                        box-sizing: border-box;
                        height: 100%; width: 100%; 
                
                        font-size: 16px!important;
                    }
    
    }

@media (max-width:1084px) and (max-height: 768px) {

    
.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 3rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
            }      
        
        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
    
                    font-size: 16px;
                }

}

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

/* Listo */
@media (max-width: 1024px) and (min-height: 1369px) {
    
    
.nav{
    height: 7.5rem; width: 100%;
    padding: 0rem 3rem;
    
}
.nav__row{
    box-sizing: border-box;
    height: 100%; width: 100% ; 
    padding: 0rem 0rem ; 
    border:none; margin: 0% 0% 0% 0%;

    
}
    .nav--contenedor--logo{ 
        height: 7.5rem; width: 14rem;
        margin: auto 0rem;

    }
        .nav--logo{
            height: 100%; width: 100%;
            padding: 0rem;
            margin: 0rem auto;

        }      
        
    .nav-ul{

        box-sizing: border-box;
        height: 100%!important;  width: 30rem;
        margin: 0rem;
        padding: 0rem 2rem 0rem 0rem;
        
        
    }
            .nav-items{
                height: 100%; width: 100%; 

            
                font-size: 18px!important;
                letter-spacing: 1.2px;
            }

}

/* Ipad Pro */
@media (max-width: 1024px) and (max-height: 1368px) {   
  
.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 3rem;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
   
        
    }
        .nav--contenedor--logo{ 
            height: 6.5rem; width: 13rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }      
        
        .nav-ul{
    
            box-sizing: border-box;
            height: 100%!important;  width: 34rem;
            margin: 0rem;
            padding: 0rem 0rem 0rem 0rem;
        
        }
  
        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
   
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
         
                    font-size: 18px!important;
                }

}

@media (max-width: 1024px) and (max-height: 1168px) {
 
.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 3rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;

        
    }
        .nav--contenedor--logo{ 
            height: 6.5rem; width: 13rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }      
         
        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
    
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
            
                    font-size: 19px;
                }

}

@media (max-width: 1024px) and (max-height: 968px) {

.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 3rem;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 6.5rem; width: 13rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
        
            }      
       

        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 

            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
                 
                    font-size: 17px!important;
                }


}

@media (max-width: 1030px) and (max-height: 868px) {
 
    .nav{
        height: 7.5rem; width: 100%;
        padding: 0rem 3rem;
    }
        .nav__row{
            box-sizing: border-box;
            height: 100%; width: 100% ; 
            padding: 0rem 0rem ; 
            border:none; margin: 0% 0% 0% 0%;
    
            
        }
            .nav--contenedor--logo{ 
                height: 7.5rem; width: 14rem;
                margin: auto 0rem;
        
            }
                .nav--logo{
                    height: 100%; width: 100%;
                    padding: 0rem;
                    margin: 0rem auto;
                    
                }      
               

        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
  
        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
       
                    font-size: 16px!important;
                }

}

@media (max-width: 1030px) and (max-height: 768px) {
 
.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 3rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 13rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
    
            }      
      
        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
           
                    font-size: 16px;
                }

}

@media (max-width:1030px) and (max-height: 601px) {
 
.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 3rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }      
      
        .nav-ul{
     
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
    
                    font-size: 16px;
                }

}



/*  Listo */
/* 1024px  and  1369px */

/*Surface Pro 7 */
@media (max-width: 912px) and (max-height: 1368px) {

.nav{
    height: 6.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 6.5rem; width: 13rem;
            margin: 0rem; 
  
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }        

        
        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
            

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
           
                    font-size: 15px!important;
                }


}
    

@media (max-width: 912px) and (max-height: 864px) {
 

.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 10rem;
            margin: 0rem; 
  
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }      
        
   

        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 28rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;

        }
            .li-items{
                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
               
                    font-size: 14px!important;
                }


}

@media (max-width: 912px) and (max-height: 694px) {



.nav{
    height: 5.5rem; width: 100%;
    padding: 0rem 3rem;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            height: 5.5rem; width: 12rem;
            margin: auto 0rem;
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
 
            }      
        

        .nav-ul{
        
            box-sizing: border-box;
            height: 100%!important;  width: 32rem;
            margin: 0rem;
            padding: 0rem 2rem 0rem 0rem;
            
        }
            .li-items{
                box-sizing: border-box;

                height: 100%; width: 15%; 
            }
                .nav-items{
                    box-sizing: border-box;
                    height: 100%; width: 100%; 
               
                    font-size: 14px!important;
                }


}



/* Listo */ /*version  despliegue*/
  

@media (max-width: 860px) and (min-height: 800px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
   
@keyframes despliegue {
    0%{ 
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        /* 



        display: flex; flex-flow: column; 
        justify-content: space-between; align-items: center; align-content: center; */
   
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;

        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
 
   
    }
    100%{ 
        height: 0rem; width: 100%;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
   
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/


.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 6.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem;

    /* overflow: hidden; */
    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 36.5rem; 

    background-color: var( --greenDarck2 );

    transition: all 0.8s ease-in-out;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; 
        border:none; margin: 0%;

        position: static;
        top: 0%;  left: 0%; 
  
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 6.5rem; width: 14rem;
            margin: 0rem; 
  
            /* background-color: brown; */
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }   
    
        /**Burber btn*/
        
        .nav-toggle{
            position: absolute; 
            top: 0%; right: 0%;

            box-sizing: border-box;
            height: 6.5rem; width: 6.5rem; 
            border: none;
            cursor: pointer;

            display: flex; flex-direction: column; 
            justify-content: center; 
            align-content: center; align-items: center;

            background-color: transparent ;

        }
            /* .nav-toggle--item{
                height: 4.3rem; 
                border: none;
            } */

            .row_toggle{
                position: relative; 

                display: block; 
                height: 3.8rem;  
                width: 3.8rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;

                background-color: transparent;
                /* border: solid 2px black */

            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;
                display: block;
                height: 7px; width: 65%;
                margin: 0px;
                border-radius: 10px;
                background-color: var(--grayLightOpacity);
 

                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
  
            }
        
            .l_1{
                transform: translate(-50%, -17px);  /* -20px */

            } 
            .l_3{       
                transform: translate(-50%, 10px);  /* 15px */

            }
            /*Parte JS*/
            .activo .l_1{
                transform: translate(-50%, -50%)rotate(45deg);
            }
            .activo .l_2{
                width: 0rem;
            }
            .activo .l_3{
                transform: translate(-50%, -50%)rotate(-45deg);
            }
            /*---------------------------------------*/

    .nav-ul{
        position: absolute!important;
        top: 6.5rem; right: 0%; 
        width: 100%;

        height: 0rem!important;  

        overflow: hidden;
        background-color: var( --greenDarck2 ); 

        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 6.5rem; right: 0%;  

        background-color: var( --greenDarck2 ); 

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
  
        .li-items{
            z-index: 0;
            box-sizing: border-box;
            height: 28%; width: 100%; 
            border-top: 1px solid var(--grayLight);
            display: flex; flex-flow: column; 
            justify-content: center; align-items: center; align-content: center;

        }
            .nav-items{
                z-index: 0;
                height: 100%; width: 100%; 
                font-size: 24px!important;
                box-sizing: border-box;
                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

            }
    

}  

@media (max-width: 860px) and (max-height: 799px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 

        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
  
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
    
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/


.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 6.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem;

    /* overflow: hidden; */
    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 36.5rem; 

    background-color: var( --greenDarck2 );

    transition: all 0.8s ease-in-out;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; 
        border:none; margin: 0%;

        position: static;
        top: 0%;  left: 0%; 
    
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 3%;

            height: 6.5rem; width: 13rem;
            margin: 0rem; 
    
            /* background-color: brown; */
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }   
    
        .nav-toggle{
            position: absolute; top: 0%; right: 2%;

            box-sizing: border-box;
            height: 6.5rem; width: 14%; 
            border: none;

            display: flex; flex-direction: column; 
            justify-content: center; 
            align-content: center; align-items: center;

            background-color: transparent ;
    
        }
            /* .nav-toggle--item{
                height: 4rem; 
                border: none;
            } */
             
             /**Burber btn*/

            .row_toggle{
                position: relative; 

                display: block; 
                height: 3.8rem;  
                width: 3.8rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;

                background-color: transparent;
                /* border: solid 2px black */

            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;

                display: block;
                height: 7px; width: 65%;
                margin: 0px;

                border-radius: 10px;
                background-color: var(--grayLightOpacity);

                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -17px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 10px);  /* 15px */
            }
            /*Parte JS*/
            .activo .l_1{
                transform: translate(-50%, -50%)rotate(45deg);
            }
            .activo .l_2{
                width: 0rem;
            }
            .activo .l_3{
                transform: translate(-50%, -50%)rotate(-45deg);
            }
            /*---------------------------------------*/
    

    .nav-ul{
        position: absolute!important;
        top: 6.5rem; right: 0%; 
        width: 100%;

        height: 0rem!important;  

        overflow: hidden;
        background-color: var( --greenDarck2 ); 

        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 6.5rem; right: 0%;  

        background-color: var( --greenDarck2 ); 

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
    
        .li-items{
            z-index: 0;
            box-sizing: border-box;
            height: 28%; width: 100%; 
            border-top: 1px solid var(--grayLight);
            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{
                z-index: 0;
                height: 100%; width: 100%; 
                font-size: 24px!important;
                box-sizing: border-box;
                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

            }
    

}  
    

@media (max-width: 860px) and (max-height: 598px){


/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
       
        height: 25rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; width: 100%;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
    100%{ 
        height: 0rem;  width: 100%;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/


.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem;

    /* overflow: hidden; */
    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    background-color: var( --greenDarck2 );

    transition: all 0.8s ease-in-out;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; 
        border:none; margin: 0%;

        position: static;
        top: 0%;  left: 0%; 
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 4%;

            height: 5.2rem; width: 12rem;
            margin: 0rem; 
    
            /* background-color: brown; */
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;

            }   
    
        /**Burber btn*/
        .nav-toggle{
            position: absolute; top: 0%; right: 3%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 
            border: none;

            display: flex; flex-direction: column; 
            justify-content: center; 
            align-content: center; align-items: center;

            background-color: transparent ;
    
        }
            /* .nav-toggle--item{
                height: 3.5rem; 
                border: none;
            } */
        
            .row_toggle{
                position: relative; 

                display: block; 
                height: 3rem;  
                width: 3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;

                background-color: transparent;
                /* border: solid 2px black; */

            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; left: 50%;
                
                display: block;
                height: 6px; width: 75%;
                margin: 0px;
                border-radius: 10px;
                background-color: var(--grayLightOpacity);
 
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -15px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 9px);  /* 15px */
            }
            /*Parte JS*/
            .activo .l_1{
                transform: translate(-50%, -50%)rotate(45deg);
            }
            .activo .l_2{
                width: 0rem;
            }
            .activo .l_3{
                transform: translate(-50%, -50%)rotate(-45deg);
            }
            /*---------------------------------------*/
    

    .nav-ul{
        position: absolute!important;
        top: 5.5rem; right: 0%; 
        width: 100%;

        height: 0rem!important;  

        overflow: hidden;
        background-color: var( --greenDarck2 ); 

        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5.5rem; right: 0%;  

        background-color: var( --greenDarck2 ); 

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
    
        .li-items{
            z-index: 0;
            box-sizing: border-box;
            height: 28%; width: 100%; 
            border-top: 1px solid var(--grayLight);
            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{
                height: 100%; width: 100%; 
                font-size: 20px!important;
                box-sizing: border-box;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

            } 

}  
      


/** Listo */

@media( max-width: 687px ) and ( min-height: 801px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
   
@keyframes despliegue {
    0%{ 
  
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        /* height:  30rem; width: 100%;

        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; flex-flow: column; 
        justify-content: space-between; align-items: center; align-content: center; */
   
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
 
   
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
   
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35.5rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
 
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5.5rem; width: 12rem!important;
            margin: 0rem; 
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
   
            }        
  
        /**Burber btn*/

        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5.5rem; width: 5.5rem; 
        
        }
            /* .nav-toggle--item{
                height: 3.5rem;     
            } */

             .row_toggle{
                position: relative; 
                display: block; 
                height: 3rem;  
                width: 3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; left: 50%;
                
                display: block;
                height: 6px; width: 75%;
                margin: 0px;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -15px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 9px);  /* 15px */
            }    
            /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5.5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5.5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 22px!important;
            }
    

}

@media( max-width: 687px ) and ( max-height: 800px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5.5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35.5rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
    
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5.5rem; width: 12rem!important;
            margin: 0rem; 
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
        
        /**Burber btn*/

        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5.5rem; width: 5.5rem; 
        
        }
            /* .nav-toggle--item{
                height: 3.5rem;     
            } */

        .row_toggle{
            position: relative; 
            display: block; 
            height: 3rem;  
            width: 3rem;  
            padding: 0%; border: none; 
            margin: auto 0rem ;

        }
        .row_toggle_items{
            position: absolute; 
            top: 50%; left: 50%;
            
            display: block;
            height: 6px; width: 75%;
            margin: 0px;
            border-radius: 10px;

            transform: translate(-50%,-50%);
            transition: all 0.3s ease;
        }
        .l_1{
            transform: translate(-50%, -15px);  /* -20px */
        } 
        .l_3{       
            transform: translate(-50%, 9px);  /* 15px */
        }
        /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5.5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5.5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}


@media( max-width: 687px ) and ( max-height: 598px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        
        height: 25rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 5rem!important; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    transition: all 0.8s ease-in-out;

}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
        
    }
        .nav--contenedor--logo{ 
            position: absolute;
            top: 0%;  left: 2%;
            height: 5rem!important; width: 11rem!important;
            margin: 0rem; 
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem;
                margin: 0rem auto;
                
            }        

        /**Burber btn*/
        .nav-toggle{
            position: absolute;
            top: 0%;  right: 2%;

            height: 5rem; width: 5rem; 
    
        }
            /* .nav-toggle--item{
                height: 3.4rem;     
            }  */

        .row_toggle{
            position: relative; 
            display: block; 
            height: 3rem;  
            width: 3rem;  
            padding: 0%; border: none; 
            margin: auto 0rem ;

        }
        .row_toggle_items{
            position: absolute; 
            top: 50%; left: 50%;
            
            display: block;
            height: 6px; width: 75%;
            margin: 0px;
            border-radius: 10px;

            transform: translate(-50%,-50%);
            transition: all 0.3s ease;
        }
        .l_1{
            transform: translate(-50%, -15px);  /* -20px */
        } 
        .l_3{       
            transform: translate(-50%, 9px);  /* 15px */
        }
        /*---------------------------------------*/

    .nav-ul{
        position: absolute; 
        top: 5rem!important; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
     
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{
            height: 25%; width: 100%; 

        }
            .nav-items{
                height: 100%; width: 100%; 

                font-size: 18px!important;
            }

}



/** Listo */
@media( max-width: 541px ) and ( min-height: 801px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
      
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
     
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; 
        border:none; margin: 0% 0% 0% 0%;

        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 12rem!important;
            margin: 0rem; 
     
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        

        /**Burber btn*/

        .nav-toggle{
            position: absolute; top: 0%; right: 2%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 

        
        }
            /* .nav-toggle--item{
                height: 3.5rem;     
            } */

        .row_toggle{
            position: relative; 

            display: block; 
            height: 3rem;  
            width: 3rem;  
            padding: 0%; border: none; 
            margin: auto 0rem ;

        }
        .row_toggle_items{
            position: absolute; 
            top: 50%; left: 50%;
            
            display: block;
            height: 6px; width: 75%;
            margin: 0px;
            border-radius: 10px;

            transform: translate(-50%,-50%);
            transition: all 0.3s ease;
        }
        .l_1{
            transform: translate(-50%, -15px);  /* -20px */
        } 
        .l_3{       
            transform: translate(-50%, 9px);  /* 15px */
        }
       
        /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}

@media( max-width: 541px ) and ( max-height: 800px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
     
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
    
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 3%;

            height: 5rem; width: 12rem!important;
            margin: 0rem; 
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
        
        /** Burger BTN */
        .nav-toggle{
            position: absolute; top: 0%; right: 2%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 
        
        }
            /* .nav-toggle--item{
                height: 3.4rem;     
            } */
            

            .row_toggle{
                position: relative; 
    
                display: block; 
                height: 3rem;  
                width: 3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
    
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; left: 50%;
                
                display: block;
                height: 6px; width: 75%;
                margin: 0px;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -15px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 9px);  /* 15px */
            }

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

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}

@media( max-width: 541px ) and ( max-height: 590px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
        
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        
        height: 25rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem 2rem; margin: 0rem 0rem 0rem 0rem;

    transition: all 0.6s ease-in-out;

}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem 0rem ; 
        border:none; margin: 0% 0% 0% 0%;
    
        
    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 3%;

            height: 5rem; width: 11rem!important;
            margin: 0rem; 
    
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        .nav-toggle{
            position: absolute; top: 0%; right: 2%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 
        
        }
            /* .nav-toggle--item{
                height: 3.3rem;     
            } */
        /**Burber btn*/

        .row_toggle{
            position: relative; 

            display: block; 
            height: 3rem;  
            width: 3rem;  
            padding: 0%; border: none; 
            margin: auto 0rem ;

        }
        .row_toggle_items{
            position: absolute; 
            top: 50%; left: 50%;
            
            display: block;
            height: 6px; width: 75%;
            margin: 0px;
            border-radius: 10px;

            transform: translate(-50%,-50%);
            transition: all 0.3s ease;
        }
        .l_1{
            transform: translate(-50%, -15px);  /* -20px */
        } 
        .l_3{       
            transform: translate(-50%, 9px);  /* 15px */
        }

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

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}
    


/** Listo */
@media( max-width: 431px ) and ( min-height: 596px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        /* height:  30rem; width: 100%;

        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; flex-flow: column; 
        justify-content: space-between; align-items: center; align-content: center; */
    
        height: 30rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem ; margin: 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; border:none; margin: 0% ;

    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 11rem!important;
            margin: 0rem; 
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        /**Burber btn*/
        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 

        }
            /* .nav-toggle--item{
                height: 3.5rem;     
            } */

        .row_toggle{
            position: relative; 
            display: block; 
            height: 3.3rem;  
            width: 3.3rem;  
            padding: 0%; border: none; 
            margin: auto 0rem ;

        }
        .row_toggle_items{
            position: absolute; 
            top: 50%; 
            left: 50%;
            display: block;
            height: 6px; width: 60%;
            margin: 0px; border: none;
            border-radius: 10px;

            transform: translate(-50%,-50%);
            transition: all 0.3s ease;
        }
        .l_1{
            transform: translate(-50%, -14px);  /* -20px */
        } 
        .l_3{       
            transform: translate(-50%, 8px);  /* 15px */
        }
    
        /*---------------------------------------*/
 

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}

@media( max-width: 431px ) and ( max-height: 595px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        
        height: 0rem; 
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; 
        padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        height: 25rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; width: 100%;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
    100%{ 
        height: 0rem; width: 100%;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem ; margin: 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; border:none; margin: 0% ;

    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 8rem;
            margin: 0rem; 
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 

        }
            /* .nav-toggle--item{
                height: 3rem;     
            } */
            /**Burber btn*/

            .row_toggle{
                position: relative; 
                display: block; 
                height: 3rem;  
                width: 3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
    
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;
                display: block;
                height: 5px; width: 60%;
                margin: 0px; border: none;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -12px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 7px);  /* 15px */
            }
            /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}
     



/**Listo*/

@media( max-width: 385px ) and ( min-height: 596px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        height: 0rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;
        
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
     
        height: 30rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 30rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem ; margin: 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 35rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; border:none; margin: 0% ;

    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 9rem!important;
            margin: 0rem; 
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 

        }
            /* .nav-toggle--item{
                height: 3.2rem;     
            } */

            /**Burber btn*/

            .row_toggle{
                position: relative; 
                display: block; 
                height: 3.3rem;  
                width: 3.3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;
                display: block;
                height: 6px; width: 60%;
                margin: 0px; border: none;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -14px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 8px);  /* 15px */
            }
            /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 18px!important;
            }
    

}

@media( max-width: 385px ) and ( max-height: 595px){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        height: 0rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;
        
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        
        height: 25rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem ; margin: 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; border:none; margin: 0% ;

    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 9rem!important;
            margin: 0rem; 
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5rem; width: 5rem; 

        }
            /* .nav-toggle--item{
                height: 3rem;     
            } */
              /**Burber btn*/

              .row_toggle{
                position: relative; 
                display: block; 
                height: 3rem;  
                width: 3rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
    
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;
                display: block;
                height: 5px; width: 60%;
                margin: 0px; border: none;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -12px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 7px);  /* 15px */
            }
          
            /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 16px!important;
            }
    

}
    

/**Listo*/

@media( max-width: 300px ){

/*?--------------     ------------------    A N I M A C I Ó N E S    -------------   ----------------*/
    
@keyframes despliegue {
    0%{ 
        height: 0rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;
        
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    }
    100%{ 
        
        height: 25rem; width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; 
        align-content: center;
    
    }
}

@keyframes repliegue {
    0%{ 
        height: 25rem; 
        width: 100%;
        
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    
    }
    100%{ 

        /* display: none; */
        height: 0rem; 
        width: 100%;
        /* overflow: hidden; */
        box-sizing: border-box;
        margin: 0; padding: 0;

        display: flex; 
        flex-flow: column; 
        justify-content: space-between; 
        align-items: center; align-content: center;
    
    }
}    

/*? -------------------      ---------------------------          -----------------------------        ---------------------*/

.nav{
    position: relative!important;
    top: 0%;  left: 0%; 

    height: 5rem; width: 100%;
    padding: 0rem ; margin: 0rem;

    transition: all 0.6s ease-in-out;
}
.nav_active{
    position: relative!important;
    top: 0%;  left: 0%;

    height: 30rem; 

    transition: all 0.8s ease-in-out;
}
    .nav__row{
        box-sizing: border-box;
        height: 100%; width: 100% ; 
        padding: 0rem; border:none; margin: 0% ;

    }
        .nav--contenedor--logo{ 
            position: absolute; top: 0%; left: 2%;

            height: 5rem; width: 8rem!important;
            margin: 0rem; 
        }
            .nav--logo{
                height: 100%; width: 100%;
                padding: 0rem; margin: 0rem auto;
    
            }        
    
        .nav-toggle{
            position: absolute; top: 0%; right: 0%;

            box-sizing: border-box;
            height: 5rem; width: 4rem; 
        }
            /* .nav-toggle--item{
                height: 2.8rem;     
            } */

            /**Burber btn*/

            .row_toggle{
                position: relative; 
                display: block; 
                height: 2.5rem;  
                width: 2.5rem;  
                padding: 0%; border: none; 
                margin: auto 0rem ;
    
            }
            .row_toggle_items{
                position: absolute; 
                top: 50%; 
                left: 50%;
                display: block;
                height: 4.3px; width: 63%;
                margin: 0px; border: none;
                border-radius: 10px;
    
                transform: translate(-50%,-50%);
                transition: all 0.3s ease;
            }
            .l_1{
                transform: translate(-50%, -10px);  /* -20px */
            } 
            .l_3{       
                transform: translate(-50%, 6px);  /* 15px */
            }
          
         
            /*---------------------------------------*/
        

    .nav-ul{
        position: absolute; 
        top: 5rem; right: 0%;

        box-sizing: border-box;
        height: 0rem; width: 100%;
        margin: 0; padding: 0;
    
        animation-name: repliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;

    }
    .nav_ul_active{
        position: absolute; 
        top: 5rem; right: 0%;  

        animation-name: despliegue;
        animation-timing-function: ease-in;
        animation-delay: 0s ;
        animation-duration: 0.6s ;
        animation-fill-mode: forwards;       
    }
        .li-items{

            box-sizing: border-box;
            height: 25%; width: 100%; 

            display: flex; flex-flow: column; 
            justify-content: center; 
            align-items: center; align-content: center;

        }
            .nav-items{  
                box-sizing: border-box;     
                height: 100%; width: 100%;

                display: flex; flex-direction: column; 
                justify-content: center; align-items: center;

                font-size: 16px!important;
            }
    
}