.center{
    position: relative;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.t_instruc{
    text-align: left !important;
    padding-left: 75px;
}
.instruccion{
    font-size: var(--subtitulo);
    font-family: var(--bold) !important;
    color: var(--gray);
}
.pastilla {
    width: 290px;
    height: 130px;
    position: absolute;
    background-color: var(--blue);
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
    margin: auto;
    border-radius: 20px;
}
.pastilla > p {
    font-family: var(--black);
    font-size: var(--titulo);
    text-align: center;
    top: 30px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
}
.tex_inic{
    top: 210px !important;
}
.lineaWhite {
    position: absolute;
    width: 70px;
    height: 2px;
    background-color: white;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 0;
    margin: auto;
}
.whiter {
    color: white;
    font-size: var(--titulo);
}
.huevitos{
    position: absolute;
    /*left: -126px;*/
    width: 200px;
    left: -415px;
    right: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}
.arriba{
    top: -70%;
}
.huevitos2{
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    width: 800px;
    bottom: 130px;
}
.texto{
    position: absolute;
    width: 100%;
    text-align: center;
    height: 40px;
    left: 0px;
    right: 0px;
    top: 263px;
    margin: auto;
    color: #0c397a;
    font-family: var(--black);
   font-size: var(--subtitulo);
}
.T_h_subir1{
    top: 21% !important;
}
.grupo1{
    position: absolute;
    width: 510px;
    height: fit-content;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 220px;
}
.abajo{
    top: 0px;
    bottom: -315px;
}
.cajaPan7{
    position: absolute;
    width: 200px;
    height: 76px;
    left: 0;
    right: 0;
    bottom: 59px;
    margin: auto;
    text-align: center;
}

.coPan7{
    width: 50%;
    height: 26px;
    border: 1px solid var(--blue);
    vertical-align: middle;
    margin-left: -1px;
    background-color: var(--blue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;

}

.coPan7 > p{
    color: white;
    font-size: 16px;
}

.co2Pan7{
    width: 10%;
    height: 26px;
    border: 1px solid #789edc;
    vertical-align: middle;
    border-collapse: collapse;
    margin-left: -1px;
    background-color: #abc6f1;
}

.conPan7Alt{
    height: 50px;
    margin-top: -1px;
    background-color: white;
}

.conPan7Alt > p{
    color: var(--gray);
    font-size: var(--titulo);
    font-family: var(--black); 
}

.brd1Pan7{
    border-radius: 0px 0px 0px 20px;
}


.brd2Pan7{
    border-radius: 0px 0px 20px 0px;
}

.UnitPan7{
    position: absolute;
    width: 400px;
    height: 40px;
    background-color: var(--blue);
    left: 0;
    top: 0;
    bottom: 0px;
    right: 0;
    margin: auto;
    overflow: hidden;
}
.texto span{
    color: #ff4545;
}
.pastilla2 {
    width: 290px;
    height: 130px;
    position: absolute;
    background-color: transparent;
    left: 0;
    top: -70%;
    right: 0px;
    bottom: 0;
    margin: auto;
    border-radius: 20px;
}
.pastilla2 > p {
    font-family: 'latoblack';
    font-size: 27px;
    text-align: center;
    top: 30px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    color: var(--blueForte);
}
.lineazul {
    position: absolute;
    width: 70px;
    height: 2px;
    background-color: #789fdc;
    left: 0;
    right: 0;
    top: 67px;
    bottom: 0;
    margin: auto;
}
.azul{
    color: #789fdc;
    font-size: 23px;
}
/*///////////////////////*/
.texto2{
    position: relative;
    font-family: var(--light);
    font-size: var(--texto);
    color: #3e3e3e;
    width: 100%;
    text-align: center;
    top: 250px;
}
.tex_top{
    top: 180px;
}
.center>.texto2{
    position: relative;
    top: 0px;
    margin-bottom: 50px;
}
.cont_descena{
    position: relative;
    width: 70px;
    padding: 0px 50px;
    flex-wrap: wrap-reverse;
}
.cont_descena>img{
    position: relative;
    width: 40px;
    height: 32px;
    margin-bottom: 0px;
}
.contenedor_glob{
    position: relative;
    width: 100%;
}
.azul_t{
    color: var(--blueForte) !important;
    font-family: 'latoregular' !important;
}
/********/
.agrup_ani2>img{
    margin-bottom: 0px;
}
.caj_center{
    position: relative !important;
    bottom: 0px !important;
    margin: 0px !important;
    margin-top: 50px !important;
}
.sub_tex{
    top: 150px;
}


.texto6{
    position: absolute;
    font-family: var(--light);
    font-size: var(--texto);
    color: #3e3e3e;
    width: 100%;
    height: 100px;
    left: 0px;
    right: 0px;
    top: -250px;
    bottom: 0px;
    margin: auto;
    text-align: center;
}
.texto5{
    position: absolute;
    font-family: var(--light);
    font-size: 25px;
    color: #3e3e3e;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    height: fit-content;
    left: 0px;
    right: 0px;
    top: -250px;
    bottom: 0px;
    margin: auto;
    text-align: center;
    display: none;
}
.clm8 {
    position: relative;
    display: inline-block;
    width: 9%;
    height: 100%;
    left: 11px;
    border-right: 2px dashed white;
}
.clm9 {
    position: relative;
    display: inline-block;
    width: 7%;
    height: 100%;
    left: 6px;
   border-right: 2px dashed white;
    display: none;
}
.lado{
        left: -720px;
}
.mas{
    width: 600px;
}
.arriba2{
    bottom: 80px;
}
.clm10{
    position: relative;
    display: inline-block;
    width: 7%;
    height: 100%;
    left: 6px;
    border-right: 2px dashed white;
}
.espacioextra{
    background-color: white;
}
.caja{
    position: relative;
    width: 375px;
    height: 190px;
    background-image: url(../images/caja-24.png);
    background-position: center;
    background-size: cover;
    vertical-align: middle;
    background-repeat: no-repeat;
    text-align: center;
    display: inline-block;
}
.contenedor1{
    position: absolute;
    width: 620px;
    height: fit-content;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: 20%;
}
.dulce{
    width: 45px;
    cursor: pointer;
    z-index: 999;
    cursor: url(../images/icon/cursor.png),pointer;
}
.dulce2{
    width: 45px;
    position: relative;
    display: inline-block;
    cursor: pointer; 
    opacity: .5;
    cursor: url(../images/icon/cursor.png),pointer;
}
.dulce6{
    width: 45px;
    position: relative;
    display: inline-block;
}
.dulce4{
    width: 45px;
    position: relative;
    display: inline-block;
    margin: 0px 7px;
}
.dulce3{
    width: 35px;
    position: relative;
    cursor: pointer;
    z-index: 20;
    display: none;
    cursor: url(../images/icon/cursor.png),pointer;
}
.dulce7{
    width: 35px;
    position: relative;
    cursor: pointer;
    z-index: 20;
    cursor: url(../images/icon/cursor.png),pointer;
}
.dulce8{
    width: 35px;
    position: absolute;
    cursor: pointer;
    z-index: 20;
    cursor: url(../images/icon/cursor.png),pointer;
    display: none;
}
.cont_dulc_flex{
    position: relative;
    width: 100%;
    height: 80%;
    top: 8px;
}
/*#dulc10{
        left: 445px;
}
#dulc9{
        left: 395px;
}
#dulc8{
        left: 345px;
}
#dulc7{
        left: 300px;
}
#dulc6{
}
#dulc5{
        left: 200px;
}
#dulc4{
        left: 155px;
}
#dulc3{
        left: 110px;
}
#dulc2{
        left: 65px;
}
#dulc1{
        left: 20px;
}*/



.cajadulces{
    width: 241px;
    height: 213px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    left: -20px;
}
.cajadulces2{
    width: 143px;
    height: 155px;
    position: absolute;
    vertical-align: middle;
    -webkit-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
    left: -350px;
    right: 0px;
    top: 35px;
    margin: auto;
}
.sombra{
    position: relative;
    display: inline-block;
    width: 45px;
    height: 50px;
    cursor: pointer;

    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);

    -webkit-transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);
    -o-transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);
    transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);
    /*transition-duration: .48s;*/
    /*transition-timing-function: cubic-bezier(.32,1.46,.54,1.28);*/
}
.contenedor2{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 500px;
    height: fit-content;
    bottom: 10%;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s; /* Safari 
  transition: width 2s;
}
.mover1{
    -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}
.caja2{
    position: relative;
    display: inline-block;
    width: 375px;
    height: 190px;
    background-image: url(../images/caja-24.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    left: 120px;
}
.contenedor3{
    position: absolute;
    width: 313px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    height: 108px;
}
.conteo{
    position: relative;
    display: inline-block;
    font-family: var(--light);
    font-size: 40px;
    color: #0c397a;
    -webkit-transform: rotate(-38deg);
    -ms-transform: rotate(-38deg);
    -o-transform: rotate(-38deg);
    transform: rotate(-38deg);
    left: 38%;
    top: -90%;
}
.contenedor2 div p{
    position: relative;
    display: inline-block;
    font-family: var(--light);
    font-size: var(--texto);
    color: #3e3e3e;
    margin-bottom: 10px;
}
.inputText{
        position: relative;
    /* width: 100%; */
    display: inline-block;
    /* max-width: 130px; */
    width: 100px;
    background-color: rgba(120, 159, 220, 0.2);
    font-size: var(--subtitulo);
    padding: 10px;
    color: var(--gray);
    text-align: center;
    margin: auto;
    border: none;
    border-radius: 5px;
    border: 2px solid #e5ecf8;
    margin-bottom: 10px;
}
.contenedor4{
    position: absolute;
    width: 377px;
    height: 189px;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: 22%;
}
.contenedor5{
    position: absolute;
    width: 446px;
    height: 110px;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 0px;
    bottom: 140px;
}
.texto3{
    position: absolute;
    font-family: var(--light);
    font-size: var(--texto);
    color: #3e3e3e;
    width: fit-content;
    height: fit-content;
    left: 0px;
    right: 0px;
    bottom: 90px;
    margin: auto;
    text-align: center;
}
.contenedor7{
    position: relative;
    display: inline-block;
    width: 147px;
    margin-left: 50px;
}
.contenedor6{
    position: relative;
    display: inline-block;
    width: 245px;
}
.tpos1{
    top: -500px;
}
.tpos3{
    top: 114px;
}
.barrapost{
    top: -375px;
}
.contenedor8{
    position: absolute;
    width: 500px;
    left: 0px;
    right: 0px;
    margin: auto;
    top: -126px;
    bottom: 0px;
    height: 50px;
    text-align: center;
}
.recuadro{
    position: relative;
    display: inline-block;
    width: 190px;
    height: 210px;
    background: #789fdc66;
    border-radius: 15px;
    text-align: center;
    display: none;
    margin-right: 24px;
}
.cont_dulce_img{
    position: absolute;
    width: 90%;
    height: 100%;
    top: 9px;
    left: 0px;
    right: 0px;
    margin: auto;
}
.cont_dulce_img>img{
    position: relative !important;
    display: inline-block;
    left: 0px !important; 
}
.drop1{
    display: inline-block;
}
.drop2{
    display: none;
}
.drop3{
    display: none;
}
.contenedor9{
    position: absolute;
    width: 620px;
    height: fit-content;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: 180px;
    justify-content: flex-start;
}
.recuadro p{
    position: absolute;
    font-family: var(--bold);
    font-size: 35px;
    color: #0c397a;
    bottom: 5px;
    width: 100%;
}
.tpos2{
    position: relative;
    top: 0px;
    width: 61%;
}
.cont_cent{
    top: 80px !important;
    left: 0px;
}
.barrapost2{
    width: 290px;
    position: relative;
    height: 27px;
}
.clm11{
    position: relative;
    display: inline-block;
    width: 8.5%;
    height: 100%;
    left: 11px;
   border-right: 2px dashed white;
}
.contenedor10{
    position: absolute;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    right: 106px;
    margin: auto;
    top: 74px;
}
.contenedor10>img{
    position: relative;
    width: 18px;
}
.baj_tex{
    top: 90px
}
.cubo{
    position: relative;
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: url(../images/icon/cursor.png),pointer;
}

.cubo2{
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 5px;
    cursor: url(../images/icon/cursor.png),pointer;
}
.cubito{
    width: 30px;
    height: 30px;
    background: transparent;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 5px;
}
.s1>.cubito{
    margin-bottom: -10px;
}
.contenedor11{
    position: absolute;
    width: 380px;
    left: 100px;
    margin: auto;
    top: 268px;
    height: fit-content;
}
.recuadroazul{
    position: absolute;
    width: 41px;
    height: 277px;
    margin: 0px 13px;
    background-color: #789fdc47;
    padding: 5px 0px;
    display:flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    justify-content: flex-end;
}
.recuadroazul>.cubo{
    cursor: auto;
    margin-bottom: -10px;
}
.recuadroazul>.cubo:active{
    z-index: 12313412;
}
.rec3{
    left: 125px;
    pointer-events:none;
    opacity: 0.5;
}
.rec2{
    left: 60px;
    pointer-events:none;
    opacity: 0.5;
}
.rec4{
    left: 195px;
    pointer-events:none;
    opacity: 0.5;
}
.contenedor12{
    position: absolute;
    width: 280px;
    height: 277px;
    right: 100px;
    margin: auto;
    bottom: 0px;
    top: 0px;
}

.texto4{
    text-align: left;
    font-size: var(--texto);
    top: 0px;
    bottom: 0px;
    margin: auto;
    position: absolute;
}
.texto4 span{
    font-family: var(--bold);
}
.boton1{
    position: absolute;
    font-family: var(--light);
    color: white;
    font-size: 20px;
    background-color: #789fdc;
    border-radius: 15px;
    margin: auto;
    right: 200px;
    bottom: 80px;
    padding: 10px;
    cursor: pointer;
    display: none;
}
.boton1:hover{
    opacity: 0.5;
}
.drop3{
    margin-right: 0px
}
.suma{
    color: #3e3e3e;
    border-radius: 0px 0px 20px 20px;
    width: 200px;
    font-family: "latoblack";
    font-size: 42px;
}
.recuadro1{
    position: relative;
    width: 190px;
    height: 210px;
    background: #789fdc66;
    border-radius: 15px;
    text-align: center;
    margin-right: 24px;
    padding: 0px 10px;
}
.recuadro2{
    position: relative;
    width: 190px;
    height: 210px;
    background: #789fdc66;
    border-radius: 15px;
    text-align: center;
    margin-right: 24px;
    padding: 0px 10px;
}
.recuadro3{
    position: relative;
    width: 190px;
    height: 210px;
    background: #789fdc66;
    border-radius: 15px;
    text-align: center;
    padding: 0px 10px;
}
.recuadro1 p {
    position: absolute;
    font-family: var(--bold);
    font-size: 35px;
    color: #0c397a;
    bottom: 5px;
    left: 0px;
    right: 0px;

}
.recuadro2 p {
    position: absolute;
    font-family: var(--bold);
    font-size: 35px;
    color: #0c397a;
    bottom: 5px;
    left: 0px;
    right: 0px;
}
.recuadro3 p {
    position: absolute;
    font-family: var(--bold);
    font-size: 35px;
    color: #0c397a;
    bottom: 5px;
    left: 0px;
    right: 0px;
}
.dulce5{
    width: 35px;
    position: relative;
    display: inline-block;  
}
.contenedor13{
    position: absolute;
    width: 620px;
    height:211px;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: 0px;
    top: 69px;
}
.solo{
    top: 19px;
    left: -64px;
}
.solo2{
        top: -315px;
}
#boton2{
    display: none;
    position: absolute;
    left: 0px;
    right:0px;
    bottom: 30px;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    margin-left: auto;
}

.boton2{
    font-family: var(--light);
    color: white;
    font-size: 20px;
    background-color: #789fdc;
    border-radius: 15px;
    padding: 10px;
    cursor: pointer;
    display: none;
    position: absolute;
    right: 207px;
    bottom: 80px;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    margin: auto;
}
.boton2:hover{
    opacity: 0.5;
}
.pasar1{
    display: none;
}
.mov1{
    top: 224px;
}
.texto1{
    position: absolute;
    width: 100%;
    text-align: center;
    height: fit-content;
    left: 0px;
    right: 0px;
    top: 30%;
    margin: auto;
    color: #0c397a;
    font-family: var(--black);
    font-size: var(--subtitulo);
}
.texto0{
    position: absolute;
    width: 100%;
    text-align: center;
    height: fit-content;
    left: 0px;
    right: 0px;
    bottom: 130px;
    margin: auto;
    color: #0c397a;
    font-family: var(--black);
    font-size: var(--subtitulo);
}
.animacion2{
    top: -70%;
}
.canasta1{
    position: relative;
    width: 246px;
    top: 17px;
    left: -7px;
}
.canasta2{
    position: absolute;
    top: 118px;
    width: 230px;
    left: 2px;
    z-index: 1;
}
.canasta3{
    position: absolute;
    left: -13px;
    top: 125px;
    z-index: 5;
    width: 255px;
}
.huevo{
    position: absolute;
    width: 33px;
}
.canasta{
        position: absolute;
    width: 255px;
    height: 235px;
    left: 0px;
    right: 0px;
    bottom: 170px;
    /*bottom: 50px;*/
    margin: auto;
}
.huevostodos{
    position: absolute;
    top: 111px;
    /*top: 91px;*/
    z-index: 4;
}
.huevo2{
    left: 22px;
    top: 19px;
    z-index: 4;
}
.huevo1{
    top: 15px;
    z-index: 4;
}
.huevo3{
    left: 45px;
    top: 27px;
    z-index: 4;
}
.huevo4{
left: 71px;
    top: 31px;
    z-index: 4;
}
.huevo5{
left: 99px;
    top: 27px;
    z-index: 4;
}
.huevo6{
left: 127px;
    top: 30px;
    z-index: 4;
}
.huevo7{
left: 151px;
    top: 25px;
    z-index: 4;
}
.huevo8{
    left: 175px;
    top: 3px;
    z-index: 3;
}
.huevo9{
    left: 179px;
    top: 23px;
    z-index: 3;
}
.huevo10{
left: 141px;
    top: 1px;
    z-index: 3;
}
.huevo11{
    left: 111px;
    top: 1px;
    z-index: 3;
}
.huevo12{
    left: 82px;
    top: 0px;
    z-index: 3;
}
.huevo13{
    left: 52px;
    top: 2px;
    z-index: 3;
}
.huevo14{
    left: 25px;
    top: -7px;
    z-index: 3;
}
.huevo15{
left: 185px;
    top: -15px;
    z-index: 2;
}
.huevo16{
    left: 156px;
    top: -18px;
    z-index: 2;
}
.huevo17{
    left: 126px;
    top: -25px;
    z-index: 2;
}
.huevo18{
    left: 97px;
    top: -24px;
    z-index: 2;
}
.huevo19{
    left: 44px;
    top: -28px;
    z-index: 2;
}
.huevo20{
    left: 71px;
    top: -28px;
    z-index: 1;
}
.huevo21{
    left: 92px;
    top: -50px;
    z-index: 1;
}
.huevo22{
    left: 116px;
    top: -49px;
    z-index: 1;
}
.huevo23{
    left: 198px;
    top: 12px;
    z-index: 4;
}
.huevosec{
    position: relative;
    width: 33px;
    display: inline-block;
    margin: 3px;
}
.conthuevo1{
    position: relative;
    width: 227px;
    height: 113px;
    border: #fff solid 2px;
    border-radius: 19px;
    padding: 5px;
    display: inline-block;
}

.conthuevo2{
    position: relative;
    width: 227px;
    height: 113px;
    border: #fff solid 2px;
    border-radius: 19px;
    padding: 5px;
    display: inline-block;
}

.conthuevo3{
    position: relative;
    width: 125px;
    height: 50px;
    display: inline-block;
    top: -26px;
    left: 10px;
}
.conthuevo4{
    position: relative;
    width: 140px;
    height: 60px;
    display: inline-block;
    top: -26px;
    left: 10px;
    border: #789fdc solid 2px;
    border-radius: 19px;
    padding: 5px;
}
.posicion{
        position: absolute;
    width: 597px;
    height: 115px;
    /*left: 0px;*/
    left: -39px;
    right: 0px;
    bottom: 72px;
    top: 0px;
    margin: auto;
}
.text0{
    position: absolute;
    width: 100%;
    text-align: center;
    height: fit-content;
    left: 0px;
    right: 0px;
    bottom: 28%;
    margin: auto;
    color: #0c397a;
    font-family: var(--black);
    font-size: var(--subtitulo);
}
.posicion2{
    position: absolute;
    width: 200px;
    height: 100px;
    left: 0;
    right: 0;
    top: -260px;
    margin: auto;
    text-align: center;
}
.posicion1{
    position: absolute;
    width: 603px;
    height: 115px;
    /*left: 0px;*/
    left: -39px;
    right: 0px;
    bottom: 0px;
    /*top: 68px;*/
    top: 0px;
    margin: auto;
}
.cont_titu {
    position: absolute;
    width: 360px;
    left: 12px;
    top: 15px;
}
.cont_titu > h1 {
    position: relative;
    font-size: var(--titulo);
    font-family: var(--black);
    color: var(--blueForte);
    margin-left: 0px;
    text-align: left;
    display: inline-block;
}
.cont_titu > h2 {
    position: relative;
    font-size: var(--subtitulo);
    font-family: var(--black);
    color: var(--blue);
    display: inline-block;
    /*margin-left: 8px;*/
}
.cont_titu > hr {
    position: relative;
    width: 80px;
    height: 2px;
    border: none;
    margin-top: 8px;
    background-color: var(--blue);
}
.cubo1{
     width: 40px;
    height: 40px;
    background: #789fdc;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 7px;
    display: none;
}
.barra1{
    position: absolute;
    width: 538px;
    height: 40px;
    left: 0px;
    right: 0px;
    bottom: -131px;
    top: 0px;
    margin: auto;
    display: flex;
}
.barra2{
    position: absolute;
    /*width: 538px;*/
    width: 412px;
    height: 40px;
    left: 0px;
    right: 0px;
    /*bottom: -155px;*/
    /*top: 0px;*/
    bottom: 285px;
    margin: auto;
    display: flex;
}
.barra3{
    position: absolute;
    width: 538px;
    height: 40px;
    left: 0px;
    right: 0px;
    bottom: 32px;
    top: 0px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clm1{
    position: relative;
    display: inline-block;
    width: 9.15%;
    height: 100%;
    /*left: 11px;*/
    border-right: 2px dashed white;
}

.posi{
    bottom: 32px;
    width: 400px !important;
}
.clm1_1{
    left: -18px;
    width: 40px !important;
    display: none;
}
.barra4{
    position: absolute;
    width: 414px;
    height: 40px;
    left: 0px;
    right: 0px;
    bottom: -126px;
    top: 0px;
    margin: auto;
    display: flex;
}
.caida{
    position: relative;
    display: inline-block;
    background-image: url(../images/sombra-25.png);
    background-position: center;
    background-size: 45px;
    vertical-align: middle;
    background-repeat: no-repeat;
    width: 45px;
    height: 66px;
    margin: 11px 8px 0px 8px;
    top: 21px;
}
.bigDrag{
    -webkit-transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);
    -o-transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);
    transition: all 0.1s cubic-bezier(.32,1.46,.54,1.28);

    -webkit-transform: scale3d(1.1, 1.1, 1.1) !important;
     -ms-transform: scale3d(1.1, 1.1, 1.1) !important;
     -o-transform: scale3d(1.1, 1.1, 1.1) !important;
     transform: scale3d(1.1, 1.1, 1.1) !important;
}
.posicioncaja{
    position: absolute;
    width: 200px;
    height: 100px;
    margin: auto;
    text-align: center;
    left: 191px;
    right: auto;
    bottom: 7%;

}

.contenedor14{
    position: absolute;
    width: 240px;
    left: 100px;
    margin: auto;
    top: 47%;
    height: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
}
.boton3{
    font-family: var(--light);
    color: white;
    font-size: 20px;
    background-color: #789fdc;
    border-radius: 15px;
    padding: 10px;
    cursor: pointer;
    display: none;
    position: relative;
    width: fit-content;
    display: inline-block;
}
.boton3:hover{
    opacity: .5;
}
.contbotones{
    position: absolute;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    right:  271px;
    bottom: 12%;
    display: none;
}
.contenedor15{
    position: absolute;
    width: 520px;
    height: 345px;
    right: 100px;
    margin: auto;
    bottom: 0px;
    top: 86px;
}
.rec7{
    left: 100px;
    pointer-events:none;
    opacity: 0.5;
}
.rec6{
    left: 50px;
    pointer-events:none;
    opacity: 0.5;
}
.rec8{
    left: 150px;
    pointer-events:none;
    opacity: 0.5;
}
.rec9{
    left: 200px;
    pointer-events: none;
    opacity: 0.5;
}
.rec10{
    left: 250px;
    pointer-events: none;
    opacity: 0.5;
}
.rec11{
    left: 300px;
    pointer-events: none;
    opacity: 0.5;
}
.rec12{
    left: 350px;
    pointer-events: none;
    opacity: 0.5;
}
.rec13{
    left: 400px;
    pointer-events: none;
    opacity: 0.5;
}
.rec14{
    left: 450px;
    pointer-events: none;
    opacity: 0.5;
}
.cajaPan8{
    position: absolute;
    width: 200px;
    height: 100px;
    margin: auto;
    left: 107px;
    bottom: 8%;
}
.recuadroazul1{
    position: absolute;
    width: 41px;
    height: 275px;
    margin: 0px 13px;
    background-color: #789fdc47;
    padding: 5px 0px;
    display:flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.ver_resp{
    color: #FF00FF;
    font-family: var(--light) !important;
    display: none;
}
.ver_resp>span>img{
    position: relative;
    width: 30px;
    top: 9px;
    margin-right: 5px;
}
.btn_ver_resp {
    position: absolute;
    width: 250px;
    padding: 10px;
    background-color: var(--blue);
    text-align: center;
    font-size: var(--texto);
    font-family: var(--bold);
    border-bottom: 4px solid #6A8CBF;
    border-right: 4px solid #6A8CBF;
    color: white;
    border-radius: 15px;
    cursor: url(../images/icon/cursor.png),pointer;
    display: none;
    right: 0px;
    left: 0px;
    margin: auto;
    bottom: 45px;
}
.T_azul{
    color: var(--blueForte);
}
.cen_text{
    width: 552px;
    height: 423px;
    font-family: "latoregular";
    color: var(--blueForte);
}
.TF{
    position: relative;
    width: 100%;
    text-align: center;
    top: 130px;
}