/*ANIMACIONES Y TRANSICIONES*/

@keyframes ocultarmenu {
  from {top:0px;}
  to {top:-1000px;}
}
@keyframes mostrarmenu {
  from {top:-1000px;}
  to {top:0px;}
}
.menu-off,
.buscador-off {
	animation:ocultarmenu;
	animation-duration: 2s;
	top:-1000px;
	z-index:100;
}

.menu-on,
.buscador-on {
	animation:mostrarmenu;
	animation-duration: 2s;
	top:0px;
  left;
	z-index:100;
}

.menu-oculto {
	display:none;
}

/*RESPONSIVE
   ========================================================================= */
.displaynone {
	display:none;
}
.flexrow {
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}
#nav_migas {
	display: none;
}
div#encabezado {
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:105px;
	border-bottom:1px dotted #ccc;
	z-index:100;
  background: #fff;
  justify-content: space-around;
}
div#encabezado a#logo-ms {
  flex-basis:150px;
	background-size:contain;
}

div#encabezado a#logo-ms img {
  width:100%;
  padding:10px 0;
  margin: 0 auto;
  display: block;
  order:1;
}
#logo-csan {
  order:2;
}
#logo-sms {
  order:3;
}
#logo-ue {
  order:4;
}
#feder {
  order:5;
  flex-basis: 100%;
  font-size: 70%;
  border-top:1px dotted #555;
  border-bottom:1px dotted #555;
  margin-bottom:5px;
font-family: 'Quicksand', sans-serif;

  text-align: center;
}
#logo-csan,
#logo-sms,
#logo-ue {
  display:block;
  height:30px;
  padding-top:10px;
}
#logo-ue img {
  height:30px;
}
div#nivel2 {
  order:6;
  flex-basis:100%;
  justify-content: space-around;
  border-top: 1px dotted #ccc;
    padding-top: 5px;
}
div#feder a,
div#nivel2 a {
    color: #555;
}

ul#ppal_2_0 {
  padding:0px;
  margin:0;
  order:1;
  list-style: none;
}
ul#ppal_2_0 li {
  margin:0;
  margin-left:5px;
  padding:0;
}
#mostrar_secciones,
#mostrar-cuenta,
#mostrar-buscador {
	text-transform: uppercase;
	text-align: center;
	overflow:hidden;
	font-size:8px;
	flex-basis:48px;
	margin:0 5px;
	background:url('../../app/encabezado/imagenes/banner.logos.encabezado.png');
	background-repeat:no-repeat;
	background-size:15px;
	padding-top:15px;
	height: 15px;
}
#mostrar_secciones {
	order:2;
	background-position:center 0px;
}

#mostrar-cuenta {
	order:3;
	background-position:center -60px;
}
#mostrar-buscador {
	order:4;
	background-position:center -30px;
}
div#encabezado ul a {
	display:block;
	color:transparent;
	width:20px;
	height: 20px;
	background-image: url("../../app/encabezado/imagenes/redes_sociales_gr.gif");
	background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
	background-size: 20px;
}

div#encabezado ul a.rss {
	background-position: 0px 0px;
}
div#encabezado ul a.facebook {
	background-position: 0px -20px;
}
div#encabezado ul a.twitter {
	background-position: 0px -41px;
}
div#encabezado ul a.youtube {
	background-position: 0px -83px;
}
div#encabezado ul a.instagram {
	background-position: 0px -62px;
}
#buscador {
  left:0;
  margin-left: 0;
	position:fixed;
	width:100%;
	background:rgba(1,95,199,0.9);
	margin:0;
	padding:0;
}

#buscador.buscador-on * {
	flex-basis:90%;
	margin:10px 0;
}
#buscador div {
	text-align: center;
}

#buscador.buscador-on a {
	flex-basis:50%;
	color:#fff;
	display:block;
	text-align:center;
}

#buscador.buscador-on a.cerrar-buscador {
	display:block;
	text-align: right;
	border-bottom:1px solid #fff;
	flex-basis: 100%;
	padding:10px 50px;
	box-sizing: border-box;
}
/****************************************
USUARIO  ********************************
*****************************************/
div#usuario {
	background:rgba(204,204,204,0.8);
	height:1000px;
	color:#000;
	padding:10px;
	position:fixed;
	top:0px;
	left:0px;
	z-index:99999;
	width:100%;
	box-sizing: border-box;
}

div#usuario > div {
	width:100%;
	margin:0;
	background:rgba(247,141,47,0.9);
	padding:10px 20px;
	border-radius: 10px;
	-webkit-border-radius:10px;
	box-sizing: border-box;
}

div#usuario.displaynone {
	display:none;
}
div#usuario input {
	color:#333;
}

div#usuario form *,
div#usuario a {
	width:100%;
	font-size:100%;
	margin:20px 0;
	display:block;
}
div#usuario > div > a {
	text-decoration: underline;
}

a.desconectar{
	background:url('../../app/usuarios/imagenes/logout.png') no-repeat left center;
	background-size: 50px;
	padding-left:60px;
	box-sizing: border-box;
}
div#usuario h2 {
	color:#333;
	text-align: center;
}
ul#micuenta {
	display:none;
}

div#usuario img {
	width:100px;
	border-radius:50%;
	-webkit-border-radius:50%;
	margin:0 auto;
	display:block;
}
/****************************************
SECCIONES ********************************
*****************************************/

div#barra_menu_principal {
	font-size:130%;
}

div#barra_menu_principal ul * {
	display: block;
	padding:5px 10px;
}

div#barra_menu_principal *,
div#usuario * {
	color:#fff;
}

ul#secciones {
  left:0;
  margin-left: 0;
	position:fixed;
	width:100%;
	background:rgba(1,95,199,0.9);
	margin:0;
	padding:0;
  font-size:80%;
}


ul#secciones li#cerrar-secciones {
	text-align:center;
	background:#333;
}
#cerrar-secciones a::before,
#cerrar-usuario a::before,
#buscador.buscador-on a.cerrar-buscador::before {
	content: '  X  ';

}
span#cerrar-usuario,
ul#secciones li#cerrar-secciones {
	text-align: right;
}
ul#secciones li {
	border-bottom:2px solid #ccc;
}
/*************************************
ADMINFAST ****************************
*************************************/

ul.adminfast {
	position:fixed;
	bottom:0px;
	left:0px;
	display:block;
	width:100%;
	margin:10px 0 0 0;
	padding:0;
	display: -webkit-flex;
	-webkit-flex-direction: row;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	background: rgba(85,85,85,0.85);
	z-index: 9999;
	font-size:80%;

	list-style: none;
}

ul.adminfast a {
	display:inline-block;
	color:#fff;
	padding:5px 20px;

}

/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	div#encabezado {
    	position: static;
      justify-content: flex-start;
      height: auto;
      padding:10px 0;
  }
	#nav_migas {
		display: block;
		padding:5px;
		line-height:12px;
		background:#FFFFE1;
		border:1px solid #E6E6E6;
		border-radius:inherit;
		-moz-border-radius:inherit;
		margin: 0px ;
	}
  ul.adminfast {
    font-size:130%;
  }

  div#encabezado a#logo-ms {
    flex-basis:200px;
    margin-left:10px;

  }
  #logo-csan,
  #logo-sms,
  #logo-ue {
    height:30px;
    margin-left:10px;
  }
	#logo-ue img {
		  height:30px;
  }
  /*#logo-ue {
    height:25px;
    margin-left:10px;
    border-bottom:1px solid #aacaf1;
    padding-bottom:5px;
  }*/


  #feder {
    flex-basis: 180px;
    font-size: x-small;
    border:none;
    height:25px;
    border-bottom:1px solid #aacaf1;
    padding:10px 0 5px 15px;
  }
  #feder q {
    display: block;
  }
  a#mostrar_secciones,
	#mostrar-cuenta {
		display:none;
	}
  div#nivel2 {
    flex:1 1 auto;
    margin-left:10px;
    padding-top:10px;
    justify-content: flex-end;
    align-items: flex-start;
    border:none;
  }
  /****************************************
	SECCIONES ********************************
	*****************************************/
	div#barra_menu_principal {
		display: -webkit-flex;
		-webkit-flex-direction: row;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin:0;
		padding:0;
		font-size:100%;
		letter-spacing: 0.5px;
	}

	div#barra_menu_principal ul {
		display: -webkit-flex;
		-webkit-flex-direction: row;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		box-sizing:border-box;
	}
	div#barra_menu_principal ul li {
		padding:0px 3px;
	}
	ul#secciones {
		padding:5px 0 5px 25px;
		flex: 1 1 764px;
		text-align:center;
		position:static;
		box-sizing: border-box;
    background: #003979;
	}
	ul#secciones li {
		border:none;
	}
	ul#secciones li#cerrar-secciones {
		display:none;
	}
	ul#secciones li:not(:last-child) {
		border-right: 1px solid #fff;
	}

	ul#secciones a:hover {
		text-decoration: underline;
	}
	.seccion_actual{
		color:#ffffff;
		background:#7F92A3;
	}

	div#barra_menu_principal ul#micuenta {
		margin:0;
		padding:2px 5px;
		flex: 1 1 220px;
		background-color:#f78e2f;
		justify-content: center;
		box-sizing: border-box;
	}
	ul#micuenta li:first-child {
		background:url('../../app/encabezado/imagenes/user2.png') no-repeat left center;
		padding-left:20px;
		background-size:20px;
	}
	div#usuario > div {
		width:300px;
		margin:100px auto;
	}
	a.desconectar{
		padding-left:40px;
		background-size: 25px;
	}

  ul#ppal_2_0 {
    justify-content: flex-end;
	}


}
@media (min-width:1024px) {
  div#encabezado a#logo-ms {
    flex-basis:290px;
    margin-left:20px;

  }
  #logo-csan,
  #logo-sms,
  #logo-ue {
    height:53px;
    margin-left:20px;
  }
  #logo-ue img {
  	  height:53px;
  }
  #feder {
    flex-basis: 210px;
    font-size: 90%;
    padding-top:10px;
    padding-left:20px;
    height:35px;
  }
  div#barra_menu_principal {
		font-size:120%;
  }
}
@media (min-width: 1200px) {
  ul#secciones {
    font-size: 100%;
  }
  div#nivel2 {
    margin-right: 30px;
    flex-basis:250px;
  }
  div#encabezado a#logo-ms{
    margin-left: 30px;
  }
  #mostrar-buscador {
    display: none;
  }
  #buscador {
  	position:static;
    width:auto;
    background:transparent;

    display: -webkit-flex;
    -webkit-flex-direction: row;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


    flex-basis:240px;
    justify-content: flex-end;
  }
  #buscador span {
    margin-top:2px;
  }
  #buscador span a {
    padding-left: 10px;
  }
  #buscador span a:first-child {
    border-right:1px solid #555;
    padding-right:10px;
  }

  a.cerrar-buscador {
    display:none;
  }
  input#consulta {
    width: 150px;
    margin-top:2px;
    margin-right: 5px;
  }
  ul#ppal_2_0 {
    flex-basis:100%;
	}
}