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

/* ------ 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: 1.2em;
    font-size: 28pt;
    position: absolute;
    top: 28%;
    left: 10%; 
}

#tituloPrincipal span {
    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: 14%;
    left: 12%;
    font-size: 20pt;
    color: #2DA3FF;
}

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

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

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

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

/* ----- CONTENT1 ----- */

#video {
    position: absolute;
    width: 800px;
    height: 563px;
    background-size: cover;
    overflow: hidden;
    right: 0%;
    top: -1%;
}

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

#tituloEmociones {
    position: absolute;
    top: 25%;
    left: 30%;
}

#b_atras, #b_atrasVideo, #b_atrasSelections {
    position: absolute;
    top: 22%;
    left: 20%;
}

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

.initOptionBalls {
    -webkit-transform : scale(0);
    -moz-transform    : scale(0);
    -ms-transform     : scale(0);
    -o-transform      : scale(0);
    transform         : scale(0);
    
    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;
}

.scaleInOptionBalls {
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);
    
    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;
}

.scaleInOptionBalls: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;
}

#bola_rechazo {
    position: absolute;    
    top: 43.7%;
    left: 14.2%;
    -webkit-filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));
    filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));     
}

#bola_ansiedad {
    position: absolute;
    top: 43.7%;    
    left: 32.9%;
    -webkit-filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));
    filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));     
}

#bola_aburrimiento {
    position: absolute;
    top: 43.7%;    
    left: 51.5%;
    -webkit-filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));
    filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5)); 
}

#bola_otras {
    position: absolute;
    top: 43.7%;    
    left: 70.5%;
    -webkit-filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));
    filter: drop-shadow(-5px 21px 20px rgba(0,0,0,0.5));     
}

#b_continuar, #b_continuar2 {
    position: absolute;
    top: 22%;
    left: 12%;
}

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

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

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

#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;
}

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

#tituloVideo, #tituloVideo2 { 
    position: absolute;
    top: -3px;
}

#tituloTextoVideo, #tituloTextoVideo2 {
    position: absolute;
    font-size: 16.7pt;
    top: 24px;
    line-height: 1.2;
    left: 37px;
}

#bola1, #bola2, #bola3, #bola4, #bola5 {
    position: absolute;
    width: 84px;
    height: 84px;
    background-size: contain;
    background-repeat: no-repeat;
}

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

.initOptionDraggables {
    opacity: 1;
}

.scaleInDraggables {
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);

    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;
}

.scaleInDraggables:hover {
    -webkit-transform : scale(1.08);
    -moz-transform    : scale(1.08);
    -ms-transform     : scale(1.08);
    -o-transform      : scale(1.08);
    transform         : scale(1.08);
    
    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;
}

#arrMessage {
    position: absolute;
    opacity: 0;
    top: 82%;
    right: -1%;   
    -moz-transition     : opacity 0.3s, right 1s;
    -webkit-transition  : opacity 0.3s, right 1s;
    -o-transition       : opacity 0.3s, right 1s;
    transition          : opacity 0.3s, right 1s;
}

#arrMessage.anim {
    opacity: 1;
    right: 1%;
}

#tituloSVGEmocion {
    position: absolute;
}

#tituloSVGEmocion.Rechazo {
    right: 9.3%;
    top: 14.8%;
}

#tituloSVGEmocion.Ansiedad {
    right: 9.3%;
    top: 15.8%;
}

#tituloSVGEmocion.Aburrimiento {
    right: 9.3%;
    top: 16%;
}

#tituloSVGEmocion.Otras {
    right: 9.3%;
    top: 16.4%;
}

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

/* ---- DRAG&DROP ----- */

.option {
    position: absolute;
    width: 84px;
    height: 84px;
}

.selectionb {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50px;
    border: 2px dotted #000000;
    border: 2px dotted #0000001c;
}

.selection {
    position: absolute;
    width: 84px;
    height: 84px;
}

#option1 {
    top: 80.5%;
    left: 21.4%;
}

#option2 {
    top: 80.5%;
    left: 32.7%;
}

#option3 {
    top: 80.5%;
    left: 44.1%;
}

#option4 {
    top: 80.5%;
    left: 55.3%;   
}

#option5 {
    top: 80.5%;
    left: 66.9%;   
}

#option1.Aburrimiento {
    top: 80.5%;
    left: 27.4%;
}

#option2.Aburrimiento {
    top: 80.5%;
    left: 38.7%;
}

#option3.Aburrimiento {
    top: 80.5%;
    left: 50.1%;
}

#option4.Aburrimiento {
    top: 80.5%;
    left: 61.3%;   
}

#option5.Aburrimiento {
    top: 80.5%;
    left: 72.9%;   
}

#select1.Rechazo {
    top: 59%;
    left: 12%;
}

#select2.Rechazo {
    top: 25%;
    left: 30%;
}

#select3.Rechazo {
    top: 59.3%;
    left: 43.5%;
}

#select4.Rechazo {
    top: 29.3%;
    left: 67%;
}

#select5.Rechazo {
    top: 35%;
    left: 85.5%;
}

#select1.Ansiedad {
    top: 41%;
    left: 5%;
}

#select2.Ansiedad {
    top: 54%;
    left: 25%;
}

#select3.Ansiedad {
    top: 34%;
    left: 45%;
}

#select4.Ansiedad {
    top: 54%;
    left: 58%;
}

#select5.Ansiedad {
    top: 62%;
    left: 84%;
}

#select1.Aburrimiento {
    top: 59%;
    left: 4.5%;
}

#select2.Aburrimiento {
    top: 27%;
    left: 21%;
}

#select3.Aburrimiento {
    top: 41.3%;
    left: 52%;
}

#select4.Aburrimiento {
    top: 59%;
    left: 82%;
}

#select1.Otras{
    top: 60.8%;
    left: 13%;
}

#select2.Otras {
    top: 26%;
    left: 14%;
}

#select3.Otras {
    top: 34.5%;
    left: 36.5%;
}

#select4.Otras {
    top: 26%;
    left: 60%;
}

#select5.Otras {
    top: 61%;
    left: 81%;
}

#select1b.Rechazo {
    top: 59.4%;
    left: 12.15%;
}

#select2b.Rechazo {
    top: 25.3%;
    left: 30.15%;
}

#select3b.Rechazo {
    top: 59.6%;
    left: 43.65%;
}

#select4b.Rechazo {
    top: 29.7%;
    left: 67.15%;
}

#select5b.Rechazo {
    top: 35.4%;
    left: 85.65%;
}

#select1b.Ansiedad {
    top: 41.3%;
    left: 5.15%;
}

#select2b.Ansiedad {
    top: 54.4%;
    left: 25.15%;
}

#select3b.Ansiedad {
    top: 34.4%;
    left: 45.15%;
}

#select4b.Ansiedad {
    top: 54.4%;
    left: 58.15%;
}

#select5b.Ansiedad {
    top: 62.4%;
    left: 84.15%;
}

#select1b.Aburrimiento {
    top: 59.4%;
    left: 4.65%;
}

#select2b.Aburrimiento {
    top: 27.4%;
    left: 21.15%;
}

#select3b.Aburrimiento {
    top: 41.7%;
    left: 52.15%;
}

#select4b.Aburrimiento {
    top: 59.4%;
    left: 82.15%;
}

#select1b.Otras{
    top: 61.2%;
    left: 13.15%;
}

#select2b.Otras {
    top: 26.4%;
    left: 14.15%;
}

#select3b.Otras {
    top: 34.9%;
    left: 36.65%;
}

#select4b.Otras {
    top: 26.4%;
    left: 60.15%;
}

#select5b.Otras {
    top: 61.3%;
    left: 81.15%;
}

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

.links:hover {
    color: #FFDE00;
}

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

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