@font-face {
    font-family: 'Helvetica';
    src: url('../assets/tipografia/Helvetica.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'HelveticaBold';
    src: url('../assets/tipografia/Helvetica-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'HelveticaLight';
    src: url('../assets/tipografia/Helvetica-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
html, *{
    font-family: 'HelveticaLight';
}
strong, b{
    font-family: 'HelveticaBold';
}

.puntuacionContain {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
    display: flex;
    z-index: 2;
    justify-content: center;
    align-items: center;
    display: none;
}
.puntuacionFinal {
    height: 70%;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    max-height: 500px;
}
.puntuacionContain .puntuacionFinal .bordeExterior{
    background-image: url(../assets/img/finalScore/fondocierre3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    display: flex;
    flex-basis: 0;
    flex-grow: 3;
    position: relative;
    justify-content: center;
    align-items: center;
}
.puntuacionContain .puntuacionFinal .bordeExterior .bordeInterior{
    background-image: url(../assets/img/finalScore/fondocierre2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
}
.dataScore{
    display: flex;
    background-image: url(../assets/img/finalScore/fondocierre.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    flex-direction: column;
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    position: absolute;
}
.share {
    flex-basis: 0;
    flex-grow: 1;
}

/*  */
.puntuacionContain .puntuacionFinal .title{
    flex-grow: 2;
    flex-basis: 0;
    font-size: 26px;
    align-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(139,162,64,1) 0%, rgba(25,156,64,1) 100%);
    border-radius: 15px 15px 0 0;
    color: #fff;
    text-align: center;
}
.puntuacionContain .puntuacionFinal .scores{
    flex-grow: 9;
    flex-basis: 0;
    color: #b4df53;
    display: flex;
}
.puntuacionContain .puntuacionFinal .scores .table{
    flex-grow: 5;
    flex-basis: 0;
}

.puntuacionContain .puntuacionFinal .scores .table table{
    border-collapse: separate;
    border-spacing: 0px 0px;
    width: 100%;
    height: 100%;
}
.puntuacionContain .puntuacionFinal .scores tr{
    border: none;
}
.puntuacionContain .puntuacionFinal .scores tr.actual{
    background: linear-gradient(90deg, #a8ca49 0%, rgba(25,156,64,1) 100%);
    height: 40px;
}
.puntuacionContain .puntuacionFinal .scores th{
    color: #b4df53;
    font-family: 'HelveticaBold';
    letter-spacing: 0.5px;
    text-align: center;
    font-size: 20px;
}
.puntuacionContain .puntuacionFinal .scores td{
    color: #fff;
    text-align: center;
    font-size: 20px;
}
.puntuacionContain .puntuacionFinal .scores td.escenario{
    text-align: left;
    padding-left: 50px;
}
.puntuacionContain .puntuacionFinal .scores .score{
    flex-grow: 3;
    flex-basis: 0;
    flex-direction: column;
    align-items: center;
    display: flex;
    }
.puntuacionContain .puntuacionFinal .scores .score .txt{
    flex-grow: 1;
    display: flex;
    align-items: center;
    color: #b4df53;
    font-family: 'HelveticaBold';
    letter-spacing: 0.5px;
    font-size: 20px;
}
.puntuacionContain .puntuacionFinal .scores .score .totalScore{
    flex-grow: 1;
    color: #fff;
    font-size: 70px;
    border-radius: 15px;
    width: 60%;
    display: flex;
    background-color: rgb(255 255 255 / 20%);
    justify-content: center;
    align-items: center;
    margin: 0 30px 50px 30px;
    font-family: 'HelveticaBold';
    border: 2px solid #fff;
    background-color: #a9ca49;
}
.puntuacionContain .puntuacionFinal .share {
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
}
.puntuacionContain .puntuacionFinal .share .shareButtons {
    display: flex;
    flex-basis: 0;
    flex-grow: 2;
    flex-direction: column;
    margin-right: 130px;
}
.puntuacionContain .puntuacionFinal .share .shareButtons .buttons{
    display: flex;
    flex-basis: 0;
    flex-grow: 3;
}
.puntuacionContain .puntuacionFinal .share .shareButtons .buttons a{
    display: flex;
    flex-basis: 0;
    flex-grow: 2;
}
.puntuacionContain .puntuacionFinal .buttons .btn{
    color: #fff;
    flex-grow: 1;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.puntuacionContain .puntuacionFinal .share .shareButtons .buttons a .btn.facebook{
    background-image: url("../assets/img/finalScore/btn_fb.png");
}
.puntuacionContain .puntuacionFinal .share .shareButtons .buttons a .btn.twitter{
    background-image: url("../assets/img/finalScore/btn_tw.png");
}
.puntuacionContain .puntuacionFinal .share .shareButtons .buttons a .btn.whats{
    background-image: url("../assets/img/finalScore/btn_wa.png");
}
.puntuacionContain .puntuacionFinal .share .shareButtons .textShare{
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    background-image: url(../assets/img/finalScore/txt_compartir.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 8px;
}

.puntuacionContain .puntuacionFinal .share .menuButtons {
    display: flex;
    flex-basis: 0;
    flex-grow: 3;
}
.puntuacionContain .puntuacionFinal .share .menuButtons .restart{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    background-image: url("../assets/img/finalScore/btn_replay.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 15px;
}
.puntuacionContain .puntuacionFinal .share .menuButtons .home{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    background-image: url("../assets/img/finalScore/btn_inicio.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    margin-bottom: 15px;
}
.puntuacionContain .puntuacionFinal .share .menuButtons a{flex-grow: 1;}
.pointsContain{
    position: absolute;
    top: 20px;
    left: 20px;
    height: 35px;
    display: flex;
    z-index: 3;
    align-items: center;
}
.pointsContain .icon{
    background-repeat: no-repeat;
    cursor: pointer;
    width: 5%;
    height: 10%;
    min-width: 60px;
    min-height: 60px;
    position: absolute;
    z-index: 1;
}
.pointsContain .audio{
    background-image: url("../assets/img/360/Audio.png");
    background-size: contain;
}
.pointsContain .audio.animate__heartBeat{
    background-image: url("../assets/img/360/Audio_press.png");
    /* opacity: .5; */
}
.pointsContain .sigAudio{
    background-image: url("../assets/img/360/AudioSig.png");
    background-size: contain;
    right: 0;
}
.pointsContain .sigAudio.animate__heartBeat{
    background-image: url("../assets/img/360/AudioSig_press.png");
    /* opacity: .5; */
}
.pointsContain .audio.audioActivoMC{
    display: block !important;
    z-index: 3;
}
.ayuda{
    background-image: url("../assets/img/360/ayuda.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    background-position-y: top;
    right: 10px;
    top: 10px;
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 1;
}
.ayuda.animate__pulse{
    background-image: url("../assets/img/360/ayuda_press.png");
}
.pointsContain .puntuacion{
    position: absolute;
    width: auto;
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
    left: 0;
    right: 0;
    margin: auto;
    /* border-radius: 20px; */
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    z-index: 1;
    padding: 0px 22px 0 20px;
    margin: 0 30px 0 30px;
    border-radius: 10px;
}
.pointsContain .puntuacion .punto{
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pointsContain .puntuacion .punto.active {
    border: 2px solid #f9b543;
}
.puntuacion .punto.resuelto span{
    background-image: url("../assets/img/360/resuelto.png");
    background-size: cover;
}
.puntuacion .punto.noResuelto span{
    background-color: rgb(255 0 0 / 70%) !important;
}
.pointsContain .puntuacion .punto span{
    background-color: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
}
.timer{
    position: absolute;
    right: 5px;
    bottom: 15px;
    width: 40px;
    top: 20%;
    margin: auto;
    margin-right: 10px;
    display: flex;z-index: 1;
    align-items: center;
    justify-content: center;
}
.timer .borderTime{
    background: rgb(248,209,138);
    background: linear-gradient(180deg, rgba(248,209,138,1) 0%, rgba(253,176,38,1) 100%);
    width: 60%;
    display: flex;
    border-radius: 15px 15px 0 0;
    justify-content: center;
    align-items: flex-end;
    top: 0;
    bottom: 40px;
    position: absolute;
}
.timer .borderTime .time{
    position: relative;
    width: 10px;
    height: 97%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgb(248,209,138);
    background: linear-gradient(180deg, rgba(248,209,138,1) 0%, rgba(253,176,38,1) 100%);
    -webkit-box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 30%);
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 30%);
}
.timer .time .loading{
    position: absolute;
    bottom: 0;
    height: 99%;
    width: 48%;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
}
.timer .reloj{
    position: absolute;
    bottom: 0;
    background-color: rgb(255 178 54 / 50%);
    border-radius: 50%;width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timer .reloj .borderReloj {
    width: 80%;
    height: 80%;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #ffb236;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}
.timer .reloj .borderReloj .minutes {
    position: absolute;width: 3px;
    height: 47%;
    margin-top: 3%;
    background-color: #ffb236;
    border-radius: 2px;
    transform-origin: 50% 100%;
    transform: rotate(0deg);
}
.timer .reloj .borderReloj .seconds {
    width: 3px;
    height: 40%;
    margin-top: 10%;
    background-color: #ffb236;
    border-radius: 2px;
    transform-origin: 50% 100%;
    transform: rotate(30deg);
    position: absolute;
}
.timer .reloj .borderReloj .center {
    width: 20%;
    height: 20%;
    background-color: #ffb236;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.camera{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: solid 3px #f4aa33;
    z-index: 1;
    display: none;
}
.camera .center{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f4aa33;
}
.messageContainer{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 4;
}
.messageContainer .instrucciones{
    position: absolute;
    width: 550px;
    height: 290px;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 22px;
    /* max-width: 768px; */
    /* background-image: url(../assets/img/360/Instr_OpMult.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 250px;
    justify-content: space-between;
}
.messageContainer .instrucciones div a{
    font-family: 'Helvetica';
}
@media (min-width: 900px) {
    .messageContainer .instrucciones{
        width: 92%;
        height: 60%;
    }
    .messageContainer .instrucciones div{
        width: 140px !important;
        height: 60px !important;
        font-size: 30px !important;
    }
}
/* body.find .messageContainer .instrucciones{
    background-image: url(../assets/img/360/Instr_Buscar.png);
} */
body.find[data-land="acuatico"] .messageContainer .instrucciones .imgInstrucciones{
    background-image: url(../assets/img/360/Instr_Aerea.png);
}
body.find[data-land="aereo"] .messageContainer .instrucciones .imgInstrucciones{
    background-image: url(../assets/img/360/Instr_Marina.png);
}
body.MultipleChoice[data-land="terrestre"] .messageContainer .instrucciones .imgInstrucciones{
    background-image: url(../assets/img/360/Instr_Terrestre.png);
}
.messageContainer .instrucciones .imgInstrucciones{
    width: 60% !important;
    height: 350px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.messageContainer .instrucciones .btn{
    width: 100px;
    height: 30px;
    font-size: 18px;
    font-family: 'Helvetica';
    color: white;
    background-color: #ffb339;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.6);
    cursor: pointer;
}
.messageContainer .instrucciones div.playInstrucciones{
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    right: 0;
    bottom: -30px;
    margin: auto;
    border-radius: 50%;
    background-image: url(../assets/img/360/Audio.png);
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
}
@media (max-width: 800px) {
    .messageContainer .instrucciones .play{
        bottom: 120px;
    }
    .puntuacionContain .puntuacionFinal{
        width: 66%;
        min-width: 640px;
        min-height: 360px;
    }
}
.orientationContain{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 5;
}
/* https://www.dmitrkutsenko.com/ */
.orientationContain .changeOrientation{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,1);
}
.orientationContain .changeOrientation .text{
    text-align: center;
    top: 70px;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 22px;
    font-family: 'Helvetica';
    color: #f3a333;
}
.orientationContain .changeOrientation .image{
    background-image: url('../assets/img/360/orientacion-horizontal.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 160px;
    height: 160px;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    animation: rotateDevice 2s infinite linear;
}
.blockGame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
    display: none;
    z-index: 5;
}
/* .validator{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
}
.validator.error{
    display: block;
    box-shadow: rgb(252 0 17) 20px 20px 100px 58px inset, rgb(252 0 17) 0px 18px 36px -18px inset;
}
.validator.correct{
    display: block;
    box-shadow: rgb(67, 252, 0) 20px 20px 100px 58px inset, rgb(67 252 0) 0px 18px 36px -18px inset;
} */
.loadGame{
    position: absolute;
    background: linear-gradient(0deg, rgba(139,162,64,1) 0%, rgba(25,156,64,1) 100%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}
.loadGame .loadContain{
    display: flex;
    flex-direction: column;
    width: 10rem;
    height: 10rem;
}
.loadGame .loading{
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/img/360/carga.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: rotation 2s infinite linear;
}
.loadGame .loadingback{
    /* width: 10rem;
    height: 5rem;
    margin-top: 5rem; */
    flex-basis: 0;
    flex-grow: 1;
    background-image: url("../assets/img/360/carga_titulo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.multiple-choice{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 70%);
    display: none;
    /* opacity: 0; */
    z-index: 3;
}
.multiple-choice .cirle{
    width: 130%;
    height: 130%;
    background-image: url("../assets/img/360/Elipsegrande.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: -42%;
}
.multiple-choice .cirle:nth-child(2n){
    background-image: url("../assets/img/360/Elipsechica.png");    
    background-size: 32%;
}
.multiple-choice .nombre {
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    width: 90%;
    height: 10px;
    margin: auto;
    text-align: center;
    color: white;
    font-size: 26px;
}
.multiple-choice .shadow{
    position: absolute;
    width: 20px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 85px 75px #000 !important;
}
.multiple-choice .animalIMG{
    width: 280px;
    height: 190px;
    margin-bottom: 90px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.multiple-choice .opciones{
    position: absolute;
    top: 80px;
    right: 0;
    left: 0;
    bottom: 0;
    width: 700px;
    height: 240px;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    background-image: url("../assets/img/360/OM.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(0.8);
}
.multiple-choice .opciones .respuesta{
    position: absolute;
    width: 230px;
    height: 78px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 14px;
    line-height: 1.2;
    padding: 5px;
    overflow: visible;
    color: #fff;
    box-sizing: border-box;
    font-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-color: rgb(255 170 36); */
    background-image: url("../assets/img/360/respuesta.png");
}
.multiple-choice .opciones .respuesta.correcto{/* background-image: url("../assets/img/360/btn-correcto.png"); */border: 5px solid #69c90f;}
.multiple-choice .opciones .respuesta.incorrecto{/* background-image: url("../assets/img/360/btn-incorrecto.png"); */border: 5px solid #e33d32;}
.multiple-choice .opciones .respuesta[data-id="0"] {
    left: 0;
    top: 0;
}
.multiple-choice .opciones .respuesta[data-id="1"] {
    top: 0;
    right: 0;
}
.multiple-choice .opciones .respuesta[data-id="2"] {
    bottom: 12px;
}
@media (min-width: 1000px) {
    .multiple-choice .opciones{
        width: 932px;
        height: 322px;
    }
    .multiple-choice .opciones .respuesta{
        width: 300px;
        height: 102px;
        font-size: 15px;
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}  
@keyframes derotation {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@keyframes rotateDevice {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(25deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(-25deg);}
    100% {transform: rotate(0deg);}
}
a{
    text-decoration: none !important;
    color: #fff !important;
}


.validar{
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    z-index: 1;
}
.validar .sombra{
    width: 100%;
    height: 100%;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.validar .sombra.correct{background-image: url(../assets/img/360/find-correcto.png);}
.validar .sombra.error{background-image: url(../assets/img/360/find-incorrecto.png);}
.validar .sombra .radio1{
    position: absolute;
    width: 40%;
    height: 40%;
    background-image: url(../assets/img/360/Elipsechica.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.validar .sombra .radio2{
    position: absolute;
    width: 45%;
    height: 45%;
    background-image: url(../assets/img/360/Elipsegrande.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.validar .animalValidar{
    position: absolute;
    width: 30%;
    height: 30%;
    /* background-image: url(../assets/img/oceano/fauna/Common_Bottlenose_Dolphin.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
.vr{
    min-width: 10%;
    min-height: 7%;
    left: 15px;
    bottom: 10px;
    cursor: pointer;
    width: 10px;
    height: 10px;
    position: absolute;
    background-image: url("../assets/img/360/vr.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.vr.press{
    background-image: url("../assets/img/360/vr_press.png");
}
.animalName{
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
    bottom: 0;
    width: 400px;
    height: 20px;
    margin: auto;
    text-align: center;
    color: #fff;
    font-family: 'Helvetica';
    font-size: 30px;
    display: none;
    z-index: 5;
}
.animalName b{
    font-family: 'HelveticaBold';
}