/*
font-family: 'Merriweather', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Mr De Haviland', cursive;
*/

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

* {
  box-sizing: border-box;
}

body {
  opacity: 0;
  transition: opacity 1s;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1vw;
  line-height: 1.2vw;
  color: #404040;
  overflow-x: hidden !important;
  outline: 0;
  background-color: #fff;
  position: relative;
  -webkit-font-smoothing: antialiased;
  opacity:0;
}

@media screen and (max-width: 795px) {
  body {
    font-size: 14px;
    line-height:16px;
  }
}

@media screen and (max-width: 485px) {
  body {
    font-size: 14px;
    line-height:16px;
  }
}

p {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  text-indent: 0;
}

a, a:hover, button {
  text-decoration: none;
  color: inherit;
  outline: 0;
  transition: all 0.3s;
}
h2, h3, h4 { margin:0; padding:0; }
strong {
  font-weight: bold;
}

a[href^="tel"] {
  color: inherit;
}

.slick-slide {
  outline: none;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}


body.loaded {
  opacity: 1;
}

.grecaptcha-badge {
  display: none !important;
}

textarea:focus, input:focus{
    outline: none;
}
*:focus {
    outline: none;
}

.whatsappFijo {position: fixed; bottom:1vw; right: 1vw; /*color: white; background: #00e585; color:#fff;*/ font-size: 1.5vw; z-index:99; }
.whatsappFijo .fa-stack { color:#00e585;}
 
header { display:block; position:relative; width:100vw; height:16vw; background-image:url(../img/fondo-top.png); background-repeat: no-repeat; background-position: center; background-size:cover; padding:0 5.9523809524vw;z-index:1;}
header ul.menu { display:inline-block; float:left; position:relative; margin-top:7.5vw; }
header .menu li { display:block; position:relative; font-family: 'Merriweather', serif; color:#fff; text-transform: uppercase; font-size:1.1vw; cursor:pointer; font-weight: 700;}
header .menu li .fa { color:#9f3210; }
header .menu li .sub { position: absolute; top: 0; left:0; opacity: 0; visibility: hidden; width: auto !important; min-width:15vw; overflow: hidden; }
header .menu li .sub ul { display:block; position:relative; overflow:hidden; width: 100%;  height: auto !important; background:#f15822; padding:1vw; margin-top:2vw; }
header .menu li .sub ul li { display: block; position:relative; overflow:hidden; width:100%; font-size:.88vw; line-height: 1vw; padding-bottom:.5vw; margin-bottom:.5vw; border-bottom:1px solid #fff; text-transform: none; font-family:"Roboto", sans-serif; font-weight: 400;}
header .menu li .sub ul li a { display:block; position:relative; overflow:hidden; width:100%; }
header .menu li .sub ul li a:hover { color:#000; }
header .menu li .sub ul li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
header .menu li:hover .sub {display: block; visibility: visible; opacity: 1; }

header .buscador { display: inline-block; float:left; position:relative;  width:17.1vw; margin:7vw 0 0 3.39vw; }
header .buscador input { display: block; position: relative; overflow:hidden; width:100%;background:#fff; border-radius:12px; padding:.5vw 1vw; color:#999999; font-size:.88vw; border:0;}
header .buscador .fa { display: block; position: absolute; top: .25vw; right: .5vw; font-size: 1.5vw; border: 0; z-index: 9;  color:#c33f16; background:none;}

header h1 { display: inline-block; float:left; position:relative; overflow: hidden; width:8.8095238095vw; margin:3.5vw 0 0 5.2vw; }
header h1 img { display: block; width:100%;  height:auto; }


header .user { display: inline-block; float:left; position:relative; margin:7vw 0 0 5.5952380952vw; }
header .user .registrarse { display:inline-block; float:left; position:relative; font-family: 'Merriweather', serif; color:#fff; text-transform: uppercase; font-size:.94vw; cursor:pointer; margin-top:.5vw; margin-right:1vw;font-weight: 700;}
header .user .registrarse .fa { font-size: 1.5vw; display: inline-block; float: left; margin-right: .5vw; color: #c33f16; }
header .user .ingresar { display:inline-block; float:left; position:relative; font-family: 'Merriweather', serif; color:#fff; text-transform: uppercase; font-size:.94vw; cursor:pointer; margin-top:.5vw; padding-left:1vw; border-left:1px solid #fff;font-weight: 700;}
header .user a:hover { color:#c33f16; }

header .user .usuario { display:inline-block; float:left; position:relative; cursor:pointer; margin-top:.5vw; margin-right:1vw;}
header .user .usuario a { display:block; position:relative; overflow:hidden; width:100%; }
header .user .usuario .fa { display:inline-block; float:left; font-size: 1.5vw; display: inline-block; float: left; margin-right: .5vw; color: #c33f16; }
header .user .usuario  .subUsuario { position: absolute; top: 0; left:0; opacity: 0; visibility: hidden; width: auto !important; min-width:10vw; overflow: hidden; }
header .user .usuario  .subUsuario ul { display:block; position:relative; overflow:hidden; width: 100%;  height: auto !important; background:#f15822; padding:1vw; margin-top:2vw; }
header .user .usuario  .subUsuario ul li { display: block; position:relative; overflow:hidden; width:100%; font-size:.88vw; line-height: 1vw; padding-bottom:.5vw; margin-bottom:.5vw; border-bottom:1px solid #fff; text-transform: none; font-family:"Roboto", sans-serif; font-weight: 400;}
header .user .usuario  .subUsuario ul li a { display:block; position:relative; overflow:hidden; width:100%; color:#fff;}
header .user .usuario  .subUsuario ul li a:hover { color:#000; }
header .user .usuario  .subUsuario ul li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
header .user .usuario:hover .subUsuario {display: block; visibility: visible; opacity: 1; }
header .user .usuario:hover .fa { color:#fff; }

header .der { display:inline-block; float:right; position:relative; overflow:hidden; margin:7vw 0; }
header .der .carrito { display:inline-block; float:left; position:relative; overflow:hidden; margin-right: 1vw; padding-right:1vw;}
header .der .carrito .fa-stack { display:block; font-size:1.2vw; color:#c33f16; }
header .der .carrito .top_cantidad { background: #148287; border-radius: 1vw; -moz-border-radius: 1vw; -webkit-border-radius: 1vw; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.5vw; text-align: center; width: 1.5vw; display: block; position: absolute; top: 0; right: 0; font-size: .8vw;  }

header .der ul { display: inline-block; position: relative; overflow: hidden; float: right; margin-top: .6vw;}
header .der ul li { display:inline-block; float:left; position:relative; overflow:hidden; font-size: .88vw; font-family: 'Merriweather', serif; color:#148287; text-transform: uppercase; margin-right: .5vw; padding-right:1vw; border-right:1px solid #148287; font-weight: 700; cursor:pointer;}
header .der ul li a { display:block; position:relative; overflow:hidden; width:100%; color:#148287;}
header .der ul li a:hover { color:#fff; }
header .der ul li:last-child { border-right:0; padding-right:0; margin-right:0; }

main { display:block; position:relative; overflow:hidden; width:100vw; z-index:0;  padding:2vw 5.9523809524vw; }

.productos .titulo { display:block; position:relative;width:100%; padding-bottom:1vw; margin-bottom:1vw; border-bottom:5px solid #cccccc; color:#c33f16; font-size:2.2vw; font-weight: 400; font-family: 'Merriweather', serif;text-transform: uppercase; line-height:6.5vw;}
.productos .titulo .queCategoria { display: inline-block; }
.productos .titulo span { font-size:5.83vw; font-weight: 400; font-family: 'Mr De Haviland', cursive; text-transform: none;}
.productos .titulo .filtros { font-family: "Roboto", sans-serif; font-size: 1vw; display: inline-block; float: right; margin-top:3vw;}
.productos .titulo .filtros a { display: inline-block; float: left; color: #404040; font-family: "Roboto", sans-serif; font-weight: 900; text-transform: none; font-size: 1vw; line-height:1.3vw; cursor:pointer; padding:.5vw 0;}
.productos .titulo .filtros a:hover { color:#f15822; }
.productos .titulo .filtros .filtrar {  display: inline-block; float: left; margin-left: 1vw; /* margin-top: 0; */ padding-left: 1vw; border-left: 1px solid #404040;}
.productos .titulo .filtros .filtrar span { display: inline-block; float: left; color: #404040; font-family: "Roboto", sans-serif; font-weight: 400; text-transform: none;
    font-size: 1vw; line-height:1.3vw;margin-top:.5vw;}
.productos .titulo .filtros .filtrar .seleccionado { display: inline-block; float: left; color: #fff; font-family: "Roboto", sans-serif; font-weight: 400; text-transform: none; font-size: 1vw; line-height: 1.3vw; background: #148287; padding: .3vw .5vw; cursor:pointer;}
.productos .titulo .filtros .filtrar .seleccionado .fa { color:#fff; }
.productos .titulo .filtros .filtrar .ordenarSelect {display:block; position:relative; font-size: 1vw; line-height: 1.5vw; color: #3e403d;  font-weight: 400; padding-left: 0.595238095238vw; float: left; margin-top: -.3vw;}
.productos .titulo .filtros .filtrar .ordenarSelect:hover .submenuContainer {display: block; visibility: visible; opacity: 1; }
.productos .titulo .filtros .filtrar .ordenarSelect .submenuContainer {position: absolute; top: 2.3vw; right: 0; width: 11.55vw; color: #fff; background-color: #148287; font-size: 0.9vw; font-weight: 400; padding: 1vw; opacity: 0; visibility: hidden; transition: all 0.5s; z-index:99;}

.productos .titulo .filtros .filtrar .ordenarSelect .submenuContainer ul { display:block; position:relative; overflow:hidden; width: 100%;  height: auto !important;  }
.productos .titulo .filtros .filtrar .ordenarSelect .submenuContainer ul li { display: block; position:relative; overflow:hidden; width:100%; font-size:.88vw; line-height: 1vw; padding-bottom:.5vw; margin-bottom:.5vw; border-bottom:1px solid #fff; text-transform: none; font-family:"Roboto", sans-serif; font-weight: 400; cursor:pointer;}
.productos .titulo .filtros .filtrar .ordenarSelect .submenuContainer ul li:hover { color:#000; }
.productos .titulo .filtros .filtrar .ordenarSelect .submenuContainer ul li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }

.productos .info, .compras .info { display: block; position: relative; overflow: hidden; width: 100%; margin: 1vw 0; padding: 1vw; border: 2px solid #148287; font-size: .9vw; line-height: 1vw; }
.productos .lista {     display: block; position: relative;  width: 100%; margin-top: 4vw;}
.productos .lista li {     display: inline-block; position: relative; overflow: hidden; width: 20%; margin-bottom: 1vw; border:.5vw solid transparent; text-align:center; padding:0 1vw 1vw 1vw;}
.productos .lista li .imagen {  display: block; position: relative; overflow: hidden; width: 100%; height: 18vw; background-repeat: no-repeat; background-position: center; background-size: cover; margin-bottom:0;}
.productos .lista li:hover, .productos .lista li.seleccionado { border-color:#ccc; }
.productos .lista li h3 { display: block; font-family: 'Merriweather', serif; font-size:1vw; line-height: 1.2vw; font-weight: 900; text-transform: uppercase; }
.productos .lista li p { display: block; font-size:.8vw; line-height: 1vw; margin-top:.5vw; }
.productos .lista li .precio { display:block; color:#c33f16; font-weight: 900; font-size:1.6vw; font-family: 'Merriweather', serif; margin-top:1vw; }

.productos .lista li .agregar { display:table; background-image:url(../img/boton-añadir-off.svg); padding:.3vw .5vw 0 .5vw;  cursor:pointer; font-weight: 700; font-size:.6vw; text-transform: uppercase; color:#fff;  font-family: 'Merriweather', serif; margin-top:1vw; text-align: center; left:0; right:0; margin:1vw auto 0 auto; width:10.5357142857vw; height:1.8vw;background-repeat: no-repeat; background-position: center; background-size: cover; cursor:pointer;}
.productos .lista li .consultar { display:table; background-image:url(../img/boton-añadir-on.svg); padding:.3vw .5vw 0 .5vw;  cursor:pointer; font-weight: 700; font-size:.6vw; text-transform: uppercase; color:#fff;  font-family: 'Merriweather', serif; margin-top:1vw; text-align: center; left:0; right:0; margin:1vw auto 0 auto; width:10.5357142857vw; height:1.8vw;background-repeat: no-repeat; background-position: center; background-size: cover; cursor:pointer;}

.productos .lista li .triangulo { width: 0; z-index:9; position:absolute; top:-.5vw; right:-.5vw; height: 0; border-top: 3vw solid #c33f16; border-right: 3vw solid #c33f16; border-bottom: 3vw solid transparent; border-left: 3vw solid transparent; opacity:0; transition:all .5s;}
.productos .lista li .triangulo .fa { display: block; color: #fff; font-size: 1.5vw; top: -1.6vw; right: -1.6vw; position: absolute; } 
.productos .lista li:hover .triangulo, .productos .lista li.seleccionado .triangulo { opacity:1; }

.productos .lista li .triangulo2 { width: 0; z-index:9; position:absolute; top:-.5vw; right:-.5vw; height: 0; border-top: 3vw solid #148287; border-right: 3vw solid #148287; border-bottom: 3vw solid transparent; border-left: 3vw solid transparent; opacity:1; }
.productos .lista li .sinstock { display: block; position: absolute; top: .2vw; right: 0vw; color: #fff; z-index: 99; -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 1vw; width: 3vw; text-align: center; }


.productos .lista li:hover .agregar:hover { background-image:url(../img/boton-añadir-on.svg) }


.compras main { min-height:20vw; }
.compras .lista2 {     display: block; position: relative; overflow:hidden; width: 100%; margin-top: 4vw;}
.compras .lista2 li {     display: inline-block; float:left; position: relative; overflow: hidden; width: 49%; margin-bottom: 1vw;  text-align:left;}
.compras .lista2 li .imagen {  display: inline-block; float:left; position: relative; overflow: hidden; width: 29%; height: 15vw; background-repeat: no-repeat; background-position: center; background-size: cover;  margin-right:1vw; border:.5vw solid #ccc;}
.compras .lista2 li .marco {  display: inline-block; float:left; position: relative; overflow: hidden; width: 50%;}
.compras .lista2 li .marco h3 { display: block; font-family: 'Merriweather', serif; font-size:1.3vw; line-height: 1.5vw; font-weight: 900; text-transform: uppercase;margin-top:2vw;}
.compras .lista2 li .marco p { display: block; font-size:.83vw; line-height: 1vw; margin-top:.5vw; text-align: left;}
.compras .lista2 li .marco .marco2 { display: block; position: relative; width: 100%; margin-top: 1vw;overflow:hidden; }
.compras .lista2 li .marco .marco2 h5 { display: inline-block; float:left; position: relative;font-family: 'Merriweather', serif; font-size:1.3vw; line-height: 1.5vw; font-weight: 900;  color:#c33f16; padding:0; margin:0;margin-right:1vw; }
.compras .lista2 li .marco .marco3 { display: block; position: relative; width: 100%; margin-top: 1vw; overflow:hidden;}
.compras .lista2 li .marco .marco3 .fa { display:inline-block; float:left; margin-right:1vw; font-size:2vw; }
.compras .lista2 li .marco .marco3 .mas {     display: block; cursor: pointer; color: #c33f16; }
.compras .lista2 li .marco .marco3 .menos {     display: block; cursor: pointer; color: #148287; }
.compras .lista2 li .marco .marco3 .borrar {     display: block; cursor: pointer; color: #404040; }


.compras .titulo { display:block; position:relative;width:100%; padding-bottom:1vw; margin-bottom:1vw; border-bottom:5px solid #cccccc; color:#c33f16; font-size:2.2vw; font-weight: 400; font-family: 'Merriweather', serif;text-transform: uppercase; line-height:6.5vw;}
.compras .titulo .queCategoria { display: inline-block; }
.compras .titulo span { font-size:5.83vw; font-weight: 400; font-family: 'Mr De Haviland', cursive; text-transform: none;}
.compras .carritoInterna {     display: block; position: relative; overflow: hidden; width: 100%; padding: 1vw 0; margin: 1vw 0; border: solid #ccc; border-width: 5px 0 5px 0; }
.compras .carritoInterna .fa { display: inline-block; color: #148287; font-size: 2vw; margin-right: 1vw; }
.compras .carritoInterna p { display: inline-block;  font-family: 'Merriweather', serif; color: #148287; font-size: 1vw; text-transform: uppercase; font-weight: 900; }
.compras .carritoInterna p strong { color:#c33f16; margin-left:1vw;}
.compras .formComprar button { display:table; background-image:url(../img/boton-añadir-on.svg); padding:.3vw .5vw 0 .5vw;  cursor:pointer; font-weight: 900; font-size:1vw; text-transform: uppercase; color:#fff;  font-family: 'Merriweather', serif; margin-top:1vw; text-align: center; left:0; right:0; margin:2vw auto 0 auto; width:18vw; height:3vw;background-repeat: no-repeat; background-position: center; background-size: cover; cursor:pointer; border:0;  }

.compras .mensaje { display: block; position: relative; overflow: hidden; width: 100%; font-size: .9vw; line-height: 1.1vw; }

.formDatos { display: block; position: relative; overflow: hidden; width: 100%; margin: 2vw 0 0 0; padding: 0; }
.formDatos ol { display: block; position: relative; overflow: hidden; width: 100%; margin: 0; padding: 0; }

.formDatos ol li { display: block; position: relative; overflow: hidden; width: 100%; margin: 0; padding: 0; margin-bottom: 1vw; }
.formDatos ol li label { display: block; position: relative; margin-bottom: .5vw; font-size: .9vw; color: #148287; font-weight: 900; }
.formDatos ol li input { display: block; position: relative; overflow: hidden; width: 100%; padding:.5vw 1vw; font-size:1vw; line-height: 1.2vw; }
.formDatos ol li select { display: block; position: relative; overflow: hidden; width: 100%; padding:.5vw 1vw; font-size:1vw; line-height: 1.2vw; }
.formDatos ol li textarea { display: block; position: relative; overflow: hidden; width: 100%; padding:.5vw 1vw; font-size:1vw; line-height: 1.2vw; height:5vw; }

.formDatos button { display:table; background-image:url(../img/boton-añadir-on.svg); padding:.3vw .5vw 0 .5vw;  cursor:pointer; font-weight: 900; font-size:1vw; text-transform: uppercase; color:#fff;  font-family: 'Merriweather', serif; margin-top:1vw; text-align: center; left:0; right:0; margin:2vw auto 0 auto; width:18vw; height:3vw;background-repeat: no-repeat; background-position: center; background-size: cover; cursor:pointer; border:0;  }

.compras .subtitulo {     display: block; position: relative; overflow: hidden; width: 100%; margin-bottom: 1vw; padding-bottom: 1vw; border-bottom: 5px solid #ccc; margin-top:2vw;font-family: 'Merriweather', serif; font-size: 1.3vw; line-height: 1.5vw; font-weight: 900; color: #c33f16}

.como .titulo { display:block; position:relative;width:100%; padding-bottom:1vw; margin-bottom:1vw; border-bottom:5px solid #cccccc; color:#c33f16; font-size:2.2vw; font-weight: 400; font-family: 'Merriweather', serif;text-transform: uppercase; line-height:6.5vw;}
.como .titulo .queCategoria { display: inline-block; }
.como .titulo span { font-size:5.83vw; font-weight: 400; font-family: 'Mr De Haviland', cursive; text-transform: none;}
.como .izquierda { display:inline-block; float:left; position:relative; overflow:hidden; width:39.40vw; margin-top:2vw; }
.como .izquierda p { display:block; font-size:.9vw; line-height: 1.1vw; margin:0 0 .5vw 0; }
.como .izquierda p span { text-transform: uppercase; font-weight: 900; }
.como .derecha { display:inline-block; float:right; position:relative; overflow:hidden; width:43.50vw; margin-top:2vw; }
.como .derecha h3 { display:block; color:#148287; font-family: 'Merriweather', serif; font-size: 1.6vw; line-height:1.8vw; text-transform: uppercase; font-weight: 900;}
.como .derecha ul { display: block; position:relative; overflow: hidden; width:100%; margin-top:2vw; }
.como .derecha ul li { display: block; position:relative; overflow: hidden; width:100%; margin-bottom:1vw; }
.como .derecha ul li img { display: inline-block; float:left; margin-right:1vw; margin-bottom:2vw; width:2.5vw; height:auto; }
.como .derecha ul li p { display: inline-block; float: left; font-size: .9vw; line-height: 1.1vw; position: relative; overflow: hidden; width: 80%; }
.como .derecha ul li p span { display:block;font-family: 'Merriweather', serif; font-size: 1.1vw; line-height:1.3vw; text-transform: uppercase; font-weight: 900; margin-bottom:.3vw;}



footer { display:block; position:relative; width:100vw; height:13vw; background-image:url(../img/fondo-pie.png); background-repeat: no-repeat; background-position: center; background-size:cover; padding:0 5.9523809524vw;z-index:1; margin-top:2vw;}
footer h1 { display: inline-block; float:left; position:relative; overflow: hidden; width:7.8571428571vw; margin:4.5vw 0 0 5.2976190476vw; }
footer h1 img { display: block; width:100%;  height:auto; }
footer .datos { display:inline-block; float:left; position:relative; overflow:hidden; margin:5.5vw 0 0 3vw; }
footer .datos p { display: block; font-size:.83vw; line-height: 1.2vw; color:#fff; font-weight: 400; }
footer .datos p span { color:#148287; font-size:.88vw; line-height: 1.5vw; text-transform: uppercase; font-weight: 700; font-family: 'Merriweather', serif;  }
footer .osmosis { display: inline-block; float:right; font-size:.83vw; line-height: 1.2vw; color:#c33f16; font-weight: 400; margin-top:8vw; }
footer .osmosis:hover { color:#fff; }



/*--------- OVERLAYS ---------- COMPRAS */

.overlay {width: 29.02655vw; color: #404040; background-color: #fff; font-size: 0.94395vw; line-height: 1.17994vw; padding: 1.76991vw; overflow: hidden; transition: all .5s ease-in; transform-style: preserve-3d; transform: translateZ(600px) rotateX(20deg); }

.pop { display:block; position:relative; overflow:hidden; width:100%; }
.pop h2 { display:block; width:100%; color:#148287; text-transform:uppercase; font-size:1.4vw;  margin:0;}
.pop ol { display:block; position:relative; overflow:hidden; width:100%; margin-top:2vw; padding:0; }
.pop li { display:block; position:relative; overflow:hidden; width:100%; margin-bottom:1vw; }
.pop label { display:block; position:relative; color:#148287; font-size:1.25vw; line-height:1.4vw; margin-bottom:.5vw; padding-left:.8vw; }
.pop input { display:block; position:relative; overflow:hidden; width:100%; background:#fff; border:1px solid #ccc; padding:.5vw; font-size:1vw; color:#322f2f; margin-bottom:.5vw; font-weight:normal;}

.pop label::before { content: "\f069"; font-family: FontAwesome; position: absolute; top: 0; left: 0; font-size: .5vw; color: #ff9900; z-index: 1; }
.pop .sin::before { content:none; }
.pop button { display:block; position:relative; overflow:hidden; background:#148287; padding:.5vw 1vw; color:#fff; text-align:center; font-size:1.2vw;  margin:0 auto; border:0; cursor:pointer;  border:1px solid #148287; margin-top:1.5vw; margin-bottom:.2vw; clear:both; float:left;}
.pop button:hover { color:#148287; background:#fff; }
.pop textarea { display:block; position:relative; overflow:hidden; width:100%; background:#fff; border:1px solid #ccc; padding:.5vw; font-size:1vw; color:#322f2f; margin-bottom:.5vw; font-weight:normal; height:5vw;}   

.overlay .cerrarIngresar { display: block; position: absolute; top: .2vw; right: 1vw; font-size: 2vw; color: #148287; cursor:pointer; }
.overlay .cerrarIngresar:hover { color:#000; }  

.overlay .cerrarContacto { display: block; position: absolute; top: .2vw; right: 1vw; font-size: 2vw; color: #148287; cursor:pointer; }
.overlay .cerrarContacto:hover { color:#000; }  

.overlay .cerrarRegistrate { display: block; position: absolute; top: .2vw; right: 1vw; font-size: 2vw; color: #148287; cursor:pointer; }
.overlay .cerrarRegistrate:hover { color:#000; }  

.overlay .cerrarRecordar { display: block; position: absolute; top: .2vw; right: 1vw; font-size: 2vw; color: #148287; cursor:pointer; }
.overlay .cerrarRecordar:hover { color:#000; }  

.overlay .recuperar {     display: inline-block; font-size: 1vw; line-height: 1vw; color:#148287; float:left;}
.overlay .recuperar:hover { text-decoration: underline; }
.overlay .sinCuenta {     display: inline-block; font-size: 1vw; line-height: 1vw; color:#148287; margin-top:.5vw;}
.overlay .sinCuenta:hover { text-decoration: underline; }


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

  header { height:26vw; padding:0 40px; z-index:4;}
  header ul.menu { margin-top:11.5vw; }
  header .menu li { font-size:20px; line-height: 22px; }
  header .menu li .sub { top:10px; }
  header .menu li .sub ul { padding:10px; margin-top:10px; }
  header .menu li .sub ul li { font-size:16px; line-height: 18px; margin-bottom:5px; padding-bottom:5px; }
  header h1 { width: 15.625vw; margin: 3.5vw 0 0 19.2vw; }
  header .der { margin:10.5vw 0 0 0; }
  header .der .carrito { margin-right: 30px; padding-right:10px; }
  header .der .carrito .fa-stack { font-size:20px; }
  header .der .carrito .top_cantidad {background: #148287; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #ffffff; display: inline-block; font-weight: bold; line-height: 20px; text-align: center; width: 20px; display: block; position: absolute; top: 0; right: 0; font-size: 10px; }
  #click-menu {  display:inline-block; float:right; position: relative;  width: 31px; height: 31px; cursor: pointer; z-index: 9; transition:all 1s; }
  #click-menu span { position: absolute; right: .8vw; top: 10px; margin:0 auto; display: block; width: 100%; height: 3px;  background-color: #fff; transition: all .3s;}
  #click-menu span:nth-child(2) {top: 20px; }
  #click-menu span:nth-child(3) {top: 30px; }
  #click-menu.abierto span:nth-child(1) {top: 20px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
  #click-menu.abierto span:nth-child(2) {opacity: 0; top: -7.8125vw; }
  #click-menu.abierto span:nth-child(3) {top: 20px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

  ul.menuMovil { display: block; width: 100%; background: #148287; padding: 8vw 40px 20px 40px; position: fixed; z-index: 3; top: 19vw; opacity: 0; height:0; transition:all .5s;-webkit-transform: translate3d(0, -500px, 0); transform: translate3d(0, -500px, 0); }
  ul.menuMovil.abierto { opacity:1; height:auto;-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .menuMovil li { display:block; position:relative; width:100%; display:block;font-family: 'Merriweather', serif; font-size:20px; line-height: 22px; font-weight: 700; text-transform: uppercase; margin-bottom:10px; padding-bottom:10px; color:#fff; border-bottom:1px solid #fff; }
  .menuMovil li:last-child { padding-bottom:0; margin-bottom: 0; border:0; }
  .menuMovil li a{ display:block; position:relative; overflow:hidden; width:100%; color:#fff; }
  .menuMovil li a:hover { color:#000; }
  main { padding:40px; }
  .productos .titulo { font-size:32px; }
  .productos .titulo span { font-size:90px; }
  .productos .titulo .queCategoria { display:block; text-align: center; }
  .productos .titulo .filtros {font-family: "Roboto", sans-serif; font-size: 1vw; display: block; float: none; margin-top: 10px; text-align: center; width: 100%; padding-top: 10px; border-top: 5px solid #ccc; margin-bottom: 0; text-align:center; padding-top:20px;}
  .productos .titulo .filtros a { font-size:17px; line-height: 19px; float:none; overflow:hidden;}
  .productos .titulo .filtros .filtrar { float:none; margin-left:10px; padding-left: 10px; }
  .productos .titulo .filtros .filtrar span { font-size:17px; line-height: 19px; margin-top:4px;}
  .productos .titulo .filtros .filtrar .ordenarSelectMobile {display:block; position:relative; font-size: 1vw; line-height: 1.5vw; color: #3e403d;  font-weight: 400; padding-left: 0.595238095238vw; float: left; margin-top: -.3vw;}
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer {position: absolute; top: 2.3vw; right: 0; width: 11.55vw; color: #fff; background-color: #148287; font-size: 0.9vw; font-weight: 400; padding: 1vw; opacity: 0; visibility: hidden; transition: all 0.5s; z-index:99;}

  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer ul { display:block; position:relative; overflow:hidden; width: 100%;  height: auto !important;  }
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer ul li { display: block; position:relative; overflow:hidden; width:100%; font-size:.88vw; line-height: 1vw; padding-bottom:.5vw; margin-bottom:.5vw; border-bottom:1px solid #fff; text-transform: none; font-family:"Roboto", sans-serif; font-weight: 400; cursor:pointer;}
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer ul li:hover { color:#000; }
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer ul li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
  .productos .titulo .filtros .filtrar .seleccionadoMobile { display: inline-block; float: left; color: #fff; font-family: "Roboto", sans-serif; font-weight: 400; text-transform: none; font-size: 1vw; line-height: 1.3vw; background: #148287; padding: .3vw .5vw; cursor:pointer;}
  .productos .titulo .filtros .filtrar .seleccionadoMobile .fa { color:#fff; }

  .productos .titulo .filtros .filtrar .ordenarSelectMobile { padding-left:10px; }
  .productos .titulo .filtros .filtrar .seleccionadoMobile { padding:5px 10px; font-size:17px; line-height: 19px; margin-top:0;}
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer { width:25.7vw; top:29px; padding:10px; }
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer ul li { font-size:17px; line-height: 19px; padding-bottom:5px; margin-bottom:5px; }
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer.visible {display: block; visibility: visible; opacity: 1; }

  .productos .lista li { width:50%; padding:0 10px 10px 10px;; }
  .productos .lista li h3 { font-size:18px; line-height: 20px; }
  .productos .lista li p { font-size:15px; line-height: 17px; margin-top:5px; }
  .productos .lista li .precio { font-size:30px; line-height:32px; margin-top:10px; }
  .productos .lista li .agregar, .productos .lista li .consultar { padding:5px 10px; font-size:14px; width:24.535714vw; height:28px; margin-top:10px; }
  .productos .lista li .imagen { height:42vw; }

  .compras .carritoInterna p { font-size:18px; line-height: 20px; }
  .compras .carritoInterna { padding:10px 0; margin:10px 0; }
  .compras .carritoInterna .fa { font-size:20px; }
  .compras .lista2 li { width:100%; margin-bottom: 20px; }
  .compras .lista2 li .imagen { height:37vw; margin-right:20px;}
  .compras .lista2 li .marco h3 { font-size:25px; line-height: 27px; margin-top:20px; }
  .compras .lista2 li .marco p { font-size:15px; line-height: 17px; margin-top:10px; }
  .compras .lista2 li .marco .marco2, .compras .lista2 li .marco .marco3 { margin-top:10px; }
  .compras .lista2 li .marco .marco2 h5 { font-size:30px; line-height: 32px; }
  .compras .lista2 li .marco .marco3 .fa { font-size:30px; margin-right: 10px; }
  .compras .formComprar button, .formDatos button { padding:5px 10px; font-size:18px; width:30vw; height:5vw; margin-top:20px; }

  .compras .titulo { font-size:32px; }
  .compras .subtitulo { margin:10px 0; padding-bottom:10px; font-size:20px; line-height: 24px; }
  .formDatos ol li { margin-bottom:10px; }
  .formDatos ol li input, .formDatos ol li select, .formDatos ol li textarea { padding:5px 10px; font-size:15px; line-height: 17px; }
  .formDatos ol li textarea { height:50px; }

  .como .titulo { font-size:32px; padding-bottom:30px; margin-bottom:30px;}
  .como .titulo span { font-size:90px; }
  .como .titulo .queCategoria { display:block; text-align: center; }
  .como .izquierda { display:block; float:none; width:100%; margin-bottom:20px; }
  .como .izquierda p { font-size:17px; line-height: 21px; margin:0 0 5px 0; }
  .como .derecha { display:block; float:none; width:100%; }
  .como .derecha h3 { font-size:30px; line-height: 32px; }
  .como .derecha ul li p { font-size:17px; line-height: 20px; }
  .como .derecha ul li p span { font-size:20px; line-height: 23px; margin-bottom:5px; }
  .como .derecha ul li { margin-bottom: 10px; }
  .como .derecha ul li img {display: inline-block; float: left; margin-right: 20px; margin-bottom: 20px; width: 5vw; height: auto; }

  footer { padding:0 40px; height: 18vw;}
  footer h1 { display:none; }
  footer .datos  { margin-left:0; margin-top:8vw; }
  footer .datos p { font-size:14px; line-height: 16px; }
  footer .datos p span { font-size:16px; line-height: 18px; }
  footer .osmosis { font-size:14px; line-height: 16px; margin-top:10vw;}

  .overlay { width:80vw; padding:20px; font-size:15px; line-height: 17px; }
  .pop h2 { font-size:25px; line-height: 27px; }
  .overlay .cerrarContacto, .overlay .cerrarIngresar, .overlay .cerrarRecordar, .overlay .cerrarRegistrate { font-size:30px; }
  .pop li { margin-bottom:10px; }
  .pop input { padding:5px; font-size:17px; line-height: 19px; }
  .pop textarea { height:100px;  padding:5px; font-size:17px; line-height: 19px; }
  .pop button { padding:5px 10px; font-size:20px; line-height: 22px; }
  .overlay .recuperar, .overlay .sinCuenta { font-size:15px; line-height: 18px; }

  .productos .lista li .triangulo2, .productos .lista li .triangulo { border-top: 6vw solid #148287; border-right: 6vw solid #148287; border-bottom: 6vw solid transparent; border-left: 6vw solid transparent; }
  .productos .lista li .triangulo .fa { font-size:25px;     top: -3.6vw; right: -3vw; }
  .productos .lista li .sinstock { top:1vw; width:6vw; font-size:20px; right:0; }

  .productos .info, .compras .info {display: block; position: relative; overflow: hidden; width: 100%; margin: 10px 0; padding: 10px; border: 2px solid #148287; font-size: 15px; line-height: 17px; }
  .formDatos ol li label { font-size:15px; line-height: 17px; }

}
 

@media screen and (max-width: 600px) {
  
  header { height:141px; padding:0 20px; }
  main { padding:40px 20px; }
  footer { padding:0 20px; }
  header ul.menu { margin-top:61px; }
  header .menu li { font-size:15px; }
  header h1 { margin:40px 0 0 40px; }
  header .der { margin:49px 0 0 0; }
  ul.menuMovil { padding:75px 20px 20px 20px; }
  .productos .titulo { font-size:25px; }
  .productos .titulo .filtros .filtrar .ordenarSelectMobile .submenuContainer { width:51.7vw; }
  .productos .lista li { width:100%; }
  .productos .lista li .imagen { height:86vw; }
  .productos .lista li .agregar, .compras .formComprar button, .formDatos button, .productos .lista li .consultar { width:60vw; height:40px;  padding:10px;}
  footer { height:64vw; }
  footer .datos { margin-top:24vw; }
  .como .derecha ul li img { width:10vw; }
  .compras .carritoInterna p strong { display:block; }
  .compras .carritoInterna .fa { display:none; }
  .compras .carritoInterna p { line-height:22px; }
  .compras .lista2 li .imagen { display:none; }
  .compras .lista2 li .marco { width:100%; }
  .productos .lista li .triangulo {border-top: 50px solid #c33f16; border-right: 50px solid #c33f16; border-bottom: 50px solid transparent; border-left: 50px solid transparent;}
  .productos .lista li .triangulo .fa {font-size:20px; top:-30px; right:-30px;}
  .productos .lista li .triangulo2, .productos .lista li .triangulo {border-top: 50px solid #148287; border-right: 50px solid #148287; border-bottom: 50px solid transparent; border-left: 50px solid transparent; }
  .productos .lista li .sinstock {top: 10px; width: 50px; font-size: 20px; right: 0; }
  .formDatos button { width:60vw; height:40px;  }
  footer .datos p { line-height:18px; }
  .productos .titulo .filtros .filtrar { border:0; }
  .whatsappFijo {position: fixed; bottom: 20px; right: 5px; font-size: 20px; z-index: 99; }
}