.sword-of-justice {
    max-width: 500px;
}

.sword-of-justice-animated {
    animation: dash2 5s linear infinite;
}

.happ-autofill input:-webkit-autofill,
.happ-autofill input:-webkit-autofill:hover,
.happ-autofill input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mud-palette-primary-text);
    -webkit-box-shadow: 0 0 0px 10rem #0094ff inset !important;
    color: yellow;
}

.scale-up {
    transform: initial;
    transition-duration: 0.3s;
}

.scale-up:hover {
    transform: scale(1.1);
    transition-duration: 0.3s;
}

.rotate-full {
    transform: initial;
    transition-duration: 0.3s;
}

.rotate-full:hover {
    transform: rotate(360deg);
    transition-duration: 0.3s;
}

.mobile-navigation {
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    text-align: center;
}

.text-bold-info input {
    font-weight: 700 !important;
    color: var(--mud-palette-info) !important;
}

.text-bold-info-select .mud-input {
    font-weight: 700 !important;
    color: var(--mud-palette-info) !important;
}

.justify-text-center input {
    text-align: center;
}

.justify-text-right input {
    text-align: right;
}

.light-label .mud-input-label {
    color: var(--mud-palette-tertiary) !important;
}

.light-input-text .mud-input-root {
    color: white !important;
    font-weight: 700 !important;
}

.light-helper-text .mud-input-helper-text {
    color: var(--mud-palette-tertiary) !important;
}

.transparent-select {
    background-color: rgba(255, 255, 255, 0.86) !important;
}

.input-info .mud-input-underline:after {
    border-bottom: 2px solid var(--mud-palette-info);
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 998;
        stroke-dasharray: 998;
    }
    50% {
        stroke-dashoffset: 0;
        stroke-dasharray: 990;
    }
    100% {
        stroke-dashoffset: 998;
        stroke-dasharray: 998;
    }
}

@keyframes dash2 {
    0% {
        stroke-dashoffset: 998;
        stroke-dasharray: 998;
    }

    50% {
        stroke-dashoffset: 0;
        stroke-dasharray: 400;
    }

    100% {
        stroke-dashoffset: 998;
        stroke-dasharray: 998;
    }
}

.animate-fadein {
    animation: fadein 2s ease-in-out;
}

svg .sword-of-justice-1 {
    stroke-dashoffset: 998.472412109375px;
    stroke-dasharray: 998.472412109375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .sword-of-justice-1 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
    animation: dash 10s linear infinite;
}

svg .sword-of-justice-2 {
    stroke-dashoffset: 1337.3358154296875px;
    stroke-dasharray: 1337.3358154296875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .sword-of-justice-2 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
    animation: dash 10s linear infinite;
}

svg .sword-of-justice-3 {
    stroke-dashoffset: 1337.35009765625px;
    stroke-dasharray: 1337.35009765625px;
    fill: transparent;

    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .sword-of-justice-3 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
    animation: dash 10s linear infinite;
}

svg .sword-of-justice-4 {
    stroke-dashoffset: 1479.471435546875px;
    stroke-dasharray: 1479.471435546875px;
    fill: transparent;

    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .sword-of-justice-4 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
    animation: dash 10s linear infinite;
}

svg .sword-of-justice-5 {
    stroke-dashoffset: 298.4784240722656px;
    stroke-dasharray: 298.4784240722656px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .sword-of-justice-5 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
    animation: dash 10s cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
}


.dropping-texts {
    display: inline-block;
    width: 180px;
    text-align: left;
    height: 36px;
    vertical-align: -2px;
}

    .dropping-texts > div {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        position: absolute;
        font-weight: 300;
        text-shadow: 0px 30px 25px -20px rgba(0,0,0,0.5);
    }

        .dropping-texts > div:nth-child(1) {
            animation: roll 13s linear infinite 0s;
        }

        .dropping-texts > div:nth-child(2) {
            animation: roll 13s linear infinite 3s;
        }

        .dropping-texts > div:nth-child(3) {
            animation: roll 13s linear infinite 6s;
        }

        .dropping-texts > div:nth-child(4) {
            animation: roll2 13s linear infinite 9s;
        }

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}

@keyframes bg {
    0% {
        color: #ff0075;
    }

    3% {
        color: #0094ff;
    }

    20% {
        color: #0094ff;
    }

    23% {
        color: #b200ff;
    }

    40% {
        color: #b200ff;
    }

    43% {
        color: #8BC34A;
    }

    60% {
        color: #8BC34A;
    }

    80% {
        color: #F44336;
    }

    83% {
        color: #F44336;
    }

    100% {
        color: #F44336;
    }
}

@keyframes roll {
    0% {
        visibility: hidden;
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(-25deg);
    }

    3% {
        visibility: visible;
        opacity: 1;
        transform: rotate(0deg);
    }

    5% {
        visibility: visible;
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
    }

    20% {
        visibility: visible;
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
        transform: rotate(0deg);
    }

    27% {
        visibility: hidden;
        font-size: 0px;
        opacity: 0.5;
        margin-left: 20px;
        margin-top: 100px;
    }

    100% {
        visibility: hidden;
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(15deg);
    }
}

@keyframes roll2 {
    0% {
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(-25deg);
    }

    3% {
        opacity: 1;
        transform: rotate(0deg);
    }

    5% {
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
    }

    30% {
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
        transform: rotate(0deg);
    }

    37% {
        opacity: 0;
        margin-left: -100px;
        margin-top: -80px;
    }

    100% {
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(15deg);
        transform: scale(1, 1);
    }
}

.parallax > use {
    animation: move-forever 55s cubic-bezier(.55,.5,.45,.5) infinite;
}

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }

    100% {
        transform: translate3d(85px,0,0);
    }
}

@keyframes slide-and-fade-right{
    0% {
        margin-left: inherit;
        opacity: 1;
    }
    
    49% {
        margin-left: 100px;
        opacity: 0;
    }

    51% {
        margin-left: -100px;
        opacity: 0;
    }

    100% {
        margin-left: inherit;
        opacity: 1;
    }
}

@keyframes slide-and-fade-left {
    0% {
        margin-right: inherit;
        opacity: 1;
    }

    49% {
        margin-right: 100px;
        opacity: 0;
    }

    51% {
        margin-right: -100px;
        opacity: 0;
    }

    100% {
        margin-right: inherit;
        opacity: 1;
    }
}

.slide-and-fade-to-right {
    animation: slide-and-fade-right 0.5s linear;
}

.slide-and-fade-to-left {
    animation: slide-and-fade-left 0.5s linear;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

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

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

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

.bounce {
    animation: bounce 2s infinite;
}

.background-gradient-animation {
    animation: background-gradient 18s ease infinite;
}

.opacity {
    opacity: 1;
}

.semi-opacity {
    opacity: 0.5;
}