@font-face {
  font-family: "bamburger";
  font-size: 30px;
  font-weight: 700;
  color: #231f20;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  src: "";
}
@font-face {
  font-family: "bamburger";
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  src: "";
}
@font-face {
  font-family: "bamburger";
  font-size: 34px;
  font-weight: 700;
  color: #1759a1;
  line-height: 34px;
  letter-spacing: 0em;
  text-align: left;
  src: "";
}
@font-face {
  font-family: "bamburger";
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  src: url();
}
@font-face {
  font-family: "Bamberger Grunge FM";
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  line-height: 30px;
  letter-spacing: 0.01em;
  text-align: center;
  src: url();
}
@font-face {
  font-family: "bamburger";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/bamberger-grunge-regular-fm.woff2") format("woff2"), url("../fonts/bamberger-grunge-regular-fm.woff") format("woff");
}
@font-face {
  font-family: "bamburger";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/bamberger-grunge-bold-fm.woff2") format("woff2"), url("../fonts/bamberger-grunge-bold-fm.woff") format("woff");
}
@font-face {
  font-family: "bamburger";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/bamberger-grunge-grunge-fm.woff2") format("woff2"), url("../fonts/bamberger-grunge-grunge-fm.woff") format("woff");
}
@font-face {
  font-family: "JetBrainsMono";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("woff2"), url("../fonts/JetBrainsMono-Regular.ttf") format("woff");
}
.page {
  background-color: #cde5f4;
}
.page .our_products {
  height: 100%;
  background-color: #cde5f4;
  position: relative;
  top: 0;
  bottom: -40px;
}
.page .our_products .our_products_title_and_banner {
  height: 100%;
  position: relative;
}
@media (max-width: 1024px) {
  .page .our_products .our_products_title_and_banner {
    height: 100%;
  }
}
.page .our_products .our_products_title_and_banner .our_products_image {
  width: 100%;
  height: 100%;
}
.page .our_products .our_products_title_and_banner .title_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page .our_products .our_products_title_and_banner .title_container .our_products_banner {
  width: 100%;
  height: 87px;
}
@media (max-width: 1024px) {
  .page .our_products .our_products_title_and_banner .title_container .our_products_banner {
    height: 45px;
  }
}
.page .our_products .our_products_title_and_banner .title_container .title_style {
  color: var(--white, #FFF);
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 905;
  line-height: normal;
  width: 100%;
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .page .our_products .our_products_title_and_banner .title_container .title_style {
    font-size: 30px;
  }
}
.page .our_products .our_products_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding-bottom: 50px;
  margin-bottom: -50px;
}
.page .our_products .our_products_container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 45px;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(4, 1fr);
  direction: rtl;
  width: 80%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
}
@media (max-width: 1024px) {
  .page .our_products .our_products_container ul {
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}
.page .our_products .our_products_container li {
  text-align: center;
}

.categoryTile {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.categoryTile:hover {
  text-decoration: none;
}
.categoryTile .categoryTileBody {
  width: 100%;
  height: 580px;
}
@media (max-width: 1440px) {
  .categoryTile .categoryTileBody {
    height: 400px;
  }
}
@media (max-width: 1024px) {
  .categoryTile .categoryTileBody {
    height: 550px;
  }
}
@media (max-width: 768px) {
  .categoryTile .categoryTileBody {
    height: 300px;
  }
}
@media (max-width: 375px) {
  .categoryTile .categoryTileBody {
    height: 250px;
  }
}
.categoryTile .categoryTileBody .categoryContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 55px;
}
.categoryTile .categoryTileBody .categoryContainer img {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  z-index: 1;
  position: relative;
}

.butterImage {
  width: 80%;
}

.categoryCreamCheeseImage {
  width: 70%;
}

.categoryNoamImage {
  width: 80%;
}

.categoryMilkDrinksImage,
.categoryMilkImage {
  width: 45%;
}

.categoryKazefetChokoImage {
  width: 90%;
}

.cheeseForBaking {
  width: 95%;
}

.categoryCreamSauceImage {
  width: 75%;
}

.categorySweetCreamImage {
  width: 40%;
  z-index: 1;
}

.butterCorner1,
.butterCorner2,
.cheeseForBakingCorner1,
.cheeseForBakingCorner2,
.cowAnimationUp,
.creamCheeseCrul,
.creamSauceCrul,
.ellipseImage,
.milkCrul,
.milkDrinksCrul,
.noamCorner1,
.noamCorner2,
.sweetCreamCrul {
  display: none;
}

.textCategoryName {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
  bottom: 50px;
  position: relative;
  color: #000000;
  font-size: 30px;
  font-weight: 400;
}
@media (max-width: 1024px) {
  .textCategoryName {
    font-size: 22px;
    font-style: normal;
    line-height: normal;
  }
}

.containerMilk:hover {
  background-image: url("../images/whiteBackground1.png");
  background-size: 86%;
  background-position: center 71%;
  background-repeat: no-repeat;
}

.milkDrinksContainer:hover {
  background-image: url("../images/whiteBackground2.png");
  background-size: 86%;
  background-position: center 74%;
  background-repeat: no-repeat;
}

.containerNoamCheese:hover {
  background-image: url("../images/whiteBackground3.png");
  background-size: 85%;
  background-position: center 83%;
  background-repeat: no-repeat;
}

.containerCreamCheese:hover {
  background-image: url("../images/whiteBackground4.png");
  background-size: 75%;
  background-position: center 82%;
  background-repeat: no-repeat;
}

.cheeseForBakingContainer:hover {
  background-image: url("../images/whiteBackground5.png");
  background-size: 92%;
  background-position: center 82%;
  background-repeat: no-repeat;
}

.containerKazefet:hover {
  background-image: url("../images/whiteBackground6.png");
  background-size: 75%;
  background-position: center 78%;
  background-repeat: no-repeat;
}

.containerSweetCream:hover {
  background-image: url("../images/whiteBackground7.png");
  background-size: 75%;
  background-position: center 80%;
  background-repeat: no-repeat;
}

.cheeseSauceContainer:hover {
  background-image: url("../images/whiteBackground8.png");
  background-size: 75%;
  background-position: center 72%;
  background-repeat: no-repeat;
}

.categoryButterContainer:hover {
  background-image: url("../images/whiteBackground9.png");
  background-size: 75%;
  background-position: center 84%;
  background-repeat: no-repeat;
}