@keyframes shadow-breathe {
    0% {
        box-shadow: 0px 0px 0px #999;
    }
    50% {
        box-shadow: 0px 0px 10px #999;
    }
    100% {
        box-shadow: 0px 0px 0px #999;
    }
}

@keyframes text-breathe {
    0% {
        color: #999;
    }
    50% {
        color: #333;
    }
    100% {
        color: #999;
    }
}

.shadow-breathe {
    animation: shadow-breathe 1.5s infinite;
    animation-timing-function: ease-in;
    -webkit-animation: shadow-breathe 1.5s infinite;
    -webkit-animation-timing-function: ease-in;
}

.text-breathe {
    animation: text-breathe 1.5s infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation: text-breathe 1.5s infinite;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes rock {
    0% {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
}

.rock {
    animation: rock .1s normal;
    animation-timing-function: linear;
    -webkit-animation: rock .1s normal;
    -webkit-animation-timing-function: linear;
}

@keyframes gradual-show {
    0% {
        opacity:0;
    }
    100% {
        opacity: 1;
    }
}

.gradual-show {
    animation: gradual-show 1.5s normal;
    animation-timing-function: linear;
    -webkit-animation: gradual-show 1.5s normal;
    -webkit-animation-timing-function: linear;
}

@keyframes PointMove_Up {
    0% {
        top: 90px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }

    50% {
        top: 0px;
        width: 30px;
        height: 100px;
        border-radius: 15px 15px 50% 50%;
    }

    100% {
        top: 0px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }
}

@keyframes PointMove_Down {
    0% {
        top: 0px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }

    50% {
        top: 40px;
        width: 30px;
        height: 100px;
        border-radius: 50% 50% 15px 15px;
    }

    100% {
        top: 90px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }
}

@keyframes PointMove_Round {
    0% {
        top: 0px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }

    25% {
        top: 40px;
        width: 30px;
        height: 100px;
        border-radius: 50% 50% 15px 15px;
    }

    50% {
        top: 90px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }

    75% {
        top: 0px;
        width: 30px;
        height: 100px;
        border-radius: 15px 15px 50% 50%;
    }

    100% {
        top: 0px;
        width: 50px;
        height: 50px;
        border-radius: 50% 50% 50% 50%;
    }
}

.pointMove_up, .pointMove_down, .pointMove_round {
    height: 50px;
    width: 50px;
    border-radius: 50% 50% 50% 50%;
    position: relative;
    margin: 0 auto;
}

.pointMove_up {
    animation: PointMove_Up .75s ease-in;
    -webkit-animation: PointMove_Up .75s ease-in;
}

.pointMove_down {
    animation: PointMove_Down .75s ease-in;
    -webkit-animation: PointMove_Down .75s ease-in;
}

.pointMove_round {
    animation: PointMove_Round 1.5s ease-in;
    -webkit-animation: PointMove_Round 1.5s ease-in;
}