/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
/* poppins-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/poppins-v20-latin-300.woff2") format("woff2");
}
/* poppins-400 - latin */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v20-latin-regular.woff2") format("woff2");
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/montserrat-v26-latin-300.woff2") format("woff2");
}
.jada-gray {
  color: #ebeced;
}
.jada-white {
  color: #ffffff;
}
.jada-black {
  color: #231f20;
}
.jada-blue {
  color: #255ba2;
}
.jada-logo {
  width: 144px !important;
  height: auto !important;
}
.bg-jada-black {
  background-color: #231f20;
}
.border-jada-black {
  border-color: #231f20 !important;
}
h1.display-1 {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  line-height: 3.875rem;
}
h2,
h6 {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 1.1875rem;
}
h3 {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 2.0625rem;
  line-height: 42px;
}
.socials a {
  color: #255ba2;
}
.socials .bi {
  margin-right: 0.8rem;
}
.socials .bi-youtube {
  font-size: 2.15rem;
  line-height: 1.99rem;
}
p {
  font-family: Montserrat, sans-serif;
}
.btn {
  font-family: Poppins, sans-serif;
  font-weight: 400;
  border: 1px solid #255ba2;
  border-radius: 2px;
  text-transform: uppercase;
  line-height: 1.5625rem;
  min-width: 180px;
}
.btn-primary {
  background-color: #255ba2;
}
.btn:hover {
  background-color: #255ba2;
  border-color: #255ba2;
}
.jada-vert-wrapper {
  overflow: hidden;
}
.jada-vert-wrapper .carousel {
  background-color: #231f20;
  border-color: #231f20;
  overflow: hidden;
}
.carousel-inner {
  border-color: #231f20;
}
.vertical.carousel .carousel-item {
  overflow: hidden;
}
.carousel-inner .carousel-item .card-img {
  width: 100% !important;
  height: auto !important;
  opacity: 0.25;
}
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(5) {
  transform: scale(1);
  transition: none;
}
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(1),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(2),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(3),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(7),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(8),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(9) {
  opacity: 0;
  transition: opacity 250ms ease-in-out 250ms;
}
.jada-vert-wrapper .carousel-inner .card {
  border: #231f20;
}
.vertical.carousel .carousel-control-prev,
.vertical.carousel .carousel-control-next {
  width: 100%;
  height: 60px;
}
.carousel-item .card-img-overlay {
  padding: 0;
}
.carousel-inner .card {
  transform: scale(0.5865);
  transition: transform 0.5s ease, opacity 0.5s ease-out;
}
.carousel-inner .card:nth-child(1),
.carousel-inner .card:nth-child(2),
.carousel-inner .card:nth-child(3),
.carousel-inner .card:nth-child(4),
.carousel-inner .card:nth-child(5) {
  transform-origin: bottom;
}
.carousel-inner .carousel-item.active.carousel-item-end .card:nth-child(5) {
  transform-origin: top;
}
.carousel-inner .card:nth-child(6),
.carousel-inner .card:nth-child(7),
.carousel-inner .card:nth-child(8),
.carousel-inner .card:nth-child(9) {
  transform-origin: top;
}

.carousel-inner .carousel-item-next.carousel-item-start {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}
.carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}
.carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) {
  transition: none;
}
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(5),
.carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(5) {
  transform: scale(1);
  transition: none;
}
.carousel-inner .active.carousel-item-start .card:nth-child(6),
.carousel-inner .active.carousel-item-end .card:nth-child(4) {
  transform: scale(1);
  transition: transform 0.5s ease, opacity 0.5s ease-out;
}
.carousel .buttons {
  position: absolute;
  min-height: 100vh;
  width: 100%;
  opacity: 0;
  z-index: 1101;
}

.carousel:hover .buttons {
  opacity: 100%;
  transition: opacity 300ms ease-in-out;
}
.buttons button {
  opacity: 1;
  transition: opacity 300ms ease-in-out 150ms;
}
.buttons.sliding button {
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}
.buttons .carousel-control-prev {
  bottom: unset;
  top: calc(50vh - ((50vw - 4.5rem - 2px) * 0.562105263157895) / 2);
  display: block;
  opacity: 100%;
}
.buttons .carousel-control-next {
  top: unset;
  bottom: calc(50vh - ((50vw - 4.5rem - 2px) * 0.562105263157895) / 2);
  display: block;
  opacity: 100%;
}
.vertical.carousel .carousel-control-prev,
.vertical.carousel .carousel-control-next {
  z-index: 1101;
}
@media (min-width: 768px) {
  .jada-logo {
    width: 180px !important;
    height: 80px !important;
  }
  h1.display-1 {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    line-height: 1.125em;
    margin-bottom: 1.5rem;
  }
  .jada-vert-wrapper .carousel {
    width: 100%;
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .carousel-inner {
    overflow: visible;
  }
  .carousel-inner .carousel-item {
    margin-top: 0;
    transition: transform 0.5s ease, opacity 0.5s ease-out;
  }
  .carousel-inner .carousel-item .card {
    margin: 80px auto;
    z-index: 801;
  }
  .carousel-inner .carousel-item.active .card:nth-child(5) {
    z-index: 901;
  }
  .carousel-inner .carousel-item .card {
    max-height: calc(100vh);
    max-width: 33vw;
  }
  .carousel-inner .carousel-item-start.active {
    transform: translateY(-10.833%);
  }
  .carousel-inner .carousel-item-end.active {
    transform: translateY(10.833%);
  }
  .carousel-inner .active.carousel-item-start .card:nth-child(6),
  .carousel-inner .active.carousel-item-end .card:nth-child(4) {
    transform: scale(1);
    transition: transform 0.5s ease, opacity 0.5s ease-out;
    z-index: 951;
  }
  .carousel-inner .card .card-img-overlay {
    text-align: center;
  }
  .carousel-inner .card .card-img-overlay img {
    position: relative;
    z-index: 1001;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    margin-top: 10%;
  }
  .carousel-inner .card.portrait {
    z-index: 981;
  }
  .carousel-inner .carousel-item-start.active .card.portrait,
  .carousel-inner .carousel-item-end.active .card.portrait {
    z-index: 981;
  }
  .carousel-inner .card.portrait .card-img-overlay img {
    z-index: 1101;
  }

  .carousel-inner .card.portrait.ryu .card-img-overlay img {
    left: 20%;
    margin-top: -7.5%;
    height: 120% !important;
    width: auto !important;
    object-fit: unset;
  }
  .carousel-inner .card.portrait.spidey .card-img-overlay img {
    left: 27.5%;
    margin-top: -5.5%;
    height: 120% !important;
    width: auto !important;
    object-fit: unset;
  }
  .carousel-inner .card.flat .card-img-overlay img {
    margin-top: 2.5%;
  }
  .carousel-inner .card.portrait.lefty .card-img-overlay img {
    margin-top: -10%;
    height: 140%;
  }
  .carousel-indicators {
    display: none;
  }
  .content-text {
    overflow-y: scroll;
    margin-right: -2.25rem !important;
    padding-right: 0 !important;
  }
  .content-text::-webkit-scrollbar {
    display: none;
  }
  .content-text > * {
    width: 34rem !important;
    margin: 0 auto;
  }
}
@media (min-aspect-ratio: 2/1) {
  .carousel-inner .carousel-item.active.carousel-item-start .card:nth-child(4),
  .carousel-inner .carousel-item.active.carousel-item-end .card:nth-child(4),
  .carousel-inner .carousel-item.active.carousel-item-end .card:nth-child(5) {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:not(:nth-child(5)) {
    opacity: 0;
    transition: opacity 300ms ease-in-out 100ms;
  }
  .carousel:hover .carousel-inner .carousel-item.active .card:nth-child(4),
  .carousel:hover .carousel-inner .carousel-item.active .card:nth-child(6) {
    opacity: 1;
    transition: opacity 500ms ease-in-out 500ms;
  }
}

@media (max-width: 1140px) {
  .content-text > * {
    width: 100% !important;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  h1.display-1 {
    font-size: 3.25rem;
  }
  h3 {
    font-size: 1.625rem;
    line-height: 2.4375rem;
  }
  h2 {
    font-size: 1rem;
    line-height: 1.5625rem;
  }
  .btn {
    min-width: 144px;
    max-width: 144px;
    font-size: 0.875rem;
    display: block;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
  }
  p {
    font-size: 0.875rem;
  }
  .carousel-inner .carousel-item .card {
    display: flex;
    height: 33vh;
    min-height: 33vh;
    max-height: 33vh;
    margin: 0 auto;
    margin-top: 5%;
  }
  .col-md-6,
  .jada-vert-wrapper,
  .carousel,
  .carousel-inner {
    height: 66vh !important;
  }
  .carousel-inner {
    height: 198vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: -115vh;
  }
  .carousel-inner .carousel-item {
    margin-left: 0;
    margin-right: 0;
  }
  .carousel-inner .carousel-item .card {
    display: flex;
    flex-direction: column;
    align-content: middle;
    justify-content: center;
    height: 25vh;
    margin: 0 auto;
    max-width: 85vw;
  }
  .carousel-inner .carousel-item-next:not(.active),
  .carousel-inner .carousel-item-prev:not(.active) {
    display: none;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-start):not(.carousel-item-end) .card:nth-child(5),
  .carousel-inner .carousel-item.active.carousel-item-start .card:nth-child(6),
  .carousel-inner .carousel-item.active.carousel-item-end .card:nth-child(4) {
    opacity: 1;
  }
  .carousel-inner .carousel-item.active.carousel-item-start .card:nth-child(7),
  .carousel-inner .carousel-item.active.carousel-item-end .card:nth-child(3),
  .carousel-inner .carousel-item.active .card:not(:nth-child(5)) {
    opacity: 0;
  }

  .carousel-inner .carousel-item .card-img-overlay {
    display: flex;
    flex-direction: column;
    align-content: middle;
    justify-content: center;
    overflow: visible;
    margin-top: 10vh;
  }
  .carousel-inner .carousel-item .card.portrait .card-img-overlay {
    margin-top: -5vh;
  }
  .carousel-inner .carousel-item .card-img-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .carousel-item {
    transition: transform 0.5s ease;
  }
  .carousel-inner .carousel-item-start.active {
    transform: translateY(-33vh);
    transition: transform 0.5s ease-in-out;
  }
  .carousel-inner .carousel-item-end.active {
    transform: translateY(33vh);
    transition: transform 0.5s ease-in-out;
  }
  .carousel-inner .active.carousel-item-start .card:nth-child(5),
  .carousel-inner .active.carousel-item-end .card:nth-child(5) {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .vertical.carousel .carousel-item {
    overflow: visible;
  }
  .carousel .buttons {
    position: absolute;
    min-height: 66vh;
    top: 0;
    width: 100%;
    opacity: 100%;
    z-index: 1101;
  }

  .buttons .carousel-control-prev {
    bottom: unset;
    top: 5vh;
    display: block;
    opacity: 100%;
  }
  .buttons .carousel-control-next {
    top: unset;
    bottom: 5vh;
    display: block;
    opacity: 100%;
  }
  .vertical.carousel .carousel-control-prev,
  .vertical.carousel .carousel-control-next {
    z-index: 1101;
  }
}