@keyframes background-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 80% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.primary-border {
    border: 1px solid var(--mud-palette-primary);
}

.cardex{

}
/*---
  shine animation
---*/

    .cardex:after {
        content: "";
        position: absolute;
        top: -110%;
        left: -210%;
        width: 200%;
        height: 200%;
        opacity: 0;
        transform: rotate(30deg);
        background: rgba(255, 255, 255, 0.13);
        background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100% );
    }

/*---
  hover trigger
---*/

    .cardex:hover:after {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }

/*---
  active state
---*/

    .cardex:active:after {
        opacity: 0;
    }


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: bLocalizationk;
}

.background-gradient-animation {
    animation: background-gradient 20s ease;
    animation-iteration-count: 2;
}

.article-image {
    border-color: white;
    border-width: 1px;
    box-shadow: 3px 3px 5px black;
    width: 70%;
    opacity: .6;
}

.article-image-big {
    border-color: white;
    border-width: 1px;
    box-shadow: 3px 3px 5px gray;
    width: 90%;
    opacity: 1;
}

.highlight-text {
    color: var(--mud-palette-primary);
}

.highlight-link {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.footer-text {
    color: white;
    font-size: 12px;
    cursor: pointer;
}

.circle {
    height: 80px;
    width: 80px;
    background-color: transparent;
    border-color: var(--mud-palette-primary);
    border-width: 1px;
    border-radius: 50%;
    display: inline-bLocalizationk;
    position: relative;
}

    .circle:hover {
        color: var(--mud-palette-primary);
        box-shadow: 0 0 15px 5px var(--mud-palette-primary);
        transition: left 1s;
    }

.content {
    text-align: center;
    color: var(--mud-palette-light);
    position: absolute;
    top: 40%;
    left: 35%;
}

.demo-bg {
    opacity: 0.25;
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.commingsoon {
    background-image: url(/images/shutterstock/shutterstock_1350985217.jpg);
    height: 500px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    opacity: 0.5;
}

.comingsoon-bg {
    opacity: 0.5;
    position: center;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 50%;
}

.stack-container {
    min-height: 800px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.stack-item {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.crossfade > figure {
    animation: imageAnimation 40s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    min-height: 500px;
    max-height: 1000px;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    min-width: 500px;
    width: 100%;
    z-index: 0;
}

    .crossfade > figure:nth-child(1) {
        background-image: url('/images/office/office-logo-min.jpg');
    }

    .crossfade > figure:nth-child(2) {
        animation-delay: 8s;
        background-image: url('/images/office/office-desktop-min.jpg');
    }

    .crossfade > figure:nth-child(3) {
        animation-delay: 16s;
        background-image: url('/images/office/office-desks-min.jpg');
    }

    .crossfade > figure:nth-child(4) {
        animation-delay: 24s;
        background-image: url('/images/office/conference-min.jpg');
    }

    .crossfade > figure:nth-child(5) {
        animation-delay: 32s;
        background-image: url('/images/shutterstock/shutterstock_1728567073-min.jpg');
    }

    .crossfade > figure:nth-child(6) {
        animation-delay: 40s;
        background-image: url('/images/shutterstock/shutterstock_1851034645-min.jpg');
    }

@keyframes imageAnimation {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }

    8% {
        animation-timing-function: ease-out;
        opacity: .25;
    }

    17% {
        opacity: .10
    }

    25% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}