@import url("S_G06_U01_L05_03.css");
.observaAnimacion2 {
    background-image: url(../img/S_G06_U01_L05_03_02/observaAnimacion2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

.ejemplos {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplos.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#tabla1 {
    width: 500px;
    height: 450px;
    background-color: transparent;
    position: absolute;
    top: 30.5%;
    left: 3%;
}

#tabla2 {
    width: 478px;
    height: 450px;
    background-color: transparent;
    position: absolute;
    top: 30.5%;
    left: 58.7%;
}
/*ejemplos*/

#IL_S_G06_U01_L05_03_02_01 {
    background-image: url(../img/S_G06_U01_L05_03_02/IL_S_G06_U01_L05_03_02_01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 359px;
    height: 219px;
    position: absolute;
    top: 34%;
    left: 3%;
}

#IL_S_G06_U01_L05_03_02_02 {
    background-image: url(../img/S_G06_U01_L05_03_02/IL_S_G06_U01_L05_03_02_02.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 359px;
    height: 212px;
    position: absolute;
    top: 34%;
    left: 35.5%;
}

#IL_S_G06_U01_L05_03_02_03 {
    background-image: url(../img/S_G06_U01_L05_03_02/IL_S_G06_U01_L05_03_02_03.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 359px;
    height: 212px;
    position: absolute;
    top: 34%;
    left: 68.4%;
}

#ejemplo1 {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#ejemplo1Grafica {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo1Grafica.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#ejemplo2 {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#ejemplo2Desarrollo1 {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo2Desarrollo1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#ejemplo2Desarrollo2 {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo2Desarrollo2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#ejemplo2Desarrollo3 {
    background-image: url(../img/S_G06_U01_L05_03_02/ejemplo2Desarrollo3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

.tramo {
    width: 189px;
    height: 85px;
    position: absolute;
}

#tramo1 {
    left: 59.2%;
    top: 39%;
}

#tramo2 {
    left: 59.2%;
    top: 52%;
}

#tramo3 {
    left: 59.2%;
    top: 65.4%;
    height: 87px;
}

.forma {
    background-color: #00B3AA;
    width: 189px;
    height: 85px;
    position: relative;
}

.forma .texto {
    white-space: nowrap;
    text-align: center;
    font-family: 'cabinbold';
    font-size: 37px;
    color: #ffffff;
    line-height: 35px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#cntForma1 {
    position: absolute;
    top: 31%;
    left: 76.5%;
}

#cntForma2 {
    position: absolute;
    top: 46.5%;
    left: 76.5%;
}

#cntForma3 {
    position: absolute;
    top: 63%;
    left: 76.5%;
}

#forma2 {
    height: 88px;
}

#forma1,
#forma3 {
    height: 86px;
}

#forma3 .texto {
    font-size: 35px;
}

#tblQuestionario {
    position: absolute;
    left: 74.6%;
    top: 40.5%;
}

.dato {
    width: 67px;
    height: 53px;
    position: relative;
    color: #515151;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    color: #515151;
}

.dato .texto {
    white-space: nowrap;
    text-align: center;
    font-family: 'cabinbold';
    font-size: 53px;
    line-height: 57px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.success {
    background-color: #03D617;
    color: #fefefe;
}

.fail {
    background-color: #FF2727;
    color: #fefefe;
}

#cntPregunta1 {
    position: absolute;
    left: 74.7%;
    top: 40.4%;
    display: inline-block;
}

#cntPregunta2 {
    position: absolute;
    left: 74.7%;
    top: 50.6%;
    display: inline-block;
}

#cntPregunta3 {
    position: absolute;
    left: 74.7%;
    top: 60.9%;
    display: inline-block;
}

#cntPregunta4 {
    position: absolute;
    left: 74.7%;
    top: 71.1%;
    display: inline-block;
}

#tblPosicion {
    position: absolute;
    top: 32.5%;
    left: 66.85%;
}

.cajaPosicion {
    width: 100px;
    height: 41px;
    border: 5px solid #B1B1B1;
    background-color: #fefefe;
    display: inline-block;
    position: absolute;
    color: #515151;
    font-size: 37px;
    font-family: 'cabinmedium';
    text-align: center;
}

.cajaPosicion:focus {
    outline: none;
}

.cajaPosicionCorrecta{ border: 5px solid #87C40B;color: #4A9B02; background-color: #E7F3CE;}
.cajaPosicionIncorrecta{border: 5px solid #E43623;color: #9B0202; background-color: #FFE9E8;}