@font-face {
    font-family: 'SF-Movie-Poster';
    src:url('../fonts/SF-Movie-Poster.ttf') format("truetype"),
		url('../fonts/SF-Movie-Poster.ttf.woff') format('woff'),
        url('../fonts/SF-Movie-Poster.ttf.svg#SF-Movie-Poster') format('svg'),
        url('../fonts/SF-Movie-Poster.ttf.eot'),
        url('../fonts/SF-Movie-Poster.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Coldiac';
    src:url('../fonts/Coldiac.ttf') format("truetype"),
        url('../fonts/Coldiac.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Glass';
    src:url('../fonts/Glass.ttf') format("truetype"),
        url('../fonts/Glass.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'DeatheMaachNcv';
    src:url('../fonts/DeatheMaachNcv.ttf') format("truetype"),
        url('../fonts/DeatheMaachNcv.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
  font-family: 'Justice League';
  src:url('../fonts/Justice League.ttf') format("truetype"),
      url('../fonts/Justice League.eot');
  font-weight: normal;
  font-style: normal;
}

/*
@font-face {
    font-family: 'Broken Glass V2';
    src:url('../fonts/Broken Glass V2.ttf') format("truetype"),
		url('../fBroken Glass V2.woff') format('woff'),
        url('../fonts/Broken Glass V2.svg#Broken Glass V2') format('svg'),
        url('../fonts/Broken Glass V2ttf.eot'),
        url('../fonts/Broken Glass V2.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
*/
div#nuevocartel {
	text-align: center;
	width: 504px;
	height: 552px;
	float: right;
	z-index: 3;
}

div#separacion_30 {
	z-index: 10;
	height: 30px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_173 {
	z-index: 10;
	height: 173px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_143 {
	z-index: 10;
	height: 143px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_187 {
	z-index: 10;
	height: 187px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_165 {
	z-index: 10;
	height: 165px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_206 {
	z-index: 10;
	height: 206px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

div#separacion_232 {
	z-index: 10;
	height: 232px;
	width: 504px;
	float: left;
	margin: -2px;
	position: relative;
}

.contenedor3 {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor3 img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3 .imagen1 {
  z-index: -1;
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 196px; /* 168 */
  height: 552px;
}

.contenedor3 .imagen2 {
  z-index: -2;
  left: 0px; /* 132px */
  /*
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); /* Gradiente lineal que crea el efecto de fundido 
  width: 212px;
  */
  object-fit: cover;
  width: 504px;
  height: 552px;
}
.contenedor3 .imagen3 {
  z-index: -1;
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 196px; /* 168 */
  height: 552px;
  right: 0px;
}

/**** DRAMA ******************************************************************************/

.contenedor3drama {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor3drama img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3drama .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
}

.contenedor3drama .imagen2 {
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); 
  object-fit: cover;
  width: 212px;
  height: 552px;
}
.contenedor3drama .imagen3 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
  right: 0px;
}

.contenedor3drama div#nombre_drama,
.contenedor2drama div#nombre_drama,
.contenedor1drama div#nombre_drama {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 34px;
	height: 33px;
	width: 145px;
	float: left;
	color: #eaeaea;
	margin: 10px;
	text-shadow: 1px 1px #242020;
	position: relative;
}

.contenedor3drama div#titulo_drama,
.contenedor2drama div#titulo_drama,
.contenedor1drama div#titulo_drama {
	z-index: 10;
	font-family: Coldiac, sans-serif;
	font-size: 20px;
	height: 240px;
	width: 504px;
	float: left;
	color: #eaeaea;
/*	margin-top: 8px;*/
	position: relative;
	text-transform: uppercase;
/*	text-shadow: 5px 5px 5px black;
	text-shadow: 2px 2px #242020; */
	text-shadow: 2px 2px #242020, 2px 2px 2px #242020;
}

.contenedor3drama div#linea_drama,
.contenedor2drama div#linea_drama,
.contenedor1drama div#linea_drama {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 32px;
	height: 30px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin: -2px;
	text-shadow: 1px 1px #242020, 1px 1px 1px #242020;
	position: relative;
}

.contenedor2drama {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor2drama img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor2drama .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 280px;
  height: 552px;
}

.contenedor2drama .imagen2 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 280px;
  height: 552px;
  right: 0px;
}

.contenedor1drama {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor1drama img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor1drama .imagen1 {
  left: 0px;
  object-fit: cover;
  width: 504px;
  height: 552px;
}

/**** accion ******************************************************************************/

.contenedor3accion {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
  background: black;
}

.contenedor3accion img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3accion .imagen1 {	
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 190px; /* 168 */
  height: 552px;
}

.contenedor3accion .imagen2 {
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); 
  object-fit: cover;
  width: 212px;
  height: 552px;
}
.contenedor3accion .imagen3 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 186px; /* 168 */
  height: 552px;
  right: 0px;
}

.contenedor3accion div#nombre_accion,
.contenedor2accion div#nombre_accion,
.contenedor1accion div#nombre_accion {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 34px;
	height: 33px;
	width: 145px;
	float: left;
	color: #eaeaea;
	margin: 10px;
	text-shadow: 1px 1px #242020;
	position: relative;
}

.contenedor3accion div#titulo_accion,
.contenedor2accion div#titulo_accion,
.contenedor1accion div#titulo_accion {
	z-index: 10;
	height: 240px;
	width: 504px;
	float: left;
	margin-top: -14px;
	position: relative;
	text-transform: uppercase;
	font-family: impact;
	font-size: 24px;
	color: #D41A1A;
	text-shadow: 2px 2px #242020;
}

.contenedor3accion div#linea_accion,
.contenedor2accion div#linea_accion,
.contenedor1accion div#linea_accion {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 32px;
	height: 30px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin: -2px;
	text-shadow: 1px 1px #242020, 1px 1px 1px #242020;
	position: relative;
}

.contenedor2accion {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
  background: black;
}

.contenedor2accion img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor2accion .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 294px;
  height: 552px;
}

.contenedor2accion .imagen2 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 294px;
  height: 552px;
  right: 0px;
}

.contenedor1accion {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor1accion img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor1accion .imagen1 {
  left: 0px;
  object-fit: cover;
  width: 504px;
  height: 552px;
}


/**** THRILLER ******************************************************************************/

.contenedor3thriller {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
  background: black;
}

.contenedor3thriller img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3thriller .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 176px; /* 168 */
  height: 552px;
}

.contenedor3thriller .imagen2 {
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); 
  object-fit: cover;
  width: 212px;
  height: 552px;
}
.contenedor3thriller .imagen3 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 176px; /* 168 */
  height: 552px;
  right: 0px;
}

.contenedor3thriller div#nombre_thriller,
.contenedor2thriller div#nombre_thriller,
.contenedor1thriller div#nombre_thriller {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 34px;
	height: 33px;
	width: 145px;
	float: left;
	color: #eaeaea;
	margin: 10px;
	text-shadow: 1px 1px #242020;
	position: relative;
}

.contenedor3thriller div#titulo_thriller,
.contenedor2thriller div#titulo_thriller,
.contenedor1thriller div#titulo_thriller {
	z-index: 10;
	font-family: Glass;
	font-size: 20px;
	height: 113px;
	width: 504px;
	float: left;
	color: red;
/*	margin-top: 8px;*/
	position: relative;
	text-transform: uppercase;
/*	text-shadow: 5px 5px 5px black;
	text-shadow: 2px 2px #242020; */
	text-shadow: 2px 2px #242020, 2px 2px 2px #242020;
}

.contenedor3thriller div#linea_thriller,
.contenedor2thriller div#linea_thriller,
.contenedor1thriller div#linea_thriller {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 32px;
	height: 30px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin: -2px;
	text-shadow: 1px 1px #242020, 1px 1px 1px #242020;
	position: relative;
}

.contenedor2thriller {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
  background: black;
}

.contenedor2thriller img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor2thriller .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 280px;
  height: 552px;
}

.contenedor2thriller .imagen2 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 280px;
  height: 552px;
  right: 0px;
}

.contenedor1thriller {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor1thriller img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor1thriller .imagen1 {
  left: 0px;
  object-fit: cover;
  width: 504px;
  height: 552px;
}

/**** COMIC ******************************************************************************/

.contenedor3comic {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor3comic img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3comic .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
}

.contenedor3comic .imagen2 {
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); 
  object-fit: cover;
  width: 212px;
  height: 552px;
}
.contenedor3comic .imagen3 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
  right: 0px;
}

.contenedor3comic div#nombre_comic,
.contenedor2comic div#nombre_comic,
.contenedor1comic div#nombre_comic {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 34px;
	height: 33px;
	width: 145px;
	float: left;
	color: #eaeaea;
	margin: 10px;
	text-shadow: 1px 1px #242020;
	position: relative;
}

.contenedor3comic div#titulo_comic,
.contenedor2comic div#titulo_comic,
.contenedor1comic div#titulo_comic {
	z-index: 10;
	font-family: Justice League;
	font-size: 24px;
	height: 113px;
	width: 504px;
	float: left;
	color: gold;
	position: relative;
	text-transform: uppercase;
	text-shadow: 2px 2px #242020, 2px 2px 2px #242020;
	line-height: 45px;
}

.contenedor3comic div#linea_comic,
.contenedor2comic div#linea_comic,
.contenedor1comic div#linea_comic {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 32px;
	height: 30px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin: -2px;
	text-shadow: 1px 1px #242020, 1px 1px 1px #242020;
	position: relative;
}

.contenedor2comic {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor2comic img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor2comic .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 280px;
  height: 552px;
}

.contenedor2comic .imagen2 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 280px;
  height: 552px;
  right: 0px;
}

.contenedor1comic {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor1comic img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor1comic .imagen1 {
  left: 0px;
  object-fit: cover;
  width: 504px;
  height: 552px;
}

/**** AMOR ******************************************************************************/

.contenedor3amor {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
  background: mistyrose;
}

.contenedor3amor img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor3amor .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
}

.contenedor3amor .imagen2 {
  left: 146px;
  -webkit-mask: linear-gradient(to right, transparent, black, black, transparent);
  mask-image: linear-gradient(to right, transparent, black, black, transparent); 
  object-fit: cover;
  width: 212px;
  height: 552px;
}
.contenedor3amor .imagen3 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 168px; /* 168 */
  height: 552px;
  right: 0px;
}

.contenedor3amor div#nombre_amor,
.contenedor2amor div#nombre_amor,
.contenedor1amor div#nombre_amor {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 34px;
	height: 33px;
	width: 145px;
	float: left;
	color: #eaeaea;
	margin: 10px;
	text-shadow: 1px 1px #242020;
	position: relative;
}

.contenedor3amor div#titulo_amor,
.contenedor2amor div#titulo_amor,
.contenedor1amor div#titulo_amor {
	z-index: 10;
	font-family: Coldiac, sans-serif;
	font-size: 20px;
	height: 240px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin-top: 5px;
	position: relative;
	text-transform: uppercase;
/*	text-shadow: 5px 5px 5px black;
	text-shadow: 2px 2px #242020; */
	text-shadow: 2px 2px #242020, 2px 2px 2px #242020;
}

.contenedor3amor div#linea_amor,
.contenedor2amor div#linea_amor,
.contenedor1amor div#linea_amor {
	z-index: 10;
	font-family: SF-Movie-Poster;
	font-size: 32px;
	height: 30px;
	width: 504px;
	float: left;
	color: #eaeaea;
	margin: -2px;
	text-shadow: 1px 1px #242020, 1px 1px 1px #242020;
	position: relative;
}

.contenedor2amor {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor2amor img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor2amor .imagen1 {
  left: 0px;
  -webkit-mask: linear-gradient(to right, black, black, black, transparent);  
  mask-image: linear-gradient(to right, black, black, black, transparent);
  object-fit: cover;
  width: 280px;
  height: 552px;
}

.contenedor2amor .imagen2 {
  -webkit-mask: linear-gradient(to right, transparent, black, black, black);
  mask-image: linear-gradient(to right, transparent, black, black, black); /* Gradiente lineal que crea el efecto de fundido */
  object-fit: cover;
  width: 280px;
  height: 552px;
  right: 0px;
}

.contenedor1amor {
  position: relative;
  width: 504px; /* Ajusta el ancho del contenedor según tus necesidades */
  height: 552px;
  text-align: center;
}

.contenedor1amor img {
  position: absolute;
  top: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.contenedor1amor .imagen1 {
  left: 0px;
  object-fit: cover;
  width: 504px;
  height: 552px;
}