@charset "utf-8";

@import "fuentes/roboto_regular_macroman/stylesheet.css";
@import "fuentes/roboto_bold_macroman/stylesheet.css";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline:0px;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style-type:none;
	list-style-position:outside;
	margin: 0px;
	padding: 0px;
}

a   {
    text-decoration:none;
	color:#4444ff;
}

a:hover {
	color:#0000ff;
}

img	{
	width:auto;
	max-width:100%;
}

html {
	height:100%;
}

body {
	line-height:1;
	cursor:default;
	background-color:#26406a;	
	height:100%;
}


/**************************************************************
Cabecera Página
**************************************************************/

.cabeceraPagina {
	position: fixed;
	height:163px;	
	top:0;
	left:0;
	z-index:99;
	width:100%;
	background-color:#26406a;	
}

.cabeceraPagina:after {
	content:"";
	display:block;
	clear:both;
}
	
.cabeceraPagina .logo {
	float:left;
	display:table;
	width:22.35%;
	padding-top:45px;
	padding-bottom:5px;
	padding-left:7.45%;
	padding-right:5.2%;
}

.cabeceraPagina .logo h1 {
	width:100%;
	max-width:300px;
	min-width:170px;
	height:142px;
	background-image:url("logo.png");
	background-size:100%;
	background-repeat:no-repeat;
	position: relative;
	cursor:pointer;
}

.cabeceraPagina .imagen-fondo {
	position: absolute;
	width:16%;
	min-width:270px;
	height:1024px;
	top:230px;
	left:5%;
	background-image:url("imagen-fondo.png");
	background-repeat:no-repeat;
	background-size:100%;
}

/* Menu Pagina */ 

.cabeceraPagina .menu {
	float:left;
	display:table;
	width:52.3%;
	padding-bottom:45px;
	margin-right:12.7%;
	border-bottom:2px solid #52658c;
}

.cabeceraPagina .menu ul {
	display:table-cell;
	width:100%;
	vertical-align:middle;
	padding-top:65px;
}

.cabeceraPagina .menu ul li {
	float:left;
	width:25%;
	padding-top:0px;
	padding-bottom:0px;
}

.cabeceraPagina .menu ul li.activo {
	background-image:url(fondo-menu.png);
	background-repeat:no-repeat;
	background-position:right;
}

.cabeceraPagina .menu ul li:hover {
	background-image:url(fondo-menu.png);
	background-repeat:no-repeat;
	background-position:right;
}

.cabeceraPagina .menu ul li div {
	text-align:center;
	line-height:30px;
	font-family:robotoregular;
	font-size:16px;
	color:#ffffff;
}

@media only screen and (max-width: 850px) {

	.cabeceraPagina .imagen-fondo {
		display:none;
	}
	
	.cabeceraPagina .logo {
		padding-top:20px;
	}

	.cabeceraPagina .logo h1 {
		height:100px;
	}
		
	.cabeceraPagina .menu {
		width:100%;
		padding-bottom:0px;
		margin-right:0%;
	}

	.cabeceraPagina .menu ul {
		display:table-cell;
		width:100%;
		vertical-align:middle;
		padding-top:0px;
	}

	.cabeceraPagina .menu ul li {
		float:left;
		width:25%;
		padding-top:0px;
		padding-bottom:0px;
	}
		
}

/* Seccion Pagina */

.seccionPagina {
	padding-top:163px;	
	min-height:calc(100% - 163px - 200px);
}


/**************************************************************
Cuerpo Pagina
**************************************************************/

.cuerpoPagina {
	padding:20px 17% 10px 36.5%;
	min-height:400px;
	font-family:robotoregular;
	font-size:15px;
	text-align:justify;
	color:#ffffff;
	line-height:22px;
}

.cuerpoPagina .cuerpo-titulo {
	height:75px;
	margin-bottom:20px;
	border-bottom:2px solid #52658c;
}

.cuerpoPagina .cuerpo-titulo.nosotros {
	background-image:url(titulo-nosotros.png);
	background-repeat:no-repeat;
}

.cuerpoPagina p {
	padding-bottom:20px;
}

.cuerpoPagina p b {
}

.cuerpoPagina img.izquierda {
	float:left;
	padding-right:30px;
}

.cuerpoPagina img.derecha {
	float:right;
	padding-left:30px;
}


.cuerpoPagina .cuadro {
}

.cuerpoPagina .cuadro:after {
	content:"";
	display:block;
	clear:both;
}

.cuerpoPagina .cuadro .cuadro-ext {
	width:calc(25% - 15px);
	height:150px;
	background-color:#52658C;
	font-family:robotoregular;
	font-size:16px;
	line-height:25px;
	color:#ffffff;	
	display: table;
	float:left;
	margin-left:15px;
	cursor:pointer;
}

.cuerpoPagina .cuadro .cuadro-int {
	text-align:center;
	display: table-cell;
	vertical-align: middle;
	background-repeat:no-repeat;
	background-position-x:center;
	padding-top:110px;
	padding-bottom:10px;
	line-height:20px;
}

.cuerpoPagina .cuadro #descargar {
	background-image:url(clientes-descargar.jpg);
}

.cuerpoPagina .cuadro #productos {
	background-image:url(clientes-productos.jpg);
}

.cuerpoPagina .cuadro #actualizar {
	background-image:url(clientes-actualizar.jpg);
}

.cuerpoPagina .cuadro #salir {
	background-image:url(clientes-salir.jpg);
}

.cuerpoPagina .cuadro a {
	color:#ffffff;	
}

@media only screen and (max-width: 850px) {

	.cuerpoPagina {
		padding:20px 5% 10px 5%;
	}
	
	.cuerpoPagina .cuadro {
		margin-left:-15px;
		margin-top:-15px;		
	}
	
	.cuerpoPagina .cuadro .cuadro-ext {
		margin-left:15px;
		margin-top:15px;
		width:calc(50% - 15px);
	}
			
}

/**************************************************************
Pie
**************************************************************/

.piePagina {
	width:73%;
	min-height:170px;
	background-color:#231f20;
	padding-top:30px;
	padding-left:27%;
}

.piePagina:after {
	content:"";
	display:block;
	clear:both;
}

.piePagina ul {
}

.piePagina ul:after {
	content:"";
	display:block;
	clear:both;
}

.piePagina ul li {
	float:left;
	padding-left:55px;
	padding-right:15px;
}

.piePagina ul li a {
	font-family:robotoregular;
	font-size:14px;
	line-height:18px;
	color:#ffffff;
}

.piePagina ul li a div {
	height:106px;
	background-repeat:no-repeat;
	padding-top:34px;
}

.piePagina .pie-productos a div {
	background-image:url(pie-productos.png);
	padding-left:126px;
}

.piePagina .pie-ingreso a div {
	background-image:url(pie-ingreso.png);
	padding-left:114px;
}

.piePagina .pie-contacto a div {
	background-image:url(pie-contacto.png);
	padding-left:94px;
}

@media only screen and (max-width: 850px) {

	.piePagina {
		width:80%;
		padding-left:10%;
		padding-right:10%;
	}
	
	.piePagina ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.piePagina ul li {
		padding-left:0px;
		padding-right:0px;
	}

}


/**************************************************************
 Link Contacto suelto
 *************************************************************/

 .pieContacto {
}

.pieContacto:after {
	content:"";
	display:block;
	clear:both;
}

.pieContacto ul {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pieContacto ul li {
}

.pieContacto ul li a {
	font-family:robotoregular;
	font-size:14px;
	line-height:18px;
	color:#ffffff;
}

.pieContacto ul li a div {
	height:106px;
	background-repeat:no-repeat;
	padding-top:34px;
}

.pieContacto .pie-contacto a div {
	background-image:url(pie-contacto2.png);
	padding-left:94px;
}


/**************************************************************
Formulario
**************************************************************/

.formulario:after {
	content:"";
	display:block;
	clear:both;
}

.formulario ul li {
	float:left;
	padding-top:8px;
	width:100%;
	font-family:robotoregular;
	font-size:13px;
	color:#eeeeee;
}

.formulario ul li.medio {
	width:50%;
}

.formulario ul li.medioL {
	width:60%;
}

.formulario ul li.medioC {
	width:40%;
}

.formulario ul li.medio.abajo {
	padding-right:50%;
}

.formulario ul li.medioL.abajo {
	padding-right:60%;
}

.formulario ul li.medioC.abajo {
	padding-right:40%;
}

.formulario li.derecha {
	text-align:right;
}

.formulario ul li.dobleAlto {
	height:45px;
}

.formulario li.mobile {
	display:none;
}

.formulario ul li label {
	float:left;
	width:110px;
	font-family:robotoregular;
	font-size:12px;
	padding-left:10px;
	line-height:35px;	
	padding-right:40px;
	color:#233f69;
	background-image:url(fondo-etiqueta.png);
	background-repeat:no-repeat;
	background-position:top right;
}

.formulario ul li label.largo {
	width:calc(100% - 50px);
	background-position:top left -40px;
	background-image:url(fondo-etiqueta_larga.png);
}

.formulario ul li.dobleAlto label {
	line-height:45px;	
}

.formulario li input {
	float:left;
	width:calc(100% - 160px);
	height:35px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	padding:2px 5px 2px 5px;
	font-family:robotoregular;
	font-size:14px;
	line-height:35px;	
	color:#233f69;
}

.formulario li input:disabled {
	background-color:#ffffff;
	color:#666666;
}

.formulario li input[type=file] {
	background-color:#ffffff;
	font-family:robotoregular;
	font-size:14px;
	line-height:20px;
	padding-top:4px;	
}

.formulario li.dobleAlto input {
	height:45px;
}

.formulario li textarea {
	float:left;
	width:100%;
	height:120px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	padding:5px 5px 5px 5px;
	font-family:robotoregular;
	font-size:14px;
	line-height:24px;	
	color:#233f69;
}


.formulario li select {
	width:calc(100% - 160px);
	height:35px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	padding:2px 5px 2px 5px;
	font-family:robotoregular;
	font-size:14px;
	color:#233f69;
    background-image:url("campos-flecha.png?2");
	background-repeat:no-repeat;
	background-position-x:calc(100% - 10px);
	background-position-y:center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.formulario li button {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	font-family:robotoregular;
	font-size:14px;
	line-height:18px;
	padding-top:6px;
	padding-bottom:6px;
	text-transform:uppercase;
	background-color:transparent;
	background-image:url(fondo-boton.png);
	background-repeat:no-repeat;
	background-position:top right;
	text-align:left;
	padding-left:20px;
	padding-right:35px;
	color:#ffffff;
	cursor:pointer;
}

.formulario li button.derecho {
	background-image:url(fondo-boton-derecho.png);
	background-position:top left;
	text-align:right;
	padding-right:20px;
	padding-left:35px;
}

.formulario li button:focus {
	background-image:url(fondo-boton_focus.png);	
}

.formulario li button.derecho:focus {
	background-image:url(fondo-boton-derecho_focus.png);
}

.formulario li input:focus,
.formulario li textarea:focus,
.formulario li select:focus,
.formulario li button:focus {
	outline:0px;
}

.formulario .mensaje {
	display:none;
	margin-right:10px;
	margin-left:10px;
	padding:10px;
	font-family:robotoregular;
	font-size:14px;
	background-color:rgba(220,220,220,0.8);
	color:#ffffff;
}

.formulario .mensaje.ok {
	background-color:rgba(0,220,0,0.8);
}

.formulario .mensaje.error {
	background-color:rgba(220,0,0,0.8);
}

@media only screen and (max-width: 850px) {

	.formulario ul li.medio,
	.formulario ul li.medioC,
	.formulario ul li.medioL {
		width:100%;
	}

	.formulario li.desktop {
		display:none;
	}
	
	.formulario li.mobile {
		display:inline;
	}

		
}


/**************************************************************
Lista Piezas
**************************************************************/

.listaPiezas ul {
	padding-top:20px;
	padding-bottom:60px;
}

.listaPiezas ul:after {
	content:"";
	display:block;
	clear:both;
}

.listaPiezas .pieza {
	padding-top:10px;
	cursor:pointer;
}

.listaPiezas .pieza:after {
	content:"";
	display:block;
	clear:both;
}

.listaPiezas .pieza-imagen img {
	float:left;
	width:110px;
	height:107px;
}

.listaPiezas .pieza-datos {
	float:left;
	width:calc(100% - 210px);
	margin-left:10px;
	background-image:url(fondo-pieza.png?3);
	background-repeat:no-repeat;
	background-position:bottom right;
	min-height:82px;
	line-height:20px;
	font-family:robotoregular;
	font-size:14px;
	padding-top:25px;
	padding-left:20px;
	padding-right:70px;
	color:#233f69;
}

.listaPiezas .pieza-datos b {
	font-family:robotobold;
}

.listaPiezas .pieza-datos span {
	font-family:robotobold;
	float:right;
}

@media only screen and (max-width: 850px) {

	.listaPiezas .pieza-imagen {
		width:100%;
		text-align:center;
		background-color:#ffffff;
	}

	.listaPiezas .pieza-imagen img {
		float:none;
		width:110px;
		height:107px;
	}

	.listaPiezas .pieza-datos {
		width:calc(100% - 60px);
		height:auto;
		padding-top:15px;
		padding-bottom:10px;
		margin-left:0px;
		padding-left:10px;
		padding-right:50px;
	}
	
}

/**************************************************************
Datos Piezas
**************************************************************/

.datosPieza ul {
	padding-bottom:60px;
	margin-left:-10px;
}

.datosPieza ul:after {
	content:"";
	display:block;
	clear:both;
}

.datosPieza ul li {
	float:left;
	width:calc(100% - 10px);
	padding-top:10px;
	margin-left:10px;
}

.datosPieza ul li.medio {
	width:calc(50% - 10px);
}

.datosPieza ul li:after {
	content:"";
	display:block;
	clear:both;
}

.datosPieza ul li label {
	float:left;
	width:60px;
	font-family:robotoregular;
	font-size:12px;
	padding-left:5px;
	line-height:30px;	
	padding-right:40px;
	color:#233f69;
	text-align:center;
	text-transform:uppercase;
	background-image:url(fondo-etiqueta.png);
	background-repeat:no-repeat;
	background-position:right;
}

.datosPieza ul li input {
	float:left;
	width:calc(100% - 105px);
	height:30px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	padding:2px 5px 2px 5px;
	font-family:robotoregular;
	font-size:14px;
	line-height:30px;	
	color:#000000;
}

.datosPieza ul li input:disabled {
	background-color:#ffffff;
	color:#233f69;
}

.datosPieza ul li .pieza-detalle {
	width:calc(100% - 10px);
	font-family:robotoregular;
	font-size:12px;
	padding-left:5px;
	line-height:30px;	
	padding-right:5px;
	color:#233f69;
	background-image:url(fondo-pieza.png);
	background-repeat:no-repeat;
	background-position:right top;
}

.datosPieza ul .pieza-imagen {
	float:left;
	width:400px;
}

.datosPieza ul .pieza-imagen img {
	width:100%;
}

.datosPieza ul .pieza-boton {
	float:left;
	width:calc(100% - 420px);
}

.datosPieza ul .pieza-boton button {
	width:100%;
	height:30px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border:0px;
	font-family:robotoregular;
	font-size:14px;
	text-align:center;
	text-transform:uppercase;
	background-color:transparent;
	background-image:url(fondo-boton2.png);
	background-repeat:no-repeat;
	background-position:right;
	padding-right:15px;
	color:#ffffff;
	cursor:pointer;
}

.datosPieza ul .pieza-boton button:focus {
	outline:0px;
}

@media only screen and (max-width: 850px) {
	
	.datosPieza ul li.medio {
		width:calc(100% - 10px);
	}

	.datosPieza ul .pieza-imagen {
		width:calc(100% - 10px);
	}
	
	.datosPieza ul .pieza-boton {
		width:calc(100% - 10px);
	}

}