.leftIn {
    transform: translate3d(0,0,0);
}

.left04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateX(-100%);
}

.left08 {
    transition: 0.4s;
    transform: translate3D(-100%,0,0);
}

.left16 {
    transition: 1s cubic-bezier(.79,.14,.15,.86);
    transform: translateX(-100%);
}

.right04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateX(100%);
}

.right08 {
    transition: 0.4s;
    transform: translate3D(100%,0,0);
}

.right16 {
    transition: 1s cubic-bezier(.79,.14,.15,.86);
    transform: translateX(100%);
}

.top04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateX(-100%);
}

.top08 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateY(-100%);
}

.top16 {
    transition: 1s cubic-bezier(.79,.14,.15,.86);
    transform: translateY(-100%);
}

.bottom04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateY(100%);
}

.bottom08 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transform: translateY(100%);
}

.bottom16 {
    transition: 1s cubic-bezier(.79,.14,.15,.86);
    transform: translateY(100%);
}

.afterTop04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

.beforeTop04 {
    transition: 0.8s cubic-bezier(.79,.14,.15,.86);
    transition-delay: 0.4s;
    opacity: 0;
    transform: translateY(50%);
}


.main-menu {
	animation-name: show-menu;
	animation-duration: 0.4s;
}

@keyframes show-menu {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.runner-1 {
    animation-name: md-1;
    animation-duration: 0.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 1s;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
    z-index: 999;
}

.runner .slike {
    animation: md-1 4s infinite;
    -webkit-animation: md-1 4s infinite;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-delay: 0.6s;
}

@keyframes md-1 {
    /** 1 slika **/
    0% {
        transform: translate3D(0,0px,0);
        -moz-transform: translate3D(0,0px,0);
        -webkit-transform: translate3D(0,0px,0);
    }
    
    5% {
        transform: translate3D(0,0px,0);
        -moz-transform: translate3D(0,0px,0);
        -webkit-transform: translate3D(0,0px,0);
    }
    
    /* 2 slika */
    25% {
        transform: translate3D(-600px,0px,0);
        -moz-transform: translate3D(-600px,0px,0);
        -webkit-transform: translate3D(-600px,0px,0);
    }
    
    30% {
        transform: translate3D(-600px,0px,0);
        -moz-transform: translate3D(-600px,0px,0);
        -webkit-transform: translate3D(-600px,0px,0);
    }
    
    /* 3 slika */
    50% {
        transform: translate3D(-1200px,0px,0);
        -moz-transform: translate3D(-1200px,0px,0);
        -webkit-transform: translate3D(-1200px,0px,0);
    }
    
    55% {
        transform: translate3D(-1200px,0px,0);
        -moz-transform: translate3D(-1200px,0px,0);
        -webkit-transform: translate3D(-1200px,0px,0);
    }
    
    /* 4 slika */
    75% {
        transform: translate3D(-1800px,0px,0);
        -moz-transform: translate3D(-1800px,0px,0);
        -webkit-transform: translate3D(-1800px,0px,0);
    }
    100% {
        transform: translate3D(-1800px,0px,0);
        -moz-transform: translate3D(-1800px,0px,0);
        -webkit-transform: translate3D(-1800px,0px,0);
    }
}