body{
	font-family:oswald, helvetica, arial, sans-serif;
	background-color: white;
	size: 20px;
}

h1 {
	font-family: "Microsoft Sans Serif";
	font-size: 2em;
}
.titulo{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 20em;
	font-size: 1.5em;
	color: white;
}
.titulo2 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 30em;
	font-size: 1.5em;
	color: white;
}
.titulo3 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 40em;
	font-size: 1.5em;
	color: white;
}
.titulo4 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 45em;
	font-size: 1.5em;
	color: white;
}
.titulopeli {
	text-align: center;
	width: 30em;
	font-size: 1.5em;
	color: black;
}
.tituloImg {
	margin-left: auto;
	margin-right: auto;
	text-align: 
	width: 40em;
	font-size: 2em;
	font-family: Tahoma;
}
.video {
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 32%
}
.cajaTexto{
	margin-top: .25em;
	font:Arial;
	font-size: 2em;
}
.cajaTexto {
	margin-top: .25em;
	font:Arial;
	font-size: 2em;
}
.cajaTextoCita {
	margin-top: .25em;
	font:Arial;
	font-size: 1.5em;
	font-style: italic;
}
.textoImagen {
	margin-top: .25em;
	font:Arial;
	font-size: 1em;
	font-weight: bold;
}
header{
	color: black;
	font-family: Arial;
	font-size: 10em;
	text-align: center;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
	-webkit-text-fill-color: white;
	-webkit-text-stroke: 2px black;
}
.imagen{
	float: left;
	margin: .5em;
	width: 400px;
}
.imagen2 {
	float: left;
	margin: .5em;
	width: 200px;
}
.imagen3 {
	float: right;
	margin: .5em;
	width: 400px;
}
.imagen4 {
	float: left;
	margin: .5em;
	width: 400px;
}
.imagenCuatro {
	float: left;
	margin: .5em;
	width: 10em;
}
.imagenCuatro:hover {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}
#cabeza{
	background-image: url("img/1.jpg");
	width: 100%;
	height: 200px;
	background-repeat: repeat-x;
	background-size: 20em;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    width: 100%;
}

li {
    float: left;
    width: 16.6666666667%;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.rojo {
    background-color: #ff6961;
}
.rojo:hover, .titulo{
	background-color: #E24733;
}
.naranja {
	background-color: #ffb347 ;
}
.naranja:hover, .titulo2 {
	background-color:  #F77736;
}
.amarillo {
	background-color: #fdfd96;
}
.amarillo:hover, .titulopeli{
	background-color: #FFFF33;
}
.verde {
	background-color: #89E894;
}
.verde:hover, .titulo4{
	background-color: #32CD32;
}
.azul {
	background-color: #aec5e0;
}
.azul:hover, .titulo3{
	background-color:#5284bd; 
}
.morado, th {
	background-color: #b19cd9;
}
.morado:hover, .titulo3 {
	background-color: #8565c4;
}
th {
	color: white;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	border: 1px solid black;	

}
table {
	margin: auto;
	border-spacing: 10px;
	width: 80%;
	border-collapse: collapse;
	border: .5;
}
td {
	text-align: center;
	border: 1px solid black;
	padding: 8px;
	text-decoration: none;
}
div#imagen {
	width: 540px;
	height: 300px;
	margin-left: 33.33333333333333%;
	margin-top: 5%;
	background-image: url(img/tracer.gif);
	color: #8565c4;
}
div#info {
	position: absolute;
	overflow: hidden;
	width: 540px;
	height: 300px;
	background-color: rgba(31, 31, 31, 0.9);	
	-webkit-transition: opacity 0.2s;
	opacity: 0;
	color: #8565c4;
}

div#imagen:hover div#info {
	opacity: 1;
	color: #8565c4;
}
p#letrasHover {
	position: absolute;
	margin-top: 135px;
	-webkit-transition: margin 0.2;
	color: white;
	font-size: 2em;
	margin-left: -70px;
	text-align: center;
	color: #8565c4;
}
div#imagen:hover p#letrasHover {
	margin-left: 10px;
	color:  #8565c4;
}
#footer {
  width:100%;
  padding:20px;
  padding-bottom:16px;
  background:black;
  color:white;
  font-weight:bold;
  font-size:18px;
  text-align:center;
  position:fixed;    /*Here's what sticks it*/
  bottom:0;          /*to the bottom of the body*/
  left:0;            /*and to the left of the body.*/
  opacity: .5;
  border-top:1px solid whitesmoke;
  background-image:url(img/r.gif);
}