@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Dosis:400,700);
@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);


body{
	margin:0;
	font:400 16px 'Dosis', 'Arial Narrow', sans-serif;
	background:#F5F5F5;
	position: relative;
}

.margen{
	width:100%;
	max-width:1300px;
	display:block;
	margin:auto;
	clear:both;
}

.margenCentro {
	width:100%;
	max-width:1300px;
	display:block;
	margin:auto;
	clear:both;
	text-align:center;
}

/* ESTILOS PARA LOGIN*/

.container {
	
	padding: 20px;
	border-radius: 20px;
	background-color: #fff;
  }

  .form {
	max-width: 500px;
	display: flex;
	flex-direction:column;
	gap: 20px;
  }

  .form .btn-container {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
  }

  .form .btn {
	width: 100%;
	padding: 15px 20px;
	cursor: pointer;
	letter-spacing: 3px;
	border-radius: 10px;
	border: solid 1px #1034aa;
	border-bottom: solid 1px #90c2ff;
	background: linear-gradient(135deg, #0034de, #006eff);
	color: #fff;
	font-weight: bolder;
	transition: all 0.2s ease;
  }

  .form .btn:active {
	box-shadow: inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;
	transform: scale(0.995);
  }
  
  .input-field {
	position: relative;
  }

  .input-field label {
	position: absolute;
	color: #8d8d8d;
	pointer-events: none;
	background-color: transparent;
	left: 15px;
	top: 7px;
	transform: translateY(0.6rem);
	transition: all 0.3s ease;
  }

  .input-field input {
	padding: 10px 0px;
	padding-left: 15px;
	font-size: 1rem;
	border-radius: 8px;
	border: solid 1px #8d8d8d;
	letter-spacing: 1px;
	width: 21.3em;
	font-weight: bold;
  }

.input-field input:focus,
.input-field input:valid {
  outline: none;
  border: solid 1px #0034de;
}

.input-field input:focus ~ label,
.input-field input:valid ~ label {
  transform: translateY(-51%) translateX(-10px) scale(0.8);
  background-color: #fff;
  padding: 0px 5px;
  color: #0851b0;
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
  border-radius: 100px;
}

.form .passicon {
	cursor: pointer;
	font-size: 1.3rem;
	position: absolute;
	top: 6px;
	right: 8px;
  }

  /* TERMINA ESTILOS PARA LOGIN*/
 
.logIn{
	width:80%;
	max-width:400px;
	display:block;
	background:#FFF;
	text-align:center;
	padding:1.5%;
	margin:5% auto;
	box-shadow:#0F0D38 5px 5px 10px;
	border-radius:5px;
}
.titleCampo{
	font:700 21px 'Dosis', 'Arial Narrow', sans-serif;
}
.logIn img{
	width:80%;
	max-width:250px;
	height:auto;
}
.campo1{
	font:400 16px 'Dosis', 'Arial Narrow', sans-serif;
	width:90%;
	height:auto;
	margin:2% auto;
	padding:2%;
	text-align:left;
	color: #3C3C3B;
}
.campo2{
	font:400 16px 'Dosis', 'Arial Narrow', sans-serif;
	width:70%;
	height:auto;
	margin:1% auto;
	padding:2%;
	text-align:left;
	color: #3C3C3B;
	display:inline-block;
}
.btnBuscar{
	width:19%;
	height:auto;
	background:#000;
	color:#FFF;
	text-decoration:none;
	padding:1.5% 1%;
	margin:1% 1%;
	font:400 24px 'Pathway Gothic One', 'Arial Narrow', sans-serif;
	border:0;
	vertical-align:bottom;
}
.btnBuscar:hover{
	color:#FFF;
	background:#3A69B0;
}
.btn1{
	width:auto;
	height:auto;
	background:#1154ba;
	color:#FFF;
	text-decoration:none;
	padding:10px 20px;
	margin:10px;
	font:400 24px 'Pathway Gothic One', 'Arial Narrow', sans-serif;
	border-radius: 10px;
}
.btn1:hover{
	color:#FFF;
	background:#000;
}
.btn2{

	width:auto;
	height:auto;
	background:#3A69B0;
	color:#FFF;
	text-decoration:none;
	padding:10px 20px;
	margin:10px;
	font:400 24px 'Pathway Gothic One', 'Arial Narrow', sans-serif;
	float: inline-end;
	border-radius: 10px;
	transition: all 0.2s ease;
}

.btn2:active {
	box-shadow: inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;
	transform: scale(0.95);
  }

.btn2:hover{
	color:#FFF;
	background:#315a97;
}
.btn3{
	width:auto;
	height:auto;
	background:#93C01F;
	color:#FFF;
	text-decoration:none;
	padding:10px 20px;
	margin:10px;
	font:400 24px 'Pathway Gothic One', 'Arial Narrow', sans-serif;
	border:0;
}
.btn3:hover{
	color:#FFF;
	background:#39A935;
}
.ngo{
	color:#000;
	text-decoration:none;
}
.ngo:hover{
	color:#3A69B0;
}
header{
	width:100%;
	height:auto;
	background:#FFF;
	display:block;
	padding:10px 0;
	border-bottom:5px solid #3A69B0;
}
article{
	padding:20px 0;
	width:100%;
	font-size:18px;
}
footer{
	width:100%;

	background:#FFF;
	text-align:center;
	border-top:5px solid #3A69B0;
	position: fixed;
	bottom: 0;
	z-index: 1000;
}
.bco{
	color:#333;
	text-decoration:none;
}
.bco:hover{
	color:#C6C6C5;
}
.logo{
	width:19.5%;
	display:inline-block;
	vertical-align:top;
	height:auto;
	margin:auto 1%;
}

.titleAzul{
	font:400 45px 'Pathway Gothic One', 'Arial Narrow', sans-serif;
	color:#3A69B0;
}

.icoInicio{
	width:15.4%;
	margin:0.5%;
	display:inline-block;
	vertical-align:top;
	max-width:200px;
	text-align:center;
	font:700 21px 'Dosis', 'Arial Narrow', sans-serif;
	color:#333;
	text-decoration:none;
}

.icoInicio:hover{
	color:#3A69B0
}
.icoInicio img{
	width:100%;
	max-width:200px;
	height:auto;
	margin:0 0 10px 0;
}

.topDer{
	width:70%;
	margin:0 0 0 3%;
	display:inline-block;
	vertical-align:top;
}

nav{
	margin:20px 0 0 0;
	clear:both;
}

.col40{
	width:37%;
	padding:1%;
	display:inline-block;
	vertical-align:top;	
}

.col50{
	width:47%;
	padding:1%;
	display:inline-block;
	vertical-align:top;	
}

.col50Right{
	width:48%;
	padding:1%;
	display:inline-block;
	vertical-align:top;	
	text-align:right;
}

.col20{
	width:17%;
	padding:1%;
	display:inline-block;
	vertical-align:top;	
	text-align:center;
}

.col25{
	width:22%;
	padding:1%;
	display:inline-block;
	vertical-align:top;	
	text-align:left;
}
.pleca2{
	width:100%;
	height:auto;
	border-bottom:2px solid #333;
	font:700 21px 'Dosis', 'Arial Narrow', sans-serif;
	clear:both;
}
.pleca1{
	width:100%;
	height:auto;
	border-bottom:1px solid #333;
	word-wrap:break-word;
}
.col30{
	width:30%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
}
.col30Buscador{
	width:30%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
}
.col15{
	width:14%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
	word-wrap:break-word;
}
.col15Title{
	width:14%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
	word-wrap:break-word;
}
.col10{
	width:8%;
	padding:1% 0.5%;
	display:inline-block;
	vertical-align:top;
	word-wrap:break-word;
}
.imgListado{
	width:100%;
	max-width:80px;
	height:auto;
	max-height:80px;
}
.campo3{
	font:400 18px 'Dosis', 'Arial Narrow', sans-serif;
	width:95%;
	height:auto;
	margin:2px 5px;
	padding:3px 2%;
	text-align:left;
	color: #3C3C3B;
	display:inline-block;
	border:1px solid #333;
	background:#FFF;
}
.borde01{background:#FFF;border:1px solid #ccc;}
.der{text-align:right;margin:0 2.2% 0 0;}
.izq{text-align:left;}
@media (max-width:603px){
	.logo{
		width:70%;
	}
	header{
		text-align:center;
	}
	.topDer{
		width:100%;
		display:block;
		margin:0;
		text-align:center;
	}
	.btn2{
		float:none;
	}
	nav{
		width:100%;
		display:block;
		margin:5px 0 0 0;
		text-align:left;
	}
	.margen, .margenCentro{
		width:95%;
	}
	.titleAzul{
		font-size:24px;
	}
	.icoInicio{
		width:45%;
	}
	.col10,.col15,.col20,.col30,.col40,.col50,.col30Buscador,.col15Title{
		width:95%;
		text-align:left;
	}
	.col50Right{
		float:none;
		text-align:center;
		width:100%;
	}
	.btn1{
		display:inline-block;
	}
}
@media (min-width:604px) and (max-width:900px){
	.icoInicio{
		width:25%;
		margin:1.5%;
	}
	.logo{
		width:35%;
	}
	.topDer{
		width:55%;
	}
	.pleca2{
		font-size:18px;
	}
	.col10{
		width:5%;
	}
	.col50Right{
		width:95%;
		margin:auto;
		display:block;
		text-align:center;
	}
	.col30Buscador{
		width:47%;
	}
	.col15Title{
		width:45%;
	}
}