
/* #Animation
================================================== */

/*Old animation library*/

/* Scale Up animation */
@keyframes mk_scale {
	0% {
		transform: scale(0.3);
		opacity: 0.1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Fade In animation */
@keyframes mk_fade {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}

/* Left to Right animation */

@keyframes mk_left_to_right {
	0% {
		transform: translate(-20px, 0);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* Right To Left animation */
@keyframes mk_right_to_left {
	0% {
		transform: translate(20px, 0);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* Bottom to Top animation */

@keyframes mk_bottom_to_top {
	0% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* Top to Bottom animation */

@keyframes mk_top_to_bottom {
	0% {
		transform: translate(0, -20px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}


.mobile-false .animate-element {
	opacity: 0;
}
.ie-mobile .animate-element,
.skills.animate-element,
.no-cssanimations .animate-element.start-animation {
	opacity: 1;
}

.mobile-false .animate-element.start-animation.scale-up,
.mobile-false #page .animate-element.start-animation.scale-up {
	animation: mk_scale 0.5s 1 cubic-bezier(0.445, 0.05, 0.55, 0.95);
	opacity: 1;
}

.mobile-false .animate-element.start-animation.fade-in,
.mobile-false #page .animate-element.start-animation.fade-in {
	animation: mk_fade 0.7s 1 cubic-bezier(0.445, 0.05, 0.55, 0.95);
	opacity: 1;
}

.mobile-false .animate-element.start-animation.right-to-left,
.mobile-false #page .animate-element.start-animation.right-to-left {
	animation: mk_right_to_left 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1);
	opacity: 1;
}
.mobile-false .animate-element.start-animation.left-to-right,
.mobile-false #page .animate-element.start-animation.left-to-right {
	animation: mk_left_to_right 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1);
	opacity: 1;
}
.mobile-false .animate-element.start-animation.top-to-bottom,
.mobile-false #page .animate-element.start-animation.top-to-bottom {
	animation: mk_top_to_bottom 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1);
	opacity: 1;
}
.mobile-false .animate-element.start-animation.bottom-to-top,
.mobile-false #page .animate-element.start-animation.bottom-to-top {
	animation: mk_bottom_to_top 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1);
	opacity: 1;
}


/*New animation library*/
.mobile-false .animate-element.start-animation {
	animation-duration: 1s;
	animation-fill-mode: both;
}
/* bounce */

@keyframes dt_bounce {
	0%, 20%, 53%, 80%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transform: translate3d(0,0,0);
	}

	40%, 43% {
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		transform: translate3d(0,-4px,0);
	}
}
.mobile-false .animate-element.start-animation.bounce,
.mobile-false #page .animate-element.start-animation.bounce {
	animation-name: dt_bounce;
	transform-origin: center bottom;
	opacity: 1;
}

/* flash */

@keyframes dt_flash {
	0%, 50%, 100% {
		opacity: 1;
	}

	25%, 75% {
		opacity: 0;
	}
}

.mobile-false .animate-element.start-animation.flash {
	animation-name: dt_flash;
}

/* pulse */

@keyframes dt_pulse {
	0% {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(1.05, 1.05, 1.05);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.mobile-false .animate-element.start-animation.pulse {
	animation-name: dt_pulse;
	opacity: 1;
}

/* rubberBand */

@keyframes dt_rubberBand {
	0% {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, .95, 1);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.mobile-false .animate-element.start-animation.rubberBand {
	animation-name: dt_rubberBand;
	opacity: 1;
}

/* shake */

@keyframes dt_shake {
	0%, 100% {
		transform: translate3d(0, 0, 0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translate3d(-10px, 0, 0);
	}

	20%, 40%, 60%, 80% {
		transform: translate3d(10px, 0, 0);
	}
}

.mobile-false .animate-element.start-animation.shake {
	animation-name: dt_shake;
	opacity: 1;
}

/* swing */
@keyframes dt_swing {
	20% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	40% {
		transform: rotate3d(0, 0, 1, -10deg);
	}

	60% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

.mobile-false .animate-element.start-animation.swing {
	transform-origin: top center;
	animation-name: dt_swing;
	opacity: 1;
}

/* tada */

@keyframes dt_tada {
	0% {
		transform: scale3d(1, 1, 1);
	}

	10%, 20% {
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}

	30%, 50%, 70%, 90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%, 60%, 80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.mobile-false .animate-element.start-animation.tada {
	animation-name: dt_tada;
	opacity: 1;
}

/* wobble */

@keyframes dt_wobble {
	0% {
		transform: none;
	}

	15% {
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}

	30% {
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}

	45% {
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}

	60% {
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}

	75% {
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}

	100% {
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.wobble {
	animation-name: dt_wobble;
	opacity: 1;
}

/* bounceIn */
@keyframes dt_bounceIn {
	0%, 20%, 40%, 60%, 80%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		transform: scale3d(.97, .97, .97);
	}

	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.mobile-false .animate-element.start-animation.bounceIn {
	animation-name: dt_bounceIn;
	animation-duration: .75s;
	opacity: 1;
}

/* bounceInDown */

@keyframes dt_bounceInDown {
	0%, 60%, 75%, 90%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}

	75% {
		transform: translate3d(0, -10px, 0);
	}

	90% {
		transform: translate3d(0, 5px, 0);
	}

	100% {
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.bounceInDown {
	animation-name: dt_bounceInDown;
	opacity: 1;
}

/* bounceInLeft */

@keyframes dt_bounceInLeft {
	0%, 60%, 75%, 90%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: translate3d(-3000px, 0, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0);
	}

	75% {
		transform: translate3d(-10px, 0, 0);
	}

	90% {
		transform: translate3d(5px, 0, 0);
	}

	100% {
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.bounceInLeft {
	animation-name: dt_bounceInLeft;
	opacity: 1;
}

/* bounceInRight */

@keyframes dt_bounceInRight {
	0%, 60%, 75%, 90%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		transform: translate3d(10px, 0, 0);
	}

	90% {
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.bounceInRight {
	animation-name: dt_bounceInRight;
	opacity: 1;
}

/* bounceInUp */
@keyframes dt_bounceInUp {
	0%, 60%, 75%, 90%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: translate3d(0, 3000px, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0);
	}

	75% {
		transform: translate3d(0, 10px, 0);
	}

	90% {
		transform: translate3d(0, -5px, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

.mobile-false .animate-element.start-animation.bounceInUp {
	animation-name: dt_bounceInUp;
	opacity: 1;
}

/* fadeIn */

@keyframes dt_fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.fadeIn {
	animation-name: dt_fadeIn;
}

/* fadeInDown */

@keyframes dt_fadeInDown {
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInDown {
	animation-name: dt_fadeInDown;
}

/* fadeInDownBig */

@keyframes dt_fadeInDownBig {
	0% {
		opacity: 0;
		transform: translate3d(0, -2000px, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInDownBig {
	animation-name: dt_fadeInDownBig;
}

/* fadeInLeft */

@keyframes dt_fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInLeft {
	animation-name: dt_fadeInLeft;
}

/* fadeInLeftBig */

@keyframes dt_fadeInLeftBig {
	0% {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInLeftBig {
	animation-name: dt_fadeInLeftBig;
}

/* fadeInRight */

@keyframes dt_fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInRight {
	animation-name: dt_fadeInRight;
}

/* fadeInRightBig */

@keyframes dt_fadeInRightBig {
	0% {
		opacity: 0;
		transform: translate3d(2000px, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInRightBig {
	animation-name: dt_fadeInRightBig;
}

/* fadeInUp */

@keyframes dt_fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInUp {
	animation-name: dt_fadeInUp;
}

/* fadeInUpBig */

@keyframes dt_fadeInUpBig {
	0% {
		opacity: 0;
		transform: translate3d(0, 2000px, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.fadeInUpBig {
	animation-name: dt_fadeInUpBig;
}

/* flipInX */

@keyframes dt_flipInX {
	0% {
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transition-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	100% {
		transform: perspective(400px);
	}
}

.mobile-false .animate-element.start-animation.flipInX {
	backface-visibility: visible !important;
	animation-name: dt_flipInX;
	opacity: 1;
}

/* flipInY */
@keyframes dt_flipInY {
	0% {
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transition-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}
	100% {
		transform: perspective(400px);
	}
}

.mobile-false .animate-element.start-animation.flipInY {
	backface-visibility: visible !important;
	animation-name: dt_flipInY;
	opacity: 1;
}

/* rotateIn */

@keyframes dt_rotateIn {
	0% {
		transform-origin: center;
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0;
	}
	100% {
		transform-origin: center;
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.rotateIn {
	animation-name: dt_rotateIn;
}

/* rotateInDownLeft */

@keyframes dt_rotateInDownLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0;
	}
	100% {
		transform-origin: left bottom;
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.rotateInDownLeft {
	animation-name: dt_rotateInDownLeft;
}

@keyframes dt_rotateInDownRight {
	0% {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	100% {
		transform-origin: right bottom;
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.rotateInDownRight {
	animation-name: dt_rotateInDownRight;
}

/* rightInDownRight */

@keyframes dt_rotateInUpLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	100% {
		transform-origin: left bottom;
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.rotateInUpLeft {
	animation-name: dt_rotateInUpLeft;
}

/* rotateInUpRight */

@keyframes dt_rotateInUpRight {
	0% {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, -90deg);
		opacity: 0;
	}

	100% {
		transform-origin: right bottom;
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.rotateInUpRight {
	animation-name: dt_rotateInUpRight;
}

/* rollIn */
@keyframes dt_rollIn {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.mobile-false .animate-element.start-animation.rollIn {
	animation-name: dt_rollIn;
}

/* rollOut */

@keyframes dt_rollOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
	}
}

.mobile-false .animate-element.start-animation.rollOut {
	animation-name: dt_rollOut;
	opacity: 1;
}

/* zoomIn */
@keyframes dt_zoomIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.zoomIn {
	animation-name: dt_zoomIn;
	opacity: 1;
}

/* zoomInDown */

@keyframes dt_zoomInDown {
	0% {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

.mobile-false .animate-element.start-animation.zoomInDown {
	animation-name: dt_zoomInDown;
	opacity: 1;
}

/* zoomInLeft */

@keyframes dt_zoomInLeft {
	0% {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

.mobile-false .animate-element.start-animation.zoomInLeft {
	animation-name: dt_zoomInLeft;
	opacity: 1;
}

/* zommInRight */

@keyframes dt_zoomInRight {
	0% {
		opacity: 0;
		-ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

.mobile-false .animate-element.start-animation.zoomInRight {
	animation-name: dt_zoomInRight;
	opacity: 1;
}

/* zoomInUp */
@keyframes dt_zoomInUp {
	0% {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
}

.mobile-false .animate-element.start-animation.zoomInUp {
	animation-name: dt_zoomInUp;
	opacity: 1;
}

/* lightSpeedIn */

@keyframes dt_lightSpeedIn {
	0% {
		transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0;
	}

	60% {
		transform: skewX(20deg);
		opacity: 1;
	}

	80% {
		transform: skewX(-5deg);
		opacity: 1;
	}

	100% {
		transform: none;
		opacity: 1;
	}
}

.mobile-false .animate-element.start-animation.lightspeedIn {
	animation-name: dt_lightSpeedIn;
	animation-timing-function: ease-out;
}