@charset "UTF-8";

body {
background: #fff;
}
.content p {
line-height: 1.8rem;
}
#background {
height: 320px;
background: url(//rottasconstrutora.com.br/rottas/assets/BackgroundArquivo.jpg) center center no-repeat;
background-size: cover;
}
#background .overlay {
height: 320px;
background: transparent;
}
#buybox {
margin-top: -250px;
}
#buybox .b-container {
max-width: 1024px;
}
#buybox .flex-grid {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
}
#buybox .flex-grid .left {
width: 72%;
}
#buybox .flex-grid .left .breadcrumb {
margin-bottom: 1rem;
}
#buybox .flex-grid .left .breadcrumb,
#buybox .flex-grid .left .breadcrumb a {
color: #000;
}
#buybox .flex-grid .left .breadcrumb a:hover {
color: var(--yellow);
}
#buybox .flex-grid .left .box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background: #f9f9f9;
padding: 2rem;
border-radius: 2rem 0 0 2rem;
border: 1px solid #d4d4d4;
}
#buybox .flex-grid .left .image {
width: 22%;
}
#buybox .flex-grid .left .image img {
max-width: 100%;
}
#buybox .flex-grid .left .content {
width: 75%;
}
#buybox .flex-grid .left .content .title-box {
display: flex;
justify-content: space-between;
}
#buybox .flex-grid .left .content .title-box .image {
display: flex;
align-items: center;
justify-content: flex-end;
}
#buybox .flex-grid .left .content .title-box .image img {
width: 100%;
max-width: 110px;
}
#buybox .flex-grid .left .content .title-box .label {
display: inline-block;
font-family: Aller;
font-size: 12px;
color: var(--black);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
#buybox .flex-grid .left .content .title-box .name {
font-family: Aller;
font-size: 28px;
font-weight: 700;
color: var(--black);
margin-bottom: 1rem;
}
#buybox .flex-grid .left .content .adress {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
#buybox .flex-grid .left .content .adress img {
display: inline-block;
width: 18px;
margin-right: 0.3rem;
}
#buybox .flex-grid .left .content .adress .paragraph {
font-size: 14px;
margin-right: 0.3rem;
}
#buybox .flex-grid .left .content .divisor {
width: 4rem;
height: 4px;
background: var(--yellow);
}
#buybox .flex-grid .left .content .infos {
display: flex;
align-items: center;
margin-top: 1rem;
}
#buybox .flex-grid .left .content .infos li {
display: flex;
align-items: center;
margin-right: 1rem;
}
#buybox .flex-grid .left .content .infos li:last-child {
margin-right: 0;
}
#buybox .flex-grid .left .content .infos span {
font-family: Aller;
font-size: 14px;
color: var(--black);
}
#buybox .flex-grid .left .content .infos img {
margin-right: 0.4rem;
}
#buybox .flex-grid .right {
width: 28%;
padding: 1rem;
box-sizing: border-box;
background: #424548;
border-radius: 2rem 2rem 2rem 0;
}
#buybox .flex-grid .policy {
color: #fff;
}
#buybox .flex-grid .btn {
margin-top: 1.5rem;
width: 100%;
}
@media (max-width: 900px) {
#buybox .flex-grid .left .image {
margin-bottom: 1rem;
}
#buybox .flex-grid .left .image,
#buybox .flex-grid .left .content {
width: 100%;
}
#buybox .flex-grid .left .image img {
max-width: 120px;
}
#buybox .flex-grid .left .content .title-box .image {
width: 20%;
margin-bottom: 0;
}
#buybox .flex-grid .left .content .title-box .content {
width: 80%;
}
#buybox .flex-grid .left {
width: 65%;
}
#buybox .flex-grid .right {
width: 35%;
}
}
@media (max-width: 740px) {
#buybox {
margin-top: -300px;
}
#buybox .flex-grid .left {
width: 100%;
}
#buybox .flex-grid .right {
width: 100%;
border-radius: 0 0 2rem 2rem;
}
#buybox .flex-grid .left .box {
padding: 2rem 1.5rem;
border-radius: 2rem 2rem 0 0;
}
#buybox .flex-grid .left .content .title-box .image {
width: 30%;
}
#buybox .flex-grid .left .content .title-box .content {
width: 70%;
}
}
@media (max-width: 450px) {
#buybox .flex-grid .left .content .title-box .name {
font-size: 24px;
}
#buybox .flex-grid .left .content .infos img {
width: 19px;
}
#buybox .flex-grid .left .content .infos span {
font-size: 12px;
}
#buybox .flex-grid .left .content .infos li {
margin-right: 0.75rem;
}
#buybox .flex-grid .left .content .infos li:last-child {
margin-right: 0;
}
}
#sobre {
padding: 2rem 0 3rem;
}
#sobre .b-container {
max-width: 1024px;
}
#sobre .b-container .flex-grid {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
#sobre .b-container .flex-grid .left {
box-sizing: border-box;
width: 48%;
}
#sobre .b-container .flex-grid .left p {
margin-bottom: 1rem;
}
#sobre .b-container .flex-grid .left p:last-child {
margin-bottom: 0;
}
#sobre .b-container .flex-grid .left .title2 {
margin-bottom: 2.5rem;
}
#sobre .b-container .flex-grid .left .attachments {
margin-bottom: 1rem;
}
#sobre .b-container .flex-grid .left .share-link {
margin-top: 2rem;
}
#sobre .b-container .flex-grid .left .share-link .share-title {
font-family: Kanit;
font-weight: 700;
text-transform: uppercase;
color: var(--black);
}
#sobre .b-container .flex-grid .left .share-link ul {
margin-top: 1rem;
display: flex;
}
#sobre .b-container .flex-grid .left .share-link ul li {
margin-right: 0.75rem;
}
#sobre .b-container .flex-grid .left .share-link ul li a {
font-size: 22px;
color: var(--orange1);
transition: 0.3s;
}
#sobre .b-container .flex-grid .left .share-link ul li a:hover {
color: var(--yellow);
}
#sobre .b-container .flex-grid .right {
width: 46%;
}
#sobre #sliderPlantas img {
height: 400px;
object-fit: contain;
object-position: center center;
width: 100%;
}
#sobre #sliderPlantas .slider-navigation {
display: flex;
justify-content: center;
}
#sobre #sliderPlantas .slider-navigation .sP-previous {
margin-right: 0.5rem;
}
@media (max-width: 750px) {
#sobre .b-container .flex-grid .left,
#sobre .b-container .flex-grid .right {
width: 100%;
}
}
#diferenciais .b-container {
max-width: 1024px;
}
#diferenciais .title2 {
margin-bottom: 2.5rem;
}
#diferenciais .diferenciais {
display: flex;
flex-wrap: wrap;
}
#diferenciais .diferenciais .diferencial {
display: flex;
align-items: center;
width: 48%;
margin-right: 4%;
margin-bottom: 1.5rem;
}
#diferenciais .diferenciais .diferencial .image {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
justify-content: center;
width: 98px;
height: 98px;
padding: 0.4rem;
background: #efeed9;
border-radius: 12px;
border: 1px solid #d4d4d4;
margin-right: 1rem;
}
#diferenciais .diferenciais .diferencial .image span {
display: inline-block;
margin-top: 0.5rem;
font-family: Aller;
font-size: 11px;
text-align: center;
}
#diferenciais .diferenciais .diferencial .content {
width: 75%;
}
#diferenciais .diferenciais .diferencial:nth-child(2n) {
margin-right: 0;
}
@media (max-width: 750px) {
#diferenciais .diferenciais .diferencial {
align-items: flex-start;
width: 100%;
}
#diferenciais .diferenciais .diferencial .image {
width: 84px;
height: 84px;
}
#diferenciais .diferenciais .diferencial .paragraph {
font-size: 14px;
}
}
#localizacao {
padding: 0 0 3rem;
}
#localizacao .b-container {
max-width: 1024px;
}
#localizacao .flex-grid {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
#localizacao .flex-grid .left {
width: 48%;
}
#localizacao .flex-grid .left .title2 {
margin-bottom: 2rem;
}
#localizacao .flex-grid .left ul {
margin-left: 1rem;
}
#localizacao .flex-grid .left ul li {
position: relative;
}
#localizacao .flex-grid .left ul li::before {
content: "•";
position: absolute;
top: 0.2rem;
left: 0.2rem;
font-size: 24px;
color: var(--orange1);
font-weight: bold;
display: inline-block;
margin-left: -1em;
}
#localizacao .flex-grid .left p.paragraph {
display: flex;
align-items: center;
margin-bottom: 1rem;
line-height: 1.8rem;
}
#localizacao .flex-grid .left p.paragraph img {
width: 19px;
margin-right: 0.4rem;
}
#localizacao .flex-grid .right {
width: 48%;
}
#localizacao .flex-grid .right .map {
width: 100%;
}
#localizacao .flex-grid .right .map iframe {
width: 100%;
height: 300px;
}
@media (max-width: 800px) {
#localizacao .flex-grid {
flex-wrap: wrap;
}
#localizacao .flex-grid .left,
#localizacao .flex-grid .right {
width: 100%;
}
#localizacao .flex-grid .right {
margin-top: 2rem;
}
}
#galeria {
padding: 3rem 0 4rem;
background: #f9f9f9;
z-index: 10;
border-radius: 0 0 240px 0;
}
@media (max-width: 1368px) {
#galeria {
border-radius: 0 0 120px 0;
}
}
#galeria .b-container {
max-width: 1024px;
}
#galeria .top-box {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
#andamento .tab-menu {
display: flex;
justify-content: center;
}
#andamento .tab-menu ul,
#galeria .top-box ul {
display: flex;
align-items: center;
background: #e3e3e3;
border-radius: 255px;
height: 42px;
}
#andamento .tab-menu ul {
display: inline-flex;
margin-top: 2rem;
}
#andamento .tab-menu ul li,
#galeria .top-box ul li {
cursor: pointer;
font-family: Kanit;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
color: var(--black);
display: flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 1.5rem;
white-space: nowrap;
transition: 0.3s;
}
#andamento .tab-menu ul li:hover,
#galeria .top-box ul li:hover {
color: var(--orange1);
}
#andamento .tab-menu ul li.ativo,
#galeria .top-box ul li.ativo {
font-weight: 700;
color: var(--orange1);
background: #fff;
border-radius: 255px;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 750px) {
#galeria {
overflow: hidden;
}
#galeria .top-box {
align-items: flex-start;
flex-direction: column;
}
#galeria .top-box .title2 {
margin-bottom: 1rem;
}
#galeria .top-box .menu {
max-width: 100%;
overflow-x: scroll;
padding-bottom: 1rem;
}
#galeria .top-box .menu ul {
display: inline-flex;
}
#galeria .top-box .menu::-webkit-scrollbar {
height: 6px;
}
#galeria .top-box .menu::-webkit-scrollbar-track {
background: #f1f1f1;
}
#galeria .top-box .menu::-webkit-scrollbar-thumb {
background: var(--orange1);
}
#galeria .top-box .menu::-webkit-scrollbar-thumb:hover {
background: var(--orange1-saturation);
}
}
#galeria .galeria {
display: flex;
flex-direction: column;
}
#galeria .galeria .tabs {
display: flex;
}
#galeria .galeria .tabs.ativo {
z-index: 1003;
}
#galeria .galeria .tabs .tab ul {
display: flex;
flex-wrap: wrap;
margin-left: -0.8rem;
margin-right: -0.8rem;
}
#galeria .galeria .tabs li {
width: 25%;
box-sizing: border-box;
padding: 0.8rem;
transition: 0.3s;
}
#galeria .galeria .tabs li:hover {
transform: translateY(-0.3rem);
}
#galeria .galeria .tabs li:hover img {
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
}
#galeria .galeria .tabs li:nth-child(2n) {
width: 50%;
}
#galeria .galeria .tabs li:nth-child(6n),
#galeria .galeria .tabs li:nth-child(10n),
#galeria .galeria .tabs li:nth-child(11n) {
width: 25%;
}
#galeria .galeria .tabs li:nth-child(12n) {
width: 50%;
}
@media (max-width: 750px) {
#galeria .galeria .tabs li {
width: 50%;
}
#galeria .galeria .tabs li:nth-child(3n) {
width: 100%;
}
#galeria .galeria .tabs li:nth-child(10n),
#galeria .galeria .tabs li:nth-child(11n) {
width: 50%;
}
}
#galeria .galeria .tabs .tab img {
cursor: pointer;
width: 100%;
object-fit: cover;
height: 100%;
border-radius: 2rem;
}
#galeria .divisor {
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin: 2rem 0 3rem;
}
#galeria .tour360 {
display: block;
background: url(//rottasconstrutora.com.br/rottas/assets/ExemploGaleria.jpg);
height: 240px;
border-radius: 2rem;
}
#galeria .tour360 .overlay {
display: flex;
align-items: center;
justify-content: center;
border-radius: 2rem;
background: rgba(30, 30, 30, 0.4);
height: 240px;
}
#galeria .tour360 .title2 {
display: flex;
align-items: center;
}
[data-gallery=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
min-height: -webkit-fill-available;
box-sizing: border-box;
padding: 2rem;
background: rgba(0, 0, 0, 0.85);
z-index: 1003;
}
[data-gallery=modal].ativo {
display: flex;
align-items: center;
justify-content: center;
}
[data-gallery=modal] .image {
display: flex;
align-items: center;
justify-content: center;
}
[data-gallery=modal] .image img {
display: none;
width: 100%;
max-width: 1000px;
border-radius: 0;
}
[data-gallery=modal] .image img.atual {
display: inline-block;
animation: fadeIn 0.6s forwards;
}
[data-gallery=modal] .navigation {
position: absolute;
bottom: 4rem;
width: 100%;
display: flex;
justify-content: center;
}
[data-gallery=modal] .navigation i {
opacity: 0.75;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: var(--orange1);
color: #fff;
width: 40px;
height: 40px;
border-radius: 255px;
transition: 0.3s;
}
[data-gallery=modal] .navigation div {
margin-right: 0.6rem;
}
[data-gallery=modal] .navigation div:last-child {
margin-right: 0;
}
[data-gallery=modal] .navigation i:hover {
background: var(--orange1);
opacity: 1;
}
[data-galleryModal=close] {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 21px;
}
[data-galleryModal=close] i {
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
transition: 0.3s;
}
[data-galleryModal=close]:hover i {
color: #fff;
}
#andamento {
border-radius: 0 240px 0 0;
padding: 3rem 0 4rem;
background: var(--yellow-light);
}
#andamento .b-container {
max-width: 1024px;
}
#andamento .b-container .video {
max-width: 700px;
margin: 0 auto;
margin-top: 2rem;
}
#andamento .b-container .video iframe {
width: 100%;
height: 400px;
}
@media (max-width: 1368px) {
#andamento {
border-radius: 0 120px 0 0;
}
}
@media (max-width: 600px) {
#andamento .b-container .video iframe {
height: 300px;
}
}
#paralax .buttons-grid {
margin-top: 2rem;
display: flex;
justify-content: center;
}
#formSuccess {
padding: 5rem 0;
text-align: center;
display: none;
}
#formSuccess h4 {
font-family: Aller;
font-size: 14px;
font-weight: 700;
color: var(--orange1);
margin-bottom: 1.5rem;
}
#formSuccess p {
font-family: Aller;
font-size: 13px;
margin-bottom: 0.85rem;
color: #fff;
}