body{
    position: relative;
    margin: 0px auto;
    padding: 0px;
    box-sizing: border-box;
}

#container{
    position: relative;
    margin: 0px auto;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}
header{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}
.row{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.row-header1{
    background: #FFFFFF;
    background: linear-gradient(to left, #FFFFFF, #F1F1F1);
    background: -webkit-linear-gradient(to left, #FFFFFF, #F1F1F1);
    background: -o-linear-gradient(to left, #FFFFFF, #F1F1F1);
    height: 50px;
    align-content: center;
}
.logo-sura{
    display: flex;
    width: 73px;
    height: 100%;
    position: relative;
    margin-left: 20px;

    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/logo-sura.svg);
}
.titulo{
    position: relative;
    display: flex;
    height: 100%;
    justify-content: right;
    margin-right: 20px;
    align-items: center;
}
.titulo h1{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;

    font-family: 'Barlow-Medium';
    font-size: 14px;
    font-weight: normal;
    color: #0033A0;
    text-align: right;
    line-height: normal;
}
.titulo h1 > span{
    font-family: 'Barlow-SemiBold';
    font-size: 
}
.row-header2{
    background: #0033A0;
    height: 23px;
    align-content: center;
}
.logo-arl{
    display: flex;
    width: 25px;
    height: 100%;
    position: relative;
    margin-left: 20px;

    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/logo-arl.svg);
}
#oficio-title{
    position: relative;
    display: flex;
    height: 100%;
    justify-content: right;
    margin-right: 20px;
    align-items: center;
}
#oficio-title h2{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;

    font-family: 'Barlow-Medium';
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    text-align: right;
    line-height: normal;
}

#game{
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    height: calc(100% - 73px);
    height: -moz-calc(100% - 73px);
    box-sizing: border-box;
    overflow: hidden;
}
        
#home-scene{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.fondo{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image: url(../images/fondo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.background{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.cielo{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0px;
    left: 0px;
    background: #5BC2E3;
    background: linear-gradient(to bottom, #00A3D9, #FAFCFF);
    background: -ms-linear-gradient(to bottom, #00A3D9, #FAFCFF);
    background: -moz-linear-gradient(to bottom, #00A3D9, #FAFCFF);
    background: -webkit-linear-gradient(to bottom, #00A3D9, #FAFCFF);
    background: -o-linear-gradient(to bottom, #00A3D9, #FAFCFF);
}
.nubes{
    position: absolute;
    width: 1560px;
    height: 310px;
    top: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url(../images/nubes.png);
}
@keyframes animacion-nubes{
    0%{
        left: 0px;
    }
    100%{
        left: -780px;
    }
}
#personaje-home{
    position: absolute;
    display: block;
    width: 132px;
    height: 370px;
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 25%;
    right: 5%;
}
.personaje-1{
    background-image: url(../images/personaje-v1.png);
}
.personaje-2{
    background-image: url(../images/personaje-v2.png);
}
.personaje-3{
    background-image: url(../images/personaje-v3.png);
}
.personaje-ojos{
    position: absolute;
    width: 35px;
    height: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(../images/ojos.png);
    top: 35px;
    left: 44px;
}
.personaje-ojos::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    animation-name: animacion-ojos;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: animacion-ojos;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@keyframes animacion-ojos{
    0%{
        background-image: none;
    }
    2%{
        background-image: url(../images/parpados1.png);
    }
    4%{
        background-image: url(../images/parpados2.png);
    }
    6%{
        background-image: url(../images/parpados1.png);
    }
    8%{
        background-image: none;
    }
    100%{
        background-image: none;
    }
}

#game-scene{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
#game-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

/************ESTILOS DEL GAME***************/
#piso-container{
    position: absolute;
    margin: 0px;
    padding: 0px;
}
#piso,#paredes{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#puertas,#elementos{
    position: absolute;
    top: 0px;
    left: 0px;
}

#avatar{
    position: absolute;
    width: 30px;
    height: 28px;
    /*box-shadow: 0px 0px 2px 1px rgba(0,0,0,1);*/
}
.avatar-left #avatar-clip{
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
.avatar-right #avatar-clip{
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.avatar-up #avatar-clip{
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}
.avatar-down #avatar-clip{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
#avatar-clip{
    position: absolute;
    /*transition: transform 0.1s, -webkit-transform 0.1s, -o-transform 0.1s;
    -webkit-transition: transform 0.1s, -webkit-transform 0.1s, -o-transform 0.1s;*/
}
#mensaje{
    position: absolute;
    width: 200px;
    height: auto;
    border-radius: 4px 4px 4px 4px;
    background-color: #E3E829;
    
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    -webkit-transform: translateX(-50%) translateY(-100%);
    -o-transform: translateX(-50%) translateY(-100%);

    padding: 7px;
    box-sizing: border-box;
}
#mensaje::after{
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    left: 50%;
    left: calc(50% - 7px);
    left: -moz-calc(50% - 7px);
    top: 100%;
    border-left: 7px rgba(0,0,0,0) solid;
    border-right: 7px rgba(0,0,0,0) solid;
    border-top: #E3E829 solid 7px;
}
#mensaje p{
    display: block;
    position: relative;
    width: 100%;
    font-family: 'Barlow-Regular';
    font-size: 14px;
    color: #0033A0;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    margin: 0px;
    padding: 0px;
}

.mensaje-left{
    left: 100% !important;
}

#contenedor-item{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-direction: column;
}
.contenedor-item-on{
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s;
    -webkit-transition: visibility 0s, opacity 0.5s;
}
.contenedor-item-off{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s;
    -webkit-transition: visibility 0.5s, opacity 0.5s;
}
.contenedor-item-img{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../images/fondo-premios.jpg);
    filter: brightness(30%);
    -webkit-filter: brightness(30%);
    -o-filter: brightness(30%);
}
#contenedor-item-title{
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Barlow-Bold';
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    margin: 0px;
    padding: 0px 20px;
    box-sizing: border-box;
    margin-top: 20px;

}
#contenedor-item-content{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0px 0px;
    padding: 0px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenedor-item-content-llave #llave-animada{
    display: block;
}
.contenedor-item-content-llave #premio-animado{
    display: none;
}
.contenedor-item-content-premio #llave-animada{
    display: none;
}
.contenedor-item-content-premio #premio-animado{
    display: block;
}
    
#contenedor-item-msg{
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Barlow-Medium';
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    margin: 0px;
    padding: 0px 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
#contenedor-item-msg span{
    font-family: 'Barlow-Bold';
}

#contenedor-peliculas,#contenedor-preguntas{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    
    background-color: #000000;
}
#contenedor-peliculas-cargador,#contenedor-preguntas-cargador{
    position: absolute;
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/cargador_v1.png);
    top: 50%;
    top: calc(50% - 20px);
    top: -moz-calc(50% - 20px);
    left: 50%;
    left: calc(50% - 20px);
    left: -moz-calc(50% - 20px);
    animation-name: animacion-cargador-pelicula;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: animacion-cargador-pelicula;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@keyframes animacion-cargador-pelicula{
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

#contenedor-peliculas video{
    position: relative;
    top: -2.5px;
    
    margin: 0px;
    padding: 0px;
}
.pelicula-0,.pelicula-1{
    transform: translateX(-569px);
    transform: -webkit-translateX(-569px);
    transform: -o-translateX(-569px);
    left: 72%;
}
.pelicula-2{
    transform: translateX(-580px);
    transform: -webkit-translateX(-580px);
    transform: -o-translateX(-580px);
    left: 73.4%;
}
.pelicula-3{
    transform: translateX(-416px);
    transform: -webkit-translateX(-416px);
    transform: -o-translateX(-416px);
    left: 52.6%;
}
.pelicula-4{
    transform: translateX(-300px);
    transform: -webkit-translateX(-300px);
    transform: -o-translateX(-300px);
    left: 37.9%;
}
.pelicula-5{
    transform: translateX(-395px);
    transform: -webkit-translateX(-395px);
    transform: -o-translateX(-395px);
    left: 50%;
}
#pelicula_txt{
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0px;
    left: 0px;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
#pelicula_txt p{
    margin: 0px;
    padding: 0px;
    font-family: 'Barlow-Bold';
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    display: block;
    width: 100%;
}
#pelicula_fin{
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 20px;
    
    font-family: 'Barlow-Bold';
    font-size: 18px;
    color: #FFFFFF;
    text-align: right;
    font-weight: normal;
    line-height: normal;
    opacity: 0;

    transition: opacity 1s;
    transition-delay: 17s;
    -webkit-transition: opacity 1s;
    transition-delay: 17s;
}

#contenedor-peliculas-alfa,
#contenedor-preguntas-alfa{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #000000;
}
.contenedor-peliculas-on #contenedor-peliculas-alfa,
.contenedor-preguntas-on #contenedor-preguntas-alfa{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0s;
    -webkit-transition: opacity 0.5s, visibility 0s;
}
.contenedor-peliculas-onn #contenedor-peliculas-alfa,
.contenedor-preguntas-onn #contenedor-preguntas-alfa{
    opacity: 1;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
.contenedor-peliculas-on #contenedor-peliculas-cargador,
.contenedor-preguntas-on #contenedor-preguntas-cargador{
    visibility: visible;
}
.contenedor-peliculas-off #contenedor-peliculas-alfa,
.contenedor-preguntas-off #contenedor-preguntas-alfa{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
}
.contenedor-peliculas-off #contenedor-peliculas-cargador,
.contenedor-peliculas-onn #contenedor-peliculas-cargador,
.contenedor-preguntas-off #contenedor-preguntas-cargador,
.contenedor-preguntas-onn #contenedor-preguntas-cargador
{
    animation: none;
    animation: unset;
    -webkit-animation: none;
    -webkit-animation: unset;
    visibility: hidden;
}

/********estilos de iconos, llaves, etc...********/
.icono-oficina{
    position: absolute;
    width: 25px;
    height: 25px;
    padding-top: 1px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(../images/oficina-icon.png);
    display: flex;
    justify-content: center;
    
    font-family: 'Barlow-SemiBold';
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    font-size: 17px;
    text-shadow: 2px 1px 1px #000000;
    -webkit-text-shadow: 2px 1px 1px #000000;
    -o-text-shadow: 2px 1px 1px #000000;

    transform: translateX(-12.5px) translateY(-12.5px);
    -webkit-transform: translateX(-12.5px) translateY(-12.5px);
    -o-transform: translateX(-12.5px) translateY(-12.5px);
}
.icono-puerta{
    position: absolute;
    background-color: rgba(255,255,0,0);
    box-sizing: border-box;
    /*border: #000 solid 1px;*/
}
.icono-empleado{
    position: absolute;
    width: 30px;
    height: 28px;
}
.icono-llave{
    position: absolute;
    width: 14px;
    height: 25px;
}
.icono-premio{
    position: absolute;
    width: 23px;
    height: 25px;
}

.icono-empleado-light{background-color: #00CCFF;animation-delay: 0s;-webkit-animation-delay: 0s;}
.icono-llave-light{background-color: #FFFFFF;animation-delay: 1s;-webkit-animation-delay: 1s;}
/*2cbe10->old color*/
.icono-premio-light{background-color: #FFFF00;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;}

.icono-empleado-light,
.icono-llave-light,
.icono-premio-light
{
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    
    top: 50%;
    top: calc(50% - 15px);
    top: -moz-calc(50% - 15px);
    left: 50%;
    left: calc(50% - 15px);
    left: -moz-calc(50% - 15px);

    animation-name: animacion-light;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: animacion-light;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@keyframes animacion-light{
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -o-transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        opacity: 0.75;
    }
    100% {
        transform: scale(2.5);
        -webkit-transform: scale(2.5);
        -o-transform: scale(2.5);
        opacity: 0;
    }
}

.icono-empleado-img,
.icono-llave-img,
.icono-premio-img,
.icono-auto-img,
.icono-llave2-img
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.icono-empleado-img{background-image: url(../images/empleado-icon.png);}
.icono-llave-img{background-image: url(../images/llave-icon.png);}
.icono-llave2-img{background-image: url(../images/llave2-icon.png);}
.icono-premio-img{background-image: url(../images/premio-icon.png);}
.icono-auto-img{background-image: url(../images/auto-icon.png);}

/**********ELEMENTOS NO DISPONIBLES************/
/*clase para no disponible*/
.icono-empleado-visitado .icono-empleado-light,
.icono-llave-recogida .icono-llave-light,
.icono-premio-recogido .icono-premio-light
{
    display: none !important;
    animation: none;
    animation: unset;
    -webkit-animation: none;
    -webkit-animation: unset;
}
.icono-llave-recogida,
.icono-premio-recogido
{
    display: none !important;
    visibility: hidden;
}

/*****OTROS ELEMENTOS****/
.icono-escaleras{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgba(255,0,0,0);
    top: 300px;
    left: 300px;
    opacity: 0;
}
.icono-pared{
    position: absolute;
    background-color: #000000;
    opacity: 0;
    visibility: hidden;
}
.icono-escaleras-piso-1{
    width: 40px;
    height: 70px;
    left: 250px;
    top: 325px;
}
.icono-escaleras-piso-2{
    width: 30px;
    height: 70px;
    left: 40px;
    top: 214px;
}
.icono-auto{
    position: absolute;
    width: 104px;
    height: 49px;
    top: 536px;
    left: 10px;
}
.icono-auto-light{
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    background-color: #FFFFFF;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);

    animation-name: animacion-light-2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: animacion-light-2;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@keyframes animacion-light-2{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }
    50%{
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        opacity: 1;
    }
    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }
}
.icono-auto-area{
    position: absolute;
    background-color: rgba(255,255,255,0);
    opacity: 0;
    width: 97px;
    height: 46px;
    left: 15px;
    top: 540px;
}

#estadisticas{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 400px;
    height: 70px;
    background-color: rgba(255,255,255,0.75);
    right: 90px;
    border-radius: 0px 0px 5px 5px;

    transition: top 0.5s;
    -webkit-transition: top 0.5s;
}
#estadisticas-icon{
    position: absolute;
    left: 100%;
    left: calc(100% + 5px);
    left: -moz-calc(100% + 5px);
    width: 25px;
    box-sizing: border-box;
    height: 25px;
    border-radius: 0px 0px 5px 5px;
    background-color: #b91c24;
    border: none;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
    border-top: none;
    cursor: pointer;
    padding: 0px;
    margin: 0px;

    background-color: #78BE20;

    transition: top 0.5s, height 0.5s;
    -webkit-transition: top 0.5s, height 0.5s;
}

#estadisticas-icon::after{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/premio-icon-2.png);
    bottom: 3px;
    left: 50%;
    left: calc(50% - 9px);
    left: -moz-calc(50% - 9px);

    transition: transform 0.5s, -webkit-transform 0.5s, -o-transform 0.5s;
    -webkit-transition: transform 0.5s, -webkit-transform 0.5s, -o-transform 0.5s;
}

.estadisticas-off #estadisticas-icon{
    top: 100%;
}
/*.estadisticas-off #estadisticas-icon::after{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}*/
.estadisticas-on #estadisticas-icon{
    top: 0%;
}
/*.estadisticas-on #estadisticas-icon::after{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}*/

#trophy1,#trophy2,#trophy3,#trophy4,#trophy5,#trophy6{
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
}
#trophy1 > div,
#trophy2 > div,
#trophy3 > div,
#trophy4 > div,
#trophy5 > div{
    background-image: url(../images/trophy.png);
}
#trophy6 > div{
    background-image: url(../images/llave-auto.png);
}

#estadisticas > div > div{
    position: relative;
    width: 47px;
    height: 47px;
    margin: 0px auto;
    padding: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.trophy-off > div{
    filter: brightness(0%);
    -webkit-filter: brightness(0%);
    -o-filter: brightness(0%);
}

@keyframes animacion-trophy-won{
    0%{
        filter: brightness(0%);
        -webkit-filter: brightness(0%);
        -o-filter: brightness(0%);
        transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }
    30%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
    }
    50%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -o-transform: scale(0.7);
    }
    65%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
    }
    75%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    80%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }
    100%{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -o-filter: brightness(100%);
        transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }
}

#music-btn{
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 0px 0px 4px 4px;
    border: none;
    background-color: #00AEC7;
    box-sizing: content-box;

    padding: 0px;
    margin: 0px;

    background-repeat: no-repeat;
    background-position: center 100%;
    background-position: center calc(100% - 7px);
    background-position: center -moz-calc(100% - 7px);
    background-size: 22px 22px;
    cursor: pointer;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);

    transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s, padding 0.3s;
    -webkit-transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s, padding 0.3s;
}
#music-btn{
    top: 0px;
    right: 10px;
}

.music-on{
    background-image: url(../images/music-on-icon.svg);
}
.music-off{
    background-image: url(../images/music-off-icon.svg);
}

#keys-pad-cont{
    position: fixed;
    height: 120px;
    background-color: #000000;
    bottom: 0px;
    left: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.keys-pad-off{
    display: none;
}
.keys-pad-hide{
    visibility: hidden;
    opacity: 0;
}
.keys-pad-show{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0s;
    -webkit-transition: opacity 0.3s, visibility 0s;
}
.keys-pad-on{
    display: block;
}

#keys-pad{
    position: absolute;
    width: 155px;
    height: 100px;
    top: 10px;
    left: 50%;
    left: calc(50% - 77.5px);
    left: -moz-calc(50% - 77.5px);
}
#key-pad-left,
#key-pad-right,
#key-pad-up,
#key-pad-down{
    position: absolute;
    content: "";
    width: 45px;
    height: 45px;
    border-radius: 2px;
    background: #656565;
    background: linear-gradient(to right, #656565, #4C4C4C);
    background: -moz-linear-gradient(to right, #656565, #4C4C4C);
    background: -webkit-linear-gradient(to right, #656565, #4C4C4C);
    background: -o-linear-gradient(to right, #656565, #4C4C4C);
    /*box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.9);*/
}
.key-pad-pressed{
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.key-pad-arrow{
    position: absolute;
    content: "";

    width: 20px;
    height: 20px;
    top: 50%;
    top: calc(50% - 10px);
    top: -moz-calc(50% - 10px);
    left: 50%;
    left: calc(50% - 10px);
    left: -moz-calc(50% - 10px);
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../images/cursor-arrow.svg);
}
#key-pad-up .key-pad-arrow{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
#key-pad-left .key-pad-arrow{
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
#key-pad-down .key-pad-arrow{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
#key-pad-right .key-pad-arrow{
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

#key-pad-left{
    left: 0px;
    bottom: 0px;
}
#key-pad-right{
    right: 0px;
    bottom: 0px;
}
#key-pad-up{
    left: 50%;
    left: calc(50% - 22.5px);
    left: -moz-calc(50% - 22.5px);
    top: 0px;
}
#key-pad-down{
    left: 50%;
    left: calc(50% - 22.5px);
    left: -moz-calc(50% - 22.5px);
    bottom: 0px;
}


/*******************************************/

/*************MODAL*************/
#modal{
    z-index: 500;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    top: 0px;
    left: 0px;
    
    align-items: center;
    justify-content: center;
}
.modal-off{
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0,0,0,0);

    transition: opacity 0.5s, background-color 0.5s, visibility 0.5s;
    -webkit-transition: opacity 0.5s, background-color 0.5s, visibility 0.5s;
}
.modal-on{
    visibility: visible;
    opacity: 1;
    background-color: rgba(0,0,0,0.5);
    
    transition: opacity 0.5s, background-color 0.5s, visibility 0s;
    -webkit-transition: opacity 0.5s, background-color 0.5s, visibility 0s;
}

#modal-box{
    width: 360px;
    position: relative;
    display: block;
    margin: 0px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.2);
}
.modal-box-left{
    left: -13%;
}
.modal-box-final{
    left: 13%;
}

#modal-title{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: none;
    margin-bottom: 10px;

    font-family: 'FSJoey-Bold';
    font-size: 19px;
    color: #0033A0;
    text-align: center;
    font-weight: normal;
    line-height: normal;
}
#modal-close-btn{
    display: block;
    margin: 0px;
    padding: 0px;
    border-radius: 50%;
    position: absolute;

    background-color: #00AEC7;
    border: none;
    right: 10px;
    top: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer;

    transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s;
    -webkit-transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s;
}
#modal-close-btn::after,
#modal-close-btn::before
{
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #FFFFFF;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
    top: 50%;
    top: calc(50% - 1px);
    top: -moz-calc(50% - 1px);
    left: 50%;
    left: calc(50% - 7.5px);
    left: -moz-calc(50% - 7.5px);
}
#modal-close-btn::after{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
#modal-close-btn::before{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
#modal-close-btn:hover{
    background-color: #008B96;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
}

#modal-content{
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
    margin-bottom: 20px;
    max-height: 450px;
    overflow: auto;
}

#modal-content > p,.modal-content-p{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;

    font-family: 'Barlow-Medium';
    font-size: 14px;
    color: #53565A;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 10px;
}
#modal-content > p span,.modal-content-p span{
    font-family: 'Barlow-Bold';
    color: #555555;
}   

#modal-content > h6,.modal-content-h6{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;

    font-family: 'FSJoey-Bold';
    font-size: 14px;
    color: #0033A0;
    text-align: center;
    font-weight: normal;
    line-height: normal;
}
#modal-button{
    position: absolute;
    display: block;
    width: 160px;
    height: 41px;
    border-radius: 4px;
    background-color: #00AEC7;
    border: none;

    font-family: 'Barlow-Bold';
    font-size: 18px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    bottom: -20px;
    left: 50%;
    left: calc(50% - 80px);
    left: -moz-calc(50% - 80px);
    box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.2);
    cursor: pointer;

    transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s;
    -webkit-transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s, -o-transform 0.3s;
}

/****************FOCUS***************/
#focus-msg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.75);
}
#focus-msg p{
    position: absolute;
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'Barlow-Medium';
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    top: 50%;
    left: 0px;
}
.focus-off{
    display: none;
}
.focus-on{
    display: block;
}

/**************CARGADOR***************/
#cargador{
    z-index: 700;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.cargador-on{
    display: flex;
}
.cargador-off{
    display: none;
}
.cargador-img{
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(../images/cargador_v2g.gif);
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
}
#cargador-txt{
    display: block;
    font-family: 'Barlow-Medium';
    font-size: 14px;
    color: #000000;
    text-align: center;
    font-weight: normal;
    line-height: normal;
    margin: 0px;
    padding: 0px;
}