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

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

body {
  font-family: "Roboto", 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;
}

a {font-family: "Roboto", 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;}


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

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

.logo {position:absolute; top:4vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));}
.logo img {height:30px; width:auto; max-width:auto; }
.logo2 {display:none !important;}

footer {width:100% !important; height:100px !important;  display:flex; flex-direction:row; justify-content:space-between; 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;}
.info {display:flex; flex-direction:column!important; justify-content:space-between; width:auto; height:60px; margin:0; padding:0; position:absolute; bottom:3vh; left:2vw;}
.info a {font-family: "Roboto", sans-serif; font-size:0.9rem; width:auto; height:min-content; text-decoration:none;  opacity:1.0; margin:0; padding:0;}
.info a {text-decoration:underline; color:white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
.correo2 {display:none;}
.top a {width:30px; text-align:center;}
.redes {display:flex; flex-direction:column!important; justify-content:space-between; width:28px; height:80px; margin:0; padding:0; position:absolute; bottom:2vh; right:2vw;}
.redes a {text-decoration:none; widht:28px; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3)); height:28px; margin:0; padding:0;}
.redes img {width:28px; height:28px; float:left;}


.idioma, .idioma2 {width:80px; height:min-content; display:flex; justify-content:space-between; align-items:center; position:absolute; right:5%; top:5vh; }
.idioma2 {display:none;}
.idioma a, .idioma a.active, .idioma p {font-family: 'EB Garamond', serif; font-size:1.25rem; height:40px; text-decoration:none; opacity:0.8; margin:0; padding:0; font-weight:500;}
.idioma a.active {font-style:italic; font-weight:500;}
.idioma img, .seleccion img {width:2px !important; height:15px !important; display:block; margin: 0 10px 0 10px !important; float:right; background-color:#000;}
.idioma a:hover, .idioma a.active, .idioma2 a:hover, .idioma2 a.active {opacity:1.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) {
  header {height:120px !important; position:fixed !important;}	
  .logo {position:absolute; top:4vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
  .logo img {height:24px; width:auto; max-width:auto; }
 
 
 .contenido { width:90%;   height:auto; padding: 0; margin:0 auto; display:flex; justify-content:center; z-index:100;}
 
 .info {display:flex; flex-direction:column!important; justify-content:space-between; width:auto; height:60px; margin:0; padding:0; position:absolute; bottom:6vh; left:3vw;}
 .info a {font-family: "Roboto", sans-serif; font-size:0.9rem; width:auto; height:min-content; text-decoration:none;  opacity:1.0; margin:0; padding:0;}
 .info a {text-decoration:underline; color:white;}
 .correo2 {display:none;}
 .top a {width:30px; text-align:center;}
 .redes {display:flex; flex-direction:column!important; justify-content:space-between; width:28px; height:70px; margin:0; padding:0; position:absolute; bottom:5vh; right:3vw;}
 .redes a {text-decoration:none; widht:24px; height:24px; margin:0; padding:0;}
 .redes img {width:28px; height:28px; float:left;}
 
 
 
 
  
 
}




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







