@font-face {
    font-family: 'Filson Soft';
    src: url('../fonts/FilsonSoft-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Filson Soft';
    src: url('../fonts/FilsonSoft-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Filson Soft';
    src: url('../fonts/FilsonSoft-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Filson Soft';
    src: url('../fonts/FilsonSoft-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

section {
    width: 100vw;
    max-width: 1440px;
    min-height: 700px;
    margin: 0 auto;
	padding: 0;
}

header {
	height: 110px;
	background-color: var(--main-color) !important;
}

.intro {
    position: relative;
    z-index: 6;
    width: 100%;
    overflow: hidden;
}

.pengertian_vaksin {
    position: relative;
    z-index: 5;
    width: 100%;
    overflow: hidden;
}

.penting_vaksin {
    position: relative;
    z-index: 4;
    width: 100%;
    overflow: hidden;
}

.jenis_vaksin {
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: hidden;
}

.panduan {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

.outro {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.museo-font {
    font-family: 'Museo Sans';
}

.filsonSoft-font {
    font-family: 'Filson Soft';
}

@media screen and (max-width: 747px) {

	section {
		min-height :115vw;
	}
    /* =================== section 1 - intro ================ */
    .intro-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 132vw;
        max-height: 840px;
        z-index: 6;
    }
    .intro-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 22vw;
        height: 44vw;
        position: absolute;
        top: 48vw;
        left: 56vw;
    }
    .intro-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-maskot.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 51vw;
        height: 37vw;
        position: absolute;
        top: 53vw;
        left: 3vw;
    }
    .intro-bubble {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-bubble.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 45vw;
        height: 160px;
        position: absolute;
        top: 25vw;
        left: 52vw;
        font-size: 2.5vw;
        line-height: 1.4;
        color: #eef7f8;
        padding: 14px 9px 0 8px;
        text-align: center;
        animation: bounceInRight 1s ease-in forwards;
    }
    .intro-button {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-button-polos.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 70vw;
        height: 62px;
        position: absolute;
        top: 112vw;
        left: 50%;
        transform: translateX(-50%);
        padding: 1.2vw 2vw 0 2vw;
        font-size: 2.2vw;
        text-align: center;
		opacity: 0;
		animation: fadeIn 1s  ease-in forwards;
		animation-delay: 2.2s;
		font-weight: 800
    }
    .intro-text {
        width: 81vw;
        position: absolute;
        top: 92vw;
        left: 50%;
        transform: translateX(-50%);
        color: #045171;
        font-weight: bold;
        font-size: 2.5vw;
        text-align: center;
		line-height: 1.2;
		opacity: 0;
		animation: fadeIn 1s  ease-in forwards;
		animation-delay: 1.2s;
    }
    /* =================== section 2 - pengertian vaksin ================ */
    .pengertian_vaksin {
        margin-top: -31px;
    }
    .pengertian_vaksin-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 134vw;
        max-height: 840px;
        z-index: 5;
    }
    .pengertian_vaksin-judul {
        padding-top: 50px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 5vw;
        line-height: 1.1;
        font-family: 'Filson Soft';
        font-weight: 700;
        color: #004378;
    }
    .pengertian_vaksin-imunisasi {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-imunisasi.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 50%;
        height: 82px;
        margin: 0 auto;
        margin-top: 10px;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    .pengertian_vaksin-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-maskot_rev1.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 60vw;
        height: 48vw;
        position: absolute;
        top: 28vw;
        left: 17%;
        animation: bounceInLeft 2.5s ease-in forwards;
    }
    .pengertian_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 58vw;
        height: 55vw;
        position: absolute;
        top: 76vw;
        left: 22%;
        animation: bounceInRight 3.7s ease-in forwards;
    }
    /* =================== section 3 - pentingnya vaksin ================ */
    .penting_vaksin {
        margin-top: -30px;
    }
    .penting_vaksin-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 132vw;
        max-height: 840px;
        z-index: 4;
    }
    .penting_vaksin-judul {
        padding-top: 29vw;
        padding-left: 2.6vw;
        width: 53vw;
        max-width: 440px;
        margin: 0 auto;
        text-align: center;
        font-size: 6vw;
        line-height: 1.1;
        font-family: 'Filson Soft';
        font-weight: 600;
        color: #004378;
    }
    .penting_vaksin-judul h2 {
        font-family: 'Filson Soft';
        font-size: 8.5vw;
        font-weight: 800;
        line-height: 1;
        margin-top: 0;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    .penting_vaksin-isi {
        margin-top: 10px;
        font-size: 2.8vw;
        font-weight: 500;
        line-height: 1.3;
        animation: bounceInUp 2.5s ease-in forwards;
    }
    .penting_vaksin-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-maskot.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 34vw;
        height: 33vw;
        position: absolute;
        top: 88vw;
        left: 60vw;
    }
    .penting_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20vw;
        height: 39vw;
        position: absolute;
        top: 85vw;
        left: 14vw;
    }
    /* =================== section 4 - jenis vaksin ================ */
    .jenis_vaksin {
        margin-top: -35px;
    }
    .jenis_vaksin-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_4-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 114vw;
        max-height: 840px;
        z-index: 3;
    }
    .jenis_vaksin-judul {
        padding-top: 65px;
        width: 100vw;
        margin: 0 auto;
        text-align: center;
        font-size: 4.5vw;
        line-height: 1.1;
        font-family: 'MuseoSansRounded-1000';
        color: #57391f;
    }
    .jenis_vaksin-isi {
        font-family: 'MuseoSansRounded-500';
        margin-top: 20px;
        font-size: 2.4vw;
        font-weight: 500;
        line-height: 1.3;
    }
    .jenis_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_4-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 90vw;
        height: 68vw;
        max-height: 800px;
        max-width: 1064px;
        position: absolute;
        top: 38vw;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    /* =================== section 5 - panduan ================ */
    .panduan {
        margin-top: -20px;
    }
    .panduan-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_5-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 127vw;
        max-height: 840px;
        z-index: 2;
    }
    /* =================== section 6 - outro ================ */
    .outro {
        margin-top: -52px;
    }
    .outro-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-background-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 115vw;
        max-height: 840px;
        z-index: 1;
    }
    .outro-judul {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-judul.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 70vw;
        height: 192px;
        position: absolute;
        top: 15vw;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .5s;
    }
    .outro-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-maskot-mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
        padding: 5vw 4vw 0 13vw;
        width: 47vw;
        height: 79vw;
        position: absolute;
        line-height: 1.4;
        top: 34vw;
        left: 9vw;
        color: #fff;
        font-size: 2.2vw;
        font-family: 'Filson Soft';
        text-align: center;
        animation: bounceInLeft 1s ease-in forwards;
    }
    .outro-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 87vw;
        height: 85vw;
        position: absolute;
        top: 26vw;
        left: 51vw;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: 1.2s;
    }
}

@media screen and (min-width: 747px) {
    /* =================== section 1 - intro ================ */
    .intro-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-background.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 59vw;
        max-height: 840px;
        z-index: 6;
    }
    .intro-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 14vw;
        height: 280px;
        position: absolute;
        bottom: 150px;
        left: 51%;
    }
    .intro-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-maskot.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 35vw;
        height: 280px;
        position: absolute;
        bottom: 150px;
        left: 17%;
    }
    .intro-bubble {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-bubble.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 300px;
        height: 160px;
        position: absolute;
        bottom: 390px;
        left: 51%;
        color: #eef7f8;
        padding: 22px 23px 0 28px;
        text-align: center;
        animation: bounceInRight 1s ease-in forwards;
    }
    .intro-button {
        background-image: url(../images/smartpedia/duniavaksin/slide_1-button-polos.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 600px;
        height: 83px;
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        padding: 16px 0 0 0;
        text-align: center;
        font-weight: 800;
    }
    .intro-text {
        width: 30vw;
        max-width: 400px;
        position: absolute;
        bottom: 190px;
        left: calc(51% + 14vw);
        color: #045171;
        font-weight: bold;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: 1.2s;
    }
    /* =================== section 2 - pengertian vaksin ================ */
    .pengertian_vaksin {
        margin-top: -135px;
    }
    .pengertian_vaksin-background {
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 70.5vw;
        max-height: 1015px;
        z-index: 5;
    }
    .pengertian_vaksin-judul {
        padding-top: 220px;
        width: 430px;
        margin: 0 auto;
        text-align: center;
        font-size: 40px;
        line-height: 1.1;
        font-family: 'Filson Soft';
        font-weight: 700;
        color: #004378;
    }
    .pengertian_vaksin-imunisasi {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-imunisasi.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 75%;
        height: 82px;
        margin: 0 auto;
        margin-top: 10px;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    .pengertian_vaksin-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-maskot_rev1.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 47vw;
        height: 550px;
        position: absolute;
        top: 320px;
        left: 6%;
        animation: bounceInLeft 2.5s ease-in forwards;
    }
    .pengertian_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_2-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 37vw;
        height: 530px;
        position: absolute;
        top: 390px;
        left: 54%;
        animation: bounceInRight 3.7s ease-in forwards;
    }
    /* =================== section 3 - pentingnya vaksin ================ */
    .penting_vaksin {
        margin-top: -65px;
    }
    .penting_vaksin-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-background.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 61vw;
        max-height: 882px;
    }
    .penting_vaksin-judul {
        padding-top: 170px;
        padding-left: 1.2vw;
        width: 30vw;
        max-width: 440px;
        margin: 0 auto;
        text-align: center;
        font-size: max(2.2vw, 42px);
        line-height: 1.1;
        font-family: 'Filson Soft';
        font-weight: 600;
        color: #004378;
    }
    .penting_vaksin-judul h2 {
        font-family: 'Filson Soft';
        font-size: max(3.5vw, 60px);
        font-weight: 800;
        line-height: 1;
        margin-top: 0;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    .penting_vaksin-isi {
        margin-top: 20px;
        font-size: max(17px, 1.35vw);
        font-weight: 500;
        line-height: 1.3;
        padding-right: 10px;
        animation: bounceInUp 2.5s ease-in forwards;
    }
    .penting_vaksin-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-maskot.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20vw;
        height: 292px;
        position: absolute;
        bottom: 80px;
        left: 69%;
    }
    .penting_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_3-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 14vw;
        height: 347px;
        position: absolute;
        bottom: 70px;
        left: 18%;
    }
    /* =================== section 4 - jenis vaksin ================ */
    .jenis_vaksin {
        margin-top: -75px;
    }
    .jenis_vaksin-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_4-background.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 79vw;
        max-height: 1150px;
    }
    .jenis_vaksin-judul {
        padding-top: 120px;
        width: 60vw;
        max-width: 930px;
        margin: 0 auto;
        text-align: center;
        font-size: max(3vw, 44px);
        line-height: 1.1;
        font-family: 'MuseoSansRounded-1000';
        color: #57391f;
    }
    .jenis_vaksin-isi {
        font-family: 'MuseoSansRounded-500';
        margin-top: 20px;
        font-size: max(23px, 1.45vw);
        font-weight: 500;
        line-height: 1.3;
    }
    .jenis_vaksin-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_4-vido.png);
        background-size: cover;
        width: 70vw;
        height: 54.6vw;
        max-height: 800px;
        max-width: 1064px;
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .2s;
    }
    /* =================== section 5 - panduan ================ */
    .panduan {
        margin-top: -65px;
    }
    .panduan-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_5-background.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 75vw;
        min-height: 986px;
        max-height: 1150px;
    }
    /* =================== section 6 - outro ================ */
    .outro {
        margin-top: -150px;
    }
    .outro-background {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-background.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 64vw;
        max-height: 930px;
		z-index:1;
    }
    .outro-judul {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-judul.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 50vw;
        height: 242px;
        position: absolute;
        top: 160px;
        left: 90px;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: .5s;
    }
    .outro-maskot {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-maskot.png);
        background-size: contain;
        background-repeat: no-repeat;
        padding: 57px 332px 10px 21px;
        width: 620px;
        height: 376px;
        position: absolute;
        bottom: 80px;
        left: 2%;
        color: #fff;
        font-size: 16px;
        font-family: 'Filson Soft';
        text-align: center;
        animation: bounceInLeft 1s ease-in forwards;
    }
    .outro-vido {
        background-image: url(../images/smartpedia/duniavaksin/slide_6-vido.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 660px;
        height: 638px;
        position: absolute;
        bottom: 70px;
        right: 0;
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        animation-delay: 1.2s;
    }
}


/* animation */

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
        transform: translate3d(10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
        transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
        transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
        transform: translate3d(5px, 0, 0) scaleX(0.995);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
        transform: translate3d(0, -20px, 0) scaleY(0.9);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
        transform: translate3d(0, 10px, 0) scaleY(0.95);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
        transform: translate3d(0, -5px, 0) scaleY(0.985);
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}