:root {
    --stage-color-xs: #fff;
    --stage-background-xs: #000;
    --stage-color-xl: #fff;
    --stage-background-xl: #000;
}

.stageSlider .stage {
    user-select: none;
}

.stage {
    position: relative;
    color: var(--stage-color-xs);
}

.stage a,
.stage a:hover {
    color: var(--stage-color-xs);
}

@media only screen and (min-width: 768px) {
    .stage a,
    .stage a:hover {
        color: var(--stage-color-xl);
    }
}

@media only screen and (min-width: 768px) {
    .stage {
        color: var(--stage-color-xl);
    }
}

.stage-background {
    position: relative;
}

.stage-background img,
.stage-background video {
    display: block;
    width: 100%;
    height: auto;
}

.stage-background a {
}

.stage-darken {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.stage-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stage-box {
    display: flex;
    flex-direction: column;
    padding: 7.5%; /* margin */
    align-items: center;
    text-align: center;
}

.stage-link {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
}

@media only screen and (max-width: 767px) {
    .stage--alignment-xs-top .stage-content {
        justify-content: start;
    }

    .stage--alignment-xs-middle .stage-content {
        justify-content: center;
    }

    .stage--alignment-xs-bottom .stage-content {
        justify-content: end;
    }

    .stage--alignment-xs-top .stage-box {
        padding-top: 10%;
    }

    .stage--alignment-xs-bottom .stage-box {
        padding-bottom: 10%;
    }
}

@media only screen and (min-width: 768px) {
    .stage-box {
        /*text-align: left;*/
        max-width: 50%;
        min-width: 50%;
    }

    .stage-content {
        justify-content: center;
    }

    .stage--alignment-xl-left .stage-content {
        align-items: start;
    }

    .stage--alignment-xl-center .stage-content {
        align-items: center;
    }

    .stage--alignment-xl-right .stage-content {
        align-items: end;
    }

    .stage--alignment-xl-left .stage-box,
    .stage--alignment-xl-right .stage-box {
        text-align: left;
        align-items: start;
    }

    .stage--alignment-xl-center .stage-box {
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        max-width: 90%;
    }

    .stage--alignment-xl-left .stage-box {
        padding-right: 0;
    }

    .stage--alignment-xl-right .stage-box {
        padding-left: 0;
    }
}

/*
    font-size calculation base
        h3      => 25px
        span    => 10px
        button  => 12px
        small   => 8px

    calculation:
        vw = base / (viewport / 100)
        e.g. 25/(469/100)
        
*/
.stage-box h3 {
    /* 25 */
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 6.397vw; /* 30px */
    /*font-size: 5.33vw;*/
    /*letter-spacing: -0.05em;*/
}

.stage-box span {
    /*10px*/
    margin-top: 0.25em;
    text-transform: uppercase;
    /*font-size: 2.132vw;*/
    font-size: 3.198vw; /* 15 */
}
.stage-box button {
    /*12px*/
    /*font-size: 2.559vw;*/
    font-size: 3.625vw; /* 17 */
}

.stage-box small {
    /*8px*/
    margin-top: 1em;
    font-size: 1.706vw;
}

@media only screen and (min-width: 768px) {
    .stage-box h3 {
        font-size: 3.255vw;
    }

    .stage-box span {
        font-size: 1.302vw;
    }

    .stage-box button {
        font-size: 1.563vw;
    }

    .stage-box small {
        font-size: 1.042vw;
    }
}

@media only screen and (min-width: 992px) {
    /* 25 */
    .stage-box h3 {
        /*font-size: 2.52vw;*/
        font-size: 2.722vw; /*27*/
    }

    /* 10 */
    .stage-box span {
        /*font-size: 1.008vw;*/
        font-size: 1.109vw; /*11*/
    }

    /* 12 */
    .stage-box button {
        font-size: 1.21vw;
    }

     /* 8 */ 
    .stage-box small {
        font-size: 0.806vw;
    }
}

/**
 * based on '.bsv4 .container-xxl' max-width we have to change from
 * the viewport based width to a relative width to the parent element
 *
 * calculation factor 0,6774193548
 *   e.g. 2,52/0,6774193548
 */
@media only screen and (min-width: 1920px) {
    .stage-box h3 {
        font-size: 4.018em;
    }

    .stage-box span {
        font-size: 1.637em;
    }

    .stage-box button {
        font-size: 1.7861em;
    }

    .stage-box small {
        font-size: 1.1898em;
    }
}

.stage-box button {
    margin-top: 1em;
    border: none;
    padding: 5px 15px;
    text-transform: uppercase;
    /*font-weight: 600;*/
    /*font-size: 1.2em;*/
    background-color: var(--stage-background-xs);
}

@media only screen and (min-width: 768px) {
    .stage-box button {
        /*font-size: 1.5em;*/
        background-color: var(--stage-background-xl);
    }
}

@media only screen and (min-width: 992px) {
    .stage-box button {
        margin-top: 1.5em;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

.stage-xs {
    display: inherit;
}

@media only screen and (min-width: 768px) {
    .stage-xs {
        display: none !important;
    }
}

.stage-xl {
    display: none !important;
}

@media only screen and (min-width: 768px) {
    .stage-xl {
        display: inherit !important;
    }
}