body{
	margin: 0;
	padding: 0;
	background: #444;
	font-family: Font;
	background-image: url(menu/bola.png);
	background-size: 100%;
	background-repeat: no-repeat;
	-webkit-animation-name: background;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:infinite;
	animation-name: background;
	animation-duration: 1s;
	animation-iteration-count:infinite;
}

@-webkit-keyframes background{
  0% {background-position: 0px 0px;}
  50% {background-position: 0px -25px;}
  100% {background-position: 0px 0px;}
}

@keyframes background {
  0% {background-position: 0px 0px;}
  50% {background-position: 0px -25px;}
  100% {background-position: 0px 0px;}
}


@font-face {
	font-family: Font;
	src: url(fonts/font.ttf);
}

h1{
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	font-family: Font;
	text-align: center;
}

#loading{
	position: absolute;
 	left: 50%;
 	top: 50%;
 	z-index: 5;
	margin: -75px 0 0 -75px;
	width: 150px;
	height: 150px;
	background-image:url(menu/paz.png);
	background-size: 100%;
}

.opacity{
  -webkit-animation-name: opacityanim;
  -webkit-animation-duration: 1s;
  animation-name: opacityanim;
  animation-duration: 1s
}

@-webkit-keyframes opacityanim {
  from {opacity:0 }
  to {opacity:1 }
}

@keyframes opacityanim {
  from{opacity:0 }
  to{opacity:1 }
}

#background-loading{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 4;
}
.opacityR{
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 1s;
  animation-name: opacity;
  animation-duration: 1s
}

@-webkit-keyframes opacity {
  to {opacity:0 }
  from {opacity:1 }
}

@keyframes opacity {
  to{opacity:0 }
  from{opacity: 1}
}
  

#menu{
	position: fixed;
	z-index: 2;
	right: 0;
	left: 0;
	top: -50px;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 425px;
}

#title{
	z-index: 3;
	margin: auto;
	margin-top:0px;
	width: 500px;
	height: 250px;
	background-image: url(menu/title.png);
	background-size: 100%;
	background-repeat: no-repeat;
/*	-webkit-animation-name: titleAnim;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count:infinite;
	animation-name: titleAnim;
	animation-duration: 0.5s;
	animation-iteration-count:infinite;*/
}

/*
@-webkit-keyframes titleAnim {
  0% {margin-top:0px;}
  50%{margin-top:10px;}
  100% {margin-top:0px;}
}

@keyframes titleAnim {
  0% {margin-top:0px;}
  50%{margin-top:10px;}
  100% {margin-top:0px;}
}*/

#play{
	z-index: 3;
	margin: auto;
	width: 150px;
	height: 50px;
	background-image: url(menu/play.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#play:hover{
	background-image: url(menu/play-hover.png);
	cursor: pointer;
}

#credits{
	z-index: 3;
	margin: auto;
	margin-top: 10px;
	width: 175px;
	height: 50px;
	background-image: url(menu/credits.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#credits:hover{
	background-image: url(menu/credits-hover.png);
	cursor: pointer;
}

#options{
	z-index: 3;
	margin: auto;
	margin-top: 10px;
	width: 175px;
	height: 50px;
	background-image: url(menu/options.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#options:hover{
	background-image: url(menu/options-hover.png);
	cursor: pointer;
}

#power{
	margin: 0 auto;
	width: 185px;
	height: 110px;
	background-image: url(menu/powerby.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#credits-menu{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 375px;
}

#credits-menu h1{
	text-shadow: 0px 0px 5px #000;
}

#opciones-menu{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 375px;
}

#opciones-menu h1{
	text-shadow: 0px 0px 5px #000;
}

#backc{
	display: none;
	margin: auto;
	margin-top: 10px;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(menu/back.png);
	background-size: 100%;
}

#musica{
	display: none;
	margin: auto;
	margin-top: 10px;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(menu/music.png);
	background-size: 100%;
}

#sonido{
	display: none;
	margin: auto;
	margin-top: 10px;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(menu/sound.png);
	background-size: 100%;
}

#gente{
	z-index: -3;
	margin: auto;
	width:1280px;
	height: 324px;
	background-image: url(menu/gente.png);
	background-size: 100%;
	background-repeat: repeat-x;
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	-webkit-animation-name: gente;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:infinite;
	animation-name: gente;
	animation-duration: 1s;
	animation-iteration-count:infinite;
}

@-webkit-keyframes gente {
  0% {background-position: 0px 0px;}
  50% {background-position: 0px 25px;}
  100% {background-position: 0px 0px;}
}

@keyframes gente {
  0% {background-position: 0px 0px;}
  50% {background-position: 0px 25px;}
  100% {background-position: 0px 0px;}
}


#todo{
	display: none;
}

#menu-total{
	display: block;
}

#game{
	display: none;
	position: absolute;
	right: 0;
	left: 0;
	top: 25px; 
	bottom:100px;
	margin: auto;
	width: 510px;
	height: 550px;
}


#foto{
	margin: 0 auto;
	z-index: 3;
	display: none;
	width: 500px;
	height: 300px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

#categoria{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	margin-top: 264px;
	width: 250px;
	height: 32px;
	border: solid 3px #fff; 
	background-image: url(menu/categoria/gameboy.png);
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,.5);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#question{
	display:inline-block;
	vertical-align:middle;
	line-height:normal;
}

#questionCont{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	z-index: 3;
	width: 500px;
	height: 75px;
	font-size: 25px;
}

#cont-button{
	position: absolute;
	top: 375px;
	width: 100%;
	height: 135px;
	-webkit-animation: giro-b 0.5s;
	-moz-animation: giro-b 0.5s;
	animation: giro-b 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.button{
	position: absolute;
	width: 100%;
	height: 35px;
	background: #808080;
	cursor: pointer;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

#tiempo{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 9;
	line-height: 75px;
	color: #fff;
	font-size: 35px;
	width: 100%	;
	height: 75px;
	background-color: rgba(0,0,0,.5);
	-webkit-animation: time-anim 0.5s;
	-moz-animation: time-anim 0.5s;
	animation: time-anim 0.5s;
	bottom: 0;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-top-right-radius: 25px;
	-moz-border-top-left-radius: 25px;
	-moz-border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}


@-webkit-keyframes time-anim {
	0% { bottom: -100px;}
	100%{ 	bottom: 0px;}
}

@keyframes time-anim {
	0% { bottom: -100px;}
	100%{ 	bottom: 0px;}
}

@-moz-keyframes time-anim {
	0% { bottom: -100px;}
	100%{ 	bottom: 0px;}
}

#puntos{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top: 50px;
	bottom: 0;
	margin: auto;
	z-index: 9;
	font-size: 35px;
	color:#fff;
	-webkit-animation: ok-anim 0.5s;
	-moz-animation: ok-anim 0.5s;
	animation: ok-anim 0.5s;
}

#ok{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top: -50px;
	bottom: 0;
	margin: auto;
	z-index: 8;
	width: 300px;
	height: 300px;
	-webkit-animation: ok-anim 0.5s;
	-moz-animation: ok-anim 0.5s;
	animation: ok-anim 0.5s;
}

#premio{
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top: -50px;
	bottom: 0;
	margin: auto;
	z-index: 8;
	width: 350px;
	height: 350px;
	background-image: url(menu/end.png); 
	background-size: 100%;
	-webkit-animation: ok-anim 0.5s;
	-moz-animation: ok-anim 0.5s;
	animation: ok-anim 0.5s;
}

#reset{
	display: none;
	position: fixed;
	right: -100px;
	left: 0;
	top: 350px;
	bottom: 0;
	margin: auto;
	z-index: 9;
	width: 75px;
	height: 75px;
	cursor: pointer;
	background-image: url(menu/reset.png);
	-webkit-animation: ok-anim 0.5s;
	-moz-animation: ok-anim 0.5s;
	animation: ok-anim 0.5s;	
}

#back{
	display: none;
	position: fixed;
	right: 0;
	left: -100px;
	top: 350px;
	bottom: 0;
	margin: auto;
	z-index: 9;
	width: 75px;
	height: 75px;
	cursor: pointer;
	background-image: url(menu/back.png);
	-webkit-animation: ok-anim 0.5s;
	-moz-animation: ok-anim 0.5s;
	animation: ok-anim 0.5s;	
}

@-webkit-keyframes ok-anim {
	0% { -webkit-transform: scale(0.0,0.0);}
	100%{ -webkit-transform: scale(1.0,1.0);}
}

@keyframes ok-anim {
	0% { transform: scale(0.0,0.0);}
	100%{ transform: scale(1.0,1.0);}
}

@-moz-keyframes ok-anim {
	0% { -moz-transform: scale(0.0,0.0);}
	1050%{ -moz-transform: scale(1.0,1.0);}
}

#fondo{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 7;
	background-color:rgba(0,0,0,.75);
}

@media only screen and (max-width: 1024px){
	#game{
	width: 100%;
	height: 480px;
	margin-top: 25px; 
	margin-bottom:100px;
	}
	#title{
	width: 350px;
	height: 175px;
	}
	#background-menu{
	width: 500px;
	height: 500px;
	}
	#cont-button{
	}
	#gente{
	margin: auto;
	width:640px;
	height: 162px;
	}
}

/*		BORDER RADIUS
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px; */