* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  appearance: none;
}

a {
  color: unset;
}

::selection {
  background-color: #b57351;
  color: #ffffff;
}

.beige {
  background-color: #f6ece6;
  color: #663825;
}

.white {
  background-color: #ffffff;
  color: #663825;
}

.chocolate {
  background-color: #663825;
  color: #ffffff;
}
.chocolate p,
.chocolate a,
.chocolate span {
  font-weight: 300;
}
.chocolate .h1 {
  font-weight: 200;
}
.chocolate .tiny {
  font-weight: 200;
}

.edge {
  position: absolute;
  left: 50%;
}
.edge--1 {
  bottom: 0;
  transform: translate(-50%, 100%);
  z-index: 1;
}
.edge--2 {
  top: 0;
  transform: translate(-50%, -100%) rotate(180deg);
  z-index: 1;
}
.edge--3 {
  bottom: 0;
  transform: translate(-50%, 100%);
}
.edge--4 {
  top: 0;
  transform: translate(-50%, -100%) rotate(180deg);
}
.edge--5 {
  bottom: 0;
  transform: translatex(-50%);
  height: 110px !important;
}
.edge--6 {
  bottom: 0;
  transform: translate(-50%, 100%);
}

@media (max-width: 1400px) {
  .edge {
    height: 50px;
  }
}
@media (max-width: 1280px) {
  .edge {
    height: 35px;
  }
}
a,
p,
span {
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.h1 {
  font-family: Poppins;
  font-size: 56px;
  font-style: normal;
  font-weight: 200;
  line-height: 100%;
}

.h3 {
  font-family: Poppins;
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
}

.h2 {
  font-family: "Buffalo";
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 80%;
}

.button-instagram {
  font-size: 0;
}

.button {
  text-decoration: none;
  display: inline-block;
  color: #ffffff;
  background-color: #b57351;
  padding: 6px 24px;
  margin: 0 24px 24px 0;
  text-wrap: nowrap;
}
.button--alt {
  color: #b57351;
  background-color: #ffffff;
}
.button--sale {
  position: absolute;
  top: 16px;
  left: 0;
}
.button--small {
  font-size: 14px;
  padding: 4px 18px;
  margin: 0 0 10px;
  background-color: #663825;
}

.small {
  font-size: 14px;
}
.small a,
.small p,
.small span {
  font-size: 14px;
}

.tiny {
  font-size: 12px;
  font-weight: 200;
}
.tiny a,
.tiny p,
.tiny span {
  font-size: 12px;
  font-weight: 200;
}

@media (max-width: 1400px) {
  .h2 {
    font-size: 48px;
  }

  .button-instagram img {
    margin: 6px 0;
    height: 36px;
  }
}
@media (max-width: 1280px) {
  .h1 {
    font-size: 48px;
  }

  .button-instagram {
    transform: translatey(-50%);
  }
}
@media (max-width: 767px) {
  .h1 {
    font-size: 40px;
  }

  .h3 {
    font-size: 24px;
  }

  .button-instagram {
    transform: translatey(0);
  }

  .button {
    margin: 0 16px 16px 0;
  }
}
html,
body {
  overflow-x: hidden;
}

.wrapper {
  width: 100%;
}

.content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  gap: 50px;
}

#mobile {
  display: none;
}

@media (max-width: 767px) {
  #mobile {
    display: unset;
  }
}
@media (max-width: 767px) {
  #desktop {
    display: none;
  }
}
/* l */
@media (max-width: 1280px) {
  .content {
    padding: 0 20px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}
/* m */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* s */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.start-1 {
  grid-column-start: 1;
}

.start-2 {
  grid-column-start: 2;
}

.start-3 {
  grid-column-start: 3;
}

.start-4 {
  grid-column-start: 4;
}

.start-5 {
  grid-column-start: 5;
}

.start-6 {
  grid-column-start: 6;
}

.start-7 {
  grid-column-start: 7;
}

.start-8 {
  grid-column-start: 8;
}

.start-9 {
  grid-column-start: 9;
}

.start-10 {
  grid-column-start: 10;
}

.start-11 {
  grid-column-start: 11;
}

.start-12 {
  grid-column-start: 1;
}

.end-2 {
  grid-column-end: 2;
}

.end-3 {
  grid-column-end: 3;
}

.end-4 {
  grid-column-end: 4;
}

.end-5 {
  grid-column-end: 5;
}

.end-6 {
  grid-column-end: 6;
}

.end-7 {
  grid-column-end: 7;
}

.end-8 {
  grid-column-end: 8;
}

.end-9 {
  grid-column-end: 9;
}

.end-10 {
  grid-column-end: 10;
}

.end-11 {
  grid-column-end: 11;
}

.end-12 {
  grid-column-end: 12;
}

.end-13 {
  grid-column-end: 13;
}

.span-1 {
  grid-column-end: span 1;
}

.span-2 {
  grid-column-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
}

.span-4 {
  grid-column-end: span 4;
}

.span-5 {
  grid-column-end: span 5;
}

.span-6 {
  grid-column-end: span 6;
}

.span-7 {
  grid-column-end: span 7;
}

.span-8 {
  grid-column-end: span 8;
}

.span-9 {
  grid-column-end: span 9;
}

.span-10 {
  grid-column-end: span 10;
}

.span-11 {
  grid-column-end: span 11;
}

.span-12 {
  grid-column-end: span 12;
}

.relative {
  position: relative;
}

@media (max-width: 1280px) {
  .start-l-1 {
    grid-column-start: 1;
  }

  .start-l-2 {
    grid-column-start: 2;
  }

  .start-l-3 {
    grid-column-start: 3;
  }

  .start-l-4 {
    grid-column-start: 4;
  }

  .start-l-5 {
    grid-column-start: 5;
  }

  .start-l-6 {
    grid-column-start: 6;
  }

  .end-l-2 {
    grid-column-end: 2;
  }

  .end-l-3 {
    grid-column-end: 3;
  }

  .end-l-4 {
    grid-column-end: 4;
  }

  .end-l-5 {
    grid-column-end: 5;
  }

  .end-l-6 {
    grid-column-end: 6;
  }

  .end-l-7 {
    grid-column-end: 7;
  }

  .span-l-1 {
    grid-column-end: span 1;
  }

  .span-l-2 {
    grid-column-end: span 2;
  }

  .span-l-3 {
    grid-column-end: span 3;
  }

  .span-l-4 {
    grid-column-end: span 4;
  }

  .span-l-5 {
    grid-column-end: span 5;
  }

  .span-l-6 {
    grid-column-end: span 6;
  }
}
@media (max-width: 768px) {
  .start-m-1 {
    grid-column-start: 1;
  }

  .start-m-2 {
    grid-column-start: 2;
  }

  .start-m-3 {
    grid-column-start: 3;
  }

  .start-m-4 {
    grid-column-start: 4;
  }

  .end-m-2 {
    grid-column-end: 2;
  }

  .end-m-3 {
    grid-column-end: 3;
  }

  .end-m-4 {
    grid-column-end: 4;
  }

  .end-m-5 {
    grid-column-end: 5;
  }

  .span-m-1 {
    grid-column-end: span 1;
  }

  .span-m-2 {
    grid-column-end: span 2;
  }

  .span-m-3 {
    grid-column-end: span 3;
  }

  .span-m-4 {
    grid-column-end: span 4;
  }
}
@media (max-width: 767px) {
  .start-s-1 {
    grid-column-start: 1;
  }

  .start-s-2 {
    grid-column-start: 2;
  }

  .end-s-2 {
    grid-column-end: 2;
  }

  .end-s-3 {
    grid-column-end: 3;
  }

  .span-s-1 {
    grid-column-end: span 1;
  }

  .span-s-2 {
    grid-column-end: span 2;
  }

  .body {
    padding-top: 80px;
    background-color: #ffffff;
  }
}
.padding-20 {
  padding: 20px 0;
}

.padding-50 {
  padding: 50px 0;
}

.padding-100 {
  padding: 100px 0;
}

.margin-50 {
  margin: 50px 0;
}

.margin-100 {
  margin: 100px 0;
}

@media (max-width: 1280px) {
  .padding-20 {
    padding: 20px 0;
  }

  .padding-50 {
    padding: 30px 0;
  }

  .padding-100 {
    padding: 50px 0;
  }

  .margin-50 {
    margin: 30px 0;
  }

  .margin-100 {
    margin: 50px 0;
  }
}
.menu {
  display: flex;
  height: 120px;
  justify-content: space-between;
  align-items: center;
}
.menu h1 {
  word-wrap: nowrap;
}
.menu__navigation {
  display: flex;
  width: 100%;
  justify-content: end;
}
.menu nav {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
}
.menu li {
  list-style-type: none;
}
.menu a {
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 1400px) {
  .menu {
    height: 100px;
  }
  .menu nav {
    gap: 12px;
  }
}
@media (max-width: 1280px) {
  .menu {
    flex-direction: column;
    align-items: start;
    height: 120px;
    justify-content: center;
  }
  .menu__navigation {
    justify-content: space-between;
  }
}
.menu-mobile {
  display: none;
}

@media (max-width: 767px) {
  .menu-mobile {
    display: block;
  }
  .menu-mobile .x {
    height: 30px;
  }
  .menu-mobile .hamburger {
    height: 24px;
  }
  .menu-mobile a {
    text-decoration: none;
  }
  .menu-mobile .h2 {
    white-space: nowrap;
  }
  .menu-mobile .bar {
    height: 80px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-mobile__full {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 100vh;
  }
  .menu-mobile__top {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 80px;
  }
  .menu-mobile__navigation {
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 320px);
    gap: 20px;
  }
  .menu-mobile__navigation li {
    list-style-type: none;
    text-align: center;
  }
  .menu-mobile__navigation li a {
    font-size: 20px;
  }
  .menu-mobile .larry-2 {
    display: block;
    position: absolute;
    bottom: 0;
    right: -10px;
    height: 240px;
  }

  .closed {
    display: none !important;
  }
}
.header__headline {
  display: grid;
  justify-items: start;
  height: 500px;
  align-content: center;
  gap: 24px;
}
.header__illustration {
  height: 500px;
  z-index: 1;
}
.header__illustration img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.main {
  height: 500px;
}
.main:nth-of-type(even) .main__thumbnails {
  order: 1;
}
.main:nth-of-type(even) .bird {
  display: none;
}
.main__thumbnails img {
  display: block;
  width: auto;
  position: absolute;
  border: 10px #ffffff solid;
  transition: 1s;
}
.main__thumbnails img:nth-of-type(1) {
  left: 10%;
  top: 50%;
  height: 400px;
  transform: rotate(-10deg) translatey(-50%);
  transform-origin: 50% 0;
}
.main__thumbnails img:nth-of-type(2) {
  right: 20%;
  top: 0;
  height: 160px;
  transform: rotate(20deg);
}
.main__thumbnails img:nth-of-type(3) {
  right: 25%;
  bottom: 0;
  height: 160px;
}
.main__thumbnails:hover img:nth-of-type(1) {
  transform: rotate(-15deg) translatey(-50%);
}
.main__thumbnails:hover img:nth-of-type(2) {
  transform: rotate(30deg);
}
.main__thumbnails:hover img:nth-of-type(3) {
  transform: rotate(10deg);
}
.main__text {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 24px;
}

.instagram__text {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 24px;
}

.sb_instagram_header,
#sbi_load {
  display: none !important;
}

@media (max-width: 1400px) {
  .main__thumbnails img {
    border: 8px #ffffff solid;
  }
  .main__thumbnails img:nth-of-type(2) {
    right: 0;
  }
  .main__thumbnails img:nth-of-type(3) {
    right: 5%;
  }
}
@media (max-width: 1280px) {
  .main__thumbnails img:nth-of-type(1) {
    height: 320px;
  }
  .main__thumbnails img:nth-of-type(2) {
    height: 120px;
  }
  .main__thumbnails img:nth-of-type(3) {
    height: 150px;
  }
}
@media (max-width: 768px) {
  .main__thumbnails img:nth-of-type(1) {
    height: 240px;
  }
  .main__thumbnails img:nth-of-type(2) {
    height: 120px;
  }
  .main__thumbnails img:nth-of-type(3) {
    height: 120px;
  }
}
@media (max-width: 767px) {
  .header {
    padding: 30px 0 50px;
  }
  .header__headline {
    height: unset;
    gap: 24px;
  }
  .header__illustration {
    height: 300px;
    order: -1;
  }

  .main {
    height: unset;
  }
  .main:nth-of-type(even) .main__thumbnails {
    order: -1;
  }
  .main__thumbnails {
    height: 300px;
  }
  .main__thumbnails img {
    border: 5px #ffffff solid;
  }
  .main__thumbnails img:nth-of-type(1) {
    left: 5%;
  }
  .main__thumbnails img:nth-of-type(2) {
    right: unset;
    left: 230px;
  }
  .main__thumbnails img:nth-of-type(3) {
    right: unset;
    left: 190px;
  }

  .instagram {
    row-gap: 20px;
  }
  .instagram__text {
    order: 1;
  }
}
.contact {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 24px;
  z-index: 1;
}
.contact__addresses {
  display: grid;
  gap: 4px;
}
.contact__addresses a {
  display: block;
  text-decoration: none;
}
.contact__addresses img {
  height: 20px;
  margin-right: 10px;
  transform: translateY(3px);
}
.contact__links {
  display: grid;
  gap: 2px;
}
.contact__links a {
  text-decoration: none;
  color: #d69f7a;
}

.larry {
  position: absolute;
  display: block;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  height: 350px;
}

@media (max-width: 768px) {
  .larry {
    height: 250px;
  }
}
@media (max-width: 767px) {
  .larry {
    display: none;
  }
}
.page h1 {
  margin-bottom: 32px;
}
.page p {
  margin-bottom: 24px;
}
.page a {
  text-decoration: none;
  color: #b57351;
  font-weight: 600;
}

.bird {
  position: absolute;
}
.bird--1 {
  top: 30%;
  height: 120px;
  right: 200px;
}
.bird--2 {
  bottom: 30%;
  height: 100px;
  right: 400px;
}
.bird--3 {
  bottom: 0;
  left: 20px;
  height: 120px;
  transform: translateX(-100%);
}
.bird--4 {
  top: 0;
  right: 20px;
  height: 100px;
  transform: translateX(100%);
}

@media (max-width: 1400px) {
  .bird {
    position: absolute;
  }
  .bird--1 {
    right: 50px;
  }
  .bird--2 {
    right: 150px;
  }
}
@media (max-width: 1280px) {
  .bird {
    position: absolute;
  }
  .bird--3,
  .bird--4 {
    display: none;
  }
}
@media (max-width: 768px) {
  .bird {
    display: none;
  }
}
.archive h1 {
  margin-bottom: 32px;
}

.product {
  display: grid;
  gap: 8px;
  text-decoration: none;
  position: relative;
}
.product img {
  font-size: 0;
  width: 100%;
  height: auto;
  display: block;
}
.product img:nth-of-type(2) {
  display: none;
}
.product:hover img:nth-of-type(1) {
  display: none;
}
.product:hover img:nth-of-type(2) {
  display: block;
}
.product b {
  color: #b57351;
}

.single__info {
  display: grid;
  grid-auto-flow: row;
  justify-items: start;
  gap: 24px;
}
.single__sale {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
}
.single__sale img {
  display: block;
  height: 20px;
}
.single__sale span {
  font-weight: 600;
  color: #b57351;
}