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

/* Tiles */

	.tiles {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		postiion: relative;
		margin: -2.5em 0 0 -2.5em;
	}

		.tiles noticia {
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			position: relative;
			/*width: calc(25% - 2.5em);*/
			margin: 2.5em 0 0 2.5em;
		}

			/* CLASS: IMAGE2 */
			.tiles noticia > .image2 {
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				position: relative;
				display: block;
				width: 100%;
				border-radius: 4px;
				overflow: hidden;
			}

			.tiles noticia > .image2 img {
				display: block;
				width: 100%;
				/*width: 290px;
				height: 290px;*/
			}

			.tiles noticia > .image2:before {
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
				-moz-transition: background-color 0.5s ease, opacity 0.5s ease;
				-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
				-ms-transition: background-color 0.5s ease, opacity 0.5s ease;
				transition: background-color 0.5s ease, opacity 0.5s ease;
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				/*opacity: 1.0;*/
				z-index: 1;
				opacity: 0; /*0.8;*/
			}

			.tiles noticia > .image2:after {
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
				-moz-transition: opacity 0.5s ease;
				-webkit-transition: opacity 0.5s ease;
				-ms-transition: opacity 0.5s ease;
				transition: opacity 0.5s ease;
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				/*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 0.25px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='100' y2='100' /%3E%3Cline x1='100' y1='0' x2='0' y2='100' /%3E%3C/svg%3E");*/
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				opacity: 0.25;
				z-index: 2;
				
				width: 100%;
				height: 100%;
				background-color: #4F4A33;
				opacity: 0.4;
				z-index: 2;
			    position: absolute;
			    top: 0px;
			    margin-right:18px;
			}
		
		
div#imagen {
	
}

div#fondo {
	width: 100%;
	height: 100%;
	background-color: #4F4A33;
	opacity: 0.4;
	z-index: 2;
    position: absolute;
    top: 0px;
    margin-right:18px;
}

h3#headline {
	color: white;
	position: relative;
	margin-left: 20px;
	font-family: 'MarselisPro';
	z-index:3;
	line-height: 26px;
	font-size: 1.5em;
}
div#data {
	margin-left: 20px;
	position: relative;
	color: white;
	z-index:3;
	font-family: 'Marselis';
}
div#news-title {
	bottom: 5%;
    position: absolute;
    width: 80%;
    color: white;
}

@media (max-width: 480px) {
		
	h3#headline {
		color: white;
	    position: absolute;
	    bottom: 15%;
	    margin-left: 20px;
	    width: 90%;
	    font-family: 'MarselisPro';
	    font-size: 18;
	    z-index: 3;
	}
	
	div#data {
		margin-left: 20px;
	    color: white;
	    z-index: 3;
	    font-family: 'Marselis';
	    font-size: 11px;
	    bottom: 5%;
    	position: absolute;
	}
	
	div#noticies {
		margin-left: 0px !important;
	    margin-right: 0px !important;
    }
    
    div#news-title {
	    position: initial;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
		
	h3#headline {
		width: 90%;
	    position: absolute;
    	bottom: 15%;
	}
	
	div#data {
		position: absolute;
    	bottom: 5%;
	}
	
	div#noticies {
		margin-left: 0px !important;
	    margin-right: 0px !important;
    }
    
    div#news-title {
	    position: initial;
	}
}