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: 'Manrope', sans-serif;
  color: #252923;
  margin: 0;
  font-weight:400;
  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;
}

@font-face {
    font-family: "LL Akkurat Pro Regular Web", sans-serif;
    src: url("../fonts/lineto-akkurat-pro-regular.eot");
    src: url("../fonts/lineto-akkurat-pro-regular.eot?#iefix") format("embedded-opentype"),
         url("../fonts/lineto-akkurat-pro-regular.woff2") format("woff2"),
         url("../fonts/lineto-akkurat-pro-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face{
        font-family:"Korbin W05 Book";
        src:url("../fonts/5174985/c70e5197-8eb3-4203-aa7e-141e8256df4d.eot?#iefix");
        src:url("../fonts/5174985/c70e5197-8eb3-4203-aa7e-141e8256df4d.eot?#iefix") format("eot"),url("../fonts/5174985/3f118250-b43f-4aa7-9c80-0d4d7a1db7cc.woff2") format("woff2"),url("../fonts/5174985/6684c36e-d1cb-4541-8ca1-66974a10a231.woff") format("woff"),url("../fonts/5174985/0a40d5f6-f657-401f-bff1-d9ae0823c7d2.ttf") format("truetype");
    }

a {font-family: "LL Akkurat Pro Regular Web", 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.6) 100%);}
.solido {background-color:#FFF !important; opacity:0.7;}
.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:#FFF; left:0px; top:0px; z-index: 9999999999; display:flex; justify-content:center; align-items:center;}
#logotipo {position:absolute; width:40vw; height:auto;  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: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:100px !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;}

.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:35px; height:25px; padding: 0;  background: url("../images/menu_blanco.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; right:0.75rem; top:2rem; z-index:999999;}
.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:400px; height:min-content;  display:flex; flex-direction:row; justify-content:space-between;  position:absolute;  right:13%; top:2.5rem; z-index:9999; margin:0; padding:0;}
.primary-navigation a{ text-decoration:none; font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.0rem; font-weight:400; width:auto; padding:0; margin:0; opacity:0.7;}
.primary-navigation a:hover {opacity:1.0 !important;}
.primary-navigation a.active {font-weight:500; opacity:1.0 !important;}
.logo {position:absolute; top:2rem; left:5%; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:40px; width:auto; max-width:auto; }
.logo2 {display:none !important;}

.filtros { display:flex; flex-direction:row; justify-content:space-between; list-style: none; position: relative; top:5rem; right:1.5rem; margin: 0; padding:0;   width:200px !important; height:min-content;}
.filtros li a { display: block;  padding:0; margin:0; font-size:1.0rem; color: #b3b3b3;}
.filtros li a:hover, .filtros li a.active {color:#333;}

footer {width:100% !important; height:80px !important; float:left; display:flex; flex-direction:row; justify-content:center; margin:0; padding:0; z-index:100; position:fixed; bottom:0; left:0;}

.top {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; bottom:3vh; margin:0 auto; padding:0; width:auto; height:auto;}
.correo {width:auto; height:min-content; margin:0; padding:0; position:absolute; bottom:3vh; left:5%; display:flex; flex-direction:row;}
.correo p, .correo a, .top a {font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.25rem; width:auto; height:min-content; text-decoration:none; opacity:0.7; margin:0; padding:0;}
.correo a { margin-left:0.5rem;}
.correo2 {display:none !important;}
.top a {width:30px; text-align:center;}
.redes {display:flex; flex-direction:row !important; justify-content:space-around; width:auto; height:min-content; margin:0; padding:0; position:absolute; bottom:3vh; right:5%;}
.redes a {text-decoration:none; widht:28px; height:28px; margin-left:3rem; float:left;}
.redes img {width:28px; height:28px; float:left;}
.redes2, .tel {display:none;}

.idioma, .idioma2 {width:100px; height:min-content; display:flex; flex-direction:row !important;  justify-content:space-between; align-items:center; position:absolute; right:5%; top:2.5rem; }
.idioma2 {display:none;}
.idioma a, .idioma a.active, .idioma p {font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.0rem; width:min-content; height:auto; text-decoration:none; opacity:0.7; margin:0; padding:0; font-weight:400;}
.idioma a.active { font-weight:400;}
.idioma a:hover, .idioma a.active, .idioma2 a:hover, .idioma2 a.active {opacity:1.0;}

.descripcion {display:block; width:90%; height:auto; margin:0 auto 5% auto; padding:0; text-align:center;}
.descripcion h3 {font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size: 2rem; padding-bottom:5%;}
.descripcion p {font-family: 'Manrope', sans-serif; font-size:1rem; font-weight:400; line-height:2rem; padding:0; margin:0 0 1rem 0;  text-align: justify;}
.descripcion img {width:100%;}
.foto-principal {width:100%; height:auto; float:left;}
.foto-principal img {width:100vw; height:auto; padding-bottom:7rem;}
.galeria {width:90%; height:auto; padding:0; margin: 0 auto 5% auto; text-align:center;}
.galeria img {width:auto; height:96vh; padding-bottom:7rem;}

.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;}

.mtop {margin-top:110px !important;}



@media (max-width:64em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#FFF; left:0px; top:0px; z-index: 9999999999; display:flex; justify-content:center; align-items:center;}
  #logotipo {position:absolute; width:60vw; height:auto;  opacity:0;}
  header {height:120px !important; position:fixed !important;}
  header {height:120px !important; position:fixed !important;}	
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/logo_grajales_b.svg") no-repeat center; z-index:999999999 !important;}
 .burger {cursor: pointer; display:none; border: 0; width:35px; height:25px; padding: 0;  background: url("../images/menu_blanco.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; right:3rem; top:2rem; z-index:999999;}
 .burger[aria-expanded="true"] {display:block; background: url("../images/close.svg") no-repeat center; z-index:99999 !important; width:24px; height:24px; position:absolute; top:2rem; right:3rem; opacity:0.7;}
 .primary-navigation { position:fixed; width:100%; height:100vh; inset:0; background:#FDFDFD; flex-direction:column;  justify-content:center; align-items:center; padding: 0; z-index:9999; transform: translateX(100%); transition:transform 250ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(0%);}
 .logo {display:block; position:absolute; top:2rem; left:3rem; width: 72%; height:auto; margin: 0; padding:0;}
 .logo img {width: 72%; height:auto;}
 .logo2 {display:block !important; position:absolute; left:3rem; top:2rem; width:72% !important; height:auto;  margin: 0; padding:0;}
 .logo2 img {width: 72%; height:auto;}
 .contenido { width:90%;   height:auto; padding: 0; margin:0 auto; display:flex; justify-content:center; z-index:100;}
 .primary-navigation li {margin-bottom:0rem;}
 .primary-navigation a { text-decoration:none; font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.25rem; font-weight:400; width:auto; margin:0 0 3rem 0 !important; padding:0 !important; color:black !important;}
 .primary-navigation a:hover, .primary-navigation a.active {opacity:0.6;}
 .idioma {display:none;}
 .idioma2 {display:flex; width:100vw; height:min-content; position:absolute; left:0; top:7rem;  margin: 0 auto; padding:0; flex-direction:row; justify-content:center; align-items:center;}
 .idioma2 p, .idioma2 a {margin:0 !important; padding:0 !important;}
 .idioma2 p {margin: 0 1rem !important;}
 .correo2, .tel {width:100vw; height:min-content; margin:0; padding:0; position:absolute; top:70vh; display:flex !important; flex-direction:row; justify-content:center;}
 .tel {top:78vh;}
 .correo2 p, .correo2 a, .tel p, .tel a {font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.1rem; width:auto; height:min-content; text-decoration:none; opacity:0.7; margin:0; padding:0;}
 .correo2 a, .cursiva { margin-left:0.5rem !important;}
 .redes2 {display:flex; flex-direction:row !important; justify-content:space-around; width:30%; height:30px; margin:0 auto; padding:0; position:absolute; bottom:11vh;}
 .redes2 a {text-decoration:none; widht:28px; height:28px; margin-left:3rem; float:left;}
 .redes2 img {width:28px; height:28px; float:left;}
 
 footer {display:none;}
 
 .mtop {margin-top:1.5rem !important;}
 .pder {padding:0;}
 .faq {color:black; z-index:1000; display:flex; padding:0; margin:0;}
 .redes {flex-direction:row !important; display:flex; justify-content:space-between; align-items:center; padding:0; margin:0; z-index;1000; color:black; width:50%;}
 .redes img {width:40px; height:auto; float:left;}
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:2rem; z-index:99999999; border:0;}
  
 .portfolio:not(.portfolio-1) {margin: 120px 0 0 0;}
 
 .mtop {margin-top:120px;}
}






@media (max-width:35em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#FFF; left:0px; top:0px; z-index: 9999999999; display:flex; justify-content:center; align-items:center;}
  #logotipo {position:relative; width:90vw; height:auto;  opacity:0;}
  header {height:120px !important; position:fixed !important;}	
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/logo_grajales_b.svg") no-repeat center; z-index:999999999 !important;}
 .burger {cursor: pointer; display:none; border: 0; width:35px; height:25px; padding: 0;  background: url("../images/menu_blanco.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; right:0.75rem; top:2rem; z-index:999999;}
 .burger[aria-expanded="true"] {display:block; background: url("../images/close.svg") no-repeat center; z-index:99999 !important; width:24px; height:24px; position:absolute; top:2rem; right:0.75rem; opacity:0.7;}
 .primary-navigation { position:fixed; width:100%; height:100vh; inset:0; background:#FDFDFD; flex-direction:column;  justify-content:center; align-items:center; padding: 0; z-index:9999; transform: translateX(100%); transition:transform 250ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(0%);}
 .logo {display:block; position:absolute; top:2rem; left:0.75rem; width: 90%; height:auto; margin: 0; padding:0;}
 .logo img {width: 90% !important; height:auto;}
 .logo2 {display:block !important; position:absolute; left:0.75rem; top:2rem; width:90% !important; height:auto;  margin: 0; padding:0;}
 .logo2 img {width: 90% !important; height:auto;}
 .contenido { width:90%;   height:auto; padding: 0; margin:0 auto; display:flex; justify-content:center; z-index:100;}
 .primary-navigation li {margin-bottom:0rem;}
 .primary-navigation a { text-decoration:none; font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.25rem; font-weight:400; width:auto; margin:0 0 3rem 0 !important; padding:0 !important; color:black !important;}
 .primary-navigation a:hover, .primary-navigation a.active {opacity:0.6;}
 .idioma {display:none;}
 .idioma2 {display:flex; width:100vw; height:min-content; position:absolute; left:0; top:7rem;  margin: 0 auto; padding:0; flex-direction:row; justify-content:center; align-items:center;}
 .idioma2 p, .idioma2 a {margin:0 !important; padding:0 !important;}
 .idioma2 p {margin: 0 1rem !important;}
 .correo2, .tel {width:100vw; height:min-content; margin:0; padding:0; position:absolute; top:70vh; display:flex !important; flex-direction:row; justify-content:center;}
 .tel {top:78vh;}
 .correo2 p, .correo2 a, .tel p, .tel a {font-family: "LL Akkurat Pro Regular Web", sans-serif; font-size:1.1rem; width:auto; height:min-content; text-decoration:none; opacity:0.7; margin:0; padding:0;}
 .correo2 a, .cursiva { margin-left:0.5rem !important;}
 .redes2 {display:flex; flex-direction:row !important; justify-content:space-between; width:40%; height:30px; margin:0 auto; padding:0; position:absolute; bottom:8vh;}
 .redes2 a {text-decoration:none; widht:28px; height:28px; margin-left:3rem; float:left;}
 .redes2 img {width:28px; height:28px; float:left;}
 
 footer {display:none;}
 
 .mtop {margin-top:1.5rem !important;}
 .pder {padding:0;}
 .faq {color:black; z-index:1000; display:flex; padding:0; margin:0;}
 .redes {flex-direction:row !important; display:flex; justify-content:space-between; align-items:center; padding:0; margin:0; z-index;1000; color:black; width:50%;}
 .redes img {width:40px; height:auto; float:left;}
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:2rem; z-index:99999999; border:0;}
  
  .portfolio:not(.portfolio-1) {margin: 120px 0 0 0;}
 
 .mtop {margin-top:120px;}

 
}




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