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

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

body {
  font-family: "Urbanist", sans-serif; 
  color: black;
  margin: 0;
  font-weight:Regular;
  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: 'Century Gothic 600', sans-serif; font-weight:300;}

.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:black; 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 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:400;}

header {width:100%; height:130px !important; position:fixed !important; top:0; left:0; 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:100%;   min-height:100%; padding:0; margin:0; display:flex; flex-direction:column; justify-content:center; z-index:100; position:absolute; top:0; left:0; }
.burger {cursor: pointer; display:none; border: 0; width:50px; height:auto; padding: 0;  background: url("../images/menu.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:99999; 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:white; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); 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; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));}


.principal {width:100vw; height:100vh; margin:0 0 5rem 0; padding;0; overflow:hidden; object-fit:cover; position:relative; top:0px; left:0px;}
h1 {width:auto; height:auto; position:absolute; left:2%; top:85%; font-family: "Urbanist", sans-serif;  font-size: clamp(3rem, 1rem + 2.5vw, 4rem); color:white; line-height:2rem; font-weight:600; margin:0; padding:0; text-transform:uppercase; }
h1 > span {width:auto; height:auto;  font-family: "Urbanist", sans-serif;  font-size: clamp(1.5rem, 0.5rem + 1.25vw, 2rem); color:white; font-weight:normal;  margin:0; padding:0; text-trasform:uppercase;}
.principal img {display: block; width: 100%; height: 100%; object-fit: cover !important;}

.bloque {width:96% !important; height:auto; display:flex; flex-direction:column; justify-content:space-between !important; margin:0 auto 3rem auto; padding:0;}
.bloque h1 {font-family: "Urbanist", sans-serif;  font-size:3rem !important; color:white; width:100%; height:auto; line-height:4rem; font-weight:600; margin:0 0 1rem 0; padding:0; text-trasform:uppercase;}
.hilera {width:96% !important; height:auto; display:flex; flex-direction:row; justify-content:space-between !important; margin:0 auto; padding:0;}
.generales {display:flex; flex-direction:row; justify-content:space-between; width:48%; height:auto;}
.servicio {display:flex; flex-direction:column; justify-content:flex-start; width:48%; height:auto; margin:0; padding:0;}
.servicio p {font-family: "Urbanist", sans-serif;  font-size:1.2rem; line-height:1.8rem; color:white; width:100%; height:auto; margin:1rem 0!important; padding:0;}

.galeria {width:100%; height:auto; display:flex; flex-direction:column; margin: 0; padding:0; align-items:center;}
.galeria img {max-height:96vh; max-width:96vw; margin:5rem 0; padding:0;}

.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;
}
@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:35em) {
 #loader {position:fixed; width: 100%; height:100%; background-color:black; 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; z-index:500;}	
 .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:100%; height:auto; padding: 0; margin:0 auto; display:flex; justify-content:center; z-index:100 !important;}
 .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; font-weight:600;}
 

.principal {width:100%; height:28vh; margin:0 0 1rem 0; padding;0; overflow:hidden; object-fit:cover; position:relative; top:0px; left:0px;}
 h1 {width:auto; height:auto; position:absolute; left:2%; top:20vh; font-family: "Urbanist", sans-serif;  font-size: 1.75rem; color:white; line-height:1.5rem; font-weight:600; margin:0; padding:0; text-transform:uppercase; }
 h1 > span {width:auto; height:auto;  font-family: "Urbanist", sans-serif;  font-size: 1rem; color:white; font-weight:normal;  margin:0; padding:0; text-trasform:uppercase;}
.principal img {display: block; width: 100%; height: 100%; object-fit: cover !important;}
.bloque {width:96% !important; height:auto; display:flex; flex-direction:column; justify-content:space-between !important; margin:0 auto 3rem auto; padding:0;}
.bloque h1 {font-family: "Urbanist", sans-serif;  font-size:1.5rem !important; color:white; width:100%; height:auto; line-height:4rem; font-weight:600; margin:0 0 1rem 0; padding:0; text-trasform:uppercase;}
.hilera {width:100% !important; height:auto; display:flex; flex-direction:column; justify-content:space-between !important; margin:0; padding:0;}
.generales {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:auto;}
.servicio {display:flex; flex-direction:column; justify-content:flex-start; width:100%; height:auto; margin:0; padding:0;}
.servicio p {font-family: "Urbanist", sans-serif;  font-size:1.2rem; line-height:1.5rem; color:white; width:100%; height:auto; margin:0.5rem 0!important; padding:0;}

.galeria {width:100%; height:auto; display:flex; flex-direction:column; justify-content:center; text-align:center;}
.galeria img {width:100%; height:auto; margin:3rem 0; padding:0;}
 
 
 .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;}}