@font-face {
	font-family:pixel;
	src: url(../fonts/pixel.ttf) format("TrueType"); 
}

body{
	font-size:24px;
	background-color:#cec67d;
	font-family:pixel;
}

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

#main > article{
	border:0px solid grey;
	border-radius:0px;
	background-image: url(../img/bgmario.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	flex-grow:3; 
	flex-shrink:1; 
	flex-basis:60%;
	order:2;
	-webkit-order:2;
	-o-order:2;
}

header{
	padding:4px;
	border:0px solid grey;
	border-radius:7px 7px 0px 0px;
	background: url(../img/castillo.png) no-repeat center center;
	background-size: 100% 100%;
	order:1;
	-webkit-order:1;
	-o-order:1;
	flex-basis:20%;
	flex-grow:1;
	flex-shrink:6;
	letter-spacing:10px;
	text-align:center;
	font-variant:small-caps;
	color:white;
}

footer{
	border:0px solid grey;
	border-radius:0px 0px 7px 7px;
	background-color:#b6c691;
	font-size:15px;
	text-align:center;
}
#main > nav{
	border:0px solid grey;
	border-radius:0px;
	color:white;
	border-right:4px solid black;
	order:1;
	-webkit-order:1;
	-o-order:1;
	flex-basis:20%;
	flex-grow:1;
	flex-shrink:6;
}

@media all and (max-width:640px){ 
	#main{
		flex-direction:column;
	}
	#main > article { 
		order:1;
	}
	
	#main > nav {
		order:0;
		min-height: 300px;
		background-image: url(../img/bgnavmario2.png);background-repeat:no-repeat;
		background-size: 100% 100%;
	}
	
	#main > footer{
		min-height:50px;
		max-height:50px;
	}
	
	#navi {
		position:absolute;
	}
	
	#input {
		float:right;
		margin-top:40%;
		margin-left:10%;
		max-width: 200px;
		position:relative;
		background-color:rgba(77, 153, 111, 0.51);
		padding-bottom:5px;
	}
	
	header{
	background: url(../img/castillo2.png) no-repeat center center;
	background-size: 100% 100%;
}
}


#navi {
	list-style-image: url(../img/flecha.png);
}

#navi li {
	float:left;
}

@keyframes move {
	0% { 
		background-position:0;
		transform: translate(0%, 40%);
		}
	
	100% { 
		background-position:-1680px; 
		transform: translate(0%, 40%);
		}	
}

.Mario1 {
	background-image: url(../img/animation2.png);
	height:57px;
	width:60px;
	animation:move 20s steps(28) infinite;
	margin:auto;
	float:right;
}

@keyframes translate {
	0% {
		transform: translate(-100%, 7%);
	}
	85% {
		transform: translate(-7%, 7%);
	}
	90% {
		transform: translate(-5%, -30%);
	}
	97% {
		transform: translate(-5%, -30%);
	}
	100% {
		transform: translate(-5%, 90%);
	}
}

.Mario2 {
	height:57px;
	width:100%;
	animation:translate 20s infinite;
}

@keyframes fall {
	0% {
		transform: translate(-5%, -510%);
	}
	85% {
		transform: translate(-5%, -510%);
	}
	90% {
		transform: translate(-5%, -160%);
	}
	100% {
		transform: translate(-5%, -160%);
	}
}

.roca1{
	background-image: url(../img/roca.png);
	height:56px;
	width:50px;
	margin:auto;
	float:right;
}

.roca2 {
	width:100%;
	animation:fall 20s infinite;
}

.animacion {
	width:100%;
	animation:ocultar infinite;
	transition-delay:10s;
}

@keyframes ocultar {
	0% {
		background-color:white;
		}
}

iframe {
	width:100%;
	height:100%;
	border:0px;
}

nav {
	background-image: url(../img/bgnavmario.png);background-repeat:no-repeat;
	background-size: 100% 100%;
}

nav:hover {
	color:white;
}

input {
	margin-left:5%;
    font-size:10px;
    font-family:Verdana,Helvetica;
    font-weight:bold;
    color:white;
    background:#638cb5;
    border:1px solid black;
    width:70%;
    height:19px;
}

a {
	color:blue;
	text-decoration:none;
}