@import url("M_G06_U03_L02_03.css");
/*ILUSTRACIONES*/
/*peso*/

.cntReconoceVector {
    background-image: url(../img/M_G06_U03_L02_03_01/cntReconoceVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 820px;
    height: 481px;
    margin: 7% auto 0 auto;
    position: relative;
}

.observaVector {
    background-image: url(../img/M_G06_U03_L02_03_01/observaVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1167px;
    height: 473px;
    position: relative;
    margin: 4% 0 0 2%;
}

.cntVector {
    background-image: url(../img/M_G06_U03_L02_03_01/cntVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1167px;
    height: 493px;
    position: absolute;
    top: 13%;
    left: 5%;
}

.vectorA {
    background-image: url(../img/M_G06_U03_L02_03_01/vectorA.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 21px;
    height: 32px;
    display: inline-block;
}

.sombraIzquiera {
    width: 44px;
    height: 101px;
    box-shadow: 19px 3px 20px -19px rgb(87, 87, 87);
    background-color: #D7ECF4;
    top: -9%;
    left: -3%;
    position: absolute;
    transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    -moz-transform: rotate(44deg);
    -ms-transform: rotate(44deg);
    z-index: 1;
}

.sombraDerecha {
    width: 44px;
    height: 101px;
    box-shadow: 19px 3px 20px -19px rgb(87, 87, 87);
    background-color: #D7ECF4;
    top: -9%;
    right: -3%;
    position: absolute;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    z-index: 1;
}

.clickTraslacion {
    background-image: url(../img/click/clickTraslacion.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 32px;
    height: 36px;
    position: absolute;
    left: 50%;
    top: 104%;
}

.clickTraslacion2 {
    background-image: url(../img/click/clickTraslacion2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 35px;
    height: 39px;
    position: absolute;
    left: 95%;
    top: 45%;
    z-index: 2;
}

.pregunta {
    width: 820px;
    height: 102px;
    position: relative;
}

.pregunta .texto {
    font-family: 'Myriad Pro';
    font-size: 35px;
    line-height: 40px;
    color: #fefefe;
    height: 300px;
    background-color: #F9B233;
    top: 172px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    -ms-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    white-space: nowrap;
}

.oracion {
    font-family: 'cabinmedium';
    font-size: 35px;
    line-height: 50px;
    color: #706F6F;
    position: absolute;
    top: 58%;
    left: 3.5%;
}

.oracion .completa {
    width: 121px;
    height: 36px;
    background-color: #F0F0F0;
    border: 0;
    border-bottom: 1px solid #9D9D9C;
    display: inline-block;
    padding: 0 5px;
}

.oracion .completa:focus {
    outline: none;
}

.resultadoOracion {
    font-family: 'cabinregular';
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 0;
    position: absolute;
    left: 10%;
    text-align: center;
}

.resultadoOracionSuccess {
    color: #3AAA35;
    top: 81%;
    left: 12%;
}

.resultadoOracionFail {
    color: #E30613;
    top: 79%;
}

.cntFiguraABCD {
    background-image: url(../img/M_G06_U03_L02_03_01/cntFiguraABCD.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1204px;
    height: 465px;
    display: table;
    position: relative;
    margin: 4.5% auto 0 auto;
}

.IL_M_G06_U03_L02_03_01_02 {
    background-image: url(../img/M_G06_U03_L02_03_01/IL_M_G06_U03_L02_03_01_02.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 215px;
    height: 217px;
    display: inline-block;
    z-index: 1;
}

.IL_M_G06_U03_L02_03_01_02Click {
    background-image: url(../img/M_G06_U03_L02_03_01/IL_M_G06_U03_L02_03_01_02Click.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 215px;
    height: 217px;
    display: inline-block;
    z-index: 1;
}

.IL_M_G06_U03_L02_03_01_02Bordeado {
    background-image: url(../img/M_G06_U03_L02_03_01/IL_M_G06_U03_L02_03_01_02Bordeado.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 215px;
    height: 217px;
    display: inline-block;
    z-index: 1;
}

#dragFiguraABCD {
    cursor: pointer;
}

.contDropPrimo {
    background-color: transparent;
    width: 215px;
    height: 217px;
    position: absolute;
    top: 45%;
    left: 73.7%;
}

.IL_M_G06_U03_L02_03_01_03 {
    background-image: url(../img/M_G06_U03_L02_03_01/IL_M_G06_U03_L02_03_01_03.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 215px;
    height: 217px;
    display: none;
    position: absolute;
    top: 45%;
    left: 73.7%;
    z-index: 999999;
}

.cntOcultoVector {
    background-image: url(../img/M_G06_U03_L02_03_01/cntOcultoVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 326px;
    height: 54px;
    position: absolute;
}

.iconoVector {
    background-image: url(../img/M_G06_U03_L02_03_01/iconoVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 89px;
    height: 91px;
    position: absolute;
    top: 58%;
    left: 41%;
}

.observaVector2 {
    background-image: url(../img/M_G06_U03_L02_03_01/observaVector2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1139px;
    height: 494px;
    position: relative;
    margin: 3% auto 0 auto;
}

.observaVector3 {
    background-image: url(../img/M_G06_U03_L02_03_01/observaVector3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 620px;
    height: 404px;
    position: absolute;
    top: 18%;
    left: 4%;
}

.flechaRojaVector {
    background-image: url(../img/M_G06_U03_L02_03_01/flechaRojaVector.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 466px;
    height: 72px;
    position: absolute;
    top: -25px;
    left: -65px;
}

.pregunta1 {
    background-image: url(../img/M_G06_U03_L02_03_01/pregunta1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 478px;
    height: 279px;
    position: absolute;
    top: 39%;
    left: 57%;
}

.pregunta2 {
    background-image: url(../img/M_G06_U03_L02_03_01/pregunta2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 478px;
    height: 306px;
    position: absolute;
    top: 27%;
    left: 57%;
}

.textoRespuesta2 {
    font-family: 'cabinregular';
    font-size: 35px;
    color: #fefefe;
    top: 79% !important
}

.pregunta1 .respuesta {
    width: 100%;
    height: 111px;
}

.pregunta2 .respuesta {
    width: 100%;
    height: 158px;
}

.pregunta1 .sombraIzquiera,
.pregunta2 .sombraIzquiera,
.preguntaSiNo .sombraIzquiera {
    width: 44px;
    height: 80px;
    top: -32px;
    right: -4%;
}

.pregunta1 .sombraDerecha,
.pregunta2 .sombraDerecha,
.preguntaSiNo .sombraDerecha {
    width: 44px;
    height: 80px;
    top: -32px;
    right: -4%;
}

.preguntaSiNo {
    position: absolute;
    top: 33%;
    left: 57%;
    width: 478px;
    height: 280px;
}

.preguntaSiNo .enunciado {
    background-color: #3AAA35;
    width: 478px;
    height: 173px;
    position: relative;
}

.preguntaSiNo .enunciado .texto {
    font-family: 'cabinregular';
    font-size: 35px;
    line-height: 35px;
    color: #fefefe;
}

.preguntaSiNo .linea {
    width: 478px;
    height: 15px;
    position: relative;
    background-color: #fefefe;
}

.preguntaSiNo .linea:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 18px 22px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -17px;
    left: 96px;
}

.preguntaSiNo .linea:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 18px 22px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -17px;
    left: 338px;
}

.respuestaSiNo {
    position: relative;
    width: 235px;
    height: 94px;
    background-color: #706F6F;
    display: inline-block;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    cursor: pointer;
}

.respuestaSiNo .texto {
    color: #fefefe;
    font-family: 'cabinmedium';
    font-size: 50px;
    line-height: 36px;
}

.success {
    background-image: url(../img/M_G06_U03_L02_03_01/success.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 50.55px;
    height: 51.52px;
    position: absolute;
    top: 18%;
    left: 44%;
    display: none;
}

.fail {
    background-image: url(../img/M_G06_U03_L02_03_01/fail.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 38.26px;
    height: 37.73px;
    position: absolute;
    top: 34%;
    left: 44%;
    display: none;
}

.tituloTraslacion {
    background-image: url(../img/M_G06_U03_L02_03_01/tituloTraslacion.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 453px;
    height: 83px;
    position: absolute;
    top: 15%;
    left: 8%;
}

#txtTraslacion {
    width: 1087px;
    height: 344px;
    background-color: #fefefe;
    resize: none;
    border: 2px solid #989898;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 15px;
    position: absolute;
    top: 27%;
    left: 6.5%;
    font-family: 'cabinmedium';
    font-size: 35px;
    -webkit-box-shadow: 0px 0px 9px 0px #989898 inset;
    -moz-box-shadow: 0px 0px 9px 0px #989898 inset;
    box-shadow: 0px 0px 9px 0px #989898 inset;
}

#txtTraslacion:focus {
    outline: none;
}

.textoInformacion {
    font-family: 'cabinmedium';
    font-size: 30px;
    line-height: 40px;
    position: absolute;
    left: 74%;
    top: 11%;
}

.btnInformacion {
    background-image: url(../img/M_G06_U03_L02_03_01/btnInformacion.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 69px;
    height: 69px;
    display: inline-block;
    vertical-align: bottom;
}

.popInformacion {
    background-image: url(../img/M_G06_U03_L02_03_01/popInformacion.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 872px;
    height: 585px;
    position: absolute;
    top: 34%;
    left: 44%;
}

.closePopUp {
    background-image: url(../img/M_G06_U03_L02_03_01/closePopUp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 82px;
    height: 82px;
    position: absolute;
    top: -3%;
    left: 93%;
}

.tituloDesarrollo {
    font-family: 'cabinmedium';
    font-size: 35px;
    color: #575756;
    line-height: 45px;
    position: absolute;
    top: 9%;
    left: 4%;
}

.cntDesarrollo1 {
    position: relative;
    width: 594px;
    height: 428px;
    padding: 0px;
    background: #706F6F;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 1.5%;
}

.cntDesarrollo1:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 45px 0 45px 30px;
    border-color: transparent #706F6F;
    display: block;
    width: 0;
    z-index: 1;
    margin-top: -45px;
    right: -29px;
    top: 50%;
    pointer-events: none;
}

.cntDesarrollo1 .textoCentrado {
    font-family: 'cabinmedium';
    font-size: 35px;
    color: #ffffff;
    line-height: 45px;
}

.cuadriculaDesarrollo {
    background-image: url(../img/M_G06_U03_L02_03_01/cuadriculaDesarrollo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 625px;
    height: 459px;
    position: absolute;
    left: 49.5%;
    top: 18.5%;
}

.desarrollo1 {
    background-image: url(../img/M_G06_U03_L02_03_01/desarrollo1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 625px;
    height: 459px;
    position: absolute;
    top: 30.5%;
    left: 2.5%;
}

.cntDesarrollo1 .desarrollo1 {
    left: 100.8%;
    top: -11px;
    z-index: 1;
}

.preguntaSiNo2 {
    background-image: url(../img/M_G06_U03_L02_03_01/preguntaSiNo2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 707px;
    height: 500px;
    position: absolute;
    top: 10%;
    left: 42%;
}

.contentItemShow {
    cursor: pointer;
    height: 79.6px;
    width: 312.218px;
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.contentItemShow.it1 {
    top: 138px;
    left: 38px;
}

.contentItemShow.it2 {
    top: 138px;
    left: 357px;
}

.contentItemShow.it3 {
    top: 406px;
    left: 38px;
    height: 92.6px;
}

.contentItemShow.it4 {
    top: 406px;
    left: 357px;
    height: 92.6px;
}

.cntMovimientos {
    width: 1008px;
    height: 517px;
    background-color: #fefefe;
    border: 1px solid #C6C6C6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: 18%;
    left: 10%;
}

.movimientoDrag {
    width: 314px;
    height: 83px;
    position: relative;
    background-color: #878787;
    box-shadow: 4px 4px 0px 0px #B2B2B2;
    -webkit-box-shadow: 4px 4px 0px 0px #B2B2B2;
    -moz-box-shadow: 4px 4px 0px 0px #B2B2B2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 13px;
}

.movimientoDrag .textoCentrado {
    font-family: 'cabinregular';
    font-size: 35px;
    color: #575756;
}

.movimientoDrop {
    background-image: url(../img/M_G06_U03_L02_03_01/movimientoDrop.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 314px;
    height: 83px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 12px;
}

#lstDrags {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5%;
    left: 6%;
}

#lstDrags li:nth-child(1) .movimientoDrag {
    background-color: #FFF083;
}

#lstDrags li:nth-child(2) .movimientoDrag {
    background-color: #A6FF99;
}

#lstDrags li:nth-child(3) .movimientoDrag {
    background-color: #F0B3FF;
}

#lstDrags li:nth-child(4) .movimientoDrag {
    background-color: #FFB0E7;
}

#lstDrags li:nth-child(5) .movimientoDrag {
    background-color: #A4EAFF;
}

#lstDrops {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 21%;
    left: 64%;
}

.estrategias {
    background-image: url(../img/M_G06_U03_L02_03_01/estrategias.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1105px;
    height: 440px;
    margin: 5% auto 0 auto;
    position: relative;
}

#estrategia1 {
    width: 1035px;
    height: 168px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 15.4%;
}

#estrategia2 {
    width: 1035px;
    height: 106px;
    background-color: #FFF0DB;
    position: absolute;
    right: 0;
    top: 53.8%;
}

#estrategia3 {
    width: 1035px;
    height: 83px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 78.1%;
}

.estrategias .clickTraslacion {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

.trasladeFiguraOculta {
    background-image: url(../img/M_G06_U03_L02_03_01/trasladeFiguraOculta.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 607px;
    height: 446px;
    position: absolute;
    right: 0;
    top: -2%;
}
.trasladeFiguraOculta2 {
  background-image: url(../img/M_G06_U03_L02_03_01/trasladeFiguraOculta2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 576px;
  height: 415px;
  position: absolute;
  right: 21px;
  top: 0%;
}

.trasladeFigura1 {
    background-image: url(../img/M_G06_U03_L02_03_01/trasladeFigura1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1212px;
    height: 507px;
    position: absolute;
    left: 2%;
    top: 17.5%;
}

.trasladeFigura2 {
    background-image: url(../img/M_G06_U03_L02_03_01/trasladeFigura2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1212px;
    height: 497px;
    position: absolute;
    left: 2%;
    top: 19%;
}

.trasladeFigura3 {
    background-image: url(../img/M_G06_U03_L02_03_01/trasladeFigura3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1211px;
    height: 502px;
    position: absolute;
    left: 2%;
    top: 19%;
}

.conclusionTraslacion {
    background-color: #F9B233;
    width: 940px;
    height: 55px;
    position: absolute;
    bottom: 7px;
    left: 10.8%;
}

.conclusionTraslacion2 {
    background-image: url(../img/M_G06_U03_L02_03_01/conclusionTraslacion2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 947px;
    height: 91px;
    position: absolute;
    left: 10.45%;
    top: 82.1%;
}

.componentesVector {
    background-image: url(../img/M_G06_U03_L02_03_01/componentesVector.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 628px;
    height: 462px;
    position: absolute;
    left: 4%;
    top: 18%;
}