html,
* {
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
  line-height: 1.5;
  scroll-padding-top: 100px;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", sans-serif;
  width: 100%;
  margin: 0;
  background-color: #ebebeb;
}

:root {
  --corprincipal: #04050a;
  --corsecundaria: #e8d282;
  --cordetalhes: #d68111;
  --coricones: rgb(245, 182, 9);
  --botao: #ede9de;
  --botaohover: #e8d282;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #d68111 #312b2b;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: #312b2b;
}

*::-webkit-scrollbar-thumb {
  background-color: #d68111;
  border-radius: 20px;
  border: 3px solid #312b2b;
}

/* header */
.header_index {
  display: flex;
  height: 50vh;
  position: relative;
  background-size: cover;
  width: 100%;
  filter: grayscale(40%);
}



/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 0;
  right: 10px;
  background-color: black;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

.text-block h4 {
  color: white;
}

/* MAIN */
.main-index {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-top: 100px;
}

/* oportunidades */
.opt {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

/*banner-cadastro-imovel */

.banner-cadastro-imovel {
  height: 40vh;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
}

/* Barra de Pesquisa */

.barra-pesquisa {
  width: 85vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 576px) {
  .barra-pesquisa {
    width: auto;
    position: absolute;
    top: 40vh;
    left: 10vw;
  }
}

.filters-group-top ul {
  list-style: none;
}

.filters-group-top ul li {
  display: block;
  float: left;
}

.filters-group-top ul li button {
  border: none;
}

.buttonone {
  border-radius: 20px 0 0 0;
}

.buttonlast {
  border-radius: 0 20px 0 0;
}

.filters-group-top ul li button:hover {
  color: #fff;
  background-color: var(--cordetalhes);
}

.filters-group-top ul li button:focus {
  border: none;
}

.filters-group-top ul li button:active {
  background-color: var(--cordetalhes);
  color: #fff;
}

.filters-group-buttom select,
input,
button {
  padding: 20px;
}

.filters-group-buttom select,
input {
  width: 80vw;
  padding: 20px;
  border: 1px solid #f2f2f2;
  background-color: #fff;
}

.filters-group-buttom input[type="search"] {
  border-radius: 4px;
  box-sizing: border-box;
}

.filters-group-buttom button[type="submit"] {
  width: 80vw;
}

@media only screen and (min-width: 576px) {
  .filters-group-buttom select {
    width: 15vw;
  }

  .filters-group-buttom input {
    width: 30vw;
  }

  .filters-group-buttom button[type="submit"] {
    width: 125px;
  }
}

.filters-group-buttom button {
  color: #fff;
  background-color: var(--cordetalhes);
  border: none;
}

@media only screen and (min-width: 576px) {
  .filters-group-buttom button {
    border-radius: 0 20px 20px 0;
  }
}

.filters-group-buttom button:hover {
  background-color: #252425;
  color: #fff;
}

/* opt */

.opt {
  gap: 30px 10px;
}

.opt div {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 10%;
  -webkit-box-shadow: -2px 8px 16px -1px rgba(0, 0, 0, 0.61);
  box-shadow: -2px 8px 16px -1px rgba(0, 0, 0, 0.61);
  width: 300px;
  min-height: 40vh;
}

.opt div a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  width: 150px;
  height: 50px;
  cursor: pointer;
  background-color: var(--cordetalhes);
  color: #000000;
  border-style: none;
}

.opt div a:hover {
  background-color: black;
  color: #ebebeb;
}

.opt div h3 {
  font-size: 25px;
}
.opt div p {
  padding: 0 10px;
}

@media only screen and (min-width: 600px) {
  html,
  * {
    scroll-padding-top: 150px;
  }

  /* header */
  /* header */
  .header_index {
    height: 70vh;
    background-image: url(../img/banner_familia.jpg);
}

  /* main */
  .opt {
    flex-flow: row wrap;
    justify-content: space-around;
  }

  /* destaques */
  .secdetaques h2,
  p {
    width: 100%;
  }

  /* opt */
  .opt h2 {
    width: 100%;
  }
  .opt p {
    width: 100%;
  }
}

/* Destaques */

.probootstrap-section {
  padding: 4em 0;
  position: relative;
  z-index: 2;
  width: 100%;
}

.probootstrap-section.probootstrap-section-sm {
  padding: 3em 0;
}

.probootstrap-section.probootstrap-border-top {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section.probootstrap-border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section > .container.probootstrap-border-top {
  padding-top: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section.probootstrap-section-colored,
.probootstrap-section.probootstrap-section-dark {
  background: #ddf0f3;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ddf0f3),
    to(#2866ab)
  );
  background: linear-gradient(to right, #ddf0f3 0%, #2866ab 100%);
}

.probootstrap-section.probootstrap-section-colored .section-heading h2,
.probootstrap-section.probootstrap-section-dark .section-heading h2 {
  color: white;
}

.probootstrap-section.probootstrap-section-colored .section-heading p,
.probootstrap-section.probootstrap-section-dark .section-heading p {
  color: rgba(255, 255, 255, 0.6);
}

.probootstrap-section.probootstrap-section-colored .heading-with-icon,
.probootstrap-section.probootstrap-section-dark .heading-with-icon {
  color: #2866ab;
}

.probootstrap-section.probootstrap-section-colored .heading-with-icon i,
.probootstrap-section.probootstrap-section-dark .heading-with-icon i {
  color: #2866ab;
}

.probootstrap-section.probootstrap-section-colored p,
.probootstrap-section.probootstrap-section-dark p {
  color: white;
}

.probootstrap-section.probootstrap-section-dark {
  background: #161c2e;
  color: white;
}

.probootstrap-section.probootstrap-section-dark .section-heading h2 {
  color: white;
}

.probootstrap-section.probootstrap-section-dark .section-heading p {
  color: rgba(255, 255, 255, 0.6);
}

.probootstrap-section.probootstrap-section-dark p {
  color: rgba(255, 255, 255, 0.6);
}

.probootstrap-section.probootstrap-section-lighter {
  background: #f2f2f2;
}

@media screen and (max-width: 768px) {
  .probootstrap-section {
    padding: 3em 0;
  }
}

.probootstrap-section.probootstrap-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 8em 0;
}

.probootstrap-section.probootstrap-bg:before {
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.probootstrap-section.probootstrap-bg .heading {
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  line-height: 30px;
}

.probootstrap-section.probootstrap-bg .sub-heading {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.probootstrap-section.probootstrap-bg .container {
  position: relative;
  z-index: 2;
}

.probootstrap-link-wrap {
  padding-left: 40px;
}

@media screen and (max-width: 970px) {
  .probootstrap-link-wrap {
    padding-left: 0;
  }
}

/* cards */

h1,
h2,
h3,
.probootstrap-card .probootstrap-card-text .probootstrap-card-heading,
.service .heading,
h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.8);
}

h3,
.probootstrap-card .probootstrap-card-text .probootstrap-card-heading,
.service .heading {
  font-size: 1.266em;
}

.probootstrap-footer.probootstrap-bg h2,
.probootstrap-footer.probootstrap-bg h3,
.probootstrap-footer.probootstrap-bg
  .probootstrap-card
  .probootstrap-card-text
  .probootstrap-card-heading,
.probootstrap-card
  .probootstrap-card-text
  .probootstrap-footer.probootstrap-bg
  .probootstrap-card-heading,
.probootstrap-footer.probootstrap-bg .service .heading,
.service .probootstrap-footer.probootstrap-bg .heading,
.probootstrap-footer.probootstrap-bg h4 {
  color: #ffffff;
}

.probootstrap-card .probootstrap-card-media.icon {
  font-size: 30px;
}

.probootstrap-card .probootstrap-card-media.svg-sm .svg {
  height: 80px;
  margin-bottom: 0;
}

.probootstrap-card .probootstrap-card-media.colored .svg {
  fill: #2866ab;
}

.probootstrap-card .probootstrap-card-text {
  padding: 20px;
}

.probootstrap-card .probootstrap-card-text .probootstrap-card-heading {
  margin-top: 0;
}

.probootstrap-card .probootstrap-card-text p:last-child {
  margin-bottom: 0;
}

.probootstrap-card.probootstrap-listing {
  margin-bottom: 20px;
  background: #ffffff;
  float: left;
  width: 100%;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  top: 0;
}

.probootstrap-card.probootstrap-listing .probootstrap-card-media {
  position: relative;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-media
  .probootstrap-love {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  bottom: -20px;
  right: 15px;
  background: #ffffff;
  -webkit-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
  display: inline-block;
  *display: inline;
  zoom: 1;
  -webkit-box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1);
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-media
  .probootstrap-love:hover,
.probootstrap-card.probootstrap-listing
  .probootstrap-card-media
  .probootstrap-love:focus {
  -webkit-box-shadow: 0 2px 8px -6px rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 8px -6px rgba(0, 0, 0, 0.7);
  background: #2866ab;
  color: #ffffff;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-media
  .probootstrap-love.active {
  -webkit-box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1);
  background: #2866ab;
  color: #ffffff;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-location {
  display: table;
  margin-bottom: 20px;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-location
  i,
.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-location
  span {
  display: table-cell;
  vertical-align: top;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-location
  i {
  position: relative;
  top: 2px;
  width: 25px;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-location
  span {
  font-weight: 400;
  font-size: 15px;
  color: #0a0a0a;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category {
  margin-bottom: 5px;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category
  span {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 2px 10px;
  border-radius: 4px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.for-sale
  span {
  background: #22eaaa;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.for-rent
  span {
  background: #ee5a5a;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.temporada
  span {
  background: #078336;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.prelancamento
  span {
  background: #056970;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.lancamento
  span {
  background: #1310ce;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.contrucao
  span {
  background: #ee5abd;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.pronto
  span {
  background: #0a0a0a;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-category.investimento
  span {
  background: #290303;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-price {
  font-size: 16px;
  color: #bdbdbd;
}

.probootstrap-card.probootstrap-listing
  .probootstrap-card-text
  .probootstrap-listing-price
  strong {
  font-size: 30px;
  font-weight: 300;
  color: #2866ab;
}

.probootstrap-card.probootstrap-listing .probootstrap-card-extra {
  float: left;
  background: #ffffff;
  width: 100%;
  border-top: 1px solid #f0f0f0;
}

.probootstrap-card.probootstrap-listing .probootstrap-card-extra ul {
  padding: 0 20px;
  margin: 0;
}

.probootstrap-card.probootstrap-listing .probootstrap-card-extra ul li {
  width: 25%;
  float: left;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  font-size: 12px;
  color: #000000;
}

.probootstrap-card.probootstrap-listing .probootstrap-card-extra ul li span {
  display: block;
  color: #272525;
}

.probootstrap-card.probootstrap-listing:focus,
.probootstrap-card.probootstrap-listing:hover {
  top: -20px;
  -webkit-box-shadow: 0 6px 68px -6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 68px -6px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 768px) {
  .probootstrap-card.probootstrap-listing:focus,
  .probootstrap-card.probootstrap-listing:hover {
    top: 0;
  }
}

.probootstrap-card.probootstrap-person {
  background: #ffffff;
  text-align: center;
  margin-bottom: 30px;
}

.probootstrap-card.probootstrap-person .probootstrap-card-media {
  padding-top: 30px;
}

.probootstrap-card.probootstrap-person .probootstrap-card-media img {
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
}

.probootstrap-card.probootstrap-person small {
  color: #c2c2c2;
}

.probootstrap-half .text h2,
.probootstrap-half .text h3,
.probootstrap-half
  .text
  .probootstrap-card
  .probootstrap-card-text
  .probootstrap-card-heading,
.probootstrap-card
  .probootstrap-card-text
  .probootstrap-half
  .text
  .probootstrap-card-heading,
.probootstrap-half .text .service .heading,
.service .probootstrap-half .text .heading,
.probootstrap-half .text h4,
.probootstrap-half .text h5 {
  color: #ffffff;
}

.probootstrap-half .text h3,
.probootstrap-half
  .text
  .probootstrap-card
  .probootstrap-card-text
  .probootstrap-card-heading,
.probootstrap-card
  .probootstrap-card-text
  .probootstrap-half
  .text
  .probootstrap-card-heading,
.probootstrap-half .text .service .heading,
.service .probootstrap-half .text .heading {
  line-height: 30px;
  font-size: 30px;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .probootstrap-half .text h3,
  .probootstrap-half
    .text
    .probootstrap-card
    .probootstrap-card-text
    .probootstrap-card-heading,
  .probootstrap-card
    .probootstrap-card-text
    .probootstrap-half
    .text
    .probootstrap-card-heading,
  .probootstrap-half .text .service .heading,
  .service .probootstrap-half .text .heading {
    font-size: 24px;
    line-height: 24px;
  }
}

.probootstrap-hover-overlay .probootstrap-text-overlay h3,
.probootstrap-hover-overlay
  .probootstrap-text-overlay
  .probootstrap-card
  .probootstrap-card-text
  .probootstrap-card-heading,
.probootstrap-card
  .probootstrap-card-text
  .probootstrap-hover-overlay
  .probootstrap-text-overlay
  .probootstrap-card-heading,
.probootstrap-hover-overlay .probootstrap-text-overlay .service .heading,
.service .probootstrap-hover-overlay .probootstrap-text-overlay .heading {
  color: #ffffff;
  margin-bottom: 0;
  margin-top: 0;
}

.service.left-icon h3,
.service.left-icon
  .probootstrap-card
  .probootstrap-card-text
  .probootstrap-card-heading,
.probootstrap-card
  .probootstrap-card-text
  .service.left-icon
  .probootstrap-card-heading,
.service.left-icon .heading {
  font-size: 22px;
  margin-bottom: 0;
}

.img-responsive,
.thumbnail a > img,
.thumbnail > img {
  display: block;
  max-width: 100%;
  height: auto;
}