/* CSS Document */
*{margin:0; padding:0;}
html { box-sizing: border-box;} 
*, *:before, *:after { box-sizing: inherit;}


:root {--azul : Blue;
	   --azul1: MediumBlue; 
	   --azul2: MediumBlue; 
	   --azul3: SteelBlue;
	   --azul4: LightSteelBlue; 
	   --azul5: CornflowerBlue;
}

body{/*marge*/
	display: grid; 
	grid-template-areas:  
			"header header "  
			"aside  main"  
			"footer footer ";
	grid-template-columns: auto auto;
	grid-template-rows: 10vh 81vh 7vh;
	grid-gap: 1px;

	 margin-top:   5px;
	 margin-bottom:5px;
	 margin-left:  1%;
	 margin-right: 1%;
	 color:#000000; /*Color de la letra (negro)*/
     font-family: Arial, Helvetica, sans-serif;
	}

.header{ grid-area: header;}
.aside { grid-area: aside; }
.main  { grid-area: main;  }
.footer{ grid-area: footer;}

@media screen and (max-width: 1024px){ 
 body{grid-template-areas:  "header" "main" "footer";
      grid-template-columns: auto ;
      height: auto;
      grid-gap: 1px;}
	 .aside {display: none;}
	 .main{display: flex; justify-content: center; width: 100%;} /*centrar horizontal*/
	 .footer {display: flex; justify-content: center;} /*centrar horizontal*/
	}	

header{
background-color:var(--azul5); /*#8598F1; /*Azul*/
/*Relleno*/
padding-top:   5px;
padding-bottom:5px;
padding-left:  5px;
padding-right: 5px;
/*border*/
border-top:   2px solid #FF9900;
border-bottom:2px solid #FF9900;
border-left:  2px solid var(--azul5); /* #728CE7;*/
border-right: 2px solid var(--azul5); /*#728CE7;*/
/*margen*/
margin-top:   1px;
margin-bottom:5px;
margin-left:  1px;
margin-right: 1px;
 color: white;
 display: flex;  align-items: center; /*centrar vertical*/
}

nav {
  /*float: left;*/
  width: 100%;
  background: white; /*#ccc;*/
  padding: 0%;
  border:0px solid green;
  }

main{width: 100%!important;
 display: flex; justify-content: center; }  
/* Create two columns/boxes that floats next to each other */
 article {
 float: left;
 width: 100%;
 padding: 10px;
 background: white; /*#f1f1f1;*/
 border:0px solid green;
 text-align: center; 
 justify-content: center;

 }
 
 /* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  width: 100%;
  border-top:1px solid #FF6600;
  background-color:white; /*#777;*/
  
  color: black;
  z-index: 0;
  border:0px solid green;
  display: flex;  align-items: center; /*centrar vertical*/
  flex-direction: row-reverse;
  /*text-align: center;*/
}

footer div{float:right; 
height:auto;  
margin-right: 1%;
display:flex; align-items: center; /*centrar vertical*/
}


img {
width: 100%;
height: 100%;
z-index: -1;
}

input{
font-family:Roboto-Regular, sans-serif;
font-size:30px;
border:   1px solid gray;
border-style: solid;
text-align: inherit;}

input:focus{
background-color:var(--azul4);/*#8598F1; /*Azul*/
border-color:    #FF9900;
}
a { color:#000000 ;}
a:link, a:visited { text-decoration: none; }
a:hover { background: #FF9900; color:white; }

/*--input con imagen---*/
.input_tbl{
	position: relative;
	min-height: 1px;
	/*float: left;*/
	padding-right: 10px;
	padding-left : 10px}

.input_txt {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {.input_txt {transition: none}}
.input_txt:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
}

.input_txt.espacio {padding-left: 45px}
.input_img {
	margin-top: 8px ;
	height: 60%;
	color: #bbb;
	/*line-height: 24px;*/
	font-size: 15px;
	top: 10%;
	width: 30px;
	text-align: center;
	padding: .385rem .0rem;
}
.input_img.espacio {
	position: absolute;
	border-right: 1px solid #ccc;
	left: 5%;/*12px;*/
	
}

.Etiqueta{		
	font-size:xx-large;/*letra y tama�o*/
	font-family: Roboto-Regular, sans-serif, Verdana, Arial; 
	/*font-size: 10pt;*/
	text-decoration:none;
	}
.Color{color:#FF6600; 	/*Anaranjado*/}

input[type=button], input[type=submit], input[type=reset]{
	background-color: var(--azul5);
    color:white;
    /*border:1px solid var(--azul);*/
	width:150px;
	height:40px;	
}
form input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { 
	/*background-color: var(--azul); */
	border:1px solid var(--azul4); 
	cursor:  url("n3_img/cursor/arrowhead.svg"), pointer;
	/*cursor: url(puntero.svg), url(puntero.cur), pointer;*/
	}
 
	/*input:invalid {		border: 1px solid red;	  }*/
	/*input:invalid:required {background-image: linear-gradient(to right, pink, lightgreen);	  }*/
	/*input:valid {border: 2px solid black;  }*/