/* Estilos generales */
@import url(http://fonts.googleapis.com/css?family=Luckiest+Guy);
@import url(http://fonts.googleapis.com/css?family=Abel);

*
{
	margin: 0;
	padding: 0;
}

html {
	background: rgba(29, 29, 138, 100);
}

body
{
	padding-top: 20px;
	text-align:center;
	background: no-repeat -webkit-linear-gradient(top, rgb(227, 76, 38) 0%, rgba(29, 29, 138, 100) 100%);
	background: no-repeat -moz-linear-gradient(top, rgb(227, 76, 38) 0%, rgba(29, 29, 138, 100) 100%);
	background: no-repeat -o-linear-gradient(top, rgb(227, 76, 38) 0%, rgba(29, 29, 138, 100) 100%);
	background: no-repeat linear-gradient(to bottom, rgb(227, 76, 38) 0%, rgba(29, 29, 138, 100) 100%);
}


/* estilos para el pie de página */
footer
{
	clear: both;
	font-size:0.7em;
	color:white;
	text-align: center;
	padding:15px 0px;
	border-top:6px black solid;

	background: -webkit-linear-gradient(bottom, #0170B9, #27AADE);
	background: -moz-linear-gradient(bottom, #0170B9, #27AADE);
	background: -o-linear-gradient(bottom, #0170B9, #27AADE);
	background: linear-gradient(to top, #0170B9, #27AADE);


}

/* animación del logo de la cabecera */
@-webkit-keyframes logoGirando {
	from {
		-webkit-transform: rotate(0);
	}
	50% {
		-webkit-transform: rotateY(180deg);
	}
	to {
		-webkit-transform: rotate(0);
	}
}
@-moz-keyframes logoGirando {
	from {
		-moz-transform: rotate(0);
	}
	50% {
		-moz-transform: rotateY(180deg);
	}
	to {
		-moz-transform: rotate(0);
	}
}
@-o-keyframes logoGirando {
	from {
		-o-transform: rotate(0);
	}
	50% {
		-o-transform: rotateY(180deg);
	}
	to {
		-o-transform: rotate(0);
	}
}

@keyframes logoGirando {
	from {
		transform: rotate(0);
	}
	50% {
		transform: rotateY(180deg);
	}
	to {
		transform: rotate(0);
	}
}

img {
	-webkit-animation: logoGirando 5s infinite;
	-moz-animation: logoGirando 5s infinite;
	-o-animation: logoGirando 5s infinite;
	animation: logoGirando 5s infinite;
}