body{
	background: white;
}
header{
		max-width:120%;
		max-height: 15%;
		margin-left: 0%;
		margin-top: 0%;
		text-align: center;
		background: white;
		padding: 0.25em;
		z-index: 2000;
}

section#general{
background: white;
	width: 100%;
	height: auto;
}

.cabe{
	background: #9F9F9F;
	width: 100%;
	height: 8px;
	margin-top: 0%;
	padding: 0;
	z-index: 1;
	}

section#contenedorindex{
background: white;
width:  100%;
padding: 0;
text-align: center;	
border-style: solid 10% #9F9F9F; 
} 
section#contenedorindex2{
background: white;
min-height: 440px;
width:  100%;
padding: 0;
text-align: center;	
border-style: solid 10% #9F9F9F; 
} 

section#contenedor{
max-width: 100%;
padding: 0;
text-align: center;	
border-style: solid 10% #9F9F9F; 

}
section#contenedor2{
max-width: 100%;
padding: 0;
min-height: 640px;
text-align: center;	
border-style: solid 10% #9F9F9F; 
}

section#contenedor8{
max-width: 100%;
padding: 0;
height: auto;
text-align: center;	
border-style: solid 10% #9F9F9F; 
}

section#principal{
	border-radius: 0.5em;
	display: inline-block;
	text-align: center;
	width: 100%;
}


article  {
	border-radius: 0.5em;
	margin: auto;
	max-width: 100%; /*max pantalla*/
	height: 140px;
	padding: 0.25em;
	text-align: center;
}
footer{
/*background: #CDD7D6; */
background: white;
	text-align: center;
	max-width: 100%;
}

#col1{
float: inherit;
width: 600px;
}

#plan{
width: 1000;
height: 542;
margin-left: 1%;
margin-top: 16px;
margin: 0 auto;
}
#plan2{
width: 1200;
height: 440;
margin-left: -2px;
margin-top: 16px;
margin: 0 auto;
}

#plan3{
width: 1000;
height: 542;
margin-left: -5%;
margin-top: 16px;
margin: 0 auto;
}

#col2{
float: inherit;
width: 400px;
}

.boton
{
	font-weight: bold;
	/*Le damos un ancho deseado*/
	max-width: auto;

	/*Le indicamos que cuando el mouse esta sobre él, el cursor cambia a la manita*/
	cursor: pointer;
	/*Alineamos el texto*/
	text-align: center;
	/*Quitamos algunas decoraciones que puede que nos ponga el navegador*/
	/*Si la quitas no pasa nada */
	text-decoration: none;
	/*Asignamos la fuente, dividimos entre 100% para que no este mas grande del tamaño del boton*/
	font-size: : .875em;
	/*Agregamos un "relleno" al boton, para que este un poco mas anchito*/
	padding: .3125em .3125em .3125em;
	/*Agregamos una ligera decoración al texto*/
	text-shadow: 0 .0625em .0625em rgba(0,0,0,.5);
	/*Hacemos sus bordes redondeados*/
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	/*Cambiamos el color de la letra*/
	color: #d9eef7;
	/*Le agregamos un borde*/;
	/*Ahora le agregamos un fondo diferente al boton, en este caso un gradiente azul*/
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
/*Las clase cuando el mouse esta sobre él, y cuando da clic*/
.boton:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.boton:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

.clase1
{
	/*Agregamos cierto margen interior para que el texto este medianamente centrado*/
	padding:.3125em .625em;
	/*Agregamos un ancho al texto*/
	height:2.7%;
	width:38%;

	/*El color del texto*/

	/*El fondo que va a tener, quiero que sea blanco y degradado, recuerda la clase del boton*/
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
	/*Una sombra al texto para que se vea bien*/
	text-shadow: 0 1px 1px rgba(0,0,0,.5);
	/*Redondeamos un poco las esquinas para que le de mejor vista */
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	border-radius:.5em;

	
}

.formulario label
{
	/*La mandamos a la izquierda, esta posicion de "izquierda" depende del contenedor que lo tiene*/
	float:left;
	/*Le asignamos un ancho*/
	width:10%;
	/*Para centrar el texto*/
	line-height:2.3125em;
	/*Alineamos un texto a la derecha*/
	text-align:right;
	/*Agregamos un margen para centrar mejor*/
	margin-right:.9275em;
	/*Le decimos que va a ser en negritas*/
	font-weight:bold;
	/*Y que su texto va a ser poco negro*/
	/*Nota que la opacidad es 1.0, seria igual poner rgb*/
}
.formulario p
{
    width: 45%;
}

.graf{
width: 500px;
height: 300px;
margin-left: -12%;
}

.redes{
z-index: 50000;
margin-left: 85%;
margin-top: -9.5%;
}
.redes img{
	
	max-width: 30%;
	max-height: 30%;
}


/*
@media screen and (max-width: 1200px){

}
*/
#tabs {

overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 -.9375em 0 0;
}
#tabs a {
float: left;
position: relative;
padding: 0 2.5em;
height: 0;
line-height: 1.875em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-right: 1.875em solid transparent;
border-bottom: 1.875em solid #98979c;
border-bottom-color: blue;
opacity: .3;
filter: alpha(opacity=30);
}
#tabs a:hover,  #tabs a:focus {
border-bottom-color: #497F43;
opacity: 1;
filter: alpha(opacity=100);
}
#tabs a:focus {
outline: 0;
}
#tabs #current {
z-index: 3;
border-bottom-color:#497F43;
opacity: 1;
filter: alpha(opacity=100);
}
/* ----------- */
#content {
border: .125em solid black;	
background: #fff;
border-top: .125em solid #98979c;
padding: 2em;/*height: 220px;*/
}
#content h2,  #content h3,  #content p {
margin: 0 0 .9375em 0;
}
/* Demo page only */
#about {
color: #AEADB3;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a {
color: #AEADB3;
}

a{
	text-decoration: none;
}
.imgtable{
	max-width: 196px;
	max-height: 195px;
	background: #E2DED5;
}

.imgtable:hover {
	background: red;;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.imgtable:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* menu de imagenes */
#content-tabs{
max-width: 100%;
text-align: center;
display: inline-block;
min-width: 50%;
	
}

 #content-tabs #tab-1 ul li{
display:inline-block;
margin:0 auto;
position:relative;
min-width:12.0625em;
}
 #content-tabs #tab-1 ul li >*{
cursor:pointer;
}
 #content-tabs #tab-1 ul li div{
min-height:15.625em;
}
 #content-tabs #tab-1 ul li label{
background:#E2DED5;
bottom:0;
cursor:pointer;
display:block;
height:2.8125em;
padding-top:0.625em;
position:absolute;
text-align:center;
width:100%;
color:#484847;
font:1em 'Lucida Sans',sans-serif;
}
#content-tabs #tab-1 ul li:hover label{
background: rgb(13, 33, 71);
color:white;
}

#content-tabs #tab-1 ul li:hover .img{
/*
max-width: 100%;
background: -webkit-radial-gradient(#0f0, #06f);
   background: -moz-radial-gradient(#0f0, #06f);
   background: -o-linear-gradient(#0f0, #06f);
   background: linear-gradient(#0f0, #06f);
   border: 1px solid #333;
   */
   max-width: 100%;
background: -webkit-radial-gradient(#179270, white);
   background: -moz-radial-gradient(#179270, white);
   background: -o-linear-gradient(#179270, white);
   background: linear-gradient(#179270, white);
}
 #content-tabs #tab-1 ul li:hover .img2{
max-width: 100%;
background: -webkit-radial-gradient(#179270, white);
   background: -moz-radial-gradient(#179270, white);
   background: -o-linear-gradient(#179270, white);
   background: linear-gradient(#179270, white);
}
 #content-tabs #tab-1 ul li:hover .img3{
max-width: 100%;
background: -webkit-radial-gradient(#179270, white);
   background: -moz-radial-gradient(#179270, white);
   background: -o-linear-gradient(#179270, white);
   background: linear-gradient(#179270, white);
}
 #content-tabs #tab-1 ul li:hover .img4{
max-width: 100%;
background: -webkit-radial-gradient(#179270, white);
   background: -moz-radial-gradient(#179270, white);
   background: -o-linear-gradient(#179270, white);
   background: linear-gradient(#179270, white);
}
 #content-tabs #tab-1 ul li:hover .img5{
max-width: 100%;
background: -webkit-radial-gradient(#179270, white);
   background: -moz-radial-gradient(#179270, white);
   background: -o-linear-gradient(#179270, white);
   background: linear-gradient(#179270, white);
}

#nav-product{
padding: 0px;
max-height: 10%;
text-align: center;
max-width: 100%;
display: inline-block;
}

#np{
	max-width: 15%;
	max-height: 15%;
	text-align: center;
	margin-left: 41%;
}