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

/*
#content-section {
    background-image: url(../images/guia04.png);
}
*/


#contentIntro, #contentMenu {
    background-color: #FFDE00;
    height: 100%;
}

#containerVideo1, #containerVideoB1, #containerVideo2, #containerVideoB2, #containerVideo3, #containerVideoB3, #containerVideo4, #containerVideoB4, #containerVideo5, #containerVideo6, #containerVideoB6, #containerVideo7, #containerVideo8, #containerVideoB8 {
    height: 100%;
}

#containerVideoP1, #containerVideoP2, #containerVideoPB2, #containerVideoP3, #containerVideoPB3, #containerVideoP4, #containerVideoPB4, #containerVideoP5, #containerVideoP6, #containerVideoPB6, #containerVideoP7, #containerVideoP8, #containerVideoPB8 {
    height: 100%;
}


/* ------ INTRO ------- */
    
#pastillaSVG {
    position: absolute;
    width: 77.5%;
    height: 32%;
    left: 12%;
    top: 23%;
    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: 31.22%;
    left: 20.3%;
    font-family: 'Futura XBlk BT';
    font-size: 28pt;
    line-height: 1.1em;
    letter-spacing: 0.01em;
}

#tituloPrincipal span {
    font-size: 20pt;    
    letter-spacing: -0.01em;
}

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

#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 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;
    height: 100%;
}

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

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

#pastillaTitulo {
    position: absolute;
    width: 488px;
    height: 84px;
    top: -2px;
}

#tituloMenu {
    position: absolute;
    font-size: 17pt;
    top: 4.5%;
    left: 4.3%;
    letter-spacing: -0.0015em;  
}

#imgMaquina {
    position: absolute;
    opacity: 1;
    top: 24%;
    left: 2.7%;
    
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#imgMaquina.init {
    position: absolute;
    opacity: 0;
    top: 24%;
    left: 80%;
}

#ejemplo, #practica {
    position: absolute;
    background-color: lightgoldenrodyellow;
    color: #2DA3FF;
    width: 218px;
    top: 57.8%;
    height: 101px;
    border-radius: 15px;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
}

#ejemplo p, #practica p {
    position: absolute;    
    top: 3%;
    left: 10%;
    letter-spacing: -0.02em;
}

#ejemplo p span, #practica p span {
    font-size: 16.5pt;
    font-family: 'Futura XBlk BT';
}

#ejemplo {
    left: 21%;
}

#practica {
    left: 52%;
}

.initOptions {
    -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;
}

.scaleInOptions {
    -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;
}

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

#b_atras, #b_atrasVideoInteractivoExample, #b_atrasVideoInteractivoPractica, #b_inicioVideoInteractivoPractica, #b_atrasVideo {
    position: absolute;
    top: 22%;
    left: 25%;
}

#b_continuarInteractivoExample, #b_continuarInteractivoPractica {
    position: absolute;
    top: 22%;
    left: 12%;
}

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

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

#fichaLapiz {
    position: absolute;
    top: 18px;
    right: 10px;
    -webkit-filter: drop-shadow(1px 5px 2px rgba(0,0,0,0.2));
    filter: drop-shadow(1px 5px 2px rgba(0,0,0,0.2));    
}

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

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

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

#saltarAnimacion {
    position: absolute;
    font-size: 7.8pt;
    font-weight: lighter;
    text-decoration: none;
    color: black;
    left: 85.1%;
    bottom: 2.2%;
    letter-spacing: -0.059em;
    font-family: 'Helvetica';
}

#saltarInicio {
    position: absolute;
    font-size: 7.8pt;
    font-weight: lighter;
    text-decoration: none;
    color: black;
    left: 2.6%;
    bottom: 2.2%;
    font-family: 'Helvetica';
}

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

video#video1, video#video1b, video#video2, video#video2b, video#video3, video#video3b, video#video4, video#video4b, video#video5, video#video6, video#video6b, video#video7, video#video8, video#video8b {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

video#videoP1, video#videoP2, video#video2Pb, video#videoP3, video#video3Pb, video#videoP4, video#video4Pb, video#videoP5, video#videoP6, video#video6Pb, video#videoP7, video#videoP8, video#video8Pb {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

#escucharAudio {
    position: absolute;
    bottom: 5.5%;
    left: 37.5%;
}

#b_escuchar {
position: absolute;
    bottom: 25%;
    left: 120%;
    color: #6F6F6F;
    width: 152px;
    font-size: 10pt;
}

#subtitulosAudio {
    position: absolute;
    color: black;
    width: 45%;
    height: 7%;
    bottom: 7%;
    left: 25%;
    font-size: 13pt;
    text-align: center;
    font-weight: 100;
    font-family: 'Futura MD BT Medium';   
}

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

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