#cabecera{
	background:#ffffff;
	position:relative;
	height:9.5em;
	width:100%;
	margin:0;
	margin-top:0.25em;
	z-index:0}
#cabecera #logo{
	/*margin:0.5em 2em 0.5em 5em;*/
	float:left;
	height:7em;}
#cabecera div.separador{
	float:left;
	border-left:#e4e4e4 solid 0.3em;
	margin-left:0.5em;
	padding-left:1em
}
#cabecera div.separador #titulo{margin-top:1.5em}

#cabecera div.separador #titulo p.titulo{
	font-size:3.5em; 
	font-family:Arial;
	font-weight:lighter;
	margin-bottom:0;
}
#cabecera div.separador #nombre{font-weight:bold; font-size: .75rem;}
#cabecera div.separador #nombre #representante{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-style:italic; font-weight:normal}

#cabecera div.separador #nombre a{
	font-weight:bold;
	color:#0c79a0;
	font-weight:normal;
    display:block;
    margin-top:.5em;
	margin-bottom: .5em;
}

#cabecera div.separador #nombre a:before {
    font: normal 14px/1 FontAwesome;
    margin-right: 0.3em;
    font-weight: normal;
    content: "\f2be";
}

#cabecera div#imagenSede{float:right;display:block;/*margin-right:5em*/}
#cabecera div#imagenSede img{height:9em}

/*---------------------------------BARRA MENU SUPERIOR----------------------------*/
#BarraTramites{
	float:none; 
	margin:0em;
	font-family:arial; 
	background-color:#2a708a;
	font-weight:bold;
	height:5em;
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.contenedorFechas {
	align-self: center;
}

#BarraTramites .Grupos{
list-style-type: none;
text-align: left; 
margin-bottom: 0;
padding-left:5em;
background-color:transparent;
display: flex;
height: 100%;
align-items: flex-end;
}

#BarraTramites .Grupos li {
background-color:#058AB7;
display:block;
float:left;
font-size:1.1em;
margin-bottom:0;
margin-left:0.25em;

padding:0.6em 1.4em 0.2em;
border-bottom:3px solid #058AB7;
}

#BarraTramites .Grupos li.selected{
background-color:#e2f08e;
color:#000000;
border-bottom:3px solid #CBE347;
}

#BarraTramites .Grupos li a{
text-decoration: none; 
position: relative;
z-index: 1;
border: 0;
color: #ffffff;
font-weight:bold;
padding:0em;
margin:0em;
}

#BarraTramites .Grupos li.selected a
{
color:#000000;
}

#BarraTramites #fecha{
	font-size:1.1em;
	float:right;
	color:#ffffff;
	font-weight:normal;
	padding-right:3em;
	font-family:Arial;
	clear:right
}
#BarraTramites #fecha #HoraOficial{color:#ffffff;font-family:Arial}

#BarraTramites #ultimoacceso{
	font-size:1.1em;
	float:right;
	color:#ffffff;
	font-weight:normal;
	padding-right:3em;
	font-family:Arial;
	margin-top:0.25em;
	clear:right
}
#BarraTramites #ultimoacceso #DatosCon {color:#ffffff;font-weight:normal;font-family:Arial}

/*---------------------------------BARRA MENU SECUNDARIA----------------------------*/
#BarraTramites2{
	float:none; 
	margin:0em;
	font-family:arial; 
	background-color:#e1ef8e;
	font-weight:normal;
	height:3em;
	border-bottom:3px solid #cbe347;
}
#BarraTramites2 .Grupos2{
list-style-type: none;
text-align: left; 
margin-bottom: 0;
padding-left:5em;
background-color:transparent;
height:1em;
}

#BarraTramites2 .Grupos2 li {
background-color:#e1ef8e;
display:block;
float:left;
font-size:1.2em;
margin-bottom:0;
margin-left:0.25em;
margin-top:0em;
padding:0.5em 1em 0.25em;
}

#BarraTramites2 .Grupos2 li.selected{
text-decoration: none; 
}

#BarraTramites2 .Grupos2 li a{
text-decoration: underline; 
position: relative;
z-index: 1;
border: 0;
color: #000000;
font-weight:normal;
padding:0em;
margin:0em;
}

#BarraTramites2 .Grupos2 li.selected a
{
color:#000000;
text-decoration:none
}

@media only screen and (max-width: 1024px) 
{
	#cabecera div#imagenSede { display:none; }
	#cabeceraMenu { position: fixed; height: 100%; width: 40%; background-color: #2a708a; left: 0; top: 0; 
		z-index: 9999999; overflow: hidden; padding-top: 5em; }
		#BarraTramites .Grupos{
display: block;

}
	#BarraTramites .Grupos.Pestanas li { width: 100%; border-radius: 10px 0 0 10px; margin: 0 0 .5em 0 !important; }
	#cabeceraBarraTramites { position: absolute; top: 1em; right: 2em; z-index: 99999999999; }
	#open, #close { display: inline-block; }
	#close { color: White; font-size: 2em;} 
	#open { width: 1em; font-size: 2em; position: relative; bottom: -1em; left: .5em; color: White; }
	
	.menuCerrado { display: none !important; }
	.menuAbierto 
	{
		display: block !important; 
		-webkit-animation-name: animacionAbrir; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
		animation-name: animacionAbrir;
		animation-duration: 1.5s;
		
		@keyframes animacionAbrir 
		{
			from { width: 10% !important; }
			to { width: 40% !important; } 
		}		
    }
    #BarraTramites #fecha { margin-top: .5em; }   

}

@media only screen and (max-width: 768px) 
{		
	#cabecera #logo { margin: 0.5em 2em 0.5em 1em !important; }
	#cabeceraMenu { width: 90% !important; }
}

@media only screen and (max-width:626px) 
{
	#cabecera { height: 7.5em !important; }
	#cabecera div.separador #titulo p.titulo { font-size: 1.7em; margin-top: 0.2em;}
	#logo { width: 30%; height: auto !important; }
	.separador { width: 100%; }
	#cabecera div.separador #titulo { margin-top: 2em; }	
	/* Página - Envio Registro */
	#BarraTramites2 { float:left; height: auto; width: 100%; }
	#BarraTramites2 .Grupos2 { padding-left: 0; }
	#BarraTramites2 .Grupos2 li { width: 100%; padding: 1em; }	
}

@media only screen and (max-width: 375px) 
{
	#titulo { margin-top: 0 !important; } 
	#cabecera { height: 7.5em !important; }
	#botonSalir { margin-right: 0 !important; }
}