@charset "utf-8";
/* CSS Document */
@media only screen and (max-width:1024px){
#contenedor{
	width:980px;
}
#menu li a{
	padding:0 37px;

}

#col-izq{
	margin-right:9px;
}
#col-centro{
	margin-right:9px;
}
/*nosotros */
#banner-soporte img{
width:100%;
}
#texto-soporte {
    padding-left: 50px;
}
/*clientes */
#banner-clientes img{
width:100%;
}

.clientes {
    margin: 2px;
}

/* contactenos */
#formulario-contact {
    width: 620px;
}
/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:768px){
	/*--- Maquetacion ---*/
	#contenedor{
		width:100%;
	}
	/*--- Cabecera ----*/
	#datos{
	float:none;
	width:100%;	
	}
	#datos p{
	text-align:center;	
	}
	#redes{
	float:none;
	width:100%;	
	}
	
	#redes ul{
	width:109px;
	height:30px;
	margin:0 auto;	
	}
	#inicio{
	float:none;
	width:100%;
	padding-top:10px;
	padding-bottom:10px;	
	}
	
	#inicio ul{
	width:30px;
	height:30px;
	margin:0 auto;	
	}
	
	.logo{
		float:none;
		margin:0px auto;
	}
	/*--- Menu ---*/
	#menu{
		/*height:auto;*/
		height:100%;
	}

	#menu li{
		width:100%;
		float:none;
	}
	
	#menu a{
	border-bottom:1px solid #FC0;
	text-align:center;	
	}
	/*--- Banner ---*/
	#banner{
		padding:1%;
		/*height:auto;*/
	}
	#banner img{
		width:100%;
		height:auto;
	}
	
	/*--- Coluimnas ---*/
	#col-izq{
		width:45%;
		float:none;
		margin-bottom:15px;
		margin:0 auto;
	}
	#col-izq img{
		width:100%;
		height:auto;
	}
	#col-centro{
		width:45%;
		float:none;
		margin:0 auto;
		margin-bottom:15px
	}
	#col-der{
		width:45%;
		float:none;
		margin:0 auto;
		margin-bottom:15px
	}
	#col-der img{
		width:100%;
		height:auto;
	}
	#sombra{
		display:none;
	}
/* nosotros*/
#banner-soporte{
height:auto;	
}

#banner-soporte img{
height:auto;	
}

#info-soporte{
margin:0 auto;
float:none;	
}

#texto-soporte{
float:none;
padding-left:0;
width:100%;
}

#mision{
width:100%;
float:none;	
}
#vision{
width:100%;
float:none;	
}

/*clientes*/
#banner-clientes{
height:auto;	
}

#banner-clientes img{
height:auto;
}
/*contacto*/
#info-contact{
float:none;
margin:0 auto;
}
#aligned{
padding-left:0;
}
#formulario-contact{
width:100%;	
}
/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/
@media only screen and (max-width:480px){
	body{
		margin:5px;
	}
	/*--- Cabecera ----*/
	#cabecera ul{
		display:none;
	}
	.logo{
		float:none;
		margin-right:0;
		margin:0 auto;
	}
	/*--- Coluimnas ---*/
	#col-izq{
		width:100%;
		height:auto;
		margin-right:0;
		margin-bottom:8px
	}
	#col-izq img{
		width:70%;
		height:auto;
		margin:0 auto;
		display:block;
	}
	#col-centro{
		width:100%;
		height:auto;
		margin-right:0%;
		margin-bottom:8px
	}
	
	#col-centro img{
		width:70%;
		height:auto;
		margin:0 auto;
		display:block;
	}
	
	#col-der{
		width:100%;
		height:auto;
		margin-bottom:8px
	}
	#col-der img{
		width:70%;
		height:auto;
		margin:0 auto;
		display:block;
	}
	#columnas a{
	width:100%;	
	}
	/*--- Pie pagina ----*/
	#piepagina{
		padding:5px;
	}
	#cajapie{
		width:100%;	
		float:none;
	}
	#cajapie p{
		padding-left:0;
		text-align:center;
	}
	#cajapie img{
		display:block;
		margin:0 auto;
	}
	#piepagina ul{
		float:none;
		margin:0 auto;
	}
	#piepagina span{
		display:none;
	}
	/*nosotros*/
	.proyecto{
	float:none;
	margin:0 auto;
	padding-top:10px;
	padding-bottom:8px;	
	}
	/*contacto */
	#formulario .txtinput{
	width:80%;	
	}
	#formulario textarea{
	width:80%;	
	}
	/*clientes*/
	.clientes{
	float:none;
	margin:0 auto;	
	}
	
	/*novedad*/
	.novedad{
	float:none;
	margin:0 auto;	
	}
}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	#banner{
		padding:2%;
		height:auto;
	}
	#col-izq img{
		width:90%;
		height:auto;
	}
	#col-der img{
		width:90%;
		height:auto;
	}
	.caja{
		width:100%;
	}
}
/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	.logo{
		width:90%;
		height:auto;
	}
	#col-izq img{
		width:100%;
		height:auto;
	}
	#col-der img{
		width:100%;
		height:auto;
	}
	#columnas h1{
		font-size:12px;
		line-height:17px;
	}
	#enlaces li a img{
		width:90%;
		height:auto;
	}
	
}

