.timerCountDownFirst {
    position: sticky;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: #156a52;
    width: 315px;
    height: 36px;
    margin-top: -30px;
    margin-right: -18px;
    border-radius: 10px;
}

.timerCountDownFirst__block {
    width: 50%;
    height: 50%;
    position: absolute;
    background-color: #16a880;
    visibility: hidden;

}

.timerCountDownFirst__block--topRight {
    top: 0%;
    right: 0%;
    transform-origin: left bottom;
    -webkit-animation: timerCountDownFirst-topRight 20s linear forwards 1;
    animation: timerCountDownFirst-topRight 20s linear forwards 1;
}

.timerCountDownFirst__block--rightBottom {
    right: 0%;
    bottom: 0%;
    transform-origin: left top;
    -webkit-animation: timerCountDownFirst-rightBottom 20s linear forwards 1;
    animation: timerCountDownFirst-rightBottom 20s linear forwards 1;
}

.timerCountDownFirst__block--bottomLeft {
    bottom: 0%;
    left: 0%;
    transform-origin: right top;
    -webkit-animation: timerCountDownFirst-bottomLeft 20s linear forwards 1;
    animation: timerCountDownFirst-bottomLeft 20s linear forwards 1;
}

.timerCountDownFirst__block--leftTop {
    left: 0%;
    top: 0%;
    transform-origin: right bottom;
    -webkit-animation: timerCountDownFirst-leftTop 20s linear forwards 1;
    animation: timerCountDownFirst-leftTop 20s linear forwards 1;
}

@-webkit-keyframes timerCountDownFirst-topRight {
    0% {
        visibility: hidden;
        transform: skewY(-90deg);
    }

    25%, 100% {
        visibility: visible;
        transform: skewY(0deg);
    }
}

@keyframes timerCountDownFirst-topRight {
    0% {
        visibility: hidden;
        transform: skewY(-90deg);
    }

    25%, 100% {
        visibility: visible;
        transform: skewY(0deg);
    }
}

@-webkit-keyframes timerCountDownFirst-rightBottom {
    0%, 25% {
        visibility: hidden;
        transform: skewX(90deg);
    }

    50%, 100% {
        visibility: visible;
        transform: skewX(0deg);
    }
}

@keyframes timerCountDownFirst-rightBottom {
    0%, 25% {
        visibility: hidden;
        transform: skewX(90deg);
    }

    50%, 100% {
        visibility: visible;
        transform: skewX(0deg);
    }
}

@-webkit-keyframes timerCountDownFirst-bottomLeft {
    0%, 50% {
        visibility: hidden;
        transform: skewY(-90deg);
    }

    75%, 100% {
        visibility: visible;
        transform: skewY(0deg);
    }
}

@keyframes timerCountDownFirst-bottomLeft {
    0%, 50% {
        visibility: hidden;
        transform: skewY(-90deg);
    }

    75%, 100% {
        visibility: visible;
        transform: skewY(0deg);
    }
}

@-webkit-keyframes timerCountDownFirst-leftTop {
    0%, 75% {
        visibility: hidden;
        transform: skewX(90deg);
    }

    100% {
        visibility: visible;
        transform: skewX(0deg);
    }
}

@keyframes timerCountDownFirst-leftTop {
    0%, 75% {
        visibility: hidden;
        transform: skewX(90deg);
    }

    100% {
        visibility: visible;
        transform: skewX(0deg);
    }
}