/*

Tenemos dos tipos de imagenes:

Contenido : TIENEN que ir en una etiqueta IMG
	ej.: perfil - productos - 

*Logo

Secundario : fondos de imagenes, imagenes que no tenemos su copyright
*/

*{margin: 0; padding: 0;box-sizing:border-box;}
html{height: 100%}
body{
	min-height: 100%;
	/*background-image: url('../Fotos/carnet.jpg');*/
	background-repeat: no-repeat;
	/*
		background-position : ejeX ejeY
		Podemos pasarle a cada eje una medida valida de css (px, %, em, rem, etc..) o usar palabras reservadas:
		
		eje x : left - right - center
		eje y : top - bottom - center
		default : (0,0) = left top
	*/
	background-position: center center;	
	/*
		background-size: ejeX ejeY
		Ajusta la dimension en la que se hace render la imagen
		- contain :  Toma el eje superior y lo ajusta al 100%. 
		- cover : Toma el eje inferior y lo ajusta al 100%
	*/
	background-size: cover;
}


#noticias{
	background: white;
	display: flex;
	flex-wrap:wrap;
}

.noticia{
	/*width: calc(100% / 3);*/
    width: 8.55cm;
}

.noticia img {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	transform : translateY(-50%);
}

.noticia figure {
	height: 70px;
	overflow: hidden;
	position: relative;
}

.noticia p {
    font-size:11px;
    font-weight:500;
    }

.noticia span {
    /*font-family:Myriad Pro Semiexpandida Negrita;*/
    font-size:10px;
    font-weight:500;
    }

.eti {    
    /*font-family:Myriad Pro Semiexpandida Negrita;*/
    margin-left:2px;
    font-size:10px;
    display:inline;
    font-weight:bolder;
    }


@media screen and (min-width: 500px){
	.noticia figure{
		height:90px;
	}
}

@media screen and (min-width: 700px){
	.noticia figure{
		height:150px;
	}
}


@media screen and (min-width: 900px){
	.noticia figure{
		height:5.48cm;
	}
}

@media print {
	.noticia figure{
		height:5.48cm;
	}
}

.modal-content {
    position: relative;
}

.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 50px;
    color: rgba(255, 0, 0, 0.5);
    pointer-events: none; /* Ensure watermark doesn't interfere with other elements */
    z-index: 10; /* Make sure it's above other content */
}