body {
background-color: #fff;
}
header {
z-index: 9999;
}
img {
max-width: 100%;
height: auto;
}
section.cta-simulador {
padding: 4rem 0;
background-color: purple;
}
section.cta-simulador .title {
font-size: 4rem;
font-weight: 700;
color: #fff;
}
.btn-simples, a.btn-simples {
display: inline-block;
font-style: normal;
font-weight: 800;
font-size: 1rem;
line-height: 1rem;
text-align: center;
border-radius: 30px;
border: solid 1px transparent;
color: #fff;
padding: 0 3rem;
text-align: center;
transition: all .35s;
}
.btn-simples.btn-colorido, a.btn-simples.btn-colorido {
color: #024EA2;
border: solid 1px #024EA2;
}
.btn-simples.btn-colorido:hover, a.btn-simples.btn-colorido:hover {
background-color: #024EA2;
color: #fff;
}
.tab .container {
background-color: #fff;
padding-top: 35px;
padding-bottom: 35px;
border-radius: 20px;
margin-top: 30px;
}
.container-diff {
max-width: 95%;
}
.title-b {
color: #7827de;
}
.modal-body .input-modal {
width: 100%;
border-radius: 4px;
margin-top: 4px;
border: none;
padding: 3px;
}
.modal-body .modal-enviar {
border: none;
background: #7827de;
color: #fff;
font-weight: bold;
width: 100%;
padding: 10px 0;
border-radius: 3px;
cursor: pointer;
}
.mt-20 {
margin-top: 20px;
}
.close {
background: none;
border: none;
color: #fff;
cursor: pointer;
float: right;
font-size: 1rem;
position: fixed;
}
.ul-check li {
padding: 0;
list-style-type: initial;
margin-left: 25px;
margin-bottom: 0 !important;
line-height: 1.6;
font-size: 1.5rem;
}
.label-options label {
min-width: 200px;
padding: 15px;
transition: all 0.35s;
background: transparent;
border: 1px solid #11A8E0;
border-radius: 5px;
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 18px;
text-align: center;
text-transform: uppercase;
color: #1A2C69;
}
.label-options label:hover {
cursor: pointer;
background: #11A8E0;
color: #fff;
}
.label-options input:checked + label {
background: #11A8E0;
color: #fff;
}
.titulo-secao h1 {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px;
color: #329B9D;
}
.descritivo {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #616161;
}
@media (max-width: 767px) {
.modal-body .modal-enviar {
background: #7827de;
color: #fff;
font-weight: bold;
width: 100%;
padding: 10px 0;
border-radius: 3px;
}
.simulador-wrapper {
min-height: auto;
}
.modal-content {
padding: 30px 0;
}
.flex-mobal-logo {
display: flex;
justify-content: center;
}
}
.modal-close {
width: 80px;
cursor: pointer;
position: absolute;
bottom: 18%;
border-radius: 2px;
border: none;
background: #fe811a;
color: #fff;
left: calc(50% - 30px);
border-radius: 4px;
}
.simulador-wrapper {
padding-bottom: 60px;
justify-content: center;
flex-direction: column;
} input.invalid {
background-color: #ffdddd;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.loader {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
inset: 0px;
z-index: 9999999;
background: rgba(255, 255, 255, 0.7);
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #0067dc;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #0067dc transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .tab {
display: none;
color: #024EA2;
animation: fadeEffect 1s;
flex-direction: column;
padding: 0 0 40px 0;
}
.tab.tab-thank-you {
position: relative;
justify-content: center;
color: #329B9D;
}
.tab.tab-thank-you .title-inside-tab {
color: #fff;
font-weight: 700;
}
.tab.tab-thank-you p {
font-size: 18px;
}
.tab .title-inside-tab {
font-size: 2.8rem;
line-height: 1.1;
margin-bottom: 2.5rem;
margin-top: 2rem;
}
.tab h1 {
font-weight: bold;
}
.tab .label-2 {
display: block;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px; text-align: center;
color: #6A6D75;
}
.tab .custom-border-select {
border-bottom: 1px solid #D6D6D6;
padding-bottom: 30px;
margin-bottom: 30px;
}
.tab .custom-select {
min-width: 200px;
appearance: none;
height: 45px;
padding: 0 1.5rem 0 1rem;
background: #F5F6FA;
border-radius: 10px;
border: none;
outline: none;
border: 1px solid transparent;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #000020;
}
.tab .custom-select.invalid {
border: 1px solid #024EA2;
}
.tab .select-wrapper {
position: relative;
display: inline-flex;
justify-content: space-between;
flex-direction: column;
}
.tab .select-wrapper label {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
padding-left: 10px;
color: #6A6D75;
}
.options label {
} 
.tab .select-wrapper + .select-wrapper {
margin-left: 1rem;
}
.tab .select-wrapper:after {
content: "";
width: 21px;
height: 18px;
background: url(//construtoraimpacto.com.br/wp-content/themes/impacto/assets/css/img/simulador/triangulo.svg) center;
background-size: cover;
pointer-events: none;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.tab .button-range {
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
display: flex;
align-items: center;
text-align: center;
color: #63B5B7;
}
.tab .slider {
-webkit-appearance: none;
appearance: none;
height: 7px;
border-radius: 5px;
background: #F5F6FA;
outline: none;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
flex: 1;
margin: 0 10px;
border-radius: 5px;
}
.tab .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.tab .slider::-webkit-range-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #63B5B7;
border: 1px solid #ECECEC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.tab .slider::-moz-range-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.tab .label-basic {
font-family: 'Circular Std';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #000000;
}
.tab .wrapper-gray {
background: #F5F6FA;
border-radius: 10px;
height: 50px;
display: flex;
align-items: center;
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #11A8E0;
padding-left: 15px;
}
.tab .wrapper-gray input[type="text"],
.tab .wrapper-gray input[type="number"],
.tab .wrapper-gray input[type="email"] {
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #11A8E0;
text-align: left;
background-color: transparent;
border: 0;
position: relative;
width: 100%;
height: 100%;
}
.tab .wrapper-gray input[type="text"]::placeholder,
.tab .wrapper-gray input[type="email"]::placeholder,
.tab .wrapper-gray input[type="number"]::placeholder {
background-color: transparent;
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #11A8E0;
border: 0;
}
.tab .wrapper-gray input[type="text"]::-webkit-outer-spin-button,
.tab .wrapper-gray input[type="email"]::-webkit-outer-spin-button,
.tab .wrapper-gray input[type="number"]::-webkit-outer-spin-button,
.tab .wrapper-gray input[type="text"]::-webkit-inner-spin-button,
.tab .wrapper-gray input[type="email"]::-webkit-inner-spin-button,
.tab .wrapper-gray input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.tab .wrapper-gray input[type="text"]:focus,
.tab .wrapper-gray input[type="email"]:focus,
.tab .wrapper-gray input[type="number"]:focus {
box-shadow: none;
} .step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
} .step.active {
opacity: 1;
} .step.finish {
background-color: #4caf50;
}
section.steps img {
width: 440px;
max-width: 100%;
}
.wrapper-hands {
position: relative;
}
.wrapper-hands .hands-link {
position: absolute;
top: 0;
bottom: 0;
background-image: linear-gradient(138deg,rgba(245, 245, 244, 0.509804), rgba(224, 227, 237, 0.160784));
opacity: 0.4;
transition: 250ms ease-in-out;
z-index: 10;
}
.wrapper-hands .hands-link:hover,
.wrapper-hands .hands-link.active {
opacity: 1;
background: none;
}
.wrapper-hands .yes {
left: 0;
width: 53%;
}
.wrapper-hands .no {
right: 0;
width: 47%;
}
.wrapper-choice {
position: relative;
}
.wrapper-choice .hands-link {
position: absolute;
background-color: #f5f5f4;
opacity: 0.4;
transition: 250ms ease-in-out;
left: 0;
right: 0;
height: 50%;
}
.wrapper-choice .hands-link:hover,
.wrapper-choice .hands-link.active {
opacity: 1;
background: none;
}
.wrapper-choice .yes {
top: 0;
}
.wrapper-choice .no {
bottom: 0;
}
.container-background-congrats .row {
position: relative;
z-index: 2;
}
.container-background-congrats .thanks-img {
position: absolute;
top: 0;
left: 0;
}
.btn-gradient {
position: relative;
display: block;
border-radius: 30px;
padding: 8px;
text-align: center;
border: 5px solid #1e797a;
background-color: #329B9D;
width: 70%;
font-size: 20px;
color: #fff;
font-weight: 700;
margin: auto;
}
.btn-gradient:after {
content: "";
background: #329B9D;
background: linear-gradient(90deg,#329B9D 0%,#1e7274 100%);
border-radius: inherit;
top: 0;
bottom: 0;
left: 0;
width: 0px;
transition: width 5s ease-in-out;
position: absolute;
}
.btn-gradient.active.btn-gradient:after {
width: 100%;
animation: fullWidth 5s;
}
@keyframes fullWidth {
from {
width: 0%;
}
to {
width: 100%;
}
}
.wrapper-text {
max-width: 235px;
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
.wrapper-result {
font-size: 1.3rem;
}
.wrapper-result .first,
.wrapper-result .last,
.wrapper-result .second,
.wrapper-result .third {
width: 352px;
max-width: 100%;
position: relative;
display: inline-block;
}
.wrapper-result .first img,
.wrapper-result .last img,
.wrapper-result .second img,
.wrapper-result .third img {
transform: rotate(90deg);
}
.wrapper-result .first img,
.wrapper-result .last img {
height: 310px;
}
.wrapper-result .wrapper-text {
transform: translate(-50%, -50%);
top: 50%;
}
.wrapper-result .second,
.wrapper-result .last {
transform: translateX(-47.5%);
}
.wrapper-result .second img,
.wrapper-result .third img {
max-width: none;
max-height: 100%;
height: 189px;
width: auto;
}
.wrapper-result .lasts-wrapper {
margin-top: -121px;
}
.tab.last-tab .btn-padrao {
position: relative;
}
.tab.last-tab .btn-padrao:after {
animation: shadow-pulse-2 1s infinite;
content: "";
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
}
.newsletter {
margin: 0 !important;
}
.timeline {
height: 100%;
position: relative;
}
.msg-resultado {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 44px; text-align: center;
color: #329B9D;
} .timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #0051ae;
top: 0;
bottom: 0;
left: 50%;
}
.content {
padding: 15px;
background-color: transparent;
position: relative;
}
.content h2 {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #616161;
}
.content p {
font-size: 19px;
padding: 0 20px;
} .left {
padding: 0px 20px 0px 10px;
left: 0;
} .right {
padding: 0px 10px 0px 20px;
} .time {
position: relative;
background-color: inherit;
width: 51%;
min-height: 70px;
margin-bottom: 50px;
}
.time.left .content::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -27px;
background-color: #006ae4;
border: 4px solid #0051ae;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.time.right .content::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
left: -21px;
background-color: #006ae4;
border: 4px solid #0051ae;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.wrapper-ranger-system .custom-label {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #000020;
}
.wrapper-ranger-system .valor-saida {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
text-align: center;
color: #929292;
}
.wrapper-ranger-system .valor-saida .output-renda {
color: #000020;
}
.titulo-etapa {
display: flex;
}
.titulo-etapa h1 {
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 48px;
color: #1A2C69;
display: flex;
}
.titulo-etapa .box-num {
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #11A8E0;
border-radius: 50%;
width: 75px;
height: 55px;
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
color: #FFFFFF;
}      .btn-padrao,
input[type=submit],
.modal .btn-padrao {
background: #11A8E0;
border-radius: 40px;
color: #fff;
border: transparent;
min-width: 160px;
padding: 15px 10px;
font-family: 'Circular Std';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 13px;
text-align: center;
text-transform: uppercase;
}
.btn-padrao:focus,
.btn-padrao:hover {
background-color: #0e84af;
color: #fff;
}
.btn-padrao:disabled {
opacity: 0.6;
}
.go-back {
background: transparent;
border-radius: 40px;
color: #11A8E0;
border: solid 2px #11A8E0;
min-width: 160px;
padding: 15px 10px;
font-family: 'Circular Std';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 13px;
text-align: center;
text-transform: uppercase;
margin-left: 10px;
}
.last-tab .btn-padrao {
width: 100% !important;
cursor: pointer;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.box .title-box {
color: #fff;
font-family: 'Circular Std';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.box .price {
color: #fff;
font-family: 'Circular Std';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 28px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 8px;
background-color: #11A8E0;
width: 100%;
height: 100%;
padding: 15px 0;
min-height: 110px;
} .modal .btn-upload,
.modal input[type=email],
.modal input[type=tel],
.modal input[type=text],
.modal select,
.modal textarea {
width: 100%;
appearance: none;
height: 45px;
padding: 0 1.5rem 0 1rem;
background: #F5F6FA;
border-radius: 10px;
border: none;
outline: none;
border: 1px solid transparent;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #000020;
} @media screen and (max-width: 600px) { .timeline::after {
left: 31px;
} .time {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.time.left .content::after {
right: inherit;
left: -49px;
}
.time.right .content::after {
left: -49px;
}      }
@media (min-width: 768px) and (max-width: 991px) {
.wrapper-result .first,
.wrapper-result .last,
.wrapper-result .second,
.wrapper-result .third {
width: 345px;
}
}
@media (max-width: 992px) {
h1.page-title {
font-size: 34px;
line-height: 38px;
}
main {
margin-top: 50px;
}
.wrapper-gray {
width: 100%;
}
.label-options label {
min-width: auto;
padding: 10px 5px;
font-size: 11px;
line-height: 18px;
}
.titulo-etapa h1 {
font-size: 32px;
line-height: 36px;
}
}
@media (max-width: 767px) {
body.simulador-active main {
margin-top: 50px !important;
}
body.simulador-active .simulador-wrapper {
padding-top: 0;
justify-content: flex-start;
}
.simulador-wrapper {
min-height: auto;
}
section.initial  .img-break {
width: 250px;
margin: 0 auto 10px auto;
display: block;
}
.tab {
flex-direction: column-reverse;
padding-bottom: 40px;
}
.tab.last-tab .title-inside-tab {
margin-top: 6rem;
}
.tab .title-inside-tab {
font-size: 3rem;
}
.steps img {
max-width: 90% !important;
display: block;
margin: auto;
}
.wrapper-result .first,
.wrapper-result .last,
.wrapper-result .second,
.wrapper-result .third {
transform: none;
}
.wrapper-result .second,
.wrapper-result .third {
min-height: 352px;
margin-top: -61px;
}
.wrapper-result .last {
margin-top: -102px;
}
.lasts-wrapper {
display: flex;
flex-direction: column;
}
.lasts-wrapper .last {
order: 1;
min-height: 279px;
}
.lasts-wrapper  .third {
order: 2;
}
.last-tab  .btn-modal {
padding: 0 2rem;
}
.titulo-etapa .box-num {
margin-right: 10px;
width: 75px;
height: 36px;
font-size: 20px;
line-height: 28px;
}
}
@media (max-width: 500px) {
.tab .container {
margin-top: 0;
}
.tab .titulo-secao {
margin-top: 5px;
margin-bottom: 10px;
}
.titulo-etapa h1 {
font-size: 24px;
line-height: 24px;
}
}