/*
* Inspired by: https://dribbble.com/shots/1878348-Google-Now-3rd-Party-Apps
*/

@-webkit-keyframes slide {
    0%  {
        -webkit-transform: scale(0, 0) translateY(0);
        -ms-transform: scale(0, 0) translateY(0);
        transform: scale(0, 0) translateY(0);
    }

    15%, 70% {
        -webkit-transform: scale(1, 1) translateY(0);
        -ms-transform: scale(1, 1) translateY(0);
        transform: scale(1, 1) translateY(0);
    }

    90% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

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

@keyframes slide {
    0%  {
        -webkit-transform: scale(0, 0) translateY(0);
        -ms-transform: scale(0, 0) translateY(0);
        transform: scale(0, 0) translateY(0);
    }

    15%, 70% {
        -webkit-transform: scale(1, 1) translateY(0);
        -ms-transform: scale(1, 1) translateY(0);
        transform: scale(1, 1) translateY(0);
    }

    90% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

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

@-webkit-keyframes size {
    0%, 15%  {
        -ms-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
    }

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

@-webkit-keyframes size {
    0%, 15%  {
        -ms-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
    }

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

@-webkit-keyframes size {
    0%, 15%  {
        -ms-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
    }

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

@keyframes size {
    0%, 15%  {
        -ms-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
    }

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

@-webkit-keyframes zoom {
    0%, 25%  {
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

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

@keyframes zoom {
    0%, 25%  {
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

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


.icons-in-view  {
    visibility: visible !important;
    -ms-transform: scale(0, 0) translateY(0);
    -webkit-transform: scale(0, 0) translateY(0);
    transform: scale(0, 0) translateY(0);
    animation-name: slide;
    animation-timing-function: ease-in-out;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-name: slide;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

.left-dif {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.center-dif {
    animation-delay: 1s;
}

.right-dif {
    animation-delay: 1.5s;
}

.fade {
    opacity: .2;
    transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.leaves-in-view {
    opacity: 1;
}