************************************************************************************
MENU
*************************************************************************************/
*{
    margin: 0;
    padding: 0;
}

header, nav	{display:block; z-index: 999;}
header		{ height:auto; position: relative; clear:both; max-width:1200px; margin:0 auto;}
nav			{ background:#fff; }

.activo 	{ color:#543790;}

.sobremenu			{ display:block; clear:both; width:100%; height:auto; padding:10px 0; background:#028910; color:#FFF; font-size:95%; text-align:center; overflow:hidden;}
.sobremenu a		{ color:#FFF; text-decoration:none;}
.sobremenu a:hover	{ color:#444; text-decoration:none; border:none;}
#sobremenui			{ display:inline-block; float:left;}
#sobremenud			{ display:inline-block; float:right;}
.sobremenuitem			{ display:inline-block;, float:left; padding:4px 9px;}
.sobremenuitem:hover	{ background:#fff; border-radius:3px;}

.novedadescabd		{ display:none}

.cajamenuprincipal	{ position:relative; clear:both; width:100%; height:90px; line-height:90px; background:#fff; z-index:9999;}

/* El logo sera flotado a la izquierda */

#logo		{ border:0px solid #DDD; border-radius:0px; display:block; float:left; margin:15px 10px 0 0; width:106px; height:60px; text-indent:-9999px;}
.logo		{ background: #fff url("../../images/logos/marcalogo-color.jpg") no-repeat 0 0; background-size:cover;}

#cajanombre			{ display:block; width:220px; position:relative; float:left; margin:0; padding:12px 0; height:78px;}
.marca				{ display:inline-block; float:left; line-height:1.4em; font-size:100%; font-weight:500; color:#7a7a7a; text-decoration:none; margin:0;}
.marca:before		{ content: "Ecology, Evolution and Conservation of Mediterranean Plants"; }
.marca:hover		{ color:#666; text-decoration:none;}
.submarca			{ display:auto; float:auto; line-height:1.2em; font-weight:300;font-size:100%; color:#666; margin:0;}
.submarca:before	{ content: ""; }
.submarca:hover		{ color:#666; text-decoration:none;}

/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float:right; background:transparent}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul           { list-style: none; font-size: 100%; margin: 0px 0px 0 0; padding:0; background:transparent;}
    
    /* Centramos */
    #menu li 				{ display: auto; float: left; text-align: center; font-family: 'Poppins', sans-serif; font-size:90%; font-weight:600;}
    #menu li a				{ display:block; color:#666; text-decoration: none; height:90px; line-height:90px; padding: 0px 10px; }
    #menu li a:hover		{ transition: 0.3s ease; border-bottom:3px solid #354a21; background:none; color:#354a21;}
    #menu li a.activo 		{ color:#028910; border:none; }
    
    
    #nav-mobile				{ display:none; position:absolute; right:10px; top:0; font-size:220%; color:#7a7a7a; text-align:center; text-decoration:none;}
    #nav-mobile:before		{ width:30px; padding:0;}
    #nav-mobile:before		{ display:block; content:"\f142"; font-family:FontAwesome; -webkit-text-stroke:1px #fff; transition:0.4s ease;}    
    #nav-mobile.nav-active	{ text-decoration:none; border-bottom:none;}  
    #nav-mobile.nav-active:before	{ display:block; content:"\f142"; font-family:FontAwesome; transform:rotate(90deg);} 
    
    
    
    
    /* Estilos #nav-mobile y lo ocultamos */
    nav-mobile				{ display:none; float:right; position:absolute; right:15; top:-8; color:#336600; text-decoration:none; border-bottom:none;}
    nav-mobile:before		{ display:block; content: "\f142"; font-family: FontAwesome; font-size:210%; font-weight:normal; color:#666; -webkit-text-stroke: 2px #fff; text-decoration:none;}      
     
    /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */   
    nav-mobile.nav-active	{ display:auto; float:right; position:absolute; right:16; top:-10; color:#336600; text-decoration:none; border-bottom:none;}
    nav-mobile.nav-active:before	{ display:block; content: "\00d7"; font-family: FontAwesome; font-size:240%; font-weight:normal; -webkit-text-stroke: 0px white; color:#666; text-decoration:none;} 
        
     /* Content */

/*
    MEDIA QUERY
*/
/* (1024x768) iPad 1 & 2, Landscape */
@media screen and (max-width:1024px) {
#logo				{ margin:15px 10px 0 0; width:55px; height:60px;}
.logo				{ background:url("../../images/logos/solologo-color.jpg")no-repeat 0 0; background-size:cover;}
#cajanombre			{ width:220px; padding:12px 0; height:78px;}
.marca				{ line-height:1.3em; font-size:95%;}

  
#nav-mobile			{ display:block; z-index: 9999;} /* mostramos #nav-mobile */ 
#menu				{ width:auto; clear:both; float:none; margin:0; padding:0; overflow:hidden;} /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
#menu ul			{ max-height:0; overflow:hidden;} /* Convertimos nuestra lista de enlaces en un menú horizontal */
#menu ul.open-menu	{ padding:5px 30px; background:#fff; border:1px solid #e1e1e1; border-bottom:2px solid #e1e1e1; }

#menu ul.open-menu:before {
				background:#FFF;
				content: "";
				height: 15px;
				right:15px;
  				margin:78px 0 0 -4px;
				position: absolute;
				top: 0;
				transform: rotate(45deg);
				width: 15px;
				border-top:1px solid #DDD;
				border-left:1px solid #DDD;
				}
        
        
            
#menu li			{ width:100%; float:none; margin: 0px 0px -2 0; border-top:1px solid #DDD; font-size:95%; font-weight:400;} /* estilos para los LI del menu */
#menu li:first-child{ border-top:1px solid #fff;} /* estilos para los LI del menu */

/* Quitamos el borde del ultimo item del menú */
#menu li a			{ padding:15px 0; height:auto; line-height:normal; font-size:95%; text-transform:none;}
#menu li a:hover	{ border:none; color:#116ad5} 

/* Agregamos una animación al despligue del menú */
#menu ul.open-menu	{ width:100%; max-height: 449px; margin:7px 0 0 0; transition: max-height .4s; border-bottom:1px solid #ddd; }

}

/* for 768px or less */
@media screen and (max-width:769px) {


}
/* for 568px or less */
@media screen and (max-width: 568px) {
.marca				{ margin:0; line-height:1.3em;}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
.marca					{ font-size:90%; line-height:1.4em;}

#sobremenui				{ display:block; float:none; font-size:90%;}
#sobremenud				{ display:none; float:none; font-size:90%;}
.sobremenuitem			{ display:inline-block;, float:left; padding:4px 4px;}
.sobremenuitem:hover	{ background:#fff; border-radius:3px;}
}