/**** GENERAL & PSEUDO CLASSES *****/

body{ -webkit-font-smoothing: antialiased; }
#main-container{ opacity: 0; transition: all .4s ease; -moz-transition: all .4s ease; -webkit-transition: all .4s ease;  }
.show-container{ opacity: 1 !important; }

.text-white{ color: #fff; }
.alt-text{ font-family: 'Playfair Display','Times New Roman', serif; font-weight: bold; font-style: italic; }
p{ font-size: 14px; color: #a6a5a5; line-height: 1.75  }
.facebook{ color: #3c5a97 !important; }
.twitter{ color: #55abed !important; }


.pad-large{ padding: 99px 0px 99px 0px; }
.pad-top{ padding-top: 99px; }
.pad-medium{ padding: 66px 0px 66px 0px; }

#loader{ opacity: 0; position: fixed; top: 0px; height: 100%; width: 100%; background: #ffffff; z-index: 999; }
#loader span{ display: block; margin-top: 22px; }
.show-loader{ opacity: 1 !important; }
b{ color: #5b5a5a }

/*** SLIDERS ****/

.slide-content h1{ font-size: 39px; font-weight: normal; color: #fff; line-height: 1.1; }
.slide-content h2{ font-size: 20px; font-weight: normal; color: #222; line-height: 3; }

/**** COMMON PAGE ELEMENTS ****/

.page-title h6{ text-transform: uppercase; font-size: 14px; position: relative; }
.line{ width: 100%; background: #222; height: 4px; margin: 2px 0px 20px 0px; }
#habilidades .line{ width: 100%; background: #fff; height: 4px; margin: 2px 0px 20px 0px; }

.adjectives{ font-family: 'Playfair Display','Times New Roman', serif; font-style: italic; font-size: 39px; }
.adjectives li{ list-style: none; line-height: 1.25; }

.dropcap { float: left; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px;  }

.btn{ cursor: pointer; display: inline-block; border: 3px solid #222222; padding: 22px 28px 22px 28px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; }


/***** NAVIGATION *****/

#navigation{ height: 147px; overflow: hidden; padding-top: 26px; position: fixed; top:0px; width: 100%; z-index: 998; background: #fff; transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; }
/*#navigation i{ font-size: 20px; color: #a6a5a5; position: relative; bottom: 5px;}*/

.shrink-nav{ height: 80px !important; padding-top: 16px !important; }
.shrink-nav #logo img{ max-width: 180px !important; margin-top: 0px; }
.shrink-nav #menu{ padding-top: 12px; }
.shrink-nav #menu-holder-idioma { display: none; }

#logo img{ max-width: 200px; margin-bottom: 10px; margin-top: 10px; transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; }

#menu-idioma{ margin: 0px; list-style: none; display: inline-block; padding-bottom: 10px; }
#menu-idioma li{ float: left; margin-right: 9px; font-weight: bold; }
#menu-idioma li a{ font-size: 12px; color: #222222; }

#menu{ margin: 0px; list-style: none; display: inline-block; }
#menu li{ float: left; margin-right: 9px; font-weight: bold; }
#menu li a{ font-size: 12px; color: #222222; }

#mobile-toggle{ position: absolute; top: 60px; right: 22px; display: none; }
#mobile-toggle i{ cursor: pointer; font-size: 25px; color: #222222; }

.btn-idioma{ cursor: pointer; display: inline-block; border: 2px solid #222222; padding: 5px 5px 5px 5px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 9px; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn-idioma:hover,
.btn-idioma:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }


/***** HOME ******/

#home-slider{ position: relative; margin-top: 147px; }
#home-slider .slides li{ height: 468px; background-size: cover !important; background-attachment: fixed !important; position: relative;  }
#home-slider .slides li:before{ content: ''; position: absolute; height: 100%; width: 100%; background-color: #222222; opacity: 0.4; }

/***** EMPRESA *****/

section#empresa { background-color: rgba(255, 255, 255, 1) }
.empresa-paragraph{ padding-top: 48px; }
.empresa-paragraph p{ font-size: 14px; color: #a6a5a5; text-align: justify; line-height: 1.75  }

/***** HABILIDADES *****/

#habilidades{ background: #68859d; }

#achievements-slider .slides li h1{ font-size: 100px; line-height: 0.9; color: white; }
#achievements-slider .slides li i{ position: relative; right: 20px; font-size: 85px; color: white; }
#achievements-slider .title{ display: block; font-family: 'Playfair Display','Times New Roman', serif; font-size: 22px; font-style: italic; line-height: 1.4; color: white; }
#achievements-slider .since{ font-family:'Montserrat'; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: bold; color: white; }

.skill{ overflow: hidden; margin-bottom: 32px; }
.skill span{ font-size: 14px; font-weight: bold; color: white; }
.skill-points{ list-style: none; margin: 0; overflow: hidden; display: inline-block; }
.skill-points li{ float: left; width: 12px; height: 12px; border-radius: 50%; margin-right: 11px; }
.skill-points li:last-child{ margin-right: 0px; }
.skill-points .filled{ background: #fff; }
.skill-points .un-filled{ border: 2px solid #fff; }

/***** CLIENTES *****/

#slogan{ background: url('../img/clients.jpg'); background-attachment: fixed; background-size: cover; padding: 130px 0px 130px 0px; opacity: 0.8; }

#client-text{ font-size: 18px; color: #fff; display: inline-block; margin-top: 11px; }
#client-text i{ color: #e82646; font-size: 22px; } 

.client{ text-align: center; }
.client img{ max-width: 90%; opacity: 0.7	3; }

/**** EDUCATION & EMPLOYMENT *****/

#education{ margin-bottom: 99px; }

.milestones{ overflow: hidden; list-style: none; padding-top: 0px; }
.milestones li{ overflow: hidden; border-bottom: 2px solid #eaebeb; padding-bottom: 11px; margin-bottom: 22px; }
.milestones li .title{ font-size: 14px; line-height: 1;  }
.milestones li .institution{ font-size: 14px; font-family: 'Playfair Display','Times New Roman', serif; font-style: italic; color: #949494; position: relative; bottom: 4px;  }
.milestones li .time{ text-transform: uppercase; font-size: 12px; }

.milestones .icon-holder{ margin-right: 11px; float: left; }
.milestones .icon-holder.mod{ height: 70px; }
.milestones .icon-holder i{ font-size: 40px; }

/**** SERVICIOS ****/

section#servicios {  }
.service-p{ opacity: 0; display: block; float: none; clear: both; max-height: 0px; margin-bottom: 0px !important; transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; overflow: hidden; }
.open-service{ max-height: 100% !important; margin-top: 22px !important; margin-bottom: 22px !important; opacity: 1 !important; }

.service-more{ cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.cita-servicios h1{ font-size: 39px; font-weight: normal; color: #fff; line-height: 1.1; }

.asesoria-inmob-paragraph p{ text-align: justify; }

.btn-asesoria-inmob-promo{ cursor: pointer; display: inline-block; width: 100%; border: 3px solid #222222; padding: 14px 70px 14px 70px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn-asesoria-inmob-promo:hover,
.btn-asesoria-inmob-promo:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }

/***** QUOTE DIVIDER *****/

#quote-divider{ position: relative; }

#quote-slider .slides li{ height: 368px; position: relative; background-size: cover !important; background-attachment: fixed !important; }
#quote-slider .slides li:before{ content: ''; position: absolute; height: 100%; width: 100%; background: #ffffff; opacity: 0.3; }
#quote-slider .flex-control-paging li a{ border: 2px solid #222222; }
#quote-slider .flex-control-paging li a:hover{ background: #222222; }
#quote-slider .flex-control-paging li a.flex-active{ background: #222222; }
#quote-slider .slides li h1{ color: #222222; }

/***** WORK *****/

#projects-container{ overflow: hidden; padding-top: 44px; margin-bottom: 130px; }

.project-wrapper{ float: left; margin-bottom: 30px; }
.project{ display: inline-block; width: 90%; position: relative; z-index: 1; }
.project-overlay{ position: absolute; z-index: 2; height: 100%; width: 100%; text-align: center; background: rgba(0,0,0,0.8); color: #fff; opacity: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease;  }
.project-overlay .title{ display: block; }
.project-overlay .thin-line{ height: 1px; background: #ffffff; width: 30px; display: inline-block; padding: 0px 11px 0px 11px; position: relative; bottom: 4px; }

.project:hover .project-overlay{ opacity: 1; padding: 22px; top: -7px; left: -7px; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease;  }

.view-btn{ font-family: 'Playfair Display','Times New Roman', serif; font-style: italic; margin-top: 4px; display: inline-block;  }

/***** PROJECT SINGLE *****/

.project-single-top .line{ height:2px; width: 100%; margin: 0px auto; opacity: 0.1; }
.project-single-top .close-project{ display: inline-block; margin: 0px 0px 44px 0px; font-size: 32px; cursor: pointer; opacity: 0.1; }

.project-details{ margin: 0; list-style: none; overflow: hidden; }
.project-details .date{ font-family: 'Playfair Display','Times New Roman', serif; font-style: italic; color: #949494; position: relative; bottom: 4px; }

.project-single{  padding-bottom: 99px; }

.project-single p{ font-size: 14px; color: #a6a5a5; line-height: 1.75; margin-top: 22px;  }

.closep-container{ text-align: center; opacity: 0.6; margin-top: 138px; }

.closep-container .line{ width: 38%; height: 2px; background: #222222; margin: 0; display: inline-block; position: relative; bottom: 9px; }
.closep-container i{ font-size: 26px; width: 20%; display: inline-block; cursor: pointer;  }

.project-slider .flex-control-paging li a{ border: 2px solid #222222; }
.project-slider .flex-control-paging li a:hover{ background: #222222; }
.project-slider .flex-control-paging li a.flex-active{ background: #222222; }

#ajax-container{ 
	overflow: hidden; 
	-webkit-transition: max-height 1s, opacity 0.5s; 
	transition: max-height 1s, opacity 0.5s; 
	-moz-transition: max-height 1s, opacity 0.5s;
	max-height: 1000px;
	opacity: 1;
}

.closed-container{ max-height: 0px !important; opacity: 0 !important;  }

/***** AREA DE CLIENTE *****/

section#area-clientes { background-color: rgba(255, 255, 255, 1) }
.area-clientes-paragraph{ padding-top: 48px; }
.area-clientes-paragraph p{ font-size: 14px; color: #a6a4a4; text-align: justify; line-height: 1.75; }
.area-clientes-paragraph a{ color: #000; }

.btn-areaclientes{ cursor: pointer; display: inline-block; border: 3px solid #222222; padding: 14px 18px 14px 18px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; float: right; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn-areaclientes:hover,
.btn-areaclientes:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
/*span.btn-areaclientes{ color: black; }*/

/***** CONTACTO *****/

section#contacto { background-color: rgba(78, 105, 127, 1); }
#contacto{ background: #eeeeee; padding: 130px 0px 130px 0px; }

#contacto-text{ font-size: 18px; display: inline-block; padding-top: 28px; float: right; }
#contacto-text .btn-contacto{ margin-left: 27px; }
#contacto-text a{ color: #222222; }

.btn-contacto{ cursor: pointer; display: inline-block; border: 3px solid #222222; padding: 22px 28px 22px 28px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; float: left; }
.btn-contacto:hover,
.btn-contacto:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }


/***** GOOGLE MAPS *****/
	  
.container{ width: 100%; margin: 0 auto; }
#map_container{ position: relative; }
#map{ height: 0; overflow: hidden; padding-bottom: 22.25%; padding-top: 30px; position: relative; }

/***** FOOTER *****/

#footer{ padding-top: 77px; padding-bottom: 180px; background: #222222; }
#uppercopy{ color: #bdc0c2; font-size: 12px; }
#lowercopy{ color: #6e6f70; font-size: 12px; padding-top: 4px; display: inline-block; }
#lowercopy i{ color: rgba(78, 105, 127, 1); font-size: 16px; }
#uppercopy i{ color: rgba(78, 105, 127, 1); font-size: 16px; }

footer-social{ list-style: none; display: inline-block; overflow: hidden; margin: 0; }
#footer-social li{ float: right; margin-right: 11px; font-size: 14px; }
#footer-social li a{ color: #9c9fa0; }

.spinner {
  margin: 105px auto;
  width: 40px;
  height: 10px;
  font-size: 10px;
}
.spinner > div {
  height: 100%;
  width: 100%;
  display: block;
  margin-bottom: 0.6em;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleX(0.8);
    background-color: #2e5865;
    box-shadow: 0 0 0 rgba(10, 10, 10, 0.1);
  }
  20% {
    -webkit-transform: scaleX(1);
    background-color: #00b192;
    box-shadow: 0 5px 6px rgba(10, 10, 10, 0.4);
  }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    background-color: #2e5865;
    transform: scaleX(0.8);
    -webkit-transform: scaleX(0.8);
    box-shadow: 0 0 0 rgba(10, 10, 10, 0.1);
  }
  20% {
    background-color: #00b192;
    transform: scaleY(1);
    -webkit-transform: scaleX(1);
    box-shadow: 0 5px 6px rgba(10, 10, 10, 0.4);
  }
}

/***** PROMOCIONES INMOBILIARIAS *****/

.titulo-inmo{ font-family: 'Playfair Display','Times New Roman', serif; font-style: italic; font-size: 30px; color: black; text-align: center; }


.btn-asesoria-inmob-alquiler{ cursor: pointer; display: inline-block; width: 100%; border: 3px solid #222222; padding: 14px 70px 14px 70px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; float: left; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn-asesoria-inmob-alquiler:hover,
.btn-asesoria-inmob-alquiler:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }

.btn-asesoria-inmob-venta{ cursor: pointer; display: inline-block; width: 100%; border: 3px solid #222222; padding: 14px 70px 14px 70px; text-align: center; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; float: right; color: #222; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn-asesoria-inmob-venta:hover,
.btn-asesoria-inmob-venta:active { background-color: #222; color: #fff; transition: background-color 0.3s ease-in, color 0.3s ease-in; }

#titulo-alquiler{ background-color: #0c0c0c; background-attachment: fixed; background-size: cover; padding: 80px 0px 80px 0px; opacity: 0.8; }