*{margin: 0;padding: 0;}

/*Estilo de todo el cuerpo de la página*/
body
{
	background-color: #e5e5e5;
}

.main /* Estilo del formulario*/
{
	margin-left: 25%;
	margin-top: 15%;
	position: relative;
}

.barra-azul /* Estilo de la barrita colo azul que esta a lado de usuario*/
{
	display: inline-block;

	width: 20px;
	height: 40px;
	background-color: #00a1e1;
	position: absolute;
	top:0;
}

input /*Estilo del input usuarios*/
{
	width: 25%;
	margin-left: 3%;
	margin-right: 5%;
	padding: 0.5%;
	border: 2px solid #fff;
	font-size: 20px;
}

button
{
	color: red;
	font-size: 20px;
	background: none;
	border: 0;
	margin-left: 60%;
}

label
{
	color: red;
	font-size: 20px;
}

button:hover{cursor: pointer;}


@media only screen and (max-width: 1300px) 
{
	.barra-azul 
	{
		width: 18px;
		height: 32px;
	}
	input, button, label {	font-size: 16px;}
	input{margin-left: 4%;}
}


@media only screen and (max-width: 700px) 
{
	.barra-azul
	{
		width: 16px;
		height: 26px;
		position: absolute;
	}

	input, button, label 
	{
		font-size: 16px;
		position: absolute;
	}
	input{width: 50%; margin-left: 8%;}
	#usuario{top: 60px;}
	#contrasena{top: 140px;}

	button{top: 180px;}

	#barra1{top: 60px;}
	#barra2{top: 140px;}
}