/*
==============================================
pullUp
==============================================
*/

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.1);height: 1%;
    }
    100% {
        height: 100%;
    }
}

@-webkit-keyframes pullUp {
    0% {
        transform: scaleY(0.1);height: 1%;
    }
    100% {
        height: 100%;
    }
}



.fadeIn{

    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}
@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}
/*
SLIDERLEFT
*/
.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
stretchRight
==============================================
*/

.stretchRight{
    animation-name: stretchRight;
    -webkit-animation-name: stretchRight;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }
}

@-webkit-keyframes stretchRight {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}