* {
    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: 2017px;
    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;
}