html, #wrap {
  background-color: var(--ui-color-redesign-white);
}
.page-header {
  background-color: unset;
  border-bottom: 0;
  position: relative;
  top: 1%;
  left: 2%;
}

#header-section {
  margin-top: -60px;
  display: flex;
  flex-direction: row;

  & img {
    width: 100%;
  }
}
.badge-container {
  margin-top: 50px;
  margin-bottom: 35px;
}
ui-offer, #important-to-know .blog-articles ui-card {
  background-color: var(--ui-color-redesign-mist);
}
#cookie-notice {
  color: #896f6f;
  padding: 20px;
}
.ui-cookie-consent__lang {
  display: none;
}
section > p {
  text-align: center;
}
#header-content {
  background-color: var(--ui-color-orange);
  color: var(--ui-color-apricot);

  & p {
    font-size: 16px;
  }
}

ui-offer:not([layout]) h2, ui-offer[layout=introduction] h2 {
  font: 36px / 1 var(--ui-font-family-headlineblack);
}

ui-offer article :is(p:not(.disclaimer), ol, ul) {
  font: 17px / 22px var(--ui-font-family-subtitlemedium);
  margin-top: 15px;
}

ui-badge {
  border-radius: 0 25px 25px 0;
  position: relative;
  padding: 15px 40px 15px 15px;
  font-size: 20px;
  color: var(--ui-color-redesign-white);
  font-family: 'HeadlineBold', sans-serif;
}

#experts .blog-articles ui-card {
  background-color: #FFECFF;
}
.blog-articles ui-card article {
  padding: 20px;
}
ui-card figure {
  max-height: none;
}
.expert-videos ui-card article {
  padding: 20px;
  background-color: #FFECFF;
}
.experience-videos ui-card article {
  padding: 20px;
  background-color: var(--ui-color-apricot);
}
#experience .blog-articles ui-card {
  background-color: var(--ui-color-apricot);
}

#payment-system-video h1 {
  margin-bottom: 20px;
}

ui-offer {
  padding: 30px;

  & article {
    flex: 1;
  }
}

ui-modal.-presented .ui-modal__backdrop {
  background-color: #72605e;
  opacity: 0.9;
  transition-timing-function: ease-out;
}

ui-modal .ui-modal__window {
  padding-top: 45px;
}

ui-curtain[layout=spoiler]>.ui-curtain__head .ui-curtain__head-title {
  font: 17px / 32px var(--ui-font-family-body);
}

ui-icon>img, ui-icon>svg {
  height: 80%;
  width: 80%;
}

@media screen and (max-width: 767px) {
  .blog-articles {
    flex-direction: column;
  }
  #expert-article-1 img {
    content:url("../images/expert-article-1.jpg");
  }
  #expert-article-2 img {
    content:url("../images/expert-article-2.jpg");
  }
  #expert-article-3 img {
    content:url("../images/expert-article-3.jpg");
  }
  #expert-article-4 img {
    content:url("../images/expert-article-4.jpg");
  }
  #experience-article-1 img {
    content:url("../images/experience-article-1.jpg");
  }
  #experience-article-2 img {
    content:url("../images/experience-article-2.jpg");
  }
  #important-article-1 img {
    content:url("../images/important-article-1.jpg");
  }
  #important-article-2 img {
    content:url("../images/important-article-2.jpg");
  }
  #important-article-3 img {
    content:url("../images/important-article-3.jpg");
  }
  #important-article-4 img {
    content:url("../images/important-article-4.jpg");
  }
  #important-article-5 img {
    content:url("../images/important-article-5.jpg");
  }
  #important-article-6 img {
    content:url("../images/important-article-6.jpg");
  }
  #important-article-7 img {
    content:url("../images/important-article-7.jpg");
  }
  #important-article-8 img {
    content:url("../images/important-article-8.jpg");
  }
  ui-offer img {
    height: 350px !important;
  }
}
@media screen and (min-width: 768px) {
  .blog-articles ui-card {
    flex-direction: row-reverse;

    & figure {
      width: 30%;
    }
  }
  #logo {
    width: 12rem;
  }
  #payment-system-video {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ui-offer ui-buttonbar {
    display: block;
  }
}
@media screen and (max-width: 1023px) {
  #header-section {
    flex-direction: column;

    & #header-content {
      padding: 20px;
    }
  }
  .page-header {
    top: 0;
    left: 2%;
  }
}
@media screen and (min-width: 1024px) {
  #header-content {
    padding: 50px;
    margin: 13% 20% auto -35%;
  }
  #wrap {
    margin-top: 4vh;
  }
}
@media screen and (max-width: 1139px) {
  #header-content h2 {
    font-size: 30px;
  }
}
@media screen and (min-width: 1140px) {
  #header-content h2 {
    font-size: 38px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 1259px) {
  #payment-system-video {
    padding: 30px;
  }
}
@media screen and (min-width: 1260px) {
  #payment-system-video {
    margin-bottom: 30px;

    & h1 {
      margin-top: 30px;
    }
  }
}