@charset "utf-8";
/* CSS Document */
.colorblack{
	color:#333;
}
.imgdaptable { 
max-width: 100%;
}
A.navwhite, A.navwhite:VISITED, A.navwhite:ACTIVE, A.navwhite:FOCUS, A.navwhite:LINK{
	color:#fff;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
}
A.navblack, A.navblack:VISITED, A.navblack:ACTIVE, A.navblack:FOCUS, A.navblack:LINK{
	color:#333;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
}
/* CSS para web responsiva con dos columnas */
#webcont{
width: 1200px; 
margin: 0 auto; 
}

#contcolgen{
float: left;
width: 100%;
}

#contxtizq{
margin-right: 550px;
}

#conttxtder{
float: left;
width: 550px; 
margin-left: -550px; 
}

#piepagina{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#piepagina a{
color: #fff;
}

.textsep{
margin: 10px; 
margin-top: 0;
}


@media (max-width: 840px){ 
	#webcont{
	width: 100%;
	}
	
	#contcolgen{
	float: none;
	}
	
	#conttxtder{
	float: none;
	width: 100%;
	margin-left: 0;
	}
	
	#contxtizq{
	margin-right: 0;
	}
}
/* END CSS para web responsiva con dos columnas */


/* CSS Style para los menus e iconos*/
.bglogo {
  color: #fff;
  text-align: center;
}
.col {
  float: left;
  padding: 5px;
}
.col.config {
	width: 22%;
	background-color:#090;
	text-align: center;
	margin: 5px;
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.config:hover{
  text-shadow: 0 0 4px white;
}
.col.inventario {
	width: 22%;
	background-color: orange;
	text-align: center;
	margin: 5px;
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.inventario:hover{
  text-shadow: 0 0 4px white;

}
.col.clientes {
	width: 22%;
	background-color: purple;
	text-align: center;
	margin: 5px;
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.clientes:hover{
  text-shadow: 0 0 4px white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}
.col.proveedor {
	width: 22%;
	background-color: gray;
	text-align: center;
	margin: 5px;
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.proveedor:hover{
	background-color: transparent;
  text-shadow: 0 0 4px white;

}
.col.compra {
	width: 22%;
	background-color:#09F;
	text-align: center;
	margin: 5px;
	 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.compra:hover{
	background-color: transparent;
  text-shadow: 0 0 4px white;
 
}
.col.devol {
	width: 22%;
	background-color: black;
	text-align: center;
	margin: 5px;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.devol:hover{
  background-color: transparent;
  text-shadow: 0 0 4px white;

}
.col.credito {
	width: 22%;
	background-color: deeppink;
	text-align: center;
	margin: 5px;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.credito:hover{
  background-color: transparent;
  text-shadow: 0 0 4px white;

}
.col.ventas {
	width: 22%;
	background-color: dodgerblue;
	text-align: center;
	margin: 5px;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.ventas:hover{
  background-color: transparent;
  text-shadow: 0 0 4px white;

}
.col.logout {
	width: 22%;
	background-color: red;
	text-align: center;
	margin: 5px;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.col.logout:hover{
  background-color: transparent;
  text-shadow: 0 0 4px white;
}


/* Clear floats after the columns */
.contbtnmen:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
   .col.config, .col.clientes, .col.proveedor, .col.inventario, .col.compra, .col.devol, .col.credito, .col.ventas, .col.logout {
    width: 100%;
  }
}
/* END CSS Style para los menus e iconos*/