html {
  position: relative;
  z-index: -2;
}

body {
  background-image: url("/img/bg-pattern.jpg");
  background-position: center;
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  min-height: 100vh;
  background-color: #FFE886;
  -webkit-clip-path: polygon(75% 0, 100% 0%, 100% 100%, 10% 100%);
          clip-path: polygon(75% 0, 100% 0%, 100% 100%, 10% 100%);
}

@media (min-width: 640px) {
  body::after {
    -webkit-clip-path: polygon(70% 0, 100% 0%, 100% 100%, 30% 100%);
            clip-path: polygon(70% 0, 100% 0%, 100% 100%, 30% 100%);
  }
}

@media (min-width: 1024px) {
  body::after {
    -webkit-clip-path: polygon(81% 0, 100% 0%, 100% 100%, 50% 100%);
            clip-path: polygon(81% 0, 100% 0%, 100% 100%, 50% 100%);
  }
}

.textballoon-wrapper {
  transform: rotate(-7deg) !important;
}

.textballoon {
  line-height: 1.39;
  margin-left: 12px;
}

@media (min-width: 640px) {
  html[lang=nl] .textballoon {
    font-size: 40px;
  }
}

@media (min-width: 768px) {
  html[lang=nl] .textballoon {
    font-size: 45px;
  }
}

.textballoon > div {
  line-height: 41px;
  display: table;
  clear: both;
  width: auto;
  position: relative;
  transform: rotate(0deg);
  padding: 0 15px 12px 18px;
  box-shadow: 11px 11px 0px white;
}

.textballoon > div:first-child {
  padding-top: 8px;
}

.textballoon > div:last-child {
  padding-bottom: 18px;
}

.textballoon > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 102%;
  background: #40395b;
  transform: rotate(0deg);
  z-index: -1;
}

.textballoon::after {
  border-style: solid;
  top: 100%;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #40395b;
  border-width: 30px 30px 0 0;
  margin-left: 12px;
}

@media (min-width: 640px) {
  .textballoon::after {
    border-width: 40px 40px 0 0;
  }
}

.textballoon::before {
  border-style: solid;
  top: calc(100% + 4px);
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: white;
  border-width: 38px 38px 0 0;
  margin-left: 12px;
}

@media (min-width: 640px) {
  .textballoon::before {
    border-width: 50px 50px 0 0;
  }
}

.border-custom {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2340395B' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='2' stroke-linecap='square'/%3e%3c/svg%3e");
}

@media (min-width: 1024px) {
  .lg\:border-custom {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2340395B' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='2' stroke-linecap='square'/%3e%3c/svg%3e");
  }
}

@media (min-width: 1024px) {
  .lg\:border-none {
    background: none;
  }
}

@media (min-width: 1024px) {
  .lg\:bg-white {
    background-color: white;
  }
}

.image-custom {
  max-width: 100%;
}

@media (min-width: 450px) {
  .image-custom {
    max-width: 350px;
  }
}

@media (min-width: 600px) {
  .image-custom {
    max-width: 470px;
  }
}

.custom-text-subtitle {
  font-size: 70%;
}

.custom-text-title {
  font-size: 100%;
}

@media (min-width: 600px) {
  .custom-text-title {
    max-width: none;
  }
}

.custom-set-font-size {
  font-size: calc(20 * ((100vw - 48px) / 435));
}

@media (min-width: 450px) {
  .custom-set-font-size {
    font-size: calc(20px * (350/435));
  }
}

@media (min-width: 600px) {
  .custom-set-font-size {
    font-size: calc(20px * (435/435));
  }
}

.custom-text-container {
  top: 3%;
  max-width: 75%;
}

.custom-message {
  position: relative;
}

.custom-message::after {
  position: absolute;
  left: 0;
  top: 100%;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 25px 0 0;
  border-color: #89CB9E transparent transparent transparent;
}

.custom-message-info::after {
  border-color: #1c64f2 transparent transparent transparent;
}

.custom-message-error::after {
  border-color: #DC2626 transparent transparent transparent;
}

.custom-message-warning::after {
  border-color: #d03801 transparent transparent transparent;
}

.custom-message-success::after {
  border-color: #059669 transparent transparent transparent;
}