.customer-styles {
  /* START article: des-stage */
  /* END article: des-stage */
}

.customer-styles .template_des-stage {
  background-color: #fff;
  box-sizing: content-box;
  position: relative;
}

.customer-styles .template_des-stage .background-container {
  box-sizing: border-box;
  height: 100%;
  margin-inline: auto;
  max-width: 100%;
  min-width: Min(1280px, 100%);
  overflow: hidden;
  position: relative;
  width: 210vh;
}

.customer-styles .template_des-stage .media-container {
  display: flex;
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.customer-styles .template_des-stage .media-item {
  flex: 1 0 100%;
  position: relative;
}

@media (min-width: 768px) {
  .customer-styles .template_des-stage .media-item {
    height: calc(100vh - 65px - 165px);
  }
}

@media (min-width: 900px) {
  .customer-styles .template_des-stage .media-item {
    height: calc(100vh - 77px - 165px);
  }
}

@media (min-width: 1200px) {
  .customer-styles .template_des-stage .media-item {
    height: calc(100vh - 77px - 119px);
  }
}

@media (max-width: 767px) {
  .customer-styles .template_des-stage .media-item {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 340px);
    height: calc(100svh - 340px);
    min-height: 60vh;
    min-height: 60svh;
  }
}

.customer-styles .template_des-stage .image-container {
  height: 100%;
  position: relative;
  width: 100%;
}

@media (max-width: 767px) {
  .customer-styles .template_des-stage .image-container {
    --text-box-min-height: 0px;
    height: calc(100% - var(--text-box-min-height));
  }
}

.customer-styles .template_des-stage .image-container .image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  width: 100%;
}

.customer-styles .template_des-stage .text-box {
  background: #fff;
  box-sizing: border-box;
  color: #00288c;
  display: grid;
  gap: 25px;
  padding: 20px 25px;
  position: relative;
  width: 100%;
}

@media (max-width: 767px) {
  .customer-styles .template_des-stage .text-box {
    bottom: 0;
    position: absolute;
  }
}

@media (min-width: 768px) {
  .customer-styles .template_des-stage .text-box {
    left: 50px;
    position: absolute;
    top: calc(50% + 18px);
    transform: translateY(-50%);
    width: 440px;
  }
}

.customer-styles .template_des-stage .text-box .link-appearance-default {
  margin-bottom: 8px;
}

@media (min-width: 768px) and (max-height: 800px) {
  .customer-styles .template_des-stage .text-box {
    gap: clamp(15px, 3.125vh, 25px);
    padding: clamp(12px, 0.25vh, 20px) clamp(15px, 3.125vh, 25px);
  }
}

.customer-styles .template_des-stage .roofline {
  font-family: "Delta Sans Regular", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background-color: #fff;
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
  color: #00288c;
  font-size: 16px;
  letter-spacing: .05em;
  line-height: 1.5;
  padding: 11px 40px 0 25px;
  position: absolute;
  top: 0;
  transform: translateY(-96%);
}

.customer-styles .template_des-stage .roofline > p {
  margin: 0;
}

.customer-styles .template_des-stage .roofline > p:not(:first-child) {
  margin-top: 1em;
}

.customer-styles .template_des-stage .roofline > p:not(:last-child) {
  margin-bottom: 1em;
}

@media (min-width: 768px) and (max-height: 800px) {
  .customer-styles .template_des-stage .roofline {
    font-size: clamp(13px, 2.125vh, 17px);
    line-height: 1.4;
  }
  .customer-styles .template_des-stage .h2 {
    font-size: clamp(30px, 5.75vh, 46px);
    line-height: 1.2;
  }
  .customer-styles .template_des-stage .text {
    font-size: clamp(13px, 2.125vh, 17px);
    line-height: 1.4;
  }
  .customer-styles .template_des-stage .link-appearance-default {
    font-size: clamp(14px, 2.25vh, 18px);
  }
}

.customer-styles .template_des-stage .pagination-container {
  align-items: center;
  background-color: #fff;
  bottom: 0;
  color: #00288c;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  height: 36px;
  justify-items: center;
  padding-inline: 25px;
  pointer-events: all;
  right: 0;
}

@media (min-width: 768px) {
  .customer-styles .template_des-stage .pagination-container {
    clip-path: polygon(24px 0%, 100% 0%, 100% 100%, 0% 100%);
    padding-left: 0;
    position: absolute;
  }
}

.customer-styles .template_des-stage .pagination-centered-area {
  align-items: center;
  display: flex;
  gap: 5px;
  grid-column: 2;
  justify-items: center;
  justify-self: center;
}

.customer-styles .template_des-stage .pagination-right-area {
  grid-column: 3;
  justify-self: end;
}

.customer-styles .template_des-stage .pagination-button {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border: 0;
  cursor: pointer;
  height: 12px;
  margin: -10px;
  padding: 22px;
  width: 12px;
}

.customer-styles .template_des-stage .pagination-button.prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M12 6H2M6.2 1.2 1.5 6 6.2 10.8' stroke='%2300288c' stroke-width='2' fill='none'/%3E%3C/svg%3E%0A");
}

.customer-styles .template_des-stage .pagination-button.next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10 6H0M5.8 1.2 10.5 6 5.8 10.8' stroke='%2300288c' stroke-width='2' fill='none'/%3E%3C/svg%3E%0A");
}

.customer-styles .template_des-stage .pagination-numbers {
  display: inline-flex;
  gap: 5px;
}

.customer-styles .template_des-stage .pagination-current-page {
  font-weight: bold;
}

.customer-styles .template_des-stage .pagination-button-pause {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.75 20.75' fill='none' stroke='%2300288c' stroke-width='3'%3E%3Cellipse cx='10' cy='10' rx='10' ry='10' transform='translate(0.375 0.375)' fill='none' stroke='%2300288c' stroke-width='0.75'/%3E%3Cline y2='10' transform='translate(7.875 5.8)'/%3E%3Cline y2='10' transform='translate(12.875 5.8)'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 0;
  cursor: pointer;
  height: 20px;
  margin: -10px;
  padding: 24px 22px 20px;
  width: 20px;
}

.customer-styles .template_des-stage .pagination-button-pause.paused {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.75 20.75'%3E%3Cellipse cx='10' cy='10' rx='10' ry='10' transform='translate(0.375 0.375)' fill='none' stroke='%2300288c' stroke-width='0.75'/%3E%3Cpath d='M4.5,0,9,8H0Z' transform='translate(15.375 5.875) rotate(90)' fill='%2300288c'/%3E%3C/svg%3E%0A");
}