//
// Animations
// --------------------------------------------------

// Mixins
// ---------------------

.hoverSlideLeft {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 100%;
	content: "";
	.transition(left 400ms ease);
}
.hoverSlideRight {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	left: 0;
	content: "";
	.transition(right 400ms ease);
}
.hoverSlideUp {
	position: absolute;
	top: 100%;
	bottom: 0;
	right: 0;
	left: 0;
	content: "";
	.transition(top 400ms ease);
}

// CSS Animations
// ---------------------

html.csstransitions.csstransforms3d
{
    a,
    .btn,
    .navbar.main li,
    .navbar.main .caret { 
        .transition(all 300ms linear); 
    }
    .panel-3d {
		-webkit-perspective: 600px;
		-moz-perspective: 600px;
		perspective: 600px;
		position: relative;
		z-index: 900;
		visibility: hidden;

		.front {
			position: relative;
			top: 0;
			left: 0;
			z-index: 900;
			width: 100%;
			height: 100%;
			text-align: center;

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
			transform: rotateX(0deg) rotateY(0deg);

			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			transform-style: preserve-3d;

			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			backface-visibility: hidden;

			[class*="icon-"] { visibility: hidden; }
		}

		.back {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: 100%;
			height: inherit;
            // overflow-y: scroll;

            // .widget-body {
            //     height: 150px;
            //     overflow-y: scroll;
            // }

			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			transform: rotateY(-180deg);
			transform-style: preserve-3d;
			backface-visibility: hidden;
		}

		&.animated {
			.front, .back {
				-webkit-transition: all .4s ease-in-out;
				transition: all .4s ease-in-out;
			}
		}

		&.flip-default {
			z-index: 1000;
			.front {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				transform: rotateY(180deg);
			}
			.back {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-moz-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}
		}

		&.panel-flip {
			z-index: 1000;
		}

		&.panel-flip .front {
			z-index: 900;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			transform: rotateY(180deg);
			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
		}

		&.panel-flip .back {
			z-index: 1000;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
			transform: rotateX(0deg) rotateY(0deg);
		}

	}
}

// Shake
// ------------------------- //

@-webkit-keyframes shake {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes shake {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake {
	0% { -ms-transform: translate(2px, 1px) rotate(0deg); }
	10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
	40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
	50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
	100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}

// Move from bottom
// ------------------------- //

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%) scale(0.5) translateZ(1px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0%) scale(1) translateZ(1px);
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%) scale(0.5) translateZ(1px);
        opacity: 0;
    }
    to {
        -moz-transform: translateY(0%) scale(1) translateZ(1px);
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%) scale(0.5) translateZ(1px);
        opacity: 0;
    }
    to {
        -ms-transform: translateY(0%) scale(1) translateZ(1px);
        opacity: 1;        
    }
}

// Move from top
// ------------------------- //

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%) translateZ(1px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%) translateZ(1px);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%) translateZ(1px);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%) translateZ(1px);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%) translateZ(1px);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%) translateZ(1px);
    }
}

// Move from left
// ------------------------- //

@-webkit-keyframes moveFromLeft{
    from {
        -webkit-transform: translateX(-100%) translateZ(1px);
    }
    to {
        -webkit-transform: translateX(0%) translateZ(1px);
    }
}
@-moz-keyframes moveFromLeft{
    from {
        -moz-transform: translateX(-100%) translateZ(1px);
    }
    to {
        -moz-transform: translateX(0%) translateZ(1px);
    }
}
@-ms-keyframes moveFromLeft{
    from {
        -ms-transform: translateX(-100%) translateZ(1px);
    }
    to {
        -ms-transform: translateX(0%) translateZ(1px);
    }
}

// Move from right
// ------------------------- //

@-webkit-keyframes moveFromRight {
    from {
        -webkit-transform: translateX(100%) translateZ(1px);
    }
    to {
        -webkit-transform: translateX(0%) translateZ(1px);
    }
}
@-moz-keyframes moveFromRight {
    from {
        -moz-transform: translateX(100%) translateZ(1px);
    }
    to {
        -moz-transform: translateX(0%) translateZ(1px);
    }
}
@-ms-keyframes moveFromRight {
    from {
        -ms-transform: translateX(100%) translateZ(1px);
    }
    to {
        -ms-transform: translateX(0%) translateZ(1px);
    }
}

// Move from left rotate
// ------------------------- //

@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg) translateZ(1px);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg) translateZ(1px);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg) translateZ(1px);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg) translateZ(1px);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg) translateZ(1px);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg) translateZ(1px);
    }
}

// Small to Big
// ------------------------- //

@-webkit-keyframes smallToBig{
    from {
        -webkit-transform: scale(0.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes smallToBig{
    from {
        -moz-transform: scale(0.1);
    }
    to {
        -moz-transform: scale(1);
    }
}
@-ms-keyframes smallToBig{
    from {
        -ms-transform: scale(0.1);
    }
    to {
        -ms-transform: scale(1);
    }
}

// Big to Small
// ------------------------- //

@-webkit-keyframes bigToSmall{
    from {
        -webkit-transform: scale(2);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes bigToSmall{
    from {
        -moz-transform: scale(2);
    }
    to {
        -moz-transform: scale(1);
    }
}
@-ms-keyframes bigToSmall{
    from {
        -ms-transform: scale(2);
    }
    to {
        -ms-transform: scale(1);
    }
}

// Move From Left And Grow And Rotate
// ------------------------- //

@-webkit-keyframes moveFromLeftAndGrowAndRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg) scale(0.1) translateZ(1px);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}
@-moz-keyframes moveFromLeftAndGrowAndRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg) scale(0.1) translateZ(1px);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}
@-ms-keyframes moveFromLeftAndGrowAndRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg) scale(0.1) translateZ(1px);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}

// Move From Right And Grow And Rotate
// ------------------------- //

@-webkit-keyframes moveFromRightAndGrowAndRotate{
    from {
        -webkit-transform: translateX(100%) rotate(90deg) scale(0.1) translateZ(1px);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}
@-moz-keyframes moveFromRightAndGrowAndRotate{
    from {
        -moz-transform: translateX(100%) rotate(90deg) scale(0.1) translateZ(1px);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}
@-ms-keyframes moveFromRightAndGrowAndRotate{
    from {
        -ms-transform: translateX(100%) rotate(90deg) scale(0.1) translateZ(1px);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg) scale(1) translateZ(1px);
    }
}