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

#contentIntro, #contentVideo, #contentOpciones, #contentcc {
    width: 100%;
    height: 100%;
}

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

/* ------ INTRO ------- */
    
#pastillaSVG {
    position: absolute;
    left: 6%;
    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(4);
    -moz-transform    : scale(4);
    -ms-transform     : scale(4);
    -o-transform      : scale(4);
    transform         : scale(4);    
}

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

#tituloPrincipal {
    font-family: 'Futura XBlk BT';
    line-height: 1em;
    font-size: 28pt;
    position: absolute;
    top: 26%;
    left: 14%;
}

#tituloPrincipal span {
    letter-spacing: -0.05em;
    line-height: 1.2em;
}

#tituloPrincipal .numero {
    font-size: 50pt;
    font-weight: 750;
}

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

#ccMessage {
    position: absolute;
    padding-top: 2%;
    padding-left: 6%;
    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));
}

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

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

#subtitles {
    position: absolute;
    bottom: 8px;
    left: 18px;
}

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

/* ---- CONTENT CC ---- */

#b_cerrar {
    position: absolute;
    top: 30%;
    left: 15%;
}

#credits, #im_cerrar {
    -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));
}

#contentcc {
    background-color: #EAEAEA;
}

#titulocreditos {
    font-family: 'Futura Md BT';
    position: absolute;
    top: 8%;
    left: 12%;
    font-size: 20pt;
    color: #2DA3FF;
}

#textocc, #subtextocc {
    font-family: 'FuturaBT-Book';
    font-size: 12pt;
    position: absolute;
    top: 12%;
    left: 12%;
    width: 75%;
    text-align: justify;
    color: black;
}

#logoGris {
    position: absolute;
    top: 86%;
    left: 38%;
}

#subtextocc {
    top: 30%;
    left: 16%;
    line-height: 1.25em;
}

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

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

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

#saltarAnimacion {
    position: absolute;
    font-size:9px;
    font-weight: lighter;
    text-decoration: none;
    color: black;
    right: 22px;
    bottom: 12px;    
}

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

/* - CONTENT OPTIONS - */

#tituloTextoOpciones {
    position: absolute;
    font-size: 17pt;
    top: 28px;
    line-height: 1.2em;
    left: 37px;
}

#tituloTextoPaso1Niño, #tituloTextoPaso1Niña, #tituloTextoPaso2, #tituloTextoPaso3Niño, #tituloTextoPaso3Niña, #tituloTextoPaso4Niño, #tituloTextoPaso4Niña {
    position: absolute;
    font-size: 16pt;
    top: 28px;
    line-height: 1.1em;
    left: 10%;
}

#Paso {
    position: absolute;
    font-size: 10pt;
    top: 28px;
    line-height: 1.2em;
    left: 25px;
}

#Paso span {
    position: absolute;
    font-family: 'Futura XBlk BT';
    font-size: 25pt;
    top: 148%;
    left: 26%;
}

#menu1 {
    position: absolute;    
    top: 18%;
    left: 20%;
}

#menu2 {
    position: absolute;
    top: 12%;    
    left: 53%;
}

#menu3 {
    position: absolute;
    top: 56%;    
    left: 20%;
}

#menu4 {
    position: absolute;
    top: 52%;    
    left: 58.2%;
}

#menu1.selected {
    -webkit-transform : scale(1.75) translate(33.5%, 39.4%);
    -moz-transform    : scale(1.75) translate(33.5%, 39.4%);
    -ms-transform     : scale(1.75) translate(33.5%, 39.4%);
    -o-transform      : scale(1.75) translate(33.5%, 39.4%);
    transform         : scale(1.75) translate(33.5%, 39.4%);
    
    transition: transform 0.6s ease-in-out;
    -moz-transition: transform 0.6s ease-in-out;
    -webkit-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
}

#menu2.selected {
    -webkit-transform : scale(1.75) translate(-39.2%, 44.3%);
    -moz-transform    : scale(1.75) translate(-39.2%, 44.3%);
    -ms-transform     : scale(1.75) translate(-39.2%, 44.3%);
    -o-transform      : scale(1.75) translate(-39.2%, 44.3%);
    transform         : scale(1.75) translate(-39.2%, 44.3%);
    
    transition: transform 0.6s ease-in-out;
    -moz-transition: transform 0.6s ease-in-out;
    -webkit-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;    
}

#menu3.selected {
    -webkit-transform : scale(1.75) translate(33.2%, -26.8%);
    -moz-transform    : scale(1.75) translate(33.2%, -26.8%);
    -ms-transform     : scale(1.75) translate(33.2%, -26.8%);
    -o-transform      : scale(1.75) translate(33.2%, -26.8%);
    transform         : scale(1.75) translate(33.2%, -26.8%);
    
    transition: transform 0.6s ease-in-out;
    -moz-transition: transform 0.6s ease-in-out;
    -webkit-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
}

#menu4.selected {
    -webkit-transform : scale(1.65) translate(-42.2%, -22.55%);
    -moz-transform    : scale(1.65) translate(-42.2%, -22.55%);
    -ms-transform     : scale(1.65) translate(-42.2%, -22.55%);
    -o-transform      : scale(1.65) translate(-42.2%, -22.55%);
    transform         : scale(1.65) translate(-42.2%, -22.55%);
    
    transition: transform 0.6s ease-in-out;
    -moz-transition: transform 0.6s ease-in-out;
    -webkit-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
}

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

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

#borrarEmociones {
    position: absolute;
    top: 60%;
    left: 12%;
    -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));    
}

#borrarPensamientos {
    position: absolute;
    top: 58%;
    left: 22%;
    -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));    
}


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

.initOptions {
    -webkit-transform : scale(0);
    -moz-transform    : scale(0);
    -ms-transform     : scale(0);
    -o-transform      : scale(0);
    transform         : scale(0);
}

.scaleInOptions {
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);
    
    transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
}

.scaleInOptions:hover {
    -webkit-transform : scale(1.15);
    -moz-transform    : scale(1.15);
    -ms-transform     : scale(1.15);
    -o-transform      : scale(1.15);
    transform         : scale(1.15);
    
    transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
}

#fichaLapiz {
    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 {
    position: absolute;
    padding-top: 2%;
    padding-left: 62%;
    pointer-events: none;
}

#tituloOpcion { 
    position: absolute;
    top: -5px;
}

#tituloPaso { 
    position: absolute;
    top: -2px;
}

#tituloTextoOpcion {
    position: absolute;
    font-size: 17pt;
    top: 24px;
    line-height: 1.2;
    left: 37px;
}

#selectionsList {
    position: absolute;
    width: 162px;
    height: 100%;
    top: 15%;
}

#listaOpciones {
    opacity: 0;
    position: absolute;
    list-style-type: none;
    padding-left: 10px;
    
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition-delay: 0.2s;    
}

ul.listaEmociones li {
    float: left;
    list-style: none;
    margin: 3px;
    width: 118px;
    box-sizing: border-box;
    border-radius: 20px;
    padding-left: 10px;
    font-size: 10.5pt;
    background-color: rgba(255, 238, 127, 0.8);
    font-family: 'FuturaBT-Book';
    font-weight: 600;
    height: 33px;
}

ul.listaPensamientos li {
    float: left;
    list-style: none;
    margin: 3px;
    width: 154px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 20px;
    padding-left: 13px;
    font-size: 10pt;
    background-color: rgba(255, 238, 127, 0.8);
    font-family: 'FuturaBT-Book';
    font-weight: 600;
    height: 43px;
}

ul.listaEmociones li p {
    text-decoration: none;
    color: black;
    display: block;
    opacity: 1;
}

ul.listaPensamientos li p {
    text-decoration: none;
    color: black;
    display: block;
    opacity: 1;
    width: 132px;    
}

ul.listaEmociones li:hover, ul.listaPensamientos li:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

ul.listaEmociones li.selected, ul.listaPensamientos li.selected {
    background-color: rgba(255, 255, 255, 1);
}

#globoEscoged {
    position: absolute;
    opacity: 0;

    -moz-transition     : opacity 0.3s, top 1s;
    -webkit-transition  : opacity 0.3s, top 1s;
    -o-transition       : opacity 0.3s, top 1s;
    transition          : opacity 0.3s, top 1s;
    transition-delay    : 0.2s;
}

#globoEscoged.animEmociones {
    opacity: 1;
    top: 57%;
}

#globoEscoged.animPensamientos {
    opacity: 1;
    top: 54%;
}

.globoEmociones {
    top: 59%;
    left: 12%;
}

.globoPensamientos {
    top: 56%;
    left: 18%;
}

.optionListShadow {
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2);
}

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

.unhovered {
    opacity: 0.5;
}

.shadow {
    -webkit-filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.2));
    filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.2));
}

.links:hover {
    color: #FFDE00;
}

.negrita {
    font-family: 'Futura Md BT';
}

.voidSpace{
    display: block;
    margin: 10px 0;
}