.circles {
    pointer-events: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
   
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(224, 224, 224, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}






.pins {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #00cae9;
    position: absolute;
    transform: rotate( -45deg);
    left: 50%;
    /* top: 50%; */
    margin: -20px 0 0 -20px;
}
    .pins:after {
        content: "";
        width: 14px;
        height: 14px;
        margin: 8px 0 0 8px;
        background: #e6e6e6;
        position: absolute;
        border-radius: 50%;
    }

.bounce {
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
}

.pulsed {
    background: #d6d4d4;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: -2;
}

    .pulsed:after {
        content: "";
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute;
        margin: -13px 0 0 -13px;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0;
        box-shadow: 0 0 1px 2px #0370ba;
        animation-delay: 1.1s;
    }

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

@keyframes bounce {
    0% {
        opacity: 0;
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        transform: translateY(0) rotate(-45deg);
    }
}





/*ARROW HOVER ON MFA*/

.gradient {
    color: transparent;
    background: linear-gradient(315deg, rgb(236, 160, 255), rgb(170, 178, 255), rgb(132, 255, 201));
    -webkit-background-clip: text;
    background-clip: text;
    animation: bg-hue 2s linear infinite;
}

    

@keyframes bg-hue {
    100% {
        filter: hue-rotate(-360deg);
    }
}



.gradient-bg {
    color: transparent;
    background-color: linear-gradient(315deg, rgb(236, 160, 255), rgb(170, 178, 255), rgb(132, 255, 201));
    background: rgba(30, 116, 253, 0.15) !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: bg-hue-bg 3s linear infinite;
}


.gradient-text {
    color: transparent;
    background-color: linear-gradient(315deg, rgb(236, 160, 255), rgb(170, 178, 255), rgb(132, 255, 201));
    /*background: rgba(30, 116, 253, 0.15) !important;*/
    -webkit-background-clip: text;
    background-clip: text;
    animation: bg-hue-bg 3s linear infinite;
}



@keyframes bg-hue-bg {
    100% {
        filter: hue-rotate(-360deg);
    }
}


.activation-code-input {
    display: none;
}

.activation-code {
    direction: ltr;
    position: relative;
}

    .activation-code::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        border-bottom: 2px solid;
        border-color: #ccc;
        transition: opacity 0.3s ease;
    }

    .activation-code > span {
        position: absolute;
        display: block;
        font-size: 13px;
        color: #ccc;
        top: 0;
        right: 0;
        transition: all 0.3s ease;
    }

    .activation-code .activation-code-inputs {
        display: flex;
        /*flex-direction: row;*/
        /*flex-wrap: nowrap;*/
        flex-flow: row nowrap;
    }

        .activation-code .activation-code-inputs input {
            display: flex;
            flex-flow: column nowrap;
            padding: 0;
            border: 0;
            outline: 0;
            min-width: 0;
            line-height: 36px;
            text-align: center;
            align-items: center;
            transition: all 0.3s ease;
            border-bottom: 2px solid;
            border-color: #ccc;
            margin-right: 8px;
            /*background: red;*/
            opacity: 0;
        }

            .activation-code .activation-code-inputs input:last-child {
                margin-right: 0;
            }

    .activation-code.active::before {
        opacity: 0;
    }

    .activation-code.active .activation-code-inputs input {
        opacity: 1 !important;
    }

    .activation-code .activation-code-inputs input:focus {
        border-color: #46b2f0 !important;
    }

    .activation-code.active > span {
        transform: translate(0, -100%);
        line-height: 30px;
        opacity: 0.6;
    }


p#didNotGetCode {
    font-size: 12px !important;
}