/* estilos del sitio web */

/*fuentes y fuentes CDN*/

/*estilos generales*/
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
html, body{opacity:0}
html{position:relative; min-height:100%; background: #e6e6e8;}
body{ background: #e6e6e8; padding-top:0px; outline: none; max-width: 2000px; margin: 0 auto; position: relative}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance:none;}
.error-valid{border:1px solid red !important;}
.row{margin-left:0px; margin-right:0px}
:focus { outline: none; }
.division-3 {left: 15px}
.division-4 {right: 15px}
.division-1,
.division-2 {opacity: 0;}
.division-1,
.division-2,
.division-3,
.division-4 {position: absolute; height: 100%; width: 1px; border-left: 1px solid rgba(0, 0, 0, .5); bottom: 0; z-index: 1050;}
.division-1.fd,
.division-2.fd,
.division-3.fd,
.division-4.fd{position: fixed}
.isotipo {position: fixed; bottom: 7px;background: url(../img/isotipo.png); background-repeat: no-repeat; background-size: 33px; height: 38px; width: 100%; z-index: 1000; background-position-x: center;}
.margin-40{margin-bottom: 40px;}
.margin-30{margin-bottom: 30px;}
.hc {height: 100%;}
.ocultar {opacity: 0; pointer-events: none;}
.bg {background-repeat:no-repeat;-ms-background-size: cover;-o-background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;width: 100%;height:auto;background-position:center;display:inline-block;}
.bg img{width: 100%;visibility: hidden;}
.arrow-bottom{background-image: url(../img/arrow-bottom.png); background-repeat: no-repeat; height: 17px; width: 35px; position: relative; bottom: 75px; margin: 0 auto; cursor: pointer; background-position: center;}
.arrow-bottom2{background-image: url(../img/arrow-bottom2.png); background-repeat: no-repeat; height: 17px; width: 35px; position: absolute; bottom: 75px; margin: 0 auto; cursor: pointer; background-position: center; right: 0; left: 0; margin-left: auto; margin-right: auto;}
@media (min-width: 768px){
    .division-3 {left: 51%;}
    .division-4 {opacity: 0;}
    .isotipo {bottom: 50px;  width: calc(100% - 75px);}
    .arrow-bottom{ bottom: 35px;}
}
@media (min-width: 992px){
    .division-2 {left: 37.2%; opacity: 1;}
    .division-3 {left: 64.4%}
}
@media (min-width: 1200px){
    .division-1 {left: 25.8%; opacity: 1;}
    .division-2 {left: 42.2%;}
    .division-3 {left: 58.6%}
    .division-4 {right: 0; left: 75.1%; opacity: 1;}
}

:root{
    --main: #e6e6e8;
    --texto: #1c1a1a;
    --cuerpo: #666666;

    --family: 'Poppins', sans-serif;
}

@-webkit-keyframes fadeIn {
    from { border-left: 3px solid transparent }
    to { border-left: 3px solid var(--texto); }
}

@keyframes fadeIn {
    from { border-left: 3px solid transparent }
    to { border-left: 3px solid var(--texto); }
}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

@-webkit-keyframes fadeOut {
    from { border-left: 3px solid var(--texto); }
    to { border-left: 3px solid transparent; }
}

@keyframes fadeOut {
    from { border-left: 3px solid var(--texto); }
    to { border-left: 3px solid transparent; }
}
.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

header {height: 75px; width: 100%; color: var(--texto); letter-spacing: 0.6px; padding-top: 10px; font-family: var(--family); position: fixed; top: 0; left: 0; background: #e6e6e8; z-index: 11100;}
header .info-1{ text-align: left; padding-left: 45px;}
header .info-1 #slogan{width: 155px; height: 35px;}
header .info-2{ text-align: right; padding-right: 45px; font-size: 12px;}
header .logo {margin: 0 auto; width: max-content;}
header .logo #logo { width: 200px; height: 35px; }
header ul {display: block; padding: 0px;}
header ul li {display: inline-block;}
header ul li a:active,
header ul li a:hover,
header ul li a:focus,
header ul li a {text-decoration: none; color: var(--texto); }
header ul li.negritas {margin-right: 10px;}
header ul li.negritas a {color: var(--texto); font-weight: bold;}
@media (min-width: 992px){
    header .logo #logo {width: 285px; height: 55px;}
    header {padding-top: 20px;}
}

.menu {position: fixed; bottom: 0; right: 0; height: calc(100vh - 75px); width: 75px; font-family: var(--family)}
.menu ul {padding: 0px; float: left; writing-mode: vertical-rl; transform: rotate(180deg); height: 95%; border-left: 1px solid var(--texto); color: var(--texto); text-transform: uppercase; letter-spacing: 0.6px; position: absolute; bottom: 0px; left: 0; margin: 0;}
.menu ul li {list-style-type: none; display: inline-block; height: 24.3%;}
.menu ul li div {max-height: max-content; margin-top: auto; margin-bottom: 0px; cursor: pointer;}
.menu ul li div a.active {border-left: 3px solid var(--texto);}
.menu ul li a:active,
.menu ul li a:hover,
.menu ul li a:focus,
.menu ul li a {text-decoration: none; color: var(--texto);}
@media (max-width: 767px){
    .menu {display: none;}
    header {display: none;}
    .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--main); border-color: var(--main); box-shadow: 1px 1px 1px #00000014; z-index: 1100; text-transform: uppercase; color: var(--texto)}
    .navbar-brand {padding: 9px 15px;}
    .navbar-brand .logo #logo{width: 150px; height: 30px;}
    .navbar-default .navbar-nav>li{padding: 10px 15px;}
    .navbar-default .navbar-nav>li>a {color: var(--texto); padding: 0px;}
    .navbar-default .navbar-nav>li>a.active {width: max-content; border-bottom: 2px solid var(--texto);}
}
@media (min-width: 768px){
    .navbar {display: none;}
}

.contenido{width: 100vw; height: 100vh;}
@media (min-width: 768px){
    .contenido{width: calc(100vw - 75px); height: calc(100vh - 75px); margin-top: 75px;}
}

.bloque-1 .logo {display: flex; justify-content: center; align-items: center; height: 100%;}
.bloque-1 .logo #logo{ width: 300px;}
.bloque-1 {height: 100vh; min-height: 400px;}
@media (min-width: 768px){
    .bloque-1 {height: calc(100vh - 75px); max-height: calc(100vh - 75px); min-height: 400px;}
}

.bloque-2 {height: auto; min-height: 400px; padding-top: 55px; position: relative;  padding-bottom: 55px;}
.bloque-2 .about {height: 100%; font-family: var(--family); color: var(--texto)}
.bloque-2 .about .info #slogan {width: 250px; height: 55px; margin-bottom: 30px;}
.bloque-2 .about .info .p {font-size: 12px; letter-spacing: 0.4px; line-height: 1.5;}
@media (min-width: 768px){
    .bloque-2 {height: calc(100vh - 75px); max-height: calc(100vh - 75px); min-height: 400px; padding-left: 15px; position: relative; }
    .bloque-2 .about .info {display: flex; justify-content: center; align-items: center; height: 100%;}
}
@media (min-width: 992px){
    .bloque-2 .about .info .p {width: 370px;}
    .bloque-2 .division-3 {opacity: 0;}
}
@media (min-width: 1200px){
    .bloque-2 .division-1,
    .bloque-2 .division-2 {opacity: 0;}
    .bloque-2 .division-3 {opacity: 1;}
}


.bloque-3 {height: auto; position: relative; padding-top: 0px; padding-bottom: 55px}
.bloque-3 .swiper-container { width: 80%; height: auto; margin-left: auto; margin-right: auto; }
.bloque-3 .swiper-slide { text-align: center; font-size: 18px; width: 200px; position: relative; }
.bloque-3 .swiper-slide .portada { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 200px; cursor: pointer; position: relative; }
.bloque-3 .swiper-slide .portada .hover  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 1); opacity: 0; transition: all 500ms ; -webkit-transition: all 500ms ; -moz-transition: all 500ms ; -ms-transition: all 500ms ; -o-transition: all 500ms ; background-repeat: no-repeat; background-size: 32px; background-position: center;}
.bloque-3 .swiper-slide .portada:hover .hover  {opacity: 1;}
/* .bloque-3 .swiper-slide .titulo h3{font-size: 12px; color: var(--cuerpo); font-family: var(--family); width: 83%; margin: 0px; margin-bottom: 10px; text-align: left;} */
.bloque-3 .swiper-slide .hover h3{font-size: 12px; color: #ffffff; font-family: var(--family); margin: 0px; margin-bottom: 10px; text-align: center; display: flex; justify-content: center; align-items: center; height: 100%;}
.bloque-3 .swiper-slide .titulo span {font-family: var(--family); font-size: 12px; position: absolute; top: 0px; right: 5px; color: var(--cuerpo);}
.bloque-3 .swiper-slide .subtitulo h3{font-size: 12px; color: var(--cuerpo); font-family: var(--family); width: 83%; margin: 0px; margin-top: 10px; width: 100%; text-decoration: underline;}
.bloque-3 .controles {margin-top: 45px;}
.bloque-3 .controles .arrow-left{background: url(../img/arrow-left.png); margin-left: auto; margin-right: 5px}
.bloque-3 .controles .arrow-right{background: url(../img/arrow-right.png); margin-left: 5px; margin-right: auto}
.bloque-3 .controles .arrow-left,
.bloque-3 .controles .arrow-right {background-repeat: no-repeat; background-size: 8px 14px; height: 24px; width: 14px; cursor: pointer;}
@media (min-width: 768px){
    .bloque-3 {height: calc(100vh - 75px); max-height: calc(100vh - 75px); min-height: 400px; padding-left: 15px; position: relative; padding-top: 55px;}
    .bloque-3 .swiper-container {margin-top: 15%}
}
@media (min-width: 992px){
    .bloque-3 .swiper-container {margin-top: 0px}
}


.bloque-4 {height: auto; min-height: 100vh; position: relative; padding-top: 0px; padding-bottom: 70px;}
.bloque-4 .contacto a,
.bloque-4 .contacto a:active,
.bloque-4 .contacto a:hover,
.bloque-4 .contacto a:focus,
.bloque-4 .contacto {font-family: var(--family); color: var(--texto); font-size: 12px; letter-spacing: 0.4px;}
.bloque-4 .contacto span {font-weight: bold;}
.bloque-4 .contacto .p.move {position: relative; padding: 0 15px;}
.bloque-4 .contacto .info {padding-top: 75px;}
.bloque-4 .contacto #formulario-contacto div{padding: 0}
.bloque-4 .contacto #formulario-contacto label{ width: 100%; margin-bottom: 10px; letter-spacing: 0.4px;}
.bloque-4 .contacto #formulario-contacto textarea,
.bloque-4 .contacto #formulario-contacto input{ width: 100%; border: none; background: #d1d1d475; margin-bottom: 10px; height: 25px;}
.bloque-4 .contacto #formulario-contacto button {border: none; background: transparent; border-bottom: 1px solid var(--texto); font-size: 14px; font-weight: bold;}
.bloque-4 .contacto #formulario-contacto textarea{resize: none; height: 60px; margin-bottom: 25px;}
@media (min-width: 768px){
    .bloque-4 {height: calc(100vh - 75px); max-height: calc(100vh - 75px); min-height: 400px; position: relative; padding-top: 65px;}
    .bloque-4 .contacto .info {display: flex; justify-content: center; align-items: center; height: 100%;}
    .bloque-4 .contacto .p.move {position: relative; padding-left: 15%;}
}
@media (min-width: 992px){
    .bloque-4 .contacto .p.move {padding-left: 0%;}
    .bloque-4 .division-3 {opacity: 0;}
}
@media (min-width: 1200px){
    .bloque-4 .division-3 {opacity: 1;}
    .bloque-4 .division-4 {opacity: 0;}
    .bloque-4 .contacto .p.move {padding-left: 42%;}
}
@media (min-width: 1500px){
    .bloque-4 .contacto .p.move {padding-left: 33%;}
}


/* .bloque-31 {margin: 50px auto; background: #fff; max-width: 800px; box-shadow: 0px 25px 30px -20px rgba(0, 0, 0, 0.2);} */
.bloque-31 .grid { margin: 0 auto; padding: 10px; max-width: 320px;}
.bloque-31 .grid-sizer {width: 150px}
.bloque-31 .grid-item { height: auto; margin-bottom: 30px; border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; text-align: center}
.bloque-31 .grid-item.fx1 { text-align: center}
.bloque-31 .grid-item.fx2 { text-align: left}
.bloque-31 .grid-item.fx3 { text-align: right}
.bloque-31 .grid-item img.fx1{width: 95%; }
.bloque-31 .grid-item img.fx2{width: 95%; }
.bloque-31 .grid-item img.fx3{width: 95%; }
.bloque-31 .grid-item img.fx4{width: 95%; }
.bloque-31 .grid-item img.fx5{width: 95%; }
@media(min-width: 580px){
    .bloque-31 .grid {max-width: 485px;}
    .bloque-31 .grid-item {width: 100%;}
}
@media (min-width: 768px){
    .bloque-31 .grid { width: calc(100vw - 190px); max-width: 1600px;}
    .bloque-31 .grid-sizer {width: 45%}
    .bloque-31 .grid-item {width: 45%;}
}
@media (min-width: 992px){
    .bloque-31 .grid-item img.fx1{width: 85%; }
    .bloque-31 .grid-item img.fx2{width: 60%; }
    .bloque-31 .grid-item img.fx3{width: 70%; }
    .bloque-31 .grid-item img.fx4{width: 50%; }
    .bloque-31 .grid-item img.fx5{width: 75%; }
}


.detalle-proyecto-1 {background-repeat:no-repeat;-ms-background-size: cover;-o-background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;width: 100%;height:auto;background-position:center;display:inline-block; height: 100vh; position: relative; margin-bottom: 45px;}


.detalle-proyecto-2 {font-family: var(--family); padding-bottom: 45px; color: var(--cuerpo)}
.detalle-proyecto-2 .info {padding-bottom: 30px;}
.detalle-proyecto-2 .des-en {font-style: italic;}
.detalle-proyecto-2  span{font-weight: bold; color: var(--texto); font-size: 14px;}
.detalle-proyecto-2  p,
.detalle-proyecto-2  p span{font-weight: normal; color: var(--cuerpo); font-size: 14px; font-family: var(--family)!important}
@media(min-width: 992px){
    .detalle-proyecto-2 {padding-left: 45px; padding-right: 45px; max-width: 1600px; margin: 0 auto;}
}

.detalle-proyecto-3 {font-family: var(--family); padding-bottom: 65px;}
.detalle-proyecto-3 .bg {background-color: var(--main); background-blend-mode: multiply; max-width: 700px;}
.detalle-proyecto-3 ol {padding: 15px; list-style: none;}
.detalle-proyecto-3 ol li{margin-bottom: 5px; color: var(--cuerpo)}
.detalle-proyecto-3 span{font-weight: bold; color: var(--texto); font-size: 14px;}
.detalle-proyecto-3 .info-plantas {padding-top: 45px;}

.detalle-proyecto-4 .img-sl {width: 80%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; margin: 0 auto}
.detalle-proyecto-4 .full {text-align: center;}
a.back-to-top { position: fixed; bottom: 3em; right: 10px; text-decoration: none; color: #000000; font-size: 12px; padding: 1em; display: none; z-index: 1000;}
a.back-to-top:hover { opacity:0.96; text-decoration: none; }