.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.hide {
    display: none;
}

.show {
    display: block;
}

@-webkit-keyframes bounce {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /*-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);*/

    }
    53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /*-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);*/

    }
    53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-o-keyframes rotate {
    100% {
        -o-transform: rotate(-80deg);
    }
}

@-moz-keyframes rotate {
    100% {
        -moz-transform: rotate(-80deg);
    }
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(-80deg);
    }
}

@keyframes rotate {
    100% {
        -o-transform: rotate(-80deg);
        -moz-transform: rotate(-80deg);
        -webkit-transform: rotate(-80deg);
        transform: rotate(-80deg);
    }
}

.rotate {
    -o-animation: rotate 1s linear infinite;
    -webkit-animation: rotate 1s linear infinite;
    -moz-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}

@-o-keyframes rotate-left-right {
    50% {
        -o-transform: rotate(-90deg);
    }
    100% {
        -o-transform: rotate(60deg);
    }
}

@-moz-keyframes rotate-left-right {
    50% {
        -moz-transform: rotate(-90deg);
    }
    100% {
        -moz-transform: rotate(60deg);
    }
}

@-webkit-keyframes rotate-left-right {
    50% {
        -webkit-transform: rotate(-90deg);
    }
    100% {
        -webkit-transform: rotate(60deg);
    }
}

@keyframes rotate-left-right {
    50% {
        -o-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    100% {
        -o-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
}

.rotate-left-right {
    /*-o-animation: rotate 4s linear infinite;*/
    -webkit-animation: rotate-left-right 4s linear;
    -moz-animation: rotate-left-right 4s linear;
    animation: rotate-left-right 4s linear;
}

@-o-keyframes move-to-tree {
    from {
        -o-transform: rotate(0deg) translateX(0px) rotate(0deg);
    }
    to {
        -o-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
    }
}

@-moz-keyframes move-to-tree {
    from {
        -moz-transform: rotate(0deg) translateX(0px) rotate(0deg);
    }
    to {
        -moz-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
    }
}

@-webkit-keyframes move-to-tree {
    from {
        -webkit-transform: rotate(0deg) translateX(0px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
    }
}

@-ms-keyframes move-to-tree {
    from {
        -ms-transform: rotate(0deg) translateX(0px) rotate(0deg);
    }
    to {
        -ms-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
    }
}

@keyframes move-to-tree {
    from {
        -o-transform: rotate(0deg) translateX(0px) rotate(0deg);
        -moz-transform: rotate(0deg) translateX(0px) rotate(0deg);
        -ms-transform: rotate(0deg) translateX(0px) rotate(0deg);
        -webkit-transform: rotate(0deg) translateX(0px) rotate(0deg);
        transform: rotate(0deg) translateX(0px) rotate(0deg);
    }
    to {
        -o-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
        -ms-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
        -moz-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
        -webkit-transform: rotate(-115deg) translateY(-390px) rotate(160deg);
        transform: rotate(-115deg) translateY(-390px) rotate(160deg);
    }

}

.move-to-tree {
    -o-animation: move-to-tree 1s linear;
    -ms-animation: move-to-tree 1s linear;
    -moz-animation: move-to-tree 1s linear;
    -webkit-animation: move-to-tree 1s linear;
    animation: move-to-tree 1s linear;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* base
==================================================*/

.darek {
    position: absolute;
    width: 153px;
    height: auto;
    top: 15px;
    left: 623px;
    opacity: 1;
    z-index: 3;
}

/* slide-1
==================================================*/

.robot {
    position: absolute;
    top: 0px;
    left: 855px;
    opacity: 1;
    z-index: 1;
}

.ruka-1 {
    position: absolute;
    top: 152px;
    left: 677px;
    opacity: 1;
    z-index: 2;
}

.ruka-2 {
    position: absolute;
    top: 198px;
    left: 707px;
    opacity: 1;
    z-index: 2;
}

.ruka-3 {
    position: absolute;
    top: 198px;
    left: 755px;
    opacity: 1;
    z-index: 2;
}

.ruka-4 {
    position: absolute;
    top: 193px;
    left: 814px;
    opacity: 1;
    z-index: 2;
}

/* Animation */

.darek.darek-fall-down {
    top: 143px;
    left: 623px;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    -ms-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
}

.darek.darek-fall-down-two {
    top: 143px;
    left: 623px;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}

.darek.darek-up {
    top: 15px;
    left: 623px;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    transition: 0.3s ease-out;

}

/*.darek.darek-up-final {
    top: 291px;
    left: 275px;
    width: 140px;
    height: auto;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}*/

.darek.darek-down {
    top: 135px;
    left: 623px;
    -webkit-transition: 0.4s ease-in;
    -moz-transition: 0.4s ease-in;
    -o-transition: 0.4s ease-in;
    -ms-transition: 0.4s ease-in;
    transition: 0.4s ease-in;
}

.darek.darek-is-down {
    top: 143px;
    left: 623px;
}

.darek.darek-is-tree {
    top: 185px;
    left: 220px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    transition: 0.4s linear;
}


/* animation on arc*/
.wrapper-darek-position{
    position: absolute;
    opacity: 1;
    z-index: 3;
    /*top: 148px;
    left: 255px;*/

    top: 135px;
    left: 623px;

    width: 153px;
    height: 181px;
}
.wrapper-darek {
    /*width: 150px;*/
}
.inner-darek {
    position: static;
    display: block;

    width: 153px;
    height: 181px;
}
.wrapper-darek {

    -o-transform-origin: -46% 193%;
    -ms-transform-origin: -46% 193%;
    -moz-transform-origin: -46% 193%;
    -webkit-transform-origin: -46% 193%;
    transform-origin: -46% 193%;

    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    -o-transform:rotate(-110deg);
    transform: rotate(-110deg);

    -o-transition: -o-transform 1s linear;
    -ms-transition: transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -moz-transition: transform 1s linear;
    transition: transform 1s linear;


    /*-o-transform-origin: -41% 50%;
    -ms-transform-origin: -41% 50%;
    -webkit-transform-origin: -41% 50%;
    -moz-transform-origin: -41% 50%;
    transform-origin: -41% 50%;

    -o-transform:rotate(-236deg);
    -ms-transform: rotate(-236deg);
    -moz-transform: rotate(-236deg);
    -webkit-transform: rotate(-236deg);
    transform: rotate(-236deg);

    -o-transition: all 1s;
    -ms-transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;*/
}
.inner-darek {
    -o-transform:rotate(-220deg);
    -ms-transform: rotate(-220deg);
    -moz-transform: rotate(-220deg);
    -webkit-transform: rotate(-220deg);
    transform: rotate(-220deg);

    -o-transition: -o-transform 1s linear;
    -ms-transition: transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -moz-transition: transform 1s linear;
    transition: transform 1s linear;
}




.stromek {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 2;
}

.masina {
    position: absolute;
    width: 168px;
    height: 169px;
    top: 90px;
    left: 340px;
    opacity: 0;
    z-index: 3;
}

.masina.fade-in {
    opacity: 1;
    z-index: 2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

.kolo {
    position: absolute;
    width: 165px;
    height: 167px;
    top: 290px;
    left: 430px;
    opacity: 0;
    z-index: 3;
}

.kolo.fade-in {
    opacity: 1;
    z-index: 2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

/*.darek {*/
    /*top: -130px;*/
    /*left: 96px;*/
    /*opacity: 1;*/
    /*z-index: 3;*/
/*}*/

/*.darek.darek-down {*/
    /*top: 491px;*/
    /*left: 96px;*/
    /*-webkit-transition: 0.5s linear;*/
    /*-moz-transition: 0.5s linear;*/
    /*-o-transition: 0.5s linear;*/
    /*-ms-transition: 0.5s linear;*/
    /*transition: 0.5s linear;*/
/*}*/

.txt {
    position: absolute;
    top: 100px;
    left: 550px;
    width: 253px;
    height: 126px;
    opacity: 0;
    z-index: 5;
}

.txt.fade-in {
    opacity: 1;
    z-index: 3;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}



/* slide-2
==================================================*/
.slide-2 .darek {
    position: absolute;
    width: 112px;
    height: 119px;
    top: 750px;
    left: 96px;
    opacity: 1;
    z-index: 3;

}

/* Animation */

.slide-2 .darek-up {
    position: absolute;
    width: 112px;
    height: 119px;
    opacity: 1;
    z-index: 3;
    top: 160px;
    left: 96px;
    -webkit-transition: 1s ease-out;
    -moz-transition: 1s ease-out;
    -o-transition: 1s ease-out;
    -ms-transition: 1s ease-out;
    transition: 1s ease-out;
}

.slide-2 .darek.darek-down {
    -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    -ms-transition: 1s ease-in;
    transition: 1s ease-in;
}

/* hide */
.slide-2 .stromek {
    display: none;
}

.slide-2 .masina {
    display: none;
}

.slide-2 .kolo {
    display: none;
}

.slide-2 .txt {
    display: none;
}

.slide-2 .robot {
    display: none;
}

.slide-2 .ruka-1 {
    display: none;
}

.slide-2 .ruka-2 {
    display: none;
}

.slide-2 .ruka-3 {
    display: none;
}

.slide-2 .ruka-4 {
    display: none;
}

/* slide-3
==================================================*/
.slide-3 .masina.fade-in {
    opacity: 1;
    z-index: 2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

.slide-3 .kolo.fade-in {
    opacity: 1;
    z-index: 2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

.slide-3 .darek {
    top: -130px;
    left: 96px;
    opacity: 1;
    z-index: 3;
}

.slide-3 .darek.darek-down {
    top: 430px;
    left: 96px;
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    -ms-transition: 0.5s linear;
    transition: 0.5s linear;
}

.slide-3 .txt.fade-in {
    opacity: 1;
    z-index: 3;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

.slide-3 .ruka-3 {
    display: none;
}

.slide-3 .ruka-4 {
    display: none;
}