@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
@import url(https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css);
/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;
  --font-medium: 500;
}
/*===== Colores =====*/
:root {
  --first-color: #49a687;
  --complementary-color: #f99d6e;
  --white-color: #fafaff;
  --dark-color: #2a3b47;
  --text-color: #697477;
  --white-color-glass: rgba(250, 250, 255, 0.4);
}
/*===== Fuente y tipografia =====*/
:root {
  --body-font: "Montserrat", sans-serif;
  --big-font-size: 6.25rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
section.res__gallery {
  padding: 20px;
  width: 100%;
  display: flex;
  justify-self: center;
  align-items: center;
  flex-direction: column;
  margin: 40px auto;
}
section.res__gallery ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
section.res__gallery ul li {
  list-style: none;
  background: var(--first-color);
  color: var(--white-color);
  font-size: var(--h2-font-size);
  padding: 12px 20px;
  margin: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}
section.res__gallery ul li.active {
  background: var(--complementary-color);
  color: var(--white-color);
}
.product {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}
.product .itembox {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 5px;
  display: block;
}
.product .itembox.hide {
  display: none;
}
.product .itembox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a[data-fancybox] img {
  cursor: zoom-in;
}

/* div[data-item="category0"] {
    display: none !important;
} */