@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'avenirmedium';
    src: url('../fonts/avenir_medium-webfont.woff2') format('woff2'),
         url('../fonts/avenir_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'avenir_lt_std95_black';
    src: url('../fonts/avenirltstd-black-webfont.woff2') format('woff2'),
         url('../fonts/avenirltstd-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'avenir_lt_std45_book';
    src: url('../fonts/avenirltstd-book-webfont.woff2') format('woff2'),
         url('../fonts/avenirltstd-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'avenir_lt_std55_roman';
    src: url('../fonts/avenir-roman-webfont.woff2') format('woff2'),
         url('../fonts/avenir-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'myriad_probold';
    src: url('../fonts/myriad_pro_bold-webfont.woff2') format('woff2'),
         url('../fonts/myriad_pro_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolislight_italic';
    src: url('../fonts/metropolis-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?8t2kcq');
  src:  url('../fonts/icomoon.eot?8t2kcq#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8t2kcq') format('truetype'),
    url('../fonts/icomoon.woff?8t2kcq') format('woff'),
    url('../fonts/icomoon.svg?8t2kcq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-alberca:before {
  content: "\e900";
}
.icon-doble-planta:before {
  content: "\e901";
}
.icon-jardin:before {
  content: "\e902";
}
.icon-metros-cuadrados:before {
  content: "\e903";
}
.icon-patrimonio:before {
  content: "\e904";
}
.icon-recamaras:before {
  content: "\e905";
}
.icon-red:before {
  content: "\e906";
}
.icon-tina-de-bao:before {
  content: "\e907";
}
.icon-ubicacion:before {
  content: "\e908";
}




body{ padding-bottom:25px; color:#383838}
*{margin:0; padding:0; outline:none; text-decoration:none; list-style:none;font-family: 'avenirmedium';}
h1{font-family: 'avenir_lt_std95_black'; padding:20px 0 20px 20px}
h2{padding-bottom:20px}
p{padding-bottom:15px}


.header{ width:100%; height:100vh; background:url(../images/entrace.jpg) top center; background-size:cover; text-align:center}
.introhead{ padding-top:17vh; height:auto; margin-bottom:20px; }
.introhead h2{font-family:'avenir_lt_std95_black'; color:white; text-transform:uppercase; font-size:42px; text-shadow: 1px 2px 2px rgba(0,0,0, 0.4);}
.introhead p{font-family: 'avenir_lt_std45_book'; color:white; font-size:24px; line-height:24px; text-shadow: 1px 2px 2px rgba(0,0,0, 0.4);}
.poligono{width:100%; height:150px; position:absolute; bottom:0; background-color:#FFF; -webkit-clip-path: polygon(0 0%, 32% 62%, 100% 1%, 100% 100%, 99% 100%, 0 100%); clip-path: polygon(0 0%, 32% 62%, 100% 1%, 100% 100%, 99% 100%, 0 100%);}
.adora-logo-bottom{width:120px; height:auto; position:absolute; z-index:1000; left:20px; bottom:10px}

#content{ width:100%; height:auto; margin:0 auto}
section{ width:1000px; height:auto; margin:0 auto; padding:15px 0; clear:both}
.middlecontent{ width:calc(50% - 20px); padding:0 10px; height:auto; float:left}
.middlecontent h2{ padding-bottom:20px; font-size:24px}
.middlecontent img{ width:100%; height:auto; /*border-radius:20px*/}
.testimonial{font-family: 'metropolislight_italic'; color:#666; border-bottom:solid 3px #55b4b0; padding-top:35px}



h2{ font-size:18px}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top:20px
  /*border-radius:20px 20px 0 0*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  transition: 0.3s;
  font-size: 15px;
  width:33%;
}
.tab button:last-child {width:34%}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background: #55b4b0;/*linear-gradient(90deg, rgba(85,180,176,1) 0%, rgba(85,180,176,1) 35%, rgba(0,129,157,1) 100%);*/ color:white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.services { display:inline-block; width:100%; padding-top:25px}
.services li{width:33.33%; float:left; height:70px; line-height:15px; color:#383838}
.services li::before{font-family: 'icomoon'; content: "\e908"; font-size:25px; margin-right:10px;  color:#55b4b0 }
.services li span{ font-size:12px;padding-left:35px; font-weight:normal}

.photoleft{width:calc(50% - 10px); float:left; padding-right:10px; padding-top:20px}
.photoright{width:calc(50% - 10px); padding-left:10px; float:left;padding-top:20px}



.accordion {
  max-width: calc(100% - 20px); padding:20px 0 0 0;
  text-align: left;
  clear:both;
  margin:0 auto;
  color:#383838;
}
.accordion .info{ height:auto; display: flow-root;}

article {
  margin: 1em auto;
  /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);*/
  /*border-radius:10px;*/
}



.overview{ width:33.3%; float:left; padding:10px 0}
.accordion h2{ color:#55b4b0; width:100%; clear:both}
.overview .icons{ font-size:35px; width:50px; border:1px solid #CCC; /*border-radius:10px;*/ padding:5px; color:#55b4b0}
.overview li{ float:left}
.property{ line-height:15px; font-weight:normal; font-size:16px; padding-left:10px; }
.property span{ font-weight:bold; font-size:14px}
.address{ width:100%; margin-bottom:15px}
.address li{ float:left; width:50%}
.mapiframe{width:600px; height:400px; /*border-radius:20px;*/ margin:0 auto; border:0; margin-top:25px}



.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }


.chat{ width:40px; height:40px; position:fixed; bottom:10px; right:10px; z-index:10000; background:white;border-radius: 50%; padding:10px; border:solid 2px #ffa629}
.chat img{ width:40px; height:40px}


/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


@media only screen and (max-width: 800px) {
	.header{height:92.5vh !important}
	section{width: calc(100% - 20px); padding:20px 10px 0 10px}
	.middlecontent{width:100%; padding:0; height:auto; float:inherit}
	.tab button {width:33%;  padding:10px 0;}
	.tab button:last-child {width:34%}
	.services li{width:50%; float:left; height:70px; line-height:15px}
	.top10{ margin-top:10px}
	.photoleft{width:calc(50% - 5px);padding-right:5px; padding-top:10px}
	.photoright{width:calc(50% - 5px); padding-left:5px; padding-top:10px}
	.accordion {max-width: 100%; padding-top:20px}
	.overview{ width:50%;}
	.mapiframe{width:100%; height:300px}
	.chat{bottom:10px; right:10px;}
	.introhead p br{ display:none}
	.testimonial{ margin-bottom:35px}
	.poligono{-webkit-clip-path: polygon(0 20%, 46% 51%, 100% 0%, 100% 100%, 100% 100%, 0 100%); clip-path: polygon(0 20%, 46% 51%, 100% 0%, 100% 100%, 100% 100%, 0 100%);}
	.adora-logo-bottom{width:120px; height:auto; position:absolute; z-index:1000; left:10px; bottom:10px}
}