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

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

body {
  font-family: "Urbanist", sans-serif;
  color: black;
  margin: 0;
  font-weight:300;
  padding:0;
  font-size:1rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
}

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

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

a {font-family: "Urbanist", sans-serif; font-weight:600;}

.negro {color:#252923 !important;}
.blanco {color:white !important;}
.verde {color:#4fad35 !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);}
.ptop {padding-top:8% !important;}

#loader {position:absolute; width: 100%; height:100%; background-color:#DDD2D3; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:300px; height:168px; top:50%; left:50%; margin-left:-200px; margin-top:-84px; opacity:0;}

.aviso { display:none !important; width:100%;  height:100%; max-width:100%; min-height:100vh; padding: 0; margin:0; position:absolute;  z-index:99999999999; background-color:black;}
.aviso h1 {font-size:1.5rem; font-weight:regular; 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:130px !important; position:fixed !important; top:0; left:0; background-color: #D0D2D3; display:flex; flex-direction:row; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
#hide-header {transition: all .5s ease!important;}
.contenido { width:96% !important; height:auto; padding:0; margin:130px auto !important; display:flex; flex-direction:column; justify-content:flex-start !important;  z-index:100; position:absolute; top:0; left:2%;}
.contenido h1 {font-family: "Urbanist", sans-serif; font-size:2rem !important; color:black; width:auto; height:auto; line-height:4rem; font-weight:600; margin:3rem 0; padding:0; text-transform:uppercase;}
.burger {cursor: pointer; display:none; border: 0; width:50px; height:auto; padding: 0;  background: url("../images/menu_blk.svg") no-repeat bottom; transition: opacity 250ms ease; position: absolute; top:1.5rem; z-index:99999;}
.mobile-nav-toggle { cursor: pointer; display:none; border: 0; width:130px; height:40px; padding: 0; color:black; background: url("../images/logo_grajales.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; top:1.5rem; z-index:99999;}



.primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:2%; top:3vh; z-index:9999; margin:0; padding:0;}
.primary-navigation a{ text-decoration:none; font-family: "Urbanist", sans-serif; font-size:1.25rem; font-weight:600; width: auto; padding:0; margin-left:7rem;   color:black; text-transform:uppercase;}
.primary-navigation a:hover {color:#777 !important;}
.primary-navigation a.active {color:#777; font-weight:600;}
.logo {position:absolute; left:2%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:70px; width:auto; max-width:auto; }


.filtros {width:100%; height:120px; display:flex; flex-direction:row; justify-content:center; align-items:center; margin:0 auto; padding:0; z-index:50;}
.filtros a {font-family: "Urbanist", sans-serif; font-size:1.25rem; width:auto; height:min-content; text-decoration:none; font-weight:600; margin:0 2rem; padding:0; color:#7A7A7A;}
.filtros a:hover {color:black;} 
.filtros a.active {color:black;}


.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;  display:flex; flex-direction:column;  }
.elemento h1 {font-family: "Urbanist", sans-serif; font-size: clamp(1.5rem, 0.929rem + 0.893vw, 2rem) !important; color:black; width:auto; height:auto; line-height:auto; text-decoration:none; font-weight:600; text-transform:capitalize; margin:0; padding:0;}
.elemento a img {transition: transform .5s ease; width:100%;}
.elemento a:hover img {transform: scale(1.1);}



.bloque {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; margin:0 0 3rem 0; padding:0; }
.bloque p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; column-count: 2; column-gap:4%;}
.bloque img {width:100%;}
.centro {justify-content:center !important;}

.hilera {width:100% !important; height:auto; display:flex; flex-direction:row; justify-content:space-between !important; margin:0 0 3rem 0; padding:0;}
.servicio {display:flex; flex-direction:column; justify-content:space-between; width:48%; height:auto; margin:0; padding:0;}
.hilera h1 {font-family: "Urbanist", sans-serif; font-size:2rem !important; color:black; width:auto; height:auto; line-height:4rem; font-weight:600; margin:0; padding:0; text-trasform:uppercase;}
.hilera h2 {font-family: "Urbanist", sans-serif; font-size: 1.5rem; color:black; width:auto; height:auto; margin:0 0 1rem 0; padding:0;}
.hilera h3 {font-family: "Urbanist", sans-serif; font-size: 1.5rem; color:#7A7A7A; width:auto; height:auto; margin:0; padding:0;}
.hilera p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; width:auto; height:auto; margin:0; padding:0;}
.hilera a {text-decoration:none; margin:0 0 1rem 0; padding:0; font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black;}
.columna {width:48%; height:auto; display:flex; flex-direction:column; margin:0 0 3rem; padding:0;}
.columna h1 {font-family: "Urbanist", sans-serif; font-size:2rem !important; color:#7A7A7A; width:auto; height:auto; line-height:normal; font-weight:300; margin:0 0 2rem 0; padding:0; text-trasform:uppercase;}
.columna p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; font-weight:300; width:auto; height:auto; margin:0 0 2rem 0; padding:0;}
.bloque2 {width:100%; height:auto; display:flex; flex-direction:row; justify-content:center; margin:0 0 3rem 0; padding:0; }
.boton a {width:auto; height:auto; margin:0 0 3rem 0; padding:0.5rem 1rem; font-family: "Urbanist", sans-serif; font-size:1rem; color:black; font-weight:600; width:auto; height:auto; border-style: solid; border-width:2px; text-decoration:none; text-transform:uppercase;}
.boton a:hover {background-color:black; color:white; border-color:black;}


.direccion, .correo, .redes {width:auto; height:auto; display:flex; flex-direction:column; margin:0 0 3rem 0; padding:0;}
.direccion p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; font-weight:300; width:auto; height:auto; margin:0 0 1rem 0; padding:0;}
.correo a:hover {text-decoration:underline; color:#7A7A7A;}
.redes a {width:auto; height:auto; margin:0 0 1rem 0; padding:0;}
.redes img {width:24px; height:24px;}

.padbot {padding:0 0 1rem 0 !important;}
.padder {padding: 0 2.5% 0 0;}
.padizq {padding:0 0 0 2.5%;}

.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 only screen and (max-width:78em) {
  .primary-navigation {list-style:none; width:65%; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:2%; top:3vh; z-index:9999; margin:0; padding:0;}
	
  
}


@media (max-width:35em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#FFF; left:0px; top:0px; z-index: 9999999999; }
  #logotipo {position:relative; width:242px; height:102px; top:50%; left:50%; margin-left:-121px; margin-top:-51px; opacity:0;}
	
  header {height:90px !important; position:fixed !important;}	
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:1vh; right:2vw; z-index:99999 !important; width:40; height:40px;}
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:40px; height:40px;}
 .burger[aria-expanded="true"] {display:block;  background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:40px; height:40px;}
 .primary-navigation { position:fixed; width:100%; height:100vh; inset:0; background:#D0D2D3;  flex-direction:column; justify-content:center; align-items:center; padding: 0; z-index:99999 !important; transform: translateX(100%); transition:transform 150ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(0%);}
 .logo {position:absolute; left:2vw; top:3vh !important; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
 .logo img {height:50px; width:auto; max-width:auto; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));}
 
 
 .contenido { width:96% !important; height:auto; padding:0; margin:90px auto !important; display:flex; flex-direction:column; justify-content:flex-start !important;  z-index:100; position:absolute; top:0; left:2%;}
 .contenido h1 {font-family: "Urbanist", sans-serif; font-size:2rem !important; color:black; width:auto; height:auto; line-height:2rem; font-weight:600; margin:0 0 2rem 0; padding:0; text-transform:uppercase;}
 .primary-navigation li {margin-bottom:0rem;}
 .primary-navigation a { text-decoration:none; font-family: "Urbanist", sans-serif; font-size: 1.75rem; font-weight:600; width:auto; margin:0 0 3rem 0 !important; padding:0 !important; color:black; text-shadow: none !important;}
 .primary-navigation a:hover {color:#777 !important;}
 .primary-navigation a.active {color:#777 !important; font-weight:600;}
 
 
 .filtros {width:auto; height:auto; display:block; margin:1rem auto; padding:0; text-align:center; }
 .filtros a {width:auto; height:auto; font-family: "Urbanist", sans-serif; font-size:1rem;  text-decoration:none; line-height:2rem; font-weight:300; margin:2rem 1rem 2rem 0rem !important; padding:0; color:#7A7A7A; text-wrap: nowrap;}
 .filtros a:hover {color:black; font-weight:600;} 
 .filtros a.active {color:black; font-weight:600;}

 .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%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:2%;}
 .elemento {width:100% !important; height:auto; padding:0; margin:0 0 2rem 0;  display:flex; flex-direction:column;  }
 .elemento h1 {font-family: "Urbanist", sans-serif; font-size:1.3rem !important; color:black; width:auto; height:auto; line-height:auto; text-decoration:none; font-weight:600; text-transform:capitalize; margin:0; padding:0;}
 .elemento a img {transition: transform .5s ease; width:100%;}
 .elemento a:hover img {transform: scale(1.1);}
 
 .bloque {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; margin:0 0 3rem 0; padding:0; }
 .bloque p {font-family: "Urbanist", sans-serif; font-size:1.1rem; font-weight:300; color:black; column-count: 1; column-gap:4%;}
 .bloque img {width:100%;}
 .centro {justify-content:center !important;}
 
 .hilera {width:100% !important; height:auto; display:flex; flex-direction:column; justify-content:space-between !important; margin:0; padding:0;}
 .servicio {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:auto; margin:0 0 3rem 0; padding:0;}
 .hilera h1 {font-family: "Urbanist", sans-serif; font-size:1.75rem !important; color:black; width:auto; height:auto; line-height:2rem; font-weight:600; margin:0 0 2rem 0; padding:0; text-trasform:uppercase;}
 .hilera h2 {font-family: "Urbanist", sans-serif; font-size: 1.5rem; color:black; width:auto; height:auto; margin:0 0 1rem 0; padding:0;}
 .hilera h3 {font-family: "Urbanist", sans-serif; font-size: 1.25rem; color:#7A7A7A; width:auto; height:auto; margin:0; padding:0;}
 .hilera p {font-family: "Urbanist", sans-serif; font-size:1.1rem; color:black; font-weight:300; width:auto; height:auto; margin:0; padding:0;}
 .hilera a {text-decoration:none; margin:0 0 1rem 0; padding:0; font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black;}
 .columna {width:100%; height:auto; display:flex; flex-direction:column; margin:0 0 3rem; padding:0;}
 .columna h1 {font-family: "Urbanist", sans-serif; font-size:2rem !important; color:#7A7A7A; width:auto; height:auto; line-height:normal; font-weight:300; margin:0 0 2rem 0; padding:0; text-trasform:uppercase;}
 .columna p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; font-weight:300; width:auto; height:auto; margin:0 0 2rem 0; padding:0;}
 .bloque2 {width:100%; height:auto; display:flex; flex-direction:row; justify-content:center; margin:0 0 3rem 0; padding:0; }
 .boton a {width:auto; height:auto; margin:0 0 3rem 0; padding:0.5rem 1rem; font-family: "Urbanist", sans-serif; font-size:1rem; color:black; font-weight:600; width:auto; height:auto; border-style: solid; border-width:2px; text-decoration:none; text-transform:uppercase;}
 .boton a:hover {background-color:black; color:white; border-color:black;}
 
 .direccion, .correo, .redes {width:auto; height:auto; display:flex; flex-direction:column; margin:0 0 3rem 0; padding:0;}
 .direccion p {font-family: "Urbanist", sans-serif; font-size:1.2rem; color:black; font-weight:300; width:auto; height:auto; margin:0 0 1rem 0; padding:0;}
 .correo a:hover {text-decoration:underline; color:#7A7A7A;}
 .redes {width:auto; height:auto; display:flex; flex-direction:row; justify-content:flex-start;}
 .redes a {width:auto; height:24px; margin:0 2rem 0 0; padding:0;}
 .redes img {width:24px; height:24px;}
 
 
 .mtop {margin-top:1.5rem !important;}
 .pder {padding:0;}
 
 
}



@media only screen and (orientation:landscape) and (max-width:992px){.aviso {display:block !important; width:100%; height:100% !important;} .container {display:none;}}