/* CSS Document */
@import url("S_G06_U01_L02_03.css");

/*fondoGalaxia*/
.fondoResumen {
    background-image: url(../img/resumen/fondoResumen.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 683px;
}
/*nina con libro*/
.IL_S_G06_U01_L01_03_02_01 {
    background-image: url(../img/diagramaHR/IL_S_G06_U01_L01_03_02_01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 264px;
    height: 493px;
    position: absolute;
    left: -45%;
    top: 18%;
    z-index: 1;
    display:inline-block;
}

.instruccion{
    position: absolute;
    width: 608px;
    height: 298px;
    padding: 0px;
    background: #FFFFFF;
    border: #F95353 solid 12px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    margin-top: -1.5%;
    margin-left: 14%;
}

.instruccion:before {
content: "";
position: absolute;
top: 80px;
left: -65px;
border-style: solid;
border-width: 30px 60px 30px 0;
border-color: transparent #F95353;
display: block;
width: 0;
z-index: 0;
}

.instruccion:after {
content: "";
position: absolute;
top: 87.5px;
left: -45px;
border-style: solid;
border-width: 22px 50px 22px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
}
.instruccion .texto {
font-family: 'cabinregular';
font-size: 33px;
color: #6F6F6E;
line-height: 41px;
margin-left: 1%;
margin-top: 0%;
letter-spacing: 0;
}


.btn{
    background-image: url(../img/resumen/btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
}
.btn:hover{
    background-image: url(../img/resumen/btnHover.png);
    cursor:pointer;
    zoom: 103%;

}
.btnVacio{
    background-image: url(../img/resumen/btnVacio.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
}

.texto{
    font-family: 'cabinbold';
    font-size: 36px;
    color: #fefefe;
    letter-spacing: 0;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    line-height: 37px;
    text-align: center;
}

/*modal*/
.modal {
    background-image: url(../img/resumen/modal.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 550px;
    height: 353px;
}
/*modal2*/
.modal2 {
    background-image: url(../img/resumen/modal2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 668px;
    height: 282px;
}

.tituloResumen{
letter-spacing: 0;
text-align: center;
color: #ED2507;
font-family: 'cabinbold';
font-size: 29px;
line-height: 120px;
}

.modal .texto{
color: #7F7F7F;
font-family: 'cabinregular';
font-size: 30px;
top: 56%;
}

.g1 {
    background-image: url(../img/resumen/g1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
    top: 101%;
    left: 9%;

}
.g2 {
    background-image: url(../img/resumen/g2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
top: -48%;
left: 9%;
}
.g3 {
    background-image: url(../img/resumen/g3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
top: 101%;
left: 9.5%;
}
.g4 {
    background-image: url(../img/resumen/g4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
top: -24%;
left: -31.5%;
}
.g5 {
    background-image: url(../img/resumen/g5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
top: -25%;
left: 81%;
z-index: 1;
}
.g6 {
    background-image: url(../img/resumen/g6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 270px;
    height: 165px;
    position: absolute;
top: -59.5%;
left: 54%;
}