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.6) 100%);}
.solido {background-color:#F1F1F2 !important; opacity:0.6;}
.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: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 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: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;}
.menu {position:absolute; right:5%; top:5vh; 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.25rem; height:40px; text-decoration:none; margin:0; padding:0; font-weight:500; text-transform:uppercase;}
.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; }

.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;}
.idioma a:hover, .idioma a.active {font-weight:500;}


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

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







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












@media (max-width:35em) {
 #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;}c
 
  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;}
 

 
}




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