*{
	margin:0;
	padding:0;
	list-style:none;
	font-family:sans-serif;
}

@font-face {
font-family: "Cinzel";
src: url(../../../../Cinzel-Regular.ttf);
font-weight: 70;
}

@font-face {
font-family: "Cinzel Bold";
src: url(../../../../Cinzel-Bold.ttf);
font-weight: 800;
}

@font-face {
font-family: "Cinzel Decorative";
src: url(../../../../CinzelDecorative-Regular.ttf);
font-weight: 100;
}

@font-face {
font-family: "Cinzel Decorative Bold";
src: url(../../../../CinzelDecorative-Bold.ttf);
font-weight: 800;
}

@font-face {
font-family: "Martel UltraLight";
src: url(../../../../Martel-UltraLight.ttf);
font-weight: 100;
}

@font-face{
font-family: "Martel";	
src: url(../../../../Martel-Regular.ttf);
font-weight: 500;
}

@font-face {
font-family: "Martel Extra Bold";
src: url(../../../../Martel-ExtraBold.ttf);
font-weight: 800px;
}

@font-face{
font-family: "Montserrat";	
src: url(../../../../Montserrat-Regular.ttf);
font-weight: 500;
}

@font-face {
font-family: "Montserrat Medium";
src: url(../../../../Montserrat-Medium.ttf);
font-weight: 400;
}

@font-face {
font-family: "Tabac Sans Thin";
src: url(../../../../Tabac_Sans_Thin.otf);
font-weight: 100;
}

@font-face {
font-family: "Tabac Sans Light";
src: url(../../../../Tabac_Sans_Light.otf);
font-weight: 200;
}

@font-face {
font-family: "Tabac Sans Regular";
src: url(../../../../Tabac_Sans_Regular.otf);
font-weight: 500;
}

@font-face {
font-family: "Tabac Sans SemiBold";
src: url(../../../../Tabac_Sans_SemiBold.otf);
font-weight: 700;
}

@font-face {
font-family: "Tabac Sans Bold";
src: url(../../../../Tabac_Sans_Bold.otf);
font-weight: 900;
}

@font-face {
font-family: "TrajanPro Regular";
src: url(../../../../TrajanPro-Regular.otf);
font-weight: 900;
}




/*.encabezado{
    background-color: aqua;
}

.encabezado h1{
    margin: 100px;
}*/
.general-personajes {
	width:100%;
    height: 100vh;
    background: url("https://embed.eltiempo.digital/infografias/2019/05/bicentenario/global-img/fondo.jpg");
    position: relative;
}

.ContenedorContenidoEDS{
	width: 100%;
    height: 80vh;
	clear: both;
    overflow-x: hidden;
	background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/global-img/fondo.jpg);
	
	
}

.ContenedorDelTituloLasEstrellas{
 	width: 679px;
        margin: 40px auto;
}

				.P1TituloEstrellas{
				
				}

				.P2EstrellasDelShow {
    width: 100%;
}

				.P3DelShow {
				     float: left;
    width: 100%;
    padding-left: 74px;	
				}

				.P4DescubraALos {
    display: block;
    float: left;
                    margin-top: 20px;
    clear: none;
                        transform: translate(30px);
				
	
				}

				

				.F1EstrellasDelShow{
				 font-family: "Cinzel Decorative";
				 font-weight: 100;
				 color: #FAF0DE;
				 font-size: 86px;
				 padding-top: 0;	
				}

				.F2EstrellasDelShow{
				 font-family: "Cinzel Decorative";
				 font-weight: 100;
				 color: #FAF0DE;
				 font-size: 76px;
				 padding-left:130px;
				 line-height: 30px;	
				}

				.F3LasEstrellasDelShow{
				    font-family: "Cinzel";
                    font-weight: 70;
                    color: #FAF0DE;
                    font-size: 36px;
                    display: block;
                    float: left;
                    padding-top: 2%;
                    clear: none;
                    padding-left: 130px;	
				}

				.F4LasEstrellasDelShow{
				 font-family: "Tabac Sans Bold";
				 font-weight: 900;
				 color: #FAF0DE;
				 font-size: 13px;
				 letter-spacing: 1px;
				 width: 47%;
				 display: block;
				 padding-top: 5%;	
				 padding-left:140%;	
				 z-index: 3;
				 position: relative;
				}

	#contenedorCartas{
		    width: 1520px;
            margin-top: 120px;
    margin: auto;
    height: 50vh;
    z-index: 3;
    align-content: center;
        position: relative;
            z-index:1;
	}



		.contenedorCarta{
			float: left;
    width: 172px;
    height: 295px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: content-box;
		}

			.frontCarta{
				position: absolute;
				visibility: hidden;
				margin-left: -52px;
				margin-top: -90px;
				width: 277px;
				height: 475px;
				background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/CartaGrande.png);
				transition: all 600ms;
				transition-timing-function: linear;
				transform: perspective(800px) scale(0.62) rotateY(-90deg);
				transform-style: preserve-3d;
                z-index: 2;

			}

				.frontCarta img{
				 width: 100%;	

				}
				.frontCarta p{
					color: white;
				}

				.frontCarta a{
					color: white;
				}

			.backCarta{
				cursor: pointer;
				width: 181px;
				height: 295px;
				background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/CartaFront.png);
				transition: all 600ms;
				transform: perspective(800px) rotateY(0deg);
				transition-timing-function: linear;
				transform-style: preserve-3d;
			}


		.voltear .frontCarta{
			animation: animarFrontCarta 600ms forwards;
		}

		.voltear .backCarta{
			animation: animarBackCarta 600ms forwards;
		}

		.cerrar .frontCarta{
			animation: cerrarFrontCarta 600ms forwards;
		}

		.cerrar .backCarta{
			animation: cerrarBackCarta 600ms forwards;
		}





	@keyframes animarBackCarta{
		0%{ 
			transform: perspective(800px) rotateY(0deg);
		}

		50%{
			transform: perspective(800px) rotateY(90deg);
		}

		100%{
			transform: perspective(800px) rotateY(90deg);
		}
	}

	@keyframes animarFrontCarta{
		0%{
			transform: perspective(800px) scale(0.62) rotateY(-90deg);
		}

		50%{
			transform: perspective(800px) scale(0.62) rotateY(-90deg);
			visibility: visible;
		}

		100%{
			transform: perspective(800px) rotateY(0deg);
			visibility: visible;
		}
	}

	@keyframes cerrarBackCarta{
		0%{
			transform: perspective(800px) rotateY(90deg);
		}

		50%{
			transform: perspective(800px) rotateY(90deg);
		}

		100%{ 
			transform: perspective(800px) rotateY(0deg);
		}
	}

	@keyframes cerrarFrontCarta{


		0%{
			transform: perspective(800px) rotateY(0deg);
			visibility: visible;
		}

		50%{
			transform: perspective(800px) scale(0.62) rotateY(-90deg);
			visibility: visible;
		}

		100%{
			transform: perspective(800px) scale(0.62) rotateY(-90deg);
		}
	}

	.ContenedorCartasPopUp{
    width: 70%;
    height: 80vh;
    z-index: 80;
    position: absolute;
    bottom: 10vh;
    left: 15%;
    display: none;
    background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/CartaFondoPopUp.png);
    background-repeat: no-repeat;
    background-size: cover;
	}

	.CerrarCartasPopUpE .ContenedorCartasPopUp{
		width: 1142px;
		height: 727px;
		background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/CartaFondoPopUp.png);
		display: none;
		z-index: 1;
	}

	.AbrirCartasPopUpE .ContenedorCartasPopUp{
		width: 1142px;
		height: 727px;
		background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/CartaFondoPopUp.png);
		display: block;
		z-index: 6;
	}

	.ImagenenPopUpES{
	width: 40%;
	float: left;
	z-index: 5;
	padding-top: 3%;	
	}
.ImagenenPopUpES img{
	width: 250px;
	margin-top: 19%;
	margin-left: 30%;
}

	.TextoEnPopUpCont{
	width: 50%;
	float: left;
	z-index: 5;	
	}

	.BotonCerrarEnPopUpES{
	    width: 56px;
    z-index: 5;
    position: absolute;
    float: right;
    right: 40px;
    top: 20px;
	}

.Titulo2EnPopUpES{
	font-family:"Cinzel";
	font-size: 61px;
	color: #FAF0DE;
	line-height: 100%;
	margin-left: 7%;
}
.TextoParaTildes{
	font-family:"Cinzel Decorative";
	font-size: 61px; 
	font-weight: 500;
}
.TituloEnPopUpES{
	padding-top: 20%;
	font-family: "Cinzel";
	font-weight: 100;
	color: #FFEFB8;
	font-size: 47px;
    width: 80%;
	margin-left: 7%;
}
.TextoEnPopUpES{
	font-family:"Tabac Sans Light";
	font-weight: 200;
	font-size: 18px;
	color: #FAF0DE;
	margin-left: 7%;
	line-height: 1.3em;
}


.BotonCerrarCartasE{
 background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/Btn_CerrarPopUp.png);
 width: 56px;
 height: 56px;
 z-index: 4;
 cursor: pointer;
}
	


.BotonCompartirPopUpES{
    background-image: url("https://embed.eltiempo.digital/infografias/2019/04/bicentenario-prueba-integracion/navegaciongeneral2/img/btn/btn-empezar-normal.png");
    background-repeat: no-repeat;
    width: 133px;
    height: 39px;
    z-index: 4;
    padding-top: 14px;
    padding-left: 71px;
    background-position: left;
    background-origin: border-box;
    float: left;
    margin-left: 7%;
    cursor: pointer;
}

.BotonVermasES{
background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/Btn_VerMasPersonajesES.png);
background-repeat: no-repeat;	
width: 133px;
height: 39px;
z-index: 4;
background-position: right;
background-origin: border-box;
padding-top: 77%;
padding-left: 70%;	
}

.ImgDelaEstrellas{
}

.BotonCartasE{
background-image: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/BtnVerMas.png);
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
z-index: 5;
padding-left: 100%;
padding-top: 15%;	
}

.cartas-wrapper {
	width: 90%;
    margin: auto;
            margin-top: 20vh;
    position: relative;
}

.btn-scroll-carta{
    width: 40px;
    height: 40px;
    position: absolute;
}
.cartas-btn-scroll {
	width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 125px;
    z-index: 50;
}

.btn-der {
	    right: 0;
    background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/flecha-der.png);
    background-size: 40px;
}

.btn-izq {
    background: url(https://embed.eltiempo.digital/infografias/2019/05/bicentenario/capitulo-1/personajes/desktop/img/flecha-izq.png);
    background-size: 40px;
}