/* PALETA DE COLORES */

:root {
  --color11: #2D2D2B;
  --color22: #9F9385;
  --color33: #EAE3D9;
  --color44:#F8F7F3;

}


/* FUENTE */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

@font-face {
  font-family: 'Paul Grotesk';
  src: url('../assets/fonts/PaulGrotesk-Thin-Trail.otf');
}

@import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@1;100;200;300;400;500;600;700;800;900;1000&display=swap');


/* BASE */

* {
  box-sizing: border-box;
  font-family: 'Ysabeau SC', sans-serif;
  font-weight: 100;
  letter-spacing: .125em;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color44);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* BOTONES */

.buttom-fly {
  background-color: var(--color33);
  border: 2px solid var(--color22);
  border-radius: 20px;
  height: 3em;
  justify-self: center;
  margin-top: 5em;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 10em;
}

.buttom-fly:hover {
  background-color: var(--color11);
  box-shadow: 1px 1px 25px 10px rgba(248, 247, 243, 0.4);
  color: var(--color44);
}

.buttom-fly:before {
  background: linear-gradient(120deg, transparent,rgba(248, 247, 243, 0.4),transparent);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: all 650ms;
  width: 100%;
}

.buttom-fly:hover:before {
  left: 100%;
}

.buttom-fly a {
  color: var(--color11);
  font-size: 1.063em;
}

.buttom-fly:hover a{
  background-color: var(--color11);
  color: var(--color44);
}

@media (max-width: 1400px) {
  .buttom-fly a {
    font-size: 1em;
  }
}
@media (max-width: 1200px) {
  .buttom-fly{
    width: 9.5em;
  } 
}
@media (max-width: 992px) {
  .buttom-fly {
    width: 9em;
  }

  .buttom-fly a{
    font-size: .813em;
  }
}
@media (max-width: 768px) {
  .buttom-fly{
    margin-top: 3em;
    height: 2.25em;
    width: 8.5em;
  }
}
@media (max-width: 576px) {
  .buttom-fly{
    width: 8em;
  }
}

/* WHATSAPP */

a:hover {
  text-decoration: none;
}

.whatsapp {
  background-color:#25d366;
  border-radius:50px;
  bottom:30px;
  color:#FFF;
  font-size:30px;
  height:70px;
  position:fixed;
  right:40px;
  text-align:center;
  width:70px;
  z-index:100;
}

.whatsapp:hover {
  color: white;
  transform: scale(1.1);
}

.whatsapp-icon {
  font-size: 1.5em;
  margin-top:13px;
  margin-left: 5px;
}

@media (max-width: 1400px) {
  .whatsapp {
    height: 50px;
    width: 50px;
  }

  .whatsapp-icon {
    font-size: 1.125em;
    margin-top: 8px;
    margin-left: 4px;
  }
}
@media (max-width: 576px) {
  .whatsapp {
    bottom: 20px;
    right: 20px;
  }
}


/* HEADER */

header  {
  background: var(--color11);
  opacity: 90%;
  padding: .375em;
}


/* LOGO */

header .logo {
  display: flex;
  padding: 0 2em;
  width: 30%;
}

.logo img {
  width: 5.25em;
}

header span .title{
  color: white;
  font-family: 'Paul Grotesk';
  font-size: 1.125em;
  margin-bottom: 0;
  text-transform: uppercase;
}

header span p.title {
  font-size: .5em;
  letter-spacing: .25em;
}

.sk-chase-dot {
  animation: sk-chase-dot 2.0s;
  &:hover {
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
  }
}

.sk-chase {
  animation: sk-chase 2.5s infinite linear both;
}

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@media (max-width: 1300px) {
  header .logo {
    padding: 0;
  }
}
@media (max-width: 992px) {
  .logo {
    width: 25%;
  }

   #logo-prop {
    width: 55%;
  }

  .logo img{
    width: 6em;
  }

  header span .title {
    display: none;
  }
}
@media (max-width: 768px) {
  header .logo img{
    width: 5.75em;
  }
}
@media (max-width: 576px) {
  header #logo-prop {
    width: 25%;
  }

  header .logo img{
    width: 4.5em;
  }
}


/* NAVBAR */

.navbar {
  display: flex;
  justify-content: space-evenly;
  padding: 0.5em 0;
  position: relative;
  width: 50%;
}

.navbar ul {
  list-style: none;
  margin: 0;
  width: 90%;
}

.navbar a {
  color: white;
  font-size: .75em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.nav-prop ul {
  width: 80%;
}

@media (max-width: 1300px) {
  .navbar {
    padding: 0;
  }

  .navbar ul {
    width: 100%;
  }

  .nav-prop ul {
    width: 80%;
  }
}
@media (max-width: 1200px) {
  .navbar a {
    font-size: .675em;
  }
  .nav-link {
    padding: 0.5em .5em;
  }
}
@media (max-width: 992px) {
  .navbar ul {
    display: none;
  }
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--color22);
  transition: 0.3s;
}

.dropdown {
  position: relative;
} 

.dropdown-toggle::after {
  display: none;
}

.dropdown:hover .subnav {
  display: block;
}

#toggle {
  display: none;
}

@media (max-width: 992px) {
  #toggle{
    display: block;
    font-size: 2em;
  }
}
@media (max-width: 768px) {
  .navbar-toggle {
    font-size: 1.75em;
  }
}
@media (max-width: 576px) {
  .navbar-toggle {
    font-size: 1.5em;
  }
}

.open-nav .navbar-toggle {
  margin-left: 0;
  position: absolute;
  top: 30px;
}

.navbar-toggle {
  color: var(--color33);
  cursor: pointer;
  font-size: 1.75em;
  line-height: 0;
  transition: 0.5s;
}

.open-nav {
  background: var(--color11);
  bottom: 0;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  transition: 0.3s;
  width: 100%;
  z-index: 999;
}

.open-nav ul {
  background-color: var(--color44);
  border-radius: 10px;
  display: block;
  overflow-y: auto;
  padding: 10px 0;
  position: absolute;
  transition: 0.3s;
  width: 90%;
}

.open-nav a {
  color: var(--color11);
  font-size: 1em;
  padding: 20px 0;
  text-align: center;
}

@media (max-width: 576px) {
  .open-nav a {
    font-size: .875em;
    font-weight: 300;
    padding: 14px 0;
  }
}

.dropdown {
  position: relative;
}

.dropdown .subnav {
  background-color: var(--color11);
  border-radius: 1em;
  display: none;
  list-style: none;
  margin-right: 10%;
  padding: 0.75em;
  position: absolute;
  width: 110%;
  z-index: 2;
}

.dropdown .subnav li {
  padding: 0.75em 0;
  text-align: center;
}

.dropdown .subnav a {
  color: var(--color33);
  display: block;
  font-size: .675em;
}

.dropdown .subnav a:hover {
  color: var(--color22);
  cursor: pointer;
}

.dropdown .subnav a img {
  border-radius: 5px;
  height: 1em;
  margin-left: 0.5em;
  width: 1.75em;
}

.dropdown.open .subnav:before {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

@media (max-width: 1200px) {
  .dropdown .subnav {
    margin-left: -20%;
    width: 140%;
  }

  .dropdown .subnav a {
    color: var(--color33);
    display: block;
    font-size: .563em;
  }
} 
@media (max-width: 992px) {

  .dropdown .subnav {
    background-color: var(--color33);
    display: block;
    margin-left: 0;
    position: relative;
    width: 100%;
  }

  .dropdown .subnav li {
    padding: 0;
  }

  .dropdown .subnav a {
    color: var(--color11);
    font-size: .875em;
    padding: 10px 0;
  }

  #contacto {
    transition: transform 0.3s;
  }

  .dropdown.open #contacto {
    transform: translate3d(0, 100%, 0);
  }
} 

.dropdown.open .subnav:before {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

@media (max-width: 992px) {
  .dropdown .subnav {
    background-color: var(--color33);
    width: 100%;
  }

  .dropdown .subnav a {
    color: var(--color11)
  }
} 

.dropdown:hover .subnav {
  display: block;
}


/* LANGUAGES */

button:focus {
  outline: none;
}

#languages {
  padding-right: 2em;
  text-align: end;
  width: 20%;
}

@media (max-width: 992px) {
  #languages {
    padding-right: 0;
    width: 25%;
  }
}
@media (max-width: 576px) {
  #languages {
    padding-left: 0;
  }
}

.button-language {
  border: none;
  border-radius: 100%;
  margin: 0 .5em;
}

.button-language.button-active {
  cursor: default;
}

.button-language.button-active img {
  opacity: 50%;
}

.language-icon {
  width: 1.75em;
}

@media (max-width: 576px) {
  .button-language {
    margin: 0 .25em;
  }
}


/* ABOUT US */

#aboutUs {
  background-image: url('../assets/img/fondos/aboutUs.jpg');
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
  display: grid;
  height: 100vh;
}

#aboutUs .box-intro {
  align-self: center;
  background-color: rgba(43, 47, 46, .8);
  border-radius: 2em;
  justify-self: center;
  margin-top: 18em;
  padding: .375em;
  width: 60%;
}

#aboutUs .intro {
  align-self: center;
  color: var(--color44);
  font-size: 1.063em;
  line-height: 1.75em;
  margin: 1.5em;
  text-align: center;
}

@media (max-width: 1400px) {
  #aboutUs .box-intro {
    margin-top: 14em;
    padding: .25em;
    width: 65%;
  }

  #aboutUs .intro {
    font-size: 1em;
    margin: 1.25em;
  }
}
@media (max-width: 1200px) {
  #aboutUs .box-intro {
    margin-top: 11em;
    width: 70%;
  }

  #aboutUs .intro {
    line-height: 1.5em;
  }
}
@media (max-width: 992px) {
  #aboutUs .intro {
    font-size: .813em;
    line-height: 1.75em;
    margin: 1em;
  }
}
@media (max-width: 768px) {
  #aboutUs {
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 40em;
  }

  #aboutUs .box-intro {
    margin-top: 9em;
    width: 80%;
  }
}
@media (max-width: 576px) {
  #aboutUs {
    background-image: url('../assets/img/fondos/aboutUsMobile.jpg');
  }

  #aboutUs .box-intro {
    margin-top: 11em;
    width: 85%;
  }

  #aboutUs .intro {
    line-height: 1.5em;
  }
}


/* WHAT WE DO */

#whatWeDo {
  display: grid;
  height: auto;
  margin-top: 5em;
  padding-top: 2em;
}

#whatWeDo .intro-whatWeDo {
  color: var(--color11);
  font-size: 1.25em;
  justify-self: center;
  margin: 2em 0;
  padding-top: 1em;
  text-align: center;
  width:60%;
}

#accordion {
  flex-wrap: wrap;
  margin: 2.5em 3em;
}

.services {
  display: grid;
  margin: 1.5em 0;
}

.services .card-service {
  background-color: var(--color22);
  border: none;
  border-radius: 100%;
  color: var(--color11);
  display: grid;
  height: 13.75em;
  justify-self: center;
  text-transform: uppercase;
  width: 13.75em;
}

.services .card-service:hover {
  background-color: var(--color11);
  color: var(--color22);
  cursor: pointer;
}

.services .material-symbols-outlined {
  font-size: 4.5em;
  font-weight: 500;
  margin-bottom: -0.5em;
  margin-top: 0.5em;
  text-align: center;
}

.services h6 {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
}

.services button {
  background-color: var(--color1);
  border: none;
  border-radius: 10px;
  color: var(--color3);
  justify-self: center;
  height: 1.5em;
  margin-top: -1.5em;
  width: 30%;
}

#travel, #refactoring, #building, #investment, #consultancy, #opportunities {
  justify-self: center;
  width: 80%;
}

.services p {
  border: 1px var(--color22) solid;
  border-radius: 10px;
  color: var(--color11);
  font-size: 1.125em;
  margin-top: 1em;
  padding: .15em;
}

@media (max-width: 1400px) {
  #whatWeDo .intro-whatWeDo {
    font-size: 1.125em;
    width: 70%;
  }

  #accordion {
    margin: 1.25em 3em;
  } 

  .services .card-service {
    height: 11.5em;
    width: 11.5em;
  }

  .services .material-symbols-outlined {
    font-size: 4em;
  }

  .services h6 {
    font-size: .875em;
  }

  #travel, #refactoring, #building, #investment, #consultancy, #opportunities {
    width: 85%;
  }

  .services p {
    font-size: 1em;
  }
}
@media (max-width: 1200px) {
  #whatWeDo .intro-whatWeDo {
    width: 75%;
  }

  #travel, #refactoring, #building, #investment, #consultancy, #opportunities {
    width: 95%;
  }
}
@media (max-width: 992px) {
  #whatWeDo .intro-whatWeDo {
    font-size: 1em;
  }

  #accordion {
    margin: 1em 3em;
  } 

  .services .card-service {
    height: 10em;
    width: 10em;
  }

  .services .material-symbols-outlined {
    font-size: 3.5em;
  }

  .services h6 {
    font-size: .813em;
  }

  .services p {
    font-size: .875em;
    letter-spacing: .063em;
  }
}
@media (max-width: 768px) {
  #whatWeDo .intro-whatWeDo {
    font-size: .875em;
    width: 80%;
  }

  .services .card-service {
    height: 9em;
    width: 9em;
  }

  .services .material-symbols-outlined {
    font-size: 3.25em;
  }

  .services h6 {
    font-size: .75em;
  }

  .services p {
    font-size: .813em;
  }
}
@media (max-width: 576px) {
  #accordion {
    margin: .5em 2em;
  } 

  .services {
    margin: 1em 0;
  }
}


/* PROPERTIES */

#properties {
  background-image: url('../assets/img/fondos/prop.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: auto;
  justify-content: inherit;
  margin-top: 5em;
  padding-top: 3em;
  width: 100%;
}

#properties h2 {
  color: var(--color11);  
  background: var(--color33);
  border-radius: 30px;
  font-size: 3em;
  justify-self: center;
  margin: 2em 0;
  opacity: 80%;
  text-align: center;
  text-transform: uppercase;
  width: 50%;
}

.flags-container {
  display: flex;
  justify-content: space-around;
  padding: 3.5em;
  margin: 2em 0;
}

.flags-container .flag {
  list-style: none;
  position: relative;
}

.flags-container .flag:hover .flag-style {
  filter: none;
}

.flag-style{
  background-size: cover;
  background-position: center;
  border-radius: 1.5em;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  height: 15em;
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: filter 200ms linear, transform 200ms linear;
  width: 20em;
}

.flag:hover .flag-style{
  cursor: pointer;
  transform: scale(1.05) translateZ(0);
}

.flagNotSelected {
  filter: brightness(0.5) saturate(1) contrast(1.2) blur(5px);
}

.flags-container:hover > .flag:not(:hover) .flag-style{
  filter: brightness(0.5) saturate(1) contrast(1.2) blur(5px);
}

#properties .zonaProps {
  background-color: var(--color11);
  border: 2px solid var(--color22);
  border-radius: 15px;
  color: var(--color44);
  font-size: 1.5em;
  justify-self: center;
  margin: 1em 0;
  overflow: hidden;
  padding: .5em 1.5em;
  position: relative;
  text-align: center;
}

#properties .zonaProps:hover {
  box-shadow: 1px 1px 25px 10px rgba(248, 247, 243, 0.4);
}

#properties .zonaProps:before {
  background: linear-gradient(120deg, transparent,rgba(248, 247, 243, 0.4),transparent);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: all 650ms;
  width: 100%;
}

#properties .zonaProps:hover:before {
  left: 100%;
}

.properties-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  justify-self: center;
  margin-bottom: 12em;
  width: 80%;
}

.property {
  margin: 1em;
  text-align: center;
}

.property img:hover {
  transform: scale(1.1);
}

.property img {
  border-radius: 50%;
  width: 15em;
}

@media (max-width: 1480px) {
  #properties h2 {
    font-size: 2.5em;
    width: 60%;
  }

  .flags-container {
    margin: 1.5em;
  }

  .properties-container {
    margin-bottom: 10em;
  }

  .property img {
    width: 12em;
  }
}
@media (max-width: 1200px) {
  #properties h2 {
    width: 70%;
  }

  .flags-container {
    margin: 1em 0;
  }

  .properties-container {
    margin-bottom: 8em;
  }

  .flag-style{
    height: 12.75em;
    width: 17em;
  }

.property img {
    width: 10em;
  }
}
@media (max-width: 992px) {
  #properties h2 {
    font-size: 2.25em;
  }

  .flags-container {
    margin: .5em;
  }

  .properties-container {
    margin-bottom: 6em;
  }

  .flag-style{
    height: 9em;
    width: 12em;
  }

.property img {
    width: 7.5em;
  }
}
@media (max-width: 768px) {

  #properties {
    background-image: none;
    background-color: var(--color22);
  }

  #properties h2 {
    font-size: 2em;
    margin: 1em 0;
    width: 80%;
  }

  .properties-container {
    margin-bottom: 4em;
  }

  .flag-style{
    height: 7em;
    width: 8.75em;
  }

  .property img {
    width: 6em;
  }
}
@media (max-width: 576px) {

  #properties h2 {
    font-size: 1.75em;
    margin: 0;
    width: 90%;
  }

  .flags-container {
    align-items: center;
    flex-direction: column;
    padding-top: 2.5em;
  }

  .properties-container {
    display: flex;
    margin-bottom: 2em;
  }

  .flags-container .flag {
    padding: 1.75em 0;
  }

  .flag-style{
    height: 10.5em;
    width: 14em;
  }

  .properties-container {
    flex-direction: column;
  }
  
  .property img {
    margin: 1em 0;;
    width: 10em;
  }
}


/* CONTACTO */

#contact {
  display: grid;
  height: 100%;
  margin: 2.5em 0;
}

#contact h2 {
  color: var(--color11);
  font-size: 3em;
  margin: 1.5em 0;
  text-align: center;
  text-transform: uppercase;
}

#contact .intro-contact {
  color: var(--color11);
  font-size: 1.25em;
  justify-self: center;
  text-align: center;
  width:60%;
}

#contact .contact-container {
  justify-content: center;
  margin: 2em 13em;
}

.flip-container {
  margin: 1.5em;
  float: left;
  width: 30%;
}

.flip-container:hover .flipper {
  cursor: pointer;
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  border-radius: 20px;
  font-size: 30px;
  height: 4em;
  text-align: center;
  width: 10em;
}

.flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;
}

.front, .back {
  backface-visibility: hidden;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  background-color: var(--color11);
  color: white;
  z-index: 2;
}

.front i {
  align-self: center;
  font-size: 1.25em;
  justify-self: center;
}

#insta {
  font-size: 1.5em;
  position: relative;
}

.back {
  background-color: var(--color22);
  transform: rotateY(180deg);
}

.back p {
  align-self: center;
  font-size: .75em;
  margin: 0px;
  border-radius: 20px;
  color: var(--color11);
  justify-self: center;
}

@media (max-width: 1585px) {
  #contact .contact-container {
    margin: 2em 7.25em;
  }
}
@media (max-width: 1400px) {
  #contact {
    margin: 0;
  }

  #contact h2 {
    font-size: 2.5em;
    margin: 2.25em 0 .5em 0;
  }

  #contact .intro-contact {
    font-size: 1.125em;
    margin: 1em 0;
    width: 70%;
  }

  #contact .contact-container {
    margin: 0 1em 3em 1em;
  }

  .flip-container {
    margin: 1em 2em;
  }

  .flip-container, .front, .back {
    height: 3.5em;
    width: 8.5em;
  } 

  .back p {
    font-size: .625em;
  }
}
@media (max-width: 1200px) {
  #contact .intro-contact {
    margin: 1em 0;
    width: 75%;
  }

  .flip-container {
    margin: .75em 1.75em;
  }

  .flip-container, .front, .back {
    height: 3em;
    width: 6.75em;
  } 

  .back p {
    font-size: .5em;
  }
}
@media (max-width: 992px) {
  #contact h2 {
    font-size: 2.25em;
    margin-top: 1.25em;
  }

  #contact .intro-contact {
    font-size: 1em;
  }

  .flip-container {
    margin: .75em 1em;
  }

  .flip-container, .front, .back {
    height: 2.75em;
    width: 6em;
  } 

  .front i {
    font-size: 1em;
  }

  .back p {
    font-size: .438em;
}

  #insta {
    font-size: 1.25em;
  }
}
@media (max-width: 768px) {
  #contact h2 {
    font-size: 2em;
  }

  #contact .intro-contact {
    font-size: .875em;
    width: 80%;
  }

  #contact .contact-container {
    justify-content: center;
    margin: 0 .4em 2.25em 0;
  }

  .flip-container {
    margin: .75em .5em;
  }

  .flip-container, .front, .back {
    width: 5.375em;
  }

  .back p {
    font-size: .375em;
  }
}
@media (max-width: 576px) {
  #contact h2 {
    font-size: 1.75em;
    margin-top: 3em;
  }

  #contact .intro-contact {
    width: 90%;
  }

  .flip-container, .front, .back {
    width: 9em;
  }

  .flip-container {
    margin: .5em;
  }

  .back p {
    font-size: .5em;
  }
} 


/* FOOTER */

footer {
  align-content: center;
  background-color: var(--color11);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 3.5em;
  width: 100%; 
}

footer #copy {
  align-self: center;
  color: var(--color44);
  justify-self: center;
  text-align: center;
  margin-top: auto;
}

@media (max-width: 1400px) {
  footer {
    height: 2.75em;
  }

  footer #copy {
    font-size: .875em;
  }
} 
@media (max-width: 1200px) {
  footer {
    height: 2.5em;
  }
} 
@media (max-width: 768px) {
  footer {
    height: 2.25em;
  }

  footer #copy {
    font-size: .75em;
  }
} 

/* PAGINA PROP */

#main-prop {
  display: grid;
  flex: 1;
  height: 100vh;
}

#main-prop .flags-container {
  margin-top: 6em;
}

#main-prop .flags-container .flag-style {
  height: 9em;
}

#main-prop #prop-container {
  display: flex;
  justify-content: center;
}

#main-prop .properties-container {
  margin-bottom: 4em;
  width: 70%;
}

#main-prop .property {
  margin: 1em 1.5em;
}

#main-prop .property img {
  width: 11em;
}

#main-prop #prop-container.properties-active  {
  justify-content: center;
}

#main-prop .properties-active .properties-container{
  align-content: baseline;
  margin-left: 5%;
  width: 10%;
}

#main-prop .properties-active .properties-container .property{
  margin: 1em .5em;
}

#main-prop .properties-active .properties-container img{
  width: 7em;
}

#main-prop .properties-active #property-details-container {
  margin: 0 3em 0 5%;
  width: 40%;
}

#main-prop #property-details-container h3 {
  margin: .5em 0;
  text-align: center;
  text-transform: uppercase;
}

.swiper-container {
  margin: 1.5em auto;
  max-width: 700px; 
  position: relative;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

.swiper-button-next, .swiper-button-prev {
  background-color: var(--color11);
  border-radius: 50%;
  color: var(--color33);
  cursor: pointer;
  font-weight: 700;
  height: 3.75em;
  width: 3.75em;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 2.5em;
}

.swiper-button-next {
  margin-right: -0.325em;
}

.swiper-button-prev {
  margin-left: -0.325em;
}

#main-prop .properties-active .miniature-images-container {
  display: block;
  margin: 3em 3em 0 0;
  margin-top: -27em;
  max-height: 25em;
  overflow-y: auto;
  width: 25%;
  
}

#main-prop .properties-active .miniature-images-container img {
  border: 2px solid transparent;
  cursor: pointer;
  height: 5.5em;
  margin: 0;
  object-fit: cover;
  transition: border-color 0.2s ease-in-out;
  width: 8.5em;
}

#main-prop .properties-active .miniature-images-container img:hover {
  border-color: var(--color11)
}

.miniature-images-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

@media (max-width: 1695px) {
  #main-prop .properties-active .properties-container {
    margin-left: 5%;
  }

  #main-prop .properties-active #property-details-container {
    margin: 0 3em 0 5%;
    width: 45%;
  }

  #main-prop .properties-active .miniature-images-container {
    margin: -25em 2em 0 0;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 4.75em;
    width: 7.5em;
  }
}
@media (max-width: 1400px) {
  #main-prop .flags-container .flag-style {
    height: 7em;
    width: 15em;
  }

  #main-prop .properties-active .properties-container .property{
    margin: .75em .5em;
  }

  #main-prop .property img {
    width: 9em;
  }

  #main-prop .properties-active .properties-container img {
    width: 6em;
  }

  #main-prop #property-details-container h3 {
    font-size: 1.5em;
  }

  .swiper-container {
    max-width: 550px; 
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 2em;
  }

  .swiper-button-next, .swiper-button-prev {
    height: 3em;
    width: 3em;
  }

  #main-prop .properties-active .miniature-images-container {
    margin-top: -21.5em;
    max-height: 19.5em;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 4em;
    width: 6em;
  }
}
@media (max-width: 1200px) {
  #main-prop .properties-container {
    width: 80%;
  }

  #main-prop .properties-active .properties-container {
    margin-left: 6%;
  }

  #main-prop .properties-active .properties-container img {
    width: 5.5em;
  }

  #main-prop .properties-active #property-details-container {
    margin-left: 10%;
  }

  .swiper-container {
    max-width: 450px; 
  }

  #main-prop .properties-active .miniature-images-container {
    margin-top: -17.5em;
    max-height: 16em;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 3.5em;
    width: 5.5em;
  }
}
@media (max-width: 992px) {
  #main-prop .flags-container {
    padding-bottom: 2em;
  }

  #main-prop .flags-container .flag-style {
    height: 5em;
    width: 11em;
  }

  #main-prop .property {
    margin: .75em 1.5em;
  }

  #main-prop .property img {
    width: 7.5em;
  }

  #main-prop .properties-container {
    margin-bottom: 3em;
  }

  #main-prop .properties-active .properties-container .property{
    margin: .5em;
  }

  #main-prop .properties-active .properties-container {
    margin-left: 9%;
  }

  #main-prop .properties-active #property-details-container {
    margin-left: 8%;
  }

  #main-prop .properties-active .properties-container img {
    width: 5em;
  }

  #main-prop #property-details-container h3 {
    font-size: 1.25em;
  }

  .swiper-container {
    max-width: 350px; 
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.5em;
  }

  .swiper-button-next, .swiper-button-prev {
    height: 2.25em;
    width: 2.25em;
  }

  #main-prop .properties-active .miniature-images-container {
    margin-top: -14em;
    max-height: 13em;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 2.75em;
    width: 4em;
  }
}
@media (max-width: 768px) {

  #main-prop .flags-container .flag-style {
    height: 4em;
    width: 7.5em;
  }

  #main-prop .property img {
    width: 6em;
  }

  #main-prop .properties-active #property-details-container {
    margin-right: 1.25em;
  } 

  #main-prop .properties-active .properties-container img {
    width: 4em;
  }

  #main-prop #property-details-container h3 {
    font-size: 1em;
  }

  .swiper-container {
    max-width: 275px; 
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1em;
  }

  .swiper-button-next, .swiper-button-prev {
    height: 1.75em;
    width: 1.75em;
  }

  #main-prop .properties-active .miniature-images-container {
    margin-top: -11.5em;
    max-height: 10em;
    width: 20%;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 2em;
    width: 3em;
  }
}
@media (max-width: 576px) {
  #main-prop .flags-container {
    flex-direction: row;
    margin-bottom: 0;
    padding: 0 ;
  }

  #main-prop .flags-container .flag-style {
    height: 4.75em;
    width: 5.75em;
  }

  #main-prop .properties-container {
    flex-direction: row;
  }

  #main-prop .property {
    margin: 0 .375em;
  }
  
  #main-prop .property img {
    width: 5em;
  }

  #main-prop .properties-active #property-details-container {
    width: 100%;
  }

  #main-prop .properties-active .properties-container img {
    margin: 0;
    width: 3em;
  }

  #main-prop #property-details-container h3 {
    font-size: .75em;
  }

  .swiper-container {
    margin: .75em auto;
    max-width: 250px; 
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1em;
  }

  .swiper-button-next, .swiper-button-prev {
    height: 1.5em;
    width: 1.5em;
  }

  #main-prop .properties-active .miniature-images-container {
    margin: 0;
    width: 100%;
  }

  #main-prop .properties-active .miniature-images-container img {
    height: 1.75em;
    margin: 0;
    width: 2.5em;
  }
}

/* DESCRIPTION PROPERTIES */

#logo-description {
  display: flex;
  margin: 2em 0 1em 0;
}

#logo-description img {
  width: 9.25em;
}

#logo-description span {
  margin-left: -1em;
  text-transform: uppercase;
}

#logo-description span h1{
  font-size: 1.75em;
  font-weight: 400;
}

#logo-description span p{
  font-size: .75em;
}

.property-description {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2em 0 1.5em 0;
  text-align: center;
}

.property-description hr {
  border-bottom: 1.25em solid var(--color11);
  border-top: 1.25em solid var(--color11);
  margin: 0;
}

.property-description .first-description {
  font-size: .875em;
  padding: 0 1em;
  text-transform: uppercase;
  width: 32%;
}

.more-info {
  font-size: .875em;
  letter-spacing: 0.063em;
  margin-bottom: .5em;
  padding: 1em 2em;
  text-align: justify;
}

#building-rooms {
  align-items: center;
  display: flex;
  margin: 1.5em 0 0 2em;
}

.building {
  width: 2.75em;
}

#char-ser {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
  text-align: start;
}

#char-ser div {
  margin: .75em 1em;
  width: 50%;
}

#char-ser div h6{
  font-size: .875em;
  letter-spacing: 0.063em;
  line-height: 1.5;
  min-height: 2em;
  text-decoration: underline;
}

#char-ser .lists li {
  font-size: .875em;
  letter-spacing: 0.063em;
  margin-left: 1em;
}

#more {
  height: auto;
  margin: 0 0 3em 0;
  padding: .125em .75em;
  width: 20em;
}

#more a {
  font-size: 1em;
}

@media (max-width: 1400px) {
  #logo-description img {
    width: 7.75em;
  }

  #logo-description span h1{
    font-size: 1.25em;
  }
  
  #logo-description span p{
    font-size: .5em;
  }

  .property-description {
    margin-top: 1.75em;
  }
  
  .property-description hr {
    border-bottom: 1.25em solid var(--color11);
    border-top: 1.25em solid var(--color11);
  }
  
  .property-description .first-description {
    font-size: .813em;
  }

  .more-info {
    font-size: .813em;
    padding: .75em 2.25em;
  }

  .building {
    width: 2.5em;
  }
  
  #char-ser div {
    margin: .75em;
  }

  #char-ser div h6 {
    font-size: .813em;
  }

  #char-ser .lists li {
    font-size: .813em;
  }

  #more {
    padding: .125em .625em;
    width: 17em;
  }
  
  #more a {
    font-size: .875em;
  }
}
@media (max-width: 1200px) {
  #logo-description {
    margin: 1.25em 0 .75em 0;
  }

  #logo-description img {
    width: 6.5em;
  }

  #logo-description span h1{
    font-size: 1em;
    margin-bottom: 0.25em;
  }
  
  #logo-description span p{
    font-size: .438em;
  }

  .property-description {
    margin: 1.5em 0 1em 0;
  }

  .property-description hr {
    border-bottom: 1.375em solid var(--color11);
    border-top: 1.375em solid var(--color11);
  }
  
  .property-description .first-description {
    font-size: .75em;
  }

  .more-info {
    font-size: .75em;
  }

  #building-rooms {
    margin-left: 1.5em ;
  }

  .building {
    width: 2.25em;
  }

  #char-ser {
    margin-top: 1.25em;
  }
  
  #char-ser div h6 {
    font-size: .75em;
  }

  #char-ser .lists li {
    font-size: .75em;
  }

  #more {
    line-height: 1.2;
    padding: 0.125em 0.5em;
    width: 14em;
  }
  
  #more a {
    font-size: .813em;
  }
}
@media (max-width: 992px) {
  #logo-description img {
    width: 5.25em;
  }

  #logo-description span h1{
    font-size: .875em;
  }

  .property-description {
    margin-top: 1.25em;
  }
  
  .property-description .first-description {
    font-size: .625em;
  }

  .more-info {
    font-size: .625em;

  }

  #building-rooms {
    margin: 1em 0 0 1.25em ;
  }

  .building {
    width: 2em;
  }
  
  #char-ser div {
    margin: .5em;
  }
  
  #char-ser div h6 {
    font-size: .625em;
  }

  #char-ser .lists li {
    font-size: .625em;
  }

  #more {
    padding-bottom: .375em;
    width: 12em;
  }
  
  #more a {
    font-size: .75em;
  }
}
@media (max-width: 768px) {
  #logo-description {
    margin: .75em 0 .25em 0;
  }

  #logo-description img {
    width: 4.25em;
  }

  #logo-description span {
    margin-left: -.75em;
  }

  #logo-description span h1 {
    font-size: .75em;
    font-weight: 300;
  }

  #logo-description span p {
    font-size: .375em;
  }

  .property-description {
    margin: 1em 0 .5em 0;
  }
  
  .property-description hr {
    border-bottom: 1em solid var(--color11);
    border-top: 1em solid var(--color11);
  }
  
  .property-description .first-description {
    font-size: .5em;
  }

  .more-info {
    font-size: .563em;
  }

  #building-rooms {
    margin-top: .75em;
  }

  .building {
    width: 1.75em;
  }
  
  #char-ser {
    margin-top: 1em;
  }
  
  #char-ser div {
    margin: .25em;
  }

  #char-ser div h6 {
    font-size: .563em;
  }

  #char-ser .lists li {
    font-size: .563em;
  }

  #more {
    line-height: 1;
    width: 10em;
  }
  
  #more a {
    font-size: .625em;
  }
}
@media (max-width: 576px) {
  #logo-description img {
    width: 3em;
  }

  #logo-description span {
    margin-left: -.25em;
  }

  #logo-description span h1 {
    font-size: .625em;
  }

  #logo-description span p {
    font-size: .313em;
  }

  .property-description {
    margin: .5em 0 0 0;
  }

  .property-description .first-description {
    font-size: .438em;
  }

  .more-info {
    font-size: .438em;
    padding: 0.25em 1.25em
  }

  #building-rooms {
    margin-left: .5em;
  }

  .building {
    width: 1.25em;
  }
  
  #char-ser div h6 {
    font-size: .438em;
  }

  #char-ser .lists li {
    font-size: .438em;
  }

  #more {
    line-height: .8;
    margin-bottom: 2em;
    width: 8em;
  }
  
  #more a {
    font-size: .5em;
  }
}