@charset "UTF-8";
/*pagina, estilos generales*/	
body {margin: 0 auto;
	width:96%;}	
/*contenidos genericos*/
.oculto {display: none;}
#menuPrincipal>ul>li>a.apagado:hover {
	color: #444;
	cursor:default;
  }
#menuPrincipal>ul>li>a.apagado {
	color: #444;
  }
* {
	margin:0px;
	padding:0px;
	text-decoration: none;
	}
ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0px;
	margin-block-end: 0px;
}
/*imagenes*/
.imagenes {
	width:90%; 
	height:auto; 
	margin-left:5%;
	margin-right:5%; 
	margin-top:10px;
	}
/*Inico CCS elementos___________________________________________________________________*/
/*Cabecera, Logo y titulos*/
#encabezado {
	height: 150px;
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:space-between ;
	align-items: top;
	margin-top:20px;
	border-radius: 5px;
	background-color: #ccc;
	border-bottom: 2px solid #2C9AB7;
	background-image: -webkit-repeating-linear-gradient(180deg,rgba(150,150,150,0.5) 0%,rgba(80,0,180,0.3) 5%,rgba(150,150,150,0.5) 10%);
	background-image: -moz-repeating-linear-gradient(180deg,rgba(150,150,150,0.5) 0%,rgba(80,0,180,0.3) 5%,rgba(150,150,150,0.5) 10%);
	background-image: -o-repeating-linear-gradient(180deg,rgba(150,150,150,0.5) 0%,rgba(80,0,180,0.3) 5%,rgba(150,150,150,0.5) 10%);
	}
#micanvas {
	flex-basis: 17%;
	flex-grow: 1;
	margin: 0;
	height: 135px;
	width: 98%;
	}
#titulosPrincipales {
	flex-basis: 50%;
	flex-grow: 6;
	}
.titulo {
	font-weight: bold;
	font-style: normal;
	font-family: "Source Sans Pro";
	text-align: center;
	color: #550099;
	text-shadow: rgba(30,30,30,0.5) 3px 3px 2px;
	letter-spacing: 2px;
	font-size: 2.5em;
	margin-bottom:0.2em;
	margin-top:0.2em;
	margin-right: 0.3em;}
.subtitulo {
	font-weight: normal;
	font-family: Lucida Sans;
	font-style: oblique;
	font-size: 1em;
	text-align: right;
	margin-top: 1em;
	margin-bottom: 0;
	margin-right: 3%;}	
.stitulo{
	color:#509;
	text-align:center;
	font-size:1.8em;
	margin:-0.3em;}
/*Barras de navegación: Principal, redes sociales*/
#navegacion {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:space-between;
	background-color: #B3B3B3;
	align-items: center;
	font-size: 18px;
	padding-top: 3px;
	margin-bottom: 35px;
	}
#menuPrincipal {
	flex-basis:55%;
	flex-grow: 1;	
	margin:0px;
	background-color: #B3B3B3;
	}
#menuRedes {
	flex-basis: 30%;
	flex-grow: 1;
	margin:0px;
	background-color: #B3B3B3;
	}
#menuPrincipal>ul {
	margin: 0px;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:space-around;
	}
#menuPrincipal>ul>li {
	list-style: none;		
	font-family: "Source Sans Pro";
	font-weight: normal;	
	letter-spacing: 1px;	
	text-align: center;		
	transition: all 0.3s linear;
	}
#menuPrincipal>ul>li>a {color: #FFFFFF;}
#menuPrincipal>ul>li>a:hover {
	color: #550099;
	cursor: pointer;
	}
.colaboradores-externos a{ 
		color: #fff;
		font-size: 16px;
		line-height: 24px;
	}
.colaboradores-externos a:hover{ 
		color: #550099;
		cursor: pointer;
		font-size: 16px;
	}
#menuRedes table{
	width:100%;
	margin:0px;
	padding:0px;
	}
#menuRedes table td {
	text-align:center;
	background:#999;	
	}
#menuRedes table td img{ padding: 4px 2px;}
#menuRedes table td:hover{background:#9988dd;}
#menuRedes table td img:hover{
	background:#9988dd;
	cursor: pointer;
	}	
#arroba {
	font-size: 26px;
	font-weight: 900;
	font-family:Georgia, 'Times New Roman', Times, serif;
	cursor:pointer;
	}
#wasap {position: relative;}
#menuWasap {
	position:absolute;
	background-color: #9988dd;
	display:none;
	top:45px
	}
#wasap:hover  #menuWasap, #menuWasap:hover {display:block;}
#menuWasap li {
	width: 130px;
	padding:10px;
	font-size: 20px;
	text-align: left;	
	background-color: #999;
	}
#menuWasap li a{color:white;}
#menuWasap li a:hover{	
	color: #550099;
	cursor: pointer;
	}
#correo {position: relative;}

#contacto {width: 70%;float:left}

/*_____________________________________________________________________________________________________________________________________*/

#bloqueImagen>img{
	width:80%;
	margin:15px;}
#contenedor * {box-sizing: border-box;}
#contenedor {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	column-gap:3%;
	width:96%;
	justify-content:space-between;
	font-family: Source Sans Pro;}
#contenedor>section {
	flex:1;
	flex-grow: 1;
	flex-basis: 60%;}
#contenedor>aside {
	flex:1;
	flex-grow: 1;
	flex-basis: 30%;}
#bloques{
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	box-sizing: border-box;
	width:96%;
	row-gap:20px;
	align-content: space-between;}
#bloque1,#bloque2,#bloque3,#bloqueImagen{
	flex:1;
	width:100%}
#lateral{
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	box-sizing: border-box;
	width:96%;
	align-content: space-between;
	row-gap:50px;}
#lateral>figure,#horario,#servicios{
	flex:1;
	width:100%;}
#contenedor img {
	width:100%;}
#presentacion p,#funcionamiento p {
	padding: 0px 3%;
    text-align: justify;
    line-height: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #555555;
	font-size:1.1em;}
#contenedor h2 {
	color:#55A;
	text-align: center;
	font-size: 1.8em;}
#contenedor h3 {color:#55A;
	text-align: center;
	margin-bottom: 10px;
	font-size: 1.8em;}
.bloque{
	background: #dddddd;
    font-family: Arial;
    font-size: 1em;
    margin: 10px 4%;
    padding: 15px 5%;
    border-radius: 12px;}
.subBloque{
	width: 90%;
    margin: auto;
    margin-top: 5px;
	margin-bottom: 10px;
    background: #ccccdd;
    border-radius: 10px;
    padding: 3%;
	font-size: 1em;}
.personalizar {
	background: #6a6a6a;
	border-radius: 10px;
	color: white;
	padding: 2%;
	width: 80%;
	margin: auto;
	margin-top: 10px;}
.horarios  { 
	font-family:arial;
	font-size:1em;
	background:#ACBDB1;
	margin-left:5%;
	margin-right:5%;
	border-collapse:collapse;
margin-bottom: 20px;}
.horarios th {
	background:#9CADA1;
	padding: 2px 5px;}
.horarios td {
	padding-left: 15px;}
.horarios td[colspan="2"] {
	background:#9CADA1;
	font-size: 7px;}
.titulotabla {font-family: "Source Sans Pro";
	text-align:center;
	color:#55A;
	font-size:1em;
	padding:0;
	margin-top:10px;
	margin-bottom:5px;
	font-weight:600}
#servicios h3 {
	font-family: "Source Sans Pro";
	text-align:center;
	color:#55A;
	font-size:1.8em;
	padding:0;
	margin-top:10px;
	margin-bottom:5px;}
#servicios p{ 
	padding: 0px 3%;
	text-align: justify;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
	color: #555555;
	font-size:1.1em;}
#servicios img{
	width:100%;
	height:auto;
	margin-top:15px;
	margin-bottom:15px;}	
/*_____________________________________________________________________________________________________________________________________*/

	/*pie de pagina__________________________________*/
	.pie {
		display: flex;
		flex-flow:column;
		gap:10px;
	}
	#piePagina {
		width:96%;
		margin:0 auto;
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #717070;}
	#pie1, #pie2, #pie3 {
		flex-basis: 30%;
		flex-grow: 1;
		margin:1%;
		background-color:#cce;
		border-radius: 4px;
		min-height: 340px;
		text-align: center;}
	#final {
		width:100%;
		text-align: center;}
	.tablatelefonos{
		border:0; 
		width:60%;
		margin:auto;
		font-family:calibri;
		font-size:1.2em;	
		border-collapse:collapse;
		color:#55a;
		font-weight:900;}			
	.titulomapa h3{
		padding: 10px;
		margin: 0;
		color:#55A;}
	.titulomapa h4{
		padding: 10px;
		font-family:calibri;
		font-size:1em;
		color:#55a;}
	footer iframe {	margin:20px auto;}
	#pie3 h3{
		padding:10px 5%;
		color:#55a;	
		font-size:1.2em;
		margin-left:auto;
		margin-right:auto;
		font-family:calibri;}
			
		/*Medias________________________________________	*/
		
		@media (max-width: 470px) {
			#navegacion {font-size: 16px;}
			#micanvas {height: 50px;}
			#encabezado {height: 90px;}
			#titulosPrincipales h1 {font-size: 1.2em;}
			#titulosPrincipales h2 {display:none;}
			#menuPrincipal li {padding-top:16px; padding-bottom:16px;}
			#piePagina{flex-direction: column;row-gap: 10px;}
						#pie1, #pie2, #pie3 {flex-basis: 98%;} 
			#menuPrincipal>ul  {flex-direction: column; width:100vw;row-gap:10px;}
			#menuPrincipal{width:98%}
			#contenedor{flex-direction: column;row-gap: 10px;}
			#miSection {width:98%;max-width:100%;}
			#miAside {width:98%;max-width:100%;}
			#menuPrincipal ul{margin-bottom: 15px;}			
		}
		@media (min-width: 471px) and (max-width: 550px) {
			#menuPrincipal{width:98%}
			#menuPrincipal>ul  {flex-direction: column; width:98vw;row-gap:10px;}
			#menuPrincipal li {padding-top:16px; padding-bottom:16px;}
			#menuPrincipal ul{margin-bottom: 15px;}
		}
		@media (min-width: 471px) and (max-width: 768px) {
			#navegacion {font-size: 16px;}
			#micanvas {height: 75px;}
			#navegacionPrincipal ul{flex-direction: column;}
			#titulosPrincipales h1 {font-size: 1.5em;}
			#titulosPrincipales h2 {font-size: 1em;}
			#encabezado {height: 90px;}
			#piePagina{flex-direction: column;row-gap: 10px;}
			#pie1, #pie2, #pie3 {flex-basis: 98%;}
			#contenedor{flex-direction: column;row-gap: 10px;}
			#miSection {width:98%;max-width:100%;}
			#miAside {width:98%;max-width:100%;}
			#titulosPrincipales h2.subtitulo {font-size: 0.8em;}
			#principal h1 {font-size: 1.5em;}
			#principal h2 {font-size: 1em;}
			#principal h2.subtitulo {font-size: 0.8em;padding-right: 20px;}		
		}