/*Hoja de estilo para modificaciones del MIRAGE 2 de la UCR
* Versión 2.0 de IIARTE
* Modificado por Christian Zamora, Universidad de Costa Rica, 2020
*/


/* Claves de colores */
:root {
	--col-naranja: #fdb429;
	--col-naranja-hover: #edba6b;
	--col-morado: #d06589;
	--col-fucsia: #f8e9d4;
	--azul-claro: #91b6d0;
}

*::-moz-selection{ /*subrayado para mozilla*/
	color: #FFF;
	background: none repeat scroll 0% 0% #FDB727;
}
::selection { /*subrayado para navegadores diferentes de mozilla.*/
	color: #FFF;
	background: none repeat scroll 0% 0% #FDB727;
}
.word-break {
	word-break: normal;
	-moz-hyphens: auto;
}
@font-face{
	font-family: fashionFetishBold;
	src: url("../styles/fonts/Fashion Fetish Bold.ttf");
	font-display: swap;
}

@font-face{
	font-family: fashionFetish;
	src: url("../styles/fonts/Fashion Fetish Regular.ttf");
	font-display: swap;
}
@font-face{
	font-family: malbaTrama;
	src: url("../styles/fonts/malba_trama.ttf");
	font-display: swap;
}
@font-face{
	font-family: Renner;
	src: url("../styles/fonts/Renner.ttf");
	font-display: swap;
}

.noMovil {
	display: block;
}

.onlyMovil {
	display: none;
}

/* Esconder mostrar elementos para móviles */
@media only scream and (max-width: 990px){
	.noMovil {
		display: none;
	}
	.onlyMovil {
		display: block;
	}
}



/*** Asignación de fuentes en el tema *****/
body{font-family:Renner;}
h1, .h1, h2, .h2, h3, .h3 {color: #000; font-family: fashionFetishBold!important;}
#navbar-iiarte { font-family: 'fashionFetish', Arial, sans-serif;};
div, h4, .h4, .h5, h5, p, a, span, .artifact-info{font-family: 'Renner'!important;}
.artifact-abstract{text-align:justify;font-family: 'Renner';text-align: center;}
h4.artifact-title>a{font-family: 'Renner'; color: var(--col-naranja)!important;}
.h4 small{font-family: 'Renner';}

a {color: #3685B4;}
a:hover {color: #078cae;}
.main-content a:visited {color: #0A467C;}

/*azul kérwá sustituye #1f3f5e*/
header .navbar-default,
.navbar-inverse {
	background-color: #ffffff;
}

/*azul kérwá sustituye #607890*/
.btn-primary,
.btn-primary:focus, 
.btn-primary.active,
.bg-primary,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span,
.pagination>.active>span:hover,
.pagination>.active>span:focus,
.label-primary,
.progress-bar,
.panel-primary>.panel-heading,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.trail-wrapper .sidebar-toggle:hover,
.trail-wrapper .sidebar-toggle:focus,
.authorlookup table.dataTable tbody tr.current-item,
.authorlookup table.dataTable tbody tr.current-item td {
	background-color: #000;/*#3685B4;*/
}
.text-primary,
.btn-primary .badge,
.btn-link,
.pagination>li>a,
.pagination>li>span,
a.list-group-item.active>.badge,
.nav-pills>.active>a>.badge,
.panel-primary>.panel-heading .badge
{
	color: #3685B4;
}
.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span,
.pagination>.active>span:hover,
.pagination>.active>span:focus,
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.panel-primary,
.panel-primary>.panel-heading {
	border-color: #000; /*#3685B4*/
}
.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#3685B4;}
.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#3685B4}


header .navbar-default .navbar-toggle > li > a:hover,
header .navbar-default .navbar-toggle > li > a:focus,
header .navbar-default .navbar-toggle>li>a:hover,
header .navbar-default .navbar-toggle>li>a:focus,
header .navbar-default .navbar-toggle>.open>a,
header .navbar-default .navbar-toggle>.open>a:hover,
header .navbar-default .navbar-toggle>.open>a:focus,
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus,
header .navbar-default .navbar-nav > li > a:hover,
header .navbar-default .navbar-nav > li > a:focus,
header .navbar-default .navbar-nav>li>a:hover,
header .navbar-default .navbar-nav>li>a:focus,
header .navbar-default .navbar-nav>.open>a,
header .navbar-default .navbar-nav>.open>a:hover,
header .navbar-default .navbar-nav>.open>a:focus,
header .navbar-default .navbar-nav:hover,
header .navbar-default .navbar-nav:focus,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus{
	background-color: var(--col-naranja)
}

header .navbar-default .navbar-toggle > li > a,
header .navbar-default .navbar-toggle>li>a,
header .navbar-default .navbar-toggle>.open>a,
header .navbar-default .navbar-toggle,
header .navbar-default .navbar-nav > li > a,
header .navbar-default .navbar-nav>li>a,
header .navbar-default .navbar-nav>.open>a,
header .navbar-default .navbar-nav,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a{
	background-color: var(--col-morado);
}

.btn-primary:hover{
	background-color: #09bdeb; /*#2B6B90;*/
}

.list-group-item.active,
.navbar-inverse,
.btn-primary {
	border-color: none; /*#078cae*/
}
a.list-group-item:hover,
a.list-group-item:focus {
	text-decoration:underline;
}
.trail-wrapper {
	/* background-color: #fff  #078cae;*/
	border-bottom: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#595959+0,666666+19,595959+39,2c2c2c+65,131313+100 */
	/*background: #595959; /* Old browsers */
	/*background: -moz-linear-gradient(top, #595959 0%, #666666 19%, #595959 39%, #2c2c2c 65%, #131313 100%); /* FF3.6-15 */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595959), color-stop(19%,#666666), color-stop(39%,#595959), color-stop(65%,#2c2c2c), color-stop(100%,#131313)); /* Chrome4-9,Safari4-5 */
	/*background: -webkit-linear-gradient(top, #595959 0%,#666666 19%,#595959 39%,#2c2c2c 65%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: -o-linear-gradient(top, #595959 0%,#666666 19%,#595959 39%,#2c2c2c 65%,#131313 100%); /* Opera 11.10-11.50 */
	/*background: -ms-linear-gradient(top, #595959 0%,#666666 19%,#595959 39%,#2c2c2c 65%,#131313 100%); /* IE10 preview */
	/*background: linear-gradient(to bottom, #595959 0%,#666666 19%,#595959 39%,#2c2c2c 65%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
	background: white;

}
#main-container #sidebar {
	background-color: transparent;
}

iframe {
	width:100%;
}

.navbar-toggle {

	border-radius: 0px/*4px*/;
	margin-left: 0px;
}
header .navbar-default .navbar-toggle, header .navbar-default .navbar-nav {
	margin-top: 5px;
	font-family: 'fashionFetish', Arial, sans-serif;
}
/*......UCR header...*/
#ucr{
	/*background: url("../images/iiarte/header_slide.jpg") bottom left repeat-x #333;*/
	height: 60px;
	margin-right: auto;
	margin-left: auto;
    /*padding-left: 15px;
    padding-right: 15px;*/
    max-width: 1170px;
}
.ucr_logo { 
	display: table-cell;
	float: left;
	height: 45px;
	height: 45px;
	width: 339px;
}
.ucr_logo a{ 
	display: block;
	background: url("../images/iiarte/firma_ucr.png") top left no-repeat;
	height: 45px;
	width: 339px;
	margin: 0px 0px 0px 10px;
}
.ucr_logo span{  
	display: none;
}
#ucr #navbar{
	position: relative;
	/*top: 30px;*/
	top: 1rem;
}
#ucr #navbar ul{
	list-style: none;
	padding: 6px 0px 0px 0px;
	float: right;
}
#ucr #navbar li{
	display: inline;
}
#ucr #navbar li a{
	/*color: #fff;*/
	color: #000;
	text-decoration: none;
	padding: 6px 10px 4px 10px;
	text-align: center;
	transition: 0.5;
	font-family: 'Renner', Arial, sans-serif;
}
#ucr #navbar li a:hover{
	background-color: var(--col-naranja);
	color: #fff;
	transition: 0.5;
}
header .navbar-brand img {
	/*height: auto;*/
	margin-bottom: 10px;
	margin-top: 10px;
	max-height: 250px;
	min-height: 75px;
	
}

.navbar-brand {
	padding: 0px;
	height: 100px;
}
.navbar > .container .navbar-brand {
	margin-left: 0px;
}
/*......login.............;....*/

label {
	margin-top: 10px;
}
/*........Search............*/
.btn-primary {
	z-index: 2;
}
/*.......main item list..........*/
ul.ds-artifact-list {
	text-align: center;
}

li.ds-artifact-item{
	display: inline-block;
	min-height: 20%;
	max-height: 100%;
}

@media only screen and (max-width: 800px){
	li.ds-artifact-item{
		max-width: 40%;
	}
}
@media only screen and (max-width: 600px){
	li.ds-artifact-item{
		max-width: 80%;
	}
}

li[class="ds-artifact-item odd"]{
	background-color: #f7f7f7;
	padding: 1px 8px 5px 8px;
	transition: .2s;
}

li.ds-artifact-item:hover{
	z-index: 1;
	transform: scale(1.02);
	box-shadow: 0px 0px 20px -10px #000;
	transition: .2s;
}

li[class="ds-artifact-item even"]{
	padding: 1px 8px 5px 8px;
	margin-bottom: 3px;
}
/*..item page...*/
h2[class="page-header first-page-header"]{
	font-size: 25px;
}
div[class="simple-item-view-authors item-page-field-wrapper table"] div{
	border-bottom: solid 1px #ddd;
}
div[class="item-page-field-wrapper table"] div{ /*document list in a item*/
	padding-bottom: 10px;
	word-wrap: break-word;
	text-align: left;
}
/*** UCR Footer ******************/

.footer-ucr-color {
	background:     #ffffff;
	padding:        50px 0px;
}

.color-6b6b6b {
	color: #6b6b6b;
}

footer .border-right-cccccc {
	min-height: 80px;
	border-right: 1px #cccccc solid;
}

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
	footer .border-right-cccccc {
		border-right: none !important;
	}
}

@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
	footer .border-right-cccccc {
		border-right: none !important;
	}
}

@media only screen and ( max-width: 479px ) {
	footer .border-right-cccccc {
		border-right: none !important;
	}
}

footer .padding-top-15 {
	padding-top: 15px;
}

footer a.social-media {
	margin-right: 5px;
}

footer .fab {
	text-align:         center;
	color:              #ffffff;
	width:              35px;
	height:             35px;
	padding:            10px;
	border-radius:      50px;
	background-color:   #000000;
}

footer ul li:first-of-type { 
	list-style: none;
	margin-left: -1em;
}
footer ul {
	display: table-cell;
	width: 50%;
	position: relative;
	text-align: left;
	padding-bottom: 20px;
}
footer .footer-links {
	padding-top: 0px !important;
	border-top: solid #333 1px;
	z-index: 120;
	position: relative;
}
div.footer-ucr-color div.footer-links h1,div.footer-ucr-color div.footer-links  h2,footer .footer-links  h3,div.footer-ucr-color div.footer-links  a,div.footer-ucr-color div.row a{
	color: #fff;
}
footer #footer-navbar ul{
	padding-bottom: 10px;
	padding-left: 0px;
	padding-top: 10px;
}
footer #footer-navbar ul li:first-of-type {
	margin-left: 0em;
	padding: 0px 5px 0px 0px;
}
footer #footer-navbar ul li:last-of-type {
	border-right: none;
}
footer #footer-navbar ul li{
	display: inline-block;
	padding: 0px 5px;
	border-right: solid 1px #ddd;
}

footer .hidden-print {
	padding-bottom: 10px;
	color:#fff;
}

/*Últimos cambios Christian - 2019*/
/*div.trail-wrapper .container {
	border-color: #e7e7e7 !important;
        border-left: 1px solid;
	border-right: 1px solid;
	}*/

	.showPdf {
	width:100%;
	height: 480px;
	}

	div.footer-text-rights {
		color:#fff;
	}

	.thumbnail>img, .thumbnail a>img {
		-webkit-box-shadow: 10px 11px 29px -8px rgba(0,0,0,0.75);
		-moz-box-shadow: 10px 11px 29px -8px rgba(0,0,0,0.75);
		box-shadow: 10px 11px 29px -8px rgba(0,0,0,0.75);
	}
	.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
		text-decoration: none;
	}
	a.list-group-item:hover {
		text-decoration: none;
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
		.text {font-size: 11px}
	}

	/************* SLIDER IIARTE ****************/


	/* Slideshow container */
	.slideshow-container {
		position: relative;
		margin: auto;
	}

	/* Caption text */
	.text {
		color: #f2f2f2;
		font-size: 15px;
		padding: 8px 12px;
		position: absolute;
		bottom: 8px;
		width: 100%;
		text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
		color: #f2f2f2;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}

	.activeDot {
		background-color: #717171;
	}

	/* Next & previous buttons */
	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
	}

	.topSpace{
		margin-top:2em;
	}

	a.buttonDescarga{
		border-radius: 4px;
		color: #ffffff;
		background-color: #fdb429;
		padding: 1.5em;
		text-decoration: none;
	}

	/* Position the "next button" to the right */
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
	}

	/* Fading animation */
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 4.8s;
		animation-name: fade;
		animation-duration: 4.8s;
	}

	@-webkit-keyframes fade {
		0% {opacity: .2}
		30% {opacity: 1}
		100% {opacity: 1}
	}

	@keyframes fade {
		0% {opacity: .2}
		30% {opacity: 1}
		100% {opacity: 1}
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
		.text {font-size: 11px}
	}


	/********* Pag Investigadores ****/

	/* Contenedor general */
	.grid-investigadores {
		display: block;
		grid-template-columns: auto auto auto auto;
		grid-gap: 0.625rem;
		margin: auto; 
		margin-top: 10px;
		margin-bottom: 10px;
		clear: both;
		overflow: hidden;
		font-size: 15px;
	}

	/* Contenedor de la ficha general de cada parsona investigadora */
	.content-investigador {
		min-height: 1px;
		margin-top: 20px;
		margin-bottom: 20px;
		display: block;
		clear: both;
		overflow: hidden;
	}


	/* Contenedor de la foto */
	.grid-column-picture {
		padding: 20px;
		width: 22%;
		position: relative;
		float: left;
		min-height: 1px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Foto de la persona investigadora */
	.avatar {
		width: 100%;
		background-repeat: no-repeat;
		background-position: 50%;
		border-radius: 10%;
		background-size: 100% auto;
	}

	/* Contenedor del nombre de la persona investigadora */
	.grid-column-name {
		width: 70%;
		min-height: 1px;
		margin-top: 15px;
		padding: 15px;
		float: right;

	}

	/* Contenedor del correo de la persona investigadora */
	.grid-column-mail {
		width: 70%;
		min-height: 1px;
		padding: 15px;
		float: right;
	}
	.grid-column-mail a{
		color: #2e475f;
	}

	/* Contenedor de la información de la persona investigadora */
	.grid-column-info {
		width: 70%;
		min-height: 1px;
		padding: 15px;
		float: right;
		margin-bottom: 25px;
	}

	/* Color para los títulares de Nombre, Correo y Formación */
	.grid-investigadores span{
		color: #80a1b6;
	}


	/* Responsive para dispositivos moviles */
	@media only screen and (max-width: 990px) {
		/* Adaptación para los 4 contenedores */
		[class*="grid-column-"] {
			width: 100%;
		}

		/* Adaptación para la foto */
		[class*="avatar"] {
			width: 100%;
		}
	}
	/******* Fin Investigadores ******/

	/********* NAVBAR IIARTE *********/
	#navbar-iiarte ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	#navbar-iiarte li {
		float: left;
		color: white;
		/** Color degradado **/
		background: linear-gradient(180deg,#e19a12,#fdb429);
		padding: 0.5em 1em;
		font-size: 1.5em;
		text-transform: uppercase;
		transition: 0.5s;
	}

	#navbar-iiarte li a {
		display: block;
		color: white;
		text-align: center;
		padding: 16px;
		text-decoration: none;
	}

	#navbar-iiarte li:hover {
		/** background-color: var(--col-morado); **/
		/** Color degradado **/
		background: linear-gradient(180deg,#af4a6d,#d06589);
		transition: 0.5s;
	}

	.glyphiconIIArte{
		position: relative;
		top: 1px;
		display: inline-block;
		font-family: 'Glyphicons Halflings';
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		color:black;
	}

	.btn-primaryIIArte{
		background: var(--col-fucsia);
		color: black;
	}
	.not-border{
		border: 0;
	}
	.formNavbarIIArte{
		background: var(--col-fucsia);
		height: 50px !important;
		color: black;
		border-radius: none;
	}
	div.input-group{
		padding: 0 0.5em;
	}


	/********* Inicio de Grids HomePage **********/

	/* Contenedor general de los TRES bloques de galería */
	.grid-content-1 {
		display: grid;
		grid-template-columns: auto auto auto;
		grid-row: auto;
		grid-column-gap: 2rem;
		margin-top: 3em;
		min-height: 250px;
		clear: both;
		overflow: hidden;
		padding: 0 0.5em
	}

	/* En media query se agrega regla para pasar a una sola columna: grid-template-columns */

	/*Cntenedor inferior con dos bloques continuos*/
	.grid-content-2 {
		display: grid;
		grid-template-columns: auto;
		grid-column-gap: 0px;
		max-width: 1000px;
		clear: both;
		overflow: hidden;
		margin-top: 2rem;
		margin-left: auto;
		margin-right: auto;
		transition: height 2s;
	}


	/*contenedor de las tres imagenes*/
	.grid-galeria {
		/*border: 1px solid rgba(0, 0, 0, 0.8);*/
		/*Definimos un alto y ancho porcentual para trabajar mejor las dimensiones en los múltiples pantallas*/
		min-width: 50%;
		max-width: 100%;
		max-height: 100%;
		min-height: 50%;
		border: 0px;
		/*Para evitar que se choquen las imágenes, le insertamos margin obligatorio en ambos lados*/
		margin: 0; 
		transition: 0.5s;
		margin: .5rem 0;
		
	}

	.grid-galeria2 {
		width: 100%;
		border: 0px;
	}

	/*Las tres imagenes en la galería*/
	.grid-galeria .galeria-img-1 {
		min-width: 281px;
		min-height: 173px;
	}

	.galeria-img-1 img {
		filter: grayscale(100%);
		transition: .5s;
	}

	.galeria-img-1 img:hover {
		filter: grayscale(0%);
		transition: .5s;
	}

	/*propiedades de las imagenes insertadas*/
	.img-galeria-responsive {
		display: block;
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		border: 0px;
	}
	.grid-galeria:hover{
		z-index: 1;
		transform: scale(1.02);
		-ms-transform: scale(1.02); /* IE 9 */
		-webkit-transform: scale(1.02); /* Safari 3-8 */
		box-shadow: 0px 0px 20px -10px #000;
		transition: .5s;
		filter: grayscale(0%);
	}

	/*propiedades de las imagenes insertadas*/
	.slideExpo {display: none;}

	.img-galeria-responsive2 {
		width: auto;
		max-height: 450px;
	}

	/* Caja de texto debajo de las imagenes */
	.galeria-text-1 {
		/*max-width: 280px;*/
		margin: 0px;
		padding: 0px;
		font-size: large;
	}

	.text-1-titulares {
		margin-block-start: 0px;
		margin-block-end: 0px;
		font-size: x-large;
		font-family: 'fashionFetishBold', Arial, sans-serif;
	}
	.text-1-subtitulares {
		margin: 5px 15px;
		font-size: 1rem;
		font-family: 'Renner', Arial, sans-serif;    
	}

	.text-2-texto {
		padding: 1rem 1.5rem;
		display: flex;
		justify-content: center;
		font-size: medium;
		font-family: 'Renner', Arial, sans-serif; 
	}

	/*caja de texto centrado para la galería*/
	.galeria-text-1 .text-1-titulares, .text-1-subtitulares {
		min-width: auto; /* Ancho autormático */
		max-height: 95px;
		text-align: justify;
		display: flex;
		justify-content: center;
	}

	.galeria-text-2 .text-2-titular {
		padding-top: 15px;
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: xx-large;
		font-family: 'malbaTrama', Arial, sans-serif;
	}

	.galeria-text-2 .text-2-subtitular {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: xx-large;
		font-size: x-large;
		font-family: 'fashionFetish', Arial, sans-serif;  
	}

	.texto-Expo{
		padding: 0 2em;
		background-color: var(--azul-claro);
	}

	.grid-galeria .galeria-img-2 {
		width: 495px;
		min-height: auto;
	}

	.grid-galeria2 {
		font-size: 20px;
		border: 0px;
		margin-top: 1em;
	}

	/*Estilos de textos */

	.grid-galeria .galeria-text-2 {
		min-width: 100%;
		min-height: auto;
	}

	.button-showMore {
		color: white!important;
		background: black;
		padding: 0.5em 1em;
		font-size: medium;
		text-transform: uppercase;
		font-family: 'Renner';
		margin: 0 auto 2em auto;
		display: inline-block;
		transition: .5s;
	}

	.button-showMore:hover{
		transition: .5s;
		background-color: white;
		color: black!important;
		text-decoration: none;
	}

	/* Responsive para dispositivos moviles */
	@media only screen and (max-width: 1020px){
		.grid-content-1{
			display: grid;
			grid-template-columns: auto auto;
		}
		.grid-content-2{
			display: grid;
			grid-template-columns: auto;
		}
	}

	@media only screen and (max-width: 750px) {
		/* Adaptación para los 4 contenedores */
		.grid-content-1{
			display: grid;
			grid-template-columns: auto;
		}
		.grid-content-2{
			display: grid;
			grid-template-columns: auto;
		}


		/* Adaptación para la foto */
		[class*="galeria-img"] {
			width: 100%;
		}

		img .img-galeria-responsive, .galeria-text-1 {
			width: 100%;
		}

		.galeria-text-1 {
			margin-bottom: 10px;
		}
	}

	/********* Fin de Grids HomePage ***********/


	/***  CSS para grid de imágenes ***/

	.containerExpo {
		display: -ms-flexbox; /* IE10 */
		display: flex;
		-ms-flex-wrap: wrap; /* IE10 */
		flex-wrap: wrap;
		padding: 0 4px;
	}

	.colum-showExpo {
		-ms-flex: 25%; /* IE10 */
		flex: 25%;
		max-width: 25%;
		padding: 0 4px;
	}

	.colum-showExpo img {
		margin-top: 8px;
		vertical-align: middle;
		width: 100%;
		transition: .5s;
		filter: grayscale(100%);

	}

	.colum-showExpo img:hover{
		z-index: 1;
		transform: scale(1.02);
		-ms-transform: scale(1.02); /* IE 9 */
		-webkit-transform: scale(1.02); /* Safari 3-8 */
		box-shadow: 0px 0px 20px -10px #000;
		transition: .5s;
		filter: grayscale(0%);

	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
		.colum-showExpo {
			-ms-flex: 50%;
			flex: 50%;
			max-width: 50%;
		}
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	/*@media screen and (max-width: 600px) {
		.colum-showExpo {
			-ms-flex: 100%;
			flex: 100%;
			max-width: 100%;
		}
		}*/


		/***  Fin de Grid ***/

		/*media queries*/
		@media (min-width: 1200px){
			header .navbar-default {
				/*background: url("../images/iiarte/bg-large.jpg") repeat-x top left #2d96c2; */
				/*  background: url("../images/iiarte/bg-large-white.png") repeat-x top left #f2f2f2;*/
			}
			#main-container {
				border-left: 1px solid;
				border-right: 1px solid;
				border-color: #e7e7e7;
			}
		}
		@media (max-width: 1199px){
			header .navbar-default {
				/*background: url("../images/iiarte/bg-large.jpg") repeat-x top left #2d96c2;*/
				/*background: url("../images/iiarte/bg-large-white.png") repeat-x top left #f2f2f2;*/
			}
			#main-container {
				border-left: 1px solid;
				border-right: 1px solid;
				border-color: #e7e7e7;
			}
		}
		@media (min-width: 992px){
			#main-container {
				border: none;
			}

		}
		@media (max-width: 991px){
			#navbar-iiarte{
				display: none !important;
			}
			#navbar .hidden-xs, #ucr #navbar{
				display: none !important;
			}
		}
		@media (min-width: 768px){
			.nav .open>a,
			.nav .open>a:hover,
			.nav .open>a:focus {
				border-color:#3685B4;
			}
			.nav-pills>li.active>a,
			.nav-pills>li.active>a:hover,
			.nav-pills>li.active>a:focus {
				background-color: #3685B4;
			}
			.navbar-nav > li > a {
				padding-top: 7px;
				padding-bottom: 7px;    
			}
		}
		@media (max-width: 767px){
			header .navbar-default {
				/* background: url("../images/iiarte/bg-small.jpg") no-repeat top left #2d96c2; */
				/* background: url("../images/iiarte/bg-large-white.png") repeat-x top left #f2f2f2;*/
			}


			.nav-tabs>li.active>a,
			.nav-tabs>li.active>a:hover,
			.nav-tabs>li.active>a:focus {background-color:#3685B4;border:1px solid #3685B4;
			}   
			footer #footer-navbar ul li{
				display: block;
				padding: 0px 5px;
				border-right: none;
				border-bottom: solid 1px #ddd;
			}
			footer #footer-navbar ul li:first-of-type {
				margin-left: 0em;
				padding: 0px 5px;
			}
			header .navbar-brand img {
				padding-left: 10px;
			}
		}
		@media (max-width: 667px){
			#ucr{
				display: none;
			}
			footer ul {
				width: 100%;
				position: relative;
				text-align: left;
				float: left;
				padding-bottom: 10px;
				padding-right: 8px;
			}
			.navbar-inverse .navbar-nav .open .dropdown-menu .divider,
			.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
			.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
			.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
				background-color:#078cae;
			}
			.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{
				border-color:#2B6B90
			}
		}
		@media (min-width: 481px){
			.navbar-brand .visible-xs-logo{display:none !important}
		}
		@media (max-width: 480px){
/**header .navbar-default {
	background: url("../images/iiarte/bg-xsmall.jpg") no-repeat top left #2d96c2;**/
}
.navbar-brand .hidden-xs-logo{display:none !important}
/**.navbar-brand .visible-xs-logo{margin: 15px 0px 0px 15px;}**/
}
span[class*="glyphicon-one-fine"] {
	margin-bottom: -.8em;
	overflow: hidden;
}
.glyphicon-one-fine-full-dot:before {
	content:"\25cf";
	font-size: 3em;
	color: white;
	line-height: 0;
	vertical-align: top;
}
.breadcrumb{
	color:#000;
	font-family: 'Renner', Arial, sans-serif;
}
.breadcrumb li a{
	color: #000;
	font-family: 'Renner', Arial, sans-serif;
}

.breadcrumb li a:hover{
	color: #656565;
	text-decoration-line: none;
}
.trail-wrapper .breadcrumb > .active, .trail-wrapper .breadcrumb > li + li::before {
	color: #000;
}
.vcenter {
	margin-top: 20px;
}
.map-container{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
}
#map{
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute;
}
.image{
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
	border: 3px solid #041d1f;
}

.showImage:hover .image {
	opacity: 0.3;
}


/** Boton en la pág de preguntas frecuentes: postular propuesta  **/
.botonPropuestas{
	background: linear-gradient(180deg,#af4a6d,#d06589);
	position: relative;
	display: inline-block;
	padding: 12px 36px;
	margin: 10px 10px 27px 10px;
	color: white;
	text-decoration: none;
	letter-spacing: 2px;
	border-radius: 40px;
}
.botonPropuestas:hover{
	background: linear-gradient(180deg,#e19a12,#fdb429);
	transition: 0.5s;
	color: white;
	text-decoration: none;
}