/*Fonts*/
@import url("https://fonts.googleapis.com/css?family=Barlow|Jomolhari|Oswald&display=swap");
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/fonts/icomoon.eot?fixq24");
  src: url("../fonts/fonts/icomoon.eot?fixq24#iefix") format("embedded-opentype"), url("../fonts/fonts/icomoon.ttf?fixq24") format("truetype"), url("../fonts/fonts/icomoon.woff?fixq24") format("woff"), url("../fonts/fonts/icomoon.svg?fixq24#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*Colors*/
/*para banners*/
/*Estructura General*/
.clearfix:after {
  content: ".";
  display: block;
  font-size: 0;
  line-height: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

*, *:after, *:before {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  color: #000000;
}

body {
  font-family: "Barlow", sans-serif;
  font-size: 1em;
}

body main {
  padding: 0;
}

body section {
  width: 95%;
  max-width: 1200px;
  margin: 0;
}

body img {
  width: 100%;
  line-height: 0;
}

body p, body label {
  width: 100%;
  text-align: left;
  padding-bottom: 1em;
}

body a {
  color: #000000;
  text-decoration: none;
  border: none;
  outline: none;
}

body a:hover {
  color: #A0A843;
}

body ul, body ol {
  list-style: none;
}

body h1 {
  float: left;
  color: #000000;
  line-height: 1em;
  font-family: "Jomolhari", serif;
  font-size: 5em;
  font-weight: bold;
}

body h2 {
  font-family: "Barlow", sans-serif;
  font-size: 3em;
  font-weight: lighter;
}

body h3 {
  float: left;
  color: #000000;
  font-family: "Jomolhari", serif;
  font-size: 2em;
  font-weight: bold;
}

body h4 {
  font-family: "Barlow", sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  text-transform: uppercase;
}

body .fancybox-navigation {
  position: absolute;
  height: 100%;
}

@media only screen and (max-width: 500px) {
  body p, body label {
    font-size: 0.9em;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////// Flexbox ///////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*Flexible*/
body main, body main article, body section, header, header section, header .logo a, header nav, header nav a, header nav ul, header nav ul li ul, header .mobile, footer, footer section .finger:nth-child(2), .bnrtzen, .bnrtzen .bnrainbowtext, .bnrtzen .bnrcont, .bnrtzen .bnrsoap, .introduction .intro, .description, .description .descgallery, .description .descgallery .image-list, .description .descgallery .image-list li, .description .desctext, .description .desctext .garantee, .description .desctext .garanes, .description .desctext .garantee .garanizo, .description .desctext .tabler label, .description .desctext .tabler .ingredients ul, .contactar .contactintro, .contactar .contactform, #contact, #contact .wannamore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.catalogue, .description .desctext .tabler .ingredients ul, .description .desctext .tabler .howto {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/*Direction*/
body main, body main article, header nav ul li ul, .bnrtzen, .introduction .intro:first-child, .description .descgallery, .description .desctext, .description .desctext .tabler, .privacy, .contactar section, .contactar .contactintro, .contactar .contactform, #contact {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.introduction, .description .desctext .tabler .howto, .description .desctext .tabler .warning, .description .desctext .tabler .available {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.bnrtzen .bnrcont {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/*Justify items*/
body main {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

header, header nav a, footer, .description .descgallery .image-list li, .description .desctext .garantee .garanizo, .description .desctext .tabler .warning {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header section, header nav, header nav ul, footer section, footer section .finger:nth-child(2), .bnrtzen .bnrsoap, .bnrtzen .bnrcont, .introduction, .description, .description .desctext .tabler label {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.introduction .intro:last-child, .catalogue, .description .descgallery .image-list, .description .desctext .tabler .ingredients ul, .description .desctext .tabler .howto, .description .desctext .tabler .available {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-around;
}

header nav ul li ul li a, .bnrtzen .bnrainbowtext, #contact .wannamore {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

header .mobile {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/*Align items*/
body main, body main article, header, header section, header .logo a, header nav, .bnrtzen, .bnrtzen .bnrainbowtext, .bnrtzen .bnrsoap, .bnrtzen .bnrcont, .introduction, .description .descgallery, .description .desctext, .description .desctext .garantee, .description .desctext .garanes, .description .desctext .garantee .garanizo, .description .desctext .tabler .ingredients ul, .description .desctext .tabler .warning, #contact {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

footer section .finger:nth-child(2), .introduction .intro:last-child, .description, .contactar .contactintro {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.contactar .contactform {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////// Animaciones /////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*Animacion general*/
body a, header .logo, header nav a, header nav ul li:hover ul, header nav ul li ul, .bnrtzen .bnrcont .apple, .bnrtzen .bnrcont .lavender, .bnrtzen .bnrcont .orange, .introduction .intro .freeof img, .catalogue .item img, .description .descgallery .image-list li, .description .descgallery .image-list img, .description .desctext .tabler input:checked ~ article, .description .desctext .tabler label i, .description .desctext .tabler article, .description .desctext .tabler .howto .step img, .description .desctext .tabler .available p, .contactar .contactform .btnprincipal {
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
}

/*Desde la izquierda*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

/*Pulsos*/
@-webkit-keyframes pulse {
  from, to {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
  }
}
@keyframes pulse {
  from, to {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
  }
}

#navbar {
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}

header {
  width: 100%;
  background: #ffffff;
  padding: 0;
  top: 0;
  z-index: 2000;
  transition: 0.3s all;
  -webkit-transition: 0.3s all;
}

header section {
  width: 95%;
  max-width: 1200px;
}

header .logo {
  width: 45%;
  max-width: 200px;
  padding-top: 2em;
  padding-bottom: 2em;
  opacity: 1;
  z-index: 2020;
  pointer-events: all;
}

header .logo:hover {
  opacity: 0.8;
}

header .logo a {
  height: 100%;
  color: #000000;
}

header nav {
  pointer-events: all;
  max-width: 500px;
}

header nav .active:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  height: 1px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

header nav a {
  padding-top: 1em;
  padding-bottom: 1em;
}

header nav ul li {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

header nav ul li:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  height: 1px;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

header nav ul li:hover:before, header nav ul li:focus:before, header nav ul li .hvr-underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  background: #000000;
}

header nav ul li:hover ul {
  background: rgba(255, 255, 255, 0.8);
  opacity: 1;
  max-height: 1000px;
}

header nav ul li ul {
  position: absolute;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: .9em;
}

header nav ul li ul li {
  width: 100%;
}

header nav ul li ul li:before {
  display: none;
}

header nav ul li ul li a {
  padding-left: 1em;
}

header .mobile {
  width: 100%;
  display: none;
  font-size: 2em;
  color: #000000;
  pointer-events: all;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

header .active {
  max-height: 9000px !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

@media only screen and (max-width: 800px) {
  header section {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  header nav {
    max-width: none;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  header nav a {
    width: 80%;
    padding-left: 1em;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  header nav a:hover {
    border-left: 5px solid #A0A843;
  }
  header nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  header nav ul li:before {
    display: none;
  }
  header nav ul li ul {
    max-height: 0;
    opacity: 1;
    position: relative;
    overflow: hidden;
    transition: 0.2s all;
    -webkit-transition: 0.2s all;
    background: rgba(0, 0, 0, 0.1);
  }
  header nav ul li:hover ul {
    max-height: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  header .logo {
    position: absolute;
    padding-left: 1em;
  }
  header .mobile {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  header .arrow {
    display: block;
    float: right;
    height: 1em;
    width: 1em;
    position: absolute;
    right: 1em;
    top: 0.8em;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  header .arrow:before {
    font-family: 'icomoon';
    font-size: 1em;
    width: auto;
    content: '\f078';
  }
  header .arrow:hover {
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  header .rotate {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}

footer {
  padding: 2em 0;
  font-size: 0.8em;
  background: #ffffff;
  -webkit-box-shadow: 0 0 5px #000000;
          box-shadow: 0 0 5px #000000;
}

footer section h3 {
  color: #000000;
  padding-top: 0;
  font-size: 1.5em;
}

footer section .finger {
  width: 48%;
}

footer section .finger:nth-child(1) p {
  text-align: left;
}

footer section .finger:nth-child(1) p span {
  font-size: 1.2em;
  padding-left: 0.2em;
}

footer section .finger p {
  text-align: right;
}

footer section .finger .smile {
  font-size: 1.5em;
  padding-bottom: 0.5em;
}

footer section .finger .nail {
  width: 40%;
  text-align: right;
}

@media only screen and (max-width: 800px) {
  footer section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  footer section .finger {
    width: 100%;
  }
  footer section .finger:nth-child(2) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  footer section .finger p, footer section .finger h3 {
    text-align: left;
  }
  footer section .finger .nail {
    width: 100%;
    text-align: left;
    padding: 0.5em 0;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari and Chrome */
  ::i-block-chrome header, body header {
    float: left;
    position: relative;
    top: 0;
  }
  ::i-block-chrome header nav, body header nav {
    width: 55%;
  }
  ::i-block-chrome .bghojas section, body .bghojas section {
    display: block;
  }
  ::i-block-chrome .bghojas section div, body .bghojas section div {
    float: left;
  }
  ::i-block-chrome .catalogo, body .catalogo {
    display: block;
  }
  ::i-block-chrome .catalogo .catter, body .catalogo .catter {
    float: left;
  }
}

.bnrhome {
  background: url("../images/banner/home/water.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

.bnrmanos {
  background: url("../images/banner/manos.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 650px) {
  .bnrmanos {
    font-size: 0.8em;
  }
}

.bnrwash {
  background: url("../images/banner/handwash.png") no-repeat;
  background-size: 50%;
  background-position: top right;
}

.bnrtzen {
  overflow: hidden;
}

.bnrtzen .bnrwhite {
  height: 3em;
  background: white;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, rgba(237, 237, 237, 0)));
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(237, 237, 237, 0)));
  background: linear-gradient(to bottom, white 0%, rgba(237, 237, 237, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}

.bnrtzen .bnrshaolin, .bnrtzen .bnrshaoblack {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.bnrtzen .bnrshaoblack {
  -webkit-box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.2);
}

.bnrtzen .bnrainbow {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: multifondo 5s infinite;
  -webkit-animation: multifondo 5s infinite;
  -ms-animation: multifondo 5s infinite;
  -o-animation: multifondo 5s infinite;
}

@-webkit-keyframes multifondo {
  0% {
    background: rgba(99, 237, 40, 0.3);
  }
  25% {
    background: rgba(154, 74, 212, 0.3);
  }
  75% {
    background: rgba(47, 213, 224, 0.3);
  }
  100% {
    background: rgba(219, 209, 59, 0.3);
  }
}

.bnrtzen .bnrainbowtext, .bnrtzen .bnrcont, .bnrtzen .bnrsoap {
  width: 90%;
  max-width: 1200px;
  height: 25em;
}

.bnrtzen .bnrainbowtext h1, .bnrtzen .bnrainbowtext h2, .bnrtzen .bnrcont h1, .bnrtzen .bnrcont h2, .bnrtzen .bnrsoap h1, .bnrtzen .bnrsoap h2 {
  color: #ffffff;
}

.bnrtzen .bnrsoap {
  height: auto;
}

.bnrtzen .bnrsoap h1, .bnrtzen .bnrsoap h2 {
  color: #000000;
}

.bnrtzen .bnrsoap .bnrimg {
  padding-top: 1em;
  padding-bottom: 1em;
}

.bnrtzen .bnrsoap .bnrtext {
  padding-left: 2em;
}

.bnrtzen .bnrcont:hover .apple {
  top: -2em;
  left: -2em;
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}

.bnrtzen .bnrcont:hover .lavender {
  top: -2em;
  left: 2em;
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

.bnrtzen .bnrcont:hover .orange {
  top: -2em;
}

.bnrtzen .bnrcont .bnrimg {
  width: 45%;
  min-width: 350px;
  height: 100%;
}

.bnrtzen .bnrcont .bnrimg img {
  position: absolute;
  top: 0;
  left: 0;
}

.bnrtzen .bnrcont .bnrtext {
  width: 55%;
}

@media only screen and (max-width: 950px) {
  .bnrtzen .bnrcont {
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 800px) {
  .bnrtzen .bnrcont {
    font-size: 0.8em;
  }
}

@media only screen and (max-width: 700px) {
  .bnrtzen .bnrsoap {
    font-size: 0.9em;
    padding-top: 5em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .bnrtzen .bnrsoap .bnrtext {
    position: absolute;
    top: 2em;
    left: 0;
    z-index: 2;
    font-size: 0.9em;
  }
  .bnrtzen .bnrsoap .bnrimg {
    padding-top: 2em;
  }
  .bnrtzen .bnrcont {
    font-size: 0.7em;
    height: 30em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .bnrtzen .bnrcont .bnrimg {
    min-width: inherit;
    width: 70%;
  }
  .bnrtzen .bnrcont .bnrtext {
    width: 100%;
  }
  .bnrtzen .bnrcont .bnrtext h1, .bnrtzen .bnrcont .bnrtext h2 {
    text-align: right;
  }
}

@media only screen and (max-width: 500px) {
  .bnrtzen .bnrcont {
    height: 25em;
  }
  .bnrtzen .bnrsoap {
    font-size: 0.8em;
  }
}

@media only screen and (max-width: 350px) {
  .bnrtzen .bnrcont {
    font-size: 0.6em;
  }
  .bnrtzen .bnrcont .bnrimg {
    width: 85%;
  }
  .bnrtzen .bnrsoap {
    font-size: 0.7em;
  }
}

.introduction {
  padding: 3em 0;
}

.introduction .intro {
  width: 48%;
}

.introduction .intro .freeof {
  width: 18%;
  color: #A0A843;
}

.introduction .intro .freeof:hover img {
  transform: scale(1);
  -webkit-transform: scale(1);
}

.introduction .intro .freeof p {
  text-align: center;
}

.introduction .intro .freeof img {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

.whitespace {
  height: 10em;
}

.catalogue .item {
  width: 26%;
  max-width: 200px;
  padding: 1em 0;
}

.catalogue .item img {
  transform: scale(0.92);
  -webkit-transform: scale(0.92);
}

.catalogue .item img:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
}

.catalogue .item p {
  text-align: center;
}

.description {
  padding-top: 2em;
  padding-bottom: 2em;
}

.description .descgallery {
  width: 30%;
}

.description .descgallery .product-image {
  display: block;
  width: 80%;
}

.description .descgallery .product-image img .active {
  display: block;
}

.description .descgallery .image-list {
  width: 80%;
  overflow: hidden;
}

.description .descgallery .image-list li {
  width: 45%;
  max-width: 100px;
  border-radius: 10px;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
}

.description .descgallery .image-list li:hover {
  background: rgba(160, 168, 67, 0.3);
}

.description .descgallery .image-list img {
  width: 60%;
  cursor: pointer;
}

.description .desctext {
  width: 60%;
}

.description .desctext .pear {
  color: #2b8c29;
}

.description .desctext .fresh {
  color: #2a518c;
}

.description .desctext .garantee, .description .desctext .garanes {
  padding-top: 1em;
  padding-bottom: 1em;
}

.description .desctext .garantee i, .description .desctext .garanes i {
  width: auto;
}

.description .desctext .garantee p, .description .desctext .garanes p {
  padding-bottom: 0;
  padding-left: 0.5em;
}

.description .desctext .garantee .garanizo {
  color: #ffffff;
  width: 2em;
  height: 2em;
}

.description .desctext .garantee .garanizo:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'icomoon';
  font-size: 2em;
  width: auto;
  content: '\f0a3';
  color: #387AB8;
}

.description .desctext .garantee .garanizo i {
  font-size: 0.8em;
}

.description .desctext .garanes i {
  font-size: 1.5em;
  color: rgba(255, 0, 0, 0.6);
}

.description .desctext .tabler input {
  display: none;
}

.description .desctext .tabler input:checked + label,
.description .desctext .tabler input:checked + label:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.description .desctext .tabler input:checked + label i,
.description .desctext .tabler input:checked + label:hover i {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.description .desctext .tabler input:checked ~ article {
  padding: 1em;
}

.description .desctext .tabler input:checked ~ .ingredients {
  height: 300px;
}

.description .desctext .tabler input:checked ~ .howto {
  height: 250px;
}

.description .desctext .tabler input:checked ~ .warning {
  height: 250px;
}

.description .desctext .tabler input:checked ~ .sheets {
  height: 60px;
}

.description .desctext .tabler input:checked ~ .available {
  height: 60px;
}

.description .desctext .tabler label {
  padding: 1em;
  z-index: 20;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
}

.description .desctext .tabler label:hover {
  background: rgba(0, 0, 0, 0.2);
}

.description .desctext .tabler label i {
  width: auto;
  position: absolute;
  top: 1em;
  right: 1em;
}

.description .desctext .tabler label p {
  padding-bottom: 0;
}

.description .desctext .tabler article {
  height: 0;
  z-index: 10;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.description .desctext .tabler .ingredients ul li {
  width: 45%;
  padding-bottom: 1em;
}

.description .desctext .tabler .ingredients ul li:before {
  font-family: 'icomoon';
  content: '\f043';
  font-size: 0.7em;
  margin-right: 0.5em;
  color: #387AB8;
}

.description .desctext .tabler .ingredients ul li:hover:before {
  color: #ffa600;
}

.description .desctext .tabler .howto {
  max-width: 100%;
}

.description .desctext .tabler .howto .step {
  width: 30%;
  max-width: 150px;
}

.description .desctext .tabler .howto .step:hover img {
  transform: scale(1);
  -webkit-transform: scale(1);
}

.description .desctext .tabler .howto .step p {
  text-align: center;
}

.description .desctext .tabler .howto .step img {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

.description .desctext .tabler .warning .warm {
  width: auto;
}

.description .desctext .tabler .warning .warm li {
  padding-bottom: 0.5em;
}

.description .desctext .tabler .warning .warm li:before {
  font-family: 'icomoon';
  content: '\f0da';
  font-size: 0.6em;
  margin-right: 0.5em;
  color: #2a518c;
}

.description .desctext .tabler .warning .warm li:hover:before {
  color: #387AB8;
}

.description .desctext .tabler .sheets i {
  color: #ff0000;
  font-size: 1.5em;
  padding-right: 0.5em;
}

.description .desctext .tabler .available p {
  width: 30%;
  font-weight: bold;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  border-radius: 5px;
}

.description .desctext .tabler .available p:hover {
  background: rgba(56, 122, 184, 0.6);
}

.related {
  padding-top: 3em;
  background: rgba(160, 168, 67, 0.05);
}

.related h4 {
  width: 95%;
  max-width: 1200px;
  text-align: center;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.related .catalogue .item {
  width: 20%;
}

.privacy h1 {
  font-size: 3em;
  padding-bottom: 1em;
  padding-top: 2em;
  text-align: center;
}

@media only screen and (max-width: 900px) {
  .introduction .intro:first-child {
    width: 39%;
  }
  .introduction .intro:last-child {
    width: 59%;
  }
  .description .desctext .tabler article {
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 800px) {
  .description {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .description .desctext {
    width: 100%;
    padding-top: 2em;
    padding-bottom: 4em;
  }
  .description .descgallery {
    width: 100%;
    max-width: 400px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .description .descgallery .product-image {
    width: 70%;
  }
  .description .descgallery .image-list {
    width: 30%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .description .descgallery .image-list li {
    width: 100%;
    max-width: none;
  }
}

@media only screen and (max-width: 700px) {
  .introduction {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .introduction .intro:first-child {
    width: 100%;
  }
  .introduction .intro:last-child {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .catalogue .item {
    width: 45%;
  }
  .description .desctext .tabler input:checked ~ .ingredients {
    height: 450px;
  }
  .description .desctext .tabler input:checked ~ .howto {
    height: 400px;
  }
  .description .desctext .tabler article {
    font-size: 0.8em;
  }
  .description .desctext .tabler .ingredients ul li {
    width: 100%;
  }
  .description .desctext .tabler .howto .step {
    width: 40%;
  }
  .description .desctext .tabler .howto .step:nth-child(3) {
    width: 60%;
  }
  .related .catalogue .item {
    width: 45%;
  }
}

@media only screen and (max-width: 400px) {
  .introduction .intro:last-child {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .introduction .intro .freeof {
    width: 40%;
  }
  .description .desctext .tabler .warning {
    font-size: 0.7em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .description .desctext .tabler .warning i {
    font-size: 4em;
    padding-right: 0;
    padding-bottom: 0.3em;
    padding-bottom: 0.3em;
  }
}

.contactar {
  padding: 5em 0;
}

.contactar .contactintro h4 {
  max-width: 500px;
  padding: 1em 0;
}

.contactar .contactform {
  padding-top: 4em;
  padding-bottom: 4em;
}

.contactar .contactform h1, .contactar .contactform h2 {
  width: 45%;
}

.contactar .contactform #contact, .contactar .contactform p {
  width: 45%;
}

.contactar .contactform p span {
  font-size: 0.8em;
}

.contactar .contactform .justconfirm {
  width: 45%;
}

.contactar .contactform .justconfirm h1 {
  padding-bottom: 1em;
  line-height: 1.2em;
}

.contactar .contactform .btnprincipal {
  width: auto;
  padding: 0.5em 1em;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
}

.contactar .contactform .btnprincipal:hover {
  background: rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 650px) {
  .contactar .contactintro h4 {
    padding: 0.5em 0;
    font-size: 1.5em;
  }
  .contactar .contactform {
    font-size: 0.9em;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .contactar .contactform h1, .contactar .contactform h2 {
    width: 100%;
  }
  .contactar .contactform #contact, .contactar .contactform p {
    width: 100%;
  }
  .contactar .contactform .justconfirm {
    width: 100%;
  }
}

#contact {
  padding: 1em 0;
  font-family: "Barlow", sans-serif;
}

#contact fieldset {
  border: #000000 !important;
  margin-bottom: 1em;
}

#contact textarea {
  height: 100px;
  width: 100%;
  resize: none;
}

#contact .wannamore {
  padding-left: 2%;
  padding-bottom: 1em;
}

#contact .wannamore input {
  width: auto;
  padding-right: 0.5em;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: #8a8a8a;
  font-family: "Barlow", sans-serif;
  border: none;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
  background: rgba(0, 0, 0, 0.2);
}

#contact button[type="submit"] {
  cursor: pointer;
  width: auto;
  border: none;
  background: #000000;
  color: #ffffff;
  border-radius: 10px;
  padding: 0.5em 1em;
  font-size: 1em;
  text-align: center;
  transition: 0.2s all;
  -webkit-transition: 0.2s all;
}

#contact button[type="submit"]:hover {
  opacity: 0.8;
  -webkit-transition: background 0.3s ease-in-out;
  -webkit-transition: hover-color 0.3s ease-in-out;
  transition: hover-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  -webkit-box-shadow: inset 0 1px 3px #000000;
          box-shadow: inset 0 1px 3px #000000;
}

#contact input:focus, #contact textarea:focus {
  outline: 0;
}

::-webkit-input-placeholder {
  color: #000000;
}

:-moz-placeholder {
  color: #000000;
}

::-moz-placeholder {
  color: #000000;
}

:-ms-input-placeholder {
  color: #000000;
}
/*# sourceMappingURL=style.css.map */