html, body{
  height:100vw;
  margin:0;
  display: flex;
  flex-direction: column;
  background-color:#ffff00;
  align-items: center;
}
#todo {
	width:100vw;
	height:75vh;
	background-color:#ffff00;
	color:#009;
    font-size:1.0em;
	/*display:inline;*/
	/*border-style:groove;*/
}
#Divimagen {
  padding-top:7vh;
  background-color: #ffff00;
  margin: 1rem;
  /*padding: 1rem;
 /*border: 2px solid #2515a6;
  /* IMPORTANTE */
  text-align: center;
  border-radius: 40px;
}
#Divimagen img {
  width: 50%;
  height:auto;
  /*text-align: center;*/
}
#Divimagen li{
	font-size:4 vh;;
  width: 90%;
  height:auto;
  text-align: left;
  
}

#todo H1{ text-align: center;}
#todo H2{ text-align: center;}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
}

form { 
margin: 0 auto; 
width:55%;
}
#todo #Divimagen ul li {
	/*font-size: 16px;*/
	font-size:3.5 vw;;
}
.nav {
	position:relative;
	padding-top:5px;
	padding-left:5px;
}
.button {	
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 9px 35px;
    border: 1px solid #134709;
    border-radius: 10px;
    background: #238610;
    background: -webkit-gradient(linear, left top, left bottom, from(#238610), to(#147a14));
    background: -moz-linear-gradient(top, #238610, #147a14);
    background: linear-gradient(to bottom, #238610, #147a14);
    -webkit-box-shadow: #2aa113 0px 0px 40px 0px;
    -moz-box-shadow: #2aa113 0px 0px 40px 0px;
    box-shadow: #2aa113 0px 0px 40px 0px;
    text-shadow: #0b2a05 1px 3px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #16540a;
    background: #2aa113;
    background: -webkit-gradient(linear, left top, left bottom, from(#2aa113), to(#189218));
    background: -moz-linear-gradient(top, #2aa113, #189218);
    background: linear-gradient(to bottom, #2aa113, #189218);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #134709;
    background: -webkit-gradient(linear, left top, left bottom, from(#134709), to(#147a14));
    background: -moz-linear-gradient(top, #134709, #147a14);
    background: linear-gradient(to bottom, #134709, #147a14);
}
.button:before{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEyElEQVRIia2Va2xTZRjHf+fSrbRbYTh3010YY0Ecg8UoIETJ5APRDAYqfFliMqIJIpcgiSFZREOMH4xRol8MJCgYYzSBqENuMcIYlxmGLhtzA9Z1967b2q7t2p6257x+OGdQjSEu8UmenJw37/n/n///fc77KMwx6isoWFvI6ifmkyuniI1rxOaK8dC4tC//uBi7Ioy+MyJw6UOt8/PNV7/bntlYaMf+vxBc2F34vZgZFiI8JER4WIioV4jRy6Lv2JbeT2pZ98/98pwZhAAtaGUAZnxgy6F8yweVr7/73q8nXnE0pm9X567BgEQIdAMQJqHJjHPJBvXl3frRYPiwb895mgGUucI3rBDbyueHl0naFGS6QE+BHgM9DqkotgUlUnFWZEPbjd4vh2aIKtW5ZD1XREW3n4BZ3sNj06LkNqevc1mkqwXJfY7MhY+APQdSUUjFITlDdmGpMz9w1fjmlvaL8tlm9jUdbDi94/lHG1+rkVZvLJ5eoM2IaE8Av+nB32NtKetddparKmo8rpFy/4azsAhsDkjFTDUCpITv8WNnh76QTm7lcMPeXU04S028RIDkpJuhwUHP9NhQq7t/9OLxNtF6pg+PpTAXKFuaS+UbT7HjxSXUFpcX4Fi3E3TdKkmgjXexcc/pFWo0QRK/G2Tn/YJtOaWUL1xURo1RVpMKNtS9OsTw6Mi98KS35fadiYtHr9B6aZBb+8/z82CIQ++4vPsc2iBIDvPQdci021icS4l628c9ERxAyi4GYTxwRRZmE8uCjNxCyvMeq0A2KlbUTjdu3e412tu7Lqx7P/TSp9c5tHE56wsM/0rQTAJDgqk2ZAVZvTpMT8Q/QXZewCSQhNlbae1nPoRpkAx2yS9nTIUqzTdCsmteD7K2El0zwf3doA2AAmq3l2GfPxTK1vwuMB6AK2ngzKoxEKN38d0YJzxjdlzTC1Q9syZ/E8Y06EkI3QPNDzKkkhhqzCA4FdQGFwe6q8jKBRRThSxM/PtKdPQ+D972KKMaoa86+OhoA7X1dTnH5+dlOtD6IDaBeQAQ9cFIiEkVSPijuImPVWF4weEEuwMkG8hSWoPqiDxw1KgY4yLYtFp5u3yRrVJRk5C4a9prs0xLwEA/oevDeFSA8QjdqGxCFUAE9AikAFk2U5FAAtUFOTmw6klKEEkQCVNlpln4bMZuQ4ePlnAcnwrQ4eV3AUgq5u2kYlajGlZaa4qVkpVYf4ZhgRuQ6oTREVInOjgCGCrA5X7uxDRwuCwAmykTAWSlrSkWUfodLCwCDZLXwOeGZg9fn/2TFqztdI0x7AsTKivAhQ3ENPjbTVtzykBZDuSnkchpCjQQ/RBphUAcrvho2f8TB60STYKETnAihKfMRrUYg4luGBFEFZAjHuxON2QVQeZSkAsAO4gU6JMQvQPTg5AQ0Ozh1IEf2WsYeGcFzs6D1PQUbr2Lat8E9KfwHjjHTv8M8bfWsmtNEbX5fhxqG6jzQLE6mRREkhi3/PQcu8mR5k6+BUJpBj4YOCMxusaD1P8RpevN0+wYmOImYOw+RWuWnWV1VdSuKuHpXCcFGSpyWCPUO0HPD51c7vVyDfDxsOu+rppnP67npCODCv59lMqmObisdDDHiSgDGXP54L/EX5ztNQw3UOoSAAAAAElFTkSuQmCC") no-repeat left center transparent;
    background-size: 100% 100%;
}

/* encabezado*/
#main-header {
	position:fixed;
	background: #228410;
	color: white;
	height: 85px;
	width:100vw;
	padding:8px 4px;
	box-shadow: 0px 10px #888888;
	top:0;/*agregado*/
}	
	#main-header a {
		color: white;
	}
/*
 * Logo
 */
#logo-header {
	float: left;
	padding: 8px 0 0 12px;
	text-decoration: none;
}
	#logo-header:hover {
		color: #0b76a6;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.0em;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.8em;
		color: #999;
	}
#logo-header img {
	width: 80%;
}
 .sticky {
  position: fixed;
  top: 0;
  width: 100%
}
/*
 * Navegación
 */
nav {
	float: right;
}
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	    }
	
		nav ul li {
			display: inline-block;
			line-height: 70px;
	  	}
			
			nav ul li a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
		   	}
			
				nav ul li a:hover {
					background: #0b76a6;
		}
/*Pie de pagina*/
#main-footer {
	background: #228410;
	color: white;
	text-align: center;
	font-size:1.5em;;
	padding: 10px;
	bottom: 0px;
	margin-top: 2px;
	position:fixed;
	width:100%;
	left:0px;
}
	#main-footer p {
		margin: 0;
	}
	
	#main-footer a {
		color: white;
	}
	/* fin pie de pagina*/
	/* resolucion menor a 520 pix color de texto amarillo*/
 
	@media (max-width:520px)
	{
	#main-header a {
		color: yellow;
		 
				}
	.navi {
		margin-top:70px;
		margin-left:auto;
		margin-right:auto;
		}
	}
		#Divimagen {
          padding-top:4vh;
		}
	
	@media (min-width:761px)
	{
	.navi {
	display:none;
	
		}
	}
html, body{
  height:100vh;
  margin:0;
  display: flex;
  flex-direction: column;*/
  background-color:#faf771;
  font-family: Verdana, Geneva, sans-serif;
}
#todo {
	width:100vw;
	height:100vh;
	background-color:#ffff00;
	color:#009;
    font-size:1.0em;
	font-family: Verdana, Geneva, sans-serif;
	/*display:inline-block;*/
	border-style:groove;
    font-family: Verdana, Geneva, sans-serif;
	text-align:center;
	padding-top:0px;
}
form {
	width:100%;
	height:auto;
}
img {
	width:100%;
	height:auto;
}
.div-imagen {
	
  display:inline-block;
  position:relative;
  margin-top:150px;
}
@media (max-width:360px) {

.div-imagen  {
	max-width:95%;
	margin-top:8%;
    display:inline-block;
    margin:auto;
    padding-top:120px;
}
#main-header a {
		color: blue;
	}
}
/* 2 columnas para tablets */
@media (max-width: 420px) {
#todo {
display:inline-block;	
text-align:center;
padding-top:160px;
margin-top: 30px;
}
.div-imagen  {
max-width: 95%;
display:inline-block;   
margin-top:40px;;
padding-top:120px;
}
#main-header a {
		color: blue;
	}
}
/* 4 columnas para grandes dispositivos*/
@media (max-width: 760px) {
	#todo {
display:inline-block;	
text-align:center;
padding-top:160px;
margin-top: 30px;
}
.div-imagen  {
max-width: 48%;
margin:auto;
padding-top:5%;
margin-left:5px;
bottom:100px;
}
.div-imagen img  {
display:none;
}

}
@media (min-width: 761px) {
#todo {
display:inline-block;	
text-align:center;
padding-top:160px;

}
.div-imagen  {
max-width: 48%;

display:inline-block;
margin:auto;
padding-top:5%;
margin-left:5px;
bottom:100px;
}
.div-imagen img {
max-width:100%;	
	
}
.nav {
	display:none;
}
}

input[type="submit"] {
	background:#228410;
	border:0;
	color:#2515A6;
	opacity:0.8;
	cursor:pointer;
	border-radius: 10px;
	margin-bottom:0px;
	font: normal normal bold 20px arial;
}
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 9px 35px;
    border: 1px solid #134709;
    border-radius: 10px;
    background: #238610;
    background: -webkit-gradient(linear, left top, left bottom, from(#238610), to(#147a14));
    background: -moz-linear-gradient(top, #238610, #147a14);
    background: linear-gradient(to bottom, #238610, #147a14);
    -webkit-box-shadow: #2aa113 0px 0px 40px 0px;
    -moz-box-shadow: #2aa113 0px 0px 40px 0px;
    box-shadow: #2aa113 0px 0px 40px 0px;
    text-shadow: #0b2a05 1px 3px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #16540a;
    background: #2aa113;
    background: -webkit-gradient(linear, left top, left bottom, from(#2aa113), to(#189218));
    background: -moz-linear-gradient(top, #2aa113, #189218);
    background: linear-gradient(to bottom, #2aa113, #189218);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #134709;
    background: -webkit-gradient(linear, left top, left bottom, from(#134709), to(#147a14));
    background: -moz-linear-gradient(top, #134709, #147a14);
    background: linear-gradient(to bottom, #134709, #147a14);
}
.button:before{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEyElEQVRIia2Va2xTZRjHf+fSrbRbYTh3010YY0Ecg8UoIETJ5APRDAYqfFliMqIJIpcgiSFZREOMH4xRol8MJCgYYzSBqENuMcIYlxmGLhtzA9Z1967b2q7t2p6257x+OGdQjSEu8UmenJw37/n/n///fc77KMwx6isoWFvI6ifmkyuniI1rxOaK8dC4tC//uBi7Ioy+MyJw6UOt8/PNV7/bntlYaMf+vxBc2F34vZgZFiI8JER4WIioV4jRy6Lv2JbeT2pZ98/98pwZhAAtaGUAZnxgy6F8yweVr7/73q8nXnE0pm9X567BgEQIdAMQJqHJjHPJBvXl3frRYPiwb895mgGUucI3rBDbyueHl0naFGS6QE+BHgM9DqkotgUlUnFWZEPbjd4vh2aIKtW5ZD1XREW3n4BZ3sNj06LkNqevc1mkqwXJfY7MhY+APQdSUUjFITlDdmGpMz9w1fjmlvaL8tlm9jUdbDi94/lHG1+rkVZvLJ5eoM2IaE8Av+nB32NtKetddparKmo8rpFy/4azsAhsDkjFTDUCpITv8WNnh76QTm7lcMPeXU04S028RIDkpJuhwUHP9NhQq7t/9OLxNtF6pg+PpTAXKFuaS+UbT7HjxSXUFpcX4Fi3E3TdKkmgjXexcc/pFWo0QRK/G2Tn/YJtOaWUL1xURo1RVpMKNtS9OsTw6Mi98KS35fadiYtHr9B6aZBb+8/z82CIQ++4vPsc2iBIDvPQdci021icS4l628c9ERxAyi4GYTxwRRZmE8uCjNxCyvMeq0A2KlbUTjdu3e412tu7Lqx7P/TSp9c5tHE56wsM/0rQTAJDgqk2ZAVZvTpMT8Q/QXZewCSQhNlbae1nPoRpkAx2yS9nTIUqzTdCsmteD7K2El0zwf3doA2AAmq3l2GfPxTK1vwuMB6AK2ngzKoxEKN38d0YJzxjdlzTC1Q9syZ/E8Y06EkI3QPNDzKkkhhqzCA4FdQGFwe6q8jKBRRThSxM/PtKdPQ+D972KKMaoa86+OhoA7X1dTnH5+dlOtD6IDaBeQAQ9cFIiEkVSPijuImPVWF4weEEuwMkG8hSWoPqiDxw1KgY4yLYtFp5u3yRrVJRk5C4a9prs0xLwEA/oevDeFSA8QjdqGxCFUAE9AikAFk2U5FAAtUFOTmw6klKEEkQCVNlpln4bMZuQ4ePlnAcnwrQ4eV3AUgq5u2kYlajGlZaa4qVkpVYf4ZhgRuQ6oTREVInOjgCGCrA5X7uxDRwuCwAmykTAWSlrSkWUfodLCwCDZLXwOeGZg9fn/2TFqztdI0x7AsTKivAhQ3ENPjbTVtzykBZDuSnkchpCjQQ/RBphUAcrvho2f8TB60STYKETnAihKfMRrUYg4luGBFEFZAjHuxON2QVQeZSkAsAO4gU6JMQvQPTg5AQ0Ozh1IEf2WsYeGcFzs6D1PQUbr2Lat8E9KfwHjjHTv8M8bfWsmtNEbX5fhxqG6jzQLE6mRREkhi3/PQcu8mR5k6+BUJpBj4YOCMxusaD1P8RpevN0+wYmOImYOw+RWuWnWV1VdSuKuHpXCcFGSpyWCPUO0HPD51c7vVyDfDxsOu+rppnP67npCODCv59lMqmObisdDDHiSgDGXP54L/EX5ztNQw3UOoSAAAAAElFTkSuQmCC") no-repeat left center transparent;
    background-size: 100% 100%;
}
h1 { text-align:center}
h2 { text-align:center}
#main-header {
	position:fixed;
	background: #228410;
	color: white;
	height: 85px;
	width:100vw;
	padding:8px 4px;
	box-shadow: 0px 10px #888888;
}	
	
#main-header a {
		color: white;
	}
 
/*  * Logo  */
     #logo-header {
	float: left;
	padding: 8px 0 0 12px;
	text-decoration: none;
     }
	#logo-header:hover {
		color: #0b76a6;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.0em;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.75em;
		color: #999;
	}
#logo-header img {
    width: 80%;
}
	
 .sticky {
  position: fixed;
  top: 0;
  width: 100%
}
/*
 * Navegación
 */
nav {
	float: right;
}
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	}
	
		nav ul li {
			display: inline-block;
			line-height: 70px;
		}
			
			nav ul li a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
			}
			
				nav ul li a:hover {
					background: #0b76a6;
				}
/*Pie de pagina*/
#main-footer {
	background: #228410;
	color: white;
	text-align: center;
	font-size:1.5em;;
	padding: 10px;
	bottom: 0px;
	margin-top: 2px;
	position:fixed;
	width:100%;
	left:0px;
}
	#main-footer p {
		margin: 0;
	}
	
	#main-footer a {
		color: white;
	}
	/* fin pie de pagina*/
.nav {
	position:relative;
	padding-top:5px;
	padding-left:5px;
	
	
}
	/* resolucion menor a 520 pix color de texto amarillo*/
    @media (max-width:520px)
	{
	#main-header a {
		color: yellow;
	}
	}