* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif!important;
}

html {
  background-color: #fff;
  background: url('/img/bg.jpg')!important;
}


/* aberto em desktop ? */

body.opened_in_desktop h1, body.opened_in_desktop .info {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
  width: 90%;
  margin: 0 auto;
  max-width: 768px;
}
body.opened_in_desktop .info {
  text-align: center;
}
body.opened_in_desktop .app_container {
  opacity: 1!important;
}

body.opened_in_desktop .qrcode {
  background: rgba(255,255,255,1);
  border-radius: 25px;
  padding: 48px;
  text-align: center;
  width: 90%;
  max-width: 768px;
  min-height: 350px;
  margin: 0 auto;
}

body .desktop {
  max-width:414px!important;
  margin:5vh auto!important;
  overflow: hidden!important;
  -webkit-box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);
  box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);

  width:414px;
  height:736px;
  height:636px; /* address bar = - 50px e botoes rodapé = -50px */
}

body iframe {
  border: none;
  width:100%;
  height: 100%;
  overflow:hidden;
}

body.opened_in_desktop {
    background: url('/img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.opened_in_desktop .app_container{
  background: none;
  background-color: rgba(0,0,0,0.04)!important;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}



/* botoes e elementos globais */

input, button, .btn-auchan {
  border-radius: 50px !important;
}
button:not(.btn-resposta), .btn-auchan {
  font-size: 11px!important;
  letter-spacing: 1px!important;
  text-transform: uppercase!important;
  font-weight: 500!important;
  font-weight: 600!important;
  line-height: 10px!important;
}
#btlogin {
  line-height: 1.5em !important;
}
.btn.disabled, .btn:disabled {
    opacity: 1;
}
.btn-auchan {
  color: #fff;
  background-color: #dd0a25;
  border-color: #dd0a25;
  background-color: #159761;
  border-color: #159761;
  font-weight: 600;
}
.btn-auchan:hover {
  color: #fff;
  background-color: #159761;
  border-color: #159761;
}

button#btSairParaHome {
  color: white;
  padding: 5px 7px;
  cursor: pointer;
  font-size: 12px;
  background: #dd0a25;
  border-radius: 50px;
  width: 50px;
  text-align: center;
  border:1px solid rgba(0,0,0,0.25);
  font-weight: 700;

  font-weight: 500;
  padding-left: 5px !important;

  position: absolute;
  right: 14px;
}

img#btSairParaHome {
  height: 32px;
  cursor:pointer;
  position: absolute;
  right: 14px;
  height: 24px;
  height: 20px;
}



/* animações e transições globais */
body {
  -webkit-transform: opacity .3s ease;
  transform: opacity .3s ease;
  transition: opacity .3s ease;
  opacity: 1;
}

body.close , body.close.app_container {
  opacity: 0;
}

.app_container {
  -webkit-transform: opacity .3s ease;
  transform: opacity .3s ease;
  transition: opacity .3s ease;
  opacity:0;
  padding-bottom: 50px;
}

.app_container.active {
  opacity:1;
}


/* navbar ... */
.navbar {
  background-color: rgba(255,255,255,0.97) !important;
  border:none!important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999;
  padding: 5px 15px;
  height: 42px;
  overflow: hidden;
}
.navbar-brand {
  font-size: 14px;
  margin-right: 0;
  line-height: 32px;
  padding: 0px;
  position: absolute;
  top: 4px;
  height: 34px;
  width: 300px;
  overflow: hidden;
}
.navbar-toggler {
  border:none!important;
}
.navbar .avatar {
  width: 32px;
  height: 32px;
}
.navbar .playername {
  display: inline;
  margin-left: 14px;
  font-weight: normal;
  font-size: 16px;
}
/*
.navbar.treino {
  xbackground-color: rgba(0,255,0,0.75) !important;
  xbackground: url('/img/bg_treino.jpg');
  background-color: #555!important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.navbar.treino .playername {
  color:#fff!important;
  cursor: pointer;
}
*/

.top_player {
  position: absolute;
  top: 4px;
  left: 45px;
  height: 30px;
  width: 250px;
}

#data_nickname {
    height: 18px;
    line-height: 16px;
    width: 250px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
}

.top_playerlevel {
  transition: 1s ease-in-out all;
  height: 5px;
  width: 250px;
  position: absolute;
  top: 22px;
}


.player_level_top {
  width: 40px;
  height: 4px;
  border-radius: 10px;
  background-color: #dd0a25;
  margin-right: 10px;
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 0;
}
.player_level_top:nth-child(2) {left:45px;}
.player_level_top:nth-child(3) {left:90px;}
.player_level_top:nth-child(4) {left:135px;}
.player_level_top:nth-child(4) {display: none;}


.player_level_top.top_level_concluido {
  background-color: #159761;
}

.bg_nivel2 .player_level_top:nth-child(1) {
  background-color: #159761;
}
.bg_nivel3 .player_level_top:nth-child(1) {
  background-color: #159761;
}
.bg_nivel3 .player_level_top:nth-child(2) {
  background-color: #159761;
}


/* gold ...  */
.treino .player_level_top, .treino .player_level_top.top_level_concluido, .bg_treino .player_level_top  {
  background-color: #159761;
  background-color: #e3be58!important;
}

/* fundos dos varios ecras ... */

.home {
  background: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ranking {
  background: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.rules {
  background: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mapa {
  xbackground-image: url('/img/mapa_default.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  height: calc(100vh - 190px);
  width: calc(100% - 30px);
  margin:0 15px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-size:75%;
}

.mapa_inner {
  position: absolute;
  xbackground-image: url('/img/mapa_default.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  height: calc(100vh - 190px);
  margin: 0;
  padding: 0;
  width: calc(100% - 30px);
  opacity:0;
  -webkit-transition: 1s all 2s ease;
  -moz-transition: 1s all 2s ease;
  -o-transition: 1s all 2s ease;
  transition: 1s all 2s ease;
  background-size:100%;
  -webkit-transition: 1s all 1s ease;
  -moz-transition: 1s all 1s ease;
  -o-transition: 1s all 1s ease;
  transition: 1s all 1s ease;
}

.mapa, .mapa_inner {
  height: calc(100vh - 100px);
  width: calc(100% - 2px);
  margin:0 1px;
  background-size: calc(100vw + 12px);
}
.mapa {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.bg_nivel1 .mapa_inner {
  background-image: url('/img/mapa_nivel1.png');
  background-size: calc(100vw + 12px);
  background-position: top;
}
.bg_nivel2 .mapa_inner {
  background-image: url('/img/mapa_nivel2.png');
  background-size: calc(100vw + 12px);
  background-position: top;
}
.bg_nivel3 .mapa_inner {
  background-image: url('/img/mapa_nivel3.png');
  background-size: calc(100vw + 12px);
  background-position: top;
}
.bg_nivel4 .mapa_inner, .bg_treino .mapa_inner {
  background-image: url('/img/mapa_nivel4.png');
  background-size: calc(100vw + 12px);
  background-position: top;
}


.perfil {
  background: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.quiz {
  background: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.quiz.bg_nivel1 {
  background: url('/img/bg_nivel1.png');
  background-size: cover;
  background-position: bottom;
}
.quiz.bg_nivel2 {
  background: url('/img/bg_nivel2.png');
  background-size: cover;
  background-position: bottom;
}
.quiz.bg_nivel3 {
  background: url('/img/bg_nivel3.png');
  background-size: cover;
  background-position: bottom;
}

.quizresult {
  background-image: url('/img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.quizresult.sucesso {
  background-image: url('/img/quiz_result_pass.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.quizresult.falhou {
  background-image: url('/img/quiz_result_fail.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.bg_nivel3 .quizresult.sucessoNOT_ACTIVE {
  background-image: url('/img/quiz_result_win.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.app_container , .quiz_result_sub_container {
  background: none;
  background-color: rgba(0,0,0,0.04)!important;
  height:100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top:45px;
  padding-top:42px;
}
.loginpage  {
  background-color: #dd0a25;
  background-color: #d92028; /* igual à imagem */
}



/* SCREEN - LOGIN */
#btlogin {width: 100%;}
.loginpage  {
  background-color: #dd0a25;
  background-color: #d92028;
  background: url('/img/welcome.jpg') repeat-y;
}
.loginpage .login_imagem {
  /*
  background-image: url('/img/entrada_jogo.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  background-color: #dd0a25;
  background-size: 100%;
  background-position: center bottom;
  height: calc(100vh - 75px);
  background-position-y: 150px;
  */
  opacity:0;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.loginpage .login_imagem img {
  width: 100%;
}
.loginpage .login_imagem {
  position: fixed;
  bottom: 150px;
  left:0;
  right: 0;
}

.loginpage .login_imagem_auchan {
  position: absolute;
  left: calc(50% - 42px);
  top: -30px;
  z-index: 99;
  opacity:0;
  -webkit-transition: 1s opacity,top 1s ease;
  -moz-transition: 1s  opacity,top 1s ease;
  -o-transition: 1s  opacity,top 1s ease;
  transition: 1s opacity,top 1s ease;
}

.loginpage .loginform {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 7px;
  height: 150px;
  overflow: hidden;
  background-color: #fff!important;
}
.loginform p {
  font-size: 24px;
}
.loginform input {
  text-align: center;
}
.loginpage .app_container {
  padding-top:0!important;
}


.start_text_3 {
  opacity:0;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}


/* SCREEN - home/mapa */
.home_buttons_container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px;
  height: 120px;
  height: 107px;
  height: 60px;

  overflow: hidden;
  background-color: rgba(255,255,255,0.75) !important;
  background-color: rgba(255,255,255,0.0) !important;
}
.home_buttons {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.home_buttons a {
  flex:1;
  margin:7px;
}
.home_buttons [href="#btstargame"] {
  flex:2
}


/* SCREEN - INSTRUÇOES */

.rules h1 {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
}
.rules_text {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
  width: 96%;
  margin:20px auto;
}




/* SCREEN - RANKING  */

.ranking h1 {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
}
.ranking .disclaimer, .ranking .disclaimer_empty {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
  width: 90%;
  margin:20px auto;
  opacity:0;
  -webkit-transform: opacity 1s ease;
  transform: opacity 1s ease;
  transition: opacity 1s ease;
}
.ranking .disclaimer_empty {
  opacity: 0;
}
.ranking_list {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
  list-style-type: none;
}
.ranking_item {
  display:flex;
  margin-bottom: 21px;
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  opacity:0;
  -webkit-transform: opacity 1s ease;
  transform: opacity 1s ease;
  transition: opacity 1s ease;
}
.ranking_item.ranking_visivel {
  opacity:1;
}
.ranking_left {
  flex:2;
}
.ranking_right {
  flex:8;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.ranking_avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.30);
  border-radius: 8px;
  cursor: pointer;
  border-right: 1px dotted rgba(0,0,0,0.15);
  padding: 7px;
  border-radius: 25px;
  border-radius: 25px 0px 0px 25px;
}
.ranking_avatar img {
  width: 96px;
  height: 96px;
}
.ranking_nickname {
  text-align: center;
}
.ranking_score {
  text-align: center;

}
.ranking_position {
  border-bottom: 1px solid red;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;

}


/* SCREEN - PERFIL */

.avatar_select img {
  width: 128px;
  height: 128px;
}
.avatar_select {

}
.avatar_list {
  grid-column: 1 / -1;
  display: grid;
  grid-gap: calc(20px / 2);
  grid-template-columns: 10px repeat(38, calc(70% - 20px * 2)) 10px;
  grid-template-rows: minmax(170px, 1fr);
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * 20px);
  margin-bottom: calc(-.5 * 20px);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(100%);
}
.avatar_list:before,
.avatar_list:after {
  content: '';
}
.avatar_grid > * {
  grid-column: 2 / -2;
  overflow-y: hidden;
  margin-bottom: calc(-.1 * 20px);
}
.avatar_list > li {
  scroll-snap-align: center;
  padding: calc(20px / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.30);
  border-radius: 8px;
  cursor:pointer;
  border: 2px solid rgba(0,0,0,0.1);
}
.avatar_selected {
  background: rgba(0,255,0,0.30)!important;
}
.perfil_nivel_pontos {
  display: flex;
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px 21px;
}
.perfil_avatar_group, .perfil_botoes_group, .perfil_nickname_group {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px 21px;
}
.perfil_nivel {
  flex: 1;
  text-align: left;
}
.perfil_score {
  flex: 2;
  text-align: right;
}
#data_perfil_nivel, #data_perfil_pontos {
  display:inline-block;
  font-weight: 600;
  margin-left: 5px;
}
.perfil #jogador_nickname {
  font-weight: 600;
}



/* SCREEN - QUIZZZZZZ */

.quiz .app_container {
  background: transparent;
}
.pergunta {
  background: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.85);
  border-radius: 50px;
  padding: 5px 14px!important;
  margin-top: 10px!important;
  margin-bottom: 15px!important;
}
#data_resposta1, #data_resposta2, #data_resposta3, #data_resposta4 {
  background: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.85);
}



.barra_progresso {
  background-color: rgba(255,255,255,.50);
  padding: 5px 14px;
  display: flex;
}

.barra_progresso .numeropergunta {
  font-size: 14px;
  font-weight: 600;
  width: 90px;
  line-height: 24px;
}
.barra_progresso .numeropergunta .total_perguntas {
  font-size: 12px;
  font-weight: normal;
  line-height: 24px;
}
.barra_progresso .barra {
  width: calc( 100% - 175px);
  width: calc( 100% - 125px);
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.barra_progresso .barra .percentagem {
  background-color:#dd0a25;
  width: 100%;
  height:14px;
}
.barra_progresso .barra .percentagem_concluida {
  background-color:#159761;
  width: 0%;
  height:14px;
  transition: width 1s ease;
}

.barra_progresso .tempo {
  font-size: 14px;
  font-weight: normal;
  width: 50px;
  line-height: 24px;
}

.scrollable {
  overflow:hidden;
}


.pergunta {
  height: 120px;
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  border: solid 1px transparent;
  padding: 14px;
  height:100px;
  border-color: #ccc;
  border-width: 4px;
  border-left-width: 2px;
  border-right-width: 2px;
}
.pergunta_content {
  flex:1;
  margin:auto;
  font-weight: 600;
}


.btn-resposta {
  border-radius: 25px;
}

#data_nickname {
    transition: 1s ease-in-out all;
}


#data_resultado_img {
  max-height: 25vh;
}



.escondida {
  opacity: 0;
  transition: 1s ease-in-out opacity;
}

#data_resposta1,#data_resposta2,#data_resposta3,#data_resposta4 {
  overflow:hidden;
  width: 0px;
  opacity: 0;
  display: block;
  margin: 0 auto;
  color:rgba(255,255,255,0);
  margin-bottom: 7px !important;
  margin-top: 0px !important;
  width: 100%;
  color:rgba(0,0,0,1);
}

#data_resposta1.visivel,#data_resposta2.visivel,#data_resposta3.visivel,#data_resposta4.visivel {
  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#data_resposta1.invisivel,#data_resposta2.invisivel,#data_resposta3.invisivel,#data_resposta4.invisivel {
  -webkit-animation: slit-out-horizontal 0.5s ease-in both;
	        animation: slit-out-horizontal 0.5s ease-in both;
}


#data_pergunta {
  overflow:hidden;
  transition: 1s ease opacity, 1s ease width, 0.3s ease color, 0.3s ease transform;
  width: 0px;
  opacity: 0;
  display: block;
  margin: 0 auto;
  color:rgba(255,255,255,0);
  width: 100%;
  color:rgba(0,0,0,1);

}

#data_pergunta.visivel {
  -webkit-animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#data_pergunta.invisivel {
  opacity: 0;
}



.firstload > div {

}

#btPararJogo {
  color: white;
  padding: 5px 7px;
  cursor: pointer;
  font-size: 10px;
  background: #dd0a25;
  border-radius: 50px;
  width: 50px;
  text-align: center;
  font-weight: 600;
  position: absolute;
  right: 14px;
}



.btn-generico {
  width: 100%;
  color: black;
  background-color: white;
  border-width: 2px;
  border-color: #159761;
  border-color: #ccc;
  font-size: 1em;
  height: 40px;
  border-radius: 25px;
}

input, button, .btn-generico {
  border-radius: 50px !important;
}
button, .btn-generico {
  padding: 5px 21px !important;
}
.btn.disabled, .btn:disabled {
    opacity: 1;
}
.btn-generico {
  color: #000;
  background-color: rgba(255,255,255,0.85);
  border-color: #ccc;
  font-weight: 600;
}



#data_nivel {
  font-size: 12px;
  padding: 6px 8px;
  width: 21px;
  height: 21px;
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border-radius: 70px;
  overflow: hidden;
  line-height: 8px;
  text-align: center;
  margin-right: 14px;
  background: #00bcff;
  color: white;
  font-weight: 700;
}


#data_nivel, #data_perguntaactual, #total_perguntas, .total_perguntas {
  display: inline-flex;

}
#data_totalperguntas::before {
  content: ' ';
  display: inline;
  margin-left: 5px;
}
#data_perguntaactual {
  width: 20px;
}


@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress-bar {
  overflow: hidden;
  height: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  background-clip: padding-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

  height: 14px;
  margin-bottom:0;

}
.progress {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  background-color: #a0ce4e;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transform: width 0.6s ease;
  transform: width 0.6s ease;
  transition: width 0.6s ease;
  line-height: 14px;
}
.progress-striped .progress {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress-bar.active .progress {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}



.btn-resposta.es {
  /* border: 2px solid transparent; */
  transition: all 1s ease;
  -webkit-box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);
  box-shadow: 2px 2px 14px 0px rgba(0,0,0,0.3);
}

.btn-resposta.es.ct {
     background: rgba(0,255,0,0.85)!important;
     -webkit-box-shadow: 2px 2px 14px 0px rgba(0,255,0,0.3);
     -moz-box-shadow: 2px 2px 14px 0px rgba(0,255,0,0.3);
     box-shadow: 2px 2px 14px 0px rgba(0,255,0,0.3);
     /* font-weight: 500; */
}

.btn-resposta.es.ed {
     background: rgba(255,0,0,0.85)!important;
     -webkit-box-shadow: 2px 2px 14px 0px rgba(255,0,0,0.3);
     -moz-box-shadow: 2px 2px 14px 0px rgba(255,0,0,0.3);
     box-shadow: 2px 2px 14px 0px rgba(255,0,0,0.3);
}

#data_pergunta em {
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}

.texto_pergunta {
  font-size:1.3em;
}

.btn-resposta {
  width: 100%;
  color: black;
  background-color: white;
  border-color: #159761;
  border-color: #ccc;
  font-size: 1em;
  height: 80px;
  border-width: 2px;
  border-left-width: 1px;
  border-right-width: 1px;
}

.resposta_img {
  width: 44%!important;
  color: #fff!important;
  background-color: #fff!important;
  background-color: rgba(255,255,255,0.75)!important;
  margin: 2%!important;
  height: 165px !important;
  height: 152px !important;
  display: inline-block !important;
}
.resposta_img img {
  width: 90%;
}

.pergunta_img img {
  max-height: 100px;
  max-width: 90%;
  width: auto;
}


.OLD_resposta_img {
  width: 90%;
}


.user_name {
  font-size:1em;
}
.user_stats {
  font-size:0.8em;
}


.quizcontent {
  transition: opacity 1s ease;
}





/* QUIZ - animações */

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}




.slit-out-horizontal {
	-webkit-animation: slit-out-horizontal 0.5s ease-in both;
	        animation: slit-out-horizontal 0.5s ease-in both;
}

@-webkit-keyframes slit-out-horizontal {
  0% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes slit-out-horizontal {
  0% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
}



.flip-in-hor-bottom {
	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}





@keyframes mostrar_resposta {
  0% {
    color:rgba(0,0,0,0);
    width: 0;
    opacity: 0;
    color:rgba(0,0,0,0);
   }
  90% {
    color:rgba(0,0,0,0.9);
    width: 100%;
    opacity: 0.9;
    color:rgba(0,0,0,0);
   }
  100% {
    color:rgba(0,0,0,1);
    width: 100%;
    opacity: 1;
    color:rgba(0,0,0,1);
   }
}

@keyframes esconder_resposta {
  0% { color:rgba(0,0,0,1); }
  10% { color:rgba(255,255,255,0); }
  100% { color:rgba(255,255,255,0); }
}




/* SCREEN - QUIZ RESULT  */

.quizresult {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  background-color: whitesmoke;
  transition: top .5s ease;
  top: -101vh;
  display: none;
  padding: 0 !important;
}
.quizresult_content {
  margin:auto;
  font-weight: 600;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 14px;
}

.total_perguntas_certas {
  font-weight: 600;
}
.quizresult_content_bubble {
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 14px;
  margin-bottom: 14px;
}
.quizresult_content_bubble img {
  padding: 14px;
}
#data_resultado_img {display: none;}





.quizresult.falhou .quizresult_content_bubble {
  color:#fff;
  background-color:#dd0a25;
}
.quizresult.sucesso .quizresult_content_bubble {
  color:#fff;
  background-color:#159761;
}

.resultado_mensagem {
  font-weight: 300!important;
}



.explicacao {
  background: rgba(255,255,255,0.95);
  padding: 14px;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  align-content: center;
}
.explicacao p {
  flex: 1;
  text-align: center;
}

/* ajustes a alguns textos .. */
h1 {font-size: 26px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}

h1 {font-size: 22px!important;}
h2 {font-size: 20px!important;}
h3 {font-size: 18px!important;}
h4 {font-size: 16px!important;}
h5 {font-size: 14px!important;}
.rules_text {font-size:14px!important;}
.ranking_nickname {font-size:14px!important;}
.playername, .perfil_nivel, .perfil_score, .perfil label {font-size:15px!important;}
.playername {font-weight: 600!important;}
.btn-resposta {font-size:15px!important;}
#data_pergunta {font-size:15px!important;}

#username, #password {font-weight: 700;}

.form-group {
  margin-bottom: 7px;
}


/* ecras mais pequenos do que 414px ?! */
@media only screen and (max-width: 374px) {
  .ranking_nickname {font-size:11px!important;}
  .playername {font-size:12px!important;}
  #data_pergunta {font-size:14px!important;}
  .btn-resposta {font-size:14px!important;padding: 4px!important;}
  .pergunta {padding: 7px!important; margin-top: 7px !important;}
  .resposta {margin-top:0px!important;}
  .resposta_img { height: 135px!important;}
  .navbar {padding:3px 14px!important;}
  .app_container{padding-top:38px!important;}
}



/* ecras mais pequenos -- iphone 5 = 320px x 568 -130px */
@media only screen and (max-width: 320px) {
  #data_pergunta {
      font-size: 12px !important;
  }
  .pergunta {
    padding: 7px 14px !important;
    height: 80px;
  }
  .btn-resposta {
    font-size: 11px !important;
    height: 60px;
    padding: 4px 7px !important;
  }
  .resposta_img {
      height: 127px !important;
  }
  .avatar_list {
    grid-template-rows: minmax(145px, 1fr);
  }
  .avatar_list > li {
    padding: calc(10px / 2 * 1.5);
  }
  .avatar_grid > * {
    margin-bottom: 0px;
  }
  .perfil_avatar_group, .perfil_botoes_group, .perfil_nickname_group {
      padding: 7px 14px;
  }

  .home_buttons a {
    font-size: 10px !important;
    margin: 5px;
    padding: .375rem .55rem;
  }
  .explicacao {
    font-size:13px;
  }



}


.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

@media screen and (orientation:landscape){
    xxxxxbody {
        opacity:0!important;
    }
    #apenas-portrait {
        display:block;
    }
}

.loginpage .app_container{
  background-color: none!important;
}