@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);

html {
	margin: 0;
	padding: 0;
	background: #333;
	font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
}

a {
	text-decoration:none;
	outline: none;
}

	.nada h2{
		margin:auto;
		margin-top:100px; 
		max-width:400px; 
		background:#e7e7e7;
		text-align:center;
		font-weight:normal;
		font-size:1em;
		text-transform:uppercase;
		color:#333;
		font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
		padding:12px;
	}

	.titulo {
		color:#CCC; 
		margin:12px;
		font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
		font-size:1em;
	}
	
	
	button, a.button{
		text-transform:uppercase; 
		display:inline-block;
		font-size:0.8em;
		background-color:#6e8690;
		border:0;
		margin:3px;
		padding: 5px 10px;
		cursor:pointer;
		border-radius: 5px;
		color:#EEE;
		font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
	}

/* (A) GALLERY CONTAINER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */

	.top {
		text-align:right; 
		margin:16px; 
		max-width:1024px; 
		margin:16px auto;
	}
	
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-gap: 12px;
		max-width: 1024px;
		margin: 0 auto;
		padding:12px;
		background:#3e3e3e;
		align-items: top;
	
	}

	/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
	@media screen and (max-width: 800px) {
	  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
	
	/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
	@media screen and (max-width: 640px) {
	  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	
	/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
	@media screen and (max-width: 400px) {
	  .gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	}
	
	
	/* (B) THUMBNAILS & CAPTION */
	.gallery figure {
		margin: 0;
		padding:0;
		,background:#585858;
	}
	
	.gallery figure.nw div.highlight{
		border:2px solid #edf581 ;
	}
	
	.gallery img {
		display:block;
		width: 100%;
		height: 200px;
		object-fit: cover; /* fill | contain | cover | scale-down */
		margin: 0;
		padding:0; 
	}
	
	.gallery figcaption{
		font-size: 0.8em;
		text-align: center;
		color: #2F2F2F;
		padding:0;
		background:#f8faf9;
		
	}
	
		/* contiene info + button + pendiente */
		figcaption .caption{
			padding-top:12px;
		}
		
			/*texto de info*/
			figcaption .caption p{
				margin:0;
				padding:12px;
				padding-top:0;
				display:block;
			}
		
			/*pendiente*/
			figcaption .caption h3{
				background:#f3f9b0;
				margin: 0;
				margin-bottom:12px;
				text-transform:uppercase;
				color:#666;
				padding:6px;
			}
		
			/*pendiente*/
			figcaption .caption a.button {
				margin: 12px;
				margin-top: 0;
				font-size:0.75rem;
			}
	
		/* contiene nombre de imagen*/
		figcaption .small1{
			color:#333;
			display:block;
			padding:4px;
			text-align:right;
			background:#c2c8cd;
			font-size:0.75rem;
			padding-right: 8px;
		}
	


		
		#baguetteBox-overlay .full-image figcaption{
			font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
		}