@charset "utf-8";
/* CSS Document */

/* ------ INTRO ------- */
    
#pastillaSVG {
    position: absolute; 
    left: 7%;
    top: 20%;
    transition: transform 2s ease-in-out;
    -moz-transition: transform 2s ease-in-out;
    -webkit-transition: transform 2s ease-in-out;
    -o-transition: transform 2s ease-in-out;
}

#pastillaSVG.maxScale {
    -webkit-transform : scale(5);
    -moz-transform    : scale(5);
    -ms-transform     : scale(5);
    -o-transform      : scale(5);
    transform         : scale(5);    
}

#pastillaSVG.minScale {
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);
}

#tituloPrincipal {
    position: absolute;
    top: 29.2%;
    left: 13%;
    font-family: 'Futura XBlk BT';
    font-size: 28pt;
    line-height: 1.2em;
    letter-spacing: 0.014em;
}

#tituloPrincipal span {
    font-family: 'Helvetica';
    font-size: 45pt;
    font-weight: 750;
}

#subsMessage {
    position: absolute;
    width: 160px;
    height: 100px;
    padding-top: 50%;
    padding-left: 2%;
    pointer-events: none;
}


#im_inicio {
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
    filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
}

#fullscreen {
    position: absolute;
    top: 14px;
    right: 14px;    
}

#start {
    position: absolute;
    bottom: 18px;
    right: 24px;
}

#b_inicio {
    position: absolute;
    top: 32%;
    left: 24%;
}

#subtitles {
    position: absolute;
    bottom: 4px;
    left: 14px;
}

/* -------------------- */

/* --- CONTENT VIDEO --- */

#saltarAnimacion, #saltarAnimacion2 {
    position: absolute;
    font-size: 11.8px;
    font-weight: lighter;
    text-decoration: none;
    color: black;
    left: 84.5%;
    bottom: 1.75%;
    letter-spacing: -0.055em;
    font-family: 'Helvetica';  
}

#contentVideo {
    width: 100%;
    height: 100%;
}

#contentVideo video {
    display: block;
    width: 100%;
 }

#subs {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 26px;
    background-color: white;
}

#subs2 {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 30px;
    background-color: white;
}

video#videoTransicion1, video#videoTransicion2 {
    position: absolute;
    left: 0;
    top: 0;
}

/* -------------------- */

#b_atrasPaso1, #b_atrasPaso2, #b_atrasPaso3 {
    position: absolute;
    top: 22%;
    left: 24%;
}

#b_continuarPaso2, #b_continuarPaso3 {
    position: absolute;
    top: 22%;
    left: 12%;
}

#b_salir {
    position: absolute;
    top: 26%;
    left: 22%;
}

#contentInteractivo1 {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 1%;
    background-image: url(../images/fondo3crop.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

#contentInteractivo2, #contentInteractivo3 {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 1%;
    background-image: url(../images/fondo1crop.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

#tituloPaso1, #tituloPaso2, #tituloPaso3 {
    position: absolute;
    font-size: 17pt;
    top: 4.7%;
    line-height: 1.25em;
    left: 4.3%;
    letter-spacing: 0.01em;    
}

.ficha, .fichaSel {
    position: absolute;
}

.ficha:hover {
    cursor: pointer;
}

#cp1_1, #cp1_1b, #cp1_11, #cp1_11b, #cp1_21, #cp1_21b  {
    left: 54%;
    top: 6.8%;
    z-index: 2;
}

#cp1_2, #cp1_2b, #cp1_12, #cp1_12b, #cp1_22, #cp1_22b {
    left: 54%;
    top: 15%;
    z-index: 2;
}

#cp1_3, #cp1_3b, #cp1_13, #cp1_13b, #cp1_23, #cp1_23b {
    left: 54%;
    top: 23%;
    z-index: 2;    
}

#cp1_4, #cp1_4b, #cp1_14, #cp1_14b, #cp1_24, #cp1_24b {
    left: 54%;
    top: 31.3%;
    z-index: 2;    
}

#cp1_5, #cp1_15, #cp1_25 {
    left: 54%;
    top: 39.3%;
    z-index: 2;    
}

#cp1_6, #cp1_16, #cp1_26 {
    left: 54%;
    top: 47.3%;
    z-index: 2;    
}

#cp1_7, #cp1_17, #cp1_27 {
    left: 54%;
    top: 55.2%;
    z-index: 2;    
}

#cp1_8, #cp1_18, #cp1_28 {
    left: 54%;
    top: 63.4%;
    z-index: 2;    
}
#cp1_9, #cp1_19, #cp1_29 {
    left: 54%;
    top: 71.3%;
    z-index: 2;    
}

#cp1_10, #cp1_20, #cp1_30 {
    left: 54%;
    top: 79.2%;
    z-index: 2;    
}

#cp1_FichaNegraDoble {
    top: 0%;
    left: 0%;
}

#fichasNegras, #fichasNegras2, #fichasNegras3 {
    position: absolute;
    width: 100%;
    height: 100%; 
    top: 0%;
    left: 0%;
}

#cp1_FichaNegra {
    top: 28%;
    left: 15.1%;
}

#cp1_FichaNegras2 {
    top: 26.9%;
    left: 15.1%;
}

#cp1_FichaNegras3 {
    top: 24.9%;
    left: 18.4%;
}

#cp1_FichaColor {
    top: 52.4%;
    left: 15.1%;
}

#cp1_FichaColor2 {
    top: 50.4%;
    left: 15.1%;
}

#cp1_FichaColor31 {
    top: 54.1%;
    left: 18.4%;
}

#cp1_FichaColor32 {
    top: 63.9%;
    left: 18.4%;
}

#cp1_FichaColor33 {
    top: 73.3%;
    left: 18.4%;
}

#cp1_FichaNegra2 {
    top: 61%;
    left: 15.1%;
}

div#texto1 {
    position: absolute;
    top: 33.7%;
    left: 21.6%;
}

div#texto12 {
    position: absolute;
    top: 31.8%;
    left: 21.7%;
}

div#texto2 {
    position: absolute;
    top: 45.5%;
    left: 21.5%;
}

div#texto22 {
    position: absolute;
    top: 43.8%;
    left: 19.5%;   
}

div#contTexto3 {
    position: absolute;
    display: table;
    top: 55.5%;
    left: 15.4%;
    width: 231px;
    height: 69px;
}

div#contTexto32 {
    position: absolute;
    display: table;
    top: 54.4%;
    left: 15.4%;
    width: 231px;
    height: 64px;
}

div#contTexto3_1 {
position: absolute;
    display: table;
    top: 56.7%;
    left: 18.6%;
    width: 185px;
    height: 54px;
}

div#contTexto3_2 {
    position: absolute;
    display: table;
    top: 66.5%;
    left: 18.6%;
    width: 185px;
    height: 54px;    
}

div#contTexto3_3 {
    position: absolute;
    display: table;
    top: 75.8%;
    left: 18.6%;
    width: 185px;
    height: 54px;    
}

div#texto13 {
    position: absolute;
    top: 29.6%;
    left: 21.3%;
}

div#texto23 {
    position: absolute;
    top: 39.1%;
    left: 20.9%;
}

div#texto33 {
    position: absolute;
    top: 49.1%;
    left: 20.1%;
}

div#texto3, div#texto32, div#texto3_1, div#texto3_2, div#texto3_3 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

div#texto42 {
    position: absolute;
    top: 68%;
    left: 20.8%;
}

.textoPiezas {
    font-family: 'Futura Md BT';
    font-size: 25pt;
    font-weight: bold;
}

.textoPiezasPeq, .textoPiezasPeqSel {
    font-family: 'Futura Md BT';
    font-size: 16.5pt;
    font-weight: bold
}

div#fondoSubsAudio {
    position: absolute;
    pointer-events: none;
    background-image: url(../images/degradadoDown.png);
    background-repeat: no-repeat;
    top: 67.2%;
    width: 800px;
    height: 182px;
}

div#subsAudio {
    position: absolute;
    top: 88.2%;
    left: 14%;
    color: black;
    font-family: 'FuturaBT-Book';
    font-size: 12.6pt;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
    width: 530px;
}

#globoSeleccionad, #globoSeleccionad2, #globoSeleccionad3 {
    position: absolute;
    top: 24.5%;
    left: 86%;
    opacity: 0;
    
    -moz-transition     : opacity 0.3s, left 1s;
    -webkit-transition  : opacity 0.3s, left 1s;
    -o-transition       : opacity 0.3s, left 1s;
    transition          : opacity 0.3s, left 1s;
    transition-delay    : 0.2s;    
}

#globoSeleccionad.anim1, #globoSeleccionad2.anim1, #globoSeleccionad3.anim1 {
    opacity: 1;
    left: 76%;
}

div#borrar {
    position: absolute;
    top: 87.7%;
    left: 23%;
}

img#im_borrar {
    -webkit-filter: drop-shadow(1px 5px 2px rgba(0,0,0,0.5));
    filter: drop-shadow(1px 5px 2px rgba(0,0,0,0.5));  
}

#b_borrar {
    position: absolute;
    bottom: 28%;
    left: 16%;   
}

/* --- ICONO FICHA --- */


#fichaLapiz, #fichaLapiz2 {
    position: absolute;
    top: 18px;
    right: 10px;
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
    filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));    
}

#globoFicha, #globoFicha2 {
    position: absolute;
    top: 2%;
    left: 62%;
    pointer-events: none;
}


/* -------------------- */

.links:hover {
    color: #FFDE00;
}