.center_note {
    width: 100%;
    height: 668px;
    /*background-color: #ff0000;*/
    padding: 0px;

    margin-bottom: 50px;

    position: relative;
    /* overflow: hidden; */
}

.anim_notes {
    /* overflow: hidden; */
    margin: 0 auto;
    /* background-color: #17E3C4;*/

    /*opacity: 0.5;*/

    /* width: 1500px; */
    position: absolute;
    /* left: calc(50% - 750px); */
}

.app_anim_block {
    /* overflow: hidden; */

    width: 100%;
    height: 618px;
    z-index: 1;
    padding: 0px;
    margin: 0px;
    position: relative;
}

.div_notes_anim {
    position: absolute;
    /* left: 25%; */
    left: calc(50% - 285px);
}

.mac_image {
}

[data-aos='macbook-animation'] {
    opacity: 1;
    z-index: 1;
    /* width: 1054px; */
    transform: translateY(-40px) scale(0.6);
    /* transform: translate(-259px, -40px) scale(0.6); */

    /*display: block;*/
    margin: 0 auto;
    transition-property: opacity, width, margin, transform;
}

[data-aos='macbook-animation'].aos-animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* transform: translate(-259px, 0) scale(1); */

    /*position: absolute; left: calc(50% - 527px);*/
    transition-property: opacity, width, margin, transform;
}

.div_note {
    background-color: #006afa;
    width: 100%;
    height: 0px;
    margin: 0px auto;
}

[data-aos='note001-animation'] {
    opacity: 1;
    width: 388px;
    transform: translate(330px, -600px);

    z-index: 20;
    position: relative;
    transition-property: transform;
}

[data-aos='note001-animation'].aos-animate {
    opacity: 1;

    transform: translate(0, -430px);
    transition-property: opacity, margin, transform;
}

[data-aos='note002-animation'] {
    opacity: 1;
    width: 388px;
    transform: translate(-440px, -520px);
    z-index: 20;
    position: relative;
    transition-property: opacity, margin, transform;
}

[data-aos='note002-animation'].aos-animate {
    opacity: 1;
    transform: translate(0, -430px);
    transition-property: opacity, margin, transform;
}

[data-aos='note003-animation'] {
    opacity: 1;
    width: 388px;
    transform: translate(470px, -410px);
    z-index: 20;
    position: relative;
    transition-property: opacity, margin, transform;
}

[data-aos='note003-animation'].aos-animate {
    opacity: 1;
    transform: translate(0, -430px);
    transition-property: opacity, margin, transform;
}

[data-aos='note004-animation'] {
    opacity: 1;
    width: 388px;
    transform: translate(-310px, -360px);
    z-index: 20;
    position: relative;
    transition-property: opacity, margin, transform;
}

[data-aos='note004-animation'].aos-animate {
    opacity: 1;
    transform: translate(0, -430px);
    transition-property: opacity, margin, transform;
}

[data-aos='appscreen-animation'] {
    opacity: 1;
    width: 570px;
    transform: translate(0px, 0px);
    z-index: 20;
    position: relative;
    transition-property: opacity, margin, transform;
}

[data-aos='appscreen-animation'].aos-animate {
    opacity: 1;
    transform: translate(0px, -565px);
    transition-property: opacity, margin, transform;
}

/*==== Second Block Animation ====*/

.center_pasteline_app {
    width: 100%;
    height: 730px;
    position: relative;
    overflow: hidden;
}

.anim_pasteline {
    overflow: hidden;
    margin: 0 auto;
    /* background-color: #17E3C4;*/

    /*opacity: 0.5;*/

    width: 1500px;
    position: absolute;
    left: calc(50% - 750px);
}

[data-aos='pasteline_app_bg'] {
    opacity: 0;
    z-index: 1;
    width: 1080px;
    transform: translateX(0px) translateY(0px);
    margin: 0 auto;

    transition-property: opacity;
}

[data-aos='pasteline_app_bg'].aos-animate {
    opacity: 0;
    transition-property: opacity;
}

[data-aos='pasteline_app_mac'] {
    opacity: 0;
    z-index: 1;
    width: 840px;
    transform: translateX(-400px) translateY(-708px) scale(0.8);

    /*display: block;*/
    margin: 0 auto;
    transition-property: opacity, width, margin, transform;
}

[data-aos='pasteline_app_mac'].aos-animate {
    opacity: 1;
    transform: translateX(-80px) translateY(-708px) scale(1);

    /*position: absolute; left: calc(50% - 527px);*/
    transition-property: opacity, width, margin, transform;
}

[data-aos='pasteline_app_line'] {
    opacity: 1;
    z-index: 10;
    width: 586px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    color: #b8b8bd;
    box-shadow: 0px 20px 32px rgba(0, 0, 0, 0.05);
    text-align: left;
    padding-left: 20px;
    padding-top: 9px;
    font-size: 15px;

    transform: translateX(0px) translateY(-1900px);

    /*display: block;*/
    margin: 0 auto;
    transition-property: opacity, height, padding-top, color, transform,
        box-shadow;
}

[data-aos='pasteline_app_line'].aos-animate {
    opacity: 1;
    height: 200px;
    padding-top: 20px;
    color: #000000;
    transform: translateX(45px) translateY(-1680px);
    box-shadow: 0px 10px 32px rgba(0, 0, 0, 0.15);

    /*position: absolute; left: calc(50% - 527px);*/
    transition-property: opacity, height, padding-top, color, transform,
        box-shadow;
}

[data-aos='pasteline_app_iphone'] {
    opacity: 0;
    z-index: 2;
    width: 340px;

    transform: translateX(580px) translateY(-1225px) scale(0.8);
    margin: 0 auto;
    transition-property: opacity, width, margin, transform;
}

[data-aos='pasteline_app_iphone'].aos-animate {
    opacity: 1;
    transform: translateX(300px) translateY(-1225px) scale(1);
    transition-property: opacity, width, margin, transform;
}

[data-aos='pasteline_app_line_text']:after {
    content: 'Add a note';
    transition-property: content;
}

[data-aos='pasteline_app_line_text'].aos-animate:after {
    content: 'Your awesome note is almost saved!!!';
    transition-property: content;
}

[data-aos='pasteline_app_button'] {
    opacity: 1;
    z-index: 20;
    width: 26px;
    height: 26px;
    transform: translateY(-24px);

    background-image: url('../images/pasteline/pasteButton.png');
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center top;

    margin: 0 auto;
    position: absolute;
    right: 7px;

    transition-property: margin, transform, background-image, right;
}

[data-aos='pasteline_app_button'].aos-animate {
    background-image: url('../images/pasteline/sendButton.png');
    right: 20px;
    transition-property: margin, transform, background-image, right;
}

[data-aos='pasteline_app_button_delete'] {
    opacity: 0;
    z-index: 15;
    width: 14px;
    transform: translateY(0px);

    margin: 0 auto;
    position: absolute;
    right: 20px;

    transition-property: margin, transform;
}

[data-aos='pasteline_app_button_delete'].aos-animate {
    opacity: 1;
    transform: translateY(126px);
    transition-property: margin, transform;
}

[data-aos='pasteline_night_block_anim'] {
    opacity: 1;
    border-radius: 20px;
    position: relative;
    width: 100%;

    margin-left: 0vw;
    left: 0%;
    transition-property: width, margin-left, left, border-radius;
}

[data-aos='pasteline_night_block_anim'].aos-animate {
    border-radius: 0px;
    width: 100vw;
    margin-left: -50vw;
    left: 50%;

    transition-property: width, margin-left, left, border-radius;
}

[data-aos='pasteline_blue_block'] {
    opacity: 0;
    height: 300px;
    background-color: #347ef3;
    border-radius: 20px;
    margin-bottom: -200px;
    box-shadow: 0px 10px 32px rgba(0, 0, 0, 0.15);
    padding: 30px;
    transform: translateY(0px);
    transition-property: opacity, transform;
}

[data-aos='pasteline_blue_block'].aos-animate {
    opacity: 1;
    transform: translateY(-280px);
    transition-property: opacity, transform;
}

@media (max-width: 870px) {
    .center_note {
        height: 372px;
        overflow: hidden;
        position: relative;
        width: 100vw;
        /* left: -24px; */
        margin-left: -24px;
    }
    .app_anim_block {
        height: 372px;
    }

    .anim_notes {
        overflow: visible;
        margin: 0 auto;
        /* background-color: #17E3C4;*/

        /*opacity: 0.5;*/

        width: 1500px;
        position: absolute;
        left: calc(50% - 750px);
    }

    .mac_image {
        /* position: absolute; */
        /* weight: 1600px; */
        min-width: 500px;
    }

    .div_notes_anim {
        position: absolute;
        left: calc(50% - 150px);
    }

    [data-aos='macbook-animation'] {
        width: 634px;
        /* min-width: 434px; */
        transform: translateY(10px) scale(0.6);
        transition-property: transform;
    }

    [data-aos='macbook-animation'].aos-animate {
        transform: translateY(0) scale(1);
        transition-property: transform;
    }

    [data-aos='note001-animation'] {
        width: 300px;
        transform: translate(210px, -340px);
        transition-property: transform;
    }

    [data-aos='note001-animation'].aos-animate {
        transform: translate(0, -270px);
        transition-property: transform;
    }

    [data-aos='note002-animation'] {
        width: 300px;
        transform: translate(-300px, -300px);
        transition-property: transform;
    }

    [data-aos='note002-animation'].aos-animate {
        transform: translate(0, -270px);
        transition-property: transform;
    }

    [data-aos='note003-animation'] {
        width: 300px;
        transform: translate(310px, -220px);
        transition-property: transform;
    }

    [data-aos='note003-animation'].aos-animate {
        transform: translate(0, -270px);
        transition-property: transform;
    }

    [data-aos='note004-animation'] {
        width: 300px;
        transform: translate(-190px, -205px);
        transition-property: transform;
    }

    [data-aos='note004-animation'].aos-animate {
        transform: translate(0, -270px);
        transition-property: transform;
    }

    [data-aos='appscreen-animation'] {
        width: 300px;
        transform: translate(0px, 0px);
        transition-property: transform;
    }

    [data-aos='appscreen-animation'].aos-animate {
        transform: translate(0, -325px);
        transition-property: transform;
    }

    [data-aos='pasteline_app_line'] {
        width: 500px;
    }

    .center_pasteline_app {
        width: 100vw;
        /* left: -24px; */
        margin-left: -24px;
        height: 730px;
        position: relative;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    /*.center_note{
  display: none;


  }*/

    .center_pasteline_app {
        height: 550px;
    }

    [data-aos='pasteline_app_line'] {
        width: 350px;
        transform: translateX(0px) translateY(-1600px);
    }

    [data-aos='pasteline_app_line'].aos-animate {
        transform: translateX(5px) translateY(-1430px);
    }

    [data-aos='pasteline_app_mac'] {
        width: 630px;
        transform: translateX(-400px) translateY(-708px) scale(0.8);
    }

    [data-aos='pasteline_app_mac'].aos-animate {
        transform: translateX(-80px) translateY(-708px) scale(1);
    }

    [data-aos='pasteline_app_iphone'] {
        width: 255px;

        transform: translateX(580px) translateY(-1090px) scale(0.8);
    }

    [data-aos='pasteline_app_iphone'].aos-animate {
        transform: translateX(200px) translateY(-1090px) scale(1);
    }

    [data-aos='pasteline_blue_block'] {
        margin-bottom: -130px;
    }

    [data-aos='pasteline_blue_block'].aos-animate {
        opacity: 1;
        transform: translateY(-200px);
        transition-property: opacity, transform;
    }
}