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

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

.activo 	{ color:#543790;}

.sobremenu			{ display:block; clear:both; width:100%; height:auto; padding:6px 0; background:linear-gradient(118deg, #543790, #0075d5); color:#FFF; text-align:center; overflow:hidden;}
sobremenu			{ display:block; clear:both; width:100%; height:auto; padding:5px 0; background:#543790; 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; font-family: 'Roboto', sans-serif;}
#sobremenud			{ display:inline-block; float:right; font-family: 'Roboto', sans-serif;}
.sobremenui			{ display:inline-block;, float:left; padding:4px 9px;}
.sobremenui:hover	{ background:#fff; border-radius:3px;}

.novedadescabd		{ display:none}

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


/* Definimos un ancho 100% y una altura fija para nuestro menú */

/* El logo sera flotado a la izquierda */

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

#cajanombre			{ display:block; position:relative; float:left; margin:0; padding:10px 0 12px 0; height:78px;}
.marca				{ display:block; clear:both; float:none; line-height:1.4em; font-family: 'Oswald', sans-serif; font-size:105%; color:#666; text-decoration:none; margin:3px 0 0 0;}
.marca:before		{ content: "Área de Conocimiento de"; }
.marca:hover		{ color:#666; text-decoration:none;}
.subnombre			{ display:inline-block; float:left; line-height:1em; font-family: 'Francois One', sans-serif; font-weight:300; font-size:175%; color:#666; margin:0;}
.subnombre:before	{ content: "Toxicologia"; color:#666; }
.subnombre: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: 'Francois One', sans-serif; font-size:110%; }
    #menu li a				{ display:block; color:#666; text-decoration: none; height:81px; line-height:80px; padding: 0px 10px; }
    #menu li a:hover		{ transition: 0.3s ease; border-bottom:3px solid #543790; background:none; color:#543790;}
    #menu li a.activo 	{ color:#543790;}
    
    /* 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: "\f0c9"; font-family: FontAwesome; font-size:180%; font-weight:normal; color:#666; -webkit-text-stroke: 1px white; 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 only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {



}

@media only screen and (max-width: 980px) {
	
	sobremenui			{ display:block; float:left; text-align:center;}
	sobremenui			{ display:block; float:left; text-align:center;}
	.activo 			{ border:none;}
	.cajamenuprincipal 	{ display:block; height:68; margin:0; padding:-5 0 0 0;}
    
    #cajanombre		{ display:block; position:relative; float:left; margin:0; padding:15px 0px; height:60px;}
    #logo			{ margin: 7px 7px 0 0; width:50px; height:50px;}
    .marca			{ font-size:120%; margin:0;}
	.subnombre		{ font-size:90%;}
	
	.marca:before	{  }
	
	header			{ margin:0; padding:0; width:100%; z-index:9998;}
    
    /* mostramos #nav-mobile */   
    #nav-mobile{ display: block; z-index: 9999;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width:100%;
        clear:both;
        float: none;
        margin:0;
        padding:0 0 0 0;
        overflow:hidden;        
    }
    
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 1px #ddd;
            -moz-box-shadow: 0 1px 1px #ddd;
            box-shadow: 0 1px 1px #ddd;
            max-height: 0;
            line-height:px;
            overflow: hidden;
        }
        
        #menu ul.open-menu:before {
				background:#FFF;
				content: "";
				height: 15px;
				right:20px;
  				margin:60px 0 0 -4px;
				position: absolute;
				top: 0;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				width: 15px;
				border-top:1px solid #DDD;
				border-left:1px solid #DDD;
				}
        
        
            /* estilos para los LI del menu */
            #menu li{
                width:100%;
                background: #fff; 
                float: none;
                margin: 0px 0px -2 0;
                border:1px solid #DDD;
                font-size:95%;
            }

            /* Quitamos el borde del ultimo item del menú */
            menu li:last-child{ box-shadow: inset 5em 1em gold;}
                #menu li a{
                    padding: 14px 0;
                    height: auto;
					line-height: normal;
					font-family: 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;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
            border-bottom:1px solid #ddd;
        }
}
/* for 768px or less */
@media screen and (max-width: 768px) {
#cajanombre			{ padding:10px 0;}

.marca				{ font-size:100%;}
.subnombre			{ font-size:145%;}

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

}

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

}