header,
#hero-text {
    -webkit-animation: sit-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s;
    animation: sit-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.5s;
}

/* hide */


.pull-right img,
.pull-right video {
    margin: 0;
}

.pull-right .image {
    margin-bottom: 1.5rem;
}


.pull-right .image div,
.sit-top .text,
.sit-left .text {
    opacity: 0;
}

/* hide */

.in-view.pull-right .image div {
    position: relative;
    width: 100%;
    margin-left: auto;
    overflow: hidden;
    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .5s;
    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .5s;
}

.in-view.pull-right .image div:before {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#99cc00+0,99cc00+50,ff0000+53,ff0000+100 */
    background: rgb(153, 204, 0);
    /* Old browsers */
    background: -moz-linear-gradient(left, rgba(4, 170, 157, 1) 0%, rgba(4, 170, 157, 1) 50%, rgba(8, 96, 93, 1) 50%, rgba(8, 96, 93, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(4, 170, 157, 1) 0%, rgba(4, 170, 157, 1) 50%, rgba(8, 96, 93, 1) 50%, rgba(8, 96, 93, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(4, 170, 157, 1) 0%, rgba(4, 170, 157, 1) 50%, rgba(8, 96, 93, 1) 50%, rgba(8, 96, 93, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99cc00', endColorstr='#ff0000', GradientType=1);
    /* IE6-9 */
    top: 0;
    right: 0;
    content: "";
    width: 200%;
    height: 100%;
    display: block;
    z-index: 1;
    position: absolute;
    -webkit-animation: slide-overlay 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
    animation: slide-overlay 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
}


.in-view.sit-top .text {
    -webkit-animation: sit-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s;
    animation: sit-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s;
}

.in-view.sit-left .text {
    -webkit-animation: sit-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s;
    animation: sit-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1.5s;
}

@media screen and (min-width: 768px) {
    .mouseicon {
        width: 1.5rem;
        height: 3rem;
        position: absolute;
        z-index: 2;
        left: 50%;
        margin-left: -0.5rem;
        bottom: 5vw;
        background: url(@{themeurl}/img/mouse.svg) center center no-repeat;
        background-size: 100% auto;
        -webkit-animation: move-mouse 1.5s infinite linear;
        animation: move-mouse 1.5s infinite linear;
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-101%);
        transform: translateX(-101%);
    }

    100% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
        opacity: 1;
    }
}

@keyframes slide-overlay {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(101%);
        transform: translateX(101%);
        opacity: 1;
    }
}




@keyframes sit-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }



    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sit-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes move-mouse {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes zoomin {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.5);
    }
}

@keyframes zoomout {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.67);
    }

    100% {
        transform: scale(1);
    }
}