/*----------------------------RESET-------------------------------*/
html,body,div,span,
applet,object,iframe,code,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-family: inherit;
  line-height: 1.2em;
  text-align: left;
}

/*----------------------------TYPOGRAPHY SYSTEM--------------------------*/
/* Base font size: 16px = 1rem */
html {
  font-size: 16px;
  font-family: "MS Trebuchet", Arial, sans-serif;
}

/* Typography scale using consistent rem units */
.text-xs { font-size: 0.75rem; }   /* 12px */
.text-sm { font-size: 0.875rem; }  /* 14px */
.text-base { font-size: 1rem; }    /* 16px */
.text-lg { font-size: 1.125rem; }  /* 18px */
.text-xl { font-size: 1.25rem; }   /* 20px */
.text-2xl { font-size: 1.5rem; }   /* 24px */
.text-3xl { font-size: 1.875rem; } /* 30px */
/*--------------------fix html5 for IE------------------------------*/
aside, nav, footer, header, section {
  display:block;
}
/*----------------------------HEADER-------------------------------*/
header {
  height: 4.5em;
}
header a {
  color: yellow;
}
#logo {
  border-radius: .1em;
  -moz-border-radius: .1em;
  -ms-border-radius: .1em;
  -o-border-radius: .1em;
  -webkit-border-radius: .15em;
  box-shadow: 0 0 .17em #d3d3d3; /*grisaceo*/
  -moz-box-shadow:  0 .12em .62em #d3d3d3; /*grisaceo*/
  -ms-box-shadow:  0 .12em  .62em #d3d3d3; /*grisaceo*/
  -o-box-shadow:  0 .12em .62em #d3d3d3; /*grisaceo*/
  -webkit-box-shadow: 0 .12em .62em #d3d3d3; /*grisaceo*/
  float: left;
  margin: .15em .5em;
}
h1 span {
  color: #FBFF00;
  display: block;
  float: left;
  font-style: italic;
  font-weight: bold;
  font-size: 1.25rem;
  margin: .7em 0;
}
h1 span:hover {
  text-decoration: underline;
}
h1 {
  display: inline;
}
#hazte_socio {
  background-image: url("/assets/fotos/gradient-aeae69df.png");
  border: .6em solid #009000;
  border-radius: .6em;
  -moz-border-radius: .6em;
  -ms-border-radius: .6em;
  -o-border-radius: .6em;
  -webkit-border-radius: .6em;
  border-top: outset .06em #858500;
  border-right: outset .2em #D2FC04;
  border-bottom: outset .2em #D2FC04;
  border-left: outset .1em #858500;
  box-shadow: 0 .0 .6em #d3d3d3; /*grisaceo*/
  -moz-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -ms-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -o-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -webkit-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  color: #6A9161;
  cursor: auto;
  float: right;
  height: 1.3em;
  margin-right: 0;
  margin-top: 1.4em;
  text-align: center;
  font-size: 1rem;
  padding: .3em 0;
  width: 6.25em;
}
#contactame {
  background-image: url("/assets/fotos/gradient-aeae69df.png");
  border: .06em solid #009000;
  border-radius: .6em;
  -moz-border-radius: .6em;
  -ms-border-radius: .6em;
  -o-border-radius: .6em;
  -webkit-border-radius: .6em;
  border-top: outset .06em #858500;
  border-right: outset .2em #D2FC04;
  border-bottom: outset .2em #D2FC04;
  border-left: outset .1em #858500;
  box-shadow: 0 .0 .6em #d3d3d3; /*grisaceo*/
  -moz-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -ms-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -o-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -webkit-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  color: #6A9161;
  cursor: auto;
  float: right;
  font-size: 1rem;
  height: 1.3em;
  margin: 1.4em 1em 0 2em;
  padding: .3em 0;
  text-align: center;
  width: 6.25em;
}
#hazte_socio:active, #contactame:active {
  border-top: inset .15em rgba(0,0,0,.5);
  border-right: inset .1em rgba(0,0,0,.2);
  border-bottom: inset .1em rgba(0,0,0,.2);
  border-left: inset .15em rgba(0,0,0,.5);
}
#hazte_socio:hover, #contactame:hover {
  color: #366815;
}
.contenido {
  color: #317A14; /*verde oscuro*/
  display: none;
  text-decoration: underline;
}
nav {
  padding-top: .7em;
}
nav li {
  background-color: #6C8D5C;
  border-radius: .63em .63em 0 0;
  -moz-border-radius: .63em .63em 0 0;
  -ms-border-radius: .63em .63em 0 0;
  -o-border-radius: .63em .63em 0 0;
  -webkit-border-radius:.63em .63em 0 0;
  border-top: outset .11em #919C81;
  border-right: outset .11em #919C81;
  border-left: outset .13em #919C81;
  box-shadow: 0em .0em .05em .01em #395A3D;
  -moz-box-shadow: 0em .0em .05em .01em #395A3D;
  -ms-box-shadow: 0em .0em .05em .01em #395A3D;
  -o-box-shadow: 0em .0em .05em .01em #395A3D;
  -webkit-box-shadow: 0em .0em .05em .01em #395A3D;
  cursor: auto;
  display: inline;
  font-size: 0.875rem;
  float: left;
  margin: .45em 0em 0em .015em;
}
nav a {
  color: #FFF330;
  display: inline-block;
  height: 2.1em;
  line-height: 1em;
  padding-top: .5em;
  padding-left: .24em;
  text-align: center;
  width: 8.4em;
  font-size: 0.875rem;
}
nav a:active, nav li:active, nav li:active a,
.current, .current a {
  background: transparent;
  color:#3F4F35;
  font-weight: bold;
}
nav a:hover, h1 a:hover, ul:hover {
  color: #26301F; /*verde oscuro*/
  font-weight: bold;
}
/*-----------------------------NAVLEFT------------------------------*/
.google, #navegador {
  display: none;
}
.navleft {
  float: left;
  margin-top: 10.3em;
  position: fixed;
}
.navleft li {
  background-color: #5E7B50;
  border-radius: .18em .18em;
  -moz-border-radius: .18em .18em;
  -ms-border-radius: .18em .18em;
  -o-border-radius: .18em .18em;
  -webkit-border-radius: .18em .18em;
  border-top:outset .1em #346216;
  border-right:outset .1em #BFFF31;
  border-bottom: outset .05em #7C9B63;
  border-left: outset .1em  #2E5A11;
  box-shadow: -.06em -.06em .15em #7C9B63;
  -moz-box-shadow: -.06em -.06em .15em #7C9B63;
  -ms-box-shadow: -.06em -.06em .15em #7C9B63;
  -o-box-shadow: -.06em -.06em .15em #7C9B63;
  -webkit-box-shadow: -.06em -.06em .15em #7C9B63;
  cursor: auto;
  height: 2.35em;
  line-height: 2.55em;
}
.navleft a {
  color: #F0E43A;
  display: inline-block;
  line-height: .98em;
  padding: .2em .6em;
  text-align: center;
  width: 10.2em;
}
.navleft li:active {
  background-color: #829057;
  background-color: #7A8D69;
  border-bottom: inset .18em rgba(0,0,0,.4);
}
.navleft a:hover, .navlest li:hover {
  color: #26301F;
}
.navleft a:active {
  color: #F0E43A;
}
/*-----------------------------CENTRAL BODY---------------------------------*/
#bordexterior {
  border: .1em solid #9EB28E;
  border-right-color:outset .01em rgba(255,255,255,.5);
  border-left-color: outset .01em #2E5A11;
  box-shadow: 0 0 .62em  #2E5A11; /*grisaceo*/
  -moz-box-shadow: 0 0 .62em #2E5A11; /*grisaceo*/
  -ms-box-shadow: 0 0 .62em #2E5A11; /*grisaceo*/
  -o-box-shadow: 0 0 .62em #2E5A11; /*grisaceo*/
  -webkit-box-shadow: 0 0 .62em #2E5A11; /*grisaceo*/
  height: 100%;
}
body {
  background-color: #F2F5EE; /*Old browsers*/
  background: -moz-linear-gradient(left, #D4F4D4,#fff, #D4F4D4, #fff, #D4F4D4) fixed;
  background: -ms-linear-gradient(left, #D4F4D4, #fff, #D4F4D4) fixed;
  background: -o-linear-gradient(left, #D4F4D4, #fff, #D4F4D4) fixed;
  background: -webkit-linear-gradient(left, #DAFBD8, #fff, #DAFBD8, #fff, #DAFBD8) fixed;
  height:100%;
}
#body {
  height: 100%;
  margin: 0 auto;
  padding: 0 auto;
  width: 60em;
}
#wrapper {
  background-color: #708B56; /*Old browsers*/
  background: -moz-linear-gradient(90% 100% 80deg, #fff, #5F774B) fixed;
  background: -ms-linear-gradient(#6A9161, #fff, #6A9161, #fff) fixed;
  background: -o-linear-gradient(#6A9161, #fff, #6A9161, #fff) fixed;
  background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#6A9161), to(#FFF)) fixed; /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(#6A9161, #fff)*/ fixed; /* Safari 5.1+, Chrome 10+ */
  position: fixed;
  width: 60em;
	z-index: 1;
}
a {
  color: #5A8050;
  text-decoration: none;
}

a .content {
	text-decoration: underline;
}
ol li {
  font-family: "MS Trebuchet", sans-serif;
  font-size: 0.875rem;
  list-style-type: disc;
  margin-left: 1.5em;
  padding: .55em;
  line-height: 1.4;
}
li {
  list-style-type: none;
}
h2, h3 {
  font-family: serif;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: .8em;
  line-height: 1.3;
}
h4 {
  color: #659659; /*verde*/
  font-family: serif;
  font-size: 1.125rem;
  font-weight: bold;
  margin: .5em 0;
  padding: 0;
}
.box {
  margin-top: .6em;
}
.centrar {
  margin-left: 5em;
}
small {
  font-size: 0.75rem;
}
/*----------------------------GENERAL CONTENT-----------------------*/
.content {
  display:block;
  float: left;
  margin-top: 9em;
  margin-left: 13.3em;
  min-height: 38em;
  text-align: center;
  width: 34em;
}
.content a, .blog a , .article a {
  padding: .30em;
}
.blog .blog-date {
  font-family: "MS Trebuchet", sans-serif;
  font-size: 0.875rem;
}
.blog p, .blog li {
  font-family: "MS Trebuchet", sans-serif;
  font-size: 1rem;
  padding-bottom: .93em;
  text-align: justify;
  line-height: 1.5;
}
.blog ul {
  padding-left: 1.2em;
}
.blog li {
  list-style: disc;
}
#article_blog {
	margin-left: -1.53em;
}
.id, .situacion{
  font-size: 0.875rem;
	margin-top: .3em;
  text-align: center;
}
.id,.situacion, span {
  color: #000;
}
.date {
  color: #597F5C; /*verde gris*/
  margin: .5em 0;
}
#detalle {
  margin-left: 3em;
}
#detalle2 {
  margin: 0 auto;
}
#anteriores, #posteriores {
  background-color:#DAF6D0;
  font-size: 0.875rem;
  display: inline-block;
  margin: 0 1em 0 2em;
  padding: .2em;
  text-align:center;
  width: 33%;
}
.rw, .ff {
  color: #667B4A;
  display: inline-block;
  font-size: 1.125rem;
  padding: .2em;
}
#paginador {
  margin: 1.5em auto 2em auto;
  text-align:center;
}
.archive h3 {
  margin: 0 0 0 5px;
  padding: 0;
}
.archive ul {
  margin: .2em 0 1em 0;
  padding: 0;
}
.archive li {
  font-family: "MS Trebuchet", sans-serif;
  font-size: 0.875rem;
  line-height: 2em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.archive li a:hover {
  text-decoration: underline;
}
/*----------------------------IMG----------------------*/
img {
	display: block;
	margin: auto;
	text-align: center;
}
.fbk img {
	margin-left: 0;
}
.content img {
  border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-border-radius: .3em;
  -ms-border-radius: .3em;
  -o-border-radius: .3em;
  margin: 1em auto;
}
.galeria {
  display: inline-block;
  padding: .8em;
  width: 34em;
}
.galeria dl{
  background-color: #5E7B50;
  border: .1em solid #5E7B50;
  display: inline;
}
dl {
  border: .1em solid rgba(255,255,255,.4);
  float: left;
  height: 10.5em;
  margin: .17em;
}
.galeria img {
		border-radius: none;
	  -webkit-border-radius: none;
	  -moz-border-radius: none;
	  -ms-border-radius: none;
	  -o-border-radius: none;
		margin: 0 auto;
}
.galeria .popup img {
	margin-top: 1.5em;
}
#asideright img {
  margin-bottom: .35em;
  width: 10.3em;
}
#teaming {
	float: right;
	margin-top: -.5em;
	margin-right: 6em ;
}
/*-----------------------------POPUP--------------------------*/
.popup{
  background-color: #DAF6D0;
  box-shadow: -.06em -.08em 1em #7C9B63;
  -moz-box-shadow:  -.06em -.08em 1em #7C9B63;
  -ms-box-shadow:  -.06em -.08em 1em #7C9B63;
  -o-box-shadow:  -.06em -.08em 1em #7C9B63;
  -webkit-box-shadow:  -.06em -.08em 1em #7C9B63;
  display: none;
  height: 100%;
  left: 50%;
  margin-left: -270px;
  padding-top: 1em;
  padding-left: .1em;
  position: fixed;
  top: 133px;
  text-align: center;
  width: 550px;
}
.popup .wrapper{
  display:inline-block;
  position: relative;
  background: white;
  box-shadow: -.03em 0 .5em #7C9B63;
  -moz-box-shadow:  -.03em 0 .5em #7C9B63;
  -ms-box-shadow:  -.03em 0 .5em #7C9B63;
  -o-box-shadow:  -.03em 0 .5em #7C9B63;
  -webkit-box-shadow: -.03em 0 .5em #7C9B63;
  border: .3em solid #fff;
  border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-border-radius:  .2em;
  -ms-border-radius:  .2em;
  -o-border-radius:  .2em;
}
#anteriores, #posteriores {
  box-shadow: -.03em 0 .5em #7C9B63;
  -moz-box-shadow:  -.03em 0 .5em #7C9B63;
  -ms-box-shadow:  -.03em 0 .5em #7C9B63;
  -o-box-shadow:  -.03em 0 .5em #7C9B63;
  -webkit-box-shadow: -.03em 0 .5em #7C9B63;
}
.popup p  {
  text-align: center;
}
.popup .close {
  background-color: #fff;
  padding: .1em 0 0 .08em;
  top: 0;
  right: 0;
  position: absolute;
  display: inline-block;
}
.popup img {
}
/*-----------------------------FORMULARIO--------------------------*/
form {
  margin-bottom: 1em;
}
form #honeypot {
  position: absolute;
  left: -9999px;
  z-index: -1;
}
.formulario fieldset, .formulariosocio fieldset {
  background-color: #F6FEF2;
  border-radius: .5em;
  -moz-border-radius: .5em;
  -ms-border-radius: .5em;
  -o-border-radius: .5em;
  -webkit-border-radius: .5em;
  box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -moz-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -ms-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -o-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  -webkit-box-shadow: 0 0 .6em #d3d3d3; /*grisaceo*/
  margin: 0 auto;
  text-align: left;
}
.formulario fieldset {
  font-family: Arial, "MS Trebuchet", sans-serif;
  font-size: 0.875rem;
  padding: 1.30em 2em 1.25em 1.4em;
  width: 30.5em;
}
.formulariosocio fieldset {
  font-family: Arial, "MS Trebuchet", sans-serif;
  font-size: 0.875rem;
  padding: 1.25em 1.25em 1.25em 1em;
  width: 33.5em;
}
.formulariosocio input[type="text"], .formulario input[type="text"], input[type="email"], input[type="tel"], textarea {
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #FFFFFF,#F4F4F4.06em, #FFFFFF .93em);
  background: -ms-linear-gradient(top, #FFFFFF,#F4F4F4.06em, #FFFFFF .93em);
  background: -o-linear-gradient(top, #FFFFFF,#F4F4F4.06em, #FFFFFF .93em);
  background: -webkit-linear-gradient(top, #FFFFFF,#F4F4F4.06em, #FFFFFF .93em);/* Safari 5.1+, Chrome 10+ */
  background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));/* Safari 4-5, Chrome 1-9 */
  border: .09em solid #ccc; /*gris claro*/
}
.formulario input[type="text"], input[type="email"], input[type="tel"], textarea {
  margin: .5em 0;
  padding: .4em;
  width: 33em;
}
.formulariosocio input[type="text"] {
  margin: .28em 0 1em .2em;
  padding: .5em;
}
.formulariosocio input[type="text"].cuenta {
  width: 30em;
}
.formulario textarea {
  height: 9.37em;
}
.formulario label, .formulariosocio label {
  color: #666; /*gris oscuro*/
}
.formulario label.error, .formulariosocio label.error {
  color: #cf0101; /*rojo*/
  display: block;
  margin: .18em 0 0 0;
  text-align: right;
  width: 16.87em;
}
.formulario .placeholder, .formulariosocio .placeholder {
  color: #aaa; /*gris*/
}
.formulario .button, .formulariosocio .button {
  background-color: #506540;
  border-radius: .93em;
  -moz-border-radius: .93em;
  -ms-border-radius: .93em;
  -o-border-radius: .93em;
  -webkit-border-radius: .93em;
  color: #FAFC01;
  display: inline-block;
  font-size: 0.875rem;
}
.formulario .button {
  margin: 1.3em 0 0 8em;
  padding: .6em;
}
.formulariosocio .button {
  margin: 1.70em 0 0 8.2em;
  padding: .6em;
}
.formulario .button:hover, .formulario .button:active, .formulariosocio .button:hover, .formulariosocio .button:active {
  background-color: #99BF7B;
  color: #4D603E;
  margin-top: 1em;
}
#label,#label p, .periodicidad, .radio, .centrado, .centrado input, .cuota, #€ {
  color: #666; /*gris oscuro*/
}
.radio {
  margin: 0 1.5em;
  text-align: center;
}
.titulo {
  font-size: 1.5rem;
  margin: 1em 0;
}
#nombre {
  width: 31.1em;
}
#dni, #tel {
  text-align: center;
  width: 7.5em;
}
#domicilio {
  width: 36.55em;
}
#poblacion {
  width: 28.75em;
}
#provincia {
  width: 19.5em;
}
#pais {
  width: 12em;
}
#apadrinar {
  width: 40.8em;
}
#banco_caja {
  width: 25.9em;
}
#entidad, #oficina, #cp {
  width: 3em;
}
#cuenta {
  width: 8.3em;
}
#dc {
  width: 1.5em;
}
#cod_pais {
  width: 1.5em;
}
#email, #cuota  {
  width: 15.75em;
}
#condiciones a {
  color: #6A9161;
}
.centrado, .centrado input {
	margin-top: .05em;
  text-align: center !important;
}
.cuenta_bancaria {
	color: #5A8050;
}

#condiciones {
  font-family: arial, sans-serif;
  font-size: 0.75rem;
  margin-top: 2em;
  text-align: center;
}
.formulario #condiciones {
  font-size: 0.875rem;
}
#€ {
  font-size: 0.875rem;
  padding: 1em 0 0 .7em;
  text-align: center;
}
/*-----------------------CONDICIONES LEGALES-----------------------*/
.wrap {
  float: center;
  height: 40em;
  position: absolute;
  width: 31em;
}
/*-----------------------------ASIDELEFT---------------------------*/
.asideleft {
  position: fixed;
  margin-top: 29.1em;
  width: 10.37em;
}
/*-----------------------------ASIDERIGHT--------------------------*/
#asideright {
  height: 100%;
  margin: 11em auto auto 48.65em;
  position: fixed;
}
.fbk {
  background-color: #EBEBEB;
  border: .06em solid #999;
  border-radius: .2em;
  -moz-border-radius: .2em;
  -ms-border-radius: .2em;
  -o-border-radius: .2em;
  -webkit-border-radius: .2em;
  box-shadow: 0 .0 .4em rgba(61,61,61,.5);
  -moz-box-shadow: 0 0 .4em rgba(61,61,61,.5);
  -ms-box-shadow: 0 0 .4em rgba(61,61,61,.5);
  -o-box-shadow: 0 0 .4em rgba(61,61,61,.5);
  -webkit-box-shadow: 0 0 .4em rgba(61,61,61,.8);
  display: block;
  height: 1.4em;
  margin: 8.5em auto auto 48.95em;
  padding: .06em;
  position: fixed;
  width: 10.3em;
}
.fbk span {
  color: #686868;
  display: block;
  font-family: arial, sans-serif;
  font-size: 0.875rem;
  height: 1.5em;
  margin-left: 1.9em;
  margin-top: -1.5em;
}
.callaction {
  border: .1em solid #72915B;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  -webkit-border-radius: 1em;
  box-shadow: 0 .1em .6em #000;
  color: #72915B;
  display: block;
  font-family: arial,sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  height: 6em;
  margin: -.8em auto .5em auto;
  padding: .5em;
  text-align: center;
/*  width: 12em;
*/}
.callaction * {
  text-align: center;
}
/*-----------------------------FOOTER-----------------------------*/
footer {
  padding: 1em 0;
}
footer  small{
  clear: both;
  color: #8DA281;
  display: block;
  margin: 2em auto 0 auto;
  width: 30em;
}

/*-----------------------------DONACIONES-----------------------------*/
.donacion-teaming img {
  margin: -1em;
}

#flash-messages {
  margin: 10rem auto -10rem auto;
  max-width: 30em;
}

/*-----------------------------RESPONSIVE DESIGN-----------------------------*/
/* Mobile styles - screens smaller than 768px */
@media screen and (max-width: 767px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Body and main layout adjustments */
  #body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
  }
  
  #wrapper {
    width: 100%;
    max-width: 100vw;
    position: relative;
    background: #6A9161;
    box-sizing: border-box;
  }
  
  #bordexterior {
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Header responsive */
  header {
    height: auto;
    padding: 10px 0;
  }
  
  #logo {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
  }
  
  h1 {
    text-align: center;
    margin-bottom: 10px;
  }
  
  h1 span {
    float: none;
    display: block;
    text-align: center;
    margin: 5px 0;
    font-size: 1.2em;
  }
  
  #hazte_socio, #contactame {
    float: none;
    display: block;
    width: auto;
    max-width: 200px;
    margin: 5px auto;
    padding: 10px;
    font-size: 1em;
    height: auto;
  }

  /* Navigation responsive - simple stacked button design */
  nav {
    padding: 15px 0;
    background: transparent;
  }
  
  nav ul {
    display: block;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  nav li {
    float: none;
    display: block;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #6C8D5C 0%, #5A7A4A 100%);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    font-size: 1rem;
    width: 100%;
  }
  
  nav li:last-child {
    margin-bottom: 0;
  }
  
  nav li:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #7A9D6A 0%, #689558 100%);
  }
  
  nav a {
    display: block;
    width: 100%;
    padding: 12px 20px;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }
  
  nav a:hover {
    color: #FFF330;
    font-weight: 600;
  }
  
  nav a:active, nav li:active, nav li:active a,
  .current, .current a {
    background: rgba(255,255,255,0.15);
    color: #FFF330;
    font-weight: 600;
  }

  /* Content area responsive */
  .content {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0 0 0;
    padding: 0 10px;
    min-height: auto;
    box-sizing: border-box;
  }
  
  .blog p, .blog li {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .content img {
    max-width: 100%;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  
  /* Ensure all potentially wide elements stay within viewport */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Hide or adjust sidebars for mobile */
  .asideleft {
    display: none;
  }
  
  #asideright {
    position: relative;
    margin: 20px auto;
    text-align: center;
    width: 100%;
  }
  
  #asideright img {
    max-width: 200px;
    width: 100%;
    height: auto;
  }
  
  .fbk {
    position: relative;
    margin: 20px auto;
    width: auto;
    max-width: 250px;
  }

  /* Gallery responsive */
  .galeria {
    width: 100%;
    padding: 10px;
  }
  
  dl {
    width: calc(50% - 10px);
    height: auto;
    margin: 5px;
  }
  
  .galeria img {
    max-width: 100%;
    height: auto;
  }

  /* Forms responsive */
  .formulario fieldset, .formulariosocio fieldset {
    width: 100%;
    padding: 20px 15px;
    margin: 0;
    box-sizing: border-box;
  }
  
  .formulario input[type="text"], 
  .formulariosocio input[type="text"], 
  input[type="email"], 
  input[type="tel"], 
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .formulario textarea {
    height: 120px;
  }
  
  .formulario .button, .formulariosocio .button {
    margin: 20px auto 0 auto;
    display: block;
    width: auto;
    max-width: 200px;
    padding: 12px 20px;
    font-size: 1em;
  }

  /* Specific form field adjustments */
  #nombre, #domicilio, #poblacion, #provincia, #pais, #apadrinar, #banco_caja, #email, #cuota {
    width: 100% !important;
  }
  
  #dni, #tel, #entidad, #oficina, #cp, #cuenta, #dc, #cod_pais {
    width: 100% !important;
    text-align: left;
  }

  /* Popup responsive */
  .popup {
    width: 90%;
    max-width: 400px;
    left: 5%;
    margin-left: 0;
    top: 50px;
    padding: 15px;
  }
  
  .popup .wrapper {
    width: 100%;
  }

  /* Navigation pagination */
  #anteriores, #posteriores {
    width: 45%;
    margin: 10px 2%;
    font-size: 0.875rem;
  }
  
  #paginador {
    margin: 20px auto;
  }

  /* Footer */
  footer small {
    width: 100%;
    text-align: center;
    padding: 0 10px;
    font-size: 0.875rem;
  }

  /* Hide navigation elements that don't work well on mobile */
  .navleft {
    display: none;
  }
  
  .contenido {
    display: block;
    padding: 10px;
    background: #F6FEF2;
    margin: 10px;
    text-align: center;
  }

  /* Flash messages responsive */
  #flash-messages {
    margin: 2rem auto 1rem auto;
    max-width: 90%;
    padding: 0 10px;
  }

  /* Archive and lists responsive */
  .archive h3 {
    font-size: 1.25rem;
    margin-left: 0;
  }
  
  .archive li {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Buttons and links responsive */
  .callaction {
    width: 90%;
    max-width: 250px;
    margin: 10px auto;
    font-size: 0.875rem;
    height: auto;
    padding: 15px;
  }

  /* Table-like content responsive */
  .id, .situacion {
    font-size: 1rem;
    margin: 10px 0;
  }
  
  /* Teaming image responsive */
  #teaming {
    float: none;
    margin: 20px auto;
    text-align: center;
  }
  
  .donacion-teaming img {
    max-width: 100%;
    height: auto;
    margin: 10px auto;
  }
}

/* Navigation remains consistent across all mobile screen sizes */

/* Tablet styles - screens between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #body {
    width: 95%;
    max-width: 800px;
  }
  
  #wrapper {
    width: 100%;
  }
  
  .content {
    width: 70%;
    margin-left: 15%;
  }
  
  #asideright {
    margin-left: 85%;
  }
  
  .fbk {
    margin-left: 85%;
  }
  
  nav li {
    font-size: 0.875rem;
  }
  
  nav a {
    width: 7em;
    font-size: 0.875rem;
    padding: 8px 16px;
  }
}