.klubboutfit-video-section {
    height: 850px;
}
.klubboutfit-intro {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 650px;

    overflow: visible;

    background-color: #FFFFFF;
}
.klubboutfit-intro-content {
    position: relative;

    width: min(1500px, calc(100% - 80px));
    height: 100%;

    margin: 0 auto;
}

.klubboutfit-hawk-badge {
    position: absolute;
    top: 180px;
    left: 500px;
    z-index: 6;

    width: 155px;
    height: 155px;

    filter: drop-shadow(10px 2px 0 #8B817A);
    transform: rotate(-4deg);

    pointer-events: none;
}

.klubboutfit-hawk-badge-shape {
    position: relative;

    width: 100%;
    height: 100%;

    background: #FFFFFF;
    color: #49392F;

    clip-path: polygon(50% 0%, 57.2% 4.6%, 65.5% 2.4%, 70.9% 9%, 79.4% 9.5%, 82.5% 17.5%, 90.5% 20.6%, 91% 29.1%, 97.6% 34.5%, 95.4% 42.8%, 100% 50%, 95.4% 57.2%, 97.6% 65.5%, 91% 70.9%, 90.5% 79.4%, 82.5% 82.5%, 79.4% 90.5%, 70.9% 91%, 65.5% 97.6%, 57.2% 95.4%, 50% 100%, 42.8% 95.4%, 34.5% 97.6%, 29.1% 91%, 20.6% 90.5%, 17.5% 82.5%, 9.5% 79.4%, 9% 70.9%, 2.4% 65.5%, 4.6% 57.2%, 0% 50%, 4.6% 42.8%, 2.4% 34.5%, 9% 29.1%, 9.5% 20.6%, 17.5% 17.5%, 20.6% 9.5%, 29.1% 9%, 34.5% 2.4%, 42.8% 4.6%);
}

.klubboutfit-hawk-badge span {
    position: absolute;
    top: 54px;
    left: 0;

    width: 100%;

    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.klubboutfit-hawk-badge strong {
    position: absolute;
    top: 75px;
    left: 0;

    width: 100%;

    font-family: "Great Vibes", cursive;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}
.klubboutfit-book-collage {
    position: absolute;

    top: -58px;
    left: 50%;
    z-index: 2;

    width: 1180px;
    height: auto;

    display: block;

    object-fit: contain;

    transform: translateX(-50%);

    pointer-events: none;
    user-select: none;
}
.klubboutfit-intro-model {
    position: absolute;

    top: -230px;
    right: 20px;
    z-index: 5;

    width: 500px;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.klubboutfit-history-text {
    position: absolute;

    top: 45px;
    left: 53%;
    z-index: 4;

    width: 310px;

    margin-left: -185px;

    color: #49392F;

    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;

    transform: rotate(11.824696925798492deg);
    transform-origin: center;
}

.klubboutfit-history-text p {
    margin: 0;
}
.klubboutfit-hawk-tagline {
    position: absolute;

    top: 320px;
    left: 45%;
    z-index: 4;

    width: 280px;

    margin: 0;
    margin-left: 275px;

    color: #4B3325;

    font-family: "Quicksand", sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    line-height: normal;

    text-align: center;

    transform: rotate(10.310170865494797deg);
    transform-origin: center;
}
.klubboutfit-current-text {
    position: absolute;

    top: 379px;
    left: 46%;
    z-index: 4;

    width: 210px;

    margin-left: 250px;

    color: #49392F;

    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;

    transform: rotate(11.824696925798492deg);
    transform-origin: center;
}

.klubboutfit-current-text p {
    margin: 0;
}
.klubboutfit-torn-edge {
    position: absolute;

    left: 0;
    bottom: -100px;
    z-index: 6;

    width: 100%;
    height: 100px;

    display: block;

    object-fit: fill;

    pointer-events: none;
    user-select: none;
}
.klubboutfit-details {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 1500px;

    overflow: hidden;

    background-image:
        url("../../assets/images/club-outfit/background.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.klubboutfit-details-content {
    position: relative;
    z-index: 2;

    width: min(1500px, calc(100% - 80px));
    height: 1500px;

    margin: 0 auto;
}
.outfit-horse {
    position: absolute;

    top: 135px;
    left: 185px;
    z-index: 2;

    width: 760px;
    height: auto;
}
.outfit-horse-base {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-horse-equipment {
    position: absolute;

    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-harvey {
    position: absolute;

    top: 175px;
    left: 350px;
    z-index: 5;

    width: 130px;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-model-wrapper {
    position: absolute;

    top: 250px;
    left: 885px;
    z-index: 4;

    width: 200px;
}
.outfit-model {
    position: relative;

    width: 200px;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-hotspot {
    position: absolute;
    z-index: 20;

    display: block;

    background-color: transparent;

    cursor: pointer;
}

.horse-hotspot-bridle {
    top: 70px;
    left: 600px;

    width: 115px;
    height: 150px;
}
.horse-hotspot-saddle {
    top: 175px;
    left: 280px;

    width: 180px;
    height: 135px;
}
.horse-hotspot-saddlepad {
    top: 215px;
    left: 245px;

    width: 205px;
    height: 120px;
}
.horse-hotspot-leg-front {
    top: 500px;
    left: 480px;

    width: 95px;
    height: 130px;
}
.horse-hotspot-leg-back {
    top: 515px;
    left: 70px;

    width: 110px;
    height: 125px;
}
.horse-hotspot-decoration-head {
    top: 30px;
    left: 600px;

    width: 70px;
    height: 70px;
}
.horse-hotspot-decoration-tail {
    top: 200px;
    left: 70px;

    width: 70px;
    height: 70px;
}

.model-hotspot-hat {
    top: 0;
    left: 25px;

    width: 170px;
    height: 85px;
}
.model-hotspot-shirt {
    top: 100px;
    left: 35px;

    width: 130px;
    height: 170px;
}
.model-hotspot-gloves-left {
    top: 120px;
    left: -5px;

    width: 70px;
    height: 70px;
}
.model-hotspot-gloves-right {
    top: 250px;
    left: 150px;

    width: 70px;
    height: 70px;
}
.model-hotspot-pants {
    top: 270px;
    left: 45px;

    width: 120px;
    height: 197px;
}
.model-hotspot-boots {
    top: 450px;
    left: 30px;

    width: 135px;
    height: 125px;
}
.outfit-tooltip {
    position: absolute;
    z-index: 50;

    width: 215px;

    padding: 13px 16px;

    border-radius: 14px;

    background-color: #FFFFFF;
    color: #4B4541;

    font-family: "Quicksand", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;

    text-align: center;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;

    filter: blur(3px);

    pointer-events: none;

    transform: translateY(7px);

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease,
        filter 220ms ease;
}
.outfit-tooltip strong,
.outfit-tooltip span {
    display: block;
}

.outfit-tooltip strong {
    font-weight: 400;
}
.outfit-hotspot:hover .outfit-tooltip {
    opacity: 1;
    visibility: visible;

    filter: blur(0);

    transform: translateY(0);
}

.tooltip-top {
    left: 50%;
    bottom: calc(100% + 14px);

    transform:
        translateX(-50%)
        translateY(5px);
}

.outfit-hotspot:hover .tooltip-top {
    transform:
        translateX(-50%)
        translateY(0);
}
.tooltip-bottom {
    top: calc(100% + 14px);
    left: 50%;

    transform:
        translateX(-50%)
        translateY(-5px);
}

.outfit-hotspot:hover .tooltip-bottom {
    transform:
        translateX(-50%)
        translateY(0);
}
.tooltip-left {
    top: 50%;
    right: calc(100% + 14px);

    transform:
        translateY(-50%)
        translateX(5px);
}

.outfit-hotspot:hover .tooltip-left {
    transform:
        translateY(-50%)
        translateX(0);
}
.tooltip-right {
    top: 50%;
    left: calc(100% + 14px);

    transform:
        translateY(-50%)
        translateX(-5px);
}

.outfit-hotspot:hover .tooltip-right {
    transform:
        translateY(-50%)
        translateX(0);
}
.outfit-tooltip::after {
    content: "";

    position: absolute;

    width: 0;
    height: 0;
}
.tooltip-top::after {
    top: 100%;
    left: 50%;

    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFFFFF;

    transform: translateX(-50%);
}
.tooltip-bottom::after {
    bottom: 100%;
    left: 50%;

    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #FFFFFF;

    transform: translateX(-50%);
}
.tooltip-left::after {
    top: 50%;
    left: 100%;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #FFFFFF;

    transform: translateY(-50%);
}
.tooltip-right::after {
    top: 50%;
    right: 100%;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #FFFFFF;

    transform: translateY(-50%);
}
.outfit-winter-trigger {
    position: absolute;

    top: 430px;
    left: 1145px;
    z-index: 40;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #FFFFFF;

    font-family: Arial, sans-serif;
    font-size: 44px;
    line-height: 1;

    cursor: pointer;

    transition:
        color 100ms ease,
        filter 100ms ease;
}
.outfit-winter-trigger:hover {
    color: transparent;
    filter: none;
}
.outfit-winter-panel {
    position: absolute;

    top: 250px;
    left: 1090px;
    z-index: 25;

    width: 200px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 120ms ease,
        visibility 120ms ease;
}
.outfit-winter-trigger:hover + .outfit-winter-panel {
    opacity: 1;
    visibility: visible;
}
.outfit-winter-model {
    position: relative;
    z-index: 1;

    width: 210px;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-winter-panel .outfit-hotspot {
    pointer-events: none;
}
.winter-hotspot-hat {
    top: 10px;
    left: 45px;

    width: 110px;
    height: 55px;
}
.winter-hotspot-shirt {
    top: 95px;
    left: 40px;

    width: 120px;
    height: 130px;
}
.winter-hotspot-gloves-right {
    top: 250px;
    right: 0;

    width: 50px;
    height: 70px;
}
.winter-hotspot-boots {
    top: 450px;
    left: 35px;

    width: 130px;
    height: 100px;
}

.outfit-winter-panel .outfit-tooltip {
    opacity: 1;
    visibility: visible;

    filter: blur(0);

    pointer-events: none;

    transition: none;
}

.winter-hotspot-hat .outfit-tooltip {
    top: 50%;
    right: calc(100% + 14px);
    left: auto;

    transform:
        translateY(-50%)
        translateX(0);
}
.winter-hotspot-shirt .outfit-tooltip {
    top: 50%;
    right: calc(100% + 14px);
    left: auto;

    transform:
        translateY(-50%)
        translateX(0);
}
.winter-hotspot-gloves-right .outfit-tooltip {
    top: 50%;
    left: calc(100% + 14px);
    right: auto;

    transform:
        translateY(-50%)
        translateX(0);
}
.winter-hotspot-boots .outfit-tooltip {
    top: 50%;
    left: calc(100% + 14px);
    right: auto;

    transform:
        translateY(-50%)
        translateX(0);
}
.outfit-lower-section {
    position: absolute;

    top: 960px;
    left: 0;
    z-index: 6;

    width: 100%;
    height: 680px;

    pointer-events: none;
}
.outfit-lower-plant {
    position: absolute;

    left: 160px;
    bottom: 135px;
    z-index: 50;

    width: 300px;
    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-lower-newspaper {
    position: absolute;

    left: calc(50% + 300px);
    bottom: 190px;
    z-index: 9;

    width: 190px;
    height: auto;

    display: block;

    object-fit: contain;
    transform: rotate(10deg);

    pointer-events: none;
    user-select: none;
}
.outfit-decoration {
    position: absolute;
    z-index: 10;

    height: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.outfit-leaf-1 {
    top: 300px;
    left: 1328px;

    width: 50px;

    transform: rotate(-160deg);
}

.outfit-leaf-2 {
    top: 70px;
    left: 1150px;

    width: 30px;

    transform: rotate(-80deg);
}

.outfit-leaf-3 {
    top: -20px;
    left: 1190px;

    width: 30px;

    transform: rotate(50deg);
}
.outfit-feather-1 {
    top: -380px;
    left: -70px;

    width: 80px;

    transform: rotate(25deg);
}

.outfit-feather-2 {
    top: -300px;
    left: 0px;

    width: 90px;

    transform: rotate(120deg);
}

.outfit-feather-3 {
    top: -720px;
    left: 250px;

    width: 90px;

    transform: rotate(deg);
}

.outfit-feather-4 {
    top: -900px;
    right: 490px;

    width: 90px;

    transform: rotate(90deg);
}

.outfit-feather-5 {
    top: -260px;
    left: 1350px;

    width: 70px;

    transform: rotate(-180deg);
}
.outfit-slideshow {
    position: absolute;

    top: 0px;
    left: 50%;
    z-index: 8;

    width: 700px;
    height: 420px;

    overflow: hidden;

    border: 10px solid #FFFFFF;
    background-color: #EEEAE6;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.12);

    transform: translateX(-50%);

    pointer-events: auto;
}
.outfit-slideshow-track {
    position: relative;

    width: 100%;
    height: 100%;
}
.outfit-slide {
    position: absolute;

    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.outfit-slide.is-active {
    opacity: 1;
    visibility: visible;
}
.outfit-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.outfit-slideshow-dots {
    position: absolute;

    left: 50%;
    bottom: 14px;
    z-index: 10;

    display: flex;
    gap: 8px;

    transform: translateX(-50%);
}

.outfit-slideshow-dot {
    width: 9px;
    height: 9px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background-color: transparent;
}

.outfit-slideshow-dot.is-active {
    background-color: #FFFFFF;
}