#bfriday-hero {
  background-color: black;
  overflow: hidden;
}

#bfriday-hero .container {
  width: 100%;
}

.bfriday-main .image {
  width: 42em;
  margin-top: 3em;
  left: -18em;
}

.bfriday-right .animation-bfriday {
  width: 45em;
  height: auto;
  top: -14em;
  left: -24em;
}
#bfriday-hero .main {
  top: -244px;
  left: -319px;
}

@media screen and (min-width: 1991px) {
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1200px) {
  .bfriday-main .image {
    width: 34em;
    margin-top: 3em;
    left: -13em;
  }

  .bfriday-right .animation-bfriday {
    width: 34em;
    height: auto;
    top: -10em;
    left: -20em;
  }
  #bfriday-hero .main {
    top: -195px;
    left: -290px;
    width: 26em;
  }
}

@media screen and (max-width: 991px) {
  .bfriday-main .animation-bfriday {
    width: 100%;
    max-width: 100%;
    margin: -6% 0;
  }
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 567px) {
  .bfriday-main {
    flex-direction: column;
  }
  .container {
    padding: 0 !important;
  }
  .bfriday-main .image {
    width: 100%;
    margin-top: 0;
    left: 0;
  }
  .main-m {
    width: 75%;
    margin-top: 15%;
  }
  .bfriday-main .animation-bfriday {
    width: 133%;
    max-width: unset;
    margin: -17% 0;
    height: auto;
    left: 8%;
    margin-bottom: -30%;
  }
  .bfriday-main .image {
    width: 100%;
    margin-top: 5%;
    left: 0;
  }
}

@media screen and (max-width: 430px) {
}

@media screen and (max-width: 375px) {
}

/* SUB */
#bfriday-sub {
  background-color: #c72031;
}
.sub-main {
  margin-left: -14em;
}
.sub-main .sub-main-img {
  width: 15em;
  margin: 2em 0em;
}

.sub-text .sub-text-img {
  width: 28em;
  margin: 0 2em;
}

.sub-image .sub-img {
  width: 15em;
  bottom: 0;
  left: 35em;
}

@media screen and (min-width: 1991px) {
}

@media screen and (max-width: 1200px) {
  .sub-image .sub-img {
    width: 14em;
    bottom: 0;
    left: 27em;
  }
  .sub-text .sub-text-img {
    width: 24em;
    margin: 0 2em;
  }
  .sub-main .sub-main-img {
    width: 13em;
    margin: 2em 0em;
  }
  .sub-main {
    margin-left: -14em;
  }
}

@media screen and (max-width: 1130px) {
}

@media screen and (max-width: 991px) {
  .sub-image .sub-img {
    width: 10em;
    bottom: 0;
    left: 19em;
  }
  .sub-text .sub-text-img {
    width: 17em;
    margin: 0 1em;
  }
  .sub-main .sub-main-img {
    width: 9em;
    margin: 2em 0em;
  }
  .sub-main {
    margin-left: -9em;
  }
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 567px) {
  .sub-inner {
    justify-content: flex-start;
  }
  .sub-main {
    margin-left: 0;
    align-items: flex-start;
  }
  .sub-main .sub-main-img {
    width: 49%;
    margin: 1em 0em;
    margin-left: 0;
    margin-right: 0;
    left: 4%;
  }
  .sub-text .sub-text-img {
    width: 100%;
    margin: 0 0;
    left: -68%;
  }
  .sub-image .sub-img {
    width: 29%;
    bottom: 0;
    left: unset;
    right: -2%;
  }
  #bfriday-sub {
    z-index: 3;
  }
}

/* PRODUCTS */
#bfriday-products {
  background-color: black;
}

.product-title {
  width: 32em;
  padding-top: 5em;
  padding-bottom: 4em;
}

.product-item {
  max-width: 20em;
}
.product {
  width: auto;
  max-width: unset;
  height: 315px;
}

.top-products {
  gap: 5.5em;
}
.product-box {
  gap: 3.5em;
  padding-bottom: 6em;
}
.bottom-products {
  gap: 5.5em;
  left: 3px;
  position: relative;
}
.bottom-products2 {
  gap: 1.2em;
}

.product4 {
  position: relative;
  top: 14px;
  height: 350px;
  left: -16px;
}
.product2,
.product5 {
  position: relative;
  left: 5px;
}
.product6 {
  height: 321px;
}

@media screen and (max-width: 767px) {
  .product-title {
    width: 73%;
    padding-top: 14%;
    padding-bottom: 10%;
  }
  .product-box {
    gap: 4em;
    padding-bottom: 22%;
    position: relative;
    left: 1%;
  }
  .product {
    width: 95%;
    max-width: 100%;
    height: auto;
  }
  .product4 {
    position: relative;
    top: unset;
    height: auto;
    left: unset;
    width: 96%;
  }
  .product2,
  .product5 {
    position: relative;
    left: unset;
  }
  .product6 {
    height: auto;
  }
  .product5 {
    width: 100%;
  }
  .product2 {
    width: 95.5%;
  }
  /* Safari Only */
  @supports (background: -webkit-named-image(i)) {
  }
  .product-item {
    max-width: 12em;
    width: 100%;
  }
}

/* HIRING */
#banner-hiring {
  margin-top: 0 !important;
}
