@font-face {
  font-family: "Helvetica-Neue";
  src: url("fonts/helveticaneue-regular.woff") format("woff");
  font-weight: 400
}

@font-face {
  font-family: "Helvetica-Neue";
  src: url("fonts/helveticaneue-bold.woff") format("woff");
  font-weight: 700
}

.fruwo-member-card-wrapper {
  --base-size: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(1*var(--base-size));
  background-color: rgba(0, 0, 0, .0745098039)
}

@media(min-width: 320px) {
  .fruwo-member-card-wrapper {
    --base-size: 7px
  }
}

@media(min-width: 360px) {
  .fruwo-member-card-wrapper {
    --base-size: 10px
  }
}

@media(min-width: 410px) {
  .fruwo-member-card-wrapper {
    --base-size: 12px
  }
}

@media(min-width: 600px) {
  .fruwo-member-card-wrapper {
    --base-size: 14px
  }
}

.fruwo-member-card-wrapper .fruwo-member-card {
  position: relative;
  border-radius: calc(1*var(--base-size));
  width: calc(32*var(--base-size));
  height: calc(20.4*var(--base-size));
  display: flex;
  flex-direction: column;
  gap: calc(2*var(--base-size));
  color: #000
}

.fruwo-member-card-wrapper .fruwo-member-card img {
  border-radius: 3px;
  width: 100%;
  height: 100%
}

.fruwo-member-card-wrapper .fruwo-member-card svg {
  width: 100%;
  height: auto
}

.fruwo-member-card-wrapper .fruwo-member-card .title {
  font-size: calc(1.6*var(--base-size));
  margin: 0;
  padding: 0
}

.fruwo-member-card-wrapper .fruwo-member-card .card-front-outer,
.fruwo-member-card-wrapper .fruwo-member-card .card-back-outer {
  backface-visibility: hidden;
  transition: transform .35s;
  transform-style: preserve-3d;
  perspective: 1000px;
  position: absolute;
  top: 0;
  left: 0
}

.fruwo-member-card-wrapper .fruwo-member-card .card-back-outer {
  transform: rotateY(180deg)
}

.fruwo-member-card-wrapper .fruwo-member-card.flipped .card-front-outer {
  transform: rotateY(180deg)
}

.fruwo-member-card-wrapper .fruwo-member-card.flipped .card-back-outer {
  transform: rotateY(0)
}

.fruwo-member-card-wrapper .fruwo-member-card .card-front,
.fruwo-member-card-wrapper .fruwo-member-card .card-back {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(32*var(--base-size));
  height: calc(20.4*var(--base-size));
  border-radius: calc(1*var(--base-size));
  overflow: hidden;
  box-shadow: calc(0.3*var(--base-size)) calc(0.4*var(--base-size)) calc(1*var(--base-size)) rgba(0, 0, 0, .0745098039)
}

.fruwo-member-card-wrapper .fruwo-member-card .front-heading,
.fruwo-member-card-wrapper .fruwo-member-card .back-heading {
  height: calc(6*var(--base-size));
  flex-shrink: 0;
  background-color: #fff;
  padding-inline: calc(1.2*var(--base-size));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content,
.fruwo-member-card-wrapper .fruwo-member-card .back-content {
  flex-grow: 1;
  position: relative;
  z-index: 0;
  background-color: #e7eff4;
  padding: calc(1.7*var(--base-size)) calc(1.4*var(--base-size));
  display: grid;
  grid-template-rows: 100%
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content {
  grid-template-columns: calc(8.2*var(--base-size)) 1fr;
  column-gap: calc(2.4*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .background {
  position: absolute;
  inset: -1px;
  z-index: -1
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .background video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-image {
  border-radius: calc(0.3*var(--base-size));
  object-fit: cover;
  aspect-ratio: 4/5
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(0.8*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .details-grid {
  display: grid;
  grid-template-rows: 1fr max-content;
  row-gap: calc(0.8*var(--base-size));
  grid-template-columns: 52% 1fr;
  column-gap: calc(1.2*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .details-grid .detail {
  display: flex;
  flex-direction: column;
  align-items: start
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .details-grid .detail .detail-label {
  font-size: calc(0.6*var(--base-size));
  color: #246a90
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .details-grid .detail .detail-value {
  font-size: calc(1*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .flag-teaser {
  display: flex;
  align-items: end;
  gap: calc(1*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .flag-teaser svg {
  aspect-ratio: 1;
  height: calc(1.4*var(--base-size));
  width: auto
}

.fruwo-member-card-wrapper .fruwo-member-card .front-content .member-details .flag-teaser .notice {
  line-height: 1;
  font-size: calc(0.6*var(--base-size));
  max-width: 38ch;
  color: #246a90
}

.fruwo-member-card-wrapper .fruwo-member-card .back-heading {
  justify-content: space-between
}

.fruwo-member-card-wrapper .fruwo-member-card .back-content .icon svg {
  position: absolute;
  left: calc(1.1*var(--base-size));
  bottom: calc(1.5*var(--base-size));
  aspect-ratio: 1;
  width: calc(3.6*var(--base-size));
  height: auto
}

.fruwo-member-card-wrapper .fruwo-member-card .back-image {
  flex-grow: 1
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-frame {
  position: absolute;
  top: calc(7.2*var(--base-size));
  right: calc(1.3*var(--base-size));
  width: calc(7.6*var(--base-size));
  height: calc(11.4*var(--base-size));
  border: 1px solid #fff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-outer {
  position: absolute;
  top: calc(7.4*var(--base-size));
  right: calc(1.5*var(--base-size));
  width: calc(7.2*var(--base-size));
  height: calc(10.9*var(--base-size))
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-outer .stamp {
  position: relative
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-outer .stamp svg {
  width: 100%;
  height: auto
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-outer .stamp .isia-date {
  position: absolute;
  top: calc(0.6*var(--base-size));
  inset-inline: 0;
  text-align: center;
  font-size: calc(0.8*var(--base-size));
  font-weight: 700
}

.fruwo-member-card-wrapper .fruwo-member-card .stamp-outer .stamp .isia-number {
  text-align: center;
  font-size: calc(0.9*var(--base-size));
  position: absolute;
  bottom: calc(0.9*var(--base-size));
  inset-inline: 0
}

.fruwo-member-card-wrapper .fruwo-member-card.level-1 .title {
  color: #97bf0d
}

.fruwo-member-card-wrapper .fruwo-member-card.level-2 .title {
  color: #0076bd
}

.fruwo-member-card-wrapper .fruwo-member-card.level-3 .title {
  color: #e2001a
}

.fruwo-member-card-wrapper .fruwo-member-card.level-4 .stamp-frame {
  top: calc(5.7*var(--base-size));
  left: calc(0.9*var(--base-size));
  right: auto;
  border-color: rgba(0, 0, 0, 0);
  color: #000
}

.fruwo-member-card-wrapper .fruwo-member-card.level-4 .stamp-outer {
  top: calc(5.9*var(--base-size));
  left: calc(1.1*var(--base-size));
  right: auto
}