html {
    font-size: 1em;
    line-height: 1.4;
}


html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

#coffee-wrap {
    width: 800px;
    height: 350px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mug,
.machine,
.floor {
    position: absolute;
}

.mug {
    width: 72px;
    height: 77px;
    bottom: 6px;
    z-index: 4;
}

.mug1 {
    opacity: 1;
    right: 100px;
    animation: new-mug 3.5s ease infinite;
}

.mug2 {
    opacity: 1;
    right: 220px;
    animation: jump-to-machine 3.5s linear infinite;
}

.mug3 {
    right: 377px;
    bottom: 46px;
    animation: filled-out 3.5s ease infinite;
}

.mug4{
    right: 540px;
    animation: go-out 3.5s ease infinite;
}

.svg-mug {
    width: 100%;
    height: 100%;
}

.mug .cream {
    animation: mug-fill-cream 3.5s ease infinite;
}

.mug .coffee {
    animation: mug-fill-coffee 3.5s ease infinite;
}

.machine {
    width: 173px;
    height: 285px;
    bottom: 6px;
    left: 300px;
    z-index: 2;
    transform: scale(1);
    transform-origin: bottom center;
    animation: machine-coffee 3.5s ease infinite;
}

#hot-coffee-wrap {
    position: absolute;
    bottom: 56px;
    right: 408px;
    height: 100px;
    width: 20px;
    overflow: hidden;
    z-index: 2;
    animation: hot-coffee-wrap 3.5s ease infinite;
}

.last-drop {
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 8px;
    border-radius: 50%;
    background: #AB4D37;
    animation: last-drop 3.5s ease infinite;
}

#hot-coffee-down {
    transform: translateY(0);
    animation: hot-coffee-down 3.5s ease infinite;
}

.olhos {
    animation: olhos 3.5s ease infinite;
}

#boca-encher {
    animation: boca-encher 3.5s ease infinite;
}

#boca-sopro {
    opacity: 0;
    animation: boca-sopro 3.5s ease infinite;
}

#boca-pronto {
    opacity: 0;
    animation: boca-pronto 3.5s ease infinite;
}

.svg-machine {
    width: 100%;
    height: 100%;
}

.stars {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 20%;
    background: #F9D67D;
    opacity: 0;
    bottom: 0;
    left: 0;
}

.star1 {
    opacity: 0;
    transform: translate(500px, -120px) scale(0.2);
    animation: star1 3.5s ease infinite;
}

.star2 {
    opacity: 0;
    transform: translate(280px, -170px) scale(0.2);
    animation: star2 3.5s ease infinite;
}

.star3 {
    opacity: 0;
    transform: translate(500px, -250px) scale(0.2);
    animation: star3 3.5s ease infinite;
}



/* Floor */
.floor {
    width: 538px;
    height: 10px;
    bottom: 6px;
    left: 120px;
    z-index: 0;
}

.svg-floor {
    width: 100%;
    height: 100%;
}

/* MUG 1 */

@keyframes new-mug {
    0% {
        opacity: 1;
        right: 220px;
    }

    21.25% {
        opacity: 1;
        right: 220px;
    }
    21.30% {
        opacity: 0;
        right: 100px;
    }
    31.25% {
        opacity: 0;
        right: 100px;
    }

    34% {
        opacity: 1;
    }

    37.5% {
        right: 220px;
    }
    100% {
        opacity: 1;
        right: 220px;
    }

}


/* MUG 2 */

@keyframes jump-to-machine {

    0% {
        opacity: 0;
    }

    21.2% {
        opacity: 0;
    }

    21.25% {
        opacity: 1;
        bottom: 6px;
        right: 220px;
    }

    39.95% {
        opacity: 1;
        bottom: 46px;
        right: 377px;
    }
    40% {
        opacity: 0;
        bottom: 6px;
        right: 220px;
    }

}

/* MUG 3 */

@keyframes mug-fill-coffee {
    0% {
        y: 30;
        height: 47px;
        opacity: 1;
    }

    30% {
        y: 30;
        height: 47px;
        opacity: 1;
    }
    30.1% {
        opacity: 0;
        y: 70;
        height: 0px;
    }
    40.9% {
        opacity: 0;
    }
    41% {
        opacity: 1;
        y: 70;
        height: 0px;
    }

    80% {
        y: 30;
        height: 47px;
        opacity: 1;
    }

    100% {
        y: 30;
        height: 47px;
        opacity: 1;
    }
}

@keyframes mug-fill-cream {
    0% {
        y: 20;
        height: 10px;
        opacity: 1;
    }

    30% {
        y: 20;
        height: 10px;
        opacity: 1;
    }
    30.1% {
        y: 70;
        height: 0px;
        opacity: 1;
    }
    41% {
        y: 70;
        height: 0px;
        opacity: 1;
    }

    80% {
        y: 20;
        height: 10px;
        opacity: 1;
    }

    100% {
        y: 20;
        height: 10px;
        opacity: 1;
    }


}

@keyframes filled-out {
    0% {
        opacity: 1;
    }
    10% {
        bottom: 46px;
        right: 377px;
        opacity: 1;
    }
    30% {
        bottom: 6px;
        right: 540px;
        opacity: 1;
    }
    30.1% {
        opacity: 0;
    }
    39.9% {
        opacity: 0;
        bottom: 46px;
        right: 377px;
    }
    40% { opacity: 1; }
    100% { opacity: 1; }

}


/* MUG 4 */

@keyframes go-out {
    0% {
        opacity: 1;
    }
    7% {
        bottom: 6px;
        right: 540px;
        opacity: 1;
    }
    13% {
        bottom: 6px;
        right: 620px;
        opacity: 0;
    }
    30%  { opacity: 0; right: 540px; }
    30.1%  { opacity: 1 }
    100% { opacity: 1}
}

/* Coffee */


@keyframes hot-coffee-wrap {
    0% {


    }
    39% {

    }
    40% {
        height: 105px;
    }

    70% {
        height: 84px;

    }

    71% {


    }
}

@keyframes hot-coffee-down {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    39% {
         opacity: 0;
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
         opacity: 1;
        transform: translateY(600px);
    }

    71% {
        opacity: 0;
        transform: translateY(0);
    }
}

@keyframes last-drop {
    0% {
        opacity: 0;
    }

    64% {
        opacity: 0;
        transform: translateY(0);
    }

    66% {
        opacity: 1;
    }

    71% {
        opacity: 1;
        transform: translateY(-40px);
    }

    76% {
        opacity: 1;
        transform: translateY(0px);
    }

    77% {
        opacity: 0;
    }
    100% {
       opacity: 0;
    }

}



/* Machine */

@keyframes machine-coffee {
    0% {

    }

    25% {
        /*width: 165px;
        height: 300px;
        margin-left: 0;*/
        transform: scale(0.95, 1.07);
    }

    40% {
       /*width: 165px;
        height: 300px;
        margin-left: 0;*/
        transform: scale(0.95, 1.07);
    }


    75% {
        /*width: 183px;
        height: 265px;*/
        transform: scale(1.05, 0.92);
    }

    100% {

    }
}

@keyframes olhos {
    3.75% {
        /* cy: 78.666; */
        opacity: 1;
    }
    3.80% { opacity: 0; }
    6% { opacity: 0; }
    6.1% { opacity: 1; }

    10% {
        /*cy: 74.666;*/
    }

    25% {

    }

    40% {
        /*cy: 74.666;*/
    }
    71% {
        /*cy: 83.666;*/
    }

    89% {
        /*opacity: 1;*/
    }
    90% {
        /*opacity: 0;*/
    }

    93% {
        /*opacity: 0;*/
    }
    94% {
        /*opacity: 1;*/
    }

    100% {

    }
}

@keyframes boca-encher {
    0% {
        opacity: 1;
        r: 2.666;
    }

    30% {
        r: 14;
        opacity: 1;
    }

    38% {
        r: 14;
        opacity: 1;
    }
    39% {
        opacity: 0;
    }

    25% {

    }

    40% {

    }


    75% {

    }

    100% {
         opacity: 0;
    }
}

@keyframes boca-sopro {
    0% {
        opacity: 0;
    }

    38% {
        opacity: 0;
    }
    39% {
        opacity: 1;
        transform: translateY(0);
    }

    74% {
        opacity: 1;
        transform: translateY(12px);
    }
    75% {
        opacity: 0;
    }
}

@keyframes boca-pronto {
    0% { opacity: 0; }
    74% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes star1 {
    0% { opacity: 0; }
    28% { opacity: 0; }
    30% {
        opacity: 1;
        transform: translate(500px, -120px) scale(0.2) rotate(-45deg);
    }
    40% {
        opacity: 1;
        transform: translate(500px, -120px) scale(1) rotate(-45deg);
    }
    50% {
        transform: translate(500px, -120px) scale(0.2) rotate(-45deg);
        opacity: 1;
    }
    51% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes star2 {
    0% { opacity: 0; }
    43% { opacity: 0; }
    45% {
        opacity: 1;
        transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
    }
    55% {
        opacity: 1;
        transform: translate(280px, -170px) scale(1) rotate(-45deg);
    }
    65% {
        transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
        opacity: 1;
    }
    66% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes star3 {
    0% { opacity: 0; }
    53% { opacity: 0; }
    55% {
        opacity: 1;
        transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
    }
    65% {
        opacity: 1;
        transform: translate(500px, -210px) scale(1) rotate(-45deg);
    }
    75% {
        transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
        opacity: 1;
    }
    76% { opacity: 0; }
    100% { opacity: 0; }
}