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

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

.responderBnt{
	position: absolute;
	width: 250px;
	bottom: -50px;
	left: calc( 50% - 180px);
	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{
	height: calc(100vh - 50px);
	position: absolute;
	bottom: 0;
	z-index: 1;
}

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

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

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


.inputStandardNode{
	background-color: hsla(0,0%,93%,1.00);
	font-size: 30px;
	padding:   20px;
	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: 30px;
	padding:   20px;
	border-radius: 8px;
	border: 0px;
	color: hsla(0,0%,36%,1.00);
	font-family: "RalewayMedium";
	
}

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

.cenario_01{
	background: url("img/bg_02.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;
  
}
.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: 25px;
}

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

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

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

.modal_div{
	background-color: hsla(0,0%,0%,0.88);
	border-radius: 8px;
	padding-left: 20px;
	padding-right: 20px;	
	width: 600px;
	height: 400px;
	position: absolute;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;
	color: aliceblue;
	z-index: 1000;
	display: none;
}

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

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

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

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



.div_center{
	position: absolute;
}

.anima_ini_hand{
	width: 540px;
	height: 540px;
}

.anima_ini_logo{
	width: 530px;
}

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

.logo_animation{
     width: 450px;
     height: 450px;
	 animation-name: logoIniAnimation;
  	 animation-duration: 3s;
	 animation-iteration-count: 1;
	 animation-fill-mode:forwards;
}

.loaderCircle {
	border: 8px solid rgba(255,255,255,0.41);
	border-left-color: #FF8C60; 
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: loaderAnimation 0.5s 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);}
}