body{
    padding-top: 100px;
    
}
#f1{
	text-align: left;
	border: 10px;
	border-color: blue;	
	border: 1px solid #d0d0d0;
	padding: 5% 10% 5% 10%;
	border-radius: 10px;
}
#f1 h2{
	color: #4169E1;
	font-weight: bold;
}
#f1 label{
	font-weight: bold;
}
#contenedorf1{
     background-color: #FFFFFF;
	margin: 0 auto;
	text-align: center;
	width: 33%;
	font-family: "Times New Roman",Georgia,Serif;
	box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ),
        0px 4px 20px rgba( 0,0,0,10 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}
input[type=text],input[type=password]{
	width: 100%;
	height: 30px;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
font-family: Helvetica, Arial, sans-serif; 
}
input[type=submit]{
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
font-family: Helvetica, Arial, sans-serif; 
padding: 3%;
width: 100%;
font-weight: bold;
}

@media only screen and (min-width:700px) and (max-width:1200px) {
    
	#contenedorf1{width: 40%}
}
@media screen and (min-width:431px) and (max-width:699px) {

	#contenedorf1{width: 60%}
}
@media screen and (max-width: 430px) {

	#contenedorf1{width: 95%}
}
.titulo_sistema{
	height: 50px;
	background-color: #ccc;
	line-height: 50px;
	text-align: center;


}