@charset "utf-8";
@import 'css.css';
/* CSS Document */

	/*-----------------------------------------------------------------------------------

		ITEMS
		
	-----------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------*/
	/*	1.	CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
	/*-----------------------------------------------------------------------------------*/

	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, 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;
}
/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea {
	font: inherit;
	resize: none;
	vertical-align: bottom;
}
video {
	max-width: 100%;
	height: auto;
}
iframe, embed, object {
	max-width: 100%;
}
* {
 _noFocusLine: expression(this.hideFocus=true);
} /* Removes dotted lines around links */
.clean {
	position: relative;
	display: block;
	clear: both;
}
/*-----------------------------------------------------------------------------------*/
	/*	2.	GENERALES
	/*-----------------------------------------------------------------------------------*/
	
	body {
	font-family: 'Lato', sans-serif;
}
h1, h2, h3 {
	font-family: 'Lato', sans-serif;
}
h1 {
	font-size:38px;
	line-height:48px;
	color:#293275;
	font-weight:300;
}
h2 {
	color: #494949;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
}
h3 { color:#293275; font-weight:300; border-bottom: 1px solid #a7a7a7; font-size:24px; padding-bottom: 15px; margin:4% 0 2%}
p {
	color:#7e7e7e;
	font-size:14px;
	padding:5%;
	line-height:18px
}
a {
	color:#293275
}
.centrar {
	max-width:1100px;
	margin:0px auto
}
.gris-bg {
	background:#e4e4e4;
}

.xxxx{
float: left;
    width: 125px;
    height: 75px;
    text-align: center;
padding: 5px;
line-height: 50px;
font-size: 20px;
border: 1px solid #f0f0f0;
}
/*-----------------------------------------------------------------------------------*/
	/*	3.	HEADER
	/*-----------------------------------------------------------------------------------*/
header {
	background:#FFF;
	max-height: :150px
}
#logo {
	/*display:inline-block;*/
	padding:15px 5px;
	float:left;
	max-width:250px
}
header h1 { padding:5% 20% }
/*-----------------------------------------------------------------------------------*/
	/*	4.	MENUS
	/*-----------------------------------------------------------------------------------*/
	.menu-user-may { float:right; /*max-width:600px; */ color:#494949;
	padding:55px 10px 25px; text-align:right}
	.menu-user-may nav { float:left; margin:15px 0; font-size:16px }
.menu-user-may nav ul li{ display:inline-block}

.menu-cuenta li { padding:5px 0px 5px 25px; margin-left:15px; background:url(imgs/bullet.png) left center no-repeat}
.menu-cuenta li a { color:#494949; text-decoration:none; font-weight:400}
.menu-cuenta li a:hover { color:#494949; text-decoration:none; font-weight:700}
/*-----------------------------------------------------------------------------------*/
	/*	5.	FORMS
/*-----------------------------------------------------------------------------------*/	


input, select, textarea {
	background-color: #fff;
	border-color: #9e9e9e;
	border-width: 1px;
	border-style: solid;
	color: #909090;
	font-size: 16px;
	font-weight: 400;
	padding: 10px;
	width: 90%;/*margin:10px 0px;*/
}

 .coment textarea {   
    margin: 0 3%; width:86%
   }
.icon-form {
	float:left;
	width:31px;
	height:33px;
	display:inline-block;
	margin: 22px 10px 10px 10px;
}
.input-may {
	float:left;
	width:220px;
	display:inline-block;
	margin-bottom:10px
}
.form-may-acc {
	max-width:275px;
	margin:0px auto;
	height: 260px;
	padding: 0px 0px 0px 45px
}

.btn-registrarse { color: #ffffff;
	font-size: 18px;
	background: #293275;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	margin:10px 0px;	
	width:180px;
	    border-radius: .25rem;}
.btn {
	color: #ffffff;
	font-size: 18px;
	background: #293275;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	margin:10px 0px;
	float:left;
	width:180px;
}
.btn a, .btn-registrarse a {
	color:#FFF;
	text-decoration:none
}
.btn:hover, .btn-registrarse:hover {
	background: #2980b9;
	text-decoration: none;
}
.bt_red {
	color: #ffffff;
	background: #df3c3c;
	padding:5px 10px;
	text-decoration: none;
	font-size:15px;
	font-weight:400
}
.bt_red:hover {
	background:#cd3737
}
.bt_green {
	color: #ffffff;
	background: #2bb673;
	padding:5px 10px;
	text-decoration: none;
	font-size:15px;
	font-weight:400
}
.bt_green:hover {
	background:#1cb36a
}
.arrow_icon {
	background:url(imgs/arrow_icon.png) no-repeat;
	width:22px;
	height:17px;
	display:inline-block;
	line-height:35px
}
.red_txt { color:#dd2121; font-weight:bold}

.form-cont {    
    padding: 1.5%;}
.form-cont .data{ float:left; width:23%; color:#939393; text-align:right; padding:10px 1%}
.form-cont .campo { float:left; width:75%}
.form-cont .linea {      margin-bottom: 10px;
    display: inline-block;
    width: 100%;}
	.form-txtarea .data { color:#939393; padding:10px}
	.form-txtarea {     width: 88%;
    padding: 1%; float:left; margin-left:11%}

    .form-control {   
    border: 1px solid #9e9e9e;
    border-radius: 0px;
    line-height: 1.5;
    }
	
form h3 {float: left;
    width: 100%;}
	
form { display: inline-block}	
.registro .btn { float: right;
    width: auto;}
	
.dato-admin {     text-align: left;
    padding-bottom: 5px;
    color: #666;}	
/*-----------------------------------------------------------------------------------*/
	/*	5.	FOOTER
	/*-----------------------------------------------------------------------------------*/
	
	footer {
	background:#494949;
	padding:20px 2%;
	/*width:96%;*/
	text-align:center;
	position:relative;
	bottom:0px;
	color: #fff;
	margin-top:5%;
	font-size:14px
}
/*-----------------------------------------------------------------------------------*/
	/*	6.	SECCIONES
	/*-----------------------------------------------------------------------------------*/
	
/*ACCESO MAYORISTAS*/
.acceso-may {
	max-width:500px;
	margin:0px auto;
	text-align:center;
	display:block;
	padding:6% 0
}
.acceso-may h1 {
	margin:25px 0
}

.acceso {
	color: #4caad3;
    font-size: 2.1em;
    margin-top: 30px;
    text-align: center;
}
/*-----------------------------------------------------------------------------------*/
	/*	6.	CATALOGO
	/*-----------------------------------------------------------------------------------*/
.datos_pedido {
	background:#293275;
	color:#FFF;
	font-size:20px;
	font-weight:300;
	padding:12px 0px 15px
}
.datos_pedido p {
	display:inline;
	padding:2px 60px 2px 10px;
	color:#FFF;
	font-size:18px;
}
 .enviar {
	float:right;
	margin-right: 10px;
}
.catalogo {
	padding:20px 0px;
}
.producto {
	width: 49%;
	display: inline-table;
	background: #FFF;
	margin: 0.4%;
}
.producto .foto {/* display:inline-table; width:28.8%;*/
	float:left;
	width:30%
}
.producto .foto img{
/* 	max-width:100%;
	height:auto;
	width:100% */
	max-width: 100%;
    width: 100%;
    height: 175px;
}
.producto .descrip {/*display:inline-table;*/
	width:40%;
	float:left
}

.producto .descrip li{color: #7e7e7e;
      font-size: 13px;
    padding: 0 5%;
    line-height: 17px;}
	
.producto .descrip	.txt {    margin-bottom: 4px;
    color: #000;}
.producto .descrip h2 {
	padding: 5% 6% 3%;
	text-transform:uppercase
}
.producto .cant {/*display:inline-table; width:12%;*/
	float:left;
	width:15%;
}
.producto .cant .inside {
	border-left:1px solid #bfb7b3;
	border-right:1px solid #bfb7b3;
	text-align:center;
	padding: 67% 0px;
}
.count-box {
	margin:0px auto;
	width:60%;
	padding:3% 2%;
	border:#7e7e7e 1px solid;
}

.up_bt { margin:0px auto; width:60%; text-align:center}

.producto .parcial {/*display:inline-table;*/
	width:15%;
	float:left
}

.producto .parcial .inside {
	text-align:center;
	padding: 85% 0px;
	color:#dd2121;
	font-weight:bold
	
}


ul.descrip_ul {
    position: relative;
	
}

li.li_proximamente {
	position: absolute;
   /* width: 200px;*/
    top: 145px;
    left: 165px;
}

li.li_sin_stock {
    position: absolute;
    /*width: 200px;*/
    top: 150px;
}

li.li_oferta {
    position: absolute;
    top: 145px;
	left: 305px;
}

li.li_novedad {
    position: absolute;
	left: 165px;
    top: 150px;
}

.producto .agregar { background:#cdcdcd; float:left;
width:100%; }
.agregar-btn { float:right; color:#FFF; background:#ff9e16; padding:8px 20px; text-decoration:none; font-weight:bold; font-size:12px; border-bottom:4px solid #e2231a}
/*.agregar-btn a {  color:#FFF}*/
.agregar-btn:hover {background:#e2231a }
.tit {
	color:#FFF;
	padding:5px;
	font-size:14px
}
.red {
	background:#e9302b
}
.blue {
	background:#293275
}
.green {
	background:#2bb673
}
.yellow {
	background:#f99837
}
.redtxt {
	color:#dd2121;
	font-weight:bold
}
.stock {
	color:#FFF;
	background:#00a651;
	padding:3px
}
.sin-stock {
	color:#FFF;
	background:#dd2121;
	padding:3px
}

/*-----------------------------------------------------------------------------------*/
	/*	.	LISTADO DEL PEDDIDO
	/*-----------------------------------------------------------------------------------*/
	
.list-pedido {     width: 98%;
    margin: 3% 0;
    padding: 0 1%;}
.list-pedido  .foto{ float:left;  width:16%}
.list-pedido .descr{ float:left; width:25%; padding:0 2%}
.list-pedido .cant{float:left;width:10% }
.list-pedido .coment{ float:left;width:25% }
.list-pedido .parcial{float:left;width:10% }
.list-pedido .eliminar{float:left; width:10%}

.list-pedido .row { width:100%; border-bottom:1px solid #d8d4d1;display: inline-block; }

.gris-osc { background:#777; color:#FFF;}
.blanco {background:#FFF}
.list-pedido .tit { text-align:center; padding: 10px}


.list-pedido  .foto img{
	max-width:100%;
	height:auto;
	width:100%
}
.list-pedido .descr li{color: #7e7e7e;
      font-size: 13px;
    padding: 0 5%;
    line-height: 17px;}
	
.list-pedido .descr	.txt {    margin-bottom: 4px;
    color: #000;}
.list-pedido .descr h2 {
	padding: 5% 6% 3%;
	text-transform:uppercase
}
.list-pedido .cant .inside {
	border-left:1px solid #bfb7b3;
	border-right:1px solid #bfb7b3;
	text-align:center;
	padding: 54% 0px;
	height: 60px;
}

.list-pedido  .parcial .inside {
	text-align:center;
	padding: 74% 0px;
	color:#dd2121;
	font-weight:bold;
	border-left:1px solid #bfb7b3;
	border-right:1px solid #bfb7b3;
	
}
.list-pedido  .eliminar .inside {
	text-align:center;
	padding: 66% 0px;
	
	font-weight:bold;

	border-right:1px solid #bfb7b3;
	
}

.list-pedido .total {  background:#777; display:inline-block; color:#FFF; padding:2%; width:96% }
.list-pedido .total p { 
float:left;

	color:#FFF;
	font-size:18px;
	padding: 0 60px 0 0;}
	.list-pedido .total .precio { background:#FFF; color:#494949;padding:5px 10px; float:left; margin-top:-5px }

/*-----------------------------------------------------------------------------------*/
	/*	6.	BUSCADOR
	/*-----------------------------------------------------------------------------------*/

.nav-search {
	height: 60px;
	display: inline-block;
	width:100%
}
.nav-search li {
	/* float: left;*/
    list-style-type: none;
	position: relative;
	color:#494949
}
.nav-search li a {
	font-size: 16px;
	color: #494949;
	display: block;
	line-height: 32px;
	padding: 0 26px;
	text-decoration: none;
	border-left: 1px solid #2e2e2e;
}
.nav-search li a:hover {
	background-color: #f2f2f2;
}
.nav-search .txt {
	padding:7px 10px;
	float:right;
}
#search {
	width: 357px;
	margin: 4px;
}
#search_text {
	width: 250px;
	padding: 6px 10px;
	font-size: 16px;
	margin-right: 0;
	color: #939393;
	font-style:italic;
	outline: none;
	height:20px;
	float: left;
	transition: all 0.15s;
	border-left: 1px solid #898989;
	border-top: 1px solid #898989;
	border-bottom: 1px solid #898989;
	border-right: none;
	margin:0 0 4px 6px
}
::-webkit-input-placeholder { /* WebKit browsers */
 color: #939393;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color: #939393;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: #939393;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #939393;
}
#search_text:focus {
	background:#f2f2f2;
}
#search_button {
	border: 0 none;
	background:  url(imgs/lupa_icon.png) no-repeat #fff center center;
	width: 50px;
	float: left;
	padding: 0;
	text-align: center;
	padding: 6px 10px;
	cursor: pointer;
	border-right: 1px solid #898989;
	border-top: 1px solid #898989;
	border-bottom: 1px solid #898989;
	border-left: none;
	height:34px;
}
#options {
	float:right;
	margin-right:10px
}
#options a {
	border-left: 0 none;
}
#options>a {
	background-image: url(imgs/triangle.png);
	background-position: 85% center;
	background-repeat: no-repeat;
	padding-right: 42px;
	border: 1px solid #898989;
	background-color:#FFF
}
.subnav {
	visibility: hidden;
	position: absolute;
	top: 110%;
	right: 0;
	width: 200px;
	height: auto;
	opacity: 0;
	transition: all 0.1s;
	background: #fff;
	border: 1px solid #898989;
}
.subnav li {
	float: none;
}
.subnav li a {
}
#options:hover .subnav {
	visibility: visible;
	top: 100%;
	opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
	/*	NOTIFICACION
	/*-----------------------------------------------------------------------------------*/
	.black {
	    background: #000000;
	}
	.imgpopup {
	    cursor: pointer;
	    cursor: hand;
	}
	.viole {
	    background: #bd50ff;
	}
	.notificacion {
	    bottom: 5;
	    right: 0;
	    position: fixed;
	    display: none;
	    z-index: 999;
	}
	.notificacion p {
	    background-color: #293275;
	    color: #fff;
	    font-size: 23px;
	    width: 210px;
	    padding: 25px;
		
	}
	.valdinamico {
	    padding: 0% 0%;
	    border: #ffffff 1px solid;
	    height: 16px;
	}
/*-----------------------------------------------------------------------------------*/
	/*	MEDIA QUERIES
	/*-----------------------------------------------------------------------------------*/
/*@media (max-height: 700px) {
footer {
position:relative;
margin-top:25px
}
}*/
@media screen and (max-width: 850px) {
/*HEADER*/
.datos_pedido p {
display:block;
padding:3px 10px;
font-size:15px
}
.datos_pedido .enviar {
float:none;
padding: 5px 10px;
}
 #search_text {
width:80%;
}
#search_button {
width:10%
}
 .producto {
width:96%;
height:auto;
margin:0.5% 2%
}
.producto .cant .inside {
	
	padding: 75% 0px;
}
}
 @media screen and (max-width: 690px) {
 #search {
width:auto;
}
.nav-search {
height: auto;
}
#options {
 float: left;
 margin: 5px 10px;
}
.nav-search .txt {
float: left;
 margin: 5px;
padding: 7px 0px;
}
 .subnav {
left:0;
right:inherit
}
	
/*CATALOGO*/

/*.producto { width:96%; height:auto; margin:2%}*/
.producto .foto {
display:inline-table;
width:50%;
float:none
}
.producto .descrip {
display:inline-table;
width:50%;
float:none
}
.producto .cant {
display:inline-table;
width:50%;
height:auto;
float:none
}
.producto .parcial {
display:inline-table;
width:50%;
float:none
}

.producto .cant .inside {
    padding: 5% 0;

}
.producto .parcial .inside {
    padding: 15% 0;

}
.producto .agregar { float:none;display:inline-table;}

.producto .descrip h2 { font-size:15px; line-height:20px}
p {
 
    font-size: 13px;
    line-height: 18px;}
	
	
	/*Menu de usuario*/
	.menu-user-may {     float: right;     padding: 10px 10px 25px;}
	.menu-user-may nav ul li {
    display: block;
}
.menu-user-may nav {
    float: none;
    margin: 10px 0;
    font-size: 16px;
    position: absolute;
    right: 0;
}
.menu-cuenta li {
    padding: 5px 15px 5px 10px;
    margin-left: 0px;
    background: none;
}
.menu-user-may {
    float: right;
   /*  max-width: 600px; */
    color: #494949;
    padding: 10px 10px 25px;
    text-align: right;
    /* position: absolute; */
    top: 0;
     font-size: 12px; 
}

.acceso {
	font-size: 1.2em;
    padding: 5px;
    text-align: center;
    margin: 5px;
}

.form-cont .data {
    float: none;
    width: auto;
    color: #939393;
    text-align: left;
    padding: 10px 1%;
}
.form-cont .campo {
    float: none;
    width: auto;
}
input {width: 100%;}
.form-cont {padding-right: 15px;
    padding-left: 15px;}

.form-txtarea {
    width: 100%;
    padding: 0;
    float: none;
    margin-left: 0;
}
textarea { width: 100% }

}

.g-recaptcha {     display: inline-block; }

#respuesta {     margin-top: 10px;
    text-align: center;
     font-weight: bold;
    padding:3px 10px;
    color: red;
    line-height: 22px;
    margin: 0 auto;
    font-size: 14px;
     }



@media (min-width: 992px) { 
.form-control {    max-width: 350px;}

}