html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html, body {
  height:100vh;
  min-height: 100vh;
  background-color: white;
  scroll-behavior: smooth;
  display:flex;
  flex-direction:column;
}

body {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: #00223A;
  margin: 0;
  font-weight:400;
  padding:0;
  font-size:1rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
  cursor: url('cursor.png'), auto;
}

::before, ::after {box-sizing: border-box;}

:root {
  --animate-delay: 0.5s;
  --select-border: blue;
  --select-focus:blue;
}




a {font-family: "IBM Plex Sans Condensed", sans-serif;}

.negro {color:#252923 !important;}
.blanco {color:white !important;}
.gradiente {background:linear-gradient(0deg, rgba(37,41,35,0) 0%, rgba(37,41,35,0.6) 100%);}
.gradiente2 {background:linear-gradient(180deg, rgba(37,41,35,0) 0%, rgba(37,41,35,0.8) 100%);}
.solido {background-color:#F1F1F2 !important;}
.fblack {fill:black !important;}
.fder {float:right;}
.derecha {padding-left:10rem;}
.no-mostrar {display:none !important;}
.flex {display:flex; gap:var (--gap, 1rem);}
.grid {display:grid; gap:var (--gap, 1rem);}

.left{transform: translateX(-200px); opacity: 0;}
.right{transform: translateX(200px); opacity: 0;}
.fade-in {opacity: 0;}
.activo{transform: translateX(0); opacity: 1; transition: transform 0.7s, opacity 0.7s;}

#loader {position:absolute; width: 100%; height:100%; background-color:white; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:514px; height:76px; top:50%; left:50%; margin-left:-257px; margin-top:-38px; opacity:0;}

.aviso { display:none !important; width:100%;  height:100%; max-width:100vw; min-height:100vh; padding: 0; margin:0; position:absolute; left:0; top:0;  z-index:99999999999; background-color:black;}
.aviso h5 {font-size:1.5rem; font-weight:600; color:white; width:600px; height:100vh; margin: 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;}

.container { width:100%;  height:100%;  display:flex; flex-direction:column; justify-content:center;  padding: 0; margin:0; position:absolute; top:0; left:0;  z-index:0;}

header {width:100%; height:120px !important; position:fixed !important; top:0; left:0; display:flex; flex-direction:row; justify-content:space-around; margin:auto 0; padding:0; z-index:500;}
#hide-header, #hide-proyectos {transition: all .5s ease!important;}
.menu {position:absolute; right:5%; top:5vh; width: auto; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; height:40px; text-decoration:none; font-weight:500; text-transform:uppercase; display:block; z-index:300; margin: 0; padding:0; cursor:pointer; text-shadow: 1px 1px 1px rgba(0,33,61,0.6);}
.logo {position:absolute; top:4vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:48px; width:auto; max-width:auto; filter: drop-shadow(1px 1px 2px rgb(0 33 61 / 0.3));}

.idioma {width:80px; height:min-content; display:flex; justify-content:space-between; align-items:center; position:absolute; left:5%; top:5vh;}
.idioma a {font-family: "IBM Plex Sans", sans-serif; font-size:1.25rem; height:40px; text-decoration:none; margin:0; padding:0; font-weight:300; text-transform:uppercase; text-shadow: 1px 1px 1px rgba(0,33,61,0.6);}
.idioma a:hover, .idioma a.active {font-weight:500;}

.proyectos {width:100px; height:30px; position:fixed;  bottom:5vh; left:0;  opacity:0; text-align:center; z-index:500; }
.proyectos a {font-family: "IBM Plex Sans", sans-serif; font-size:1rem; text-decoration:none; font-weight:700; color:white; background-color:#00223A; text-transform:uppercase; text-align:center; margin:0; padding:0.4rem 0.6rem; border-radius:5px;}


.navigation {position: fixed; top:0; right:-30%; width:26%; height:100%; z-index:999; background-color:white; margin:0; padding:0 0 0 2vw; display:flex; flex-direction:column; justify-content:center; transition: .25s ease;}
.navigation.active {right:0%;}
.navigation ul {list-style-type: none; margin:0; padding:0;}
.navigation a, navigation a:hover {width:auto; height:auto; font-weight:100 !important; font-size: clamp(3rem, 2.545rem + 1.212vw, 5rem); color:#00223A; line-height:8rem; text-decoration:none; padding:0; margin:0;}
.navigation a:hover {text-decoration:underline;}
.navigation a img {width:auto; height:35px;}
.cerrar { width:auto; height:auto; position:absolute; top:0; right:2vw; cursor:pointer; margin:0; padding:0;}
.cerrar img {height:30px !important; width:auto;}
.redes {display:flex; flex-direction:column !important; justify-content:space-evenly; width:auto; height:auto; margin:0; padding:0; position:absolute; bottom:5vh; left:2vw;}
.redes a, .redes p {font-family: "IBM Plex Sans Condensed", sans-serif; color:#00223A; font-size:1.25rem; text-decoration:none; line-height:3rem !important; widht:auto; height:auto;  margin:0 0 0 1rem; padding:0; text-transform:uppercase;}
.redes p {margin:0;}
.logo2 {width:auto; height:auto; position:absolute; top:2vh; left:2vw; margin:0; padding:0;}
.logo2 img {width:auto; height:50px !important;}

.contenido {width:90% !important; height:100%; padding:0; margin:0 auto; display:flex; flex-direction:column; justify-content:flex-start;  z-index:0 !important; }

.principal {width:100vw; height:100vh; margin:0 0 3rem; padding:0; overflow:hidden; object-fit:cover; position:absolute; top:0; left:0; }
.principal img {width:100%; height:auto; margin:0; padding:0;}

h1{position:absolute; left:5vw; bottom:7vh; width:auto; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:5rem; font-weight:400; color:white; margin:0; padding:0;}
p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:200; color: #00223A; margin:0 0 3rem 0; padding:0;}

.bloque {width:49%; height:auto; margin:0; padding:0;}
.hilera {width:100%; height:auto; display:flex; flex-direction:row; justify-content:space-between; margin:0;  padding:0;}
.hilera img {width:100%; height:auto; margin:0 0 3rem 0; padding:0;}


h2 {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:3rem; font-weight:400; color:#00223A; margin:0 0 3rem 0; padding:0; float:left;}
span {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.5rem; font-weight:200; line-height:2rem; color:#00223A; margin:0 0 3rem 0 !important; padding:0; float:left;}
h3, h4 {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:2.5rem; font-weight:100; color:#00223A; margin:0; padding:0; float:left;}
h4 {font-weight:300;}

.logofooter {width:32% height:auto; margin:0; padding:0;}
.logofooter img {width:auto; height:50px; display:block; margin:0; padding:0;}

.quarter {width:30%; height:auto; display:flex; flex-direction:column; justify-content:center; justify-content:flex-start; margin:0 0 2rem 0; padding:0; text-align:right;}
.quarter a, .quarter p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:200; line-height:2rem; color: #00223A; text-decoration:none; margin:0; padding:0;}
.quarter p {font-size:1rem; margin:1rem 0 0 0; padding:0;}
.quarter a:hover {text-decoration:underline;}

.filtros {width:100%; height:auto; display:flex; flex-direction:row; justify-content:flex-start;  margin:3rem 0; padding:0; z-index:50;}
.filtros a {width:auto; height:min-content; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.5rem; color: #00223A;  text-decoration:none; font-weight:200; margin:0 2rem 0 0; padding:0; }
.filtros a:hover {text-decoration:underline;}
.filtros a.active {font-weight:400;} 


.listado {width:100%; min-height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:4rem; margin:0 auto; padding:0; z-index:50;}
.listado a {text-decoration:none; overflow: hidden;}
.hileras {width:100% !important; display:flex; flex-direction:row;  gap:2%;}
.elemento {width:100% !important; height:auto; padding:0; margin:0 0 4rem 0;  display:flex; flex-direction:column;}
.elemento h4 {font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(1.5rem, 0.929rem + 0.893vw, 2rem) !important; color: #00223A; width:auto; height:auto; line-height:3rem; text-decoration:none; font-weight:400; margin:0; padding:0;}
.elemento a img {transition: transform .5s ease; width:100%;}
.elemento a:hover img {transform: scale(1.1);}
.hilera {width:100% !important; display:flex; flex-direction:row; justify-content:space-between;}
.descripcion {width:49% !important; height:auto; margin:3rem 0; padding:0;}
.generales {width:49%; height:auto; margin:3rem 0; padding:0; display:flex; flex-direction:row; justify-content:space-between;}
.parte {display:flex; flex-direction:column; justify-content:flex-start; width:48%; height:auto; margin:0; padding:0;}
.datos b {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:500; color: #00223A; width:auto; height:auto; line-height:1rem; margin:0; padding:0; text-transform:uppercase;}
.datos p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.5rem; font-weight:200; color: #00223A; width:50%; height:auto; line-height:2rem; margin:0 0 2rem 0; padding:0;}
.descripcion b {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:500; color: #00223A; width:auto; height:auto; line-height:1rem; margin:0; padding:0; text-transform:uppercase; }
.descripcion p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.5rem; font-weight:200; color: #00223A; width:auto; height:auto; line-height:2rem; margin:0 0 2rem 0; padding:0;}

.galeria {width:90%; height:auto; display: grid; column-gap:3rem; grid-template-columns:repeat(2, minmax(0, 1fr)); justify-items: center; padding:0; margin: 0 auto 5% auto !important; text-align:center;}
.galeria img {width:100%; height:auto; margin:0; padding-bottom:5rem;}
.doble {width:100%; height:auto; display:flex; flex-direction:row; justify-content:space-between; margin:0; padding:0;}
.doble img {width:48%; height:auto; max-height:96vh; marging:0; padding-bottom:5rem;}


.contacto {width:100%; height:50%; position:absolute; top:0; left:0; margin:0 auto; padding:0; display:flex; flex-direction:column;}
.contacto img {width:100%; height:100%; margin:0; padding:0; object-fit:cover; object-position: center center;}
.datos {width:90%; height:40%;  display:flex; flex-direction:row; justify-content:space-between; margin:50vh auto 0 auto; padding:0;}
.tercia {width:30%; height:auto; display:flex; flex-direction:column; justify-content:center; justify-content:space-between; margin:0; padding:0; text-align:right;}
.final {width:90%; height:auto; margin:0 auto; padding:0; display:flex; flex-direction:row; justify-content:space-between;}
.tercia p, .final p, .tercia a, .final a {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.5rem; font-weight:400; color: #00223A; width:auto; height:auto; line-height:auto; margin:0; padding:0;}

.mtop {margin-top:115%;}
.mtop2 {margin-top:135%;}
.izq {justify-content:flex-start !important;}
.der {justify-content:flex-end !important;}
.full {width:100% !important; height:auto;}
.rgt {text-align:right;}
.lft {text-align:left;}

.left{transform: translateX(-200px); opacity: 0;}
.right{transform: translateX(200px); opacity: 0;}
.fade-in {opacity: 0;}
.activo{transform: translateX(0); opacity: 1; transition: transform 0.5s, opacity 0.5s;}

.reveal {
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-in {
  animation: fade-in 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}

.uno {
  animation: fade-in 1s ease-in;
}

@keyframes fade-in {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-0ut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width:86em) {
	h1{position:absolute; left:5vw; bottom:7vh; width:auto; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:5rem; font-weight:400; color:white; margin:0; padding:0;}
	.descripcion {display:block; width:49%; height:auto; margin:3rem 0; padding:0; text-align:left;}
	.descripcion b {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1rem; font-weight:500; color: #00223A; width:auto; height:auto; line-height:1rem; margin:0; padding:0; text-transform:uppercase; }
    .descripcion p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:300; color: #00223A; width:auto; height:auto; line-height:auto; margin:0 0 2rem 0; padding:0;}
}

@media (max-width:64em) {
	h1{position:absolute; left:5vw; top:60vh; width:auto; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:4rem; font-weight:400; color:white; margin:0; padding:0;}
	
}

@media (max-width:55em) {
 #loader {position:absolute; width: 100%; height:100%; background-color:white; left:0px; top:0px; z-index: 9999999999; }
 #logotipo {position:relative; width:352px; height:52px; top:50%; left:50%; margin-left:-176px; margin-top:-26px; opacity:0;}
 
 header {height:120px !important; position:fixed !important;}	
 .menu {position:absolute; right:2%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0; padding:0; cursor:pointer;}
 .menu a {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.15rem; height:40px; text-decoration:none; margin:0; padding:0; font-weight:500; text-transform:uppercase;}
 .logo {position:absolute; top:3vh; width:auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
 .logo img {height:40px; width:auto; max-width:auto; }

 .idioma {width:60px; height:min-content; display:flex; justify-content:space-between; align-items:center; position:absolute; left:2%; top:3vh;}
 .idioma a {font-family: "IBM Plex Sans", sans-serif; font-size:1.15rem; height:40px; text-decoration:none; margin:0; padding:0; font-weight:300; text-transform:uppercase;}
 .idioma a:hover, .idioma a.active {font-weight:500;}
  
 .navigation {position: fixed; top:0; right:-100%; width:96%; height:100%; z-index:999; background-color:white; margin:0; padding:0 0 0 4vw; display:flex; flex-direction:column; justify-content:center; transition: .25s ease;}
 .navigation.active {right:0%;}
 .navigation ul {list-style-type: none; margin:0; padding:0;}
 .navigation a, navigation a:hover {width:auto; height:auto; font-weight:100; font-size: clamp(3rem, 2.545rem + 1.212vw, 5rem); color:#00223A; line-height:6rem; text-decoration:none; padding:0; margin:0;}
 .navigation a:hover {text-decoration:underline;}
 .navigation a img {width:auto; height:35px;}
 .cerrar { width:auto; height:auto; position:absolute; top:0; right:4vw; cursor:pointer; margin:0; padding:0;}
 .cerrar img {height:26px !important; width:auto;}
 .redes {display:flex; flex-direction:column !important; justify-content:space-evenly; width:auto; height:auto; margin:0; padding:0; position:absolute; bottom:5vh; left:5vw;}
 .redes a, .redes p {font-family: "IBM Plex Sans Condensed", sans-serif; color:#00223A; font-size:1.25rem; text-decoration:none; line-height:2rem !important; widht:auto; height:auto;  margin:0 0 0 1rem; padding:0; text-transform:uppercase;}
 .redes p {margin:0;}
 .logo2 {width:auto; height:auto; position:absolute; top:2vh; left:4vw; margin:0; padding:0;}
 .logo2 img {width:auto; height:50px !important;}
 
 .contenido {width:96% !important; height:100%; padding:0; margin:0 auto; display:flex; flex-direction:column; justify-content:flex-start;  z-index:0 !important; }
 
 .principal {width:100vw; height:30vh; margin:0 0 3rem; padding:0; overflow:hidden; object-fit:cover; position:absolute; top:0; left:0; }
 .principal img {width:100%; height:auto; margin:0; padding:0;}
 
 h1{position:absolute; left:2vw; top:20vh; width:auto; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:2.5rem; font-weight:400; color:white; margin:0; padding:0;}
 p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:300; color: #00223A; margin:0 0 2rem 0; padding:0;}

.bloque {width:100%; height:auto; margin:0; padding:0;}
.hilera {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0;  padding:0;}
.hilera img {width:100%; height:auto; margin:0 0 2rem 0; padding:0;}
.reversa {flex-direction:column-reverse;}
h2 {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:2rem; font-weight:400; color:#00223A; margin:0 0 1rem 0; padding:0; float:left;}
span {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:300; line-height:2rem; color:#00223A; margin:0 0 2rem 0 !important; padding:0; float:left;}
h3, h4 {width:100%; height:auto; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:2rem; font-weight:200; color:#00223A; margin:0 0 2rem 0; padding:0; float:left;}
h4 {font-weight:300;}

#footer {display:none;}

.logofooter {width:100%; height:auto; margin:0; padding:0;}
.logofooter img {width:auto; height:40px; display:block; margin:0; padding:0;}

.quarter {width:100%; height:auto; display:flex; flex-direction:column; justify-content:center; justify-content:flex-start; margin:0 0 2rem 0; padding:0; text-align:right;}
.quarter a, .quarter p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:200; line-height:2rem; color: #00223A; text-decoration:none; margin:0; padding:0;}
.quarter p {font-size:1rem; margin:1rem 0 0 0; padding:0;}
.quarter a:hover {text-decoration:underline;}

.filtros {width:100%; height:auto; display:flex; flex-direction:row; justify-content:flex-start;  margin:0 0 1.5rem 0; padding:0; z-index:50;}
.filtros a {width:auto; height:min-content; font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1rem; color: #00223A;  text-decoration:none; font-weight:300; margin:0 1rem 0 0; padding:0; }
.filtros a:hover {text-decoration:underline;}
.filtros a.active {font-weight:400;} 

.listado {width:100%; min-height:auto; display:grid; grid-template-columns: 1fr; gap:0rem;  margin:0 auto; padding:0; z-index:50;}
.listado a {text-decoration:none; overflow: hidden;}
.hileras {width:100% !important; display:flex; flex-direction:column;  gap:2%;}
.elemento {width:100% !important; height:auto; padding:0; margin:0 0 2rem 0;  display:flex; flex-direction:column;}
.elemento h4 {font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(1.5rem, 0.929rem + 0.893vw, 2rem) !important; color: #00223A; width:auto; height:auto; line-height:3rem; text-decoration:none; font-weight:400; margin:0; padding:0;}
.elemento a img {transition: transform .5s ease; width:100%;}
.elemento a:hover img {transform: scale(1.1);}
.hilera {width:100% !important; display:flex; flex-direction:column; justify-content:space-between;}

.generales {width:100%; height:auto; margin:0; padding:0; display:flex; flex-direction:row; justify-content:space-between;}
.parte {display:flex; flex-direction:column; justify-content:flex-start; width:48%; height:auto; margin:0; padding:0;}
.descripcion {width:100% !important; height:auto; margin:0; padding:0; text-align:left;}
.descripcion b {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1rem; font-weight:500; color: #00223A; width:auto; height:auto; line-height:1rem; margin:0; padding:0; text-transform:uppercase; }
.descripcion p {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1.25rem; font-weight:300; color: #00223A; width:auto; height:auto; line-height:auto; margin:0 0 1.5rem 0; padding:0;}


.galeria {width:100%; height:auto; display: grid; column-gap:0rem; grid-template-columns: repeat(1, minmax(0, 1fr)); justify-items:center; padding:0; margin: 0 auto 5% auto; text-align:center;}
.galeria img {width:100%; height:auto; margin:0; padding-bottom:3rem;}
.doble {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0; padding:0;}
.doble img {width:100%; height:96vh; marging:0; padding-bottom:3rem;}

.contacto {width:100%; height:25%; position:absolute; top:0; left:0; margin:0 auto; padding:0; overflow:hidden;}
.contacto img {width:100%; height:100%; margin:0; padding:0; object-fit:cover; object-position: center center;}
.datos {width:96%; height:50%;  display:flex; flex-direction:column; justify-content:space-around; margin:0 auto; padding:0;}
.tercia {width:100%; height:auto; display:flex; flex-direction:column; justify-content:center; justify-content:space-between; margin:0; padding:0; text-align:left;}
.final {width:96%; height:auto; margin:0 auto; padding:0; display:flex; flex-direction:row; justify-content:space-between;}
.tercia p, .final p, .tercia a, .final a {font-family: "IBM Plex Sans Condensed", sans-serif; font-size:1rem; font-weight:400; color: #00223A; width:auto; height:auto; line-height:auto; margin:0; padding:0;}
 
 .mtop {margin-top:68vh;}
 .mtop2 {margin-top:155%;}
 .izq {justify-content:flex-start !important;}
 .der {justify-content:flex-end !important;}
 .full {width:100% !important; height:auto;}
 .rgt {text-align:right;}
 .lft {text-align:left;}
}





@media only screen and (orientation:landscape) and (max-width:992px){
	.container {display:none !important;}
	.aviso {display:block !important; width:100vw !important; height:100vh !important;}
	.aviso h1 {font-size:1.5rem; font-weight:600; color:white; width:600px; height:100vh; margin: 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;}
}