@charset "utf-8";

/* Centrar la precarga */
#loader {
  position: absolute;
  left: 60%;
  top: 50%;
  z-index: 1;
  margin: -75px 0 0 -250px;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid black;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
  
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
/* Añadir Aninacion a al Body */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
#myDiv {
  display: none;
  text-align: center;
}

body {
	margin-left:8%;
	margin-right:8%;
	background-color: hsl(212, 100%, 15%);
	font: 24px Helvetica;
}

.Logo {
	height:auto;
	width:350px;
}
.contenedor {
	margin: 0 auto;
	overflow:hidden;
	
}

.navegacion {
	width: auto;
	margin: auto;
	margin-bottom: -20px ;
	margin-top: -20px ;
	background: lightblue ;
	border-radius: 7px ;
	flex-grow: 3;
	flex-shrink:1;
	flex-basis: 60%;
	text-align: center;
}

.Juego {
	max-height:200px;
	max-width:200px;
	filter:grayscale(100%);
	
}
.Juego:hover  {
	filter: brightness(100%) ;
    transition: 2s;
    
}
p{
text-align:center;
}
iframe{
width: 100%;
	height:100%;	
	
}
.navegacion ul{
	list-style: none;
}
.menu > li {
	position: relative;
	display: inline-block;
	
}
.menu > li > a {
	display: block;
	padding: 15px 20px;
	color: #353535;
	font-family: 'Open sans';
	text-decoration: none;	
}
.menu li a:hover {
	color: #CE7D35;
	transition: all .3s ;
}

.submenu {
position: absolute;
background: #333333;
width:130%;
visibility: hidden;
opacity: 0;
transition: opacity 1.5s;
}
.submenu li a{
	display: block;
	padding: 10px;
	color: #fff;
	font-family: 'Open sans';
	text-decoration: none;
}
.menu li:hover .submenu{
	visibility: visible;
	opacity: 1;
}
	

#main {
	min-height: 800px ;
	margin: 0px;
	padding: 0px;
	display: flex ;
	flex-direction: row ;
}

#main > article{
	margin:4px;
	padding:2px;
	background-color:white;
	flex-grow:3;
	flex-shrink:1; 
	flex-basis:60%;
	order:2;
	-webkit-order:2;
	-o-order:2;
	
}


#main > aside{
	margin:4px;
	padding:4px;
	background-color:white;
	order:3;
	-webkit-order:3;
	-o-order:3;
	flex-basis:20%;
	flex-grow:1;
	flex-shrink:6;
	border: 1px solid black;
	border-radius: 7px 
}

header, footer {
	margin:4px;
	padding:4px;
	min-height:80px;
	font-size:14px;
	background: White ;
	padding: 5px;
	border: 1px solid black;
	border-radius: 7px ;
	min-height: 100px ;
	display: flex ;
    justify-content: center;
	
}

@media all and (max-width: 840px) {
	#main {
		flex-flow: column ;
	}
	
	#main > article, #main>nav, #main>aside {
	order: 0 }
	#main>nav, aside, header, footer {
		min-height: 50px;
    height: auto;
	}
	iframe{
		height:100%;
	}
}