@media screen and (max-width: 768px) {
    .navbar {
        animation: slideInbottom .4s ease-out backwards !important;
    }
}

.project.in-view {
    animation: slideInRight;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
}

.maskImageSmall.in-view {
    animation: scale-up-center;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
}

.navbar {
    animation: slideInTop;
    animation-duration: .4s;
    animation-timing-function: ease-out;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
}

.tekstAnimation.in-view {
    -webkit-animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.projectAnimationRight.in-view {
    animation: slideInRight;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
}

.projectAnimationLeft.in-view {
    animation: slideInLeft;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
}

@-webkit-keyframes slideInBottom {
    0% {
        bottom: -10vw;
    }

    60% {
        bottom: 40px;
    }

    100% {
        bottom: 20px;
    }
}

@keyframes slideInBottom {
    0% {
        bottom: -10vw;
    }

    60% {
        bottom: 40px;
    }

    100% {
        bottom: 20px;
    }
}

@-webkit-keyframes slideInTop {
    0% {
        top: -10vw;
    }

    60% {
        top: 40px;
    }

    100% {
        top: 20px;
    }
}

@keyframes slideInTop {
    0% {
        top: -10vw;
    }

    60% {
        top: 40px;
    }

    100% {
        top: 20px;
    }
}

@-webkit-keyframes slideInRight {
    from {
        right: -100vw;
    }

    to {
        right: 0;
    }
}

@keyframes slideInRight {
    from {
        right: -100vw;
    }

    to {
        right: 0;
    }
}

@-webkit-keyframes slideInLeft {
    from {
        left: -100vw;
    }

    to {
        left: 0;
    }
}

@keyframes slideInLeft {
    from {
        left: -100vw;
    }

    to {
        left: 0;
    }
}


@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

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

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

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

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}