@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
    font-family: "HindMadurai";
    src: url("/fonts/HindMadurai-Regular.ttf");
}

/*=============PLANTILLA BOTONES=============*/
.boton{
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 5px;	
	max-width: 350px;	
}
.boton a{
	font-family: Calibri, "Calibri Light", "Century Gothic", Century, Centaur;
	font-size: 25px;
	font-weight: bold;
	padding: 3px;
	text-decoration:none;
	 color: white;
	   text-shadow:
		   0.75px 0.75px 0 #000,
		 -0.75px -0.75px 0 #000,
		  0.75px -0.75px 0 #000,
		  -0.75px 0.75px 0 #000,
		   0.75px 0.75px 0 #000;
	text-align: center;
}
.boton:hover{
	box-shadow: 1px 4px 20px grey;
	transition-duration: .2s
}		

.boton:active{
	transform: scale(.9);
}
.normal{
	height: 50px;
	width: 70%;  /*Ancho del flex = botón*/
	max-width: 230px;
	margin: 10px;
}
.largo{
	height: 50px;
	width: 300px;  /*Ancho del flex = botón*/
	margin: 10px;
	padding:10px;
}
.verde{
	background: rgba(144,212,144,1);/* Old Browsers */
		background: -moz-linear-gradient(top, rgba(144,212,144,1) 0%, rgba(0,150,0,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(144,212,144,1)), color-stop(100%, rgba(0,150,0,1)));/* Chrome, Safari4+ */
		background: -webkit-linear-gradient(top, rgba(144,212,144,1) 0%, rgba(0,150,0,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(144,212,144,1) 0%, rgba(0,150,0,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(144,212,144,1) 0%, rgba(0,150,0,1) 100%); /* IE 10+ */
		background: linear-gradient(to bottom, rgba(144,212,144,1) 0%, rgba(0,150,0,1) 100%);/* W3C */
		filter: progid:DXImageTransfor
		Microsoft.gradient( startColorstr='#90d490', endColorstr='#009600', GradientType=0 );/* IE6-9 */	
}
.azul{
	background: rgba(154,170,173,1);
		background: -moz-linear-gradient(top, rgba(154,170,173,1) 0%, rgba(75,73,189,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,170,173,1)), color-stop(100%, rgba(75,73,189,1)));
		background: -webkit-linear-gradient(top, rgba(154,170,173,1) 0%, rgba(75,73,189,1) 100%);
		background: -o-linear-gradient(top, rgba(154,170,173,1) 0%, rgba(75,73,189,1) 100%);
		background: -ms-linear-gradient(top, rgba(154,170,173,1) 0%, rgba(75,73,189,1) 100%);
		background: linear-gradient(to bottom, rgba(154,170,173,1) 0%, rgba(75,73,189,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9aaaad', endColorstr='#4b49bd', GradientType=0 );
}
.rojo{
	background: rgba(252,104,104,1);
	background: -moz-linear-gradient(top, rgba(252,104,104,1) 0%, rgba(201,77,14,1) 69%, rgba(199,76,10,1) 72%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,104,104,1)), color-stop(69%, rgba(201,77,14,1)), color-stop(72%, rgba(199,76,10,1)));
	background: -webkit-linear-gradient(top, rgba(252,104,104,1) 0%, rgba(201,77,14,1) 69%, rgba(199,76,10,1) 72%);
	background: -o-linear-gradient(top, rgba(252,104,104,1) 0%, rgba(201,77,14,1) 69%, rgba(199,76,10,1) 72%);
	background: -ms-linear-gradient(top, rgba(252,104,104,1) 0%, rgba(201,77,14,1) 69%, rgba(199,76,10,1) 72%);
	background: linear-gradient(to bottom, rgba(252,104,104,1) 0%, rgba(201,77,14,1) 69%, rgba(199,76,10,1) 72%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc6868', endColorstr='#c74c0a', GradientType=0 );
}
.small{
	transform: scale(.9);
	height: 50px;
}
.small a{
	font-size: 22px;
	padding: 10px;
}
.separado{
margin-top: 25px;
}
/*=============INDEX=============*/
	/*CABECERA*/
.cabecera{
	background: rgba(255,243,110,1);
	background: -moz-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,243,110,1)), color-stop(100%, rgba(138,96,33,1)));
	background: -webkit-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: -o-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: -ms-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff36e', endColorstr='#8a6021', GradientType=1 );
	
	background-size: cover;
	background-attachment: fixed;
	height: 100vh;
	width: 100%;
	box-shadow: 0px 5px 50px grey;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: 40px;
	text-align: center;
	
	animation-name: cabecera;
	animation-delay: 2s;
  	animation-duration: 2s;
	animation-timing-function: ease; /**Tipo de desplazamiento*/
	animation-fill-mode: forwards; /*Deja la fijo el último keyframe de la animación*/

}

@keyframes cabecera {
  to {
	  height: 28vh;
	  flex-direction: row;
	  background-position: 0 -100px;
	}
}

.cabecera div{
	margin: 2%;


}

.imgCabecera{
		animation-name: imagen;
		animation-delay: 2s;
		animation-duration: 2s;
		animation-timing-function: ease; /*Tipo de desplazamiento*/
		animation-fill-mode: forwards; /*Deja la fijo el último keyframe de la animación*/
}
	.imgCabecera img{
		height: 100%;	
		}
	.textCabecera{
		display: flex;
		font-family: 'Libre Baskerville', serif;
		font-size: 2.5vh;
		width: 60%;
		
		animation-name: texto;
		animation-delay: 2s;
		animation-duration: 2s;
		animation-timing-function: ease; /*Tipo de desplazamiento*/
		animation-fill-mode: forwards; /*Deja la fijo el último keyframe de la animación*/

		}
@keyframes imagen {
	0%{
		width: 100%;
	}
	25%{
		opacity: 0;
		transform: translateX(-500px);
	}
	100%{
		width: 20%;
		height: 80%;
	}
}
@keyframes texto{
	0%{
}
	25%{
		opacity: 0;
		transform: translateX(500px);
		align-items: center;
	}
	100%{
		margin-left: 2%;
		font-size: 1vw;
		width: 40%;
		align-items: center;
	}
}
	/*BODY*/

.page-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin-bottom:10%;
}
	.main {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
		align-content: space-between;
		width: 60%;
}
	.imgSumario{

		width: 100%;
}
	.imgSumario img{
		width: 100%;
		height: 150px;
}
	.sumarioHover{
		position: absolute;
	 	bottom: 0;
	  	left: 100%;
	  	right: 0;
	  	background-color: #008CBA;
	  	overflow: hidden;
	  	width: 0;
	  	height: 100%;
	  	transition: .5s ease;
}
	.main:hover .sumarioHover {
		width: 100%;
  		left: 0;
}
	.sumarioHover h2 {
		  white-space: nowrap; 
		  color: white;
		  font-size: 20px;
		  position: absolute;
		  overflow: hidden;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
}

	.secciones{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;	
		margin-top: 4%;
		width: 100%;
}
		.seccion{
			width: 100%;
}
		.titulo{
			margin-bottom: 2%;
			position: relative;
}
		.titulo img{
			width: 100%;
}
		.titulo h2{
			position: absolute;
			text-shadow: 3px 3px 6px black;
			top: 75%;
			left: 20%;
			font-family: 'Libre Baskerville', serif;
			font-size: 5vh;
			color: white;	
}
		.seccion{
			width: 100%;
			background-color: lightblue;
			padding-bottom: 2%;
}
		.texto{
			width: 60%;
			text-indent: 50px;
			margin: 0 auto;
			line-height: 35px;
			font-family: Calibri, "Calibri Light", Arial, Helvetica, sans-serif;
			font-size: 20px;
			text-align: left;
}
		.texto p{ 
			padding-bottom: 25px; /*Más espaciado entre párrafos*/
}
		.texto_servicios{
			width: 60%;
			margin: 0 auto;
			line-height: 30px;
			font-family: Calibri, "Calibri Light", Arial, Helvetica, sans-serif;
			font-size: 20px;
}
		.texto_servicios li{
			text-indent: 0;
			background-color: #6fbbd3 ;
			list-style-type: none;
			margin-top: 20px;
			text-align: center;
}
		.consentimiento{
			width: 60%;
			margin: 0 auto;
			line-height: 20px;
			font-family: Calibri, "Calibri Light", Arial, Helvetica, sans-serif;
			font-size: 15px;
}
.footer_flotante{
		width: 100%;
		animation-name: footer;
		animation-delay: 2s;
		animation-duration: 2s;
		animation-timing-function: ease; /*Tipo de desplazamiento*/
		animation-fill-mode: forwards; /*Deja la fijo el último keyframe de la animación*/
}
.footer_flotante img{
		margin: 2%;
		width: 40%;
}
	@keyframes footer{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 0;
		}
	100%{
		opacity: 1;
		background-color:  white;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
}
/*--------RESPONSIVE-----------*/
/*---------------- 800px ------------*/
	/*CABECERA*/
@media screen and (max-width: 800px) {

	.cabecera{
		background-position: 25%;
	}
	.textCabecera{
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
		font-size: 2.5vw;
		width:  100%;
}	
	@keyframes cabecera {
 	 to {
	 	height: 20vh;
	  	flex-direction: row;
	 	background-position: 0 -100px;
	}
}
	@keyframes imagen {
	0%{
		width: 100%;	
		}
	25%{
		opacity: 0;
		transform: translateX(-500px);
	}
	100%{

		height: 80%;

	}
}
@keyframes texto{
	25%{
		opacity: 0;
		transform: translateX(500px);
		align-items: center;
	}
	100%{
		font-size: 100%;
		width: 60%;

	}
}
	/*BODY*/
	.page-wrapper{
	margin-bottom:20%;
	}
	.main{
	width: 90%;
	flex-direction: column;
}
	.articulo{
	flex-direction: row;
    width: 100%;
	align-items: center;
}
	.articulo img{
	width: 50%;
	margin: 20px 5px;
	}
	.texto_servicios{
		width: 90%;
	}
	.titulo h2{
		top:65%;
		left: 10%;
		font-size: 5vw;
}
	.footer_flotante img{
		margin: 10px;
		width: 90%;
	}
}
/*---------------- 480px ------------*/
	/*CABECERA*/
@media screen and (max-width: 480px) {
	.imgCabecera{
		align-items: center;
		width: 90%;
	}
	.imgCabecera img {
		width: 100%; /*100% del flex*/
	}
	.textCabecera{
		font-size: 100%;
		width: 90%;
	}
	@keyframes cabecera {
  	to {
		height: 18vh;
		flex-direction: row;
		background-position: 25% -150px;
	}
}
	@keyframes imagen {
	25%{
		opacity: 0;
		transform: translateX(-500px);
	}
	100%{
		width: 30%;
	}
}
	@keyframes texto{
	25%{
		opacity: 0;
		transform: translateX(500px);
		align-items: center;
		font-size: 100%;
	}
	100%{
		margin-left: 2%;
		font-size: 50%;
		align-items: center;
		width: 70%;
		height: 100%;
	}
}	
	/*BODY*/
	.page-wrapper{
	margin-bottom:20%;
	}
	.boton {
		width: 80%;
	}
	.titulo h2{
		top:60%;
		left: 10%;
		font-size: 5vw;
}
	.texto{
		column-count: 1;
		width: 90%;
}
	.texto_servicios{
		text-indent: 50px;
		width: 90%;
	}
	.texto_servicios li{
		text-align: left;
		text-indent: 0px;
		padding-left: 20px;
	}
}

/*=============ACCESO=============*/
		/*CABECERA*/
.page-wrapper_acceso{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 80vh; /*El body (page wrapper) ocupa el 80%*/
}
.cabecera_corta{
	background: rgba(255,243,110,1);
	background: -moz-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,243,110,1)), color-stop(100%, rgba(138,96,33,1)));
	background: -webkit-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: -o-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: -ms-linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	background: linear-gradient(45deg, rgba(255,243,110,1) 0%, rgba(138,96,33,.6) 100%), url("../img/fondo_index.jpg");
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff36e', endColorstr='#8a6021', GradientType=1 );
	
	background-position:-10% 20%;
	
	background-size: cover;
	
	height: 20vh; /*La cabecera ocupa el 20% de la vista*/
	box-shadow: 0px 5px 50px grey;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
	.imgCabecera_corta {
		width: 20%;
		padding: 20px;
		max-width: 400px;
	}
	.imgCabecera_corta img{
		max-width: 100%; /* Ocupa el ancho del flex*/
		max-height: 100%;	
}

	.textCabecera_corta{
		text-align: center;
		align-self: center;
		font-family: 'Libre Baskerville', serif;
		font-size:80%;
		width: 50%;
		max-width: 1000px;
		}

	/*BODY*/

	.main_acceso{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 2% 0 2%;
		height: 100%;
		width: 100%;	
	}
	.contrasena{ /*Engloba "Acceso al servicio" y el cajetín de la clave*/
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}

	.contrasena p{
		font-family: Calibri, "Calibri Light", Arial, Helvetica, sans-serif;
		font-size: 25px;
		
}
	.cajetin{ /*Engloba todo lo metido en la caja con línea gris*/
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #aaa;
}
	.cajetin i{
		min-width: 10px;
		text-align: center;
		margin: 10px;
}
	.cajetin input{
		font-family: Calibri, "Calibri Light", Arial, Helvetica, sans-serif;
		font-size: 18px;
		border: none;
		padding: 10px;
		
}
	.botoneria{ /* Incluye los botones*/
		display: flex;
		flex-direction:column;
		justify-content: space-around;
		align-items: center;
		height: 200px;
		width: 100%; /*Este flex ocupa toda la pantalla al 100%*/
}
	.footer {
	bottom: 0;
}

/*--------RESPONSIVE-----------*/
/*---------------- 1000px ------------*/
@media screen and (max-width: 1000px){
	.textCabecera_corta{
		font-size: 1.9vw;
	}
		.imgCabecera_corta{
		width: 30%;
	}
}
/*---------------- 600px ------------*/
@media screen and (max-width: 600px){
	.cabecera_corta{
		align-items: center;
}
	.imgCabecera_corta{
		width: 40%;
	}
	.textCabecera_corta{
		font-size: 2vw;
		width:50%;
	}
	.main_acceso{
		height: 80vh;
		justify-content: center;
	}
}
/*============= ACCESO- =============*/
.botoneria_acceso-{/* Incluye los botones*/
		display: flex;
		flex-direction:column;
		justify-content: space-around;
		align-items: center;
		height: 90%; 
		max-height: 450px;
		width: 100%; /*Este flex ocupa toda la pantalla al 100%*/
}
/*--------RESPONSIVE-----------*/
/*---------------- 1000px ------------*/
@media screen and (max-width: 1000px) {
	.botoneria_acceso-{
		height: 90%;
	}
	.footer img{
		margin: 10px;
		width: 90%;
	}
}