@import url(sobre.css);
@import url(resutado-busca.css);
@import url(home.css);
@import url(empreendimentos.css);
@import url(empreendimento.css);
@import url(central-vendas.css);

.border-branco, .border-ciano, .border-cinza-claro, .border-cinza-escuro, .border-grafite, .border-preto, .border-verde {
    border-style: solid !important
}

button#btn-pause, footer #fixed-sociais a span {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto
}

:root {
    --ciano: #044D41;
    --verde: #84E115;
    --preto: #000000;
    --cinza-escuro: #323232;
    --cinza-claro: #9C9C9C;
    --branco: #ffffff;
    --font-size: 16;
    --grafite: #212121
}

@font-face {
    font-family: Lufga;
    src: url(../fonts/lufga/Lufga-Bold.ttf);
    font-weight: 700
}

@font-face {
    font-family: Lufga;
    src: url(../fonts/lufga/Lufga-SemiBold.ttf);
    font-weight: 600
}

@font-face {
    font-family: Lufga;
    src: url(../fonts/lufga/Lufga-Medium.ttf);
    font-weight: 500
}

@font-face {
    font-family: Lufga;
    src: url(../fonts/lufga/Lufga-Regular.ttf);
    font-weight: 400
}

@font-face {
    font-family: Lufga;
    src: url(../fonts/lufga/Lufga-Light.ttf);
    font-weight: 300
}

html {
    font-size: 14px
}

body {
    background-color: var(--preto) !important;
    color: var(--branco) !important
}

a, button, h1, h2, h3, h4, h5, h6, p {
    font-family: Lufga !important
}

.text-underline {
    text-decoration: underline !important
}

.f-300 {
    font-weight: 300 !important
}

.f-400 {
    font-weight: 400 !important
}

.f-500 {
    font-weight: 500 !important
}

.f-600 {
    font-weight: 600 !important
}

.f-700 {
    font-weight: 700 !important
}

.f-12 {
    font-size: calc(12 / var(--font-size) * 1rem) !important
}

.f-13 {
    font-size: calc(13 / var(--font-size) * 1rem) !important
}

.f-14 {
    font-size: calc(14 / var(--font-size) * 1rem) !important
}

.f-16 {
    font-size: calc(16 / var(--font-size) * 1rem) !important
}

.f-17 {
    font-size: calc(17 / var(--font-size) * 1rem) !important
}

.f-18 {
    font-size: calc(18 / var(--font-size) * 1rem) !important
}

.f-20 {
    font-size: calc(20 / var(--font-size) * 1rem) !important
}

.f-22 {
    font-size: calc(22 / var(--font-size) * 1rem) !important
}

.f-24 {
    font-size: calc(24 / var(--font-size) * 1rem) !important
}

.f-26 {
    font-size: calc(26 / var(--font-size) * 1rem) !important
}

.f-32 {
    font-size: calc(32 / var(--font-size) * 1rem) !important
}

.f-34 {
    font-size: calc(34 / var(--font-size) * 1rem) !important
}

.f-36 {
    font-size: calc(36 / var(--font-size) * 1rem) !important
}

.f-40 {
    font-size: calc(40 / var(--font-size) * 1rem) !important
}

.f-42 {
    font-size: calc(42 / var(--font-size) * 1rem) !important
}

.f-48 {
    font-size: calc(48 / var(--font-size) * 1rem) !important
}

.f-50 {
    font-size: calc(50 / var(--font-size) * 1rem) !important
}

.f-51 {
    font-size: calc(51 / var(--font-size) * 1rem) !important
}

.f-52 {
    font-size: calc(52 / var(--font-size) * 1rem) !important
}

.f-54 {
    font-size: calc(54 / var(--font-size) * 1rem) !important
}

.f-56 {
    font-size: calc(56 / var(--font-size) * 1rem) !important
}

.f-60 {
    font-size: calc(60 / var(--font-size) * 1rem) !important
}

.f-186 {
    font-size: calc(186 / var(--font-size) * 1rem) !important
}

.border-ciano {
    border-color: var(--ciano) !important
}

.border-verde {
    border-color: var(--verde) !important
}

.border-preto {
    border-color: var(--preto) !important
}

.border-grafite {
    border-color: var(--grafite) !important
}

.border-cinza-escuro {
    border-color: var(--cinza-escuro) !important
}

.border-cinza-claro {
    border-color: var(--cinza-claro) !important
}

.border-branco {
    border-color: var(--branco) !important
}

.color-ciano {
    color: var(--ciano) !important
}

.color-verde, .plyr--full-ui input[type=range], footer #fixed-sociais a:hover i {
    color: var(--verde) !important
}

.color-preto {
    color: var(--preto) !important
}

.color-grafite {
    color: var(--grafite) !important
}

.color-cinza-escuro, section#form .sociais a:hover {
    color: var(--cinza-escuro) !important
}

.color-cinza-claro {
    color: var(--cinza-claro) !important
}

.btn.hover-ciano:hover, .color-transparente {
    color: rgba(0, 0, 0, 0) !important
}

.color-branco {
    color: var(--branco) !important
}

.bg-ciano {
    background: var(--ciano) !important
}

.bg-verde {
    background: var(--verde) !important
}

.bg-preto {
    background: var(--preto) !important
}

.bg-grafite {
    background: var(--grafite) !important
}

.bg-cinza-escuro {
    background: var(--cinza-escuro) !important
}

.bg-cinza-claro {
    background: var(--cinza-claro) !important
}

.bg-branco {
    background: var(--branco) !important
}

.bg-gradient-preto {
    background: linear-gradient(180deg, #000 0, rgba(250, 250, 250, 0) 100%)
}

a, button {
    font-size: .875rem !important;
    transition: .4s ease-in-out !important;
    text-decoration: none !important
}

button:focus, button:focus-visible {
    outline: 0 !important
}

a:hover, button:hover {
    opacity: .8 !important
}

.btn {
    border-radius: 0 !important;
    transition: .4s !important
}

.btn:hover {
    border-radius: 1.625rem !important
}

.btn.hover-ciano:hover {
    background-color: var(--ciano) !important;
    border: var(--ciano) !important
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true], .plyr__control--overlaid:hover {
    background: var(--verde) !important
}

.btn.hover-verde:hover {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: var(--ciano) !important;
    font-weight: 600
}

div, input, p {
    font-size: 1rem
}

.input-50 {
    min-height: calc(50 / var(--font-size) * 1rem) !important
}

.input-42 {
    min-height: calc(42 / var(--font-size) * 1rem) !important
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999
}

header form {
    margin-bottom: 0 !important
}

header nav .sandwich label {
    display: flex !important;
    flex-direction: column;
    width: 70px;
    transform: scale(.5);
    cursor: pointer
}

header nav .sandwich label span {
    background: #fff;
    border-radius: 10px;
    height: 7px;
    margin: 7px 0;
    transition: .4s cubic-bezier(.68, -.6, .32, 1.6)
}

header nav .sandwich span.line-1, header nav .sandwich span.line-2, header nav .sandwich span.line-3 {
    width: 100%
}

header nav .sandwich input[type=checkbox] {
    display: none
}

header nav .sandwich input[type=checkbox]:checked ~ span.line-1 {
    transform-origin: bottom;
    transform: rotatez(45deg) translate(8px, 0);
    width: 50%
}

header nav .sandwich input[type=checkbox]:checked ~ span.line-2 {
    transform-origin: top;
    transform: rotatez(-45deg)
}

header nav .sandwich input[type=checkbox]:checked ~ span.line-3 {
    transform-origin: bottom;
    width: 50%;
    transform: translate(30px, -11px) rotatez(45deg)
}

header nav #label-buscar i {
    cursor: pointer
}

header nav #label-buscar:focus-within {
    border-radius: 1.5rem;
    border: 1px solid var(--branco);
    transition: .4s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: initial
}

header nav #label-buscar:focus-within input {
    width: 184px;
    max-width: 60vw
}

header nav #label-buscar input {
    width: 0;
    transition-duration: .4s;
    -moz-transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s
}

header nav #label-buscar {
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0);
    transition: opacity .4s
}

header nav #label-buscar input:focus {
    border-radius: 1.5rem;
    border: none !important;
    outline-style: none !important
}

header nav .menu {
    height: 110px
}

header nav .menu .logo img {
    transition: width .4s !important;
    -moz-transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    width: 222px;
    max-width: 60vw;
    margin-right: 232px;
}

header nav .menu.open .logo img {
    transition: .4s !important;
    width: 160px;
    max-width: 160px !important
}

header nav .menu ul {
    transition: .4s;
    width: auto
}

header nav .menu.open ul {
    opacity: 1;
    z-index: 1;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    white-space: nowrap;
}

header nav .menu:not(.open) ul {
    z-index: -9999;
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    max-width: 0
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@media screen and (max-width: 1366px) {
    html {
        font-size: 13.5px
    }
}

@media screen and (max-width: 991px) {
    html {
        font-size: 13px
    }

    header nav .menu:not(.open) ul {
        max-width: none
    }

    header nav .menu {
        transition: .4s;
        width: auto;
        position: fixed;
        height: 100vh;
        justify-content: center !important;
        top: 0;
        left: 0;
        background-color: #044d41e6;
        z-index: 2
    }

    header nav .menu:not(.open) {
        z-index: -9999;
        opacity: 0;
        -webkit-animation-name: fadeOutLeft;
        animation-name: fadeOutLeft;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    header nav .menu.open {
        opacity: 1;
        z-index: 1;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    header nav .mobile-nav {
        position: relative;
        z-index: 333
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 12.5px
    }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
    html {
        font-size: 13.5px
    }

    header nav .menu .sandwich {
        z-index: 233
    }

    header nav .menu ul {
        transition: .4s;
        width: 40vw;
        position: fixed;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #044d41ea;
        justify-content: center;
        z-index: 1;
        align-items: center
    }

    header nav .menu.open ul {
        opacity: 1;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    header nav .menu:not(.open) ul {
        z-index: -9999;
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    header nav .menu .logo img, header nav .menu.open .logo img {
        width: 200px !important;
        max-width: 30vw !important
    }
}

@media screen and (min-width: 1400px) {
    .container-right {
        max-width: calc((100vw / 2 - 1320px / 2) + 1320px) !important;
        margin-right: 0;
        margin-left: calc(100vw / 2 - 1320px / 2) !important
    }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .container-right {
        max-width: calc((100vw / 2 - 1140px / 2) + 1320px) !important;
        margin-right: 0;
        margin-left: calc(100vw / 2 - 1140px / 2) !important
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .container-right {
        max-width: calc((100vw / 2 - 960px / 2) + 1320px) !important;
        margin-right: 0;
        margin-left: calc(100vw / 2 - 960px / 2) !important
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .container-right {
        max-width: calc((100vw / 2 - 720px / 2) + 1320px) !important;
        margin-right: 0;
        margin-left: calc(100vw / 2 - 720px / 2) !important
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .container-right {
        max-width: calc((100vw / 2 - 540px / 2) + 1320px) !important;
        margin-right: 0;
        margin-left: calc(100vw / 2 - 540px / 2) !important
    }
}

.single-empreendimento {
    max-width: 95vw;
    width: 450px;
    margin-left: auto;
    margin-right: auto
}

.img-empreendimento {
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px 10px 0 0
}

.img-empreendimento img {
    width: 100%;
    height: 400px;
    max-height: 40vh;
    object-fit: cover;
    object-position: center;
    transition: .4s;
    cursor: pointer
}

.img-empreendimento img:hover {
    transform: scale(1.1)
}

.desc-empreendimento {
    background-color: #212121;
    border-top-right-radius: 44px;
    margin-top: -3rem;
    z-index: 3;
    min-height: 35vh;
    position: relative
}

.desc-empreendimento .botao-whatsapp a {
    color: #25d366;
    background-color: var(--branco);
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    position: absolute;
    right: 10%;
    top: -5%
}

.desc-empreendimento .botao-whatsapp a:hover {
    background-color: #25d366;
    color: var(--branco);
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    opacity: 1 !important
}

.detalhes-empreendimento {
    display: grid;
    grid-template-columns:200px 200px;
    grid-row: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px
}

@media (max-width: 900px) {
    .detalhes-empreendimento {
        grid-template-columns:1fr;
        grid-row: auto auto;
        grid-column-gap: 20px;
        grid-row-gap: 20px
    }
}

.link-empreendimento a {
    border-radius: 0 0 10px 10px !important;
    position: relative;
    transition: .4s
}

.link-empreendimento a:before {
    content: "\f178";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    position: absolute;
    right: 10%;
    opacity: 0;
    transition: .4s
}

.link-empreendimento a:hover:before {
    opacity: 1;
    font-size: 1.2rem;
    color: var(--branco) !important
}

.link-empreendimento a:hover {
    border-radius: 0 !important;
    background-color: var(--verde) !important;
    color: var(--branco) !important;
    border-color: var(--verde) !important
}

.slide-empreendimentos .slick-prev {
    left: -3rem;
    top: 42%
}

.slide-empreendimentos .slick-next {
    left: -3rem;
    bottom: 42%
}

@media only screen and (max-width: 600px) {
    .slide-empreendimentos .slick-next {
        right: 1rem !important;
        top: 100% !important;
        left: unset !important;
    }
    .slide-empreendimentos .slick-prev {
        left: 0 !important;
        right: unset !important;
        top: 100% !important;
        z-index: 2;
        bottom: 42%;
    }
}


.slide-empreendimentos .slick-next:before, .slide-empreendimentos .slick-prev:before {
    font-size: 1rem;
    color: var(--cinza-claro);
    height: 2.5rem;
    width: 2.5rem;
    padding: .3rem;
    border: 2px solid var(--cinza-claro);
    border-radius: 50%;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    transition: .4s
}

.slide-empreendimentos .slick-next:hover:before, .slide-empreendimentos .slick-prev:hover:before {
    color: var(--verde);
    border: 2px solid var(--verde)
}

.slide-empreendimentos .slick-next:before {
    content: "\f178" !important
}

.slide-empreendimentos .slick-prev:before {
    content: "\f177" !important
}

div#nextSection {
    z-index: 3
}

.plyr__control--overlaid {
    background: #fff !important;
    color: #000 !important;
    font-size: 18rem !important;
    min-width: 5vw;
    min-height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.plyr__control--overlaid svg {
    margin: auto;
    width: 2rem !important;
    height: 2rem !important
}

.plyr__control--overlaid:hover {
    color: #fff !important
}

.plyr__poster {
    background-size: cover !important;
    position: relative
}

button#btn-pause {
    opacity: 0 !important;
    height: max-content;
    left: 0;
    z-index: 2
}

#nextSection a img:last-child, button#btn-pause.plyr__control--pressed {
    opacity: 1 !important
}

.plyr--video {
    position: relative
}

section#form .sociais a {
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .4s
}

section#form .sociais a:hover {
    background-color: var(--verde)
}

section#form input, section#form textarea {
    border: 1px solid var(--grafite) !important;
    color: var(--branco)
}

section#form input:focus, section#form textarea:focus {
    border: 1px solid var(--ciano) !important
}

section#contato {
    min-height: 30vh
}

section#contato:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url('../img/bg-grafismo.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

section#contato a {
    position: relative;
    width: max-content
}

section#contato a span {
    margin-left: -2rem !important;
    transition: .4s
}

section#contato a i {
    opacity: 0;
    transition: .4s
}

section#contato a:hover {
    border-bottom: 3px solid var(--verde)
}

#nextSection a:hover img, section#contato a:hover i {
    opacity: 1
}

section#contato a:hover span {
    margin-left: 0 !important
}

#nextSection a img {
    opacity: 0;
    width: 1.5rem;
    transition: .4s
}

footer img {
    max-width: 220px !important
}

footer #politica-privacidade {
    z-index: 9999;
    display: none
}

footer #fixed-sociais {
    top: 40%;
    z-index: 88
}

footer #fixed-sociais a {
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    position: relative;
    transition: .4s
}

footer #fixed-sociais a span {
    max-width: 0 !important;
    overflow: hidden;
    transition: .4s .4s
}

footer #fixed-sociais a:hover span {
    max-width: max-content !important;
    overflow: hidden;
    position: relative
}

footer #fixed-sociais a:hover {
    width: 10rem;
    height: 4rem;
    opacity: 1 !important
}

footer #fixed-sociais a i {
    font-size: 2.3rem !important
}

section#video .container-fluid {
    max-height: 100vh;
}

div[role="dialog"].cc-window {
    display: none !important;
}

#blip-chat-open-iframe {
    display: none !important;
}

div.titulo {
    height: 1px;
    background-color: #333;
    text-align: center;
    margin-top: 5rem;
}
div.titulo span {
    position: relative;
    top: -0.8em;
    padding: 0 10px;
}


.title {
    margin-top: 30px;
    text-align: center;

}

h2.background {
    position: relative;
    z-index: 1;
}
h2.background:before {
    border-top: 1px solid #333;
    content: "";
    margin: 0 auto;
    /* this centers the line to the full width specified */

    position: absolute;
    /* positioning must be absolute here, and relative positioning must be applied to the parent */

    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 95%;
    z-index: -1;
}
h2.background span {
    /* to hide the lines from behind the text, you have to set the background color the same as the container */
    background: var(--preto);
    padding: 0 15px;
}
h2.double:before {
    /* this is just to undo the :before styling from above */

    border-top: none;
}

.single-empreendimento {
    width: 420px !important;
}