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

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

body {
  font-family: 'Roboto Condensed', sans-serif;
  color: #252923;
  margin: 0;
  font-weight:300;
  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 Condensed', sans-serif;}
b {font-weight:400;}
.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.8) 100%);}
.solido {background-color:#F1F1F2 !important;}
.fblack {fill:black !important;}
.fder {float:right !important;}
.derecha {padding-left:10rem;}
.no-mostrar {display:none !important;}
.flex {display:flex; gap:var (--gap, 1rem);}
.grid {display:grid; gap:var (--gap, 1rem);}

#loader {position:absolute; width: 100%; height:100%; background-color:#FFF; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:400px; 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 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:130px !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; background-color:white;}
#hide-header {transition: all .5s ease!important;}
.contenido { width:100%;  height:auto; padding:0; margin:0; display:flex; flex-direction:column; justify-content:flex-start; z-index:100; position:absolute; left:0; top:0;}
.burger {cursor: pointer; display:none; border: 0; width:50px; height:auto; padding: 0; background: url("../images/puntos_n.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:#252923; 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:5%; top:2rem; z-index:9999; margin:0; padding:0;}
.primary-navigation a{ text-decoration:none; font-family: 'Roboto Condensed', sans-serif; font-size:1.3rem; font-weight:400; width:auto; padding:0; margin-left:3.25rem;  color:#6F6F6E;}
.primary-navigation a:hover {color:#4EAD33 !important;}
.primary-navigation a.active {color:#4EAD33; font-weight:400;}
.logo {position:absolute; left:5%; top:2rem; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:64px; width:auto; max-width:auto;}
.logo2 {display:none !important;}



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

.listado {width:90%; height:auto; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:1%; margin:0 auto; padding:0 0 1% 0; z-index:100;}
.listado a {text-decoration:none; position:relative;}
.listado a:hover .overlay, listado:active .overlay {opacity:1; -webkit-user-select: none; -webkit-touch-callout: none;}
.listado img {filter: grayscale(100%);}

.elemento {width:32.66%; height:auto; padding:0; margin:0;  display:flex; flex-direction:column; justify-content:center; align-items:center; }
.elemento img {width:100%;}
.overlay { width: 100%; height: 100%; position:absolute; display:flex; flex-direction:column; justify-content:center; align-items: center; top: 0; left: 0; z-index: 2; text-align: center; background-color: rgba(0,0,0,0.7); opacity:0; transition: all .2s ease!important;}
.overlay h1 {font-family: 'Roboto Condensed', sans-serif; font-size:1.5rem; color:white; width:100% !important; height:auto; font-weight:400; margin:0; padding:0; }
.overlay p {font-family: 'Roboto Condensed', sans-serif; font-size:1.125rem; color:#CCC; width:100% !important; font-weight:300; margin:0; padding:0;}

.generales {width:90%; min-height:100%; display:flex; flex-direction:row; margin:0 auto; padding:0 0 1% 0; z-index:50;}
.titulo {width:52%; margin:0; padding:0; float:left;}
.titulo h1 {font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.5rem, 5vh, 2.5rem); color:#6F6F6E; font-weight:400;}
.iconos {width:48%; margin:0; padding:0; display:flex; float:left; flex-direction:row; align-items: center;}
.iconos a {width:30px; height:auto; margin-right:3rem; padding:0; opacity:0.4;}
.iconos a:hover, .iconos a.active {opacity:1;}
.iconos img {width:100%; height:auto;}
.cerrar {position:absolute; right:5% !important; margin-right:0rem !important; padding:0;}

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

.galeria2 {width:90%; height:auto; padding:0; margin: 0 auto 5% auto; display:flex; flex-direction:column;}
.galeria2 img {width:100%; height:auto !important; padding:0 0 5rem 0;}
.description {width:100%; height:auto; columns:2 !important; column-gap:4%; text-align:justify; padding:0; margin: 0 0 2% 0;}
.description h2 {margin:0 0 1rem 0 !important; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.5rem; color:#6F6F6E; font-weight:400; }
.description p {margin:0 0 2rem 0 !important; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.25rem; color:#6F6F6E; font-weight:300; }
.description ul {margin:0 0 2rem 0 !important; padding:0; list-style-type:none;}
.description ul li {font-family: 'Roboto Condensed', sans-serif; font-size:1.25rem; color:#6F6F6E; font-weight:300;}

.galeria3 {width:90%; height:auto; padding:0; margin: 0 auto 5% auto; display:flex; flex-direction:row;}
.galeria3 img {width:100%; height:auto !important; padding:0 0 5rem 0 !important; margin:0}
.col-izq {width:40%; height:auto; padding-right:2%;}
.col-der {width:60%; height:auto; padding-left:2%;}

.col2-izq {width:50%; height:auto; padding-right:2%;}
.col2-der {width:50%; height:auto; padding-left:2%;}

.medios {width:90% !important; height:auto; padding:0; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; columns:3; column-gap:2rem; row-gap:5rem;}
.medios a {text-decoration: none; padding:0; margin:0; float:left;}
.medios a img:hover {filter: grayscale(100%);}
.medios img {width:100%;}
.medios h2 {width:100%; height:auto; font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.25rem, 5vh, 1.5rem); font-weight:400; color: #6F6F6E; margin:0; padding:0;}
.medios p {width:100%; height:auto; margin:0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.35rem; font-weight:300; color: #6F6F6E;}


footer {width:90%; height:auto; padding:0; margin: 5% auto; display:table; text-align:center;}
footer a {width:min-content; height:auto; border: 2px solid #6F6F6E; margin:0; padding:1rem; font-family: 'Roboto Condensed', sans-serif; font-size:1.5rem; font-weight:400; color:#6F6F6E; text-decoration:none;}
footer a:hover {border: 2px solid #777; color:#4EAD33;}

.caja {width:100%; height:auto; margin:0 auto; display:flex; flex-direction:row; justify-content:space-between; align-items: flex-start;  padding:0;}
.bloque {display:block; width:45%; float:left; padding:0; margin:0;}

.nosotros {width:90%; height:auto; padding:0; margin: 0 auto; display:flex; flex-direction:row;}
.foto {width:50%; height:auto; margin:0;}
.foto img {width:100%; height:auto;}
.texto {width:50%; height:auto; margin:0;}
.texto h1 {font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.25rem, 1.5vw, 3rem); color:#6F6F6E; font-weight:400; margin:0;}
.texto h2 {font-family: 'Roboto Condensed', sans-serif; font-size:1.75rem; color:#6F6F6E; font-weight:400; margin:0;}
.texto p {margin:0 0 2rem 0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.1rem; color:#6F6F6E; font-weight:300; text-align:justify; line-height:1.25;}

.padbot {padding:0 0 3rem 0;}
.padder {padding: 0 2.5% 0 0;}
.padizq {padding:0 0 0 2.5%;}
.mbot {margin-bottom:5%;}
.mtop {margin-top:130px;}

@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:100px !important; position:fixed !important;}	
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/i_cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:40px; height:40px;}
 .burger[aria-expanded="true"] {display:block;  background: url("../images/i_cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:40px; height:40px;}
 .primary-navigation { position:fixed; width:50%; height:100vh; inset:0; background:white; flex-direction:column; justify-content:center; align-items:center; padding: 0; z-index:99999 !important; transform: translateX(200%); transition:transform 150ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(100%);}
 .logo {position:absolute; left:1.5rem; top:1.5rem; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
 .logo img {height:50px; width:auto; max-width:auto; }

 .contenido {width:100%; height:auto; padding: 0; display:flex; justify-content:center; z-index:100 !important;}
 .primary-navigation li {margin-bottom:0rem;}
 .primary-navigation a { text-decoration:none; font-family: 'Roboto Condensed', sans-serif; font-size:1.25rem; font-weight:400; width:auto; margin:0 0 3rem 0 !important; padding:0 !important; color:#6F6F6E !important; text-shadow: none !important;}
 .primary-navigation a:hover {color:#4EAD33 !important;}
 .primary-navigation a.active {color:#4EAD33; font-weight:400;}
 
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:2rem; right:1.5rem; z-index:99999 !important; width:40; height:40px;}
 
 .nosotros {width:90% !important; height:auto; padding:0; margin: 0 auto 3rem auto; display:flex; flex-direction:column;}
 .foto {width:100%; height:auto; margin:0 0 2rem 0; padding:0; float:left;}
 .foto img {width:100%; height:auto;}
 .texto {width:100%; height:auto; margin:0; padding:0;}
 .texto h1 {font-family: 'Roboto Condensed', sans-serif; font-size:2rem; color:#6F6F6E; font-weight:400; margin:0;}
 .texto h2 {font-family: 'Roboto Condensed', sans-serif; font-size:1.4rem; color:#6F6F6E; font-weight:400; margin:0;}
 .texto p {margin:0 0 2rem 0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.25rem; color:#6F6F6E; font-weight:300; text-align:justify; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; line-height:1.25;}
 
 .mtop {margin-top:7rem !important;}
 .padbot {padding:0 0 1.5rem 0;}
 .padder {padding: 0;}
 .padizq {padding:0;}
 .orden {flex-direction:column-reverse;}
 .listado {width:90%; height:auto !important; display:grid; flex-direction:column; justify-content:flex-start; align-items:center; grid-gap:3%; margin:0 auto !important;  padding:0 0 4em 0 !important; z-index:100; float:left;}
 .elemento {width:100%; height:auto; padding:0; margin:0;  display:flex; flex-direction:column; justify-content:center; align-items:center; }
 .elemento img {width:100%;}
 
 .generales {width:90%; min-height:100%; display:flex; flex-direction:column; margin:0 auto; padding:0 0 1% 0; z-index:50;}
 .titulo {width:100%; margin:0; padding:0; float:left;}
 .titulo h1 {font-family: 'Roboto Condensed', sans-serif; font-size:2rem; color:#6F6F6E; font-weight:400;}
 .iconos {width:100%; margin:0; padding:0 0 3rem 0; display:flex; float:left; flex-direction:row; align-items: center;}
 .iconos a {width:30px; height:auto; margin-right:3rem; padding:0; opacity:0.4;}
 .iconos a:hover, .iconos a.active {opacity:1;}
 .iconos img {width:100%; height:auto;}
 .cerrar {position:absolute; right:5% !important; margin-right:0rem !important; padding:0;}

 .galeria {width:90%; height:auto; padding:0; margin: 0 auto; display:flex; flex-direction:column; text-align:center;}
 .galeria img {width:100%; height:auto !important; padding:0 0 5% 0 !important; margin:0;}
 
 .galeria2 {width:90%; height:auto; padding:0; margin: 0 auto 5% auto; display:flex; flex-direction:column;}
 .galeria2 img {width:100%; height:auto !important; padding:0 0 5% 0 !important; margin:0;}
 .description {width:100%; height:auto; columns:1 !important; column-gap:0; text-align:justify; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;}
 .description h2 {margin:0 0 1rem 0 !important; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.375rem; color:#6F6F6E; font-weight:400; }
 .description p {margin:0 0 2rem 0 !important; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.250rem; color:#6F6F6E; font-weight:300; line-height:1.25;}
 .description ul {margin:0 0 2rem 0 !important; padding:0; list-style-type:none;}
 .description ul li {font-family: 'Roboto Condensed', sans-serif; font-size:1.250rem; color:#6F6F6E; font-weight:300; line-height:1.25}
 
 .galeria3 {width:90%; height:auto; padding:0; margin: 0 auto 5% auto; display:flex; flex-direction:column;}
 .galeria3 img {width:100%; height:auto!important; padding:0 0 5% 0 !important; margin:0}
 .col-izq {width:100% !important; height:auto; padding-right:0; margin-bottom:3rem;}
 .col-der {width:100% !important; height:auto; padding-left:0; margin-bottom:3rem;}
 .col2-izq {width:100%; height:auto; padding-right:0; margin-bottom:3rem;}
 .col2-der {width:100%; height:auto; padding-left:0; margin-bottom:3rem;}
 
 .medios {width:90% !important; height:auto; padding:0; margin:0 auto; display:grid; grid-template-columns:1fr; columns:1; column-gap:0rem; row-gap:2rem;}
 .medios a {text-decoration: none; padding:0; margin:0; float:left;}
 .medios a img:hover {filter: grayscale(100%);}
 .medios img {width:100%;}
 .medios h2 {width:100%; height:auto; font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.25rem, 5vh, 1.5rem); font-weight:400; color: #6F6F6E; margin:0; padding:0;}
 .medios p {width:100%; height:auto; margin:0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-size:1.35rem; font-weight:300; color: #6F6F6E;}
 
 footer {width:90%; height:auto; padding:20% 0 !important; margin: 0 auto !important; display:table; text-align:center;}
 footer a {width:min-content; height:auto; border: 2px solid #6F6F6E; margin:0 0 5% 0 !important; padding:1rem; font-family: 'Roboto Condensed', sans-serif; font-size:1.125rem; font-weight:400; color:#6F6F6E; text-decoration:none;}
 footer a:hover {border: 2px solid #777; color:#4EAD33;}

}

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