.flogo-wrap-bg {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    z-index: 999;
}

.flogo-wrap-bg-out {
    animation: fout 0.3s ease-in-out forwards;
}

.flogo-wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 100px;
    margin: auto;
    width: 220px;
    height: 150px;
    z-index: 9999;
}

.flogo-wrap-out {
    animation: fout 0.2s ease-in-out forwards;
}

.flogo-in {
    position: absolute;
    left: 125px;
    top: 55%;
    right: 0px;
    bottom: -1px;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fbeat 0.5s ease-in-out forwards;
    animation-delay: 0s;
    opacity: 0;
}

.flogo {
    position: relative;
    width: 150px;
    height: 150px;
}

.logo-clip {
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-f0 {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    background: linear-gradient(to bottom,#246c6e, #248c5c);
    /*background: linear-gradient(0deg, rgba(8,169,80,1) 0%, rgba(8,98,50,1) 100%);*/
}

.logo-f1 {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #fff;
}

.logo-f2 {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: linear-gradient(to bottom,#246c6e, #248c5c);
    /*background: linear-gradient(0deg, rgba(8,169,80,1) 0%, rgba(8,98,50,1) 100%);*/
    z-index: 7777;
}

.logo-f3 {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #fff;
}

.logo-f4 {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    background-color: #fff;
    z-index: 9999;
}

.logo-half-f0 {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 50%;
    left: 0px;
    background-color: #fff;
    z-index: 6666;
}

.logo-half-f2 {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 50%;
    background-color: #fff;
    z-index: 8888;
}

.flogo-in-1 {
    width: 18px;
    border-radius: 10px;
    background-color: #404040;
    height: 100%;
    margin-right: 10px;
}

.flogo-in-2 {
    width: 16px;
    border-radius: 10px;
    background-color: #404040;
    height: 100%;
}

.flogo-in-3 {
    width: 12px;
    border-radius: 10px;
    background-color: #404040;
    height: 110%;
    margin-left: 8px;
    margin-right: 8px;
    transform: rotate(-36deg);
}

.flogo-in-4 {
    width: 16px;
    border-radius: 10px;
    background-color: #404040;
    height: 100%;
}

.logo-f5 {
    width: calc(100%);
    height: calc(100%);
    -webkit-clip-path: polygon(50% 0%, 50% 50%, 100% 50%, 100% 0%);
    clip-path: polygon(50% 0%, 50% 50%, 100% 50%, 100% 0%);
    background: linear-gradient(to bottom,#246c6e, #248c5c);
    /*background: linear-gradient(0deg, rgba(8,169,80,1) 0%, rgba(8,98,50,1) 100%);*/
    animation: fround 1.5s ease infinite;
}

.star {
    position: absolute;
    right: 25%;
    top: 25%;
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    animation: fstar 0.5s ease-in-out forwards;
    opacity: 0;
}

.flogo-slogan {
    position: absolute;
    height: 60px;
    line-height: 60px;
    bottom: -60px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    font-size: 28px !important;
    font-weight: bold;
    z-index: 999999;
    letter-spacing:2px;
}

    .flogo-slogan * {
        font-family: Arial !important;
        font-size: 28px !important;
        font-weight: bold !important;
    }

    .flogo-slogan span {
        margin-left: 3px;
        margin-right: 3px;
        /*opacity: 0;*/
        opacity: 1;
        color: #404040;
    }

        .flogo-slogan span:nth-child(2n+1) {
            background-image: linear-gradient(to bottom,#246c6e, #248c5c) !important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /*color: #0c9a4f;*/
        }

        .flogo-slogan span:nth-child(1) {
            /*animation: slogan1 0.5s ease-in-out forwards;
            animation-delay: 1s;*/
        }

        .flogo-slogan span:nth-child(2) {
            /*animation: slogan2 0.5s ease-in-out forwards;
            animation-delay: 1s;*/
        }

        .flogo-slogan span:nth-child(3) {
            /*animation: slogan3 0.5s ease-in-out forwards;
            animation-delay: 1s;*/
        }

        .flogo-slogan span:nth-child(4) {
            /*animation: slogan4 0.5s ease-in-out forwards;
            animation-delay: 1s;*/
        }

.half-right-paging {
    -webkit-clip-path: polygon(51% 0%, 100% 0%, 100% 100%, 40% 100%, 60% 0%);
    clip-path: polygon(51% 0%, 100% 0%, 100% 100%, 40% 100%, 60% 0%);
    background-color: #fff;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99;
}

.half-right-paging-out {
    animation: movetoRight 1s ease-in-out forwards;
}

.half-left-paging {
    -webkit-clip-path: polygon(51% 0%, 100% 0%, 100% 100%, 40% 100%, 60% 0%);
    clip-path: polygon(51% 0%, 100% 0%, 100% 100%, 40% 100%, 60% 0%);
    background-color: #fff;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    transform: rotate(-180deg);
}

.half-left-paging-out {
    animation: movetoLeft 1s ease-in-out forwards;
}

@keyframes movetoLeft {
    from {
        transform: translateX(0px) rotate(-180deg);
    }

    to {
        transform: translateX(-200%) rotate(-180deg);
    }
}

@keyframes movetoRight {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(200%);
    }
}

@keyframes slogan1 {
    from {
        opacity: 0;
        transform: translateX(-300px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slogan2 {
    from {
        opacity: 0;
        transform: translateY(-300px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slogan3 {
    from {
        opacity: 0;
        transform: translateY(300px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slogan4 {
    from {
        opacity: 0;
        transform: translateX(300px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fround {
    from {
        opacity: 0;
        transform: rotateZ(0deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(360deg);
    }
}

@keyframes fstar {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

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

@keyframes fbeat {
    from {
        opacity: 0;
        transform: translateX(-90px) translateY(-40px) scale(0);
    }

    to {
        opacity: 1;
        transform: translateX(0px) translateY(0px) scale(1);
    }
}

@keyframes fout {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes fout2 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

.flogo-loading {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    margin: auto !important;
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
}

    .flogo-loading > div {
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(50% 0%, 50% 50%, 100% 50%, 100% 0%);
        clip-path: polygon(50% 0%, 50% 50%, 100% 50%, 100% 0%);
        background: linear-gradient(to bottom,#246c6e, #248c5c);
        /*background: linear-gradient( 0deg, rgba(8,169,80,1) 0%, rgba(8,98,50,1) 100%);*/
        animation: flogo-loading-circle 2s ease infinite;
    }

@keyframes flogo-loading-circle {
    from {
        opacity: 0;
        transform: rotateZ(0deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(360deg);
    }
}


.progresBar2 {
    display: none;
    position: fixed;
    height: 2px;
    background: linear-gradient(to right,#246c6e, #248c5c);
    top: 0px;
    left: 0px;    
    width: 0%;
    z-index:99999 !important;
}

.progresBar {
    display: none;
    position: absolute;
    height: 2px;
    background: linear-gradient(to right,#246c6e, #248c5c);
    bottom: 0px;
    left: 0px;
    width: 0%;
}

.progresBarAnimation {
    animation: progresBar 3s;
}

.progresBarHover {
    width: 100% !important;
}

@keyframes progresBar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}