.mobile-numbers {
    display: none;
}


.animate {
    animation: growShrinkFade 1s ease-in-out;
}

@keyframes growShrinkFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@media (max-width: 768px) {
    /*
    index begin
    */
    .right-panel-container {
        margin: 1rem 0 0;
    }

    .big-number-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 1rem 1rem 1rem;
        align-items: center;
    }

    .mobile-numbers {
        text-align: right;
    }

    .grid-container {
        display: none;
    }

    .right-panel {
        position: relative;
        width: 100%;
        background: transparent linear-gradient(270deg, #00091173 0%, #17435b 41%, #54545400 100%) 0% 0% no-repeat padding-box;
    }

    .mobile-numbers .info-title, .mobile-numbers .next-session-info {
        font-size: 13px;
        color: #adafb2;
    }

    .numbers-container {
        padding: 1rem 1rem;
        display: flex;
        margin-top: 0;
        background-color: #153e55;
    }

    .number-circle {
        background: url(assets/ball.png) no-repeat left;
        background-size: cover;
        width: 160px;
        height: 160px;
    }

    .number-circle-bold {
        font-size: 45px;
    }

    .big-number-ball-container {
        width: 160px;
        height: 160px;
    }

    .col-6 {
        width: 10%;
    }

    .empty-ball {
        width: 90vw;
        height: 8.3vw;
        margin: 0rem 1vw 0.5rem 0;
    }

    .header {
        display: none;
    }

    #bigCircle {
        transform-origin: 79.5px 78.5px;
    }

    .number-circle-placed {
        width: 9vw;
        height: 9vw;
    }

    .mobile-numbers {
        display: block;
    }

    .f-big {
        font-size: 4vw!important;
    }
}


.f-big {
    font-size: 28px;
}