/* CSS Document */

/*INICIO CSS MENU*/
.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #0074FF; /*Add a green color to the "active/current" link */
  color: white;
}

/*FIN CSS MENU*/
	
	nav
		{
		/*Bordes redondeados*/
		-webkit-border-radius:10px;/*Para chrome y Safari*/
		-moz-border-radius:10px;/*Para Firefox*/
		-o-border-radius:10px;/*Para Opera*/
		border-radius:10px;/*El estandar por defecto*/
		background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
		/*Degradados*/
		background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/
		background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/
		background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
		overflow:hidden;
		padding:10px;
		width:950px;
		}
		
	nav ul
		{
		list-style:none;
		margin:0 10px 0 10px;
		padding:0;
		}
	nav ul li
		{
		/*Bordes redondeados*/
		-webkit-border-radius:5px;/*Chrome y Safari*/
		-moz-border-radius:5px;/*Firefox*/
		-o-border-radius:5px;/*Opera*/
		border-radius:5px;/*Estandar por defecto*/
		float:left;
		font-family:Arial, Helvetica, sans-serif;
		font-size:16px;
		font-weight:bold;
		margin-right:10px;
		text-align:center;
		/*Sombras para texto, los mismos parametros que box-shadow*/
		text-shadow: 0px 1px 0px #FFF;
		}
	nav ul li:hover
		{
		/*Degradado de fondo*/
		background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
		background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
		background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
		background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
		/*Sombras*/
		-webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
		-moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
		-o-box-shadow:  1px -1px 0px #999;/*Opera*/
		box-shadow:  1px -1px 0px #999;/*Estandar por defecto*/
		border:1px solid #E3E3E3;
		}
	nav ul li a
		{
		color:#999;
		display:block;
		padding:10px;
		text-decoration:none;
		/*Transiciones*/
		-webkit-transition: 0.4s linear all;
		-moz-transition: 0.4s linear all;
		-o-transition: 0.4s linear all;
		transition: 0.4s linear all;
		}
	nav ul li a:hover 
		{
   		color:#000;
		}





/* modal carga */

myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(171,161,162,0.6); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
}