/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 52px;
  padding-top: 166px;
  border-bottom: 4px solid #CE3D49;
}
#hero p {
  color: #FFFFFF;
}
#hero p.h3 {
  margin-top: 1em;
}
#hero .book {
  margin-top: 1em;
}
#hero h1 {
  font-size: clamp(4.375rem, 70px + (170 - 50) * (100vw - 320px) / 1600, 10.625rem) !important;
  line-height: clamp(4.6875rem, 75px + (148 - 75) * (100vw - 320px) / 1600, 9.25rem) !important;
  color: #FFFFFF;
}
#hero h1 .red {
  color: #CE3D49;
  display: block;
}
#hero .banner-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#hero picture.banner-image {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
#hero .hero-content {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  text-align: center;
}
#hero h2 {
  font-size: clamp(1.5rem, 24px + (36 - 24) * (100vw - 320px) / 1600, 2.25rem) !important;
  line-height: clamp(2.1875rem, 35px + (46 - 35) * (100vw - 320px) / 1600, 2.875rem) !important;
  max-width: 987px;
}
#hero .container-outter-discount {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
#hero .top-right {
  width: 215px;
  height: 10px;
  background: #CE3D49;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  visibility: hidden;
}
#hero .top-left {
  height: 115px;
  width: 10px;
  background: #CE3D49;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  visibility: hidden;
}
#hero .bottom-right {
  height: 115px;
  width: 10px;
  background: #CE3D49;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  visibility: hidden;
}
#hero .bottom-left {
  width: 215px;
  height: 10px;
  background: #CE3D49;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  visibility: hidden;
}
#hero .discount {
  font-size: clamp(1.375rem, 22px + (30 - 22) * (100vw - 320px) / 1600, 1.875rem) !important;
  line-height: clamp(2.1875rem, 35px + (46 - 35) * (100vw - 320px) / 1600, 2.875rem) !important;
  font-family: "IBM Plex Serif";
  font-style: italic;
  margin-bottom: 15px;
  letter-spacing: 1.5px;
}
#hero .discount-amount {
  font-size: clamp(4.6875rem, 75px + (142 - 50) * (100vw - 320px) / 1600, 8.875rem) !important;
  line-height: clamp(4.6875rem, 75px + (148 - 75) * (100vw - 320px) / 1600, 9.25rem) !important;
  font-family: "Anton";
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
#hero .percentage-off {
  display: flex;
  flex-direction: column;
}
#hero .ends {
  font: normal normal bold 16px/28px Montserrat, sans-serif !important;
  text-transform: uppercase;
  margin-top: 30px;
}
#hero .percentage, #hero .off {
  font: normal normal normal 57px/57px "Anton" !important;
}
#hero .white-rectangle-left {
  border-left: 3px solid #CE3D49;
  border-top: 3px solid #CE3D49;
  border-bottom: 3px solid #CE3D49;
  width: 30px;
  position: absolute;
  z-index: 1;
  left: -1em;
  top: 69px;
  height: 195px;
}
#hero .white-rectangle-right {
  border-right: 3px solid #CE3D49;
  border-top: 3px solid #CE3D49;
  border-bottom: 3px solid #CE3D49;
  width: 30px;
  position: absolute;
  z-index: 1;
  right: -1em;
  top: 69px;
  height: 195px;
}
#hero .container-discount {
  background: transparent;
  position: relative;
  width: fit-content;
  margin-left: auto;
  padding-top: 53px;
  margin-right: auto;
  max-width: 250px;
  text-align: center;
  z-index: 2;
}
#hero .container-discount {
  width: fit-content;
}
#hero .discount-amount {
  font: normal normal normal 114px/114px "Anton" !important;
}
@media screen and (min-width: 1025px) {
  #hero {
    min-height: 100vh;
  }
  #hero .percentage, #hero .off {
    font-size: clamp(2.3125rem, 37px + (71 - 50) * (100vw - 320px) / 1600, 4.4375rem) !important;
    line-height: clamp(2.3125rem, 37px + (71 - 37) * (100vw - 320px) / 1600, 4.4375rem) !important;
  }
  #hero .container-outter-discount {
    background: rgba(65, 64, 66, 0.85);
    width: unset;
    padding-bottom: 67px;
  }
  #hero .hero-content {
    text-align: left;
  }
  #hero .bottom-right,
  #hero .bottom-left,
  #hero .top-right,
  #hero .top-left {
    visibility: visible;
  }
  #hero .white-rectangle-left {
    border-left: 3px solid #FFFFFF;
    border-top: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    height: 210px;
    left: 1em;
    top: 115px;
  }
  #hero .white-rectangle-right {
    border-right: 3px solid #FFFFFF;
    border-top: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    height: 210px;
    right: 1em;
    top: 115px;
  }
  #hero .container-discount {
    padding-top: 89px;
  }
  #hero .discount {
    font: italic normal normal 30px/70px "IBM Plex Serif";
  }
  #hero .discount-amount {
    font: normal normal normal 142px/142px "Anton" !important;
  }
}
@media screen and (min-width: 1141px) {
  #hero .white-rectangle-right {
    right: 2em;
  }
  #hero .white-rectangle-left {
    left: 2em;
  }
}
@media screen and (min-width: 1440px) {
  #hero .ends {
    margin-top: 1em;
  }
  #hero .book {
    margin-top: unset;
  }
}
@media screen and (min-width: 1920px) {
  #hero .white-rectangle-right {
    right: 55px;
  }
  #hero .ends {
    margin-top: 18px;
  }
  #hero .white-rectangle-left {
    left: 55px;
  }
}

/*About and Quote*/
#about h2,
#quote h2 {
  font-weight: bold;
  text-transform: uppercase;
}
#about .container-red-badge-content,
#quote .container-red-badge-content {
  top: -10px;
  height: 100%;
}
#about .container-red-badge-content p,
#quote .container-red-badge-content p {
  color: #FFFFFF;
}
#about .years-count,
#quote .years-count {
  font-size: clamp(2.375rem, 38px + (100 - 38) * (100vw - 320px) / 1600, 5.625rem) !important;
  line-height: 40px !important;
  font-family: "Anton";
  margin-bottom: 0;
}
#about .line-draw,
#quote .line-draw {
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  top: 0.8em;
}
#about .years-container,
#quote .years-container {
  width: 85%;
}
#about .year,
#quote .year {
  font-size: 14px !important;
  line-height: 28px !important;
  font-family: "Montserrat";
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: #CF3D4A;
  position: relative;
  z-index: 1;
  font-weight: bold;
}
#about .collective,
#quote .collective {
  font: italic normal normal 14px/16px "IBM Plex Serif";
  color: #FFFFFF;
  margin-top: 0.2em;
}
#about picture.red-badge,
#quote picture.red-badge {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
#about picture.image-about img,
#quote picture.image-about img {
  width: 100%;
}
#about .red-square,
#quote .red-square {
  border: 7px solid #CE3D49;
  width: 71px;
  height: 71px;
  position: absolute;
  bottom: 20px;
}
#about .container-main-title,
#quote .container-main-title {
  background: #FFFFFF;
}
#about .red-badge-container,
#quote .red-badge-container {
  right: 5%;
  top: 0;
  width: 115px;
  height: 162px;
}
@media screen and (min-width: 641px) {
  #about .red-badge-container,
  #quote .red-badge-container {
    right: 3.5em;
    top: 0.2em;
    width: unset;
    height: unset;
  }
  #about .years-container,
  #quote .years-container {
    margin-top: 1em;
  }
  #about .years-container,
  #quote .years-container {
    width: 100%;
  }
}
@media screen and (min-width: 1025px) {
  #about .container-main-title,
  #quote .container-main-title {
    padding-left: 20px;
    margin-left: 20px;
  }
  #about .years-container,
  #quote .years-container {
    margin-top: 1.5em;
  }
  #about picture.image-about,
  #quote picture.image-about {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  #about picture.image-about img,
  #quote picture.image-about img {
    width: 100%;
  }
}

/*About*/
#about .red-square {
  bottom: 10px;
}
#about .container-main-title {
  margin-left: 20px;
  padding-left: 15px;
  padding-top: 10px;
}
#about .container-image {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 490px) {
  #about .container-image {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
  }
  #about .container-image .image-about img, #about .container-image picture.image-about {
    width: 100vw;
    height: auto;
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  #about .red-square {
    bottom: 20px;
  }
  #about .container-main-title {
    padding-top: 0;
  }
}

/*Vinyl*/
#vinyl {
  /* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
  /* Colours */
  /* Fluid heading sizes - set your min/max sizes and you're done! */
  /* Some device sizes to use with min-width */
  /* adjusted breakpoints for above */
  /* 100% widths look better than "Snapping" IMO */
  /* Utility */
  /* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
}
#vinyl .owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}
#vinyl .owl-carousel .owl-item {
  display: flex;
  height: auto;
}
#vinyl .owl-carousel .owl-stage-outer {
  overflow: hidden;
}
#vinyl .carousel-item {
  background: #FFFFFF;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
}
#vinyl .carousel-item picture {
  margin-left: 15px !important;
  margin-right: 15px !important;
}
#vinyl .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
  min-height: 190px;
}
#vinyl .carousel-item .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 4px solid #CE3D49;
  padding: 15px;
  padding-top: 30px;
  padding-bottom: 30px;
}
#vinyl .carousel-item .main-content p {
  color: #414042;
  opacity: 0.71;
}
#vinyl .carousel-item h2, #vinyl .carousel-item h3, #vinyl .carousel-item h4, #vinyl .carousel-item h5, #vinyl .carousel-item h6 {
  color: #414042;
}
#vinyl .owl-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
}
#vinyl .owl-nav button {
  background: #CE3D49;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#vinyl .title {
  opacity: 1 !important;
  margin-bottom: 8px;
}
#vinyl .main-content h4 {
  font-weight: bold;
}
@media screen and (min-width: 1025px) {
  #vinyl .carousel-item .main-content {
    padding: 40px 15px 40px;
  }
}
@media screen and (min-width: 1440px) {
  #vinyl .owl-stage-outer {
    position: relative;
  }
  #vinyl .owl-prev {
    position: absolute;
    left: 0;
    top: 35%;
  }
  #vinyl .owl-next {
    position: absolute;
    right: 0;
    top: 35%;
  }
}
#vinyl .top {
  font: italic normal normal 12px/12px "IBM Plex Serif";
  color: #FFFFFF;
  margin-bottom: 3px;
}
#vinyl .container-badges picture {
  width: 100% !important;
  max-width: 300px !important;
  height: 100% !important;
  max-height: 100% !important;
  margin-left: auto;
  margin-right: auto;
}
#vinyl .container-badges picture img {
  width: 100%;
  height: 100%;
}
#vinyl .main {
  font-family: "Anton";
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 28px;
}
#vinyl .content-badge {
  width: fit-content;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#vinyl .bottom {
  color: #FFFFFF;
  font: normal normal normal 10px/10px "Montserrat";
}
#vinyl .container-vinyl-grey {
  background: transparent linear-gradient(115deg, #414042 0%, #2F2E30 100%) 0% 0% no-repeat padding-box;
  text-align: center;
}
#vinyl .container-vinyl-grey h2, #vinyl .container-vinyl-grey h3, #vinyl .container-vinyl-grey h4, #vinyl .container-vinyl-grey h5, #vinyl .container-vinyl-grey h6, #vinyl .container-vinyl-grey p {
  color: #FFFFFF;
}
#vinyl .container-vinyl-grey h2 {
  font-weight: bold;
}
#vinyl .content-main p {
  max-width: 967px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 530px) {
  #vinyl .main {
    font-family: "Anton";
    color: #FFFFFF;
    font-weight: 400;
    margin-bottom: 0;
    font-size: clamp(2.375rem, 38px + (40 - 38) * (100vw - 320px) / 1600, 2.5rem);
    line-height: clamp(2.5rem, 40px + (70 - 40) * (100vw - 320px) / 1600, 4.375rem);
  }
  #vinyl .top {
    font: italic normal normal 17px/27px "IBM Plex Serif";
  }
  #vinyl .bottom {
    font: normal normal normal 14px/27px "Montserrat";
  }
  #vinyl .content-badge {
    width: 184px;
  }
}
#vinyl .container-vinyl-grey {
  padding-top: 70vw;
  margin-top: -55vw;
}
@media screen and (min-width: 650px) {
  #vinyl .container-vinyl-grey {
    padding-top: 480px;
    margin-top: -394px;
  }
}
@media screen and (min-width: 1025px) {
  #vinyl .container-vinyl-grey {
    padding-top: 185px;
    margin-top: -8vw;
  }
  #vinyl .top {
    font: italic normal normal 14px/27px "IBM Plex Serif";
  }
  #vinyl .main {
    font-size: 30px;
    line-height: 34px;
  }
  #vinyl .container-badges picture {
    width: fit-content !important;
    max-width: 100% !important;
    height: 16vw !important;
    max-height: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
  #vinyl .container-badges picture img {
    width: 100%;
    height: 16vw;
  }
}
@media screen and (min-width: 1440px) {
  #vinyl .main {
    font-size: clamp(2.375rem, 38px + (45 - 38) * (100vw - 320px) / 1600, 2.8125rem);
    line-height: clamp(2.5rem, 40px + (70 - 40) * (100vw - 320px) / 1600, 4.375rem);
  }
  #vinyl .top {
    font: italic normal normal 17px/27px "IBM Plex Serif";
  }
  #vinyl .container-vinyl-grey {
    margin-top: -130px;
  }
  #vinyl .container-badges picture {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  #vinyl .container-badges picture img {
    width: 100%;
    height: 100%;
  }
  #vinyl .content-badge {
    height: 250px;
  }
}

/*Why Choose*/
#why_choose {
  margin-top: 80px;
}
#why_choose h2 {
  font-weight: bold;
  text-transform: uppercase;
}
#why_choose .content-top {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
#why_choose .card {
  background: #414042;
  padding: 50px 15px;
}
#why_choose .card h2, #why_choose .card h3, #why_choose .card h4, #why_choose .card h5 {
  text-transform: uppercase;
  font-weight: bold;
}
#why_choose .card h2, #why_choose .card h3, #why_choose .card h4, #why_choose .card h5, #why_choose .card p {
  color: #FFFFFF;
}
#why_choose .icon-environmentally-friendly,
#why_choose .icon-durable,
#why_choose .icon-low-maintenance {
  font-size: 45px;
  color: #FFFFFF;
}
#why_choose .container-icon {
  margin-left: auto;
  margin-right: auto;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #504F51;
  border: 2px solid #CE3D49;
}
#why_choose h4 {
  margin-top: 30px;
}
@media screen and (min-width: 1025px) {
  #why_choose {
    margin-top: 118px;
  }
  #why_choose .card {
    padding: 70px 28px;
  }
}

/*FAQ*/
#faq {
  background: #414042;
  margin-top: 90px;
  padding-top: 110px;
  padding-bottom: 70px;
}
@media screen and (max-width: 340px) {
  #faq h2 {
    font-size: 34px !important;
  }
}
#faq .red-square {
  border: 7px solid #CE3D49;
  width: 71px;
  height: 71px;
  position: absolute;
  bottom: 100px;
}
#faq h2 {
  text-transform: uppercase;
  font-weight: bold;
  background: #414042;
  margin-left: 23px;
  padding-left: 10px;
  padding-top: 10px;
}
#faq h2, #faq h3, #faq h4, #faq h5, #faq h6, #faq p {
  color: #FFFFFF;
}
#faq .icon-plus,
#faq .icon-minus {
  color: #FFFFFF;
  font-size: 16px;
}
#faq .faq-item {
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #525153;
}
#faq .faq-item:first-of-type {
  padding-top: 0;
}
#faq .faq-item.active, #faq .faq-item:hover {
  cursor: pointer;
}
#faq .faq-answer {
  display: none;
  margin-top: 8px;
}
#faq .container-main-title {
  max-width: 350px;
}
@media screen and (max-width: 490px) {
  #faq .container-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
  }
  #faq .container-image img, #faq .container-image picture {
    width: 100vw;
    height: auto;
    display: block;
  }
}
@media screen and (min-width: 600px) {
  #faq .red-square {
    bottom: 120px;
  }
}
@media screen and (min-width: 1025px) {
  #faq {
    margin-top: 8em;
    padding-top: 6em;
    padding-bottom: 6em;
  }
  #faq .container-main-title {
    max-width: 100%;
  }
  #faq h2 {
    padding-top: 0;
  }
  #faq .red-square {
    bottom: 3.5em;
  }
}
@media screen and (min-width: 1440px) {
  #faq .red-square {
    bottom: 88px;
  }
}

/*Gallery*/
#gallery {
  margin-top: 80px;
}
#gallery .card-hover {
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 85%;
  top: 5%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#gallery a[data-fancybox=vinyl-gallery]:hover .card-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#gallery img {
  height: 154px;
  width: 100%;
  object-fit: cover;
}
#gallery .container-icon {
  width: 80px;
  height: 80px;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
}
#gallery .icon-plus {
  color: #FFFFFF;
  font-size: 20px;
}
@media screen and (min-width: 1025px) {
  #gallery {
    margin-top: 9em;
  }
  #gallery img {
    height: 287px;
  }
}

/*Quote*/
#quote {
  background: #414042;
  margin-top: 64px;
  padding-top: 110px;
  padding-bottom: 80px;
}
#quote .container-main-title {
  background: #414042;
  margin-left: 20px;
  padding-left: 20px;
  padding-top: 10px;
}
#quote .container-main-title {
  max-width: 350px;
}
#quote h2, #quote h3, #quote h4, #quote h5, #quote h6, #quote p {
  color: #FFFFFF;
}
#quote .red-square {
  bottom: 3.5em;
}
@media screen and (max-width: 490px) {
  #quote .container-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
  }
  #quote .container-image img, #quote .container-image picture {
    width: 100vw;
    height: auto;
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  #quote {
    padding-top: 7em;
    padding-bottom: 7em;
    margin-top: 5em;
  }
  #quote .container-main-title {
    max-width: 75%;
  }
  #quote .container-main-title {
    padding-top: 0;
  }
}
@media screen and (min-width: 1200px) {
  #quote .container-main-title {
    max-width: 100%;
  }
  #quote .red-square {
    bottom: 15px;
  }
}