/* General rules */

.for-construction {
  display: none !important;
}

* {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #313131;
  box-sizing: border-box;
}

h2 {
  font-size: 18px;
  line-height: 1.5;
}

a {
  font-size: 12px;
  text-decoration: none;
}

a:hover {
  color: black;
}

.hidden {
  display: none;
}

.flex-column-mob {
  display: flex;
  flex-direction: column;
}

.flex-row-mob {
  display: flex;
  flex-direction: row;
}

.flex1-mob {
  flex: 1;
}

.fixed {
  position: fixed;
}

.font300 {
  font-weight: 300;
}

.selected {
  color: #b9b9b9;
}

.selected:hover {
  color: #b9b9b9;
}

.space-between {
  justify-content: space-between;
}

.text14 {
  font-size: 14px;
}

.text12 {
  font-size: 12px;
  line-height: 18px;
}

/* Header */
header {
  width: 100vw;
  position: relative;
  justify-content: space-between;
}

/* Navbar */

.navbar {
  width: 100%;
  height: 5vh;
  justify-content: space-between;
  align-items: center;
  padding: 3vh 8vw;
  background: white;
  position: relative;
  flex: 1;
}

.logo {
  font-size: 14px;
}

.logo-icon {
  font-size: 8px;
  vertical-align: 2px;
}

#menu-icon {
  font-size: 18px;
  color: #313131;
}

/* Homepage */

.homepage {
  width: 100vw;
  height: 100vh;
}

.hero {
  background: url(../images/main-big.jpg) 50% 0 no-repeat;
  background-size: cover;
  width: 100%;
  height: 70vh;
  margin-top: 5vh;
}

.hero-complement {
  height: 100%;
}

.hero-text {
  justify-content: space-between;
  height: 100%;
  padding: 4vh 10vw;
}

/* Menu Page */
.menu-page {
  position: absolute;
  width: 100vw;
  height: 95vh;
  background: white;
  bottom: 100%;
}

.menu-page:target {
  animation-name: move-down;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes move-down {
  100% {
    bottom: -95vh;
  }
}

.menu-page h4 {
  font-weight: 300;
  font-size: 12px;
}

.menu-page input {
  background: transparent;
  border: none;
  border-bottom: 2px black solid;
  width: 50vw;
}

.menu-page input:focus {
  outline: none;
}

.search {
  background: url(../images/menu2.jpg) 0 0 no-repeat;
  background-size: cover;
}

.opaque {
  background: rgba(255, 255, 255, 0.5);
  height: 100%;
  justify-content: center;
  padding: 0 5vw;
}

.menu-main {
  flex: 2;
  justify-content: center;
  position: relative;
  background: #f5f5f5;
  margin: 3px 0;
}

.menu-nav-wrapper {
  width: 100%;
  justify-content: space-around;
}

.menu-nav-wrapper h3 {
  padding-bottom: 4vh;
}

.menu-nav-wrapper a {
  padding-bottom: 2vh;
}

.close-menu {
  position: absolute;
  top: 2vh;
  right: 4vw;
}

.right-bar-small {
  position: absolute;
  top: 1vh;
  left: 4vw;
  width: 60vw;
  align-items: center;
}

.right-bar-small i {
  font-size: 12px;
  margin-left: 5vw;
}

.cart {
  line-height: 22px;
  font-size: 12px;
}

.cart-counter {
  display: inline-block;
  background: #313131;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-left: 5px;
}

.newsletter {
  background: url(../images/menu1.jpg) 0 0 no-repeat, white;
  background-size: contain;
}

.newsletter .opaque {
  padding: 0 0 0 46vw;
}

/* Categories */

.category-selector {
  margin-top: 6vh;
}

.category-selector a {
  margin-left: 5vw;
}

.product {
  height: 55vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 3px;
  padding: 5vh 10vw;
  font-size: 14px;
}

#product1 {
  background: url(../images/product1-1.png) center no-repeat;
  background-size: 50%;
  background-color: #f5f5f5;
}

#product2 {
  background: url(../images/product2-1.png) center no-repeat;
  background-size: 75%;
  background-color: #f5f5f5;
}

#product3 {
  background: url(../images/product3-1.png) center no-repeat;
  background-size: 60%;
  background-color: #f5f5f5;
}

#product4 {
  background: url(../images/product4-1.png) center no-repeat;
  background-size: 60%;
  background-color: #f5f5f5;
}

#product5 {
  background: url(../images/product5-1.png) center no-repeat;
  background-size: 85%;
  background-color: #f5f5f5;
}

#product6 {
  background: url(../images/product6-1.png) center no-repeat;
  background-size: 70%;
  background-color: #f5f5f5;
}

/* Product Page */
.product-page > * > * {
  background-color: #f5f5f5;
}

.product-expositor {
  margin-top: 5vh;
  height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  padding: 3vh 5vw;
  font-size: 14px;
}

.product-expositor span {
  font-weight: 300;
}

.product-number {
  align-self: flex-end;
}

.product-wrapper {
  background: white;
}

.product-wrapper > * {
  background-color: #f5f5f5;
}

#product1-img {
  background: url(../images/product1-1.png) center no-repeat;
  background-size: 40%;
  background-color: #f5f5f5;
}

#product2-img {
  background: url(../images/product2-1.png) center no-repeat;
  background-size: 55%;
  background-color: #f5f5f5;
}

#product3-img {
  background: url(../images/product3-1.png) center no-repeat;
  background-size: 50%;
  background-color: #f5f5f5;
}

#product4-img {
  background: url(../images/product4-1.png) center no-repeat;
  background-size: 50%;
  background-color: #f5f5f5;
}

#product5-img {
  background: url(../images/product5-1.png) center no-repeat;
  background-size: 80%;
  background-color: #f5f5f5;
}

#product6-img {
  background: url(../images/product6-1.png) center no-repeat;
  background-size: 60%;
  background-color: #f5f5f5;
}

.product-info {
  align-items: center;
  height: 15vh;
  margin-bottom: 3px;
  padding: 4vh 5vw;
}

.product-info div {
  height: 100%;
}

.product-info h2,
.product-info span {
  font-size: 18px;
}

.product-info p {
  font-size: 14px;
  color: #b9b9b9;
}

.details {
  height: 29vh;
  margin-bottom: 3px;
  padding: 4vh 5vw;
}

.details h3 {
  margin-bottom: 2vh;
}

.details p {
  line-height: 1.5;
  font-weight: 300;
}

.add-to-cart {
  height: 9vh;
  background: white;
  margin-bottom: 3px;
}

.add-to-cart span {
  display: block;
  background: #f5f5f5;
  height: 9vh;
  line-height: 9vh;
  text-align: center;
}

.plus {
  width: 20vw;
  margin-right: 3px;
  font-size: 40px;
}

.add {
  width: 80vw;
  font-size: 18px;
}

.go-back {
  height: 6vh;
  text-align: center;
  line-height: 6vh;
}

.go-back a {
  font-size: 14px;
}

/* Tablet Version */
@media (min-width: 768px) {
  /* General */

  h2,
  h3 {
    font-size: 24px;
  }

  a {
    font-size: 18px;
  }

  .flex-column-tab {
    display: flex;
    flex-direction: column;
  }

  .flex-row-tab {
    display: flex;
    flex-direction: row;
  }

  .flex1-tab {
    flex: 1;
  }

  .flex-wrap-tab {
    flex-wrap: wrap;
  }

  .main-viewport {
    position: relative;
  }

  /* Navbar */

  header {
    z-index: 1;
  }

  .navbar {
    padding: 3vh 6vw;
  }

  .logo {
    font-size: 18px;
  }

  .logo-icon {
    font-size: 12px;
    vertical-align: 2px;
  }

  #menu-icon {
    font-size: 24px;
    color: #313131;
  }

  /* Homepage */
  .hero {
    height: 100%;
  }

  .hero-text {
    background: white;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 35%;
    padding: 5vh 5vw;
  }

  /* Menu */
  .menu-page h4 {
    font-size: 18px;
  }

  .newsletter .opaque {
    padding: 0 0 0 40vw;
  }

  .close-menu {
    position: absolute;
    top: 3vh;
    right: 5.5vw;
    font-size: 24px;
  }

  .right-bar-small {
    top: 3vh;
    left: 5.5vw;
  }

  .right-bar-small i {
    font-size: 18px;
    margin-left: 5vw;
  }

  .cart {
    line-height: 26px;
    font-size: 18px;
  }

  .cart-counter {
    width: 25px;
    height: 25px;
  }

  /* Categories */
  .product {
    height: 43vh;
    width: 49vw;
    padding: 5vh 5vw;
    font-size: 18px;
  }

  .product h3 {
    font-size: 18px;
  }

  #product1 {
    background-size: 50%;
    background-color: #f5f5f5;
    margin: 0 4px;
  }

  #product2 {
    background-size: 75%;
    background-color: #f5f5f5;
  }

  #product3 {
    background-size: 60%;
    background-color: #f5f5f5;
    margin-left: 4px;
  }

  #product4 {
    background-size: 60%;
    background-color: #f5f5f5;
    margin: 0 4px;
  }

  #product5 {
    background-size: 85%;
    background-color: #f5f5f5;
  }

  #product6 {
    background-size: 70%;
    background-color: #f5f5f5;
    margin-left: 4px;
  }

  /* Product Pages */
  .product-main {
    width: 70vw;
  }

  .product-expositor span {
    font-size: 18px;
  }

  .mini-imgs {
    margin-top: 5vh;
  }

  .mini-imgs div {
    width: 29vw;
    height: 23.5vh;
    margin-right: 3px;
    margin-bottom: 3px;
  }

  .details h3 {
    font-size: 16px;
  }

  .add {
    font-size: 24px;
  }

  .go-back a {
    font-size: 18px;
  }

  #product1-img {
    background-size: 35%;
  }

  #product2-img {
    background-size: 45%;
  }

  #product3-img {
    background-size: 45%;
  }

  #product4-img {
    background-size: 45%;
  }

  #product5-img {
    background-size: 65%;
  }

  #product6-img {
    background-size: 50%;
  }

  #product1-img2 {
    background: url(../images/product1-2.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product1-img3 {
    background: url(../images/product1-3.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product1-img4 {
    background: url(../images/product1-4.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product1-img5 {
    background: url(../images/product1-5.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product2-img2 {
    background: url(../images/product2-2.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product2-img3 {
    background: url(../images/product2-3.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product2-img4 {
    background: url(../images/product2-4.png) center no-repeat;
    background-size: 90%;
    background-color: #f5f5f5;
  }

  #product2-img5 {
    background: url(../images/product2-5.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product3-img2 {
    background: url(../images/product3-2.png) center no-repeat;
    background-size: 80%;
    background-color: #f5f5f5;
  }

  #product3-img3 {
    background: url(../images/product3-3.png) center no-repeat;
    background-size: 80%;
    background-color: #f5f5f5;
  }

  #product3-img4 {
    background: url(../images/product3-4.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product3-img5 {
    background: url(../images/product3-5.png) center no-repeat;
    background-size: 80%;
    background-color: #f5f5f5;
  }

  #product4-img2 {
    background: url(../images/product4-2.png) 80% 0 no-repeat;
    background-size: 200%;
    background-color: #f5f5f5;
  }

  #product4-img3 {
    background: url(../images/product4-3.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product4-img4 {
    background: url(../images/product4-4.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product4-img5 {
    background: url(../images/product4-5.png) center no-repeat;
    background-size: 60%;
    background-color: #f5f5f5;
  }

  #product5-img2 {
    background: url(../images/product5-2.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product5-img3 {
    background: url(../images/product5-3.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product5-img4 {
    background: url(../images/product5-4.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product5-img5 {
    background: url(../images/product5-5.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product6-img2 {
    background: url(../images/product6-2.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product6-img3 {
    background: url(../images/product6-3.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product6-img4 {
    background: url(../images/product6-4.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }

  #product6-img5 {
    background: url(../images/product6-5.png) center no-repeat;
    background-size: 100%;
    background-color: #f5f5f5;
  }
}

/* Desktop Version */

@media (min-width: 1024px) {
  /* General */

  h2 {
    font-size: 18px;
    line-height: 1.5;
  }

  a {
    font-size: 12px;
    text-decoration: none;
  }

  .hidden {
    display: block;
  }

  .reverse-hidden {
    display: none;
  }

  .flex-column-desk {
    display: flex;
    flex-direction: column;
  }

  .flex-row-desk {
    display: flex;
    flex-direction: row;
  }

  .flex1-desk {
    flex: 1;
  }

  .flex-wrap-desk {
    flex-wrap: wrap;
  }

  /* Navbar */
  header {
    width: 15vw;
  }

  .navbar {
    width: 15vw;
    height: 100vh;
    justify-content: space-between;
    align-items: start;
    padding: 5vh 4vw 5vh 2vw;
  }

  .logo {
    font-size: 14px;
  }

  .logo-icon {
    font-size: 8px;
  }

  .menu {
    line-height: 20px;
  }

  #menu-icon {
    font-size: 18px;
    display: flex;
    flex-direction: row;
  }

  .menu-text {
    margin-left: 5px;
  }

  .categories {
    justify-content: center;
  }

  .social {
    justify-content: flex-end;
  }

  .padding-bottom-6 {
    padding-bottom: 6vh;
  }

  .padding-bottom-3 {
    padding-bottom: 3vh;
  }

  /* Homepage */
  .main-viewport {
    position: relative;
  }

  .homepage {
    width: 75vw;
    height: 100vh;
    margin-left: 15vw;
  }

  .hero {
    margin-top: 0;
    margin-right: 3px;
    height: 100vh;
    flex: 1;
  }

  .hero-complement {
    position: static;
    flex: 1;
  }

  .hero-small {
    background: url(../images/main-small.jpg) 0 0 no-repeat;
    background-size: contain;
    height: 50vh;
  }

  .hero-text {
    position: static;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 10vh 5vw;
  }

  /* Right bar */

  .right-bar {
    width: 10vw;
    height: 100vh;
    align-items: flex-end;
    padding: 3.5vh 2vw;
    right: 0;
  }

  .right-bar i {
    font-size: 18px;
    margin-right: 2px;
    margin-top: 5vh;
  }

  .cart {
    font-size: 12px;
    line-height: 26px;
  }

  .cart-counter {
    width: 25px;
    height: 25px;
  }

  .back {
    display: block;
    position: absolute;
    top: 50vh;
  }

  /* Menu */
  .menu-page {
    width: 75vw;
    height: 100vh;
    right: 100%;
    bottom: 0;
  }

  .menu-page:target {
    animation-name: move-left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes move-left {
    100% {
      right: -75vw;
    }
  }

  .menu-page h3 {
    font-size: 18px;
  }

  .menu-page h4 {
    font-weight: 700;
    font-size: 12px;
  }

  .menu-main {
    padding: 0 10vw;
  }

  .opaque {
    padding: 0;
    padding-left: 5vw;
    margin-right: 3px;
    background: #f5f5f5;
  }

  .search {
    background: none;
  }

  .search-desk-img {
    background: url(../images/menu2.jpg) 100% 10% no-repeat;
    background-size: 160%;
    width: 100%;
  }

  .menu-page input {
    width: 30vw;
  }

  .newsletter {
    background: #f5f5f5;
  }

  .newsletter-desk-img {
    background: url(../images/menu1.jpg) 0 0 no-repeat, white;
    background-size: contain;
  }

  .newsletter .opaque {
    padding: 0 5vw;
  }

  /* Category page */
  .category-page {
    width: 75vw;
    height: 100vh;
    margin-left: 15vw;
  }

  .category-page h2 {
    font-size: 24px;
  }

  .category-selector {
    margin-bottom: 2vh;
  }

  #first-link {
    margin: 0;
  }

  .product {
    height: 50vh;
    width: 24vw;
    padding: 5vh 3vw;
    font-size: 12px;
  }

  .product h3 {
    font-size: 12px;
  }

  #product1 {
    margin-left: 0;
  }

  #product3 {
    margin-right: 0;
  }

  #product4 {
    margin-left: 0;
  }

  #product6 {
    margin-right: 0;
  }

  /* Products Page */
  .product-page {
    width: 75vw;
    height: 100vh;
    margin-left: 15vw;
  }

  .mini-imgs {
    margin-top: 0;
  }

  .product-main {
    width: 75vw;
  }

  .product-wrapper {
    width: 25vw;
    margin-right: 3px;
    background: white;
  }

  .product-wrapper > * {
    background: #f5f5f5;
  }

  .product-expositor {
    order: 2;
    margin-top: 0;
    width: calc(50vw - 3px);
    height: 75vh;
  }

  .product-expositor span {
    font-size: 14px;
  }

  .product-info,
  .details {
    margin-bottom: 3px;
  }

  .product-info h2,
  .product-info span {
    font-size: 14px;
  }

  .product-info p {
    font-size: 12px;
  }

  .details {
    height: 50vh;
    font-size: 12px;
  }

  .details h3 {
    font-size: 14px;
  }

  .add-to-cart {
    background: white;
  }

  .add {
    font-size: 18px;
  }

  .plus {
    font-size: 24px;
  }

  #product1-img {
    background-size: 50%;
  }

  #product2-img {
    background-size: 65%;
  }

  #product3-img {
    background-size: 65%;
  }

  #product4-img {
    background-size: 60%;
  }

  #product5-img {
    background-size: 100%;
  }

  #product6-img {
    background-size: 70%;
  }

  #product1-img2 {
    background-size: 40%;
  }

  #product1-img3 {
    background-size: 40%;
  }

  #product1-img4 {
    background-size: 40%;
  }

  #product1-img5 {
    margin: 0;
    background-size: 40%;
  }

  #product2-img2 {
    background-size: 60%;
  }

  #product2-img3 {
    background-size: 60%;
  }

  #product2-img4 {
    background-size: 60%;
  }

  #product2-img5 {
    margin: 0;
    background-size: 80%;
  }

  #product3-img2 {
    background-size: 60%;
  }

  #product3-img3 {
    background-size: 80%;
  }

  #product3-img4 {
    background-size: 60%;
  }

  #product3-img5 {
    margin: 0;
    background-size: 80%;
  }

  #product4-img2 {
    background-size: 130%;
  }

  #product4-img3 {
    background-size: 40%;
  }

  #product4-img4 {
    background-size: 40%;
  }

  #product4-img5 {
    margin: 0;
    background-size: 40%;
  }

  #product5-img2 {
    background-size: 90%;
  }

  #product5-img3 {
    background-size: 90%;
  }

  #product5-img4 {
    background-size: 90%;
  }

  #product5-img5 {
    margin: 0;
    background-size: 90%;
  }

  #product6-img2 {
    background-size: 70%;
  }

  #product6-img3 {
    background-size: 70%;
  }

  #product6-img4 {
    background-size: 70%;
  }

  #product6-img5 {
    margin: 0;
    background-size: 70%;
  }
}