body {
background-color: #fff;
}
main {
background-image: url(//uniaoconstrucoes.com.br/wp-content/themes/alfama/assets/img/bg-simulador.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#regForm {
padding: 40px 0;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.descritivo {
color: #797979;
font-family: 'Roboto';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 110%; margin-bottom: 15px;
}
.titulo-secao p {
color: #F58B29;
font-family: 'Roboto';
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 110%; text-transform: uppercase;
margin-bottom: 15px;
}
.titulo-secao h1 {
color: #256386;
font-family: 'Montserrat';
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 110%; margin-bottom: 20px;
text-transform: none;
}
.go-back,
.btn-padrao {
color: #266087;
text-align: center;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
background-color: transparent;
border: solid 1px #F58B29;
border-radius: 67px;
padding: 15px 50px;
text-decoration: none;
}
.btn-padrao:disabled {
opacity: 0.5;
}
.go-back {
border-color: #266087;
}
.custom-select {
appearance: none;
height: 56px;
padding: 12px;
background-color: #FFFFFF;
border-radius: 5px;
border: none;
outline: none;
border: 1px solid transparent;
color: #266087;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
min-width: 160px;
position: relative;
}
.select-wrapper::after {
content: "";
display: block;
width: 14px;
height: 10px;
background: url(//uniaoconstrucoes.com.br/wp-content/themes/alfama/assets/img/simulador-seta-select.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
position: absolute;
z-index: 10;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.wrapper-ranger-system .custom-label {
color: #797979;
text-align: center;
font-family: 'Roboto';
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 110%; text-align: center;
width: 100%;
margin-top: 25px;
}
.wrapper-ranger-system .valor-saida {
appearance: none;
border: none;
outline: none;
background: none;
border-bottom: 2px solid #DDD6D6;
margin-top: 1.5rem;
padding: 0 1.5rem;
width: 100%;
color: #266087;
text-align: center;
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding-bottom: 10px;
}
.wrapper-ranger-system .button-range {
width: 32px;
height: 32px;
line-height: 28px;
display: inline-flex;
justify-content: center;
border-radius: 50%;
background-color: #F58B29;
border: none;
outline: none;
font-size: 35px;
color: #ffffff;
cursor: pointer;
}
.wrapper-ranger-system label {
color: #797979;
font-family: 'Roboto';
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 110%;
}
.tab .wrapper-number-range {
width: 100%;
border-radius: 5px;
background: #FFF;
padding: 0.7rem 1rem;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
color: #266087;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tab input[type="number"]{
width: 100%;
background: none;
border: none;
outline: none;
margin-left: 10px;
color: #266087;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tab input[type="number"]::placeholder,
.tab input[type="text"]::placeholder {
color: #256386;
font-size: inherit;
margin-left: 10px;
}
.tab input[type="number"] {
-moz-appearance: textfield;
}
.tab input[type="number"]::-webkit-outer-spin-button,
.tab input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.label-options label {
width: 100%;
transition: all 0.35s;
display: flex;
flex-direction: column;
text-align: center;
padding: 30px 10px;
border-radius: 5px;
background: #266087;
height: 100%;
}
.label-options label strong {
color: #FFF;
text-align: center;
font-family: 'Montserrat';
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.label-options label span {
color: #FFF;
text-align: center;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.label-options label:hover {
cursor: pointer;
background-color: #F58B29;
color: #fff;
}
.label-options input:checked + label {
background-color: #F58B29;
color: #fff;
}
.resultado .msg-resultado {
color: #256386;
text-align: center;
font-family: 'Montserrat';
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 110%; }
.resultado .box {
border-radius: 10px;
background: linear-gradient(1deg, #0C344B 0%, #266087 100%);
padding: 40px 35px;
}
.resultado .box .title-box {
color: #FFF;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 110%; margin-bottom: 20px;
}
.resultado .box .price {
color: #FFF;
font-family: 'Montserrat';
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 110%; margin-left: 10px;
}
.resultado .box .price strong {
color: #FFF;
font-family: 'Montserrat';
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 110%; }
.modal .content h2 {
color: #797979;
font-family: 'Roboto';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 110%; }
.bl-imoveis {
position: relative;
}
.etapa-empreendimento .card-empreendimento {
border: none;
height: 100%;
}
.etapa-empreendimento .card-empreendimento .box-img {
height: 190px;
}
.etapa-empreendimento .card-empreendimento .box-info {
padding: 15px 10px 25px 10px;
}
.etapa-empreendimento .label-options label {
padding: 10px;
height: 100%;
background-color: transparent;
}
.etapa-empreendimento .label-options label:hover {
cursor: pointer;
background-color: #488cbc;
}     
.etapa-empreendimento .label-options input:checked + label {
background-color: #266087;
}
.etapa-empreendimento .card-empreendimento .box-info h2 {
font-size: 20px;
line-height: 22px;
}
.etapa-empreendimento .card-empreendimento .box-info p {
margin-bottom: 0;
font-size: 15px;
line-height: 16px;
}
.etapa-empreendimento .custom-nav button {
margin: 0;
width: auto;
background-color: transparent;
padding: 0;
position: absolute;
top: calc(50% - 24px);
z-index: 2;
}
.etapa-empreendimento .custom-nav button.owl-prev {
left: -15px;
}
.etapa-empreendimento .custom-nav button.owl-next {
right: -15px;
}
.etapa-empreendimento .owl-carousel .owl-stage {
display: flex;
}
.modal {
flex-direction: inherit;
align-content: center;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.modal .btn-simples {
padding: 1rem 3rem;
}
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal textarea,
.modal .btn-upload,
.modal select {
background-color: #eee !important;
border-radius: 5px;
padding: 12px;
border: none;
width: 100%;
appearance: none;
color: #266087;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.modal input[type="text"]::placeholder,
.modal input[type="email"]::placeholder,
.modal input[type="tel"]::placeholder,
.modal textarea::placeholder,
.modal .btn-upload::placeholder,
.modal select::placeholder {
color: #266087;
}
.modal .btn-colorido {
background-color: #266087;
color: #fff;
}
.modal .btn-colorido:hover {
background-color: #266087;
cursor: pointer;
}
.btn-close {
width: 2px !important;
height: 2px !important;
}
.modal-header {
padding: 0 15px;
}
.modal-header .close {
padding: 0.5rem !important;
position: relative;
}
.modal-header .close span {
font-size: 24px !important;
color: #444 !important;
}
.modal-content {
font-size: 1.7rem !important;
border-radius: 2px;
background: #ffffff;
min-height: 50vh;
}
.modal-content article {
margin: 50px 20px;
}
.modal-content {
font-size: 1.7rem !important;
border-radius: 2px;
background: #fff !important;
min-height: 30vh !important;
border-radius: 26px !important;
padding: 30px 15px;
overflow: auto !important;
}
.modal-title {
color: #256386;
line-height: 1;
font-weight: bold;
font-size: 23px;
}
.title-modal {
display: inline-block;
color: #256386 !important;
font-size: 1.3rem;
}
.title-b {
color: #256386;
}
.modal-body {
padding: 0 1rem 1rem 1rem;
}
.modal-body .input-modal {
width: 100%;
border-radius: 4px;
margin-top: 4px;
border: none;
padding: 3px;
}
.modal-body .modal-enviar {
border: none;
background: #256386;
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;
}
@media (max-width: 767px) {
.modal-body .modal-enviar {
background: #256386;
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;
}
@media (max-width: 500px) {
.modal-close {
bottom: 15%;
}
}
.text-footer {
padding: 6.5rem 0;
line-height: 1.4;
font-weight: 700;
font-size: 2.2rem;
}
.simulador-wrapper {
padding-bottom: 60px;
justify-content: center;
flex-direction: column;
}  @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 #256386;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #256386 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;
animation: fadeEffect 1s;
flex-direction: column;
padding: 0 0 40px 0;
}
.tab.tab-thank-you {
position: relative;
justify-content: center;
color: #256386;
}
.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;
}
p.msg-resultado {
font-size: 24px;
line-height: 28px;
}
.tab .custom-select.invalid {
border: 1px solid #256386;
}
.tab .select-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.tab .select-wrapper + .select-wrapper {
margin-left: 1rem;
}
.tab .slider {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 5px;
background: #c5c5c5;
outline: none;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
flex: 1;
}
.tab .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #256386;
cursor: pointer;
}
.tab .slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #256386;
cursor: pointer;
} .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%;
}
#svg-map a {
text-decoration: none;
}
#svg-map path {
fill: rgba(177, 29, 30, 0.5);
stroke: #fff;
transition: 250ms;
}
#svg-map a:hover {
cursor: pointer;
text-decoration: none;
}
#svg-map a:hover text,
#svg-map a:hover .circle {
opacity: 1;
}
#svg-map .active path {
fill: #256386 !important;
}
#svg-map .active.is-selected path {
fill: pink !important;
}
#svg-map .active.is-selected text,
#svg-map .active.is-selected.circle {
opacity: 1;
}
#svg-map text {
fill: #fff;
font: 12px Arial-BoldMT, sans-serif;
cursor: pointer;
display: none;
transition: 250ms ease-in-out;
opacity: 0;
}
#svg-map .circle {
fill: #878787;
display: none;
opacity: 0;
transition: 250ms ease-in-out;
}
#svg-map .active .circle {
display: block;
}
#svg-map .active text {
display: block;
}
#svg-map a:hover .circle {
fill: #222 !important;
cursor: pointer;
}
.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 #57237f;
background-color: #7e3bb1;
width: 70%;
font-size: 20px;
color: #fff;
font-weight: 700;
margin: auto;
}
.btn-gradient:after {
content: "";
background: #256386;
background: linear-gradient(90deg,#7e36b6 0%,#5b2584 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;
} .timeline {
height: 100%;
position: relative;
} .timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #256386;
top: 0;
bottom: 0;
left: 50%;
}
.content {
padding: 15px;
background-color: transparent;
position: relative;
}
.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: #256386;
border: 4px solid #5a2483;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.time.right .content::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
left: -21px;
background-color: #256386;
border: 4px solid #5a2483;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.tab input[type="text"] {
appearance: none;
height: 56px !important;
padding: 12px;
background-color: #FFFFFF !important;
border-radius: 5px;
border: none;
outline: none;
border: 1px solid transparent;
color: #266087;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
position: relative;
}
.tab input[type="text"]:focus {
background-color: #ffffff;
}
.tab input[type="text"].invalid {
border: 1px solid #256386;
}       .modal .btn-upload,
.modal input[type=email],
.modal input[type=tel],
.modal input[type=text],
.modal select,
.modal textarea {
background-color: #eee;
border-radius: 5px;
padding: 12px 20px;
color: #131415;
border: none;
width: 100%;
appearance: none;
font-size: 15px;
transition: .2s;
box-sizing: border-box;
resize: none;
}
.modal label.error {
font-size: 14px;
line-height: 16px !important;
color: #b00101;
position: relative;
margin-top: 2px;
display: block;
} @media screen and (max-width: 600px) {    }
@media (min-width: 768px) and (max-width: 991px) { }
@media (max-width: 992px) { }
@media (max-width: 767px) { }
@media (max-width: 600px) { }
@media (max-width: 767px) {
header {
background-color: #256386;
}
.box-img img {
max-height: 170px;
}
.titulo-secao p {
margin-top: 10px;
margin-bottom: 10px;
}
.titulo-secao h1 {
font-size: 22px;
line-height: 26px;
margin-bottom: 10px;
}
.go-back, .btn-padrao {
padding: 10px 35px;
font-size: 15px;
}
.label-options label {
padding: 20px 10px;
}
.label-options label strong {
font-size: 26px;
}
.label-options label span {
font-size: 14px;
}
.resultado .box {
padding: 25px 15px;
height: 100%;
}
.resultado .box .title-box {
font-size: 14px;
line-height: 15px;
text-align: center;
}
.resultado .box .price {
font-size: 11px;
line-height: 15px;
}
.resultado .box .price strong {
margin-left: 0;
font-size: 17px;
line-height: 19px;
}
.resultado .box img {
max-height: 50px;
max-width: 50px;
}
}