@charset "utf-8";
@font-face {
     font-family: "RalewayMedium";
     src: url("fonts/Raleway-Medium.ttf")
}

h1{
	font-size: 50px;
}

body{
	width: 100vw;
    height: 100vh;
	background-color: #000000;
	font-family: "RalewayMedium";
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

figure { width: 90%; min-width: 17.5em; margin:0 auto;}

figcaption { font: 120% sans-serif; text-align: center;}
.boxVideo {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 25px;
    height: 0;
    margin:0 auto;
}
.boxVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*------------------------------------------ INICIAL-----------------------------------------------*/

.ini_animation_1{
	position: absolute;
	z-index: 1;
}

.ini_animation_2{
	position: absolute;
	z-index: 2;
}

.jogar_button{
	background-color: hsla(0,0%,93%,1.00);
	font-size: 25px;
	padding: 8px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 2px;
	z-index: 3;
}


.jogar_button_over{
	background-color: hsla(272,33%,16%,1.00);
	font-size: 25px;
	padding: 8px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 2px;
	color: #FFFFFF;
	z-index: 4;
}

.ini_buttons{
	z-index: 5;
	background: rgba(255,255,255,0.82);
	border-radius: 8px;
	padding: 10px
}


.inicial-menu{
	width: 90%;
	margin: 5px;
}

.button_pular_video{
	position: absolute;
	z-index: 5;
	margin: 10px;
}
/*------------------------------------------ GAME -----------------------------------------------*/

.emoji{
	position: absolute;
	z-index: 10000;
}
.apresentador_fundo{
	width: 100%;
	
	top: 0px;
	left: 0px;
	z-index: 0;
	position: absolute;
}

.apresentador_container{
	width: 50%;
	height: 90%;
	bottom: 0px;
	left: 0px;
	z-index: 3;
	position: absolute;
	
}

.apresentador{
	height: 70%;
	width: 70%;
	bottom: 0px;
	left: 20%;
	z-index: 4;
	position: absolute;
}

.convidado_container{
	width: 50%;
	height: 90%;
	bottom: 0px;
	right: 0px;
	z-index: 5;
	position: absolute;
	
}

.convidado{
	height: 70%;
	width: 70%;
	bottom: 0px;
	right: 20%;
	z-index: 6;
	position: absolute;
}

.convidado_fundo{
	width: 100%;
	
	top: 0px;
	right: 0px;
	z-index: 1;
	position: absolute;
}

.pergunta_container{
	left: 10%;
	top: 10%;
	position: absolute;
	z-index: 10;
	font-size: 45px;
	background-color: #FFFFFF;
	border-radius: 20px;
}

.pergunta{
	padding: 10px;
	
	z-index: 11;
	margin: 0px;
}

.pergunta_tips {
	top: -5px;
	width: 117px;
	height: 57px;
	margin-left: 25%;
	z-index: 1001;
	
}

.resposta{
	top: 5%;
	left: 15%;
	padding: 8px;
	background-color: #FFFFFF;
	position: absolute;
	border-radius: 20px;
	z-index: 10;
	
}

.button_resposta{
	background-color: hsla(0,0%,93%,1.00);
	font-size: 25px;
	padding: 8px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 2px;
	
}

.button_resposta_over{
	background-color: hsla(272,33%,16%,1.00);
	font-size: 25px;
	padding: 8px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 2px;
	color: #FFFFFF;
	
	
	
}

.estrela{
	width: 100%;
	bottom: 0px;
	position: absolute;
	z-index: 2000;
}

.inicial_container_luz{
	width: 100%;
	position: absolute;
	top: 0px;
    z-index: 0;	
} 

 
/*------------------------------------------ FINAL -----------------------------------------------*/
.final_luz{
	width: 100%;
	position: absolute;
	top: 0px;
    z-index: 0;	
}

.final_fundo{
	width: 80%;
	position: absolute;
	bottom: -5px;
    z-index: 1;
}

.final_cortina_l{
	width: 100%;
	position: absolute;
	top: -5px;
	right: 0px;
    z-index: 2;
}

.final_cortina_r{
	width: 100%;
	position: absolute;
	top: -5px;
	left: 0px;
    z-index: 2;
}

.final_luminaria{
	width: 80%;
	position: absolute;
	top: 0%;
    z-index: 3;
}

.final_texto{
	padding: 15px;
	top: 25%;
	width: 40%;
	background-color: #FFFFFF;
	position: absolute;
	border-radius: 20px;
	z-index: 4;
	font-size: 25px;
}

.reset_game_container{
	bottom: 15px;
	
	position: absolute;
	z-index: 2000;
}



.respostasBnt{
	left: calc( 50% - 125px);
	z-index: 2002;
	color: #FFFFFF;
}

.responderBnt{
	position: absolute;
	width: 150px;
	bottom: -150px;
	left: calc( 50% - 75px);
	z-index: 2002;
	color: #FFFFFF;
}

.iniciarPartidaBnt{
	width: 400px;
	position: absolute;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;
	z-index: 2001;
}

.pelicula{
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0,0,0,0.69);
	
	z-index: 2000;
}

.cenario01Anim{
	width: calc(100vw);
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.cenario02Anim{
	width: calc(100vw);
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.labelStandard{
	font-size: 20px;
	padding: 5px;	
}

.imgAvatar{
	width: 65px;
	height: 65px;
}

.inputStandardNode{
	background-color: hsla(0,0%,93%,1.00);
	font-size: 20px;
	padding:   5px;
	border-radius: 8px;
	border: 0px;
	color: hsla(0,0%,36%,1.00);
	font-family: "RalewayMedium";
	
}

.inputStandard{
	background-color: hsla(0,0%,93%,1.00);
	font-size: 20px;
	padding:   5px;
	border-radius: 8px;
	border: 0px;
	color: hsla(0,0%,36%,1.00);
	font-family: "RalewayMedium";
	
}

.cenario_02{
	background: url("img/bg_01_mobile.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
}

.cenario_01{
	background: url("img/bg_02_mobile.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
}

.borderRadius{
	border-radius: 8px;
}

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  cursor: pointer;
	z-index: 2002;
	display: none
  
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #FFFFFF;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

.question_font{
	font-size: 20px;
}

.progressContainer{
	margin: 15px;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 8px;
	width: calc( 20% - 13px ) ;
	position: absolute;
	left: 50%;
    margin-right: -50%;
    transform: translate(calc( -50% - 5px), 0) ;
	z-index: 200;
	bottom: 0px;
}

.modalFinal{
	width: 90%;
	background-color: hsla(0,0%,100%,1);
	border-radius: 10px;
	padding: 10px;
	position: absolute;
	top: 10%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -10%) ;
	font-size: 13px;
	display: none;
}

.modal_question{
	width: 300px;
	background-color: hsla(0,0%,100%,1);
	border-radius: 20px;
	padding: 12px;
	position: absolute;
	top: 45%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;
	z-index: 1001;
	display: none;
}

.modal_div{
	background-color: hsla(0,0%,0%,0.98);
	border-radius: 8px;
	padding: 25px;	
	width: 90%;
	height: 90%;
	position: absolute;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;
	color: aliceblue;
	z-index: 15000;
	display: none;
	font-size:  25px;
}

.modal_div h1{
	font-size: 20px;
	
}

.button_answer{
	background-color: hsla(220,82%,60%,1.00);
	font-size: 20px;
	padding: 9px;
	border-radius: 8px;
	font-family: "RalewayMedium";
	cursor: pointer;
	
}

.button_confirm{
	background-color: hsla(220,82%,60%,1.00);
	font-size: 20px;
	padding: 10px;
	border-radius: 8px;
	font-family: "RalewayMedium";
	cursor: pointer;
	
}

.button_standard{
	background-color: hsla(0,0%,100%,1.00);
	font-size: 20px;
	color:  hsla(272,33%,16%,1.00);
	padding: 10px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 4px;
	
}

.button_standard_over{
	background-color: hsla(272,33%,16%,1.00);
	color: #FFFFFF;
	font-size: 20px;
	padding: 10px;
	border-radius: 8px;
	
	font-family: "RalewayMedium";
	cursor: pointer;
	margin: 4px;
	
}

.div_center{
	position: absolute;
}








.loaderCircle {
	border: 8px solid rgba(255,255,255,0.31);
	border-left-color: #FFFFFF; 
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: loaderAnimation 0.8s linear infinite;
}

.content{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
   	margin: 0px;
	padding: 0px;
}

@keyframes logoIniAnimation {
    0%   {opacity: 0.0;}
    25% {opacity: 1.0;}
	75% {opacity: 1.0;}
	100% {opacity: 0.0;}
	
}

@keyframes loaderAnimation {
	to { transform: rotate(360deg);}
}