@font-face{
font-family:titulos;
src: url('../font/MySketchFont.ttf');}
@font-face{
font-family:cuerpo;
src: url('../font/cuerpo.ttf')
}
body{
margin:auto;
padding:0px;}
#contenedor{
margin:auto;
width:80%;
border:1px solid black;
box-shadow:0px 20px 35px rdba(0,0,0,0.5);
-webkit-box-shadow:0px 20px 35px rdba(0,0,0,0.5);
-mozilla-box-shadow:0px 20px 35px rdba(0,0,0,0.5);
-o-box-shadow:0px 20px 35px rdba(0,0,0,0.5);
border-radius:15px;
}
header{
background:rgba(255,255,255,0);
height:210px
}
#contenido{

}
#presentacion{
padding:0px;
margin:0px;
text-align:left;
width:100%;
height:0px;
background:rgba(0,0,0,0.1);
background:url('../images/senderismo1.jpg')center ;
background-size:800px 400px;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);
-o-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);
animation:esconde 16s;
-webkit-animation:esconde 16s;
-moz-animation:esconde 16s;
-o-animation:esconde 16s;
}
@keyframes esconde{
0%{height:239px;background-size:800px 400px;}
50%{height:239px;}
100%{height:0px;background-size:600px 200px;}
}
#etiquetas{
padding:5px;
height:335px;
}
footer{
background:rgba(65,115,15,0.5);
text-align:center;
font-family:cuerpo;
font-size:12px;
border-radius:0px 0px 10px 10px;
}
#logotipo{
font-size:0px;
float:left;
position:absolute;
margin:0px;
padding:0px;}
#tipo{
position:absolute;
padding:0px;
margin:0px;
font-size:48px;
color:rgba(255,145,60,0.9);
text-shadow:2px 2px 5px rgba(0,0,0,0.5);
font-family:titulos;
font-style:italic ;
transform:translate(150px,0px);
-webkit-transform:translate(150px,0px);
-moz-transform:translate(150px,0px);
-o-transform:translate(150px,0px);
}
#logo {
float:left;
width:50%;
text-align:center;
height:100%;
vertical-align:middle;
position:absolute;
padding:0px;
margin:0px;
transform:scale(1,1);
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
-o-transform:scale(1,1);
animation:late 5s;
-webkit-animation:late 5s;
-moz-animation:late 5s;
-ms-animation:late 5s;
-o-animation:late 5s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;

}
@keyframes late{
0%{transform:scale(1,1);}
45%{transform:scale(1,1);}
47%{transform:scale(0.98,0.98);}
50%{transform:scale(1.02,1.02);}
53%{transform:scale(0.98,0.98);}
55%{transform:scale(1,1);}
100%{transform:scale(1,1);}
}
#login {
padding:10px;
float:right;
width:50%;
text-align:right;
vertical-align:middle;}
input {
padding:5px;
font-family:cuerpo;
text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
border:0px solid white;
border-radius:5px;
background:rgba(0,0,0,0.1);
box-shadow: inset:0px 0px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: inset:0px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset:0px 0px 0px rgba(0,0,0,0.2);
-o-box-shadow: inset:0px 0px 0px rgba(0,0,0,0.2);
-ms-box-shadow: inset:0px 0px 0px rgba(0,0,0,0.2);
transition: box-shadow 1s, backgroun 1s, border 1s;
-webkit-transition:-webkit-box-shadow 1s, backgroun 1s, border 1s;
-moz-transition:-moz-box-shadow 1s, backgroun 1s, border 1s;
-ms-transition:-moz-box-shadow 1s, backgroun 1s, border 1s;
-o-transition:-o-box-shadow 1s, backgroun 1s, border 1s;
}
input:hover{
box-shadow:0px 0px 15px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 15px rgba(0,0,0,0.5);
-ms-box-shadow:0px 0px 15px rgba(0,0,0,0.5);
-o-box-shadow:0px 0px 15px rgba(0,0,0,0.5);
background:rgba(0,255,0,0.1);
border:2px solid white;
}
a{
text-decoration:none;
color:rgba(0,0,0,1);
}
#registrate{
font-family:cuerpo;
color:rgba(0,0,0,1);
font-size: 12px;
text-shadow: 0px 0px 5px rgba(0,225,0,0);
animation:registrate 2s;
-webkit-animation: registrate 2s;
-moz-animation: registrate 2s;
-ms-animation: registrate 2s;
-o-animation: registrate 2s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
@keyframes registrate{
0%{text-shadow: 0px 0px 5px rgba(0,225,0,0);}
50%{text-shadow: 0px 0px 5px rgba(0,225,0,1);}
100%{text-shadow: 0px 0px 5px rgba(0,225,0,0);}
}
#animaciontexto1{
position:absolute;
font-family:titulos;
color:rgba(255,255,255,0);
text-shadow:3px 3px 5px rgba(0,0,0,0);
font-size:32px;
transform:translate(150px,0px);
-webkit-transform:translate(150px,0px);
-moz-transform:translate(150px,0px);
-ms-transform:translate(150px,0px);
-o-transform:translate(150px,0px);
animation: muevetexto1 5s;
-webkit-animation: muevetexto1 5s;
-moz-animation: muevetexto1 5s;
-ms-animation: muevetexto1 5s;
-o-animation: muevetexto1 5s;
}
@keyframes muevetexto1{
0%{color:rgba(255,255,255,0);transform:translate(-150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
25%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
50%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
75%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
100%{color:rgba(255,255,255,0);transform:translate(150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
}
#animaciontexto2{
position:absolute;
font-family:titulos;
color:rgba(255,255,255,0);
text-shadow:3px 3px 5px rgba(0,0,0,0);
font-size:32px;
transform:translate(150px,0px);
-webkit-transform:translate(150px,0px);
-moz-transform:translate(150px,0px);
-ms-transform:translate(150px,0px);
-o-transform:translate(150px,0px);
animation: muevetexto2 5s;
-webkit-animation: muevetexto2 5s;
-moz-animation: muevetexto2 5s;
-ms-animation: muevetexto2 5s;
-o-animation: muevetexto2 5s;
animation-delay:5s;
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-ms-animation-delay:5s;
-o-animation-delay:5s;
}
@keyframes muevetexto2{
0%{color:rgba(255,255,255,0);transform:translate(-150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
25%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
50%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
75%{color:rgba(255,255,255,1);transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
100%{color:rgba(255,255,255,0);transform:translate(150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
}
table {
width:48%;
float:left;
margin:1%;
border:1px solid rgba(255,255,255,1);
border-radius:10px;
background:rgba(65,115,15,0.2);
background:url('../images/senderismo.jpg') center;
box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-ms-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-o-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
transform:scale(1,1);
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
-o-transform:scale(1,1);
transition:transform 1s;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
}
#tabla{}
table:hover{
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
}
table th {
text-align:left;
width:100%;
font-family:cuerpo;
font-size:125%;
font-weight:bold;
color:rgba(255,76,1,0.9);
border:1px solid rgba(0,0,0,0.5);
border-radius:10px;
background:rgba(65,115,15,0.5);
box-shadow:0px 0px 10px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
-ms-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
-o-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
table td{
border: 0px solid white;
text-shadow:2px 2px 4px rgba(0,0,0,0.2);
color:rgba(79,136,4,1);
font-family:arial;
font-size:125%;
font-weight:bold;
background:rgba(255,255,255,0.2);
border-radius:10px;
}
#estrellas{
float:right;
font-size:12px;
font-family:cuerpo;
color:rgba(65,115,15,0.05);
}
a.imagenes{
color:rgba(79,136,4,1);
}
nav{
float:left;
width:105px;
margin:auto;
background-color:rgba(65,115,15,0.05);
}
nav li{
   list-style: none;
   position:relative;
   }
nav li a{
   color: rgb (0,0,0);
   text-decoration:none;
   padding:1px;
   display:block;
}
nav li a:hover{
   color:rgba (0,0,0,1);
}
nav li.parent:hover{
   border:1px rgb (0,0,0) solid;
   margin:-1px;
   background:rgba(255,76,1,0.9);
   color:rgb(0,0,0);
}
nav li ul {
   width: 230px;
   margin:auto;
   display:none;
   background:#F8F8F8;
   background:url('../images/idafe.jpg')center bottom;
   position: absolute;
   left: 100%;
   top:-1px;
}
nav li:hover ul {
   display: block;
}
nav ul li:hover{
border:1px rgb (0,0,0) solid;
   margin:0px;
   background:rgba(255,76,1,0.9);
   color:rgb(0,0,0);
}