*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}


body 
{
	background-image: url("../img/escuela1.PNG");
	background-position: left top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
  			
}

h1   {

	background: url("../img/fondoheader.png");
	background-size: 100% 100%;
}

input
{
	width: 14%;
	height: 4%;
}

button
{
	width: 7%;
	height: 6%;
}

h3 a{
	font-size: 80%;
	color: orangered;
}

#iniciar:hover{
	background: orangered;
}


@media only screen and (min-width: 481px) and (max-width: 768px) {

input
{
	width: 25%;
	height: 4%;
}

button 
{
	width: 14%;
	height: 7%;
}

body 
{
	background-size: 100% 100%;
  			
}
	

}


@media only screen and (min-width: 320px) and (max-width: 480px) {

input
{
	width: auto;
	height: 4%;
}

button 
{
	width: auto;
	height: 5%;
}

h3 a{
	color: royalblue;
}

body 
{
	background-size: 100% 100%;
  			
}


}


@media only screen and ( orientation: landscape) and (min-width: 769px) and (max-width: 900px)   {
 

body 
{

	background-position: center;
	background-size: 840px 840px;
}

input
{
	width: 25%;
	height: 4%;
}

button 
{
	width: 12%;
	height: 6%;
}

h3 a {
	color: blue;
}

body 
{
	background-size: 100% 100%;
  			
}


}


@media only screen and ( orientation: landscape) and (min-width: 900px) and (max-width: 1100px)   {

body 
{

	background-position: center;
	background-size: 880px 840px;
}

input
{
	width: 22%;
	height: 4%;
}

button 
{
	width: 10%;
	height: 6%;
}

body 
{
	background-size: 100% 100%;
  			
}