@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/** CLASES DEFINICAS PARA ASP.NET */
.field-validation-error{
    color: #204f73 ;
    font-weight: bold;
}
.ref {
    display: block;
    margin:0 ;
    padding: 0;
}
html, body{
	margin:0;
	padding:0;
    font-family: 'Open Sans', sans-serif;
	font-size:14px
}

a{
	text-decoration:none;
	color:#333
}

.content{
	width:96%;
	padding:0 2%;
	max-width:1280px;
	margin:auto;
}

input, textarea{
	border: none;
	font-size:14px;
	font-family: 'Open Sans', sans-serif;
	padding:5px 10px;
	border: none;
	text-transform:uppercase;
	background:#f2f2f2
}
input{
	border: none;
	text-align:center;
}

    input.btnUpdate {
        width: 32px;
        height: 32px;
        padding: 5px;
        font-size: 20px;
    }

input.txtUnidades {
    width: 90px ;
    padding: 5px;
    height: 32px;
    border: 1px solid black;
    font-size: 20px;
    vertical-align:top;
}

.select {
  border: 1px solid #ccc;
  width:150px;
  overflow: hidden;
  background: #fff url("../images/arrowdown.gif") no-repeat 98% center;
  text-align:left;
  display:inline-block;
  vertical-align:bottom
}
.select select {
    padding: 5px 20px 5px 5px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	width:100%
}

header{
	padding-top:15px;
	margin-bottom:10px
}

h1{
	display:inline-block;
	vertical-align:middle;
	width:100%;
	max-width:163px;
	padding-right:10px;
	margin:0 5px 0 0;
	border-right:1px solid #555;
}
h1 img{
	width:100%;
	max-width:163px;
}

h2{
	font-size:16px;
	line-height:27px;
	color:#555;
	font-weight:normal;
	display:inline-block;
	vertical-align:middle;
	margin:0;
}
h2 strong{
	text-transform:uppercase;
	display:block;
}
h3{
	margin-top:0
}
h4{
	text-align:center
}

section article .titulo{
	margin:20px 0 25px 0;
	height:34px;
	text-align:center;
	border-bottom:1px solid #204f73;
	width:100%
}
section article .titulo h3{
	padding:8px 15px;
	font-weight:100;
	font-size:18px;
	background:#fff;
	width:auto;
	display:table;
	margin:auto;
	color:#555;
	text-transform:uppercase
}

section article.contenido_right{
	display:inline-block;
	vertical-align:top;
	width:76%;
	padding-left:1%
}
aside.sidebar_left{
	display:inline-block;
	width:22%;
	padding:0px;
	margin-top:20px;
	border:1px solid #f2f2f2
}

aside.sidebar_left div > ul{
	padding:0px;
	margin:0;
}
aside.sidebar_left ul{
	padding:0
}
aside.sidebar_left ul li{
	list-style:none;
	margin-top:0px;
	background:#fff;
	border-top:3px solid #fff
}

aside.sidebar_left ul li a{
	padding:5px 5%;
	font-weight:bold;
	font-size:16px;
	display:table;
	width:90%;
	background:#204f73;
	color:#fff;
}
aside.sidebar_left ul li a span.submenu-indicator{
	padding-right:10px
}

aside.sidebar_left ul li ul li{
	padding:0px;
	margin:0px;
	border-bottom:1px solid #999;
	border-top:0;
	background:#f2f2f2
}
aside.sidebar_left ul li ul li:last-child{
	border:none
}

aside.sidebar_left ul li ul li ul li{
	background:#fff
}

aside.sidebar_left ul li ul li a{
	font-weight:100;
	font-size:16px;
	background:none;
	color:#000
}
aside.sidebar_left ul li ul li ul li a{
	color:#555;
	font-size:14px;
}

.col2_left,
.col2_right{
	width:20%;
	display:inline-block;
	vertical-align:top
}
.col2_right{
	width:62%;
	text-align:right;
	color:#333;
}

div#login{
	width:100%;
	max-width:520px;
	font-size:14px;
	margin:5px auto 50px auto ;
    text-align: left;}
#login label{
	text-transform:uppercase;
	color:#555;
	padding-top:5px;
	display:block;
	text-align:left;
    height: 21px;
    width: 262px;
}
div#login input{
	display:inline-block;
	margin:5px 0;
	font-size:16px;
	padding: 2px 15px;
	text-align:left;
	text-transform:none
}
#login #btnLogin{
	margin-top:5px;
	width:auto
}
div#login p{
	border-top:1px solid #f2f2f2;
	padding-top:5px
}
.catalogo{
	text-align:center
}
.catalogo .col2_left,
.catalogo .col2_right{
	text-align:left;
	font-size:18px;
	margin:25px 1%;	
}
.catalogo .col2_left{
	width:35%;
}
.catalogo .col2_right{
	width:60%;
}
.catalogo .col2_right > i,
.catalogo .col2_right > strong{
	display:block;
	font-style:italic;
	font-weight:100;
	font-size:14px;
	color:#555
}
.catalogo .col2_right > strong{
	border-bottom:1px solid #f2f2f2;
	padding-bottom:15px
}

.catalogo .col2_left{
	text-align:left
}
.catalogo .col2_left img{
	border:1px solid #333;
	/*width:100%;
	  max-width:400px*/
}
.catalogo .col2_right h4{
	text-align:left;
	color:#204f73;
	margin:0
}
.catalogo .col2_right .info{
	margin:20px 0;
	border-bottom:1px solid #f2f2f2
}
.catalogo .col2_right .info form div{
	float:right
}
.catalogo .col2_right .info .precio,
.catalogo .col2_right .info .cantidad{
	display:inline-block;
	vertical-align:top;
	width:49%
}

.catalogo .descripcion{
	text-align:left;
	margin:0px auto 35px auto;
	padding-top:15px;
	width:97%;
	border-top:1px solid #f2f2f2
}
.catalogo .descripcion p{
	font-size:16px;
	line-height:24px;
	color:#555;
	margin:10px 0
}
.button{
	padding:10px 15px;
	background:#555;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	margin-top:20px;
	width:auto;
	display:table;
	cursor:pointer
}

/* Columnas catálogo productos */
.col4 {
    display: inline-block;
    vertical-align: top;
    margin: 1% 1%;
    width: 18%;
    border: 1px solid #101010;
    padding: 2%;
    min-height: 180px;
}

/* Columnas footer */
.col3{
	display:inline-block;
	vertical-align:top;
	margin:2% 1%;
	width:20%;
	margin:auto;
	text-align:left
}

.usuario{
	font-size:14px	
}
.usuario .button{
	padding:10px 15px;
	background:#555;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	width:auto;
	display:inline-block;
	cursor:pointer
}
.usuario .button.red{
	background:#204f73;
}
.red{
	background:#204f73;
	color:#fff;
    border: none;
    display: block;
    font-size: 16px;
    margin: 5px 0;
    padding: 8px 15px;
    text-align: left;
    text-transform: none;

	}
.button a{
	color:#fff
}
.usuario form label{
	font-style:italic;
	text-transform:none;
	padding-right:8px	
}

.menu_opciones ul{
	padding:0;
	margin-top:16px
}
.menu_opciones ul li{
	display:inline-block;
	border-right:1px solid #555;
	padding:0 16px 0 8px;
	line-height:11px
}
.menu_opciones ul li:last-child{
	border:none;
	padding-right:0
}

.menu_opciones ul li a,
.carrito a{
	text-decoration:none;	
	color:#333;
	text-transform:uppercase;
	font-size:16px
}
.menu_opciones ul li a i{
	font-size:14px;
	color:#999
}

#menu_usuario,
.carrito,
.usuario .form{
	display:inline-block
}
.carrito{
	float:right;
	padding-left:7px;
	margin-left:7px;
	margin-top:16px;
	border-left:1px solid #555;
	line-height:16px
}
.carrito > i{
	color:#204f73
}
.carrito > strong:before{
	content: "(";
}
.carrito > strong:after{
	content: ")";
}

.categorias{
	display:block;
	width:100%;
	padding:0;
	background:#204f73
}

.categorias ul.menu{
	margin:0;
	padding:5px 0;
	text-align:center;
}
.categorias ul.menu li{	
	width:9%;
	border-radius:15px;
	margin:5px;
	background:#fff;
	text-align:center;
	cursor:pointer
}
.categorias ul.menu li:hover,
.categorias ul.menu li:focus,
.categorias ul.menu li:active{
	-webkit-box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.2);
	box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.2);
}
.categorias ul.menu li a{
	font-weight:bold;
	/*text-transform:uppercase;*/
	color:#333;
	font-size:14px;
    padding:15px 1%;
}

.submenu_categoria{
	background:#204f73;
	text-align:center;
}
.submenu_categoria span{
	margin:0;
	color:#fff;
	line-height:30px
}
.submenu_categoria span,
.submenu_categoria select{
	display:inline-block;
}
.submenu_categoria select{
	padding:5px 10px 5px 4px;
	border-radius:15px;
	border: none;
}
.subcat_col{
	display:inline-block;
	padding:5px 5px 5px 0px;
	margin:10px 10px 10px 0px;
}


/*LISTA CATÁLOGO PRODUCTOS SUMAR/RESTAR UNDS Y CAJAS*/

.catalogo{
	text-align:center
}
.catalogo .col4 img{
	width:100%;
	max-width:480px
}

.info span{
	display:block;
	font-size:12px
}
.info strong{
	display:block;
	font-size:12px
}

.precio,uni_cajas,
.stock{
	display:inline-block;
	width:45%;
	text-align:left
}
.stock{
	text-align:right
}

.cantidad{
	margin:5px 0;
}

.cantidad, .form{
	width:100%;
	display:block
}

.button_un,
.button_caja {
  margin: 0 0 0 5px;
  cursor: pointer;
  height: 29px;
  text-align: center;
  line-height:40px
}
.form .unidades{
	float:left;
	width:45%
}
.form .cajas{
	float:right;
	width:45%;
	text-align:center
}
.cantidad input[type=text]{
	float:left;
	vertical-align:top;
	width:29%;
	height:80px;
	padding:0 10%;
}
.cantidad div.buttons{
	display:inline-block;
	width:43%
}
.inc,
.dec {
	display:inline-block;
	vertical-align:top;
	margin:0;
	width:100%;
	height:40px;
	color:#fff;
}
.inc{
	background:#204f73;
	/* content:"UN"; */
}
.dec {
	background:#333;
}
/*
.inc.button_un:after,
.dec.button_un:after{
	content:"UN";
}
.inc.button_caja:after,
.dec.button_caja:after{
	content:"CAJA";
} */

/* ESTILOS DE LOS MENÚS RESPONSIVES */
.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

.menu li a{
text-decoration:none;
display:block;
}

.menu ul {
display: none;
margin: 0;
padding: 0;
width: auto;
position: absolute;
top: 43px;
left: 0px;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
	top: 0px;
}

.mobile-menu{display:none;
width:94%;
padding:11px 3%;
background:#204f73;
color:#fff;
text-transform:uppercase;
font-weight:600;
text-align:left
}
.mobile-menu:hover{background:#204f73;
color:#fff;
text-decoration:none;
}

.paginacion{
	text-align:center;
	margin:15px 0
}
.paginacion .active a{
	color:#204f73;
}
.paginacion .anterior,
.paginacion .paginas span,
.paginacion .siguiente{
	min-width:35px;
	height:35px;
	border:1px solid #f2f2f2;
	margin:0 5px;
	font-size:14px;
	display:inline-block;
	line-height:35px
}

/* ESTILOS DEL CARRITO MENÚ*/
#carrito_productos{
	width:100%;
	max-width:390px;
	border:1px solid #333;
	border-radius:15px;
	overflow:hidden;
	position:absolute;
	right:0;
	margin-top:0px;
	margin-right:2%;
	z-index:999;
	background:#fff
}
#carrito_productos > div{
	max-height:380px;
	overflow:auto;
}
#carrito_productos table{
	margin:0;
	font-size:12px
}
#carrito_productos table:last-child{
	max-height:20px;
	height:10px;
}
#carrito_productos table img{
	max-width:80px;
	min-width:80px
}
#carrito_productos table tr td p{
	display:block;
	width:100%;
	font-weight:100;
	margin:0 0 5px 0
}
#carrito_productos table tr td:last-child span,
#carrito_productos table tr td:last-child i{
	text-align:left;
	font-weight:100
}
#carrito_productos table tr td:last-child i{
	color:#204f73;
	font-weight:bold;
}

#carrito_productos table tr td{
	border-bottom: 1px solid #f2f2f2;
	border-right: none;
	font-weight: bold;
	text-align:left;
	padding:5px 5px 5px 15px
}
#carrito_productos table tr:last-child th:last-child{
	font-weight:bold;
	font-size:16px;
	padding-right:15px;
	color:#333
}
#carrito_productos table .button{
	margin:0;
	padding:0;
	display:table-cell;
	font-weight:bold;
}
#carrito_productos table .button a{
	color:#fff
}

/* ESTILOS DEL CARRITO TABLA*/
.tabla_pedido{
	text-align:center
}
.tabla_pedido .col4{
	margin-left:0;
	margin-right:0;	
	width:24.5%;
}
.tabla_pedido .col4 .button{
	display:block
}

table{
	margin:50px 0 0 0
}
table tr th{
	background:#f2f2f2;
	padding:8px 5px;
	font-size:15px;
    
	color:black;
	text-transform:uppercase;
	font-weight:bold;
}
table td{
	vertical-align:middle;
	border-bottom:1px solid #555;
	border-right:1px dashed #999;
	padding:5px;
	text-align:center;
	text-transform:uppercase;
}
table td:first-child{
	text-align:right
}
table td:last-child{
	border-right:none;
}
table tr:last-child td{
	border-bottom:1px solid #204f73;
	font-weight:bold;
}
table td img{
	width:64px;
	max-width:64px;
	min-width:64px;
}
table td h4{
	text-align:left;
	margin:0
}
table form{
	display:inline-block;
	width:49%;
	text-align:left;
	margin-bottom:15px
}
table form .unidades,
table form .cajas{
	float:none;
	width:100%;
	text-align:left
}
table form input{
	width:100%;
	padding:10px 0
}

.eliminar{
	height:50px;
	width:50px;
	background:#204f73;
	line-height:50px;
	cursor:pointer;
	text-align:center
}
.eliminar a{
	color:#fff;
	font-size:32px;
}
.eliminar a i{
	margin:0 0 0 5px;
}

/* ESTILOS TABLAS*/
button{
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	padding:10px 15px;
	background:#555;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	margin-top:20px;
	width:auto;
	display:table;
	cursor:pointer;
	border:none
}
.tabla_rutero .actividad{
	display:block;
}
.tabla_rutero .actividad h4,
.tabla_rutero .actividad button{
	display:inline-block;
	width:auto;
	margin:0;
	text-transform:uppercase;
    font-size: 1.35em ;
}
.tabla_rutero .actividad button{
	float:right
}

.tabla_rutero .titulo{
	border-bottom:none;
	text-align:left;
	font-weight:bold;
    font-size: 1.15em;
    
}
.tabla_rutero table{
	margin:25px 0;
}

footer{
	background:#204f73;
	color:#fff;
	text-align:center
}
footer a{
	color:#fff
}
footer h4{
	text-align:left
}
footer form label,
footer form div,
footer form input{
	display:block;
	margin:10px 0
}

footer ul{
	list-style:none;
	padding:0
}

article.contenido_right{
	position:relative;
	z-index:9
}
div.col4 .etiqueta{
	position:absolute;
	width:auto;
	z-index:9
}

.col4 .nuevo,
.col4 .oferta{
	padding:20px 10px;
	border-radius:30px;
	font-size:14px;
	color:#fff;
	font-weight:bold;
}

.col4 .nuevo{
	float:left;
	background:#204f73;
}
.col4 .oferta{
	float:right;
	background:#333;
}

.col4 .nuevo:before{
	content:'nuevo';
}
.col4 .oferta:before{
	content:'Promo';
}
.altaCliente td {
    text-align: left;
}
.altaCliente td input, .altaCliente td select {
    text-align: left !important;
}

.productImageWrap {
    width: 180px ;
    height: 180px ;
    text-align: center;
}
.productImageWrapImg {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}


@media (max-width: 540px) {
header{
	padding-top:20px
}

.col2_left,
.col2_right{
	display:block;
	width:100%;
	text-align:center
}
.contenido_right .col2_left,
.contenido_right .col2_right{
	display:block;
	margin:25px 0;
	width:100%;
	text-align:center
}
.contenido_right .col2_right .descripcion .button{
	margin:auto
}

section article.contenido_right{
	display:block;
	width:100%;
	padding-left:0
}
aside.sidebar_left{
	display:block;
	width:100%;	
}

.contenedor_menu{width:auto;padding:50px 20px;}

.col2_right .usuario{
	margin:15px 0
}
.usuario .button{
	padding:10px 15px;
	background:#555;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	margin-top:20px;
	width:auto;
	display:table;
	cursor:pointer
}

.carrito{
	float:right;
	padding-right:3%;
	border:none;
	margin-top:13px
}
.carrito a,
.carrito a i{
	color:#fff
}

ul.menu,
{display:none;}

.mobile-menu{
	display:block;
}

ul.menu,
#menu_usuario,
.categorias ul.menu{
	display:none;
	width:100%;
	text-align:left;
	margin:0;
	padding:0
}

ul.menu li,
.categorias ul.menu li{
	display:block;
	margin:0;
	width:100%;
	padding:0;
	border:0
}

.categorias{
	background:#fff
}

.menu li a,
.categorias ul.menu li a {
color:#333;
padding:15px;
font-size:16px;
font-weight:bold;
text-align:center;
background:#f2f2f2
}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

.submenu_categoria{
	margin:0 auto;
	width:92%;
	padding:0 2%;
}
.submenu_categoria .content{
	border-top:1px solid #f2f2f2;
	margin-top:-1px
}

.catalogo .col4{
	width:39%;
	margin:2% 5%
}

.col3{
	display:block;
	width:80%;
	text-align:center;
	padding:25px 0
}

.tabla_pedido{
	width:100%;
	overflow:scroll;
	margin:50px 0
}
/*table{
	min-width:620px;
	margin:0
}*/
table form{
	display:block;
	width:100%;
	text-align:left;
}

footer form label,
footer form div,
footer form input,
footer h4{
	display:block;
	margin:10px auto;
	text-align:center
}

article div.catalogo div.col4 .etiqueta{
	width:39%;
}

}


/*@media (max-width: 550px) {
	
.catalogo .col4{
	width:90%;
	margin:2% 5%
}	
article div.catalogo div.col4 .etiqueta{
	width:90%;
}

}


@media (max-width: 320px) {
}*/