/*=============================================
Body
=============================================*/
body {
	background: #f4f4f4;/*Color de fondo para todo el Body*/
}

.contenedor {
	width: 95%;/*El contenedor ocupa un ancho del 90%*/
	max-width: 1000px;/*El contenedor tiene un ancho maximo de 800 pixeles*/
	/*
	Esto lo puedo cambiar en dependencia de la cantidad de imagenes que tenga por fila.
	*/

	margin: auto;/*Centrando el contenedor con un margen automatico*/
}
	

/*=============================================
Header
=============================================*/
.header-galeria {
	padding: 40px;/*Padding de 40 pixeles arriba y abajo y 0 a los lados*/
}

.header-galeria .logo {
	text-align: center;/*Alineacion de texto*/
	margin-bottom: 20px;/*Margen inferior*/
	font-family: 'tipografia_para_titulo';
	color: #002867;
	font-size: 30px;
	margin-top: 100px;
}

.header-galeria form {
	width: 100%;
	display: flex;/*Eligiendo trabajar con Flexbox*/
	justify-content: center;/*Centrando el formulario al centro*/
	margin-bottom: 20px;/*Color de letra de los parrafos del logoMargen inferior de 20 pixeles*/
}
/*=============================================
Barra de busqueda
=============================================*/
.header-galeria .barra-busqueda {
	width: 70%;/*Ancho del 70%*/
	height: 40px;/*Alto de 40 pixeles*/
	line-height: 40px;
	background: #ffffff;/*Fondo de color blanco*/
	padding: 0 20px;/*Padding arriba y abajo de 0 pixeles y a los lados de 20 pixeles.*/
	border: none;/*Quitar bordes por defecto*/
	text-align: center;/*Alineacion de texto al centro*/
	font-size: 14px;/*Tamaño de fuente de 16 pixeles*/
	font-family: tipografia_para_texto;
	color: #0053b5;
}
/*=====  End of Section comment block  ======*/

/*=============================================
Categorias
=============================================*/
.categorias{
	background: #ffffff;
}

.categorias-titulo{
	text-align: left;
}

.header-galeria .categorias {
	display: flex;/*Eligiendo trabajar con Flexbox*/
	justify-content: center;/*Centrando todos las categorias*/
	flex-wrap: wrap;/*Haciendo que me encierre los elementos*/
}
/*=====  End of Section comment block  ======*/

/*=============================================
Enlaces de las categorias
=============================================*/
.header-galeria .categorias a {
	color: #000000;/*Color de los enlaces*/
	margin: 5px 20px;/*Margen arriba y abajo y a los lados*/
	font-size: 16px;/*Tamaño de fuente de los enlaces*/
	font-weight: normal;/*Poniendo fuente en negritas*/
	font-family: tipografia_para_texto;
}

/*=============================================
Enlaces con la clase 'activo'
=============================================*/
.header-galeria .categorias a.activo {
	color: white;/*Cambiando el color de letra de enlace al tener la clase de activo*/
	background: #0053b5;
	box-shadow: 1px 2px 6px 1px rgba(0,0,0,.1);/*Agregando sombra*/
	color: white; /*Cambiando color de letra al pasar el mause por el
	enlace.*/
	transition: .2s;/*Transicion de medio segundo.*/
	font-size: 18px;
	padding: 1px 5px;
}
/*=====  End of Section comment block  ======*/


/*=============================================
Galeria de imagenes (Grid)
=============================================*/
.grid {
	position: relative;/*Posicion relativa para los Grid*/
	width: 100%;/*La 'Grid' tendra un tamaño del 100% de nuestro contenedor.*/
	opacity: 0;/*Agregando opacidad de 0 a la 'Grid'*/
	transition: opacity 0.5s linear 1s;/*Trancision para la opacidad*/
}

.grid.imagenes-cargadas {
	opacity: 1;/*Clase aplicada una vez cargado las secciones*/
}

/*=============================================
Items del Grid
=============================================*/
.grid .item {
	position: absolute;/*Posicion absoluta*/
	display: block;/*Display de tipo bloque*/
	padding: 0;/*Padding a todos los lados de 0*/
	margin: 10px;/*Margen a todos los lados de 10 pixeles*/
	
	width: calc(33.333333% - 20px);/*Calculando el 33.33% de cada imagen y restarle 20 pixeles*/
	/*Se pone 20 pixeles porque se puso un margen a la izquierda y a la derecha de 10 pixeles*/
}


/*=============================================
Contenido del Item
=============================================*/
.grid .item-contenido {
	position: relative;/*Posicion relativa*/
	/*Esto lo pide la libreria*/
	background: #ffffff;
	padding-bottom: 7px;
	box-shadow: 1px 2px 6px 1px rgba(0,0,0,.1);/*Agregando sombra*/
}


.item-contenido button{
	display: block;/*Ocupar toda la fila*/
	padding: 10px;
	background: #0053b5;/*Color de fondo*/
	width: 50%;/*Anchura del 50%*/
	margin:7px auto;/*Alineando al centro*/
	box-shadow: 1px 2px 6px 1px rgba(0,0,0,.1);/*Agregando sombra*/
	transition: .2s;
	cursor: pointer;
	text-decoration: none;
	border:none;
	font-family: 'tipografia_para_titulo';
	font-size: 16px;
}

.item-contenido button a{
	color: white;
}

.item-contenido button:hover{
	background: #002867;/*Color de fondo*/
	box-shadow: 1px 2px 6px 1px rgba(0,0,0,.2);/*Modificando sombra*/
	transform: translateY(-2px);/*Moviendo el boton para arriba*/
}
/*=============================================
Items del Grid
=============================================*/

.grid .item img {
	width: 100%;/*Estableciendo un ancho del 100% para las imagenes*/
	cursor: pointer;/*Cambiando el tipo de cursor*/
	vertical-align: top;/*Quitar margen por defecto*/
}

.proyecto-nombre{
	font-family: 'tipografia_para_titulo';
	text-align: center;
	color: #0053b5;
	font-weight: 600;
	margin-top: 12px;
}

.proyecto-nombre{
	font-size: 20px;
}

.proyecto-tipo{
	font-size: 12px;
}
/*=====  End of Section comment block  ======*/


/*=============================================
Ventana Emergente al dar click en imagen.
=============================================*/
.overlay {
	position: fixed;/*Posicion Fija*/
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.9);/*Color de fondo con opacidad*/
	width: 100%;/*Ancho*/
	height: 100vh;/*100% del tamaño del dispositivo*/
	display: none;
	align-items: center;/*Ancho*/
	justify-content: center;
	flex-direction: column;
}

.overlay.activo {
	display: flex;
}

.overlay img {
	max-width:30%;
}

.overlay .descripcion {
	display: block;
	background: #fff;
	padding: 20px;
	text-align: center;
	margin-top: 5px;
	border-radius: 10px;
	max-width: 50%;
}

.contenedor-img {
	position: relative;
}

.overlay #btn-cerrar-popup {
	background: none;
	font-size: 20px;
	color: #fff;
	border: none;
	cursor: pointer;
	position: absolute;
	right: -20px;
	top: -20px;
}

/* ------------------------- */
/* Mediaqueries */
/* ------------------------- */
@media screen and (max-width: 700px) {
	.grid .item {
		width: calc(50% - 20px);
	}

	header .barra-busqueda {
		width: 100%;
	}
}


/*=============================================
Boton para "Ver más proyectos similares"
=============================================*/
.root .ver-mas-proyectos{
  padding: 10px;
  background: #0053b5;/*Color de fondo*/
  width: 20%;/*Anchura del boton*/
  margin:15px;/*Alineando al centro*/
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 2px 6px 1px rgba(0,0,0,.1);/*Agregando sombra*/
  transition: .2s;
  cursor: pointer;
  text-decoration: none;
  border:none;
}

/*Efecto de botón al pasar el mause por encima(efecto"hover")*/
.root .ver-mas-proyectos:hover{
	background: #002867;/*Color de fondo*/
	box-shadow: 1px 1px 6px 1px rgba(0,0,0,.2);/*Modificando sombra*/
	transform: translateY(-2px);/*Moviendo el boton para arriba*/
  }

.ver-mas-proyectos a{
  color: #ffffff;
  font-family: 'tipografia_para_titulo';
  font-size: 16px;
}

/*=============================================
Proyectos | Diseño Responsivo
=============================================*/
/*1024px*/
@media screen and (max-width: 1024px){
	.root .ver-mas-proyectos{
		width: 30%;/*Anchura del boton*/
	}
}

/*774px*/
@media screen and (max-width: 774px){
	.root .ver-mas-proyectos{
		width: 40%;/*Anchura del boton*/
	}
}


/*771px*/
@media screen and (max-width: 771px){
	.item-contenido button{
		width: 70%;/*Anchura del botón*/
	}	
}

/*771px*/
@media screen and (max-width: 379px){
	.item-contenido button{
		width: 80%;/*Anchura del botón*/
	}	
}

/*588px*/
@media screen and (max-width: 588px){
	.root .ver-mas-proyectos{
		width: 50%;/*Anchura del boton*/
	}
}

/*480px*/
@media screen and (max-width: 480px){
	.root .ver-mas-proyectos{
		width: 55%;/*Anchura del boton*/
	}
}

/*436px*/
@media screen and (max-width: 436px){
	.root .ver-mas-proyectos{
		width: 60%;/*Anchura del boton*/
	}
}

/*402px*/
@media screen and (max-width: 402px){
	.root .ver-mas-proyectos{
		width: 65%;/*Anchura del boton*/
	}
}

/*373px*/
@media screen and (max-width: 373px){
	.root .ver-mas-proyectos{
		width: 70%;/*Anchura del boton*/
	}
}

/*360px*/
@media screen and (max-width: 360px){
	.root .ver-mas-proyectos{
		width: 80%;/*Anchura del boton*/
	}
}

/*337px*/
@media screen and (max-width: 379px){
	.item-contenido button{
		width: 90%;/*Anchura del botón*/
	}	
}

/*=====  End of Section comment block  ======*/