/*

==============================================

CSS3 ANIMATION CHEAT SHEET

==============================================



Made by Justin Aguilar



www.justinaguilar.com/animations/



Questions, comments, concerns, love letters:

justin@justinaguilar.com

==============================================

*/



/*

==============================================

expandUp

==============================================

*/





.expandUp {
    animation-name: expandUp;
    -webkit-animation-name: expandUp;
    animation-duration: 3.0s;
    -webkit-animation-duration: 3.0s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}



@keyframes expandUp {

    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }

    60% {
        transform: translateY(-7%) scaleY(1.12);
    }

    75% {
        transform: translateY(3%);
    }

    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }
}



@-webkit-keyframes expandUp {

    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
    }

    60% {
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }

    75% {
        -webkit-transform: translateY(3%);
    }

    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
    }
}





/*

==============================================

expandOpen

==============================================

*/





.expandOpen:hover{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

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

	visibility: visible !important;	
}



@keyframes expandOpen {

    0% {
        transform: scale(1.8);
    }

    50% {
        transform: scale(0.95);
    }

    80% {
        transform: scale(1.05);
    }

    90% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}



@-webkit-keyframes expandOpen {

    0% {
        -webkit-transform: scale(1.8);
    }

    50% {
        -webkit-transform: scale(0.95);
    }

    80% {
        -webkit-transform: scale(1.05);
    }

    90% {
        -webkit-transform: scale(0.98);
    }

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





/*==============================================

pulse

==============================================

*/



.pulse, .plan1:hover {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}



@keyframes pulse {

    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}



@-webkit-keyframes pulse {

    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }
}



/*

==============================================

floating

==============================================

*/



.floating, .grid li:hover {
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}



@keyframes floating {

    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(8%);
    }

    100% {
        transform: translateY(0%);
    }
}



@-webkit-keyframes floating {

    0% {
        -webkit-transform: translateY(0%);
    }

    50% {
        -webkit-transform: translateY(8%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}


.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}

.carousel-inner > .item {
    -webkit-transition: 2.1s ease-in-out left;
    -moz-transition: 2.1s ease-in-out left;
    -o-transition: 2.1s ease-in-out left;
    transition: 2.1s ease-in-out left;
}