#conteudo1 { 
background-color: white;
}
@font-face {font-family: 'fonte';src: url('../fonte/CHICKEN Pie.ttf')/*Para navegadores Internet Explorer*/;
font-weight: normal;font-style: normal;}
@font-face {font-family: 'fonte';src: url('../fonte/CHICKEN Pie.ttf') /*Para os demais navegadores*/;font-weight: normal;font-style: normal;}

.titulo{
	font-family: 'fonte';
	font-size: 46px;
	color: #F74F23;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 16px;
}

/* Escondemos o radio original */
input[type=radio] {
    display: none;
}
input[type=checkbox] {
    display: none;
}
/* Usamos o pseudo-element :before para recriar o novo radio */
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #48d3b9;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha5:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha6:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha14:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha15:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha18:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha19:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha24:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha25:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha28:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.escolha29:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #FFEB8A;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.subtitulo3{
    font-family: 'fonte';
    font-size: 36px;
    color: black;
    text-align: center;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
}
/* CSS Responsavel por definir o estilo para radio Checkado */
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
input[type=checkbox]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
.numero_etapa{
	font-size: 120px;
	color: white;
	padding-right: 1%;
	padding-left: 0%;
	font-family: 'fonte';
	padding-right: 2%;
}
.faixa {
    background-color: white;
    width: 100%;
    height: 17px;
    /* position: absolute; */
    /* top: 70px; */
    margin-bottom: 4%;
}
.faixa3 {
    background-color: #48D3B9;
    width: 100%;
    height: 17px;
}
.footer2{
	width: 100%;
	text-align: center;
	background-color: #48D3B9;
	padding: 2%;
}
.subtitulo{
	font-family: 'fonte';
	font-size: 36px;
	color: #F74F23;
}
.livro{
	width: 12%;
	padding-bottom: 2%;
}
.chapeu{
	width: 12%;
	padding-bottom: 2%;
}
.subtitulo2{
	font-family: 'fonte';
	font-size: 36px;
	color: black;
	padding-top: 8%;
}
.arte01{
	width: 100%;
}
.comeco{
	display: flex; justify-content: center; align-items: center; position: relative;
}
.intro{
	color: white; 
	text-align: left;
}
.botao_vamosla, .botao_instrucao, .botao_voltar, .botao_voltar2{
	cursor: pointer;
}
.circulo{
	width: 20%;
	height: 20%;
	border-radius: 50%;
	background-color: transparent;
	opacity: 0.5;
	position: absolute;
	cursor: pointer;
}
.elemento1{
  top: 27%;
  left: -1%;
}
.elemento2{
  top: 13%;
  left: 14%;
}
.elemento3{
  top: 6%;
  left: 33%;
}
.elemento4{
  top: 6%;
  left: 55%;
}
.elemento5{
  top: 17%;
  left: 75%;
}
.elemento6{
  top: 36%;
  left: 80%;
}
.elemento7{
  top: 55%;
  left: 72%;
}
.elemento8{
  top: 54%;
  left: 49%;
}
.elemento9{
  top: 37%;
  left: 32%;
}
.elemento10{
  top: 47%;
  left: 15%;
}
.elemento11{
  top: 66%;
  left: 10%;
}
.elemento12{
  top: 80%;
  left: 24%;
}
.container-fluid{position:relative;}
#coberturas1 {
    background-color: white;
    width: 50%;
    height: 100%;
}
#coberturas2 {
    background-color: #48D3B9;
    width: 50%;
    height: 100%;
    
    /* código para mostrar apenas 50% da div Cinzenta (coberturas1) */
    position:absolute;
    top:0px; /* muda este valor para "0" - Isto foi apenas mostrar o que está a acontecer por detrás da div */
    right:0%; /* 25% significa metade ( que neste caso será 50%) do tamanho de ambas as divs */
}
#coberturas3 {
    background-color:  #FFEB8A;;
    width: 50%;
    height: 100%;
    
    /* código para mostrar apenas 50% da div Cinzenta (coberturas1) */
    position:absolute;
    top:0px; /* muda este valor para "0" - Isto foi apenas mostrar o que está a acontecer por detrás da div */
    right:0%; /* 25% significa metade ( que neste caso será 50%) do tamanho de ambas as divs */
}
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
.botao_instrucao{
	font-size: 14px;
	cursor: pointer;
}
.imprimir{
	font-size: 14px;
	cursor: pointer;
}
@media (max-width: 475px) {
  .container-fluid{position:relative;}
#coberturas1 {
    background-color: white;
    width: 100%;
    height: 100%;
}
#coberturas2 {
    background-color: #48D3B9;
    /* width: 50%; */
    /* height: 100%; */
    position: relative;
    /* top: 0px; */
    /* right: 0%; */
}
#coberturas3 {
    background-color: #FFEB8A;
    /* width: 50%; */
    /* height: 100%; */
    position: relative;
    /* top: 0px; */
    /* right: 0%; */
}
  .numero_etapa{
	font-size: 90px;
	color: white;
	padding-right: 1%;
	padding-left: 0%;
	font-family: 'fonte';
	padding-right: 8%;
}
  
.faixa2{
	background-color: white;
	width: 60%;
	height: 17px;
	position: absolute;
    top: 92px;
}
  .titulo{
	font-family: 'fonte';
	font-size: 30px;
	color: #f74f23;;
}
.subtitulo{
	font-family: 'fonte';
	font-size: 30px;
	color: #f74f23;;
}
.subtitulo2{
	font-family: 'fonte';
	font-size: 23px;
	color: black;
	padding-top: 8%;
}
  .intro{
	color: white; 
	text-align: center;
}
}