@charset "utf-8";
@import url("L_G06_U04_L04.css");
/* CSS Document */

.pizarra {
    background-image: url(../img/L_G06_U04_L04_03_01/pizarra.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1034px;
    height: 529px;
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 9%;
}

.ninaLibro {
    background-image: url(../img/L_G06_U04_L04_03_02/ninaLibros.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 232px;
    height: 463px;
    display: inline-block;
    position: absolute;
    top: 22%;
    left: 65%;
}

.titulo {
    font-family: 'cabinbold';
    font-size: 45px;
    line-height: 54px;
    color: #fefefe;
    text-align: center;
    margin-top: 9%;
}

.titulo2 {
    font-family: 'cabinbold';
    font-size: 45px;
    line-height: 44px;
    color: #343A49;
    text-align: center;
    margin-top: 2.8%;
}

.textoContenido {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 42px;
    color: #fefefe;
    margin: 3% 0 0 7%;
    letter-spacing: -0.5px;
}

.textoContenido2 {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 39px;
    color: #383C49;
    margin: 2% 0 0 7%;
    letter-spacing: -0.5px;
}

#btnPlanteamiento {
    background-image: url(../img/L_G06_U04_L04_03_01/btnPlanteamiento.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 300px;
    height: 62px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    position: absolute;
    top: 46%;
    left: 11%;
}

#btnClimax {
    background-image: url(../img/L_G06_U04_L04_03_01/btnClimax.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 276px;
    height: 62px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    position: absolute;
    top: 46%;
    left: 43%;
}

#btnDesarrollo {
    background-image: url(../img/L_G06_U04_L04_03_01/btnDesarrollo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 276px;
    height: 62px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    position: absolute;
    top: 62%;
    left: 12%;
}

#btnDesenlace {
    background-image: url(../img/L_G06_U04_L04_03_01/btnDesenlace.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 276px;
    height: 62px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    position: absolute;
    top: 62%;
    left: 43%;
}

.btnSonido {
    background-image: url(../img/btnSonido.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    position: absolute;
    top: 21%;
    left: 82%;
}

.closePopup {
    width: 67px;
    height: 67px;
    -webkit-border-radius: 67px;
    -moz-border-radius: 67px;
    border-radius: 67px;
    display: inline-block;
    position: absolute;
    right: -5%;
    top: -15%;
}

.popNovela {
    background-color: #A1BF37;
    border: 18px solid #fefefe;
    width: 800px;
    height: 230px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}

.tituloPopUp {
    font-family: 'cabinbold';
    font-size: 35px;
    color: #fefefe;
    line-height: 42px;
    text-align: center;
    margin-top: 2%;
}

.contenidoPopUp {
    font-family: 'cabinregular';
    font-size: 35px;
    color: #fefefe;
    line-height: 42px;
    text-align: left;
    margin: 3% auto 0 auto;
    display: table;
    letter-spacing: 0;
}

.lstInformacion {
    margin: 5% 0 0 13%;
    padding: 0;
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 39px;
    color: #383C49;
    letter-spacing: -0.5px;
    list-style-image: url(../img/click/clickInformacion.png);
}

.lstInformacion li {
    vertical-align: top;
    cursor: pointer;
    display: list-item !important;
}

.flechaDerecha {
    background-image: url(../img/L_G06_U04_L04_03_02/flechaDerecha.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 32px;
    height: 19px;
    display: inline-block;
    margin: 0 10px;
}

.llave {
    background-image: url(../img/L_G06_U04_L04_03_02/llave.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 14px;
    height: 277px;
    display: inline-block;
    margin: 0 11px 0 13px;
}

.textoPersonajePrincipal {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 39px;
    color: #343A49;
    vertical-align: middle;
    display: inline-block;
    margin: 4% 0 0 24%;
}

.textoPersonajePrincipal span:nth-child(1) {
    font-family: 'cabinbold';
}

.textoPersonajeSecundario {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 39px;
    color: #343A49;
    vertical-align: middle;
    display: inline-block;
    margin: 4% 0 0 24%;
}

.textoPersonajeSecundario span {
    font-family: 'cabinbold';
    vertical-align: super;
}
/*up**/

.bocadillo {
    width: 540px;
    height: 97px;
    background-color: #8ABF4A;
    border: 5px solid #fefefe;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position: relative;
}

.bocadillo:before {
    content: "";
    top: -23px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    border-style: solid;
    border-width: 0 47px 23px;
    border-color: #fefefe transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.bocadillo:after {
    content: "";
    top: -15px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    border-style: solid;
    border-width: 0 35px 17px;
    border-color: #8ABF4A transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.bocadillo .texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 42px;
    color: #fefefe;
    white-space: nowrap;
}
/*down*/

.bocadilloDown {
    width: 540px;
    height: 97px;
    background-color: #8ABF4A;
    border: 5px solid #fefefe;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position: relative;
}

.bocadilloDown:before {
    content: "";
    bottom: -27px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    border-style: solid;
    border-width: 23px 47px 0;
    border-color: #fefefe transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.bocadilloDown:after {
    content: "";
    bottom: -21px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    border-style: solid;
    border-width: 23px 47px 0;
    border-color: #8ABF4A transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.bocadilloDown .texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 42px;
    color: #fefefe;
    white-space: nowrap;
}

#bocadillo1 {
    position: absolute;
    top: 38%;
    left: 28%;
    display: none;
}

#bocadillo2 {
    width: 664px;
    height: 186px;
    position: absolute;
    top: 50.5%;
    left: 25%;
    display: none;
}

#bocadillo3 {
    width: 664px;
    height: 186px;
    position: absolute;
    top: 56%;
    left: 25%;
    display: none;
}

#bocadillo4 {
    width: 658px;
    height: 200px;
    position: absolute;
    top: 62%;
    left: 19%;
    display: none;
}

#bocadillo4 .texto {
    line-height: 36px;
}

#bocadillo5 {
    width: 658px;
    height: 102px;
    position: absolute;
    top: 41%;
    left: 24%;
    display: none;
}

#bocadillo6 {
    width: 658px;
    height: 130px;
    position: absolute;
    top: 41%;
    left: 24%;
    display: none;
}

#bocadillo7 {
    width: 658px;
    height: 130px;
    position: absolute;
    top: 47%;
    left: 20%;
    display: none;
}

#bocadillo8 {
    width: 658px;
    height: 130px;
    position: absolute;
    top: 52.5%;
    left: 20%;
    display: none;
}

.personaje {
    cursor: pointer;
}

.textoEspacioNovela {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 39px;
    color: #343A49;
    vertical-align: middle;
    display: inline-block;
    margin: 10% 0 0 12%;
}

.btnEstructura {
    position: relative;
    height: 49px;
    width: auto;
    background-color: #343A49;
    color: #fefefe;
    padding: 0 24px 0 20px;
    display: inline-block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    cursor: pointer;
    vertical-align: bottom;
}

.btnEstructura .texto {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 49px;
    color: #fefefe;
    vertical-align: middle;
    display: inline-block;
}

.clickBtnEstructura {
    background-image: url(../img/click/clickBtnEstructura.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 22px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: 8px;
    top: 12%;
}

#lstEstructura {
    margin: 2% 0 0 11%;
    padding: 0;
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 36px;
    color: #343A49;
    vertical-align: middle;
    display: inline-block;
}

#lstEstructura li {
    margin-bottom: 24px;
}

#lstEstructura li:nth-child(1),
#lstEstructura li:nth-child(3) {
    height: 121px;
}

#lstEstructura li:nth-child(2) {
    height: 157px;
}

#lstEstructura li span {
    display: none;
}

#lstIdeas {
    margin: 6% 0 0 16%;
    padding: 0;
    font-family: 'cabinregular';
    font-size: 28px;
    line-height: 43px;
    color: #343A49;
    vertical-align: middle;
    display: inline-block;
    list-style-type: disc;
}

#lstIdeas li span {
    font-size: 35px;
}