.contenActividad {
    background-image: url(../img/content_act1-36.png);
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translate(-50%);
    width: 1082px;
    height: 609px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.ContenedorIntro {
    border: 2px solid #F39972;
    border-style: dashed;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 89%;
    height: 81%;
    position: absolute;
    margin: 0px auto;
    /* padding-left: 1px; */
    
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.centervideo {
    width: 800px;
    height: 450px;
    transform: translate(50%);
    position: absolute;
    right: 50%;
    top: 16px;
}

.flechaSiguiente {
    background-image: url(../img/flechaSiguiente.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 35px;
    position: absolute;
    left: 101.3%;
    top: 92.5%;
    transform: translate(-50%);
}

.flechaAtras {
    background-image: url(../img/flechaAtras.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 35px;
    position: absolute;
    top: 92.5%;
    transform: translate(-50%);
    right: 96.3%;
}

.btn_hipotesis1 {
    background-image: url("../img/btn_hipotesis1-37.png");
    width: 640px;
    height: 400px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 40%;
    left: 21%;
    bottom: -316px;
    cursor: pointer
}

.btn_hipotesis2 {
    background-image: url("../img/bt_hipotesis2-38.png");
    width: 640px;
    height: 400px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 40%;
    left: 51%;
    bottom: -316px;
    cursor: pointer;
}

.img_ejmpTesis {
    background-image: url("../img/L_G06_U03_L03-39.png");
    background-size: 100%;
    width: 79px;
    height: 79px;
    background-repeat: no-repeat;
    right: 127px;
    position: absolute;
    top: 12px;
    cursor: pointer;
}

.tituloContent {
    text-align: center;
    font-size: 38.65px;
    font-family: "cabinregular";
    line-height: 53.75px;
}

. inline {
    display: inline-block;
}

.popup_h1 {
    background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.25, #009FB8), color-stop(1, #5EC4F0));
    background-image: -o-linear-gradient(top, #009FB8 25%, #5EC4F0 100%);
    background-image: -moz-linear-gradient(top, #009FB8 25%, #5EC4F0 100%);
    background-image: -webkit-linear-gradient(top, #009FB8 25%, #5EC4F0 100%);
    background-image: -ms-linear-gradient(top, #009FB8 25%, #5EC4F0 100%);
    background-image: linear-gradient(to top, #009FB8 25%, #5EC4F0 100%);
}

.popup_h2 {
    height: 445px !important;
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.2, #C01818), color-stop(1, #E8530E));
    background-image: -o-linear-gradient(top, #C01818 20%, #E8530E 100%);
    background-image: -moz-linear-gradient(top, #C01818 20%, #E8530E 100%);
    background-image: -webkit-linear-gradient(top, #C01818 20%, #E8530E 100%);
    background-image: -ms-linear-gradient(top, #C01818 20%, #E8530E 100%);
    background-image: linear-gradient(to top, #C01818 20%, #E8530E 100%);
}

div [data-sg-id="item_popup"] {
    background-color: #FFFFFF !important;
}

.btn_cerrar_h1 {
    background-image: url(../img/close_popuph1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 81px;
    height: 81px;
    position: absolute;
    top: 76%;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: 9px;
    margin-right: 12px;
    z-index: 2;
    left: 95%;
}

.btn_cerrar_h2 {
    background-image: url(../img/close_popuph2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 81px;
    height: 81px;
    position: absolute;
    top: 76%;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: 9px;
    margin-right: 12px;
    z-index: 2;
    left: 95%;
}

.title_popuph1 {
    font-family: cabinregular;
    font-size: 43px;
    color: #FFF;
    text-align: left;
    font-weight: bold;
    line-height: 53.83px;
    letter-spacing: 1px;
}

p {
    font-family: cabinregular;
    color: #fff;
    font-size: 49.56px;
    text-align: left;
    letter-spacing: 0.5px;
    line-height: 50px;
}

.popCC {
   /* top: 249.7px !important;
    left: 25% !important;*/
    width: 631px !important;
}

.fondoCabecera {
    background-image: url(../img/imgCabecera.png);
    background-size: 100%;
    background-repeat: no-repeat;
    /* width: 100%; */
    /* height: 100%; */
    
    width: 1263px;
    height: 63px;
    margin-left: -3px;
    z-index: 10;
    position: absolute;
    right: -95px;
    top: -59px;
}

.actividad {
    top: 0px;
    position: absolute;
    z-index: 11;
    top: -47px;
    position: absolute;
    z-index: 11;
    left: -82px;
}

.cabeceraContent {
    /* background-color: #07AA9D; */
    
    background-image: url(../img/imgFondoCabeceraContent.png);
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    width: 1175px;
    height: 114px;
    z-index: 0;
    position: absolute;
    top: -12px;
    transform: translate(-3.9%);
    opacity: 0.8;
}

.borderContent {
    background-color: transparent;
    border: 2px solid white;
    border-style: dashed;
    width: 1146px;
    height: 124px;
    border: ;
    margin: 0px auto;
    border-radius: 10px;
    /* top: 1px; */
    
    transform: translate(0%, -20%);
}

.letrasCabecera {
    text-align: center;
    transform: translate(-50%, -50%);
    font-family: "cabin" !important;
    font-weight: 500;
    letter-spacing: normal;
    color: #FFFFFF;
    /* padding-left: 27px; */
    
    left: 50%;
    top: 76px;
    font-size: 50px;
    width: 602px;
}

.letrasContenido {
    font-family: "cabinregular";
    font-size: 35px;
    letter-spacing: normal;
    line-height: 42px;
    color: #263C4A;
}

.contenidoC {
    position: absolute;
    transform: translate(406px, 166px);
}

.circulo {
    content: "";
    width: 8.5px;
    height: 8.5px;
    background-color: #07AA9D;
    vertical-align: text-top;
    border-radius: 10px;
    margin-top: 18px;
    margin-right: 3px;
}

.textoDerechaCaracolita {
    vertical-align: super;
    /* line-height: 0px; */
    /* height: 10px; */
    
    position: absolute;
    transform: translate(66%, -128%);
    -ms-transform: translate(110%, -128%);
    width: 456px;
    line-height: 42px;
    letter-spacing: normal;
}

.borderDer {
    border-right: 2px solid #07AA9D;
    border-right-style: dashed;
    padding: 0px 80px 0px 2px;
}

.caracol {
    background-image: url(../img/imgCaracol.png);
    background-size: 100%;
    background-repeat: no-repeat;
    /* width: 100%; */
    /* height: 100%; */
    
    width: 109px;
    height: 75px;
    position: absolute;
    z-index: 14;
    top: 114px;
    left: 11px;
    cursor: pointer;
}

.moverCaracol {
    -webkit-animation: moverCaracol 60s;
    -moz-animation: moverCaracol 60s;
    /* Chrome, Safari, Opera */
    
    -ms-animation: moverCaracol 60s;
    animation: moverCaracol 60s;
}

.log_cc {
    background-image: url(../img/imgLicencia_cc.png);
    width: 50px;
    height: 50px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    left: 45.2%;
    position: absolute;
    top: 91%;
}

.Autor {
    background-image: url(../img/imgPabloNeruda.png);
    width: 322px;
    height: 431px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 18%;
    left: 70%;
}

.flechaAtras2 {
    background-image: url(../img/flechaAtras.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 35px;
    position: absolute;
    top: 145.6%;
    transform: translate(-50%);
    right: 126%;
}

.flechaSiguiente2 {
    background-image: url(../img/flechaSiguiente.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 35px;
    position: absolute;
    left: 160%;
    transform: translate(-50%);
    top: 145.6%;
}

.romance {
    background-image: url(../img/imgRomance.png);
    width: 387px;
    height: 511px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 15%;
    left: 64%;
}

.typed-cursor {
    color: #FFFFFF;
}
/* Efectos */

@-webkit-keyframes moverCaracol {
    /*9% {
        top: 114px;
        left: 381px;
    }
    11% {
        top: 144px;
        left: 11px;
    }
    20% {
        top: 144px;
        left: 381px;
    }
    21% {
        top: 201px;
        left: 36px;
    }
    30% {
        top: 201px;
        left: 365px;
    }
    31% {
        top: 248px;
        left: 11px;
    }
    40% {
        top: 248px;
        left: 390px;
    }
    41% {
        top: 286px;
        left: 11px;
    }
    50% {
        top: 286px;
        left: 403px;
    }
    51% {
        top: 361px;
        left: 11px;
    }
    60% {
        top: 361px;
        left: 404px;
    }
    61% {
        top: 407px;
        left: 11px;
    }
    70% {
        top: 407px;
        left: 404px;
    }
    71% {
        top: 459px;
        left: -35px;
    }
    80% {
        top: 459px;
        left: 446px;
    }
    81% {
         top: 114px;
         left: 566px;
    }
    90% {
        top: 114px;
        left: 981px;
    }
    
    91% {
        top: 144px;
        left: 566px;
    }
    100%{
         top: 163px;
        left: 941px;
    }
    */
    
    7% {
        top: 114px;
        left: 381px;
    }
    8% {
        top: 156px;
        left: 11px;
    }
    14% {
        top: 156px;
        left: 381px;
    }
    15% {
        top: 201px;
        left: 36px;
    }
    21% {
        top: 201px;
        left: 365px;
    }
    22% {
        top: 240px;
        left: 11px;
    }
    28% {
        top: 240PX;
        left: 365px;
    }
    29% {
        top: 286px;
        left: 11px;
    }
    35% {
        top: 286px;
        left: 390px;
    }
    36% {
        top: 361px;
        left: 11px;
    }
    43% {
        top: 361px;
        left: 404px;
    }
    44% {
        top: 407px;
        left: 11px;
    }
    51% {
        top: 407px;
        left: 446px;
    }
    52% {
        top: 459px;
        left: -20px;
    }
    58% {
        top: 459px;
        left: 450px;
    }
    59% {
        top: 114px;
        left: 566px;
    }
    66% {
        top: 114px;
        left: 941px;
    }
    67% {
        top: 167px;
        left: 566px;
    }
    /*------------*/
    
    74% {
        top: 167px;
        left: 941px;
    }
    75% {
        top: 245PX;
        left: 566px;
    }
    82% {
        top: 245px;
        left: 943PX;
    }
    83% {
        top: 288PX;
        left: 566PX;
    }
    89% {
        top: 288PX;
        left: 943PX;
    }
    90% {
        top: 331PX;
        left: 566px;
    }
    99% {
        top: 331PX;
        left: 1050PX;
    }
}

@-moz-keyframes moverCaracol {
    7% {
        top: 114px;
        left: 381px;
    }
    8% {
        top: 156px;
        left: 11px;
    }
    14% {
        top: 156px;
        left: 381px;
    }
    15% {
        top: 201px;
        left: 36px;
    }
    21% {
        top: 201px;
        left: 365px;
    }
    22% {
        top: 240px;
        left: 11px;
    }
    28% {
        top: 240PX;
        left: 365px;
    }
    29% {
        top: 286px;
        left: 11px;
    }
    35% {
        top: 286px;
        left: 390px;
    }
    36% {
        top: 361px;
        left: 11px;
    }
    43% {
        top: 361px;
        left: 404px;
    }
    44% {
        top: 407px;
        left: 11px;
    }
    51% {
        top: 407px;
        left: 446px;
    }
    52% {
        top: 459px;
        left: -20px;
    }
    58% {
        top: 459px;
        left: 450px;
    }
    59% {
        top: 114px;
        left: 566px;
    }
    66% {
        top: 114px;
        left: 941px;
    }
    67% {
        top: 167px;
        left: 566px;
    }
    /*------------*/
    
    74% {
        top: 167px;
        left: 941px;
    }
    75% {
        top: 245PX;
        left: 566px;
    }
    82% {
        top: 245px;
        left: 943PX;
    }
    83% {
        top: 288PX;
        left: 566PX;
    }
    89% {
        top: 288PX;
        left: 943PX;
    }
    90% {
        top: 331PX;
        left: 566px;
    }
    99% {
        top: 331PX;
        left: 1050PX;
    }
}

@-ms-keyframes moverCaracol {
    7% {
        top: 114px;
        left: 381px;
    }
    8% {
        top: 156px;
        left: 11px;
    }
    14% {
        top: 156px;
        left: 381px;
    }
    15% {
        top: 201px;
        left: 36px;
    }
    21% {
        top: 201px;
        left: 365px;
    }
    22% {
        top: 240px;
        left: 11px;
    }
    28% {
        top: 240PX;
        left: 365px;
    }
    29% {
        top: 286px;
        left: 11px;
    }
    35% {
        top: 286px;
        left: 390px;
    }
    36% {
        top: 361px;
        left: 11px;
    }
    43% {
        top: 361px;
        left: 404px;
    }
    44% {
        top: 407px;
        left: 11px;
    }
    51% {
        top: 407px;
        left: 446px;
    }
    52% {
        top: 459px;
        left: -20px;
    }
    58% {
        top: 459px;
        left: 450px;
    }
    59% {
        top: 114px;
        left: 566px;
    }
    66% {
        top: 114px;
        left: 941px;
    }
    67% {
        top: 167px;
        left: 566px;
    }
    /*------------*/
    
    74% {
        top: 167px;
        left: 941px;
    }
    75% {
        top: 245PX;
        left: 566px;
    }
    82% {
        top: 245px;
        left: 943PX;
    }
    83% {
        top: 288PX;
        left: 566PX;
    }
    89% {
        top: 288PX;
        left: 943PX;
    }
    90% {
        top: 331PX;
        left: 566px;
    }
    99% {
        top: 331PX;
        left: 1050PX;
    }
}

.ilustracion {
    background-image: url(../img/ilustracion.png);
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 125px;
    left: -290px;
    cursor: pointer;
}

.imgLlave {
    background-image: url(../img/imgLlave.png);
    width: 26px;
    height: 208px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 43%;
    left: 403px;
}

.imgVersoV {
    color: #95C11E;
    font-family: "cabin";
    font-size: 48px;
    letter-spacing: normal;
    line-height: 60px;
    font-weight: bold;
    position: absolute;
    visibility: hidden;
}

.imgEstrofaA {
    color: #009EE3;
    font-family: "cabin";
    font-size: 48px;
    letter-spacing: normal;
    line-height: 60px;
    font-weight: bold;
    position: absolute;
    visibility: hidden;
}

.imgEstrofa {
    background-image: url(../img/imgEstrofa.png);
    width: 345px;
    height: 498px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -112px;
    left: -353px;
 
    padding-right: -5px;
    /* margin-right: 20px; */
}

.sugerenciaAbsolute {
    position: absolute;
    left: 82%;
    top: 106px;
    padding: 0px;
    width: 258px;
}

.FlechaTpoema {
    content: "";
    width: 27px;
    height: 27px;
    /* background-color: #07AA9D; */
    
    background-image: url("../img/imgFlechaTestrofa.png");
    vertical-align: text-top;
    border-radius: 10px;
    margin-top: 8px;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.tablaTestrofa {
    margin-left: 148px;
    margin-top: 22px;
}

.pareado {
    cursor: pointer;
}

.pupupPareado {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 490px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
   /* top: 272.7px !important;
    left: 20% !important;*/
}

.pupupPareado .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupPareado .contenido {
    background-image: url(../img/imgFondoPareado.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 451px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.titlePareado {
    font-family: "cabin";
    font-weight: bold;
    font-size: 45px;
}

.estrofaPoema {
    color: #E30513;
}

.imgSonidoPareado {
    background-image: url("../img/imgSonidoPareado.png");
    background-size: 100%;
    width: 92px;
    height: 75px;
    background-repeat: no-repeat;
    right: 127px;
    /* position: absolute; */
    
    top: 12px;
    cursor: pointer;
    /* margin-top: 83px; */
    
    margin: 10px auto 0px;
    /* padding-top: 18px; */
}

.pupupTerceto .contenido {
    background-image: url(../img/imgFondoTerceto.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 451px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupTerceto .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 67px;
    height: 67px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupTerceto {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 490px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
    /*top: 272.7px !important;
    left: 20% !important;*/
}

.pupupCuarteto .contenido {
    background-image: url(../img/imgFondoCuarteto.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 451px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupCuarteto .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupCuarteto {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 490px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
    /*top: 272.7px !important;
    left: 20% !important;*/
}

.pupupQuinteto .contenido {
    background-image: url(../img/imgFondoQuinteto.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 451px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupQuinteto .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupQuinteto {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 490px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
   /* top: 272.7px !important;
    left: 20% !important;*/
}

.pupupSextilla .contenido {
    background-image: url(../img/imgFondoSextilla.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 451px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupSextilla .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupSextilla {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 490px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
    /*top: 272.7px !important;
    left: 20% !important;*/
}

.pupupOctova .contenido {
    background-image: url(../img/imgFondoOcteto.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 489px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupOctova .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupOctova {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 930px;
    height: 528px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
    /*top: 272.7px !important;
    left: 20% !important;*/
}

.pupupDecima .contenido {
    background-image: url(../img/imgFondoDecimo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 893px;
    height: 489px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupDecima .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupDecima {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 931px;
    height: 529px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
  /*  top: 272.7px !important;
    left: 20% !important;*/
}

.pupupSoneto .contenido {
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    width: 873px;
    height: 555px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 18px auto 0 auto;
    position: relative;
}

.pupupSoneto .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarPareado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupSoneto {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 916px;
    height: 594px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #263C4A;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b34d53', endColorstr='#b8625a', GradientType=1);
   /* top: 148.7px !important;
    left: 20% !important;*/
}

.contObj {
    height: 80px;
    background-color: #07AA9D;
    border: 0px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    cursor: pointer;
    position: relative;
}

.contObj:hover {
    background-color: #129D91;
}

.contObjSwap {
    width: 1023px;
    height: 80px;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    cursor: default;
    position: relative;
}

.contObj2 {
    height: 80px;
    background-color: #07AA9D;
    border: 0px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    cursor: pointer;
    position: relative;
}

.contObj2:hover {
    background-color: #129D91;
}

.contObj2Swap {
    width: 1023px;
    height: 80px;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.clickObj {
    background-image: url(../img/clickTipoEstrofa-72.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 23px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.letterTipoEstrofa {
    top: 261px;
    position: absolute;
    left: 52px;
    font-family: "cabinregular";
    font-size: 35px;
    letter-spacing: normal;
    line-height: 42px;
    width: 983px;
}

.btnEjemplo {
    background-image: url(../img/imgBtnEjemplo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 463px;
    height: 169px;
    position: absolute;
    top: 289px;
    right: 40%;
    border: 0;
    font-size: 0;
    cursor: pointer;
}

.flecha_PopupArribaRimado {
    width: 0px;
    height: 0px;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 17px solid #F39972;
    font-size: 0px;
    line-height: 0px;
    top: -16px;
    position: absolute;
    right: 55.5%;
}

.popupRimado {
    background-image: url(../img/imgPopupRimado.png);
    /* background: linear-gradient(to right, #F39972 0%, #F39972 100%) !important; */
    
    height: 132px;
    /* top: 393.7px !important; */
    
    border-radius: 23px !important;
    width: 755px;
    top: 161px;
    left: 216px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.popupSuelto {
    background-image: url(../img/imgPopupSuelto-71.png);
    /* background: linear-gradient(to right, #F39972 0%, #F39972 100%) !important; */
    
    height: 140px;
    /* top: 393.7px !important; */
    
    width: 773px;
    border-radius: 23px !important;
    top: 147px;
    left: 218px;
    left: 210px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.popupBlanco {
    background-image: url(../img/imgPopupBlanco.png);
    /* background: linear-gradient(to right, #F39972 0%, #F39972 100%) !important; */
    
    height: 236px;
    /* top: 393.7px !important; */
    
    border-radius: 23px !important;
    width: 756px;
    top: 60px;
    left: 208px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.letterPopup {
    padding: 15px 0px 0px 0px;
    font-family: "cabinregular";
    font-size: 35px;
    line-height: 34px;
    letter-spacing: normal;
}

.colorVerso {
    color: #302683;
    cursor: pointer;
}

.pupupEjemploVerso {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 915px;
    height: 552px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #07AA9D;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#07AA9D', endColorstr='#07AA9D', GradientType=1);
    /*top: 221.7px !important;
    left: 20% !important;*/
}

.pupupEjemploVerso .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarVerso.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 67px;
    height: 67px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupEjemploVerso .contenido {
    /* background-image: url(../img/imgFondoPareado.png); */
    
    background-size: 100%;
    background-repeat: no-repeat;
    width: 864px;
    height: 504px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: 25px auto 0 auto;
    position: relative;
    background-color: #FFFFFF;
}

.letterElVerso {
    font-family: 'cabinregular;
 font-size: 35px;
    letter-spacing: normal;
    line-height: 34px;
    text-align: left;
}

.imgLlave2 {
    background-image: url(../img/imgLlave.png);
    width: 23px;
    height: 173px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.letterVersos {
    font-family: 'cabinregular';
    font-size: 35px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 34px;
}

.btnRimaConsonate {
    background-image: url(../img/imgRimaConsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 410px;
    height: 200px;
    cursor: pointer;
    /*position: absolute;*/
}

.btnAsonante {
    background-image: url(../img/imgRimaAsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 410PX;
    height: 200px;
    cursor: pointer;
    /*position: absolute;*/
}

.pupupRimaConsonante {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 1006px;
    height: 553px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background-image: url(../img/imgFondoConsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
   /* top: 221.7px !important;
    left: 17% !important;*/
}

.pupupRimaConsonante .btnCerrarCC {
    background-image: url(../img/btnCerrarPConsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 67px;
    height: 67px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupRimaConsonante .contenido {
    /* background-image: url(../img/imgFondoPareado.png); */
    
    background-size: 100%;
    background-repeat: no-repeat;
    width: 954px;
    height: 504px;
    text-align: center;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    margin: 25px auto 0 auto;
    position: relative;
    background-color: #FFFFFF;
}

.fondoAtardecer {
    background-image: url(../img/imgFondoCajaRcDer.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 400px;
    height: 266px;
    margin-left: 22px;
    position: absolute;
    top: 208px;
}

.spanEjemplo {
    font-style: italic;
    font-family: 'cabin';
    font-size: 35px;
    letter-spacing: normal;
    font-weight: bold;
    margin: 0px 0px 0px 4px;
}

.contEjemploConsonate {
    width: 467px;
    height: 271px;
    cursor: pointer;
    background-color: #DADAD9;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    cursor: pointer;
    position: relative;
    margin-left: 30px;
    margin-top: 24px;
}

.contEjemploConsonate:hover {
    background-color: ##CACAC8;
}

.contObjSwapConsonate {
    width: 467px;
    height: 271px;
    cursor: default;
    background-color: transparent;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    position: relative;
    margin-left: 30px;
    margin-top: 24px;
}

.pupupRimaAsonante {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 1006px;
    height: 553px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    background-image: url(../img/imgFondoAsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    /*top: 221.7px !important;
    left: 17% !important;*/
}

.pupupRimaAsonante .btnCerrarCC {
    background-image: url(../img/btnCerrarPasonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 67px;
    height: 67px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupRimaAsonante .contenido {
    /* background-image: url(../img/imgFondoPareado.png); */
    
    background-size: 100%;
    background-repeat: no-repeat;
    width: 954px;
    height: 504px;
    text-align: center;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    margin: 25px auto 0 auto;
    position: relative;
    background-color: #FFFFFF;
}

.fondoMunecaAsonante {
    background-image: url(../img/imgMunecaAsonante.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 352px;
    height: 392px;
    margin-left: 47px;
    position: absolute;
    top: 112px;
}

.contEjemploAsonante {
    width: 491px;
    height: 201.31px;
    cursor: pointer;
    background-color: #DADAD9;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    cursor: pointer;
    position: relative;
    margin-left: 30px;
    margin-top: 6px;
}

.contEjemploAsonante:hover {
    background-color: ##CACAC8;
}

.contObjSwapAsonante {
    width: 491px;
    height: 201.31px;
    cursor: default;
    background-color: transparent -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    position: relative;
    margin-left: 30px;
    margin-top: 6px;
}

.ggc_contenidoPersonalizadoRitmo {
    background-image: url(../img/imgFondoRitmo3-71.png);
    background-size: 82% 97%;
    background-repeat: no-repeat;
    width: 996.24px;
    height: 657.27PX;
    /* position: static; */
    
    position: absolute;
    transform: translate(127px, 103px);
}

.fondoCabemoverCaracolceraRitmo {
    background-image: url(../img/imgCabecera.png);
    background-size: 100%;
    background-repeat: no-repeat;
    /* width: 100%; */
    /* height: 100%; */
    
    width: 1263px;
    height: 63px;
    margin-left: -3px;
    z-index: 10;
    position: absolute;
    right: -12px;
    top: -74px;
}

.actividadRitmo {
    top: 0px;
    position: absolute;
    z-index: 11;
    top: -62px;
    position: absolute;
    z-index: 11;
    left: -435px;
    font-family: 'NobileBoldItalic';
    background-color: #C63827;
    color: #FEFEFE;
    letter-spacing: 0;
    float: left;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin-left: 0px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.cabeceraContentRitmo {
    /* background-color: #07AA9D; */
    
    background-image: url(../img/imgFondoCabeceraContent.png);
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    width: 1175px;
    height: 114px;
    z-index: 0;
    position: absolute;
    top: -12px;
    transform: translate(-33.9%);
    opacity: 0.8;
}

.btnEjemploRitmo {
    background-image: url(../img/btnEjemploRitmo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 249px;
    height: 90px;
    position: absolute;
    top: 520px;
    right: 1036px;
    border: 0;
    font-size: 0;
}

.pupupRitmo {
    margin: 0px;
    margin-left: 18%;
    margin-top: 19%;
    width: 916px;
    height: 553px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    /* background-image: url(../img/imgFondoConsonante.png); */
    /* background-repeat: no-repeat; */
    /* background-size: 100%; */
    
    /*top: 221.7px !important;
    left: 21% !important;*/
    background-color: #07AA9D;
}

.pupupRitmo .btnCerrarCC {
    background-image: url(../img/imgBtnCerrarVerso.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 67px;
    height: 67px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    font-size: 0;
    margin-top: -22px;
    margin-right: -17px;
    z-index: 2;
}

.pupupRitmo .contenido {
    width: 864px;
    height: 504px;
    text-align: center;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    margin: 25px auto 0 auto;
    position: relative;
    background-color: #FFFFFF;
}

.fondoContent {
    background-image: url(../img/imgFondopupupRitmo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 552px;
    height: 440px;
    position: absolute;
    top: 45px;
    left: 327px;
    cursor: pointer;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

.letterPopupRitmo {
    font-family: "cabinregular";
    letter-spacing: normal;
    font-size: 35px;
    line-height: 34px;
    text-align: left;
    padding: 42px 0px 0px 34px;
}

.boxShadow {
    box-shadow: 9px 9px 8px -3px #7C7B7B;
    -moz-box-shadow: 9px 9px 8px -3px #7C7B7B;
    -ms-box-shadow: 9px 9px 8px -3px #7C7B7B;
}

.superEPoema {
    background-image: url(../img/imgSuperEPoema.png);
    width: 183.2px;
    height: 442.87px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    cursor: pointer;
    left: -280px;
    top: -93px
}

.superEPoema2 {
    background-image: url(../img/imgSuperEPoema2.png);
    width: 310.948px;
    height: 464.068px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    cursor: pointer;
    left: -309px;
    top: -12px;
}

.titleCC {
    font-family: 'cabinregular';
    font-size: 16px;
    line-height: 20px;
    color: #717175;
    letter-spacing: 0;
    width: 85%;
    margin: 13% auto 0% 10%;
    position: absolute;
    /* padding-top: 10px; */
}

.clickAzulB {
    background-image: url(../img/imgClickAzulBig.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 68.17px;
    height: 67.33px;
    position: absolute;
    left:50%;
    top: 50%;
     transform: translate(-50%,-50%);
    cursor: pointer;
}
.clickAzulS {
    background-image: url(../img/imgClickAzulSmall.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 45.75px;
    height: 45.83px;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.clickVerdeB {
    background-image: url(../img/imgClickVerdeBig.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 68.5px;
    height: 68.17px;
    position: absolute;
    left:50%;
    top: 50%;
     transform: translate(-50%,-50%);
    cursor: pointer;
}

.clickCafe {
    background-image: url(../img/imgClickCafe.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 46px;
    height: 44.88px;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}