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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
  font-family: "Lora", serif;
  color: #67625E;
  margin: 0;
  font-weight:400;
  padding:0;
  font-size:1rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
  background-color:#EAEAEA;
}

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

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

a {font-family: "Lora", serif; font-weight:400;}

.azul {background-color:#092356;}
.naranja {background-color:#F37B34;}
.beige {background-color:#F1F1E6; color:#F37B34 !important; margin:0 0 5rem 0 !important; padding:0;}
.gris {background-color:#717E97;}
.claro {background-color:#BFC2C9;}

#loader {position:absolute; width: 100%; height:100%; background-color:#F1F1E6; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:200px; height:120px; top:50%; left:50%; margin-left:-100px; margin-top:-60px; 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;}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
    min-height: 100dvh; /* Use dynamic viewport height */
	
}

header {width:100%; height:120px !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;}   

.primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:8.6vh; z-index:9999; margin:0; padding:0;}
.primary-navigation ul {display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:0; z-index:9999; margin:0; padding:0; list-style: none;}
.primary-navigation a{ text-decoration:none; font-family: "Poppins", sans-serif; font-size:1.1rem; font-weight:200; width:auto; padding:0; margin-left:5rem; color:white; text-transform:uppercase;}
.primary-navigation a:hover, .primary-navigation a.active{color:#EAEAEA; }

.logo-nav, .ligas-redes {display:none;}

.burger { display:none; border: 0; width:80px; height:auto; padding: 0;  background: url("../images/menub.svg") no-repeat bottom;  position: absolute; top:2vh; right:2vh; z-index:99999; cursor: pointer;}
.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;}

.logo {position:absolute; left:4%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:80px; width:auto; max-width:auto; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));}

.botones {width:60%; height:auto; position:absolute; top:80%; left:50%;  margin:0 0 0 -30%; padding:0; display:flex; justify-content:space-between; z-index:10;}
.botones a {width:auto; height:auto; font-family: "Poppins", sans-serif; font-size:1.25rem; font-weight:500; color:white; margin:0; padding:1rem 0rem 1rem 1rem; text-decoration:none; text-transform:uppercase; letter-spacing:1rem; border:2px solid white;}
.botones a:hover {background:white; color:black;}


@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:120px !important; position:fixed !important;}	
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:4.5vh; right:3vw; z-index:99999 !important; width:60px; height:45px;}
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:45px; height:45px;}
 .burger[aria-expanded="true"] {display:block;  background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:50px; height:50px;}
 .primary-navigation{position:absolute; width:100vw; height:100vh; inset:0; background:#B9B6B1;  flex-direction:column; justify-content:start; align-items:center; padding:25vh 0 0 0; z-index:99999 !important; transform: translateX(100%); transition:transform 150ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(0%);}
 .logo-nav {position:absolute; left:2vw; top:2vh !important; width: auto; height:auto; display:block; z-index:500; margin: 0 auto; padding:0;}
 .logo-nav img {height:70px; width:auto; max-width:auto;}
 .primary-navigation a{width:auto; height:auto; text-decoration:none; font-family: "Poppins", sans-serif; font-size:2rem; font-weight:500;  padding:0; margin:0 0 1rem 0;   color:#67625E; text-transform:uppercase;}
 .primary-navigation a:hover {color:#838076 !important;}
 .primary-navigation a.active {color:#838076; font-weight:bold;}
 
 .ligas-redes {width:96%; height:auto; margin:0; padding:0 4%; display:flex; flex-direction:row; justify-content:space-between; align-items:end; position:absolute; top:70vh; left:0;}
 .ligas-redes img {width:30px; height:30px; margin:0; padding:0;}
 
 .ligas {width: 80%; height:120px; display:flex; flex-direction:column; justify-content:end; margin:0; padding:0;}
 .ligas a {width:auto; height:auto; font-family: "Lora", serif; font-size:1.1rem; font-style:italic; color: #67625E;  text-decoration:underline; text-transform:lowercase; margin:0 0 0.5rem 0; padding:0;}
 
 .redes {width: 20%; height:120px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; margin:0; padding:0;}
 .redes a {width:30px; height:30px; margin:0; padding:0; text-decoration:none;}
 .redes img {width:30px; height:30px !important; margin:0; padding:0;}
 
 .logo {position:absolute; left:3vw; top:2vh !important; 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));}
 
 .botones {width:100vw; height:auto; position:absolute; top:80%; left:0;  margin:0; padding:0; display:flex; flex-direction:row; justify-content:space-around; align-content:center; align-items:center; z-index:50; text-align:center;}
 .botones a {width:35%; height:auto; font-family: "Poppins", sans-serif; font-size:1rem; font-weight:500; color:white; margin:0 0 2rem 0; padding:0.75rem 0rem 0.75rem 0rem; text-decoration:none; text-transform:uppercase; letter-spacing:0.25rem; border:2px solid white; text-align:center;}
 .botones a:hover {background:white; color:black;}
 

}



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