/*reseteo universal */
*{
   border:0;
   margin:0;
   padding;0;
}

article,figcaption,figure,footer,header,hgroup,nav,section{
   display: block;
}

/* estilos del sitio */

@font-face {
    font-family: 'GoodDogRegular';
    src: url('../fonts/GoodDog-webfont.eot');
    src: url('../fonts/GoodDog-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GoodDog-webfont.woff') format('woff'),
         url('../fonts/GoodDog-webfont.ttf') format('truetype'),
         url('../fonts/GoodDog-webfont.svg#GoodDogRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Poner otra funete con squirell */

body{
   /*background: rgba(1,1,1,0.50) url(../img/logo.png ) no-repeat;*/
  /* background:  url(../img/logo.jpg ) no-repeat ;*/
background:  url(../img/fondo.jpg ) repeat;

   /* background:  -webkit-gradient( linear, left bottom, left top, color-stop(0,#C0C0C0), color-stop(1, #FBE080) )  ;
     background: -moz-linear-gradient( center bottom, #C0C0C0 0%, #FBE080 100% )   url(../img/fondo.jpg ) no-repeat ; */
   color: #610B0B;
   font-family: Helvetica, Verdana,"GoodDogRegular";
   font-size:1em;
   margin-left: 5em;
   margin-right: 0;

}

a{
color:#610B0B; /* Color enlace */
font-weight:bold;
text-decoration:none;
}

a:hover{
   color:  #088A29;
}
figcaption{
      font-size: 0.85em;
      padding: 0.25em;
      text-align: center;
}

fieldset{
   border: .1em solid #088A29;
   border-radius: .5em;
   padding: 1em;
}
form{
   width:100%;
}

form div{
   margin: .5em;
}

h2{
   color: #610B0B0;
   font-family; Helvetica, Verdana,"GoodDogRegular";
}

hr{
   border: 1px dashed #FFF;
   margin: 1em 0;

}

iframe{
   boder-radius:.5em;
}

input[type="email"], input[type="text"], textarea {
   background:#EEE;
   border-radius:.25em;
   color:#088A29;
   font-size:1em;
   padding:.25em;
   width:95%;
}

input[type="email"]:focus, input[type="text"]:focus, textarea:focus {
    background:#C6ECF9;
}

input[type="submit"] {
   background:#F90;
   border-radius: 0 .25em;
   color:#500;
   font-family: Verdana;
   font-size: 0.75em;
   padding: .25em;
}

input[type="submit"]:hover {
   background:#FBBFD5;
   border-radius: .25em 0;
   color:#000;
   cursor:pointer;
   }

img, video{
   max-width: 100%;/* reajusta imagenes y video al dispositivo */
}

label{
  color: #FFFFFF;
   cursor:pointer;
}

legend{
   color:#610B0B;/*#F90;*/
   font-size:1.2em;
   font-weight:bold;
}

textarea{
   resize:none;
}
header, section#contenido, footer {


   margin:0 auto;
   max-width: 90%;
   text-align:justify;
}

header h1, nav {
   display: inline-block;
   max-width: 100%;
   vertical-align: middle;
}


nav ul {
   list-style: none;
   text-align:left;
}

nav li {
   display: inline-block;
   padding: 0.1em;
   vertical-align: top;

}

nav a {
   background: #FFF;
   border: 0.1em solid #610B0B;
   border-radius: 0.25em;
   color: #610B0B/*#088A29*/;
   display: block;
   font-family: Helvetica,"GoodDogRegular",  Verdana; /* poner la otra fuente*/
   font-size: 0.75em;
   padding: 0.2em;
   -ms-transition: all 0.5s ease-in;
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in;
}

nav a:hover {
   background: #610B0B /*#0404B4 #212121*/;
   border: 0.1em solid #088A29;
   border-radius: 0. 0.5em 0 0.5em;
   color: #FFF;
   -ms-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

section#contacto, section#mapa {
   /* background:  #5858FA ;#011E30*/
    border-radius: .5em;
    display:inline-block;
    margin:0 auto;
    min-height: 350px;
    padding: .5em;
    text-align:justify;
    vertical-align:top;
    width:45%;
}

article#infocontacto, article#contactanos {
      border: .1em solid  #FFF;/*#088A29;5858FA;*/
      border-radius: .5em;
      margin: .5em;
      min-height: 144px;
      padding: .5em;
   }

section#principal, aside{
  /* background: #5858FA #1E6381*/;
   border-radius: 0.5em;
   display: inline-block;
   margin: 0 auto;
   max-width: 100%;
   padding: 0.25em;
   vertical-align: top;
   width:  60%;
   text-align:justify;
}

section#actual, section#otros{
  /* background: #5858FA #1E6381*/;
   border-radius: 0.5em;
   display: inline-block;
   margin: 0 auto;
   max-width: 100%;
   padding: 0.25em;
   vertical-align: top;
   width:  60%;
   text-align:justify;
}

section#actual {
width:  30%;


}
section#ficheros1, aside#ficheros0{
  /* background: #5858FA #1E6381*/;
   border-radius: 0.5em;
   display: inline-block;
   text-align:left;
   margin: 0 auto;
   max-width: 100%;
   padding: 0.15em;
   vertical-align: top;
   width:  60%;
   font-size: .75em;
}
article#altatra, article#altatra1{
   background:  url(../img/fondotra.png) repeat ;
   border-radius: 0.5em;
   box-shadow: 5px -9px 3px #000;
   -moz-box-shadow: 1px 1px 0px #090;

   color: #610B0B;
   margin: 0.5em;
   padding: 0.5em;
   text-align: center;
   width:  90%;
}

article#altatra1{
   text-align: left;
   }
article#blanco {
   color: rgb(255,255,255);
   }
article#carabook{
   border-radius: 0.5em;
}
article#fiche0{
   border-radius: 0.5em;
   text-align:left;
}
article#tuitter{
/*background:  url(../img/pergamino.gif ) no-repeat ;*/
   border-radius: 0.5em;
   color: #610B0B;
   margin: 0.5em;
   padding: 0.5em;
   text-align: center;
   width:  90%;
}
article#galeria{
   border-radius: 0.5em;
   margin: 0.5em;
   padding: 0.5em;
   text-align: center;
   width:  85%;
}

aside{
   text-align: left;
   width:  35%;
}
aside#ficheros0{
text-align: left;
vertical-align: top;
 width:  30%;
}
aside img{
   border-radius: 0.5em;
}

article#descripcion-acerca, article#multimedia-acerca{
   /*background: #5858FA;  color azul#1E6381*/
   background:  url(../img/fondotra.png) repeat ;
   border-radius: .5em;
   display: inline-block;
   font-family: Verdana;
   margin: 0 auto;
   max-width: 100%;
   min-height: 543px;
   padding: .5em;
   text-align: justify;
   vertical-align: top;
   width: 55%;
}
article#multimedia-acerca{
   text-align: justify;
   width: 35%
}

li#uno, li#dos {
 border-radius: .5em;
   display: inline-block;
   font-family: Verdana;
   margin: 0 auto;
   max-width: 100%;
   min-height: 80px;
   padding: 2em;
   text-align: left;
   vertical-align: top;
   width: 40%;
}
li#tres, li#cuatro {
 border-radius: .5em;
   display: inline-block;
   font-family: Verdana;
   margin: 0 auto;
   max-width: 100%;
   min-height: 80px;
   padding: 2em;
   text-align: left;
   vertical-align: top;
   width: 40%;
}

#popup {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
}

#cabecera{
  position: fixed;

  height: 50%;
  width: 50%;
  z-index:9998;
  display: none;
  top: 200px;
  left:100px;
}

#caja_flotante{
      position: absolute;
        top:0;
        left: 10px;
        text-align: center;
       /*  border: 1px solid #CCC;
       background-color: #F2F2F2;*/
        width:100px;
}

#overlay{
  position: fixed;
  background: #000;
  height: 100%;
  width: 100%;
  z-index:9998;
  display: none;
  top: 0;
  left:0;
  opacity: .5;
}


.content-popup {
    margin:0px auto;
    margin-top:50px;
    padding:10px;
    width:500px;
    min-height:250px;
    border-radius:4px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 5px #666666;
}

.close {
    position:relative;
    left:480px;
}

.fRutas {
display: inline-block;
vertical-align: top;
text-align:left;
}
.myBtn { background: transparent url('..\img\logo2.gif') 0 0 no-repeat;border: 0px;margin: 0px;padding: 0px;outline: none;font-size: 13px; /* use this if your graph button doesn't have text, otherwise set it to 0pt*/color: #fff; /* use this if your graph button doesn't have text, otherwise remove it */}

.datos-contacto {
   font-family: Verdana;
   font-size: 1em;
   color: #610B0B  /*#F90*/;
   margin-lett:1em;

}


section#mapa {
   text-align:center;
}
footer{
   color:  #000; /*Color negro */
   font-size: 0.85.em;
   padding: 0.75em 0;
}


.fade{
   border-radius: 1.5em;
    opacity: 1;


   filter:alpha(opacity=10);
   transition: all 0.5s ease-in;
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   -ms-transition: all 0.5s ease-in;
   width: 95%;
}

.fade:hover{
   opacity: 0.7;
   filter:alpha(opacity=7);
   -ms-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;

}

.fade1{
   border-radius: 1.5em;
    opacity: 1;
 box-shadow: 5px -9px 3px #000;
   -moz-box-shadow: 1px 1px 0px #090;

   filter:alpha(opacity=10);
   transition: all 0.5s ease-in;
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   -ms-transition: all 0.5s ease-in;
   width: 95%;
}

.ficheros{
display: inline-block;
vertical-align: top;
text-align:left;
}

.titulo{
  background: #222;
  color: #fff;
  border-radius: 3px 3px 0 0;
  dispaly: block;

}

#cerrar {
color: #fff;
display: inline-block;
padding:35px
}

.noticia{
color: #610B0B  /*#F90*/;
text-align:justify;
}

ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
/* media query */

@media(min-width:1500px){
   header h1 {
    text-align: left;
    width: 35%;
   }
   nav {
   text-align: right;
    width: 60%;
   }


}

/* media query */

@media(max-width:1080px){
   nav li{
    font-size: 1em;
   }
   article#galeria {
       width: 90%;
   }

   aside {
       width: 20%;
   }
   article#descripcion-acerca, article#multimedia-acerca{
   width: 45%;
   }
   form{
      width:95%;
   }
}

@media(max-width:800px){
   nav li{
    font-size: 0.95em;
   }
   article#galeria {
       width: 88%;
   }
   section#mapa, section#contacto {
      display:block:block;
      width:95%;
   }
   section#contacto{
      margin-bottom:.2em;
   }
   form{
      width:100%;
   }
}

@media(max-width:600px){
   nav li{
   display:inline-block;
   margin: 0px;
   width: 98%;
   }
   section#principal,article#descripcion-acerca, article#multimedia-acerca,aside {
   display:block;
   margin-bottom: 0.2em;
   width: 95%;
   }


}
