/* ESTILOS NORMALES (para móviles en vertical)
   ========================================================================= */


h1 {
	color:#993340;
	text-align:center;
}

div#middle a {
	color:#555;
	background:transparent;
	display: block;
	padding:5px 0;
	margin:0;
}

ul.actualidad li {
	background: transparent;
}
ul.actualidad li img {
	display:none;
}
div#middle div.texto_libre a {
	display:inline;
	background: transparent;
	color:#00f;
	padding:0;
	text-decoration: underline;
}
div.texto_libre {
	border:1px dotted #ccc;
	background:#ddd;
	padding:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	margin:10px 0;
}
div#middle a:hover {
	background:#333;
}

div#middle ul {
	list-style-type:none;
	list-style-image:none;	
	margin:0em;
	padding:0em;
}

div#telefonos-informacion-ope {
	margin:10px 0;
	border-bottom:1px dotted #ccc;
	border-top:1px dotted #ccc;
	padding:10px 0;
	box-sizing: border-box;
}

div#telefonos-informacion-ope li,
div#telefonos-informacion-ope strong {
	flex-basis:100%;
	box-sizing: border-box;
	text-align: center;
	font-weight: normal;
	font-size:120%;
}
[href^="tel:"]::before {
    content: "\260E   ";
    color: #333;
}

div#middle div#ope-ppal > * {
	flex-basis: 49%;
	text-align:center;	
	color:#444;
	font-weight: bold;
	box-shadow:5px 5px 5px #555;
	font-size:120%;
	padding:30px 5px;
	margin:10px 0.5%;
	box-sizing: border-box;
	background:#FFD073;
	border-radius:10px;
	-webkit-border-radius:10px;
}
div#middle div#ope-ppal > a:hover {
	background:#fa0;
}
div#middle div#ope-ppal > div > a {
	display: block;
}
div#middle div#ope-ppal > div > a:hover {
	background:transparent;
	color:#333;
}

#actualidad_ope {
	margin-top:10px;
	padding:10px;
	border:1px solid #ccc;
	background:#c5dcd8;
	box-shadow: 5px 5px 5px #aaa;
	border-radius:10px;
	-moz-border-radius:10px;
}
#actualidad_ope h2 {
	color:#22655a;
}
ul#listado_grupos {
	flex-basis:100%;
	max-width:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

ul#listado_grupos > li {
	border-radius:10px;
	-webkit-border-radius:10px;	
	box-shadow: 5px 5px 5px #aaa;
	margin-bottom:10px;
	width:100%;
}
ul#listado_grupos > li a {
	overflow:hidden;

}
ul#listado_grupos > li:nth-child(odd) {
	border:1px solid #993340;
}

ul#listado_grupos > li h2 a,
ul#listado_grupos > li h2 a:hover {
	font-size:60%;
	color:#555;	
	padding:3px 5px;
	border-radius:5px;
	background:#fff;
	margin:0 5px;
}
ul#listado_grupos > li:nth-child(even) {
	border:1px solid #22655a;
}

ul#listado_grupos h2 {
	max-width: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	margin:0%;
	padding:10px;
	color:#fff;
	border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
}

ul#listado_grupos > li:nth-child(odd) h2 {
	background: #993340;
}

ul#listado_grupos > li:nth-child(odd) h3 {
	color:#993340;
}
ul#listado_grupos > li:nth-child(even) h2 {
	background:#22655a;
}
ul#listado_grupos > li:nth-child(even) h3 {
	color:#22655a;
}
ul#listado_grupos > li > ul {
	padding:10px;
	max-width: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}


div.informacion_comun {
	border:1px solid #993340;
	border-radius:10px;
	-webkit-border-radius:10px;	
	padding:10px;
	background:#fbe1e4;
	box-shadow: 5px 5px 5px #aaa;
	flex-basis:100%;
}
div.informacion_comun h2 {
	color:#993340;
}

div.informacion_comun h3 {
	color:#993340;
	border-bottom:5px solid #993340;
}

div.informacion_comun h4 {
	color:#993340;
}

ul#caja_especialidades li {
	flex-basis:100%;
}
/* Capa que oculta el fondo */
.black_overlay {
	display: none;
	/*display: block;*/
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}

/* Capa que contendrá los datos */
.white_content {
	display: none;
	position: fixed;
	top: 15%;
	left: 15%;
	width: 75%;
	border: 1px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
	padding:1em;
}

.displayblock {
	display:block;
}

div#middle a.enlaceseccion {
	display:none;
}

span.html {
	display:none;
}
@keyframes mostrarmensaje {
  0%   {top:-300px;}
  25%  {top:0px;}
  50%  {top:0px;}
  75%  {top:0px;}
  100% {top:-300px;}
}
.ope-advertencia {
	background:rgba(255,116,0,0.8);
	color:#fff;
	font-size:110%;
	text-align: center;
	position: fixed;
	top:-300px;
	left:0;
	width:100%;
	height:50px;
	vertical-align: middle;
	margin:0 auto;
	z-index:99999;
	padding:20px 10px;
	animation:mostrarmensaje;
	animation-duration: 7s;
}

/*RESPONSIVE
   ========================================================================= */
 
/* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	ul#listado_grupos > li {
		max-width:100%;
	}
	ul#caja_especialidades li {
		flex-basis:30%;
	}
}
 
/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	h1 {
		font-size:150%;
	}
	h2,
	h3 {
		font-size:120%;
	}
	div#middle {
		font-size:large;
	}
	div#middle a {
		display: inline;
		padding:5px 0;
	}
	div#middle a:hover {
		background:transparent;
	}
	ul#listado_grupos {
		flex-basis:60%;
	}
	div.informacion_comun {
		flex-basis:35%;
	}
	div.informacion_comun li,
	ul.documentos_convocatoria li,
	ul#caja_especialidades li,
	ul.actualidad li { 
		padding-left: 30px;
		background:url('../imagenes/bullet-adelante.png') no-repeat left 5px;
	}
	ul.listado_opciones li {
		padding: 5px 0px 5px 30px;
	}
	ul.documentos_convocatoria li {
		padding: 5px 0 5px 30px;
		background-position: left 10px;
	}

	ul.documentos_convocatoria.reducido li:nth-child(n+6) {
		display: none;
	}
	ul.documentos_convocatoria.reducido li:last-child {
		display: block;
	}
	ul.actualidad li {
		background-position:10px 15px;
	}


	ul#caja_especialidades li {
		flex-basis:20%;
		padding-bottom:15px;
	}	
	div#telefonos-informacion-ope li,
	div#telefonos-informacion-ope strong {
		flex-basis:auto;
		font-size:120%;
	}
}
 
/* Escritorios muy anchos
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}