@keyframes moveLeft
{
    0% {
    right: var(--initial-right);
    }
    50% {
        right: calc(var(--initial-right) - 8px);
    }
    100% {
        right: var(--initial-right);
    }
}
@keyframes moveBottom
{
    0% {
    height: 0;
    }
    100% {
    height: 100 %;
    }
}


@-webkit-keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(0.75, 0.75, 1);
    }

    to {
        opacity: 0;
        transform: scale3d(1.5, 1.5, 1);
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(0.75, 0.75, 1);
    }

    to {
        opacity: 0;
        transform: scale3d(1.5, 1.5, 1);
    }
}


@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}



/* New */

.box_animation_custom {
    /*width: 60vmin;
    height: 50vmin;*/
    display: grid;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;
    --border-angle: 0turn;
    --main-bg: conic-gradient( from var(--border-angle), #213, #112 5%, #112 60%, #213 95% );
    border: solid 5px transparent !important;
    border-radius: 2em;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
    background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    -webkit-animation: bg-spin 3s linear infinite;
    animation: bg-spin 3s linear infinite;
}

@-webkit-keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

.box_animation_custom:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}










.card_aniamtion_custom {
   /* width: 300px;
    height: 300px;*/
    color: #fff;
    background: transparent;
    border-top: 1px solid rgba(255, 49, 49, 0.5);
    border-right: 1px solid rgba(0, 255, 255, 0.5);
    border-bottom: 1px solid rgba(57, 255, 20, 0.5);
    border-left: 1px solid rgba(255, 255, 113, 0.5);
    /*display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;*/
    /*padding: 1em;*/
}

.card_aniamtion_custom .span_animation {
    position: absolute;
    border-radius: 100vmax;
}

.card_aniamtion_custom .top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient( 90deg, transparent 50%, rgba(255, 49, 49, 0.5), rgb(255, 49, 49) );
}

.card_aniamtion_custom .bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient( 90deg, rgb(57, 255, 20), rgba(57, 255, 20, 0.5), transparent 50% );
}

.card_aniamtion_custom .right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient( 180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255) );
}

.card_aniamtion_custom .left {
    left: 0;
    bottom: 0;
    width: 5px;
    height: 0;
    background: linear-gradient( 180deg, rgb(255, 255, 113), rgba(255, 255, 113, 0.5), transparent 70% );
}

.card_aniamtion_custom .top {
    animation: animateTop 3s ease-in-out infinite;
}

.card_aniamtion_custom .bottom {
    animation: animateBottom 3s ease-in-out infinite;
}

.card_aniamtion_custom .right {
    animation: animateRight 3s ease-in-out infinite;
}

.card_aniamtion_custom .left {
    animation: animateLeft 3s ease-in-out infinite;
}

@keyframes animateTop {
    25% {
        width: 100%;
        opacity: 1;
    }

    30%, 100% {
        opacity: 0;
    }
}

@keyframes animateBottom {
    0%, 50% {
        opacity: 0;
        width: 0;
    }

    75% {
        opacity: 1;
        width: 100%;
    }

    76%, 100% {
        opacity: 0;
    }
}

@keyframes animateRight {
    0%, 25% {
        opacity: 0;
        height: 0;
    }

    50% {
        opacity: 1;
        height: 100%;
    }

    55%, 100% {
        height: 100%;
        opacity: 0;
    }
}

@keyframes animateLeft {
    0%, 75% {
        opacity: 0;
        bottom: 0;
        height: 0;
    }

    100% {
        opacity: 1;
        height: 100%;
    }
}




.button_custom-animation {
    background: none;
    border: 0;
    box-sizing: border-box;
    /*margin: 1em;
    padding: 1em 2em;*/
    box-shadow: inset 0 0 0 2px var(--swiper-pagination-bullet-color-custom1);
    /*color: #f45e61;*/
    /*font-size: inherit;*/
    /*font-weight: 700;*/
    position: relative;
    vertical-align: middle;
    border-radius: 10px;
}

.button_custom-animation::before, .button_custom-animation::after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}

.center_animation:hover {
    color: var(--swiper-pagination-bullet-color-custom2);
    border: none !important;
    box-shadow: unset !important;
}

.center_animation::before, .center_animation::after {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center;
}

.center_animation::before {
    border-top: 2px solid var(--swiper-pagination-bullet-color-custom2);
    border-bottom: 2px solid var(--swiper-pagination-bullet-color-custom2);
    transform: scale3d(0, 1, 1);
    border-radius: 10px;
}

.center_animation::after {
    border-left: 2px solid var(--swiper-pagination-bullet-color-custom2);
    border-right: 2px solid var(--swiper-pagination-bullet-color-custom2);
    transform: scale3d(1, 0, 1);
    border-radius: 10px;
}

.center_animation:hover::before, .center_animation:hover::after {
    transform: scale3d(1, 1, 1);
    transition: transform 0.5s;
    border-radius: 10px;
}

.group_info_contact-content:hover{
    pointer-events: all;
    cursor: pointer;
}