@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Exo", sans-serif;
}

svg {
    font-family: "Exo", sans-serif;
}

html {
    height: 100%;
}

body {
    background: url(../base/BG-GAMES.svg)no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    overflow-y: auto;
    margin: 0;
}

.container-fluid {
    min-height: 580px;
}

#wrapper {
    max-width: 1360px;
    max-height: 765px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 110px;
}

#gameType {
    font-size: 3rem;
    font-weight: 900;
    color:#00b6e7;
}

/* AVATAR */
.nickname {
    background-color: #fff; 
    width:600px; 
    height:150px; 
    border-radius:30px;
    margin-top: 30px;
}

.nicknameInput {
    width:100%; 
    font-size:35px; 
    text-align:center; 
    line-height:150px; 
    height:100%; 
    background:none; 
    border:none;
}

.selectAvatar {
    background-color: #fff; 
    width:450px; 
    height:100px;
    border-radius: 30px;
}

.selectAvatar h2 {
    font-size: 35px;
}

.fundoAvatar {
    background-color: #fff; 
    width:210px; 
    height:210px;
    border-radius:50%;
}

.fotoAvatar {
    margin-left: 15px;
}

.fotoAvatar img {
    width: 170px;
    height: 170px;
}

.btnAvatar {
    background: url(../base/OC-BOTAO-CONFIRMA.svg)no-repeat;
    background-size: cover;
    width: 230px;
    height: 80px;
    position: absolute;
    left: 557px;
    bottom: -100px;
    border: none;
}

/* TIME */

.fundoTime {
    background-color: #fff; 
    width:260px; 
    height:360px;
    border-radius: 30px;
    margin-top: 50px;
}

.fotoTime {
    width: 170px;

    max-height: 170px;
}

.fotoTime img {
    max-width: 180px;
    height: 160px;
}

/* INDEX */ 

.bodyIndex {
    background: url(../base/BG-Entrar.svg)no-repeat;
    background-size: cover;
    min-height: auto;
    height: 765px !important;
}

.smurfsIndex {
    bottom: -184px;
    right: 365px;
}

.smurfsIndex img {
    width: 600px;
}

.helper-text { 
    text-decoration:underline; 
    font-size:26px;
}

.helper-text a{
    color: #000;
}

.btnEntrar {
    background: url(../base/Botao-Entrar.svg)no-repeat;
    background-size: cover;
    width: 300px;
    height: 114px;
    margin-top: 40px;
    top: 55%;
}

.btnConfirma {
    background: url(../base/OC-BOTAO-CONFIRMA.svg)no-repeat;
    background-size: cover;
    width: 230px;
    height: 80px;
    margin-top: 40px;
}

/* PERFIL */

.fotoPerfil {
    background: url(../base/BG-PERFIL.svg)no-repeat;
    background-size: contain;
    width: 160px;
    height: 160px;
    margin-top: 10px;
    z-index: 2;
}

.fotoPerfil img {
    width: 125px;
    height: 124px;
    border-radius: 50%;
    margin-top: 8px;
    margin-left: 11px;
}

.editarResponsivo {
    margin-top: 3rem;
}

.editarResponsivo a{
    margin-top: 6px;
}

.editarResponsivo a, .alterarResponsivo a{
    color: #000;
    text-decoration: underline;
}

.nomePerfil {
    background: url(../base/BG-PERFIL-NOME.svg)no-repeat;
    background-size: contain;
    width: 310px;
    height: 81px;
    top: 20px;
    left: 59px;
}

.nomePerfil h3 {
    font-size: 2rem;
    color: white;
    padding: 15px;
    margin-left: 73px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nivelPerfil {
    background: url(../base/BG-PERFIL-NIVEL.svg)no-repeat;
    background-size: contain;
    width: 225px;
    height: 45px;
    top: 89px;
    left: 90px;
}

.nivelPerfil h3 {
    color: white;
    font-size: 18px;
    margin-top: 7px;
    margin-left: 82px;
}

.btnVoltar {
    background: url(../base/BOTAO-VOLTAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 100px;
    height: 100px;
    right: -87px;
    top: -140px;
}

.btnVoltarJogos {
    background: url(../base/BOTAO-VOLTAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 100px;
    height: 100px;
    right: 250px;
    top: 25px;
}

.timer {
    background: url(../base/BG-TIMER.svg)no-repeat;
    background-size: contain;
    width: 230px;
    height: 61px;
    margin-bottom: 1rem;
}

.timer h3 {
    color: white;
    font-size: 35px;
}

/* MAPA GERAL */

.dashboard {
    background: url(../base/BG-MAPAS.svg)no-repeat;
    background-size: cover;
}

.dashboardMap {
    width: 827px;
    height: 458px;
}

.dashboard .perfil {
    height: 210px;
}

.animaBotoes img {
    width: 110px;
    height: 110px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 50%;
}

.iconeDashboard {
    background: url(../base/UI-MAPA.svg) no-repeat;
    background-size: contain;
}

.iconeScore {
    background: url(../base/UI-RANKING.svg) no-repeat;
    background-size: contain;
}

.iconeConfiguracao {
    background: url(../base/UI-CONFIG.svg) no-repeat;
    background-size: contain;
}

.iconeTutorial {
    background: url(../base/UI-AJUDA.svg) no-repeat;
    background-size: contain;
}

.mapaGeral {
    background: url(../base/GERAL.svg)no-repeat;
    background-size: contain;
    border-radius: 20px;
    height: 488px;
    border: 15px solid #FFF;
}

.mapa01 {
    background: url(../base/JOGO-01.svg)no-repeat;
    background-size: contain;
    top: 121px;
    left: 19px;
}

.mapa01ok {
    background: url(../base/DESAFIO-1-CONCLUIDO.svg)no-repeat;
    background-size: contain;
    top: 121px;
    left: 19px;
}

.mapa02 {
    background: url(../base/JOGO-02.svg)no-repeat;
    background-size: contain;
    top: 96px;
    left: 287px;
}

.mapa02ok {
    background: url(../base/DESAFIO-2-CONCLUIDO.svg)no-repeat;
    background-size: contain;
    top: 96px;
    left: 287px;
}

.mapa03 {
    background: url(../base/JOGO-03.svg)no-repeat;
    background-size: contain;
    top: 169px;
    right: 292px;
}

.mapa03ok {
    background: url(../base/DESAFIO-3-CONCLUIDO.svg)no-repeat;
    background-size: contain;
    top: 169px;
    right: 292px;
}

.mapa04 {
    background: url(../base/JOGO-04.svg)no-repeat;
    background-size: contain;
    bottom: 81px;
    left: 158px;
}

.mapa04ok {
    background: url(../base/DESAFIO-4-CONCLUIDO.svg)no-repeat;
    background-size: contain;
    bottom: 81px;
    left: 158px;
}

.mapa05 {
    background: url(../base/JOGO-05.svg)no-repeat;
    background-size: contain;
    bottom: 81px;
    right: 313px;
}

.mapa05ok {
    background: url(../base/DESAFIO-5-CONCLUIDO.svg)no-repeat;
    background-size: contain;
    bottom: 81px;
    right: 313px;
}

.mapa01, .mapa02, .mapa03, .mapa04, .mapa05 {
    width: 95px; 
    height: 95px; 
    border: none;
}
.mapa01ok, .mapa02ok, .mapa03ok, .mapa04ok, .mapa05ok {
    width: 95px;
    height: 95px;
    border: none;
}

.botaoRight {
    right:1%; 
    bottom:7%; 
    z-index: 1;
}

#rightGo {
    background: url(../base/BTN-RIGHT.svg)no-repeat; 
    background-size:contain; 
    width:70px; 
    height:70px; 
    border:none;
}

.botaoLeft {
    right: -40%;
    bottom: 8%;
    z-index: 1;
}

#LeftGo {
    background: url(../base/BTN-LEFT.svg)no-repeat; 
    background-size:contain; 
    width:70px; 
    height:70px; 
    border:none;
}

#gamePoint {
    background: url(../base/ICONE-PONTOS.svg)no-repeat;
    background-size: contain;
    width: 245px;
    height: 135px;
}

#gamePoint span {
    color: white;
    position: absolute;
    right: -94px;
    top: 28px;
    font-size: 30px;
}

.progress-container {
    width: 100px; 
    height: 400px; 
    position: relative;
    left: 82px;
}

.progress-striped.vertical {
    width: 100%;
    height: 100%;
    background: url(../base/MAPA-ENERGIA.svg) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 40px;
}

.circuloEnergia {
    width: 31%; 
    height: 10%; 
    bottom: 6px;
    left: 0;
    position: absolute;
    transition: height 0.5s ease; 
    border-radius: 15px;
    overflow: visible;
}

.imgCirculo {
    background: url(../base/CIRCULO-ENERGIA.svg)no-repeat;
    background-size: contain;
    width: 100px; 
    height: 100px; 
    top: -40px;
    left: -32px;
}


/* ENUNCIADO */ 
.enunciado {
    width: 920px;
    height: 110px;
    background-color: white;
    border-radius: 30px;
}

.enunciado h2 {
    font-size: 22px;
}

/* MODAL */ 
.modal-content {
    background: none;
    border: none !important;
}

.modal-body {
    width:850px; 
    height:345px; 
    background-color: #fff;
    border-radius: 30px;
}

.modalInformacoes {
    /*background-color: #fafafa;*/
    width: 360px;
    height: 130px;
    border-radius: 10px 10px 0 0;
    /*border-top: 6px solid #dcd7dc;*/
}

.modalInformacoes h4{
    font-weight: 700;
}

.btnBackGame {
    background: url(../base/BTN-LEFT.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 65px;
    height: 65px;
    margin-top: -40px;
    margin-left: -40px;
}

.cogumelo {
    background: url(../base/COGUMELO.svg)no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    margin-top: -10px;
}

.btnTutorial {
    background: url(../base/BTN-TUTORIAL.svg)no-repeat;
    background-size: contain;
    width: 200px;
    height: 70px;
}

.btnJogar {
    background: url(../base/BTN-PLAY.svg)no-repeat;
    background-size: contain;
    width: 200px;
    height: 70px;
}

#stateGameId {
    width:296px; 
    height:55px; 
    border:none;
}

#tutorialGame {
    width:174px; 
    height:55px; 
    border:none;
}

/* POP UP ERRO */

.popUpErro {
    background-color: #FFF;
    border-radius: 30px;
    width:850px; 
    height:370px;
    margin-top: 10%;
}

.botaoXVermelho {
    background: url(../base/BTN-SAIR-VERMELHO.svg)no-repeat;
    background-size: contain;
    width: 65px;
    height: 70px;
    top: -27px;
    right: -18px;
    cursor: pointer;
}

.popUpErro .text-center h2 {
    font-size: 45px;
    color: #E4464B;
}

.btnErro {
    background: url(../base/BTN-CONTINUAR-VERMELHO.svg)no-repeat;
    background-size: contain;
    width:190px; 
    height:67px; 
    margin-top:380px;  
    border:none;
    cursor: pointer;
}

/* POP UP DICA */

.popUpDica {
    background-color: #FFF;
    border-radius: 30px;
    width:850px; 
    height:370px;
    margin-top: 10%;
}

.botaoXRoxo {
    background: url(../base/BTN-SAIR-ROXO.svg)no-repeat;
    background-size: contain;
    width: 65px;
    height: 70px;
    top: -27px;
    right: -18px;
    cursor: pointer;
}

.popUpDica .text-center h2 {
    font-size: 45px;
    color: #934189;
}

.btnDica {
    background: url(../base/BTN-CONTINUAR-ROXO.svg)no-repeat;
    background-size: contain;
    width:190px; 
    height:67px; 
    margin-top:380px;  
    border:none;
    cursor: pointer;
}

/* POP UP ACERTO */

.popUpAcerto {
    background-color: #FFF;
    border-radius: 30px;
    width:850px; 
    height:370px;
    margin-top: 10%;
}

.botaoXVerde {
    background: url(../base/BTN-SAIR-VERDE.svg)no-repeat;
    background-size: contain;
    width: 65px;
    height: 70px;
    top: -27px;
    right: -18px;
    cursor: pointer;
}

.popUpAcerto .text-center h2 {
    font-size: 45px;
    color: #009E3C;
}

.btnAcerto {
    background: url(../base/BTN-CONTINUAR-VERDE.svg)no-repeat;
    background-size: contain;
    width:271px; 
    height:89px;  
    margin-top:380px; 
    border:none;
    cursor: pointer;
}
 

/* GAME FATO-FAKE */
.respostaFF {
    width: 930px;
    height: 230px;
    background-color: white;
    border-radius: 30px;
}

.respostaFF h3{
    font-size: 25px;
}

.mark {
    width: 70px;
    height: 31px;
    background-color: white;
    border-radius: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.perguntaAtual1, .perguntaAtual2, .perguntaAtual3, .perguntaAtual4 {
    background: url(../base/Fato-Fake-CONTEUDO.svg)no-repeat;
    background-size: contain;
    width: 34px;
    height: 14px;
    top: 48px;
    left: 40%;
}

.perguntaAtual1 {
    display: block;
}

.perguntaAtual2, .perguntaAtual3, .perguntaAtual4 {
    display: none;
}

.botoesFF {
    margin-top: 3rem;
}

.btnFato {
    background: url(../base/FF-BOTAO-FATO.svg)no-repeat;
    background-size: contain;
    width: 250px;
    height: 89px;
    border: none;
}

.btnFake {
    background: url(../base/FF-BOTAO-FAKE.svg)no-repeat;
    background-size: contain;
    width: 250px;
    height: 89px;
    border: none;
}

/* LIGUE OS PONTOS */

.ligueOsPontos, .respostaRapida, .ordemCerta, .fatoOuFake {
    margin-top: -35px;
}

.boxPergunta {
    background: url(../base/BOX-1.svg) no-repeat; 
    background-size: contain;
    width:260px; 
    height:200px;
    margin-top: 0.5rem;
}

.boxPergunta img {
    border-radius: 25px 25px 0 0;
}

.fundoPergunta {
    width:253px; 
    height: 27px;
    background-color: #00b6e7;
    bottom: 8px;
    left: 4px;
}

.fundoPergunta h4{
    color: white;
    text-align: center;
    margin-bottom: 11px;
}

.pontoPergunta {
    background: url(../base/PONTO.svg)no-repeat; 
    margin-left: 102px;
    margin-top: 16px;
}

.btnPergunta {
    width:36px; 
    height:36px; 
    border-radius:50%; 
    background-color: transparent; 
    border:7px solid transparent;
}

.boxResposta {
    background: url(../base/BOX-2.svg) no-repeat; 
    background-size: contain;
    width:260px; 
    height:270px;
}

.boxResposta h4 {
    margin-top: 3rem;
    font-size: 1.2rem;
}

.pontoResposta {
    background: url(../base/PONTO.svg)no-repeat; 
    width:80px; 
    height:80px; 
    margin-left: 110px; 
    margin-top:-6px;
}

.btnResposta {
    width:36px; 
    height:36px; 
    border-radius:50%; 
    background-color: transparent; 
    border:7px solid transparent;
}

#resetarGame {
    background: url(../base/BTN-RESET-AMARELO.svg)no-repeat; 
    background-size: contain;
    width:150px; 
    height:53px; 
    position: absolute;
    right: -145px;
    bottom: 0;
    border: none;
    color: #000;
    font-size: 1.5rem;
}

#resetarGame p {
    margin-bottom: 10px;
}

/* RESPOSTA RAPIDA */

.divResposta {
    margin-top: 1.5em;
}

.boxRespostaRapida {
    background: url('../base/RR-BOX.svg') no-repeat;
    background-size: contain;
    width:535px; 
    height:224px;
    padding: 3rem;
    cursor: pointer;
}

.boxRespostaRapidaImagem {
    background: url('../base/RR-BOX.svg') no-repeat;
    background-size: cover;
    background-position: center;
    width:450px; 
    height:250px;
    padding: 1rem;
    cursor: pointer;
    border-radius: 20px;
}

.boxRespostaRapidaImagem img{
    width:386px; 
    height:185px; 
    margin-top:29px; 
    margin-left:22px;
}

/* ORDEM CERTA */
#sortable {
    margin-top: 1.5rem;
}

.boxOrdemCerta{
    background: url(../base/OC-BOX-2.svg)no-repeat; 
    background-size: contain;
    width:206px; 
    height:365px;
    padding: .5rem;
}

.OCImagem{
    background: url(../base/OC-BOX.svg)no-repeat; 
    background-size: contain;
}

.boxOrdemCerta img{
    width: 180px;
    height: 125px;
    margin-left: 3px;
    border-radius: 10px 10px 2px 2px;
}

.boxOrdemCerta h5 {
    font-size: 17px;
}

.boxOrdemCerta .card-body h5 {
    margin-top: 10px;
}

.ordemCertaConfirma{
    background: url(../base/OC-BOTAO-CONFIRMA.svg)no-repeat;
    background-size: contain; 
    width:200px; 
    height:70px; 
    border:none;
    right: -15px;
    bottom: -70px;
}

.botaoTroca {
    display: none;
}

li {
    list-style-type: none;
}

footer {
     position: relative !important;
    width: 100%;
    height: 100px;
    background: url(../base/RODAPE.svg)no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer img{
    width: 100%;
}

.logoSicred {
    width: 260px;
    height: 25px;
}

#contentGame {
    width: 500px;
    height: 580px;
    overflow-x: auto;
    border-radius: 20px;
    /* border: 15px solid #FFF; */
    padding: 0;
    position: relative;
}

.game1 img{
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.mapaEntradaVila, .mapaVila, .mapaCachoeiras, .mapaEscola, .mapaParqueEnergia {
    border-radius: 20px;
    box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
    webkit-box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
}

.ancorasDiv {
    right: 0;
}

/* MAPA 01 */ 

.mapaEntradaVila {
    background: url(../base/BG-ENTRADA-VILA.svg)no-repeat; 
    background-size: cover; 
    width:2031px; 
    height:527px; 
    border-radius: 20px;
    box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
    webkit-box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 0px 0px 12px rgba(255,255,255,1);
}

.mapaEntradaVila .jogo01 {
    background-size: contain;
    bottom: 86px;
    left: 194px;
}

.mapaEntradaVila .jogo02 {
    background-size: contain;
    bottom: 159px;
    left: 404px;
}

.mapaEntradaVila .jogo03 {
    background-size: contain;
    top: 157px;
    left: 348px;
}

.mapaEntradaVila .jogo04 {
    background-size: contain;
    top: 234px;
    left: 568px;
}

.mapaEntradaVila .jogo05 {
    background-size: contain;
    bottom: 106px;
    left: 747px;
}

.mapaEntradaVila .jogo06 {
    background-size: contain;
    top: 225px;
    right: 736px;
}

.mapaEntradaVila .jogo07 {
    background-size: contain;
    top: 207px;
    right: 554px;
}

.mapaEntradaVila .jogo08 {
    background-size: contain;
    bottom: 188px;
    right: 334px;
}

.mapaEntradaVila .jogo09 {
    background-size: contain;
    bottom: 66px;
    right: 393px;
}

/* MAPA 02 */

.mapaVila {
    background: url(../base/BG-VILA.svg)no-repeat; 
    background-size: cover; 
    width:2031px; 
    height:527px; 
    overflow-x:auto; 
    overflow-y:hidden;
}

.mapaVila .jogo01 {
    background-size: contain;
    cursor: pointer;
    bottom: 175px;
    left: 108px;
}

.mapaVila .jogo02 {
    background-size: contain;
    cursor: pointer;
    bottom: 120px;
    left: 318px;
}

.mapaVila .jogo03 {
    background-size: contain;
    cursor: pointer;
    top: 207px;
    left: 442px;
}

.mapaVila .jogo04 {
    background-size: contain;
    cursor: pointer;
    top: 131px;
    left: 565px;
}

.mapaVila .jogo05 {
    background-size: contain;
    cursor: pointer;
    top: 232px;
    right: 716px;
}

.mapaVila .jogo06 {
    background-size: contain;
    cursor: pointer;
    top: 142px;
    right: 544px;
}

.mapaVila .jogo07 {
    background-size: contain;
    cursor: pointer;
    top: 105px;
    right: 268px;
}

.mapaVila .jogo08 {
    background-size: contain;
    cursor: pointer;
    top: 216px;
    right: 111px;
}

.mapaVila .jogo09 {
    background-size: contain;
    cursor: pointer;
    bottom: 88px;
    right: 461px;
}

/* MAPA 03 */

.mapaEscola {
    background: url(../base/BG-ESCOLA.svg)no-repeat; 
    background-size: cover; 
    width:2043px; 
    height:527px; 
    overflow-x:auto; 
    overflow-y:hidden;
}

.mapaEscola .jogo01 {
    background-size: contain;
    cursor: pointer;
    top: 170px;
    left: 93px;
}

.mapaEscola .jogo02 {
    background-size: contain;
    cursor: pointer;
    top: 214px;
    left: 295px;
}

.mapaEscola .jogo03 {
    background-size: contain;
    cursor: pointer;
    top: 211px;
    left: 506px;
}

.mapaEscola .jogo04 {
    background-size: contain;
    cursor: pointer;
    bottom: 198px;
    left: 714px;
}

.mapaEscola .jogo05 {
    background-size: contain;
    cursor: pointer;
    bottom: 149px;
    right: 746px;
}

.mapaEscola .jogo06 {
    background-size: contain;
    cursor: pointer;
    top: 169px;
    right: 474px;
}

.mapaEscola .jogo07 {
    background-size: contain;
    cursor: pointer;
    top: 136px;
    right: 286px;
}

.mapaEscola .jogo08 {
    background-size: contain;
    cursor: pointer;
    top: 157px;
    right: 57px;
}

.mapaEscola .jogo09 {
    background-size: contain;
    cursor: pointer;
    bottom: 180px;
    right: 291px;
}

/* MAPA 04 */

.mapaParqueEnergia {
    background: url(../base/BG-PARQUE-ENERGIA.svg)no-repeat; 
    background-size: cover; 
    width:2031px; 
    height:527px; 
    overflow-x:auto; 
    overflow-y:hidden;
}

.mapaParqueEnergia .jogo01 {
    background-size: contain;
    cursor: pointer;
    bottom: 154px;
    left: 55px;
}

.mapaParqueEnergia .jogo02 {
    background-size: contain;
    cursor: pointer;
    top: 202px;
    left: 272px;
}

.mapaParqueEnergia .jogo03 {
    background-size: contain;
    cursor: pointer;
    top: 171px;
    left: 426px;
}

.mapaParqueEnergia .jogo04 {
    background-size: contain;
    cursor: pointer;
    top: 205px;
    left: 614px;
}

.mapaParqueEnergia .jogo05 {
    background-size: contain;
    cursor: pointer;
    bottom: 147px;
    left: 755px;
}

.mapaParqueEnergia .jogo06 {
    background-size: contain;
    cursor: pointer;
    top: 160px;
    right: 734px;
}

.mapaParqueEnergia .jogo07 {
    background-size: contain;
    cursor: pointer;
    top: 185px;
    right: 568px;
}

.mapaParqueEnergia .jogo08 {
    background-size: contain;
    cursor: pointer;
    bottom: 151px;
    right: 421px;
}

.mapaParqueEnergia .jogo09 {
    background-size: contain;
    cursor: pointer;
    bottom: 120px;
    right: 190px;
}

/* MAPA 05 */

.mapaCachoeiras {
    background: url(../base/BG-CACHOEIRAS.svg)no-repeat; 
    background-size: cover; 
    width:2031px; 
    height:527px; 
    overflow-x:auto; 
    overflow-y:hidden;
}

.mapaCachoeiras .jogo01 {
    background-size: contain;
    cursor: pointer;
    top: 209px;
    left: 247px;
}

.mapaCachoeiras .jogo02 {
    background-size: contain;
    cursor: pointer;
    bottom: 180px;
    left: 389px;
}

.mapaCachoeiras .jogo03 {
    background-size: contain;
    cursor: pointer;
    top: 223px;
    left: 575px;
}

.mapaCachoeiras .jogo04 {
    background-size: contain;
    cursor: pointer;
    top: 174px;
    left: 748px;
}

.mapaCachoeiras .jogo05 {
    background-size: contain;
    cursor: pointer;
    bottom: 85px;
    right: 721px;
}

.mapaCachoeiras .jogo06 {
    background-size: contain;
    cursor: pointer;
    top: 103px;
    right: 644px;
}

.mapaCachoeiras .jogo07 {
    background-size: contain;
    cursor: pointer;
    top: 104px;
    right: 460px;
}

.mapaCachoeiras .jogo08 {
    background-size: contain;
    cursor: pointer;
    top: 144px;
    right: 244px;
}

.mapaCachoeiras .jogo09 {
    background-size: contain;
    cursor: pointer;
    bottom: 149px;
    right: 351px;
}

/* AVATAR

/* TELA PERFIL */

.telaPerfil {
    background-color: #FFF;
    border-radius: 30px;
    width: 650px;
    height: 370px;
    margin-top: 125px;
    margin-left: 100px;
    box-shadow: 1px 1px 5px 1px;
}

.fundoAvatarPerfil {
    background-color: #fff;
    height: 150px;
    border-radius: 50%;
    box-shadow: 2px 1px 6px;
    top: 7px;
    left: 350px;
    padding: 11px;
}

.fundoAvatarPerfil img {
    width: 124px;
}

.fundoNick {
    background: url(../base/BG-NICK.svg)no-repeat;
    background-size: cover;
    width: 400px;
    height:85px;
}

.fundoNick h2 {
    font-weight:bolder;
}

.btnConfirmaPerfil {
    background: url(../base/OC-BOTAO-CONFIRMA.svg)no-repeat;
    background-size: cover;
    border: none;
    width: 230px;
    height: 80px;
}

/* SCORE */
 .rankingIndividual {
    background-color: #fff;
    border-radius: 30px;
    width: 700px;
    box-shadow: 3px 0px 10px 1px;
 }

 .rankingLinha1 {
    /* border-bottom: 3px solid #00000038; */
    box-shadow: 1px 3px 4px -2px;
    border-radius: 5px 5px 0 0 ;
 }

 .rankingLinha2 {
    border-bottom: 2px solid #00000030;
 }

 .rankingLinha1 h3, .rankingLinha2 h3 {
    font-weight: bolder;
}

 .fundoAvatarScore {
    background-color: #fff;
    width: 115px;
    height: 115px;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px;
 }

 .fundoAvatarScore img{
    width: 100px;
    height: 100px;
 }

 /* SOCIAL */

 .fundoAvatarSocial {
    background-color: #fff;
    width: 115px;
    height: 110px;
    padding: 7px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px;
 }

 .fundoAvatarSocial img{
    width: 100px;
    height: 100px;
 }

 .doacao1, .doacao2, .doacao3 {
    width: 65px;
    height: 30px;
    background-color: #D8D8D8;
    border: 1px solid;
 }

 .doacao1 {
    border-radius: 20px 0 0 20px;
 }

 .doacao3 {
    border-radius: 0 20px 20px 0;
 }

 .btnDoar {
    background: url(../base/BTN-DOAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 126px;
    height: 45px;
 }

.btnPedir {
    background: url(../base/BTN-PEDIR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 126px;
    height: 45px;
 }

/* CONFIGURAÇÕES */
.telaConfiguracao {
    width: 800px;
    height: 500px;
    background-color: #FFF;
    border-radius: 30px;
    box-shadow: 1px 1px 5px 1px;
}

.botaoAudio {
    width: 146px;
    height: 92px;
    border: none;
    margin-right: 29px;
    background: url(../base/BTN-NAO-SELECIONADO.svg)no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background 0.5s;
}

.botaoTela {
    background: url(../base/BTN-NAO-SELECIONADO.svg)no-repeat;
    background-size: contain;
    width:146px; 
    height:92px; 
    border:none; 
}

.btnSair {
    background: url(../base/BTN-LOGOUT.svg)no-repeat; 
    background-size: contain;
    width:55px; 
    height:55px; 
    border:none; 
    margin-left:20px;
    margin-right: 50px;
}

/* LOGOUT */

.telaLogout {
    width: 800px;
    height: 350px;
    background-color: #FFF;
    border-radius: 30px;
}

.logOuth2 {
    font-size: 50px;
    font-weight: bold;
}

.btnCancelarLogout {
    background: url(../base/BTN-CANCELAR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
    position: absolute;
    left: 170px;
    bottom: -95px;
}

.btnLogout {
    background: url(../base/BTN-SAIR.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
    position: absolute;
    right: 170px;
    bottom: -95px;
}

/* CONFIRMAR DONATE */

.btnNao {
    background: url(../base/BTN-NAO.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
    position: absolute;
    left: 170px;
    bottom: -95px;
}

.btnSim {
    background: url(../base/BTN-SIM.svg)no-repeat;
    background-size: contain;
    border: none;
    width: 220px;
    height: 80px;
    position: absolute;
    right: 170px;
    bottom: -95px;
}

/* BARRA DE ROLAGEM */ 

html ::-webkit-scrollbar {
    width: 15px;
}

html ::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background: #00b6e7;
}

html ::-webkit-scrollbar-track {
    border-radius: 50px;
    background: #DFF1FA;
}

/* ALTERAR SENHA */ 

.senhaEdit {
    background-color: #fff; 
    width:500px; 
    height:90px; 
    border-radius:30px;
}

.senhaButton img{
    width: 100px;
    height: 100px;
    margin-top: 20px;
}

/* BOTAO X */

.botaoX {
    background: url(../base/Botao-Sair.svg)no-repeat;
    background-size: contain;
    width: 65px;
    height: 70px;
    right: -22px;
    top: -21px;
}

/* SMURFS */

/* GERAL */

.bicicleta {
    background: url(../smurfs/GERAL-SMURFS-BICICLETA.svg)no-repeat;
    background-size: contain;
    width: 76px;
    height: 63px;
    top: 197px;
    left: 127px;
    animation: treme 1s ease-in-out infinite;
}

@keyframes treme {
  0% {margin-left: 0;}
  25% {margin-left: 5px;}
  50% {margin-left: 0;}
  75% {margin-left: -5px;}
  100% {margin-left: 0;}
}

.mala {
    background: url(../smurfs/GERAL-SMURF-MALA.svg)no-repeat;
    background-size: contain;
    width: 40px;
    height: 45px;
    top: 263px;
    left: 526px;
}

@keyframes girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes vibrate-1 {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translate(-2px, 2px);
    }
    40% {
      transform: translate(-2px, -2px);
    }
    60% {
      transform: translate(2px, 2px);
    }
    80% {
      transform: translate(2px, -2px);
    }
    100% {
      transform: translate(0);
    }
  }

.sino {
    background: url(../smurfs/SINO.svg)no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    top: 214px;
    left: 573px;
}

.borboleta {
    background: url(../smurfs/BORBOLETA.svg)no-repeat;
    background-size: contain;
    width: 30px;
    height: 20px;
    top: 210px;
    left: 744px;
    animation: vibrate-1 1s linear infinite both;
}


/* MAPA 01 - ENTRADA DA VILA */ 

.sapo {
    background: url(../smurfs/ENTRADA-SAPO.svg)no-repeat;
    background-size: contain;
    width: 116px;
    height: 102px;
    left: 255px;
    top: 146px;
    animation-duration: 2s;
}

.smurf-cogumelo {
    background: url(../smurfs/ENTRADA-SMURF-COGUMELO.svg)no-repeat;
    background-size: contain;
    width: 182px;
    height: 164px;
    left: 524px;
    top: 47px;
    -webkit-animation: pulse 1.5s infinite;
}

.smurfete-lendo {
    background: url(../smurfs/ENTRADA-SMURFETE-LENDO.svg)no-repeat;
    background-size: contain;
    width: 130px;
    height: 100px;
    left: 712px;
    top: 229px;
    animation: treme 2.5s linear infinite;
}

.smurf-rede {
    background: url(../smurfs/ENTRADA-SMURF-REDE.svg)no-repeat;
    background-size: contain;
    width: 364px;
    height: 202px;
    right: 671px;
    top: 61px;
    -webkit-animation: pulse 1s infinite;
}

.nozes {
    background: url(../smurfs/ENTRADA-SMURF-NOZES.svg)no-repeat;
    background-size: contain;
    width: 140px;
    height: 110px;
    right: 668px;
    bottom: 89px;
}

.esquilo {
    background: url(../smurfs/ENTRADA-ESQUILO.svg)no-repeat;
    background-size: contain;
    width: 107px;
    height: 110px;
    right: 595px;
    bottom: 89px;
}

/* MAPA 02 - VILA */

.smurfete-andando {
    background: url(../smurfs/VILA-SMURFETE-ANDANDO.svg)no-repeat;
    background-size: contain;
    width: 86px;
    height: 85px;
    top: 211px;
    left: 305px;
    animation: treme 1s ease-in-out infinite;
}

.smurf-velho {
    background: url(../smurfs/VILA-SMURF-VELHO.svg)no-repeat;
    background-size: contain;
    width: 100px;
    height: 101px;
    bottom: 53px;
    left: 744px;    
}

.smurf-barraca {
    background: url(../smurfs/VILA-SMURF-BARRACA.svg)no-repeat;
    background-size: contain;
    width: 326px;
    height: 197px;
    right: 641px;
    top: 42px;
    -webkit-animation: pulse 1s infinite;
}

.smurf-regador {
    background: url(../smurfs/VILA-SMURF-REGADOR.svg)no-repeat;
    background-size: contain;
    width: 141px;
    height: 127px;
    right: 146px;
    bottom: 91px;
    -webkit-animation: pulse 2s infinite;
}

/* MAPA 03 - ESCOLA */ 

.smurf-mala {
    background: url(../smurfs/GERAL-SMURF-MALA.svg)no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    top: 134px;
    left: 206px;
}

.smurf-sino {
    background: url(../smurfs/SINO.svg)no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 115px;
    left: 317px;
}

.smurf-borboleta {
    background: url(../smurfs/BORBOLETA.svg)no-repeat;
    background-size: contain;
    width: 46px;
    height: 32px;
    top: 109px;
    left: 640px;
    animation: vibrate-1 1s linear infinite both;
}

.smurf-professor {
    background: url(../smurfs/ESCOLA-SMURF-PROFESSOR.svg)no-repeat;
    background-size: contain;
    width: 85px;
    height: 85px;
    bottom: 53px;
    left: 598px;
}

.smurf-estudante {
    background: url(../smurfs/ESCOLA-ESTUDANTE.svg)no-repeat;
    background-size: contain;
    width: 51px;
    height: 85px;
    bottom: 49px;
    left: 764px;
}

.smurf-cadeira {
    background: url(../smurfs/ESCOLA-CADEIRA.svg)no-repeat;
    background-size: contain;
    width: 139px;
    height: 150px;
    top: 111px;
    right: 717px;
}

.smurf-estudantes-1 {
    background: url(../smurfs/ESCOLA-SMURFETE-ALUNA-1.svg)no-repeat;
    background-size: contain;
    width: 92px;
    height: 130px;
    top: 32px;
    right: 392px;
}

.smurf-estudantes-2 {
    background: url(../smurfs/ESCOLA-SMURF-ALUNO-2.svg)no-repeat;
    background-size: contain;
    width: 98px;
    height: 124px;
    top: 33px;
    right: 295px;
}

.smurfete-corda {
    background: url(../smurfs/ESCOLA-SMURFETE-CORDA.svg)no-repeat;
    background-size: contain;
    width: 157px;
    height: 166px;
    bottom: 59px;
    right: 541px;
    animation: girar 2s ease-in-out infinite;
}

.smurfs-bola-fut {
    background: url(../smurfs/ESCOLA-BOLA-FUT.svg)no-repeat;
    background-size: contain;
    width: 53px;
    height: 50px;
    bottom: 188px;
    right: 148px;
}

.smurfs-fut-1 {
    background: url(../smurfs/ESCOLA-SMURF-FUT-1.svg) no-repeat;
    background-size: contain;
    width: 105px;
    height: 135px;
    bottom: 73px;
    right: 174px;
}

.smurfs-fut-2 {
    background: url(../smurfs/ESCOLA-SMURF-FUT-2.svg) no-repeat;
    background-size: contain;
    width: 98px;
    height: 123px;
    bottom: 51px;
    right: 96px;
}

.carrinho {
    background: url(../smurfs/ESCOLA-CARRINHO.svg) no-repeat;
    background-size: contain;
    width: 68px;
    height: 64px;
    bottom: 22px;
    right: 414px;
    animation-duration: 2s;
}

/* MAPA 04 - ENERGIA */ 

.smurf-plantando {
    background: url(../smurfs/ENERGIA-SMURF-PLANTANDO.svg)no-repeat;
    background-size: contain;
    width: 118px;
    height: 111px;
    bottom: 15px;
    left: 683px;
}

.smurfs-bicicleta {
    background: url(../smurfs/ENERGIA-SMURFS-BICICLETA.svg)no-repeat;
    background-size: contain;
    width: 117px;
    height: 98px;
    top: 201px;
    left: 731px;
    animation: treme 1s ease-in-out infinite;
}

.smurf-regador-planta {
    background: url(../smurfs/ENERGIA-SMURF-REGADOR.svg)no-repeat;
    background-size: contain;
    width: 118px;
    height: 99px;
    top: 210px;
    right: 378px;
}

.smurf-catavento-2 {
    background: url(../smurfs/CATAVENTO-1.svg)no-repeat;
    background-size: contain;
    width: 102px;
    height: 251px;
    top: 81px;
    right: 308px;

}

.smurf-feliz {
    background: url(../smurfs/ENERGIA-SMURF-FELIZ.svg)no-repeat;
    background-size: contain;
    width: 141px;
    height: 120px;
    bottom: 17px;
    right: 221px;
}

/* MAPA 05 - CACHOEIRAS */ 

.smurfs-volei {
    background: url(../smurfs/CACHOEIRAS-BOLA-VOLEI.svg)no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    top: 43px;
    left: 795px;
}

.smurfs-volei-1 {
    background: url(../smurfs/CACHOEIRAS-SMURF-VOLEI-1.svg)no-repeat;
    background-size: contain;
    width: 74px;
    height: 85px;
    top: 59px;
    left: 699px;
}

.smurfs-volei-2 {
    background: url(../smurfs/CACHOEIRAS-SMURF-VOLEI-2.svg)no-repeat;
    background-size: contain;
    width: 63px;
    height: 85px;
    top: 102px;
    left: 785px;
}

.smurfs-volei-3 {
    background: url(../smurfs/CACHOEIRAS-SMURF-VOLEI-3.svg)no-repeat;
    background-size: contain;
    width: 59px;
    height: 85px;
    top: 43px;
    left: 856px;
}

.smurf-balde {
    background: url(../smurfs/CACHOEIRAS-SMURF-BALDE.svg)no-repeat;
    background-size: contain;
    width: 101px;
    height: 119px;
    bottom: 26px;
    left: 632px;
}

.smurf-areia {
    background: url(../smurfs/CACHOEIRAS-AREIA.svg)no-repeat;
    background-size: contain;
    width: 150px;
    height: 119px;
    bottom: 70px;
    left: 739px;
    animation-duration: 2s;
}

.smurfs-piquenique {
    background: url(../smurfs/CACHOEIRAS-CHAO-PIQUENIQUE.svg)no-repeat;
    background-size: contain;
    width: 186px;
    height: 75px;
    top: 97px;
    right: 605px;
}

.smurf-1-piquenique {
    background: url(../smurfs/CACHOEIRAS-SMURF-PIQUENIQUE-1.svg)no-repeat;
    background-size: contain;
    width: 50px;
    height: 80px;
    top: 53px;
    right: 735px;
}

.smurf-2-piquenique {
    background: url(../smurfs/CACHOEIRAS-SMURF-PIQUENIQUE-2.svg)no-repeat;
    background-size: contain;
    width: 80px;
    height: 55px;
    top: 56px;
    right: 633px;
}

.frisbee {
    background: url(../smurfs/CACHOEIRAS-FRISBEE.svg)no-repeat;
    background-size: contain;
    width: 137px;
    height: 53px;
    bottom: 234px;
    right: 656px;
}

.smurfete-frisbee {
    background: url(../smurfs/CACHOEIRAS-SMURF-FRISBEE-1.svg)no-repeat;
    background-size: contain;
    width: 89px;
    height: 108px;
    bottom: 156px;
    right: 784px;
}

.smurf-frisbee {
    background: url(../smurfs/CACHOEIRAS-SMURF-FRISBEE-2.svg)no-repeat;
    background-size: contain;
    width: 112px;
    height: 104px;
    bottom: 145px;
    right: 557px;
}

.peixe {
    background: url(../smurfs/CACHOEIRAS-PEIXE.svg)no-repeat;
    background-size: contain;
    width: 200px;
    height: 124px;
    bottom: 12px;
    right: 198px;
}

.btn:focus{
    outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

button:focus {
    outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

a:focus {
    outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

::-webkit-scrollbar:horizontal{
    overflow-x: auto;
    margin-top: 50px;
}

.endGame {
    height: 733px;
}