/* borders */

.border-left,
.border-right{
    transform: scaleY(0);
    transform-origin: 50% 0;
}

.border-top,
.border-bottom{
    transform: scaleX(0);
    transform-origin: 50% 100%;
}

.animated .border-left,
.animated .border-right{
    transform: scaleY(1);
    transition: transform 2s ease;
}

.animated .border-top,
.animated .border-bottom{
    transform: scaleX(1);
    transition: transform 2s ease;
}

/**/

/*animated svg*/
#svg-icon-1,
#svg-icon-2,
#svg-icon-3
{
    visibility: hidden;
}

#svg-icon-1.animated,
#svg-icon-2.animated,
#svg-icon-3.animated
{
    visibility: visible;
}
/**/

/* animated buttons */

.button.animated .button--background::before{
    transform: scaleX(1);

    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

.button.animated .button--label{
    opacity: 1;

    transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
}
/**/

.advantages--description,
.analytics-heading--title,
.benefits--heading--title,
.partners--heading--title
{
    opacity: 1;
}


/* intro block */
#page-header.animate{
    transform: translate3d(0,-130px,0);
}

.intro-block--title{
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
}
.intro-block--title.animated{
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

.intro-block--scroll{
    opacity: 0;
}
.intro-block--scroll.animated {
    opacity: 1;

    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
}

.up-down{
    animation-name: up-down;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes up-down {
    0% {
        transform: translateY(-6px) scale(1);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(4px) scale(0.8);
        opacity: 0;
    }
}

/**/
.advantage-container{
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition: opacity 0.6s ease,transform 1s ease;
}
.advantage-container.animated{
    transform: translate3d(0,0,0);
    opacity: 1;
}

.fadeInUp {
    visibility: hidden;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: none;
    animation-name: none;
}

.fadeInUp.animated {
    visibility: visible;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* animate by letter*/
.animate-by-letter{
    visibility: hidden;
}
.animate-by-letter > span{
    transform: translate3d(0,60px,0);
    display: inline-block;
    opacity: 0;
    transition: none;
}
.animate-by-letter.animated{
    visibility: visible;
}
.animate-by-letter.animated > span{
    transform: translate3d(0,0,0);
    opacity: 1;

    transition-duration: 0.3s;
    transition-property: transform,opacity;
    transition-timing-function: ease-out;
}
/**/