/*@charset "utf-8";*/
/* CSS Document */

/*Para importar fuente desde Google Fonts:*/
/*@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');*/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;500;700&display=swap');


* {list-style:none} /*quita los puntitos negros de todos los li*/
* {margin: 0; padding: 0; box-sizing: border-box; /*hace que el el padding o el borde que se agrega no se sume al ancho del elemento, sino que estén hacia adentro*/}


:root {
	--font-family:
				  /*'Fira Sans', sans-serif;*/
				  /*'Hind', sans-serif;*/
				  /*'IBM Plex Sans', sans-serif;*/
    			  'Lato', sans-serif;
				  /*'Montserrat', sans-serif;*/
    			 /*'Noto Sans SC', sans-serif;*/
    			  /*'Raleway', sans-serif;*/
    			  /*'Roboto', sans-serif;*/
				  /*'Source Sans Pro', sans-serif;*/
				  /*'Work Sans', sans-serif;*/
	--font-family-texto:
				  /*'Fira Sans', sans-serif;*/
				  /*'Hind', sans-serif;*/
				  /*'IBM Plex Sans', sans-serif;*/
    			  /*'Lato', sans-serif;*/
				  /*'Montserrat', sans-serif;*/
    			 'Noto Sans SC', sans-serif;
    			  /*'Raleway', sans-serif;*/
    			  /*'Roboto', sans-serif;*/
				  /*'Source Sans Pro', sans-serif;*/
				  /*'Work Sans', sans-serif;*/
}

body {
	width: 100vw; /*para que la barra de scroll no se tenga en cuenta*/
	overflow-x: hidden; /*para que no se genere una barra de scroll horizontal si hay desbordamiento del contenido*/
	font-family: var(--font-family);
}


#contenedor {
	max-width: 1414px;
	margin: auto; /*centra el elemento en la pantalla, primero va "margin" y luego puede especificarse con margin-top, etc., cada uno de los márgenes*/
}

/*Fondo para el menu al hacer scroll-------------------*/
.base_menu-fixed {
          width: 100%;
          height: 100px;
          background-color: white;
          position: fixed;
          top: 0;
          right: 0;
          z-index: 5;
        }

/*SLIDER----------------------------------------------------------------------------------------------------------*/
.blueberry {
	position: relative;
	width: 100%;
	background: #CCC;
}
/*fin SLIDER------------------------------------------------------------------------------------------------------*/	


/*MINIATURAS------------------------------------------------------------------------------------------------------*/
.miniaturas {
	overflow:hidden; /*adapta el contenedor "miniaturas" para que ocupe el alto de los elementos flotantes que contiene (en este caso los divs)*/
}
.miniaturas div{
	position:relative;
	float:left;
	width: 24.25%;
	line-height: 0; /*quita el borde inferior que se forma*/
	margin: 1% 0 0 0;
	margin-right: 1%;
}
/*para seleccionar un elemento específico de la lista (4n+4 significa que cada cuatro elementos -4n- contando a partir del cuarto -4- inclusive se aplicarán los estilos)*/
.miniaturas div:nth-child(4n+4){margin-right: 0;}
.miniaturas div img{
	width: 100%;
}
/*se define el evento al pasar del mouse sobre el elemento "a"*/
.miniaturas div a:hover img{
	opacity: 0.10;
	filter: alpha(opacity=10);
	/*se define el tiempo de transición */
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s; /*ó en su lugar transition: all 0.5 sease-in-out;*/
}
/*se define el evento al quitar el mouse sobre el elemento "a"*/
.miniaturas div a:not(:hover) img{
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s; /*ó en su lugar transition: all 0.5 sease-in-out;*/
}
/*El Título de la miniatura*/
.miniaturas div .titulo{
	opacity: 0;
	filter: alpha(opacity=0);
	position:absolute;
	width: 100%;
	height: auto;
	z-index:100;
	text-align:center;
	/*para centrar el elemento verticalmente:*/
	top: 50%;
	transform: translateY(100%);
	padding: .5em;
	line-height: 1;
	
	/*para el texto:*/
	color: #000;
	font-size: 1.5rem;
	font-weight:300;
}
/*se define el evento del Título al pasar del mouse sobre el elemento "a"*/
.miniaturas div a:hover .titulo{
	opacity: 1;
	filter: alpha(opacity=100);
	top: 50%;
	transform: translateY(-50%);
	transition: 0.3s;
}
/*se define el evento del Título al quitar el mouse sobre el elemento "a"*/
.miniaturas div a:not(:hover) .titulo{
	opacity: 0;
	filter: alpha(opacity=0);
	top: 50%;
	transform: translateY(100%);
	transition: 0.5s;
}
/*fin MINIATURAS--------------------------------------------------------------------------------------------------*/


/*CONTENIDO ------------------------------------------------------------------------------------------------------*/
.item__titulo, .item__descripcion {
	text-align: center;
	font-weight:300;
}

.item__titulo {
	font-size: 1.5em;
	font-weight: 500;
	margin-top: 25px;
	margin-bottom: 0.3em;
}

.item__descripcion {
	line-height: 1.2em;
}

/*El texto del Perfil*/
.texto {
	font-family: var(--font-family-texto);
}

/*fin CONTENIDO --------------------------------------------------------------------------------------------------*/


/*FOOTER----------------------------------------------------------------------------------------------------------*/	
footer {
	float: left;
	width: 100%;
	height: 170px;
	color: #000;
	font-size: 1.25rem;
	font-weight:300;
	z-index: 50;
}
footer .pie{
	margin-top: 50px;
	border-top: 1px solid;
	padding-top: 20px;
}

.caja {
	float: left;
	line-height: 1.25em;
	margin-bottom: 15px;
}

.caja2 {
	margin-left: 50%;
	padding-left: 7px;
	line-height: 1.25em;
	margin-bottom: 15px;
	text-align: right;
}
.caja2 a {
	text-decoration:none;
	color: #000;
}
/*fin FOOTER------------------------------------------------------------------------------------------------------*/	





/*MEDIA QUERIES---------------------------------------------------------------------------------------------------*/

@media (max-width: 1620px) {
#contenedor {
	width: 90%;
}

.perfil div img {
	width: 350px;
}
}

/*-------------*/

}

@media (max-width: 1280px) {
.miniaturas div {
	width:32.6%;
}
.miniaturas div:nth-child(4n+4){margin-right: 1%;}
.miniaturas div:nth-child(3n+3){margin-right: 0;}
}

/*-------------*/

/*media querie para el contenido*/
@media (max-width: 900px) {
.item_contenido {
  height: 500px;
}
}

/*-------------*/

@media (max-width: 819px) {
	.base_menu-fixed {
          height: 75px;
        }
}

/*-------------*/

@media (max-width: 768px) {
.miniaturas div {
	width:49.5%;
}
.miniaturas div:nth-child(3n+3){margin-right: 1%;}
.miniaturas div:nth-child(2n+2){margin-right: 0;}
}

/*-------------*/

@media (max-width: 650px) {
.miniaturas div {
	width: 100%;
	margin-right: 0;
}

.caja {
	float: none;
}

.caja2 {
	margin-left: 0;
	padding-left: 0;
	text-align: left;
}