@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Cutive+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu+Condensed&display=swap');

:root {
    --bg-color: rgba(0, 0, 0, 1);
    --text-color: rgba(0, 0, 0, 1);
    --herotext-color: rgba(0, 0, 0, 1);
    --armos-signaturecolor: rgba(0, 0, 0, 1);
    --armos-signaturecolor2: rgba(0, 0, 0, 1);
    --armos-overlaysignaturecolor: rgba(0, 0, 0, 1);
    --armos-overlaysignaturecolor2: rgba(0, 0, 0, 1);
    --armos-overlayerror: rgba(0, 0, 0, 1);
    --armos-overlaywarning: rgba(0, 0, 0, 1);
    --armos-overlaysuccess: rgba(0, 0, 0, 1);
    --armos-overlaylogout: rgba(0, 0, 0, 1);
    --armos-overlayexcel: rgba(0, 0, 0, 1);
    --armos-overlaypeppol: rgba(0, 0, 0, 1);
    --armos-collapsecolor: rgba(0, 0, 0, 1);
    --armos-tablehighlight: rgba(0, 0, 0, 1);
    --armos-danger: rgba(0, 0, 0, 1);
    --armos-danger-light: rgba(0, 0, 0, 1);
    --armos-danger-ultralight: rgba(0, 0, 0, 1);
    --armos-todo: rgba(0, 0, 0, 1);
    --armos-todo-light: rgba(0, 0, 0, 1);
    --armos-todo-ultralight: rgba(0, 0, 0, 1);
    --armos-dangerrow: rgba(0, 0, 0, 1);
    --armos-inactive: rgba(0, 0, 0, 1);
    --armos-ok: rgba(0, 0, 0, 1);
    --armos-ok-light: rgba(0, 0, 0, 1);
    --armos-ok-ultralight: rgba(0, 0, 0, 1);
    --negativeamount: rgba(0, 0, 0, 1);
    --positiveamount: rgba(0, 0, 0, 1);
    --neutralamount: rgba(0, 0, 0, 1);
    --armos-warning: rgba(0, 0, 0, 1);
    --armos-warning-light: rgba(0, 0, 0, 1);
    --armos-warning-ultralight: rgba(0, 0, 0, 1);
    --inactiverecords: rgba(0, 0, 0, 1);
    --activeTheme: rgba(0, 0, 0, 1);
    --headerfooter: rgba(0, 0, 0, 1);
    --headerfooterStats: rgba(0, 0, 0, 1);
    --box-border: rgba(0, 0, 0, 1);
    --selected-input: rgba(0, 0, 0, 1);
    --cookietext-color: rgba(0, 0, 0, 1);
    --raginghamster: rgba(0, 0, 0, 1);
    --inactivefile: rgba(0, 0, 0, 1);
    --completedfile: rgba(0, 0, 0, 1);
    --alwayscolor1: rgba(0, 0, 0, 1);
    --alwayscolor2: rgba(0, 0, 0, 1);
    --peppol: rgba(0, 0, 0, 1);
    --wavesbg: rgba(0, 0, 0, 1);
    --waves1: rgba(0, 0, 0, 1);
    --waves2: rgba(0, 0, 0, 1);
    --waves3: rgba(0, 0, 0, 1);
    --waves4: rgba(0, 0, 0, 1);
}

@media all and (max-width : 2560px) {

    .hero-image-offcanvas25 {
        background-image: url("../images/heros/hero_codes.png");
        height: 6.2%;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -2.5%;
        margin-right: -2.5%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
    }

    .hero-image-offcanvas50 {
        background-image: url("../images/heros/hero_codes.png");
        height: 6.2%;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -1.2%;
        margin-right: -1.2%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
    }

    .hero-image-offcanvas75 {
        background-image: url("../images/heros/hero_codes.png");
        height: 6.2%;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -0.8%;
        margin-right: -0.8%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
    }

    .hero-image-offcanvasFull {
        background-image: url("../images/heros/hero_codes.png");
        height: 79px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: 0%;
        margin-right: 0%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
    }

    .hero-image-codes {
        background-image: url("../images/heros/hero_codes.png");
        height: 79px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -2.5%;
        margin-right: -2.5%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
    }

    .hero-image-codes50 {
        background-image: url("../images/heros/hero_codes.png");
        height: 79px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -1.2%;
        margin-right: -1.2%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
        z-index: 99;
    }

    .hero-image-codes75 {
        background-image: url("../images/heros/hero_codes.png");
        height: 79px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--bg-color);
        position: sticky;
        top: 0;
        margin-left: -0.8%;
        margin-right: -0.8%;
        filter: drop-shadow(0rem 0rem 0.5rem var(--armos-signaturecolor));
        border-bottom: 1px solid var(--armos-signaturecolor);
        margin-bottom: 2.5rem;
        box-shadow: 0.0rem -1.0rem 1.0rem 1.1rem var(--armos-signaturecolor);
    }

    .hero-text-offcanvas25-right_boxed {
        text-align: right;
        padding-right: 5%;
        position: absolute;
        top: 25%;
        left: 20%;
        width: 65%;
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 1.5rem;
        /*background-color: var(--bg-color);*/
        opacity: 1;
        transform: skewX(-38deg);
    }

        .hero-text-offcanvas25-right_boxed p {
            transform: skew(38deg);
            line-height: 1.2rem;
            margin-top: 2%;
        }

    .hero-text-offcanvas50-right_boxed {
        text-align: right;
        padding-right: 5%;
        position: absolute;
        top: 25%;
        left: 10%;
        width: 83%;
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 2.0rem;
        /*background-color: var(--bg-color);*/
        opacity: 1;
        transform: skewX(-38deg);
    }

        .hero-text-offcanvas50-right_boxed p {
            transform: skew(38deg);
            line-height: 0.2rem;
            margin-top: 2%;
        }

    .hero-text-offcanvas75-right_boxed {
        text-align: right;
        padding-right: 5%;
        position: absolute;
        top: 15%;
        left: 7%;
        width: 88%;
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 2.0rem;
        /*background-color: var(--bg-color);*/
        opacity: 1;
        transform: skewX(-38deg);
    }

        .hero-text-offcanvas75-right_boxed p {
            transform: skew(38deg);
            line-height: 0.4rem;
            margin-top: 1.5%;
        }

    .hero-text-offcanvasFull-right_boxed {
        text-align: right;
        padding-right: 5%;
        position: absolute;
        top: 15%;
        left: 8%;
        width: 88%;
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 2.0rem;
        /*background-color: var(--bg-color);*/
        opacity: 1;
        transform: skewX(-38deg);
    }

        .hero-text-offcanvasFull-right_boxed p {
            transform: skew(38deg);
            line-height: 0.2rem;
            margin-top: 1%;
        }

    .hero-image-general {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/heros/hero_armos.png");
        height: 16%;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        position: sticky;
        top: 2%;
        margin-left: -2%;
        margin-right: -0.5%;
        z-index: 2;
        box-shadow: 2.0rem 0.5rem 3.0rem -0.5rem var(--armos-signaturecolor);
        filter: opacity(35%);
    }

    .hero-image-armossettings-general {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/heros/hero_armos.png");
        height: 16%;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        position: sticky;
        top: 2%;
        margin-left: -2%;
        margin-right: -0.5%;
        z-index: 2;
        box-shadow: 2.0rem 0.5rem 3.0rem -0.5rem var(--armos-signaturecolor);
        filter: opacity(60%);
    }
    
    .hero-image-standard {
        background-image: url("../images/heros/bookings.png");
        height: 8.0rem;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: auto;
        background-color: var(--bg-color);
        position: sticky;
        top: 5.7%;
        z-index: 9;
        border-bottom: 1px solid var(--armos-signaturecolor);
    }

    .hero-image-noRights {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/heros/hero_start.png");
        height: 20.0rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: sticky;
        top: 2%;
        margin-left: -2.5%;
        margin-right: -2.5%;
        z-index: 2;
        box-shadow: 2.0rem 0.5rem 3.0rem -0.5rem var(--armos-signaturecolor);
        filter: hue-rotate(-200deg);
    }

    .hero-text-left {
        text-align: center;
        padding-left: 5%;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 2.5rem;
        opacity: .8;
    }

    .hero-text-right {
        text-align: right;
        padding-right: 5%;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 2.5rem;
        opacity: .8;
    }

    .hero-text-top {
        text-align: right;
        color: var(--alwayscolor2);
        font-family: 'Roboto', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.8rem;
        right: 7.5rem;
        top: 0.5rem;
        position: absolute;
    }

    .hero-text-bottom {
        text-align: left;
        color: var(--bg-color);
        font-family: 'Roboto', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.8rem;
        left: 1%;
        bottom: 1%;
        position: absolute;
    }

    .hero-text-bottom-pageinfo {
        text-align: right;
        color: var(--text-color);
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
        font-size: 0.9rem;
        right: 11.2rem;
        bottom: 0;
        position: absolute;
    }

    .hero-text-title {
        float: right;
        text-align: center;
        width: 60%;
        color: var(--alwayscolor2);
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 3.8rem;
    }

    .hero-text-artist, .hero-text-artist-dark {
        text-align: right;
        color: transparent;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 0.8rem;
        right: 1.0rem;
        bottom: 0.5rem;
        position: absolute;
    }

        .hero-text-artist:hover {
            color: var(--herotext-color);
        }

        .hero-text-artist-dark:hover {
            color: var(--text-color);
        }
}