* {
    box-sizing: border-box;
}

body {
  margin: 0;
  font-family:sans-serif;
}

/* Style the header */
.header {
    background-color: #fff;
    padding: 20px;
    text-align: center;
}

header{
	width:100%;
	display: flex;/*lo agregue yo*/
	background:#1E73BE;
}

#btn-menu {
	display:none;
}

header label {
	display:none; /*es para que en pc de escritorios no aparesca*/
	width: 30px;
	height: 30px;
	padding: 10px;
	border-right: 1px solid #fff;
}

header label:hover {  /*Esto es para que aparesca la manito cuando se pase el mouse sobre el menu y cambie de color*/
	cursor: pointer;
	background: rgba(0,0,0,0.3);
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #1E73BE;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu ul {
	margin: 0;
	list-style: none; /*quitar todo los estilos*/
	padding: 0;
	display: flex; /*esto es para que aparesca uno al lado de otro*/
	/*justify-content: flex-end; */ /*esto sirve para poner el menu al lado derecho de la pantalla o center centrado*/
}

.menu li:hover {
	cursor: pointer;
	background: rgba(0,0,0,0.3);
}

.menu li a {
	display: block;
	padding: 15px 20px;
	color: #fff;
	text-decoration: none;
	font-style:normal;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	/*font-family: "Times New Roman", Times, serif;*/
}


/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
}

/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 50%;
	color:#666;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/**/
div .wrapper{
	margin: 20px auto;
	width:400px;
}

div.radiobutton{
	margin: 5px auto;
	width:330px;
}
div.button{
	margin: 5px auto;
	width:62px;
}
label{
	font-size: 0.8em; 
}
label span {
	display: inline-block;
	text-align: right;
	width: 130px;
}
p.txt-error{
	font-size: 0.8em; 
	color:#FF0000;
	width:210px;
	margin:10px auto;
}
fieldset{
	border: 1px solid #B7DDF2;
}


/**/

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:580px) {
	
	h2 {
		font-size:10px;
		text-align:center;
	}
	
	header label {
		display:block;
	}
	
	.menu {
		position:absolute;
		background:#1E73BE;
		width: 80%;
		margin-left: -100%;
		transition: all 0.5s;
		top:50px; /*lo agregue yo*/
	}
	
	.menu ul {
		flex-direction: column;
	}
	
	.menu li {
		border-top: 1px solid #fff;
	}
	
	#btn-menu:checked ~ .menu {
		margin: 0;
	}

	#boton {
		max-width:100%;
		text-align:center;
	}
}

/* Style the footer */
.footer {
    background-color: #1E73BE;
    padding: 10px;
    text-align: center;
}
.texto {
	color:#ffffff;
	text-align:center;
}