body{
  background-color: #FEFCFC;
  font-family: 'ABC-Regular', sans-serif !important;
  color: #2D2F44;
  position: relative;
}

.content{
  width: 100%;
}
  
#fundo{
  width:100%;
  height:auto;
  
}
#fundo2{
  width:100%;
} 

#fundo3{
  width:100%;
  height:5000px;
}

.certo{
  color: #54C5C1;
}

.errado{
  color: #DD5E5C;
}

.buttons{
  font-family: 'ABC-Bold', sans-serif;
} 

#content{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.carousel{
  margin-top: 50px;
  width: 700px;
  height: 250px;
}
.carousel-inner{
  height: 500px;
}
.carousel-caption{
  color: #fff;
  top: 50%;
  height: 500px;
}

.carousel-control-prev{
  color: #2D2F44;
}

.carousel-control-next{
  color: #2D2F44;
}

.carousel-control-prev:hover{
  color: #2D2F44;
}

.carousel-control-next:hover{
  color: #2D2F44;
}


#imgTutorial{
  width: 70%;
}

.tutorial>p{
  text-align: center;
  color: #2D2F44;
  font-family: 'ABC-Bold', sans-serif;
}

.respostas{
  display: flex;
  justify-content: center;
  align-items: center;
}

#ranking{
  background-color: #E7EDF1;
  border-radius: 10px;
  color: #2D2F44;
}

#ranking tr{
  text-align: center;
}

.nomeStar{
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

.nomeStar strong{
  color: #2D2F44;
}

.star{
  color: #2D2F44;
}

#ranking img{
  border-radius: 50%;
}

#reviews{
  background-color: #E7EDF1;
  border-radius: 10px;
}

#avaliacoes{
  display: flex;
  flex-direction: row;
}

#avaliar{
  background-color: #54C5C1;
  border-color: #54C5C1;
  margin-left:165px ;
}

.titulo{
  display: flex;
  flex-direction: row;
  justify-content: center;
  
  font-family: 'ABC-Bold', sans-serif;
  color: #2D2F44;
}

.comentarios{
  background-color: #E7EDF1;
  border-radius: 10px;
} 

.perfilCom{
  border-radius: 50%
}

.comentarios>div{
  display: flex;
  flex-direction: row;
}

.comentario{
  background-color: #FEFCFC;
  border-radius: 10px;
  color: #2D2F44;
}

#continuar{
  border-radius: 10px;
}

#num{
  width: 120px;
} 

#progresso{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#continuarBtn{
  border-radius: 50%;
}

#entrar{
  border-color: #488baf;
  color: #488baf;
  background-color: #FCF7F7;
  border-radius: 10px;
  
  border-width: 3px;
}

#registar{
  border-color: #488baf;
  background-color: #488baf;
  color: #FCF7F7;
  border-radius: 10px;
}

.comentario{
  text-align: left;
}

#video{
  width: 80%;
}

@media screen and (max-width: 575px) {

  #content div.divInicio{
    margin-top: 90px;
    width:400px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #bemVindo{
    margin-top: 120px;
    width: 250px;
    margin-bottom: 40px;
  }

  #progresso{
    width: 300px;
  }

  .carousel{
    margin-top: 0px;
    z-index: -1;
    width: 480px;
  }

  #video{
    margin-top: 60px;
    width: 60%;
  }

  #fundo{
    content:url("../media/images/mobileFundo.svg");
    margin-top: 70px;
  }

  #fundo2{
    display: none;
  }

  .tutorial{
    margin-top: 60px;
  }

  #imgTutorial{
    content:url("../media/images/tutorialMobile.svg");
    width: 90%;
  }

  #tituloTutorial{
    font-size: 24px;
  }

  .buttons{
    margin-top: 40px;
  }

  #entrar{
    font-size: 22px;
    width: 145px;
    height: 45px;
    margin-right: 20px;
  }
  
  #registar{
    font-size: 22px;
    width: 145px;
    height: 45px;
  }


  #continuar{
    width: 250px;
    height: 100px;
    margin-top: 40px;
    padding: 10px;
    background-color: #E7EDF1;
  }

  #continuarBtn{
    width:40px;
    height:40px;
  }

  .titulo>h2{
    font-size: 20px;
  }

  .titulo{
    justify-content: space-between;
    margin-bottom: 20px;
  }

  #ranking img{
    width: 30px;
  }

  #ranking{
    height: 240px;
  }

  #reviews{
    padding: 10px;
  }

  .perfilCom{
    width: 30px;
    height: 30px;
  }

  .comentarios{
    padding: 20px;
    height: 235px;
  }

  #avaliacoes{
    margin-top: 20px;
  }

  .comentario{
    height: 130px;
    padding: 10px;
  }

  /* #fundo{
    display: none;
  } */

  #bemVindo{
    margin-bottom: 40px;
  }
  #progresso{
    margin-top: -5%;
  }

  .container_bar{
    margin-top: 10%;
  }
  

}

@media screen and (min-width: 575px) {
  
  /* pagina nao logada */
  #content div.divInicio{
    margin-top: 90px;
    width:500px;
  }

  /* #divfundo{
    position: relative;
  } */

  #fundo{
    margin-top: 155px;
  }

  #fundo2{
    margin-top: 155px;
  }

  #topo{
    position: absolute;
    margin-top: 50px;
    width: 90%;
  }
  #coisas{
    display: flex;
  }

  #progresso{
    margin-top: 60px;
  }

  #bemVindo2{
    margin-left: 100px;
  }

  #nextSticker{
    background-color: #C9D6D6;
    height: 35%;
    width: 35%;
    border-radius: 10px;
    margin-top: 50px;
  }

  #progresso>img{
    width: 60%;
  }

  #continuar{
    width: 60%;
    margin-top: 40px;
    padding: 10px;
    background-color: #FAF5AC;
  }

  #continuarBtn{
    width:40px;
    height:40px;
  }
  
  .tutorial>img{
    width:100px;
  }

  #entrar{
    font-size: 22px;
    width: 180px;
    height: 61.52px;
    left: 265px;
    top: 350px;
    position: absolute;
  }
  
  #registar{
    font-size: 22px;
    width: 180px;
    height: 61.52px;
    left: 500.13px;
    top: 350px;
    position: absolute;
  }
  
  #video{
    align-self: center;
    margin-top: 132px;
    margin-bottom: 132px;
    width:70%;
  }
  
  
  /* pagina logada */

  #baixo{
    background-image: url("../media/images/fundo_logado.svg");
    /* background-position-y: 80%; */
    background-repeat: no-repeat, repeat;
    background-size:100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
  .titulo{
    background-color: #FBE2E2;
    border-radius: 50px;
    width: 600px;
    padding: 10px;
    margin-top: 60px;
    margin-bottom: 40px;
  }

  .tutorial>p{
    margin-bottom: 40px;
    font-size: 40px;
  }

  .tutorial{
    background-color: #FBF6F3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #ranking{
    width: 510px;
    height: 300px;
  }
  

  .comentario{
    height: 200px;
    padding: 10px;
  }

  .perfilCom{
    width: 50px;
    height: 50px;
  }

  .comentarios{
    width: 510px;
    padding: 20px;
    height: 310px;
  }

  #reviews{
    width: 400px;
    padding: 20px;
  }

  #ranking img{
    width:50px;
  }
  .divInicio{
    display: flex;
    flex-direction: column;
    align-items: center;
  }


}

.container_bar{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}
.layer2{
  display: flex;
  flex: wrap;
  justify-content: space-between;
}


.red{
  stroke: #DD5E5C;
  fill: #DD5E5C;
  height:  32px;
  width: 32px;
}

.green{
  stroke: #56C4C0;
  fill: #56C4C0;
  height:  32px;
  width: 32px;
}

.yellow{
  stroke: #FAF5AC;
  fill: #FAF5AC;
  height:  32px;
  width: 32px;
}

.red:hover, .green:hover, .yellow:hover{
  stroke: #4B94BC;
  fill: #4B94BC;
} 
 
.goIcon:hover{
  stroke: #56C4C0;
}

.continuar {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  align-items: flex-start;
  padding: 5%;
}

.goIcon{
  stroke: #252131;
  display: flex;
  flex:wrap;
  align-items: flex-end;
  justify-content: flex-end;
  width: 70%;
  height: 70%;
}
  
.dark{
  filter: brightness(0%);
  opacity: 50%;
}
#nextSticker{
  height: 20%;
  width: 20%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 10%;
}

.starFilled{
  stroke: #252131;
  fill:#252131;
}


@media screen and (max-width: 1050px) {
#nextSticker{
  display: none;
}

#progresso{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10%;
}

}

/* de 727 para baixo*/
@media screen and (max-width: 725px) {
  #nextSticker{
    display: none;
  }
  
  #progresso{
    margin-top: -5%;
  }

  .container_bar{
    margin-top: 10%;
  }
  
  #barra{
    margin-left: 6.5%;
    width: 86.5%;
    height: 100%;
  }
  .aLvl, .green, .yellow, .red{
    margin-top: 2%;
    width: 100%;
    height: 100%;
  }
  .layer2{
    width: 87%;
    margin-left: 6%;
  }
  
  }