@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

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

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

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

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

@keyframes cssload-sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 49px;
    }
    100% {
        height: 10px;
    }
}

@-o-keyframes cssload-sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 49px;
    }
    100% {
        height: 10px;
    }
}

@-ms-keyframes cssload-sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 49px;
    }
    100% {
        height: 10px;
    }
}

@-webkit-keyframes cssload-sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 49px;
    }
    100% {
        height: 10px;
    }
}

@-moz-keyframes cssload-sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 49px;
    }
    100% {
        height: 10px;
    }
}

@keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 63px;
    }
    100% {
        height: 19px;
    }
}

@-o-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 63px;
    }
    100% {
        height: 19px;
    }
}

@-ms-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 63px;
    }
    100% {
        height: 19px;
    }
}

@-webkit-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 63px;
    }
    100% {
        height: 19px;
    }
}

@-moz-keyframes cssload-sequence2 {
    0% {
        height: 19px;
    }
    50% {
        height: 63px;
    }
    100% {
        height: 19px;
    }
}

@keyframes cssload-loader {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

@-o-keyframes cssload-loader {
    from {
        -o-transform: scale(0);
        opacity: 1;
    }
    to {
        -o-transform: scale(1);
        opacity: 0;
    }
}

@-ms-keyframes cssload-loader {
    from {
        -ms-transform: scale(0);
        opacity: 1;
    }
    to {
        -ms-transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-loader {
    from {
        -webkit-transform: scale(0);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@-moz-keyframes cssload-loader {
    from {
        -moz-transform: scale(0);
        opacity: 1;
    }
    to {
        -moz-transform: scale(1);
        opacity: 0;
    }
}

@keyframes dotSpin {

    0%,
    100% {
        box-shadow: 0 $-y1 0 0 $color-1,
        $x2 $-y2 0 0 $color-1,
        $x1 0 0 0 $color-1,
        $x2 $y2 0 -2px $color-0,
        0 $y1 0 -2px $color-0,
        $-x2 $y2 0 -2px $color-0,
        $-x1 0 0 -2px $color-0,
        $-x2 $-y2 0 -2px $color-0;
    }

    12.5% {
        box-shadow: 0 $-y1 0 -2px $color-0,
        $x2 $-y2 0 0 $color-1,
        $x1 0 0 0 $color-1,
        $x2 $y2 0 0 $color-1,
        0 $y1 0 -2px $color-0,
        $-x2 $y2 0 -2px $color-0,
        $-x1 0 0 -2px $color-0,
        $-x2 $-y2 0 -2px $color-0;
    }

    25% {
        box-shadow: 0 $-y1 0 -2px $color-0,
        $x2 $-y2 0 -2px $color-0,
        $x1 0 0 0 $color-1,
        $x2 $y2 0 0 $color-1,
        0 $y1 0 0 $color-1,
        $-x2 $y2 0 -2px $color-0,
        $-x1 0 0 -2px $color-0,
        $-x2 $-y2 0 -2px $color-0;
    }

    37.5% {
        box-shadow: 0 $-y1 0 -2px $color-0,
        $x2 $-y2 0 -2px $color-0,
        $x1 0 0 -2px $color-0,
        $x2 $y2 0 0 $color-1,
        0 $y1 0 0 $color-1,
        $-x2 $y2 0 0 $color-1,
        $-x1 0 0 -2px $color-0,
        $-x2 $-y2 0 -2px $color-0;
    }

    50% {
        box-shadow: 0 $-y1 0 -2px $color-0,
        $x2 $-y2 0 -2px $color-0,
        $x1 0 0 -2px $color-0,
        $x2 $y2 0 -2px $color-0,
        0 $y1 0 0 $color-1,
        $-x2 $y2 0 0 $color-1,
        $-x1 0 0 0 $color-1,
        $-x2 $-y2 0 -2px $color-0;
    }

    62.5% {
        box-shadow: 0 $-y1 0 -2px $color-0,
        $x2 $-y2 0 -2px $color-0,
        $x1 0 0 -2px $color-0,
        $x2 $y2 0 -2px $color-0,
        0 $y1 0 -2px $color-0,
        $-x2 $y2 0 0 $color-1,
        $-x1 0 0 0 $color-1,
        $-x2 $-y2 0 0 $color-1;
    }

    75% {
        box-shadow: 0 $-y1 0 0 $color-1,
        $x2 $-y2 0 -2px $color-0,
        $x1 0 0 -2px $color-0,
        $x2 $y2 0 -2px $color-0,
        0 $y1 0 -2px $color-0,
        $-x2 $y2 0 -2px $color-0,
        $-x1 0 0 0 $color-1,
        $-x2 $-y2 0 0 $color-1;
    }

    87.5% {
        box-shadow: 0 $-y1 0 0 $color-1,
        $x2 $-y2 0 0 $color-1,
        $x1 0 0 -2px $color-0,
        $x2 $y2 0 -2px $color-0,
        0 $y1 0 -2px $color-0,
        $-x2 $y2 0 -2px $color-0,
        $-x1 0 0 -2px $color-0,
        $-x2 $-y2 0 0 $color-1;
    }
}

@keyframes change-rotate-icon {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
    }
}

@keyframes wolfoBtnHover {
    0% {
        transform: translateX(0px);
    }

    51% {
        transform: translateX(20px);
        opacity: 1;
    }

    52% {
        opacity: 0;
        transform: translateX(-20px);
    }

    53% {
        opacity: 0;
    }

    54% {
        opacity: 1;
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes wolfoBTT {
    from {
        @include transform(translate3d(0, 100px, 0));
        opacity: 0;
        filter: alpha(opacity=0);
    }

    to {
        @include transform(none);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-o-keyframes wolfoBTT {
    from {
        @include transform(translate3d(0, 100px, 0));
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        @include transform(translate3d(0, 0, 0));
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes wolfoBTT {
    from {
        @include transform(translate3d(0, 100px, 0));
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        @include transform(translate3d(0, 0, 0));
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes wolfoBTT {
    from {
        @include transform(translate3d(0, 100px, 0));
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        @include transform(translate3d(0, 0, 0));
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes wolfoBTT {
    from {
        @include transform(translate3d(0, 100px, 0));
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        @include transform(translate3d(0, 0, 0));
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@for $i from 1 through 15 {
    @keyframes wolfoBTT-#{$i} {
        0% {
            @include transform(translate3d(0, 100px, 0));
            opacity: 0;
            filter: alpha(opacity=0)
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 1;
            filter: alpha(opacity=100)
        }
    }

    @-o-keyframes wolfoBTT-#{$i} {
        0% {
            @include transform(translate3d(0, 100px, 0));
            opacity: 0;
            filter: alpha(opacity=0)
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 1;
            filter: alpha(opacity=100)
        }
    }

    @-ms-keyframes wolfoBTT-#{$i} {
        0% {
            @include transform(translate3d(0, 100px, 0));
            opacity: 0;
            filter: alpha(opacity=0)
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 1;
            filter: alpha(opacity=100)
        }
    }

    @-webkit-keyframes wolfoBTT-#{$i} {
        0% {
            @include transform(translate3d(0, 100px, 0));
            opacity: 0;
            filter: alpha(opacity=0)
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 1;
            filter: alpha(opacity=100)
        }
    }

    @-moz-keyframes wolfoBTT-#{$i} {
        0% {
            @include transform(translate3d(0, 100px, 0));
            opacity: 0;
            filter: alpha(opacity=0)
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            opacity: 1;
            filter: alpha(opacity=100)
        }
    }
}

@keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-o-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-ms-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-webkit-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-moz-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes triangleStroke {
    from {
        stroke-dashoffset: 90;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes turn {
    0% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes turn2 {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(180deg);
    }
}

@keyframes MenuSlideCV {
    0% {
        -webkit-transform: translateY(-100%) translateX(-50%);
        transform: translateY(-100%) translateX(-50%);
        -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
    }

    50% {
        -webkit-transform: translateY(-50%) translateX(-50%) skewY(-20deg);
        transform: translateY(-50%) translateX(-50%) skewY(-20deg);
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
        -webkit-transform: translateY(0%) translateX(-50%);
        transform: translateY(0%) translateX(-50%);
    }
}

@-webkit-keyframes MenuSlideCV {
    0% {
        -webkit-transform: translateY(-100%) translateX(-50%);
        transform: translateY(-100%) translateX(-50%);
        -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
    }

    50% {
        -webkit-transform: translateY(-50%) translateX(-50%) skewY(-20deg);
        transform: translateY(-50%) translateX(-50%) skewY(-20deg);
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
        -webkit-transform: translateY(0%) translateX(-50%);
        transform: translateY(0%) translateX(-50%);
    }
}

@keyframes BinFadeIn {
    0%, 20% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-o-keyframes BinFadeIn {
    0%, 20% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-ms-keyframes BinFadeIn {
    0%, 20% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-webkit-keyframes BinFadeIn {
    0%, 20% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-moz-keyframes BinFadeIn {
    0%, 20% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@keyframes BinPosition {
    form {
        position: relative;
    }

    to {
        position: fixed;
    }
}

@-o-keyframes BinPosition {
    form {
        position: relative;
    }

    to {
        position: fixed;
    }
}

@-ms-keyframes BinPosition {
    form {
        position: relative;
    }

    to {
        position: fixed;
    }
}

@-webkit-keyframes BinPosition {
    form {
        position: relative;
    }

    to {
        position: fixed;
    }
}

@-moz-keyframes BinPosition {
    form {
        position: relative;
    }

    to {
        position: fixed;
    }
}


@keyframes icon-menu-top {
    0% {
        top: 0;
        transform: rotate(0);
    }
    50% {
        top: 7px;
        transform: rotate(0);
    }
    100% {
        top: 7px;
        transform: rotate(45deg);
    }
}

@keyframes icon-menu-bottom {
    0% {
        top: 0;
        transform: rotate(0);
    }
    50% {
        top: -7px;
        transform: rotate(0);
    }
    100% {
        top: -7px;
        transform: rotate(-45deg);
    }
}

@keyframes icon-menu-scaled {
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

