/*Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Dancing+Script:wght@400;700&family=Roboto:wght@400;700&display=swap");
/*Colors*/
/*Flavors*/
/*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;
  text-rendering: optimizeLegibility; }

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

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  color: #000000;
  background: #ffffff; }
  @media only screen and (max-width: 600px) {
    body {
      font-size: 0.9em; } }
  body main {
    min-height: 100%; }
  body article {
    width: 95%;
    max-width: 1200px;
    background: #ffffff; }
    body article section {
      margin: 0; }
  body img {
    width: 100%;
    line-height: 0; }
  body p {
    width: 100%;
    text-align: left;
    padding-bottom: 1em; }
  body a {
    text-decoration: none;
    border: none;
    outline: none;
    color: #000000; }
    body a:hover {
      color: #7d7d7d; }
  body ul, body ol {
    list-style: none; }
  body h1 {
    width: auto;
    text-transform: uppercase;
    font-family: "Cormorant Garamond", serif;
    font-size: 2em;
    padding-bottom: 0.2em; }
  body h2 {
    width: auto;
    font-family: "Dancing Script", cursive;
    font-size: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 1em; }
  body h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5em;
    padding-bottom: 0.2em;
    width: auto;
    text-transform: uppercase; }
  body .fancybox-navigation {
    position: absolute;
    height: 100%; }
  body .justaline {
    height: 2px;
    background: rgba(226, 226, 226, 0);
    background: -moz-linear-gradient(left, rgba(226, 226, 226, 0) 0%, #e0e0e0 11%, #dbdbdb 50%, #d1d1d1 51%, whitesmoke 90%, rgba(254, 254, 254, 0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(226, 226, 226, 0)), color-stop(11%, #e0e0e0), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(90%, whitesmoke), color-stop(100%, rgba(254, 254, 254, 0)));
    background: -webkit-linear-gradient(left, rgba(226, 226, 226, 0) 0%, #e0e0e0 11%, #dbdbdb 50%, #d1d1d1 51%, whitesmoke 90%, rgba(254, 254, 254, 0) 100%);
    background: -o-linear-gradient(left, rgba(226, 226, 226, 0) 0%, #e0e0e0 11%, #dbdbdb 50%, #d1d1d1 51%, whitesmoke 90%, rgba(254, 254, 254, 0) 100%);
    background: -ms-linear-gradient(left, rgba(226, 226, 226, 0) 0%, #e0e0e0 11%, #dbdbdb 50%, #d1d1d1 51%, whitesmoke 90%, rgba(254, 254, 254, 0) 100%);
    background: linear-gradient(to right, rgba(226, 226, 226, 0) 0%, #e0e0e0 11%, #dbdbdb 50%, #d1d1d1 51%, whitesmoke 90%, rgba(254, 254, 254, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 ); }
  body .fortheline {
    padding-top: 5em; }
  body .btnmore {
    width: auto;
    padding: 0.5em 1em;
    color: #ffffff;
    text-align: center;
    background: #000000;
    border-radius: 10px; }

body main, body article, body article section, header, header section, header .logo, header nav, header nav a, header nav ul, header nav ul li ul, .slidebanner, .slidebanner .slider .slidex, .slidebanner .slider .slidex .slidecontent, .slidebanner .slider .slidex .slidecontent .slidelabel, footer, footer .fingers, .h-title, .h-title .h-intitle, .h-freeof div, .h-intro, .h-oil .oiltb, .h-oil .oilbg, .h-oil .oilbg .oil-text, .h-flavors, .h-flavors .flavor, .h-flavors .flavor h1, .privacy .msds li a, .catalogo .c-banner, .catalogo .c-cat .c-item, .catalogo .c-cat .c-item .c-hover, .catalogo .storyline .story, .catalogo .storyline .story .storydot, .catalogo .storyline .story1, .catalogo .storyline .story2, .catalogo .storyline .story1 .storydot, .catalogo .storyline .story2 .storydot, .searcher, #contact .fieldaboton {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

.h-freeof, .h-flavors, .catalogo .c-cat {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

/*Direction*/
body main, header nav, header nav ul li ul, .slidebanner .slider .slidex .slidecontent .slidelabel, footer, footer article, .h-title, .h-title .h-intitle, .h-freeof div, .h-intro, .h-oil .oiltb, .h-oil .oilbg .oil-text, .privacy, .catalogo .c-cat .c-item, .catalogo .c-cat .c-item .c-hover, .catalogo .storyline, .searcher, #contactoures section {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }

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

header, header .logo, header nav, header nav a, .slidebanner, .slidebanner .slider .slidex, .slidebanner .slider .slidex .slidecontent .slidelabel, footer, footer article, footer .fingers, .h-title, .h-title .h-intitle, .h-freeof, .h-freeof div, .h-intro, .h-oil .oiltb, .h-oil .oilbg, .h-oil .oilbg .oil-text, .h-flavors .flavor h1, .catalogo .c-banner, .catalogo .c-cat .c-item, .catalogo .c-cat .c-item .c-hover, .catalogo .storyline, .catalogo .storyline .story, .catalogo .storyline .story .storydot, .catalogo .storyline .story1, .catalogo .storyline .story2, .catalogo .storyline .story1 .storydot, .catalogo .storyline .story2 .storydot, #contact .fieldaboton {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center; }

header section, header nav ul {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.h-flavors, .catalogo .c-cat {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: space-around;
  justify-content: space-around; }

.slidebanner .slider .slidex .slidecontent, .h-flavors .flavor:nth-child(3), .h-flavors .flavor:nth-child(5), .privacy .msds li a {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start; }

.h-flavors .flavor {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end; }

/*Align items*/
body main, header, header section, header .logo, header nav, .slidebanner, .slidebanner .slider .slidex, footer, footer article, footer .fingers, .h-title, .h-title .h-intitle, .h-freeof div, .h-intro, .h-oil .oiltb, .h-oil .oilbg, .h-oil .oilbg .oil-text, .h-flavors, .h-flavors .flavor, .h-flavors .flavor h1, .privacy .msds li a, .catalogo .c-banner, .catalogo .c-cat .c-item, .catalogo .storyline, .catalogo .storyline .story, .catalogo .storyline .story .storydot, .catalogo .storyline .story1, .catalogo .storyline .story2, .catalogo .storyline .story1 .storydot, .catalogo .storyline .story2 .storydot, .searcher, #contact .fieldaboton {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }

.slidebanner .slider .slidex .slidecontent .slidelabel, .catalogo .c-cat, .catalogo .c-cat .c-item .c-hover {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start; }

.slidebanner .slider .slidex .slidecontent {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end; }

body a, header .logo, header nav a, header nav ul li:hover ul, header nav ul li ul, .slidebanner .slider .slidex .slidecontent .slidelabel .btnmore, .h-freeof div, .privacy .msds li a .icon-droplet, .catalogo .c-cat .c-item .c-hover, .catalogo .c-cat .c-item .c-hover a, .catalogo .storyline .story, .catalogo .storyline .story1, .catalogo .storyline .story2 {
  transition: 0.2s all;
  -webkit-transition: 0.2s all; }

@keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-moz-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; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari and Chrome */ }
#navbar {
  transition: top 0.5s; }

header {
  width: 100%;
  padding: 0;
  z-index: 2000;
  transition: 0.3s all;
  -webkit-transition: 0.3s all; }
  header section {
    width: 95%;
    max-width: 1200px; }
    @media only screen and (max-width: 800px) {
      header section {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column; } }
  header .logo {
    width: auto;
    opacity: 1;
    font-size: 3em;
    z-index: 2020;
    pointer-events: all; }
    header .logo:hover {
      opacity: 0.8; }
    @media only screen and (max-width: 800px) {
      header .logo {
        font-size: 3em;
        position: absolute;
        top: 0;
        left: 1em; } }
  header nav {
    pointer-events: all;
    max-width: 500px;
    height: 100%; }
    @media only screen and (max-width: 800px) {
      header nav {
        max-width: none;
        max-height: 0;
        overflow: hidden;
        transition: 0.2s all;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column; } }
    header nav a {
      padding-top: 1em;
      padding-bottom: 1em;
      height: 100%;
      text-align: center;
      font-family: "Cormorant Garamond", serif;
      font-weight: bold;
      font-size: 1.1em; }
    @media only screen and (max-width: 800px) {
      header nav ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column; } }
    header nav ul li:hover ul {
      opacity: 1;
      max-height: 1000px; }
      @media only screen and (max-width: 800px) {
        header nav ul li:hover ul {
          max-height: 0; } }
    header nav ul li ul {
      position: absolute;
      max-height: 0;
      opacity: 0;
      overflow: hidden; }
      @media only screen and (max-width: 800px) {
        header nav ul li ul {
          max-height: 0;
          opacity: 1;
          position: relative;
          overflow: hidden;
          transition: 0.2s all;
          -webkit-transition: 0.2s all; } }
      header nav ul li ul li {
        width: 100%;
        border-bottom: 1px solid #ffffff; }
        header nav ul li ul li a {
          color: #ffffff;
          background: rgba(0, 0, 0, 0.6); }
          header nav ul li ul li a:hover {
            color: #ffffff;
            background: black; }
  header .mobile {
    width: 100%;
    display: none;
    font-size: 2em;
    padding: 0.5em;
    color: #7d7d7d;
    pointer-events: all; }
    @media only screen and (max-width: 800px) {
      header .mobile {
        padding-right: 1em;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        display: -webkit-box;
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end; } }
  header .active {
    max-height: 9000px !important;
    transition: all 1s ease; }
  @media only screen and (max-width: 800px) {
    header .arrow {
      display: block;
      background: url("../fonts/expand_more.svg") no-repeat;
      background-position: center;
      float: right;
      height: 2em;
      width: 2em;
      position: absolute;
      right: 1em;
      top: 0.8em;
      transition: all 0.3s ease; }
      header .arrow:hover {
        cursor: pointer; }
    header .rotate {
      transition: all 0.3s ease;
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      transform: rotate(-180deg); } }

.slidebanner {
  width: 100%;
  max-width: none;
  overflow: hidden;
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */ }
  .slidebanner .slick-list {
    height: 100%; }
  .slidebanner .slider {
    float: left; }
    .slidebanner .slider .slidex {
      height: 600px; }
      @media only screen and (max-width: 600px) {
        .slidebanner .slider .slidex {
          height: 400px; } }
      .slidebanner .slider .slidex .slidecontent {
        max-width: 1200px;
        height: 100%; }
        @media only screen and (max-width: 600px) {
          .slidebanner .slider .slidex .slidecontent {
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center; } }
        .slidebanner .slider .slidex .slidecontent picture {
          width: 95%;
          max-width: 650px;
          min-width: 400px; }
        .slidebanner .slider .slidex .slidecontent .slidelabel {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 60%; }
          @media only screen and (max-width: 600px) {
            .slidebanner .slider .slidex .slidecontent .slidelabel {
              width: 45%;
              height: 60%; } }
          .slidebanner .slider .slidex .slidecontent .slidelabel p {
            padding-top: 0.5em;
            padding-bottom: 0.5em; }
          .slidebanner .slider .slidex .slidecontent .slidelabel .btnmore {
            font-family: "Cormorant Garamond", serif;
            border-radius: 10px; }
            .slidebanner .slider .slidex .slidecontent .slidelabel .btnmore:hover {
              opacity: 0.8; }
    .slidebanner .slider .slide1 {
      background: url("../images/banner/pink-l.jpg") no-repeat;
      background-position: center;
      background-size: cover; }
      @media only screen and (max-width: 900px) {
        .slidebanner .slider .slide1 {
          background: url("../images/banner/pink-m.jpg") no-repeat;
          background-position: center;
          background-size: cover; } }
      @media only screen and (max-width: 600px) {
        .slidebanner .slider .slide1 {
          background: url("../images/banner/pink-s.jpg") no-repeat;
          background-position: center;
          background-size: cover; } }
    .slidebanner .slider .slide2 {
      background: url("../images/banner/green-l.jpg") no-repeat;
      background-position: center;
      background-size: cover; }
      @media only screen and (max-width: 900px) {
        .slidebanner .slider .slide2 {
          background: url("../images/banner/green-m.jpg") no-repeat;
          background-position: center;
          background-size: cover; } }
      @media only screen and (max-width: 600px) {
        .slidebanner .slider .slide2 {
          background: url("../images/banner/green-s.jpg") no-repeat;
          background-position: center;
          background-size: cover; } }
  .slidebanner .slick-slide {
    height: auto; }

.paginator-center {
  position: absolute;
  left: 0;
  top: 50%;
  pointer-events: none; }
  .paginator-center ul {
    padding: 0 1em;
    pointer-events: none; }
    .paginator-center ul li {
      width: auto;
      display: block;
      float: left;
      font-size: 2.5em;
      color: #000000;
      pointer-events: all;
      opacity: 0.5;
      transition: 0.5s all;
      -webkit-transition: 0.5s all; }
      .paginator-center ul li:hover {
        opacity: 1; }
    .paginator-center ul .next {
      float: right;
      text-align: right; }

.slick-dots {
  bottom: 0px;
  margin-left: 0;
  position: absolute;
  left: 50%;
  bottom: 1em;
  z-index: 1000;
  list-style: none;
  width: auto;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  opacity: 0.2;
  transition: 0.5s all;
  -webkit-transition: 0.5s all; }
  .slick-dots:hover {
    opacity: 1; }
  @media only screen and (max-width: 800px) {
    .slick-dots {
      left: 45%; } }
  @media only screen and (max-width: 600px) {
    .slick-dots {
      left: 40%; } }
  @media only screen and (max-width: 400px) {
    .slick-dots {
      left: 30%; } }
  .slick-dots li {
    width: auto;
    float: left;
    padding: 0.5em; }
  .slick-dots button {
    display: block;
    width: 0.8em;
    height: 0.8em;
    padding: 0;
    border: none;
    border-radius: 100%;
    background-color: #7d7d7d;
    text-indent: -9999px; }
  .slick-dots li.slick-active button {
    background-color: rgba(125, 125, 125, 0.6); }

footer {
  background: #7d7d7d;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif; }
  @media only screen and (max-width: 600px) {
    footer {
      font-size: 0.7em;
      padding: 2em 1em; } }
  footer a {
    color: #ffffff; }
    footer a:hover {
      color: #5fa7c9; }
  footer article {
    padding: 2em;
    background: none; }
    footer article p, footer article i {
      width: auto; }
    footer article p {
      padding-bottom: 0; }
    footer article .icon-e-smile-makers {
      font-size: 2em;
      padding-bottom: 0.5em; }
  footer .fingers {
    padding-top: 1em;
    padding-bottom: 1em;
    background: rgba(0, 0, 0, 0.6); }
    footer .fingers p {
      width: auto;
      padding: 0 0.5em;
      border-right: 1px solid #ffffff; }
      footer .fingers p:last-child {
        border-right: none; }

/*Contenido*/
.h-title .h-intitle {
  width: auto; }
  .h-title .h-intitle h1 {
    width: auto;
    padding-left: 1em;
    padding-right: 1em; }

.h-freeof {
  padding-top: 5em; }
  .h-freeof div {
    width: 15%;
    padding: 1em;
    border-radius: 10px;
    color: #7d7d7d; }
    @media only screen and (max-width: 800px) {
      .h-freeof div {
        width: 40%; } }
    .h-freeof div:hover {
      background: #7d7d7d;
      color: #ffffff; }
    .h-freeof div p {
      text-align: center; }
    .h-freeof div i {
      width: auto;
      font-size: 4em;
      padding-bottom: 0.2em; }

.h-intro {
  padding-top: 5em;
  padding-bottom: 8em; }
  .h-intro p {
    color: #7d7d7d;
    padding-top: 1em;
    text-align: center; }

.h-oil {
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: #d6a33c;
  z-index: -10; }
  .h-oil .oiltb .oilspace {
    height: 300px; }
  .h-oil .oiltb picture {
    line-height: 0; }
  .h-oil .oilbg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; }
    .h-oil .oilbg .oil-text {
      width: 90%;
      max-width: 1000px; }
      .h-oil .oilbg .oil-text h1, .h-oil .oilbg .oil-text p {
        text-align: center; }
      .h-oil .oilbg .oil-text h1 {
        padding-bottom: 1em; }

.h-flavors {
  padding-bottom: 2em; }
  .h-flavors .flavor {
    width: 50%;
    height: 300px;
    padding: 1em; }
    @media only screen and (max-width: 800px) {
      .h-flavors .flavor {
        height: 200px; } }
    @media only screen and (max-width: 600px) {
      .h-flavors .flavor {
        height: 150px;
        font-size: 0.8em; } }
    .h-flavors .flavor h1 {
      width: 100%;
      max-width: 400px;
      height: 100%;
      text-align: center;
      padding: 1em;
      border-radius: 10px; }
    .h-flavors .flavor .f-cardamom {
      background: url("../images/home/modules/cardamom.jpg") no-repeat;
      background-size: cover;
      background-position: center; }
    .h-flavors .flavor .f-lemon {
      background: url("../images/home/modules/lemon.jpg") no-repeat;
      background-size: cover;
      background-position: center; }
    .h-flavors .flavor .f-ginger {
      background: url("../images/home/modules/ginger.jpg") no-repeat;
      background-size: cover;
      background-position: center; }
    .h-flavors .flavor .f-lavender {
      background: url("../images/home/modules/lavender.jpg") no-repeat;
      background-size: cover;
      background-position: center; }

.privacy {
  padding-top: 2em;
  padding-bottom: 2em; }
  .privacy h1, .privacy h2 {
    color: #ff595a; }
  .privacy h1 {
    text-align: center;
    padding-bottom: 1em; }
  .privacy h2 {
    font-family: "Cormorant Garamond", serif; }
  .privacy .msds li {
    width: auto;
    padding-bottom: 1em; }
    .privacy .msds li a:hover .icon-droplet {
      color: #5fa7c9; }
    .privacy .msds li a .icon-droplet {
      width: auto;
      color: #ff595a;
      font-size: 2em;
      padding-right: 0.5em; }

.catalogo .c-banner {
  padding: 5em 1em; }
  .catalogo .c-banner .cb-title {
    width: auto;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    overflow: hidden; }
    .catalogo .c-banner .cb-title h1, .catalogo .c-banner .cb-title h2 {
      text-align: center; }
    .catalogo .c-banner .cb-title h1 {
      padding: 2em;
      padding-bottom: 1em; }
    .catalogo .c-banner .cb-title h2 {
      padding: 0.5em 1em;
      background: #fceabb;
      background: -moz-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
      background: -webkit-gradient(left top, right top, color-stop(0%, #fceabb), color-stop(24%, #fccd4d), color-stop(43%, #f8b500), color-stop(100%, #fbdf93));
      background: -webkit-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
      background: -o-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
      background: -ms-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
      background: linear-gradient(to right, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=1 ); }
.catalogo .c-cardamom {
  background: url("../images/home/modules/cardamom.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
.catalogo .c-lemon {
  background: url("../images/home/modules/lemon.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
.catalogo .c-ginger {
  background: url("../images/home/modules/ginger.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
.catalogo .c-lavender {
  background: url("../images/home/modules/lavender.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
.catalogo .c-pink {
  background: url("../images/banner/pink-l.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
  @media only screen and (max-width: 900px) {
    .catalogo .c-pink {
      background: url("../images/banner/pink-m.jpg") no-repeat;
      background-size: cover;
      background-position: center; } }
  @media only screen and (max-width: 600px) {
    .catalogo .c-pink {
      background: url("../images/banner/pink-s.jpg") no-repeat;
      background-size: cover;
      background-position: center; } }
.catalogo .c-green {
  background: url("../images/banner/green-l.jpg") no-repeat;
  background-size: cover;
  background-position: center; }
  @media only screen and (max-width: 900px) {
    .catalogo .c-green {
      background: url("../images/banner/green-m.jpg") no-repeat;
      background-size: cover;
      background-position: center; } }
  @media only screen and (max-width: 600px) {
    .catalogo .c-green {
      background: url("../images/banner/green-s.jpg") no-repeat;
      background-size: cover;
      background-position: center; } }
.catalogo .c-cat {
  padding-bottom: 2em; }
  .catalogo .c-cat .c-item {
    width: 45%;
    max-width: 200px;
    overflow: hidden; }
    .catalogo .c-cat .c-item p {
      text-align: center;
      padding-bottom: 0;
      padding-top: 1em; }
    .catalogo .c-cat .c-item .c-hover {
      position: absolute;
      width: 200%;
      top: 0;
      left: -100%;
      height: 100%;
      opacity: 0;
      padding-left: 2.5%; }
      .catalogo .c-cat .c-item .c-hover:hover {
        opacity: 1;
        left: 0; }
      .catalogo .c-cat .c-item .c-hover a {
        width: 45%;
        max-width: 200px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 10px;
        color: #ffffff;
        margin-bottom: 1em;
        text-align: center;
        padding: 0.5em 1em;
        transform: scale(0.9);
        -webkit-transform: scale(0.9); }
        .catalogo .c-cat .c-item .c-hover a:hover {
          transform: scale(1);
          -webkit-transform: scale(1); }
.catalogo .storyline {
  max-width: 900px;
  padding-bottom: 3em;
  padding-top: 3em; }
  .catalogo .storyline .story {
    padding: 2em; }
    .catalogo .storyline .story:nth-child(2n) .storydot {
      left: inherit;
      right: -1em; }
    .catalogo .storyline .story:nth-child(1) {
      border-top: 0.5em solid #5fa7c9;
      border-left: 0.5em solid #5fa7c9;
      border-bottom: 0.5em solid rgba(95, 167, 201, 0.8); }
    .catalogo .storyline .story:nth-child(2) {
      border-right: 0.5em solid rgba(95, 167, 201, 0.8);
      border-bottom: 0.5em solid rgba(95, 167, 201, 0.6); }
    .catalogo .storyline .story:nth-child(3) {
      border-left: 0.5em solid rgba(95, 167, 201, 0.6);
      border-bottom: 0.5em solid rgba(95, 167, 201, 0.4); }
    .catalogo .storyline .story:nth-child(4) {
      border-right: 0.5em solid rgba(95, 167, 201, 0.4);
      border-bottom: 0.5em solid rgba(95, 167, 201, 0.2); }
    .catalogo .storyline .story:nth-child(5) {
      border-left: 0.5em solid rgba(95, 167, 201, 0.2);
      border-bottom: 0.5em solid rgba(39, 51, 161, 0.2); }
    .catalogo .storyline .story:nth-child(6) {
      border-right: 0.5em solid rgba(39, 51, 161, 0.2);
      border-bottom: 0.5em solid rgba(39, 51, 161, 0.4); }
    .catalogo .storyline .story:nth-child(7) {
      border-left: 0.5em solid rgba(39, 51, 161, 0.4);
      border-bottom: 0.5em solid rgba(39, 51, 161, 0.6); }
    .catalogo .storyline .story:hover {
      background: rgba(95, 167, 201, 0.2); }
    .catalogo .storyline .story picture {
      width: 30%;
      transform: scale(0.8);
      -webkit-transform: scale(0.8); }
    .catalogo .storyline .story p {
      width: 70%; }
    .catalogo .storyline .story .storydot {
      position: absolute;
      top: -1em;
      left: -1em;
      width: 2em;
      height: 2em;
      border-radius: 50%;
      background: #5fa7c9;
      color: #ffffff;
      padding: 1em;
      font-weight: bold; }
  .catalogo .storyline .story1, .catalogo .storyline .story2 {
    padding: 2em;
    border-top: 5px solid #5fa7c9; }
    .catalogo .storyline .story1:hover, .catalogo .storyline .story2:hover {
      background: rgba(95, 167, 201, 0.2); }
    .catalogo .storyline .story1 picture, .catalogo .storyline .story2 picture {
      width: 30%;
      transform: scale(0.8);
      -webkit-transform: scale(0.8); }
    .catalogo .storyline .story1 p, .catalogo .storyline .story2 p {
      width: 70%; }
    .catalogo .storyline .story1 .storydot, .catalogo .storyline .story2 .storydot {
      position: absolute;
      top: -1em;
      width: 2em;
      height: 2em;
      border-radius: 50%;
      background: #5fa7c9;
      color: #ffffff;
      padding: 1em;
      font-weight: bold; }
  .catalogo .storyline .story1 {
    border-right: 5px solid #5fa7c9; }
    .catalogo .storyline .story1 .storydot {
      left: -1em; }
  .catalogo .storyline .story2 {
    border-left: 5px solid #5fa7c9; }
    .catalogo .storyline .story2 .storydot {
      right: -1em; }

.simore {
  width: auto;
  padding: 2em 0; }
  .simore h2 {
    padding: 0.5em 2em;
    background: #fceabb;
    background: -moz-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #fceabb), color-stop(24%, #fccd4d), color-stop(43%, #f8b500), color-stop(100%, #fbdf93));
    background: -webkit-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
    background: -o-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
    background: -ms-linear-gradient(left, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
    background: linear-gradient(to right, #fceabb 0%, #fccd4d 24%, #f8b500 43%, #fbdf93 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=1 ); }

.searcher {
  background: rgba(250, 250, 250, 0.6);
  padding: 2em; }

#contactoures {
  border-top: 1em solid #7d7d7d;
  padding-top: 150px; }
  #contactoures section {
    padding-top: 4em;
    max-width: 1200px; }
    #contactoures section p {
      padding-bottom: 0; }
  #contactoures .thanks {
    padding: 3em 0; }
    #contactoures .thanks .regresar {
      align-self: flex-start;
      width: auto;
      padding: 0.5em 1em;
      margin-top: 2em;
      background: #2733a1;
      color: #ffffff;
      border-radius: 10px; }
  #contactoures h1 {
    padding-bottom: 1em; }

#contact {
  padding: 1em 0; }
  #contact h2 {
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-size: 1.1em;
    text-transform: uppercase; }
  #contact fieldset {
    border: #7d7d7d !important;
    margin-bottom: 1em;
    width: 100%;
    float: left;
    padding: 0; }
    @media only screen and (max-width: 800px) {
      #contact fieldset {
        width: 100%;
        margin: 1em 0; } }
  #contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none; }
  #contact .texthalf {
    width: 50%;
    padding-right: 1em; }
    @media only screen and (max-width: 800px) {
      #contact .texthalf {
        width: 100%;
        padding: 0; } }

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #7d7d7d;
  background: none;
  padding: 10px;
  color: #7d7d7d; }

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  background: rgba(250, 250, 250, 0.2);
  color: #7d7d7d; }

#contact button[type="submit"] {
  cursor: pointer;
  width: 120px;
  border: none;
  border-radius: 10px;
  background: #7d7d7d;
  color: #ffffff;
  margin: 0 auto;
  padding: 10px;
  font-size: 1em; }

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

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

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

#contact textarea {
  font-family: "Roboto", sans-serif; }

::-webkit-input-placeholder {
  color: #7d7d7d; }

:-moz-placeholder {
  color: #7d7d7d; }

::-moz-placeholder {
  color: #7d7d7d; }

:-ms-input-placeholder {
  color: #7d7d7d; }

/*Non use
@import 'popup-clear';*/