.splide-atd-slide .splide__video {
  background-color: #000;
}

.splide-atd-slide .splide__video__play:after {
  border-color: #fff;
}

@media (min-width: 576px) {
  .res-asp.asp-1b6 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b6 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b6 {
    --tw-aspect-h: 6;
  }
  .res-asp.asp-1b5 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b5 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b5 {
    --tw-aspect-h: 5;
  }
  .res-asp.asp-1b4 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b4 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b4 {
    --tw-aspect-h: 4;
  }
  .res-asp.asp-1b3 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b3 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b3 {
    --tw-aspect-h: 3;
  }
  .res-asp.asp-1b2 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b2 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b2 {
    --tw-aspect-h: 2;
  }
  .res-asp.asp-1b1 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;
  }
  .res-asp.asp-1b1 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .res-asp.asp-1b1 {
    --tw-aspect-h: 1;
  }
}

@media (min-width: 768px) {
  .ajxd-ajd {
    flex: 0 1 230px;
  }
  .asp-slide {
    --tw-aspect-h: 7;
  }
}
@media (min-width: 992px) {
  .ajxd-ajd {
    flex: 0 1 300px;
  }
}

@media (min-width: 576px) {
  .ajxd-ajd {
    padding-bottom: 7rem;
    margin-bottom: 0rem;
    overflow-y: hidden;
  }
}
.banner-content {
  margin-top: 0 !important;
}
.mb-st {
  white-space: nowrap !important;
}
.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box {
  background-color: white !important;
}
.btn-vote {
  @apply rounded-md px-6 w-full py-3 text-center bg-1st text-whiten hover:bg-2nd border-transparent cursor-pointer transition-all sm:max-w-[145px];
  outline: none;
}

.btn-vote a {
  @apply text-whiten;
}

.button-social-login {
  @apply flex items-center justify-center space-x-2 border rounded-md min-w-[200px] border-grey-light py-2 px-2 mx-auto mb-5 hover:border-grey transition-all;
  outline: none;
}

.button-social-login p {
  font-size: 16px;
}

.form-wrapper .form-style {
  @apply border-grey-light;
}

label {
  font-size: 18px;
}

input::placeholder {
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: 300;
}

header {
  height: 70px !important;
  vertical-align: middle !important;
}
header > .flex {
  height: 100%;
}
.search {
  vertical-align: middle;
}