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

/* ------ INTRO ------- */

#pastillaSVG {
    position: absolute;
    left: 6%;
    top: 20%;
    transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -o-transition: all 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-family: 'Helvetica';
    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;
}

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

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

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

/* ----- 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: 26%;
    left: 27%;
}

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

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

#bola_miedo, #bola_amor, #bola_tristeza, #bola_alegria, #bola_rabia {
    position: absolute;
    opacity: 0;
    top: 40%;
    left: 43%;
    
    transition: top 2s, left 2s, opacity 2s, transform 0.3s ease-in-out;
    -moz-transition: top 2s, left 2s, opacity 2s, -moz-transform 0.3s ease-in-out;        
    -webkit-transition: top 2s, left 2s, opacity 2s, -webkit-transform 0.3s ease-in-out;
    -o-transition: top 2s, left 2s, opacity 2s, -o-transform 0.3s ease-in-out; 
}

#bola_miedo.finish {
    opacity: 1;
    top: 50%;
    left: 11%;
    -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_amor.finish {
    opacity: 1;
    top: 37%;
    left: 26%;
    -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_tristeza.finish {
    opacity: 1;
    top: 50%;
    left: 42%;
    -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_alegria.finish {
    opacity: 1;
    top: 37%;
    left: 57%;
    -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_rabia.finish {
    opacity: 1;
    top: 50%;
    left: 73%;
    -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));    
}

.clickable {
    cursor: pointer; 
}

#bola_sentias, #bola_notabas, #bola_big {
    position: absolute;
    
    transition: top 0.3s, left 0.3s, opacity 1s, height 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out;
    -moz-transition: top 0.3s, left 0.3s, opacity 1s, height 0.3s ease-in-out, width 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;        
    -webkit-transition: top 0.3s, left 0.3s, opacity 1s, height 0.3s ease-in-out, width 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -o-transition: top 0.3s, left 0.3s, opacity 1s, height 0.3s ease-in-out, width 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
}

#bola_sentias {
    top: 46%;
    left: 11%;
}

#bola_notabas {
    top: 30%;
    left: 38%;
}

#bola_big {
    top: 46%;
    left: 64%;
}

#bola_sentias.clicked {
    -webkit-transform : scale(1.47) translate(1.56em, -0.6em);
    -moz-transform    : scale(1.47) translate(1.56em, -0.6em);
    -ms-transform     : scale(1.47) translate(1.56em, -0.6em);
    -o-transform      : scale(1.47) translate(1.56em, -0.6em);
    transform         : scale(1.47) translate(1.56em, -0.6em);
}

#bola_notabas.clicked {
    -webkit-transform : scale(1.47) translate(-0.25em, 2.8em);
    -moz-transform    : scale(1.47) translate(-0.25em, 2.8em);
    -ms-transform     : scale(1.47) translate(-0.25em, 2.8em);
    -o-transform      : scale(1.47) translate(-0.25em, 2.8em);
    transform         : scale(1.47) translate(-0.25em, 2.8em);
}

#bola_big.clicked {
    -webkit-transform : scale(1.47) translate(-2.32em, 0.2em);
    -moz-transform    : scale(1.47) translate(-2.32em, 0.2em);
    -ms-transform     : scale(1.47) translate(-2.32em, 0.2em);
    -o-transform      : scale(1.47) translate(-2.32em, 0.2em);
    transform         : scale(1.47) translate(-2.32em, 0.2em);    
}

.fundido{
    opacity: 0;
}

.sombreado {
    -webkit-filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.5));     
}

#bola_sentias.notclicked1 {
    width: 154.44px;
    height: 154.44px;
    left: 10.3%;
    top: 47.7%;
}

#bola_sentias.notclicked2 {
    width: 154.44px;
    height: 154.44px;
    left: 8.5%;
    top: 50.7%;
}

#bola_notabas.notclicked1 {
    width: 154.44px;
    height: 154.44px;
    left: 49.2%;
    top: 34%;   
}

#bola_notabas.notclicked2 {
    width: 154.44px;
    height: 154.44px;
    left: 29.2%;
    top: 34.2%;  
}

#bola_big.notclicked1 {
    width: 154.44px;
    height: 154.44px;
    left: 69.5%;
    top: 50.5%;    
}

#bola_big.notclicked2 {
    width: 154.44px;
    height: 154.44px;
    left: 69.8%;
    top: 47.5%;   
}

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

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

#tituloVideo { 
    position: absolute;
}

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

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

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

#selMessage {
    position: absolute;
    opacity: 0;
    top: 25%;
    left: -5%;    
    -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;
}

#selMessage.init {
    opacity: 1;
    left: 3%;
}

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

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

.links:hover {
    color: #FFDE00;
}

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

.title-top-right{
    position: absolute;
}