//
// 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
{
	#menu,
	.navbar.main,
	#footer {
		visibility: hidden;
		// display: none;
	}
	
	#sidebar-discover-wrapper {
		#logoWrapper {
			&, * {
				.transition(all 500ms ease);
			}
		}
		> ul {
			.transition(width 500ms ease);
			> li {
				> a {
					.transition(all 400ms ease);
					> i, > i:before {
						.transition(all 400ms ease);
					}
					span {
						.transition(all 400ms ease-in-out);
					}
				}
			}
		}
	}
	.navbar.main {
		.dropdown.open {
			.dropdown-menu {
				.animation(fadeInUp 200ms linear);
			}
		}
	}
	
	.btn, 
	.timeline-activity li i.list-icon {
		.transition(all 200ms linear);
	}
	[data-toggle="gridalicious"] .widget-pinterest {
		.transition(all 100ms ease);
		.widget-body {
			.thumb { .transition(all 2000ms ease); }
			.description { .transition(all 1000ms ease); }
		}
		&:hover {
			.transition(all 1000ms ease);
			z-index: 1000;
			.transform(scale(1.08));
			.thumb { .transform(scale(1.1)); }
		}
	}
}

// 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);
    }
}