*{margin:0;padding:0;}

.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top,#FF6B89 ,#FE6986);
}

.wrapper:before {
        content: '';
        background-image: url(data:image/png;base64,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);
        background-repeat: repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 0.3;
    }

.wrapper-content{
        width: 370px;
        height: 238px;
        z-index: 1;
        position: relative;
        padding: 0 150px;
    }
.toaster {
    z-index: 1;
    position: relative;
    -webkit-animation: shaking 8s infinite;
            animation: shaking 8s infinite;
}
.toaster-body {
        width: 344px;
        height: 175px;
        position: relative;
    }
.toaster-body-main {
            background: #F62B41;
            border-radius: 61px 61px 0 0;
            box-shadow: 77px 0px 0 0px inset #C20049;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            -webkit-transform-origin: center bottom;
                    transform-origin: center bottom;
            -webkit-animation: body 8s infinite,
                body-color 8s infinite;
                    animation: body 8s infinite,
                body-color 8s infinite;
        }
.toaster-bottom {
        position: relative;
        height: 52px;
        width: 372px;
        margin-left: -14px;
    }
.toaster-line {
        position: relative;
        height: 30px;
        background: #ffffff;
        border-radius: 15px;
    }
.toaster-line:after {
            content: '';
            background: #DFAFBF;
            position: absolute;
            left: 0;
            width: 125px;
            top: 0;
            bottom: 0;
            border-radius: 15px
        }
.toaster-legs {
        height: 22px;
        position: relative;
    }
.toaster-legs:before,
        .toaster-legs:after {
            content: '';
            background: #413239;
            width: 69px;
            height: 22px;
            border-radius: 0 0 15px 15px;
            box-shadow: 23px 0px 0 0px inset #2B3335;
            position: absolute;
        }
.toaster-legs:before {
            left: 37px;
        }
.toaster-legs:after {
            right: 34px;
        }
.toaster-face {
        position: absolute;
        right: 21px;
        top: 25px;
        height: 137px;
        width: 221px;
    }
.toaster-face-blush {
            position: absolute;
            top: 87px;
            left: 0;
            right: 0;
            height: 30px;
        }
.toaster-face-blush:before,
            .toaster-face-blush:after {
                content: '';
                position: absolute;
                top: 7px;
                width: 37px;
                height: 17px;
                border-radius: 100%;
                background: #C50B22;
                -webkit-animation: blush 8s infinite;
                        animation: blush 8s infinite;
            }
.toaster-face-blush:before {
                left: 8px;
            }
.toaster-face-blush:after {
                right: 8px;
            }
.toaster-face-happy {
            position: absolute;
            width: 100%;
            height: 100%;  
            -webkit-animation: face-happy 8s infinite;  
                    animation: face-happy 8s infinite;
        }
.toaster-face-tense {
            position: absolute;
            width: 100%;
            height: 100%;  
            -webkit-animation: face-tense 8s infinite;  
                    animation: face-tense 8s infinite;
        }
.toaster-eyes-tense-wr {
        position: absolute;
        left: 0;
        right: 0;
        height: 90px;
        -webkit-animation: eyes-tense 8s infinite;
                animation: eyes-tense 8s infinite;
    }
.toaster-eyes-tense {
        position: absolute;
        width: 75px;
        height: 54px;
        top: 20px;
    }
.toaster-eyes-tense:before {
            content: '';
            width: 47px;
            height: 12px;
            background: #2B3335;
            position: absolute;
            border-radius: 20px;
            top: 25px;
        }
.toaster-eyes-tense:after {
            content: '';
            width: 47px;
            height: 12px;
            background: #2B3335;
            position: absolute;
            border-radius: 20px;
            top: 30px;
        }
.toaster-eyes-tense--right {
            left: 28px;
        }
.toaster-eyes-tense--right:before {
                left: 20px;
                -webkit-transform: rotate(21deg);
                        transform: rotate(21deg);
            }
.toaster-eyes-tense--right:after {
                left: 20px;
                top: 40px;
                -webkit-transform: rotate(-24deg);
                        transform: rotate(-24deg);
            }
.toaster-eyes-tense--left {
            right: 28px;
        }
.toaster-eyes-tense--left:before {
                left: 25px;
                -webkit-transform: rotate(-21deg);
                        transform: rotate(-21deg);
            }
.toaster-eyes-tense--left:after {
                left: 25px;
                top: 40px;
                -webkit-transform: rotate(24deg);
                        transform: rotate(24deg);
            }
.toaster-mouth-tense {
        border: 10px solid transparent;
        width: 33px;
        height: 33px;
        position: absolute;
        left: 92px;
        bottom: 24px;
        border-radius: 100%;
        border-bottom-color: #2B3335;
    }
.toaster-mouth-tense:before,
        .toaster-mouth-tense:after {
            content: '';
            background: #2B3335;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            position: absolute;
            bottom: -3px;
        }
.toaster-mouth-tense:before {
            left: -5px;
        }
.toaster-mouth-tense:after {
            right: -5px;
        }
.toaster-eyes-happy  {
        position: absolute;
        background: #ffffff;
        width: 32px;
        height: 67px;
        box-shadow: 3px -2px 0 0px #DFAFBF inset, 
            -7px 4px 1px -3px #C4303E;
        border-radius: 20px;
        -webkit-animation: eyes 8s infinite;
                animation: eyes 8s infinite;
    }
.toaster-eyes-happy:after{
            content: '';
            background: #2B3335;
            width: 17px;
            height: 45px;
            border-radius: 10px;
            position: absolute;
            top: 11px;
            left: 9px;
            -webkit-transform-origin: left center;
                    transform-origin: left center;
            -webkit-animation: pupil 8s infinite;
                    animation: pupil 8s infinite;
        }
.toaster-eyes-happy--right {
            left: 49px;
            top: 9px;
        }
.toaster-eyes-happy--left {
            right: 40px;
            top: 9px;
        }
.toaster-mouth-happy {
        width: 100px;
        height: 50px;
        position: absolute;
        top: 83px;
        left: 65px;
    }
.toaster-mouth-happy-main {
						z-index: 1;
            background: #7F1B33;
            width: 76px;
            height: 39px;
            position: absolute;
            left: 13px;
            top: 5px;
            border-radius: 9px 9px 45px 45px;
            box-shadow: -3px 2px 0 0px #C4303E;
            overflow: hidden;
        }
.toaster-mouth-happy-main:before {
                content: '';
                background: #C3004B;
                width: 61px;
                height: 28px;
                border-radius: 100%;
                position: absolute;
                left: 7px;
                top: 20px;
                z-index: 1;
            }
.toaster-mouth-happy-main:after {
                content: '';
                background: #F62B41;
                width: 46px;
                height: 28px;
                border-radius: 100%;
                position: absolute;
                left: 15px;
                top: -20px;
                z-index: 1;
                box-shadow: 0 0 2px 0 #F62B41;
                -webkit-animation: mouth-upper-color 8s infinite;
                        animation: mouth-upper-color 8s infinite
            }
.toaster-mouth-happy-teeth {
            position: relative;
            top: 0;
            height: 18px;
        }
.toaster-mouth-happy-teeth:before,
            .toaster-mouth-happy-teeth:after {
                content: '';
                background: #ffffff;
                position: absolute;
                top: 0;
                height: 16px;
                width: 10px;
                box-shadow: 3px 0 0 0px #DFAFBF inset;
                border-radius: 6px;
            }
.toaster-mouth-happy-teeth:before {
                left: 24px;
            }
.toaster-mouth-happy-teeth:after {
                right: 25px;
            }
.toaster-switch {
        position: absolute;
        left: 8px;
        width: 57px;
        height: 123px;
        top: 40px;
        -webkit-animation: switch 8s infinite;
                animation: switch 8s infinite;
    }
.toaster-switch-hole {
            background: #9C0749;
            position: absolute;
            left: 17px;
            top: 5px;
            width: 16px;
            height: 107px;
            border-radius: 20px;
        }
.toaster-switch-hole:before {
                content: '';
                background:  #2B3335;
                position: absolute;
                left: 8px;
                top: 2px;
                bottom: 1px;
                width: 10px;
                border-radius: 182px;
            }
.toaster-switch-handler {
            background: #F0C4DF;
            position: absolute;
            top: 85px;
            left: 6px;
            width: 39px;
            height: 20px;
            border-radius: 4px;
            box-shadow: -6px 0 0 0px #CC98B8 inset;
            -webkit-transform-origin: center bottom;
                    transform-origin: center bottom;
            -webkit-animation: handler 8s infinite;
                    animation: handler 8s infinite;
        }
.shadow {
    position: absolute;
    width: 437px;
    height: 20px;
    border-radius: 10px;
    background: #FD5274;
    bottom: 0;
    left: 98px;
}
.bread {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #FFB071;
    width: 97px;
    height: 94px;
    border-radius: 20px;
    box-shadow: -10px 0 0 0 #B65119;
}
.bread:before,
    .bread:after {
        content: '';
        position: absolute;
        width: 40px;
        background:  #FFB071;
        top: 0;
        bottom: 0;
        border-radius: 10px;
    }
.bread:before {
        left: -1px;
        -webkit-transform: skewX(-4deg);
                transform: skewX(-4deg);
        box-shadow: -10px 0 0 0 #b65119;
    }
.bread:after{
        right: -1px;
        -webkit-transform: skewX(4deg);
                transform: skewX(4deg);
    }
.bread--heart {
        left: 229px;
        top: 76px;
        -webkit-animation: bread-heart 8s infinite;
                animation: bread-heart 8s infinite;
    }
.bread--heart .bread-bubbles--1 {
                top: -12px;
                left: 2px;
                width: 18px;
                height: 18px;
                box-shadow: inset 4px -3px 0 0 #EE9050;
            }
.bread--heart .bread-bubbles--1:before {
                    top: -3px;
                    left: 46px;
                    width: 10px;
                    height: 10px;
                    box-shadow: inset 2px -1px 0 0 #EE9050; 
                }
.bread--heart .bread-bubbles--1:after{
                    left: 11px;
                    top: 79px;
                    width: 8px;
                    height: 8px;
                    box-shadow: inset 2px -1px 0 0 #EE9050;
                }
.bread--heart .bread-bubbles--2 {
                top: 62px;
                left: 79px;
                width: 12px;
                height: 12px;
                box-shadow: inset 4px -3px 0 0 #EE9050;
            }
.bread--heart .bread-bubbles--2:before {
                    top: -29px;
                    left: -40px;
                    width: 14px;
                    height: 14px;
                    box-shadow: inset 2px -1px 0 0 #EE9050; 
                }
.bread--heart .bread-bubbles--2:after{
                    left: -15px;
                    top: -38px;
                    width: 8px;
                    height: 8px;
                    box-shadow: inset 2px -1px 0 0 #EE9050;
                }
.bread--heart .bread-bubbles--3 {
                top: 62px;
                left: 79px;
                width: 13px;
                height: 12px;
                z-index: 1;
                box-shadow: inset 4px -3px 0 0 #EE9050;
            }
.bread--heart .bread-pic {
            position: absolute;
            z-index: 1;
        }
.bread--heart .bread-pic--right {
                -webkit-transform: scaleX(-1);
                        transform: scaleX(-1);
                left: 101px;
            }
.bread--ball {
        left: 327px;
        top: 76px;
        -webkit-animation: bread-ball 8s infinite;
                animation: bread-ball 8s infinite;
    }
.bread--ball .bread-bubbles {
            width: 20px;
            height: 20px;
            box-shadow: inset 4px -3px 0 0 #EE9050;
        }
.bread--ball .bread-bubbles:before {
                top: -12px;
                left: 15px;
                width: 10px;
                height: 10px;
                box-shadow: inset 2px -1px 0 0 #EE9050; 
            }
.bread--ball .bread-bubbles:after{
                left: 88px;
                top: 7px;
                width: 8px;
                height: 8px;
                box-shadow: inset 2px -1px 0 0 #EE9050;
            }
.bread-bubbles {
        position: absolute;
        background: #FBA45F;
        border-radius: 100%;
    }
.bread-bubbles:after,
        .bread-bubbles:before {
            content: '';
            position: absolute;
            border-radius: 100%;
            background: inherit;
            z-index: 1;
        }
.bread-upper{
        left: -14px;
        right: -14px;
        top: -20px;
        height: 66px;
        position: absolute;
        border-radius: 42px;
        box-shadow: -10px 0 0 0 #b65119;
        background: #FFB071;
    }
.bread-upper:before {
            content: '';
            background: #FFB071;
            position: absolute;
            bottom: 0;
            left: 13px;
            right: 13px;
            height: 10px;
        }
.bread-pic-ball{
        border: 6px solid #DC8341;
        width: 61px;
        height: 60px;
        border-radius: 100%;
        position: absolute;
        top: 4px;
        left: 13px;
        z-index: 1;
        overflow: hidden;
    }
.bread-pic-ball-inner {
            border: 6px solid #DC8341;
            content: '';
            width: 203px;
            height: 203px;
            top: -38px;
            left: -165px;
            border-radius: 100%;
            position: absolute;
        }
.bread-pic-ball:before {
            content: '';
            -webkit-transform: rotate(-28deg);
                    transform: rotate(-28deg);
            border: 6px solid #DC8341;
            width: 83px;
            height: 58px;
            position: absolute;
            top: -46px;
            left: -25px;
            border-radius: 100%;
        }
.bread-pic-ball:after{
            content: "";
            width: 83px;
            height: 76px;
            top: 30px;
            left: 2px;
            border: 6px solid #DC8341;
            position: absolute;
            border-radius: 100%;
        }
.bread-pic-heart {
        border: 6px solid transparent;
        width: 33px;
        height: 33px;
        border-radius: 100%;
        position: absolute;
        top: 9px;
        left: 14px;
        z-index: 1;
        border-top-color: #DC8341;
        border-right-color: #DC8341;
        -webkit-transform: rotate(-81deg) skew(-11deg, 0deg);
                transform: rotate(-81deg) skew(-11deg, 0deg);
    }
.bread-pic-heart:after {
            content: "";
            width: 34px;
            height: 6px;
            background: #DC8341;
            position: absolute;
            top: 15px;
            left: -17px;
            -webkit-transform: rotate(-82deg);
                    transform: rotate(-82deg);
        }
@-webkit-keyframes body {
    0%,  
    22.9%  {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    25.4% {
        -webkit-transform: scaleY(1.03);
                transform: scaleY(1.03);
    }
    27.9%,
    46.6%  {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    48.75%,
    49.75% {
        -webkit-transform: scaleY(0.81);
                transform: scaleY(0.81);
    }
    52% {
        -webkit-transform: scaleY(1.14);
                transform: scaleY(1.14);
    }
    55% {
        -webkit-transform: scaleY(0.88);
                transform: scaleY(0.88);
    }
    57%,
    100% {
        -webkit-transform: scaleY(1) scaleX(1);
                transform: scaleY(1) scaleX(1);
    }
}
@keyframes body {
    0%,  
    22.9%  {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    25.4% {
        -webkit-transform: scaleY(1.03);
                transform: scaleY(1.03);
    }
    27.9%,
    46.6%  {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    48.75%,
    49.75% {
        -webkit-transform: scaleY(0.81);
                transform: scaleY(0.81);
    }
    52% {
        -webkit-transform: scaleY(1.14);
                transform: scaleY(1.14);
    }
    55% {
        -webkit-transform: scaleY(0.88);
                transform: scaleY(0.88);
    }
    57%,
    100% {
        -webkit-transform: scaleY(1) scaleX(1);
                transform: scaleY(1) scaleX(1);
    }
}
@-webkit-keyframes body-color {
    0%,
    35%,
    61.25%  {
        background: #F62B41;
        box-shadow: 77px 0px 0 0px inset #C20049;
    }
    51.6% {
        background: #DC0C24;
        box-shadow: 77px 0px 0 0px inset #9C0030;
    }
}
@keyframes body-color {
    0%,
    35%,
    61.25%  {
        background: #F62B41;
        box-shadow: 77px 0px 0 0px inset #C20049;
    }
    51.6% {
        background: #DC0C24;
        box-shadow: 77px 0px 0 0px inset #9C0030;
    }
}
@-webkit-keyframes mouth-upper-color {
    0%,
    35%,
    61.25% {
        background: #F62B41;
        box-shadow: 0 0 1px 0 #F62B41;
    }
    51.6% {
        background: #DC0C24;
        box-shadow: 0 0 1px 0 #DC0C24;
    }
}
@keyframes mouth-upper-color {
    0%,
    35%,
    61.25% {
        background: #F62B41;
        box-shadow: 0 0 1px 0 #F62B41;
    }
    51.6% {
        background: #DC0C24;
        box-shadow: 0 0 1px 0 #DC0C24;
    }
}
@-webkit-keyframes pupil {
    0%,
    1.6% {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    2.5% {
        -webkit-transform: scaleX(1.4);
                transform: scaleX(1.4);
    }
    4.1%,
    8.75% {
        -webkit-transform: scaleX(1) translateX(7px);
                transform: scaleX(1) translateX(7px);
    }
    9.25% {
        -webkit-transform: scaleX(1.4) translateX(0);
                transform: scaleX(1.4) translateX(0)
    }
    11.25%,
    65% {
        -webkit-transform: scaleX(1) translateX(0);
                transform: scaleX(1) translateX(0)
    }
    65.8% {
        -webkit-transform: scaleY(1.2) translateY(-6px);
                transform: scaleY(1.2) translateY(-6px);
    }
    66.6%,
    72% {
        -webkit-transform: scaleY(1) translateY(-11px);
                transform: scaleY(1) translateY(-11px);
    }
    65.8%,
    72.9% {
        -webkit-transform: scaleY(1.2) translateY(-6px);
                transform: scaleY(1.2) translateY(-6px);
    }
    75%,
    100% {
        -webkit-transform: scaleY(1) translateX(0);
                transform: scaleY(1) translateX(0)
    }
}
@keyframes pupil {
    0%,
    1.6% {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    2.5% {
        -webkit-transform: scaleX(1.4);
                transform: scaleX(1.4);
    }
    4.1%,
    8.75% {
        -webkit-transform: scaleX(1) translateX(7px);
                transform: scaleX(1) translateX(7px);
    }
    9.25% {
        -webkit-transform: scaleX(1.4) translateX(0);
                transform: scaleX(1.4) translateX(0)
    }
    11.25%,
    65% {
        -webkit-transform: scaleX(1) translateX(0);
                transform: scaleX(1) translateX(0)
    }
    65.8% {
        -webkit-transform: scaleY(1.2) translateY(-6px);
                transform: scaleY(1.2) translateY(-6px);
    }
    66.6%,
    72% {
        -webkit-transform: scaleY(1) translateY(-11px);
                transform: scaleY(1) translateY(-11px);
    }
    65.8%,
    72.9% {
        -webkit-transform: scaleY(1.2) translateY(-6px);
                transform: scaleY(1.2) translateY(-6px);
    }
    75%,
    100% {
        -webkit-transform: scaleY(1) translateX(0);
                transform: scaleY(1) translateX(0)
    }
}
@-webkit-keyframes eyes {
    0%,
    20.41%,
    51.25%,
    100% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1)
    }
    22.5% {
        -webkit-transform: scaleY(0.8);
                transform: scaleY(0.8)
    }
}
@keyframes eyes {
    0%,
    20.41%,
    51.25%,
    100% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1)
    }
    22.5% {
        -webkit-transform: scaleY(0.8);
                transform: scaleY(0.8)
    }
}
@-webkit-keyframes face-happy {
    22.9% {
        opacity: 1;
    }
    23%,
    51%  {
        opacity: 0;  
    }
    51.51% {
        opacity: 1;  
        -webkit-transform: scaleY(1);  
                transform: scaleY(1);
    }
    52.08% {
        -webkit-transform: scaleY(1.4);
                transform: scaleY(1.4);
    }
    54.58% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes face-happy {
    22.9% {
        opacity: 1;
    }
    23%,
    51%  {
        opacity: 0;  
    }
    51.51% {
        opacity: 1;  
        -webkit-transform: scaleY(1);  
                transform: scaleY(1);
    }
    52.08% {
        -webkit-transform: scaleY(1.4);
                transform: scaleY(1.4);
    }
    54.58% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-webkit-keyframes face-tense {
    0%,
    22.9%  {
        opacity: 0;
    }
    23% {
        opacity: 1;  
    }
    25.4% {
        opacity: 1;
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);  
    }
    26.6% {
        opacity: 1;
        -webkit-transform: scaleY(1);
                transform: scaleY(1);  
    }
    51% {
        opacity: 1;  
    }
    51.51%,
    100% {
        opacity: 0;  
    }
}
@keyframes face-tense {
    0%,
    22.9%  {
        opacity: 0;
    }
    23% {
        opacity: 1;  
    }
    25.4% {
        opacity: 1;
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);  
    }
    26.6% {
        opacity: 1;
        -webkit-transform: scaleY(1);
                transform: scaleY(1);  
    }
    51% {
        opacity: 1;  
    }
    51.51%,
    100% {
        opacity: 0;  
    }
}
@-webkit-keyframes eyes-tense {
    0%,
    26.6% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    27.08% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    27.56%,
    28%  {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    28.6% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    29% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    30.5% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    31% {
        -webkit-transform: translate(-5px, 15px);
                transform: translate(-5px, 15px);
    }
    31.5% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    32.5% {
        -webkit-transform: translate(0, 17px);
                transform: translate(0, 17px);
    }
    33% {
        -webkit-transform: translate(2px, 13px);
                transform: translate(2px, 13px);
    }
    34% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    35% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    36% {
        -webkit-transform: translate(-3px, 10px);
                transform: translate(-3px, 10px);
    }
    38% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    39% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    40% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    41% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    42% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    43% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    44% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    45% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    46% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    47% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    48% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    49% {
        -webkit-transform: translate(-3px, 20px);
                transform: translate(-3px, 20px);
    }
    50% {
        -webkit-transform: translate(-3px, 20px);
                transform: translate(-3px, 20px);
    }
}
@keyframes eyes-tense {
    0%,
    26.6% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    27.08% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    27.56%,
    28%  {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    28.6% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    29% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    30.5% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    31% {
        -webkit-transform: translate(-5px, 15px);
                transform: translate(-5px, 15px);
    }
    31.5% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    32.5% {
        -webkit-transform: translate(0, 17px);
                transform: translate(0, 17px);
    }
    33% {
        -webkit-transform: translate(2px, 13px);
                transform: translate(2px, 13px);
    }
    34% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
    35% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    36% {
        -webkit-transform: translate(-3px, 10px);
                transform: translate(-3px, 10px);
    }
    38% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    39% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    40% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    41% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    42% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    43% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    44% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    45% {
        -webkit-transform: translate(0px, 13px);
                transform: translate(0px, 13px);
    }
    46% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    47% {
        -webkit-transform: translate(-5px, 12px);
                transform: translate(-5px, 12px);
    }
    48% {
        -webkit-transform: translate(7px, 15px);
                transform: translate(7px, 15px);
    }
    49% {
        -webkit-transform: translate(-3px, 20px);
                transform: translate(-3px, 20px);
    }
    50% {
        -webkit-transform: translate(-3px, 20px);
                transform: translate(-3px, 20px);
    }
}
@-webkit-keyframes blush {
    0%,
    34%,
    70%, 
    100%  {
        opacity: 0;
    }
    47% {
        opacity: 1;
    }
}
@keyframes blush {
    0%,
    34%,
    70%, 
    100%  {
        opacity: 0;
    }
    47% {
        opacity: 1;
    }
}
@-webkit-keyframes shaking {
    0%,
    35%,
    36.6%,
    37.5%,
    39%,
    40%,
    42%,
    43.5%,
    44.6%,
    45.6%,
    48% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
    35.4% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    37% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    39.6% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    41.5% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    44% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    45% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    48.5% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    49% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    50.6% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }


    51% {
        -webkit-transform: translateX(0);
                transform: translateX(0) 
    }
    
    54% {
        -webkit-transform: translateY(-62px);
                transform: translateY(-62px);
    }
    55% {
        -webkit-transform: translateY(-62px);
                transform: translateY(-62px);
    }
    56.25% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    57.08% {
        -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
    }
    57.68% {
        -webkit-transform: translateY(-8px) rotate(-2deg);
                transform: translateY(-8px) rotate(-2deg);
    }
    58.3% {
        -webkit-transform: translateY(-3px) rotate(-3deg);
                transform: translateY(-3px) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    61.25% {
        -webkit-transform: translateY(-3px) rotate(2deg);
                transform: translateY(-3px) rotate(2deg)
    }
    62.08% {
        -webkit-transform: translateY(-1px) rotate(1deg);
                transform: translateY(-1px) rotate(1deg)
    }
    62.68% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0)
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0)
    }

}
@keyframes shaking {
    0%,
    35%,
    36.6%,
    37.5%,
    39%,
    40%,
    42%,
    43.5%,
    44.6%,
    45.6%,
    48% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
    35.4% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    37% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    39.6% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    41.5% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    44% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    45% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    48.5% {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
    }
    49% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px)
    }
    50.6% {
        -webkit-transform: translateX(0);
                transform: translateX(0)
    }


    51% {
        -webkit-transform: translateX(0);
                transform: translateX(0) 
    }
    
    54% {
        -webkit-transform: translateY(-62px);
                transform: translateY(-62px);
    }
    55% {
        -webkit-transform: translateY(-62px);
                transform: translateY(-62px);
    }
    56.25% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    57.08% {
        -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
    }
    57.68% {
        -webkit-transform: translateY(-8px) rotate(-2deg);
                transform: translateY(-8px) rotate(-2deg);
    }
    58.3% {
        -webkit-transform: translateY(-3px) rotate(-3deg);
                transform: translateY(-3px) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0);
    }
    61.25% {
        -webkit-transform: translateY(-3px) rotate(2deg);
                transform: translateY(-3px) rotate(2deg)
    }
    62.08% {
        -webkit-transform: translateY(-1px) rotate(1deg);
                transform: translateY(-1px) rotate(1deg)
    }
    62.68% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0)
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
                transform: translateY(0) rotate(0)
    }

}
@-webkit-keyframes switch {
    0% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    22.9% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    25.41% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    25.8% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    27.91% {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    46.6% {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    48.7% {
        -webkit-transform: scaleY(0.8);
                transform: scaleY(0.8);
    }
    53.3% {
        -webkit-transform: scaleY(1.1);
                transform: scaleY(1.1);
    }
    55.41% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    56.41% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    57% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes switch {
    0% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    22.9% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    25.41% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    25.8% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    27.91% {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    46.6% {
        -webkit-transform: scaleY(0.9);
                transform: scaleY(0.9);
    }
    48.7% {
        -webkit-transform: scaleY(0.8);
                transform: scaleY(0.8);
    }
    53.3% {
        -webkit-transform: scaleY(1.1);
                transform: scaleY(1.1);
    }
    55.41% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    56.41% {
        -webkit-transform: scaleY(1.05);
                transform: scaleY(1.05);
    }
    57% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-webkit-keyframes handler {
    0% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0)
    }
    51.6% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0);
    }
    52.08% {
        -webkit-transform: scaleY(2) translateY(0);
                transform: scaleY(2) translateY(0);
    }
    52.9%{
        -webkit-transform: scaleY(2) translateY(-23px);
                transform: scaleY(2) translateY(-23px);
    }
    53.3%{
        -webkit-transform: scaleY(1) translateY(-64px);
                transform: scaleY(1) translateY(-64px);
    }
    82.9% {
        -webkit-transform: scaleY(1) translateY(-64px);
                transform: scaleY(1) translateY(-64px);
    }
    95.8% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0);
    }
}
@keyframes handler {
    0% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0)
    }
    51.6% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0);
    }
    52.08% {
        -webkit-transform: scaleY(2) translateY(0);
                transform: scaleY(2) translateY(0);
    }
    52.9%{
        -webkit-transform: scaleY(2) translateY(-23px);
                transform: scaleY(2) translateY(-23px);
    }
    53.3%{
        -webkit-transform: scaleY(1) translateY(-64px);
                transform: scaleY(1) translateY(-64px);
    }
    82.9% {
        -webkit-transform: scaleY(1) translateY(-64px);
                transform: scaleY(1) translateY(-64px);
    }
    95.8% {
        -webkit-transform: scaleY(1) translateY(0);
                transform: scaleY(1) translateY(0);
    }
}
@-webkit-keyframes bread-ball {
    0%, 
    52% {
        -webkit-transform: translateY(0) scaleY(1);
                transform: translateY(0) scaleY(1)
    }
    55% {
        -webkit-transform: translateY(-161px) scaleY(1.05);
                transform: translateY(-161px) scaleY(1.05)
    }
    56.6%, 
    57.5% {
        -webkit-transform: translateY(-235px) scaleY(0.9);
                transform: translateY(-235px) scaleY(0.9)
    }
    58.75% {
        -webkit-transform: translateY(-230px) scaleY(1);
                transform: translateY(-230px) scaleY(1)
    }
    65.41%,
    81% {
        -webkit-transform: translateY(-79px) scaleY(1.3);
                transform: translateY(-79px) scaleY(1.3)
    }
    93% {
        -webkit-transform: translateY(-50px) scaleY(1);
                transform: translateY(-50px) scaleY(1)
    }
}
@keyframes bread-ball {
    0%, 
    52% {
        -webkit-transform: translateY(0) scaleY(1);
                transform: translateY(0) scaleY(1)
    }
    55% {
        -webkit-transform: translateY(-161px) scaleY(1.05);
                transform: translateY(-161px) scaleY(1.05)
    }
    56.6%, 
    57.5% {
        -webkit-transform: translateY(-235px) scaleY(0.9);
                transform: translateY(-235px) scaleY(0.9)
    }
    58.75% {
        -webkit-transform: translateY(-230px) scaleY(1);
                transform: translateY(-230px) scaleY(1)
    }
    65.41%,
    81% {
        -webkit-transform: translateY(-79px) scaleY(1.3);
                transform: translateY(-79px) scaleY(1.3)
    }
    93% {
        -webkit-transform: translateY(-50px) scaleY(1);
                transform: translateY(-50px) scaleY(1)
    }
}
@-webkit-keyframes bread-heart {
    0%,
    54%, 
    100% {
        -webkit-transform: translateY(-24px) scaleY(1);
                transform: translateY(-24px) scaleY(1)
    }
    57% {
        -webkit-transform: scaleY(1.2) translateY(-154px);
                transform: scaleY(1.2) translateY(-154px)
    }
    59.16%,
    60.41% {
        -webkit-transform: scaleY(0.9) translateY(-262px);
                transform: scaleY(0.9) translateY(-262px)
    }
    68%,
    82% {
        -webkit-transform: scaleY(1.2) translateY(-70px);
                transform: scaleY(1.2) translateY(-70px)
    }
    93% {
        -webkit-transform: scaleY(1.2) translateY(-30px);
                transform: scaleY(1.2) translateY(-30px)
    }
}
@keyframes bread-heart {
    0%,
    54%, 
    100% {
        -webkit-transform: translateY(-24px) scaleY(1);
                transform: translateY(-24px) scaleY(1)
    }
    57% {
        -webkit-transform: scaleY(1.2) translateY(-154px);
                transform: scaleY(1.2) translateY(-154px)
    }
    59.16%,
    60.41% {
        -webkit-transform: scaleY(0.9) translateY(-262px);
                transform: scaleY(0.9) translateY(-262px)
    }
    68%,
    82% {
        -webkit-transform: scaleY(1.2) translateY(-70px);
                transform: scaleY(1.2) translateY(-70px)
    }
    93% {
        -webkit-transform: scaleY(1.2) translateY(-30px);
                transform: scaleY(1.2) translateY(-30px)
    }
}