body {
margin: auto;
padding:0px;
}

#contenedor {
margin: auto;
width: 90%;
border: 1px solid black;
box-shadow: 8px 20px 35 px rgba(0,0,0,5);
box-shadow: 8px 20px 35 px rgba(0,0,0,5);
box-shadow: 8px 20px 35 px rgba(0,0,0,5);
box-shadow: 8px 20px 35 px rgba(0,0,0,5);
border-radius: 15px;
}

header {
background:rgb(255,0,0,0);
height:200px;
}

#contenido {
 background: url('../imagen/fondo.jpg') center;
 border-radius:15px;
 box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
transition: box-shadow 1s, background 1s;
-webkit-box-shadow: 1s, background 1s;
}

contenido:hover {
box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
background: rgba(255,255,255,0.5);
}

#logotipo {
font-size:38px;
float:left;
position: absolute;
margin:0px;
padding:0px;
}

#logo {
float:left;
width: 50%;
text-align: center;
height:100%;
vertical-align: middle;
position:absolute;
padding: 0px;
margin: 0px;
animation: late 15s;
transform:scale (1,1);
-webkit-transform: scale (1,1);
animation: late 15s;
-webkit-animation: late 15s;
-webkit-animation-iteration-count: 1;
transform:translate;
-webkit-transform: translate(300px,5px);

}

@-webkit-keyframes late {
0%{transform:scale (1,1);}
50% {transform:scale (1.2,1.2);}
100% {transform:scale(1,1);}
}

#tipo {
position: absolute;
padding: 0px;
margin: 0px;
font-size: 38px;
color: rgba(0,0,0,1);
text-shadow: 2px 2px 5px rgba(0,0,0,5);
transform:translate;
-webkit-transform: translate(300px,0px);
}

#login {
padding: 10px;
float: right;
width: 50%;
text-align: right;
vertical-align: middle;
}

input {
padding: 8px;
border-radius: 15px;
background: rgba(0,0,0,0.1);
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
transition: box-shadow 1s, background 1s;
-webkit-transition: -webkit-box-shadow 1s, background 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);
background: rgba(255,0,0,0.1);
}

#registrate {
font-size: 20px;
margin: 10px;
margin-right: 10%;
margin-top: 6.5%;
color: black;
text-shadow: 0px 0px 5px rgb(0,0,255);
animation: registrate 2s;
-webkit-animation: registrate 2s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes registrate {
0%{text-shadow: 0px 0px 5px rgba(255,0,0,0);}
50%{text-shadow: 0px 0px 5px rgba(255,0,0,1);}
100%{text-shadow: 0px 0px 5px rgba(255,0,0,0);}
}

a{
text-decoration: none;
color: #000000;
}

#presentacion {
text-align: left;
width: 100%;
height: 0px;
background: #DCDCDC;
background: url('../imagen/banner.jpg') center;
background-size: 800px 400px;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset inset 0px 0px 5px rgba(0,0,0,0.5);
-webkit-animation: esconde 15s;
}

@-webkit-keyframes esconde {
0%{height: 200px;background-size: 800px 400px;}
50%{height:200px;}
100%{height:0px;background-size: 1600px 800px;}
}

h2{
position: absolute;
margin-top: 4%;
margin-left: 16%;
text-align: center;
font-family: "Dancing", Helvetica, Arial, sans-serif;
font-size:50px;
}

#animacion1 {
width: 100%;
position: absolute;
color:rgba(255,255,255,0);
text-shadow: 3px 3px 5px rgba(0,0,0,0);
font-size:50px;
transform: translate (150px, 0px);
-webkit-transform: translate (150px, 0px);
animation: texto 8s;
-webkit-animation: texto 9s;
}

@-webkit-keyframes texto {
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,3);}
50%{color:rgba(255,255,255,1);transform: translate (0px; 0px); text-shadow: 3px 3px 5px rgba(0,0,0,3);}
75%{color:rgba(255,255,255,1);transform: translate (0px; 0px); text-shadow: 3px 3px 5px rgba(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 {
color: white;
width: 100%;
border: 1px solid white;
border-radius:15px;
padding:7px;
}

th {
color: white;
text-align: center;
width: 100%;
border: 1px solid white;
border-radius: 15px;
padding: 7px;
font-size:20px;
}

th:hover {
box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
background: rgba(255,255,255,0.5);
}

td {
padding:7px;
border-radius: 15px;
text-align: center;
font-size: 20px;
box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
transition: box-shadow 1s, background 1s;
-webkit-box-shadow: 1s, background 1s;
}

td:hover {
box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.9);
background: rgba(255,255,255,0.5);
}


@font-face {
font-family: Dancing;
src: url('../fuente/Dancing.ttf');
}

footer{
text-align: center;
}