@font-face {
    0pxsrc: url('/fonts/VictorMono.ttf');
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat.ttf');
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans.ttf');
}



:root{
    --accentLight:orange;
    --widthPage: 1600px;
    --slide1Height: 100vh;
    --xerpStickyHeight: 360vh;
    --slide3Height: 90vh;
    --slide3TextH:  30vh;
    --slide3Overlap: 55vh;
    --xediStickyHeight: 300vh;
    --slide5Height: 120vh;
    --animationSlideHeight: 86vh;
    --stickyBackHeight:  300px;
    --appnameTransition: 2s;
    --initialBackHeight: 80vh;
    --transitionH: 60vh;
    --blockTop: 49vh;
    --logoSize: 70vh;
    --fontSmall: 8px;
    --fontBig: 45px;
    --blockFontSize: 1.3rem;
    --blockMarginLeft: 30%;
    --option-txt-opacity: 1;
    --dotSize: 35px;
    --lineMarginLeft:  calc(var(--widthPage) * 0.05);
    --lineTopPadding: 3rem;

    --priceOptionWidth: calc(33% - 10px);
    --priceOptionMarginBottom: 300px;
    --priceOptionsBackHeight: 100%;

    --animationMargin: calc(var(--widthPage) * .125);
    --blockPaddingRight: 150px;
    --aboutusPaddingH: 4rem;
    --ffTextSize: 1.1rem;
    --ffTextPaddingLeft: calc(var(--widthPage) * 0.15);
    --ffPanelMarginLeft: 30%;
    --ffPanelAlign: center;
    --appnameBigH: 300px;

    --xbdxFontSize: 50px;
}

@media screen and (min-width: 3800px) {
    :root {
        --widthPage: 3600px;
    }
}

@media ( width <= 850px) {
    :root {
        --stickyBackHeight:  100px;
        --widthPage: 385px;
        --fontBig: 30px;
        --logoSize: 500px;
        
        --animationSlideHeight: 450px;

        --slide3TextH: calc(100vh - 250px);
        --slide3Overlap: 55vh;
        
        --lineMarginLeft:  10px;
        --lineTopPadding: 10px;

        --blockFontSize: 0.85rem; 
        --blockPaddingRight: 35px;
        --blockMarginLeft: 45px;
        --option-txt-opacity: 0;
        
        --priceOptionWidth: 100%;
        --priceOptionMarginBottom: 100px;
        --priceOptionsBackHeight: 3200px;

        --animationMargin: 20px; 
        --aboutusPaddingH: 20px;
        --initialBackHeight: 50vh;
        
        --ffTextSize: 0.8rem;
        --ffTextPaddingLeft: 30px;
        --ffPanelMarginLeft: 0px;
        --ffPanelAlign: flex-end;
    
        --appnameBigH: 200px;
        --xbdxFontSize: 15px;
    }

    .ff-panel-container{
        margin-right: 0px !important;
        height: 150px !important;
        overflow-x: scroll !important;
        flex-wrap: nowrap !important;
        align-items: flex-end;
    }
    .ff-texts div{
        align-content: unset !important;
        padding-top: 30px;
    }

    .buttonPanel{
        text-wrap: nowrap;
    }

    .block p{
        align-items: unset !important;
        padding-top: 120px;
    }

    #aboutus .footer{
        flex-wrap: wrap;
        div{
            margin-top: 10px;
        }
    }
    .legal-title{
        font-size: 2rem !important;
        padding: 1rem 1rem !important;
    }
    .legal-txt{
        padding: 0px 1rem !important;
    }    

}


@media (850px < width <= 1100px) {
    :root {
        --widthPage: 800px;
        --blockTop: 30vh;
        --logoSize: 500px;
        --fontBig: 40px;
        --slide3TextH: max(40vh, 320px);
        --slide3Overlap: 55vh;
        
        --stickyBackHeight: 200px;
    
        --animationMargin: calc(var(--widthPage) * .05);
        
        --blockPaddingRight: 60px;
        --blockMarginLeft: 100px;

        --blockFontSize: 1.1rem;
        --option-txt-opacity: 0;
        
        --ffTextPaddingLeft: 30px;
        --ffPanelMarginLeft: 10px;
        --ffPanelAlign: flex-end;
        --ffTextSize: 0.9rem;

        --priceOptionWidth: 100%;
        --priceOptionMarginBottom: 100px;
        --priceOptionsBackHeight: 2300px;
        --xbdxFontSize: 30px;
    }
    #aboutus{ 
        .footer{
            flex-wrap: wrap;
            div{
                width: 100%;
                margin-top: 25px;
                margin-left: 15%;
            }

        }
        .footer-link div:nth-child(1){
            /*display: flex;
            justify-content: space-between;*/
            a{
                padding: 0px 0.5rem !important;
            }
        }
    }
    .ff-panel-container{
        align-content: center !important;
        margin-right: var(--ffPanelMarginLeft) !important;
        padding-top: 90px;
        .buttonPanel{
            height: 2.8rem !important;
        }
    }
}

@media (1100px <= width <= 1650px) {
    :root {
        --widthPage: 1000px;
        --blockTop: 30vh;
        --logoSize: 600px;
        --fontBig: 40px;
        --slide3TextH: max(40vh, 350px);
        --slide3Overlap: 55vh;
        --stickyBackHeight: 200px;
        
        --animationMargin: calc(var(--widthPage) * .075);

        --option-txt-opacity: 0;
        --blockMarginLeft: 250px;
        --blockFontSize: 1.2rem;
        --blockPaddingRight: 100px;

        --ffTextPaddingLeft: 30px;
        --ffPanelMarginLeft: 10px;
        --ffPanelAlign: flex-end;
        --ffTextSize: 1rem;
        --xbdxFontSize: 30px;
    }
    
    .block p{
        align-items: unset !important;
        padding-top: 160px;
    }
    
    .ff-panel-container{
        align-content: center !important;
        margin-right: var(--ffPanelMarginLeft) !important;
        padding-top: 90px;
        .buttonPanel{
            height: 2.8rem !important;
        }
    }
}

.logo-img{
    height: 42px;
}

body{
    background-color: black;
}

.fa-globe{
    padding-top: 1px;
    font-size: 1.25rem;
}
.navbar{
    min-height: 6.5rem;
    font-size: 1.3rem;
    .navbar-brand .navbar-item{
        padding-left: 2rem;
        img{
            max-height: 3rem;
        }
    }
}
a.navbar-link::after{
    font-size: 1rem;
}
.navbar-brand{
    min-height: inherit;
    align-items: unset !important;
}

.content-container{
    position: relative;
}

.main-container{
    width: var(--widthPage);
    margin: 0 auto 0 auto;
    border: solid 1px #365989;
    box-shadow: 0px 0px 4rem #064666;
}

.moving{
    transition: 0.1s;
}

.moving-s0{
    transition: 3s;
}

.washed{
    filter: grayscale(100%);
    opacity: 0.2;
}

.outerLeft{
    transform: translate(200px, 300px);
}

.outerTop{
    transform: translate(200px, -300px);
}


.logo{
    transition: 1.5s;
}
.shadow{
    opacity: 0;
}

.shadow.highlight{
    opacity: 1;
    transition-delay: 4s;
    transition-duration: 2s;
}

.sticky-container{
    height: var(--xerpStickyHeight);
    width: var(--pageWidth);
}

#xedi-sticky{
}

.sticky.highlight{
    opacity: 1;
    transition: 3s;
    --triGradPos: 60%;
}

.page1 .sticky .tri{
    opacity: 0;
}

.tri{
    top: 35vh;
    width: calc( var(--widthPage));
    height: calc(var(--widthPage) * 0.6);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    z-index: 61;
    color: red;
    position: absolute;
    background-image: linear-gradient(45deg, black, hsl(221deg 53.57% 21.96% / 9%) 30%, #caaae50f 100%);
    transition: opacity 3s, translate 0s;
}

.appname.visible{
    background-color: rgba(0,0, 0, 0.8);
    top: calc(var(--initialBackHeight) - var(--appnameBigH));
    height: var(--appnameBigH);
    h1{
        font-size: calc(var(--fontBig)*3);
        /* margin-bottom: -1.0rem !important; */
        margin-top: 40px;
    }
    h2{
        font-size: calc(var(--fontBig)*.60);
        font-weight: 800;
    }
    ;
    border-top: solid 1px rgba(0,0,0,0);
    z-index: 300;
    box-shadow: none;
    /* color: black; */
    text-shadow: 2px 2px 12px black;
}

.appname{
    font-family: 'Open Sans', sans-serif;
    width: calc(var(--widthPage) - 2px);
    color: white;
    position: absolute;
    z-index: 300;
    text-align: center;
    border-top: solid 1px rgba(0,0,0,0);
    background-color: hsl(203.41deg 91.92% 38.82%);
    transition: 2s;
    transition-delay: 0;
    top: calc(var(--stickyBackHeight) - 100px);
    height: 100px;
    h1{
        font-size: 60px;
        font-weight: 700;
        transition: 2s;
        margin-bottom: -20px;
    }
    h2{
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 15px;
        transition: 2s;
    }
    height: 100px;
    box-shadow: 0px 0px 13px black;
    border-top: solid 1px #535c71;
}

.guil{
    top: -39vh;
    position: absolute;
    width: var(--widthPage);
    height: 90vh;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.4), transparent);
    filter: blur(3px);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%);

    &.highlight{
        top: 40vh;
        transition: 3s;
    }
}

.triSec{
    top: 40vh;
}

.triThird{
    top: 45vh;
}

#img-tri{
    pointer-events: none;
}
linearGradient{
    opacity: 0.3;
    &.hightlight{
        opacity: 1;
    }
}

.stickyBack.visible{
    height: var(--initialBackHeight);
    /* transition: var(--appnameTransition); */
}

.stickyBack{
    overflow: hidden;
    width: calc(var(--widthPage) - 2px);

    img{
        object-fit: cover;
        width: 100%;
        height: var(--initialBackHeight);
    }

    height: var(--stickyBackHeight);
    transition: var(--appnameTransition);
}

.sticky{
    top: 0;
    height: 100vh;
    position: sticky;
    width: calc(var(--widthPage));
    overflow: hidden;
    transition: var(--appnameTransition);
}

section.full-page{
    padding: 0px !important;
}
.navbar-end{
    margin-right: 20px;
}
.navbar{
    border-bottom: solid 1px #63105d;
}
rect{
    transition: 0.1s;
}

a.navbar-item:hover{
    border-bottom: solid 5px var(--accentLight);
    background-color: black !important;
    transition: 0.15s;
}

.s1{
    min-height: 100vh;
    padding-top: 30vh;
}

.line{
    position: absolute;
    top: 100vh;
    margin-top: calc(var(--lineTopPadding) + var(--dotSize)) !important;
    margin-left: 20px;
    width: 15px;
    opacity: 0.5;
    z-index: 100;
}

.logo-path{
    fill: none;
    /* stroke: #0000008f;*/
    stroke: hsl(19.06deg 85.86% 19.41% / 100%);
    stroke-width: 4px;
    animation: draw 4s forwards;

}

.paper{
    width:  var(--widthPage);
    height: 100vh;
    top: 0;
    position: absolute;
    z-index: 1;
    svg{
        width: var(--logoSize);
        margin-left: calc( (var(--widthPage) - var(--logoSize) )*0.5);
        position: absolute;
        z-index: -1;
        /* bottom: 0px; */
    }

    .paper.highlight{
        /*    transform: translateY(-120vh);*/
        transition: 2.5s !important;
    }

    ;
    overflow: hidden;
}


.full-page{
    min-height: 100vh;

}


.dot{
    display: inline-block;
    height: var(--dotSize);
    width: var(--dotSize);
    background-color: #ccc;
    border-radius: 50%;
    /* border-color: #ccc; */
    /* border-width: 2px; */
    display: inline-block;
    margin-top: 9px;
    margin-left: 10px;
    
        &.visible{
    background-color: #c7c7c7;
    /* border-color: #004a7a; */
    transition-delay: 2s;
    transition-duration: .5s;
    box-shadow: 0px 0px 4px #bfbcef;
        }
}

.header{
    font-family: 'Montserrat';
    font-size: 2.3rem;
    font-weight: 300;
    margin-left: var(--lineMarginLeft);
    color: hsl(0deg 0% 75.7%);
    line-height: 2.85rem;
    position: absolute;
    z-index: 100;
    transition: 1.8s;
    & > div {
        height: 100vh;
        padding-top: var(--lineTopPadding);
    }
    .option-txt{
        height: unset;
        display: inline-block;
        padding-left: 6px;
        padding-top: 3px;
        max-width: calc(var(--blockMarginLeft) - var(--lineMarginLeft));
        opacity: var(--option-txt-opacity);
        &.visible{
            opacity: 1;
            transition-delay: 1.8s;
            transition-duration: 1s;
        }
    }
    .full-width{
        max-width: unset;
    }

    .point{
        position: relative;
        z-index: 200;
        display: flex;
        flex-direction: row;
    }


    .line{
        height: 400vh;
        background-image: linear-gradient(45deg, #f73e4c, #282aac, #ff4513);
    }
}

.header-container{
    /* width: var(--pageWidth); */
    top: var(--stickyBackHeight);
    height: calc( 100vh - var(--stickyBackHeight));
    overflow: hidden;
    position: absolute;
    width: 100%;
}
#xerp-sticky{
}

#xedi-sticky{
    .header{
        /* top: 10vh; */
    }

    .line{
        z-index: 30;
        height: 200vh;
        background-image: linear-gradient(45deg, #c744a9, #5a5aff, #b73452);
    }

    &.page1 {
    }

    &.page2 {
        .sticky .upper-block{
            opacity: 1;
            transition: 2s;
        }
    }

    &.page3 .sticky .block #pEdi1{
        opacity: 1;
        transition: 2s;
    }

    &.page4 .sticky .block #pEdi2{
        opacity: 1;
        transition: 2s;
    }
}


.block{
    position: absolute;
    width:  var(--widthPage);
    font-family: 'Montserrat';
    letter-spacing: 0.1rem;
    /* margin-top: 12rem; */
    color: hsl(203.6deg 100% 82.55%);
    font-size: var(--blockFontSize);
    /* top: var(--blockTop); */
    p{
        /* top: 10vh; */
        width: 100%;
        opacity: 0;
        position: absolute;
        padding-left: var(--blockMarginLeft);
        padding-right: var(--blockPaddingRight);
        z-index: 100;
        color: antiquewhite;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .visible{
        opacity: 1;
        transition: 1s;
        transform: translateX(20px);
        transition-timing-function: ease-in;
    }
    ;
    top: var(--stickyBackHeight);
    height: calc(100vh - var(--stickyBackHeight));
}

.upper-block{
    padding: 3rem 3rem;
    font-family: 'Montserrat';
    letter-spacing: 0.1rem;
    margin-top: 12rem;
    color: hsl(203.6deg 96.32% 94.91%);
    font-size: 1.2em;
    position: absolute;
    top: 100vh;
    padding: 2rem 10vw;
    z-index: 100;
    background-color: #000000bd;
    width: 80%;
    left: 10%;
    border: solid 1px #828282;
    border-radius: 30px;
    opacity: 0;
    position: absolute;
    top: 30vh;
}

@property --triGradPos{
    syntax: '<percentage>'; /* its type */
    inherits: false;
    initial-value: 0%; /* the initial value */
}

.slide1 {
    height: var(--slide1Height);
    padding-top: calc(var(--logoSize) + 20px);
    opacity: 0;
    &.highlight{
        opacity: 1;
        transition: 3s;
        padding-top: calc(var(--logoSize));
    }

    h1{
        width: 100%;
        font-family: 'Montserrat';
        font-weight: 300;
        color: transparent;
        text-align: center;
        font-size: var(--fontBig);
        background-clip: text;
        margin-bottom: 1rem !important;
        letter-spacing: -0.2rem;
        background-image: linear-gradient(45deg, #c8cdff, #dccdff);
        padding: 0% 5%;
    }


    h2{
        background-image: linear-gradient(40deg, hsl(206.9deg 100% 88.82%), white);
        font-family: 'Montserrat';
        font-size: calc(0.6 * var(--fontBig));
        padding: 0% 5%;
        font-weight: 400;
        color: transparent;
        text-align: center;
        background-clip: text;
    }


}

.slide2{
    height: 80vh;
    padding-top: 22vh;

}

.ff-panel-container{
    display: flex;
    vertical-align: middle;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: var(--ffPanelAlign);
    margin-left: var(--ffPanelMarginLeft);
    margin-right: 50px;
    height: calc(100vh - var(--stickyBackHeight) - var(--slide3TextH));
}

.buttonPanel{
    color: white;
    padding: .1rem 1rem;
    margin: 0.3rem !important;
    max-width: 320px;
    letter-spacing: 0.1rem;
    flex: 1 auto;
    max-height: 8vh;
    border-radius: 2rem;
    border: solid 2px #c2c2c296;
    vertical-align: middle;
    height: 3.3rem;
    display: flex;
    align-items: center;
    background-color: #3a253b96;
    box-shadow: 2px 2px 4px #00000052;


    &:hover{
        color: white;
        background-color: #ff7c00;
        transition: 0.3s;
        transition-timing-function: ease-in;
    }
}

.ff-texts{
    height: var(--slide3TextH);
    position: relative;
    font-size: var(--ffTextSize);
    div{
        height: 100%;
        span{
            font-family: 'Montserrat';
            font-weight: 500;
            letter-spacing: 0.1rem;
            color: #000a23;
        }
        transition: 2s;
        left: var(--widthPage);
        position: absolute;
        margin: 0;
        width: var(--widthPage);
        opacity: 0;
        pointer-events: none;

        &.highlight{
            backdrop-filter: blur(3px);
            background-color: #f48100de;
            left: 0px;
            opacity: 1;
            transition: 1s;
        }
        padding-left: var(--ffTextPaddingLeft);
        padding-right: var(--blockPaddingRight);
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0,0,0,0,1));
        align-content: space-around;
    }
    ;
    width: var(--widthPage);
    bottom: 0px;
}
;
/* bottom: 0px; */
/* float: right; */
background-image: linear-gradient(45deg, #001825, #000000f2 85%, #001650c7);
border: solid 2px #794100;
box-shadow: -2px -2px 15px #965a0085;
/* padding: 4rem 1rem; */
}



#backgroundDraw{
    position: absolute;
    top: 160vh;
    z-index: 10;
}

#backgroundDrawB{
    position: absolute;
    top: 160vh;
    z-index: 15;
    pointer-events: none;
}

.otherFeatSlide{
    opacity: 0;
    height: calc(100vh - var(--stickyBackHeight));
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    width: var(--widthPage);
    h2{
        font-family: "Victor Mono", monospace;
        font-size: 30px;
        font-weight: 100;
        color: white;
        text-align: center;
        text-align: left;
        padding-left: 10vw;

    }
    transition: 1.3s;
    z-index: 110;
    &.visible{
        opacity: 1;
        transition: 3s;
        transition-delay: 1s;
    }
}


#r1.highlight{
    transform: translateY(-100vh);
    transition: 2s;
}

#slide5{
    border-top: solid 1px #ffffff61;
    position: relative;
    width: var(--widthPage);
    align-content: center;
    flex-wrap: nowrap;
    div.stickyBack{
        position: absolute;
        top: 0;
        z-index: 1;
        height: 100%;
        padding: 0;
        img{
            height: var(--priceOptionsBackHeight);
            object-fit: cover;
        }
    }
    div.options{
        padding: 10vh 20px 0 20px;
        top: 0;
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    .priceOption{
        /* display: inline; */
        width: var(--priceOptionWidth);
        display: inline-block;
        background-image: linear-gradient(179deg, #001848, #4c0434b5);
        border: solid 1px #c5c5c5;
        border-radius: 7px;
        margin-top: 300px;

        &.highlight{
            margin-top: 0px;
            transition: 2s;
            margin-bottom: var(--priceOptionMarginBottom);
        }

        .poHeader{
            text-align: center;
            font-size: 36px;
            font-family: 'Open Sans';
            font-weight: 600;
            background: #ffffff00;
            padding: 1rem 0rem;
            color: #f7e9e9;
            border-bottom: solid 3px #7b4747;
        }
        .poE{
            min-height: 4rem;
            padding: 1rem 3rem;
            border-bottom: solid 1px #808080bd;
            font-size: 17px;
            font-family: 'Montserrat';
            color: white;
        }
        .poE:nth-child(
        even){
            background-color: rgba(200, 0, 29, 0.1);
        }
    }
}

@keyframes glow {
    0% {
        fill: blue;
        filter: drop-shadow(0 0 5px blue);
    }
    50% {
        fill: lightblue;
        filter: drop-shadow(0 0 20px lightblue);
    }
    100% {
        fill: blue;
        filter: drop-shadow(0 0 5px blue);
    }
}

.glow-animation {
    animation: glow 1s;
}


.animationSlide{
    h1{
        div{
            display: inline-block;
        }

        margin-top: 50px;
        margin-bottom: 50px;
        color: rgba(50, 50, 50, 0.0);
        font-family: 'Montserrat','Open Sans';
        font-weight: 200;
        font-size: var(--xbdxFontSize);
        .hidden{
            color: rgba(0,0,0,0);
            position: absolute;
        }
        .bright{
            color: transparent;
            font-weight: 400;
            background-image: linear-gradient(179deg, #ffffff 30%, #9199c2 64%, #590a39 100%);
            background-clip: text;
        }
        .bright.highlight{
            color: #e4e4e4;
            text-shadow: none;
            transition-duration: 0.3s;
            transition-delay: 2s;
            font-weight: 200;
        }
        &.highlight{
           color: #9392b3e3;
           transition-duration: 1s;
           transition-delay: 2s;
        }

        .pushRight1{
            transform: translateX(calc(var(--xbdxFontSize) * 9));
        }
        .pushRight2{
            transform: translateX(calc(var(--xbdxFontSize) * 2.1));
        }
        .pushLeft1{
            transform: translateX(calc(var(--xbdxFontSize) * -2.7));
        }
        .pushLeft2{
            transform: translateX(calc(var(--xbdxFontSize) * -5.4));
        }

        .pushRight1.highlight{
            transform: translateX(0px);
            transition: transform  2s 1s;
        }
        .pushRight2.highlight{
            transform: translateX(0px);
            transition: transform  2s 1s;
        }
        .pushLeft1.highlight{
            transform: translateX(0px);
            transition: transform  2s 1s;
        }
        .pushLeft2.highlight{
            transform: translateX(0px);
            transition: transform  2s 1s;
        }

    }

    border-top: solid 3px #69426f;
    width: var(--widthPage);
    position: relative;
    padding: 4rem var(--animationMargin);
    svg{
        width: 100%;
    }
    .message{
    fill: #aaaaaa;
    transition:  0.3s;
    border-bottom-left-radius: 1;
    r: 0.3px;
    }
    line{
        stroke: white;
    transition: x1 1s y1 1s;
    }
    .simCircle{
        transition:  0.3s;
        stroke-width: 0.2px;
        filter: drop-shadow( 0px 0px 2px rgba(200, 70, 250, .5)); 
        animation: none;
        transform-origin: center;
        transform-box: fill-box;
    }
   #xediCircle{
        fill: black;
        stroke: #ffffff2b;
        stroke-width: 0.3px;
        filter: drop-shadow( 0px 0px 2px rgba(200, 70, 0, .5));
    }
    .inner{
        fill: url("#gradInner");
        stroke: #4c4f88;
    }
    .rotate20{
        transform: rotate(20deg);
    }
    .rotateM10{
        transform: rotate(-10deg);
    }
    .kunden1{
        fill: url("#g1");
        border: solid 1px white;
        stroke: #5b6dba;
    }


    .kunden2{
        /*fill: #370b38;*/
        fill: url("#gradKunden2");
        stroke: #55225b;
        transform: rotate(-60deg);
    }
    .kunden3{
        /*    fill: #7c2156;*/
        fill: url("#gradKunden3");
        border: solid 2px white;
        stroke: #405a00;
        transform: rotate(-40deg);
    }
    .kunden4{
        /*fill: #5ea6e0;*/
        fill: url("#gradKunden4");
        border: solid 1px white;
        stroke: #4c4c4cf7;
        transform: rotate(-10deg);
    }
    .kunden5{
        /*fill: #ff0057;*/
        fill: url("#gradKunden5");
        stroke: #451b10;
        filter: drop-shadow( 0px 0px 2px rgba(250, 70, 150, .5)) !important; 
        transform: rotate(30deg);
    }
    .kunden6{
        fill: url("#gradKunden6");
        stroke: #715151;
        transform: rotate(68deg);
    }
    .kunden7{
        fill: url("#gradKunden7");
        stroke: #821300f7;
        transform: rotate(90deg);
        transform-origin: center;
        transform-box: fill-box;
    }

    .txt{
        color: white;
        font-family: 'Open Sans', sans-serif;
        font-size: var(--fontSmall);
        fill: white;
        font-weight: 600;
        opacity; 0;
    }
    .txt-slim{
    color: aliceblue;
    font-family: 'Open Sans', sans-serif;
    font-size: calc(var(--fontSmall) * 0.55);
    fill: white;
    font-weight: 200;
        opacity: 0;
        text-anchor: middle;
    }
    .ani-path{
        fill: none;
        stroke: white;
        stroke-width: 0.3px;
        opacity: 1;
        stroke-dasharray: 100;  
        stroke-dashoffset: 100; 
    }
    height: var(--animationSlideHeight);
    text-align: center;
    background-image: linear-gradient(171deg, #02005199, transparent);
}
svg.highlight .txt-slim{
    opacity: 1;
    transition-duration: 3s;
    transition-delay: 2s;
}

svg.highlight .ani-path{
    opacity: 1;
    transition-duration: 3s;
    transition-delay: 1s;
    stroke-dashoffset: 0; 
}

#transition{
    height: var(--transitionH);
    background-image: linear-gradient(180deg, #000000, #040e30 6%, #06123e 9%, #050c2273 80%, #000000 100%, #7aa3e438);
}

div#transition {}

#aboutus-container{
    box-shadow: 0px 0px 10px #88b6db;
    border-top: solid 1px #a8a8a8;
}

#aboutus{
    h1{
        font-size: 43px;
    text-align: center;
    font-family: 'Montserrat';
    border-bottom: solid 1px #404040;
    margin-bottom: 3rem;
    color: black;
    }
    ;
    padding: 2rem var(--aboutusPaddingH);
    font-family: 'Montserrat';
    font-weight: 400;
    letter-spacing: 0.10rem;
    color: hsl(239.21deg 100% 5.73%);
    font-size: 0.95rem;
    background-color: white;
    /* position: absolute; */
    bottom: 0;
    /* height: 50vh; */
    span{
        white-space: pre-line;
    }
    .footer{
    position: relative;
    display: flex;
    div { img{ margin-bottom: -3px;}}
    width: 100%;
    padding: 0 2rem;
    background-color: white;
    flex-direction: row;
    justify-content: space-between;
    left: 0;
    align-content: flex-end;
    padding-top: 30px;
    font-size: 1.05rem;
    }
    .footer-link{
    padding-top: 70px;
    text-align: center;
    color: black;
    a{
            color: black;
            white-space: nowrap;
            &:hover{
                text-decoration: underline;
            }
    padding-left: 2rem;
    padding: 0px 1.2rem;
        }
    ;
    font-size: 0.8rem;
    }
}

#phone, #mail{
    cursor:  pointer; 
}

.no-top-border{
    border-top: none !important;
}

.legal-title{
    border-top: solid 0.4px #1e1e1e;
    color: white;
    font-size: 4rem;
    padding: 1rem 5rem;
    font-family: 'Montserrat';
    font-weight: 300;
    margin-top: 40px;
    /* margin-bottom: -30px; */
}

.legal-txt{
    color: white;
    font-family: 'Open Sans';
    padding: 0rem 5rem;
    p{
        padding-bottom: 1.25rem;
    /* padding-left: 3rem; */
    font-size: 1.1rem;
    }
    li:before{
            content: "\f058 ";
    font-family: FontAwesome;
    margin-right: 5px;
    }
}
.legal-address{
    color: #ffe9e9;
    font-family: 'Open Sans';
    /* text-align: center; */
    font-size: 1.3rem;
    /* padding-left: 10%; */
    padding: 3rem 2rem;
    background-image: linear-gradient(45deg, #081636, transparent);
    border-left: solid 2px #3800ff;
    margin-left: 7%;
}
.legal-subtitle{
    display: block;
    font-size: 1.7rem;
    font-weight: 500;
    padding: 3rem 0rem 1rem 0rem;
}