@font-face{
	font-family: Cabecera;
	src: url(cabecera.ttf) format('truetype');
	}
	
@font-face{
	font-family: Play;
	src: url(Playstation.ttf) format('truetype');
	}
	
@font-face{
	font-family: Cocacola;
	src: url(CocaCola.ttf) format('truetype');
	}
	
@font-face{
	font-family: Cuerpo;
	src: url(cuerpo.ttf) format('truetype');
	}

body{
	font-family: Cuerpo;
	margin:auto;
	padding:0px;
	}

#contenedor{
	margin: auto;
	width: 80%;
	border: 1px solid black;
	box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 20px 35px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 20px 35px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 20px 35px rgba(0,0,0,0.5);
	border-radius: 15px;
	}

header{
	background: rgba(250, 150, 50, 0.7);
	height: 180px;
	}
	
#contenido{
	background: rgba(250, 150, 50, 0.7);
	}

#etiquetas{
	padding: 10px;
	}
	
footer{
	background: rgba(250, 150, 50, 1);
	text-align: center;
	}
	
#logo{
	float: left;
	width: 30%;
	text-align: center;
	height: 80%;
	vertical-align: middle;
	position: absolute;
	padding: 0px;
	margin: 5px;
	animation: late 5s;
	-webkit-transform: scale(1,1);
	-webkit-animation: late 5s;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes late{
	0%{-webkit-transform: scale(1,1);}
	45%{-webkit-transform: scale(1,1);}
	47%{-webkit-transform: scale(0.98,0.98);}
	50%{-webkit-transform: scale(1.02,1.02);}
	53%{-webkit-transform: scale(0.98,0.98);}
	55%{-webkit-transform: scale(1,1);}
	100%{-webkit-transform: scale(1,1);}
}

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

#tipo{
	position: absolute;
	padding: 0px;
	margin: 0px;
	font-size: 40px;
	color: rgba(83, 82, 82, 1);
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	font-family: Cabecera;
	transform: translate(150px, 0px);
	-webkit-transform: translate(180px, 0px);
	-moz-transform: translate(180px, 0px);
	-o-transform: translate(180px, 0px);
}

#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.3);
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:  0px 0px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	transition: box-shadow 1s, background 1s, border 1s;
	-webkit-transition: -webkit-box-shadow 1s, background 1s, border 1s;
	}

input:hover{
	box-shadow: 0px 0px 15px rgba(111, 116, 205, 0.5);
	-webkit-box-shadow: 0px 0px 15px rgba(111, 116, 205, 0.5));
	background: rgba(111, 116, 205, 0.5);
	border: 2px solid black;
}

a{
	text-decoration: none;
	color: rgba(0, 0, 0, 1)
}

#registrar{
	color: rgba(0, 0, 0, 1);
	font-size: 15px;
	text-shadow: 0px 0px 5px rgba(0, 0, 255, 1);
}

#registrar:hover{
	font-size: 20px;
	text-shadow: 0px 0px 5px rgba(255, 0, 0, 1);
}

#presentacion{
	padding: 0px;
	margin: 0px;
	text-align: left;
	width: 100%;
	height: 0px;
	background: rgba(0, 0, 0, 0.1);
	background: url('juego de tronos.jpg') center center;
	background-size: 500px 200px;
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.2);
	-webkit-animation: esconde 17s;
}

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

#animaciontexto1{
	position: absolute;
	color: rgba(255, 255, 255, 0);
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);
	font-size: 32px;
	-webkit-transform:translate(150px, 0px);
	-webkit-animation: muevetexto1 5s;
	-webkit-animation-delay: 2s;
}

@-webkit-keyframes muevetexto1{
	0%{color: rgba(255, 255, 255, 0);-webkit-transform:translate(-200px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);}
	25%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	50%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	75%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	100%{color: rgba(255, 255, 255, 0);-webkit-transform:translate(150px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);}
}

#animaciontexto2{
	position: absolute;
	color: rgba(255, 255, 255, 0);
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);
	font-size: 32px;
	-webkit-transform:translate(150px, 0px);
	-webkit-animation: muevetexto2 3.4s;
	-webkit-animation-delay: 7s;
}

@-webkit-keyframes muevetexto2{
	0%{color: rgba(255, 255, 255, 0);-webkit-transform:translate(-200px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);}
	25%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	50%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	75%{color: rgba(255, 255, 255, 1);-webkit-transform:translate(0px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
	100%{color: rgba(255, 255, 255, 0);-webkit-transform:translate(150px, 0px);text-shadow: 3px 3px 5px rgba(0, 0, 0, 0);}
}

table{
	width: 100%;
	border: 1px solid black;
	border-radius: 10px;
	background: rgba(250, 220, 50, 0.3);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	-webkit-transform: scale(1, 1);
	-webkit-transition: -webkit-transform 1s;
}

table:hover{
	-webkit-transform: scale(1.1, 1.1);
}

table th{
	text-align: center;
	width: 100%;
	border: 5px solid black;
	border-radius: 10px;
	background: rgba(250, 220, 50, 0.3);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

table td{
	border: 0px solid yellow;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)
}