@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
    }
:root {
		--body: #fafafa;
		--text-default: #1d1d1f;
		--text-secondary: #86868b;
		--corPrincipal: #013f88;
		--corPrincipal2: #4165b5;
		
		--corIPCA: #7a9935;
		--corIPCAHover: #71892f;
		
		--corPoupanca: #3065a4;
		--corPoupancaHover: #24527f;
		
		--corPrefixado: #16375d;
		--corPrefixadoHover: #0e2944;
		
		--corTR: #2b8ba5;
		--corTRHover: #247284;
	}
	
	
	
	#modalResultado h3{
		max-width: 400px;
    	margin: 47px auto 15px;
	}
	#modalResultado img{
		max-width: 800px;
		width: 100%;
		margin: 46px auto 47px;
	}
	#modalResultado{
		color: #5d5d5d;
		text-align: center;
	}
	#IPCAPOUPANCA, #TRPRE{
		display: none;
	}
	.smallQuestion{
		font-size: 20px !important;
		max-width: calc(100% - 156px);
		line-height: 23px;
		margin-bottom: 20px;
	}
	 #pergunta2, #pergunta3, #pergunta4, #pergunta5, #pergunta6{
		display: none;
	}
	.areaBotoes{
		position: absolute;
		right: 20px;
		top: 20px;
	}
	.marcaPOUPEX{
		position: absolute;
		top: 58px;
		left: 50px;
		max-width: 236px;
	}

	.marcaPOUPEX img{
		max-width: 100%;
	}
	.botaoTopo{
		float: right;
		cursor: pointer;
		background: var(--corPrincipal2);
		color: #fff;
		font-size: 14px;
		padding: 10px 14px;
		border-radius: 30px;
		margin-right: 10px;
	}
	#h3Intro{
		font-size: 42px;
		letter-spacing: -1px;
		color: var(--corPrincipal);
		line-height: 47px;
	}
	#h4Intro{
		margin-top: 23px;
	}
	#introducao .btn_enviarResposta{
		margin-top: 23px;
	}
.btn_enviarResposta:hover{
	color: #fff;
	text-decoration: none;
}
	.botaoTopo:hover{
		background: var(--corPrincipal);
		color: #fff;
		text-decoration: none;
	}
	#scrollable{
		height: 100vh;
	}
	#areaUtil{
		position: relative;
	}
	body{
		margin: 0;
		font-family: Arial;
	}
	#TRPE{
		text-align: center;
	}
	.indexador {
		color: #fff;
		background: var(--corPrincipal2);;
		border: 2px solid #fff;
		display: inline-block;
		padding: 15px 20px;
		margin: 10px;
		border-radius: 100px;
		font-weight: bold;
		cursor: pointer;
	}
	.btn_enviarResposta{
		display: inline-block;
		color: #fff;
		cursor: pointer;
		font-size: 23px;
		background: var(--corPrincipal2);
		border: none;
		padding: 11px 35px;
		border-radius: 49px;
		margin-top: 40px;
	}
	.btn_enviarResposta:active, .btn_enviarResposta:focus, .btn_enviarResposta:visited, .btn_enviarResposta:checked{
		border: none;
		outline:0;
	}
	.btn_enviarResposta:disabled{
		background: #ccc;
	}
	#introducao{
		opacity: 0;
		position:absolute; 
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
	}
	.areaPergunta{
		position:absolute; 
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		display: none;
	}
	.labelForCheckbox{
		font-size: 27px;
		color: var(--corPrincipal);
		float: left;
		margin-left: 20px;
		margin-top: 5px;
	}
		
		.opcaoResposta{
			float: none;
			width: 100%;
			display: inline-block;
		}
		.containerPergunta{
			float: right;
    width: calc(100% - 60px);
    display: inline-block;
		}
		.pergunta{
			margin-top: 40px;
		}
		.enunciadoPergunta{
			margin-bottom: 30px;
			font-size: 26px;
			color: #5d5d5d;
			line-height: 32px;
		}
	.enunciadoPergunta .small{
		font-size: 12px;
	}
		.numeroPergunta{
			color: #5d5d5d;
			font-size: 27px;
			font-weight: bold;
			border: 3px solid #ccc;
			width: 45px;
			height: 45px;
			border-radius: 45px;
			text-align: center;
			padding: 0px;
			display: inline-block;
		}
		h3{
			font-size: 28px;
			letter-spacing: -1px;
			color: var(--corPrincipal);
			line-height: 33px;
		}
		h4{
			font-size: 19px;
			letter-spacing: -0px;
			color: var(--corPrincipal);
		}
		.areaFoto{
			background: url("../img/casal.jpg");
			background-size: cover;
			background-position: center center;
			width: 100%;
			height: 100vh;
		}

		.areaPergunta{
			max-width: 472px;
			width: 100%;
		}
		
#areaNewsletter .container{
         position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
         line-height: 16px;
    }
    #btn-enviarContatoLateral {
        background: #3054a6;
        padding: 12px 22px;
        font-size: 14px;
        margin-bottom: 23px;
        width: 100%;
        color: #fff;
        height: 39px;
    }
#email {
    margin-top: -1px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    height: 41px !important;
    color: #5d5d5d;
    border: 1px solid #ccc;
    margin-right: 0;
    float: right;
    padding-left: 21px;
}
#contChoice input[type=text], #contChoice input[type=email]{
		    width: 100%;
			font-size: 14px;
			color: #5d5d5d;
			padding: 16px 24px;
			border: 1px solid #ccc;
			max-width: 600px;
			margin: 2px auto;
			border-radius: 6px;
	}
	.conteudosInteresse{
        font-size: 16px;
		max-width: 600px;
		margin: 32px auto;
	}


@media (prefers-color-scheme: light) {
	:root {
		--body: #fafafa;
		--text-default: #1d1d1f;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--body: #161616;
		--text-default: #f5f5f7;
	}
}

/* Checkbox Styles */
.pergunta input[type="checkbox"] {
	float: left;
	-webkit-appearance: none;
	outline: none;
	position: relative;
	height: 2.5rem;
	width: 5rem;
	border: 5px solid var(--body);
	border-radius: 2.5rem;
	cursor: pointer;
	box-shadow: 4.5px 4.5px 8px rgba(189, 189, 189, 0.6), -4.5px -4.5px 8px rgba(255, 255, 255, 0.5), inset 5px 5px 7.5px -5px #c3c3c3, inset -5px -5px 7.5px -5px #fff;
  /* Toggle Indicator */
  /* Label */
  /* Checked Styles */;
}

@media (prefers-color-scheme: light) {
	.pergunta input[type="checkbox"] {
		box-shadow: 4.5px 4.5px 8px rgba(189, 189, 189, 0.6), -4.5px -4.5px 8px rgba(255, 255, 255, 0.5), inset 5px 5px 7.5px -5px #c3c3c3, inset -5px -5px 7.5px -5px #fff;
	}
}

@media (prefers-color-scheme: dark) {
	.pergunta input[type="checkbox"] {
		box-shadow: -4px -2px 4px 0px rgba(255, 255, 255, 0.05), 4px 2px 6px 0px rgba(0, 0, 0, 0.5), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.05), inset 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
	}
}

.pergunta input[type="checkbox"]::before {
	content: "";
	height: 1.526rem;
	width: 1.526rem;
	background-color: var(--body);
	position: absolute;
	margin: auto;
	top: 0;
	left: 0.4687rem;
	bottom: 0;
	border-radius: 50%;
	box-shadow: 3.5px 3.5px 7.5px #c3c3c3, 4.5px 4.5px 8px rgba(189, 189, 189, 0.6);
	transition: 0.15s;
}

@media (prefers-color-scheme: light) {
	.pergunta input[type="checkbox"]::before {
		box-shadow: 3.5px 3.5px 7.5px #c3c3c3, 4.5px 4.5px 8px rgba(189, 189, 189, 0.6);
	}
}

@media (prefers-color-scheme: dark) {
	.pergunta input[type="checkbox"]::before {
		box-shadow: -4px -2px 4px 0px rgba(255, 255, 255, 0.05), 4px 2px 6px 0px rgba(0, 0, 0, 0.5);
	}
}

.pergunta input[type="checkbox"]::after {
	content: "";
	position: absolute;
	font-size: 1.625rem;
	top: 1.25rem;
	right: 1.5625rem;
	color: var(--text-secondary);
	font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 400;
	letter-spacing: 0.004em;
}

.pergunta input[type="checkbox"]:checked {
	background: #0071e3;
}

@media (prefers-color-scheme: light) {
	.pergunta input[type="checkbox"]:checked {
		box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #0047b9, inset -10px -10px 15px -10px #0047b9;
	}
}

.pergunta input[type="checkbox"]:checked::before {
	left: 2.656rem;
	box-shadow: none;
}

.pergunta input[type="checkbox"]:checked::after {
	content: "";
	left: 1.5625rem;
	color: #f5f5f7;
}
  
	.bgPrefixado{
		background: var(--corPrefixado);
	}
	.bgPrefixado:hover{
		background: var(--corPrefixadoHover);
	}
	
	.bgTR{
		background: var(--corTR);
	}
	.bgTR:hover{
		background: var(--corTRHover);
	}
	
	
	.bgIPCA{
		background: var(--corIPCA);
	}
	.bgIPCA:hover{
		background: var(--corIPCAHover);
	}
	
	.bgPoupanca{
		background: var(--corPoupanca);
	}
	.bgPoupanca:hover{
		background: var(--corPoupancaHover);
	}
	@media screen and (max-width: 900px) {
		.container_foto{
			display: none;
		}
		.pergunta .btn_enviarResposta{
			
			left: 60px;
		}
		.btn_enviarResposta{
    		position: relative;
		}
	}