/* Header - Animation - MainNav - About CF */

/* ************************* TOP NAV RECTANGLE 1 DROPDOWN ANIMATION */

.expand_tpnv_rect1_wrap_threerows {
	-webkit-animation-name: expandTopNavRect1WrapThreeRows;
	animation-name: expandTopNavRect1WrapThreeRows;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
	-webkit-animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
}

@keyframes expandTopNavRect1WrapThreeRows {
	from {height: 1px; width: 130px;}
	to {height: 260px; width: 250px;}
}

@-webkit-keyframes expandTopNavRect1WrapThreeRows {
	from {height: 1px; width: 130px;}
	to {height: 260px; width: 250px;}
}


/* ************************* DROPDOWN ABOUT CF ANIMATION *************************** */
.expand_aboutcf_wrap_onerow {
	-webkit-animation-name: expandCFWrapOneRow;
	animation-name: expandCFWrapOneRow;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
	-webkit-animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
}

@keyframes expandCFWrapOneRow {
	from {height: 1px; width: 230px;}
	to {height: 94px; width: 904px;}
}

@-webkit-keyframes expandCFWrapOneRow {
	from {height: 1px; width: 230px;}
	to {height: 94px; width: 904px;}
}

.expand_aboutcf_wrap_tworows {
	-webkit-animation-name: expandCFWrapTwoRows;
	animation-name: expandCFWrapTwoRows;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
	-webkit-animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
}

@keyframes expandCFWrapTwoRows {
	from {height: 1px; width: 230px;}
	to {height: 208px; width: 904px;}
}

@-webkit-keyframes expandCFWrapTwoRows {
	from {height: 1px; width: 230px;}
	to {height: 208px; width: 904px;}
}

.expand_aboutcf_wrap_threerows {
	-webkit-animation-name: expandCFWrapThreeRows;
	animation-name: expandCFWrapThreeRows;
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
	-webkit-animation-timing-function: cubic-bezier(.33,.76,.39,1.29); 
}

@keyframes expandCFWrapThreeRows {
	from {height: 1px; width: 230px;}
	to {height: 286px; width: 904px;}
}

@-webkit-keyframes expandCFWrapThreeRows {
	from {height: 1px; width: 230px;}
	to {height: 286px; width: 904px;}
}


.zoom_in_up {
	-webkit-animation-name: zoomInUp;
	animation-name: zoomInUp;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

/* much of this zoomInUp code from https://coveloping.com/tools/css-animation-generator site??? */
@keyframes zoomInUp { 
    0% { 
        opacity: 0; 
        transform: scale3d(.1, .1, .1) translate3d(0, 900px, 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); 
    } 
	100% {
		transform: scale3d (1, 1, 1) translate3d(0, 0, 0);
	}
} 

@-webkit-keyframes zoomInUp { 
    0% { 
        opacity: 0; 
        transform: scale3d(.1, .1, .1) translate3d(0, 900px, 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); 
    } 
	100% {
		transform: scale3d (1, 1, 1) translate3d(0, 0, 0);
	}
} 

/* much of this zoomInUp code from https://coveloping.com/tools/css-animation-generator site??? */
.zoom_in_down {
	-webkit-animation-name: zoomInDown;
	animation-name: zoomInDown;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}


@keyframes zoomInDown { 
    0% { 
        opacity: 0; 
        transform: scale3d(.1, .1, .1) translate3d(0, -900px, 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); 
    } 
	100% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

@-webkit-keyframes zoomInDown { 
    0% { 
        opacity: 0; 
        transform: scale3d(.1, .1, .1) translate3d(0, -900px, 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); 
    } 
	100% {
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}



.light_speed_in_from_right {
	-webkit-animation-name: lightSpeedInFromRight;
	animation-name: lightSpeedInFromRight;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes lightSpeedInFromRight { 
    0% { 
		opacity: 0;
		-webkit-transform: translateX(100%) skewX(-30deg);
		-moz-transform: translateX(100%) skewX(-30deg);
		-ms-transform: translateX(100%) skewX(-30deg);
		-o-transform: translateX(100%) skewX(-30deg);
		transform: translateX(100%) skewX(-30deg);
	} 
    60% {
		opacity: 1; 
		-webkit-transform: translateX(-20%) skewX(30deg);
		-moz-transform: translateX(-20%) skewX(30deg);
		-ms-transform: translateX(-20%) skewX(30deg);
		-o-transform: translateX(-20%) skewX(30deg);
		transform: translateX(-20%) skewX(30deg);
	} 
    80% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(-15deg);
		-moz-transform: translateX(0%) skewX(-15deg);
		-ms-transform: translateX(0%) skewX(-15deg);
		-o-transform: translateX(0%) skewX(-15deg);
		transform: translateX(0%) skewX(-15deg);
	} 
    100% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(0deg);
		-moz-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		-o-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
	} 
} 

@-webkit-keyframes lightSpeedInFromRight { 
    0% { 
		opacity: 0;
		-webkit-transform: translateX(100%) skewX(-30deg);
		-moz-transform: translateX(100%) skewX(-30deg);
		-ms-transform: translateX(100%) skewX(-30deg);
		-o-transform: translateX(100%) skewX(-30deg);
		transform: translateX(100%) skewX(-30deg);
	} 
    60% {
		opacity: 1; 
		-webkit-transform: translateX(-20%) skewX(30deg);
		-moz-transform: translateX(-20%) skewX(30deg);
		-ms-transform: translateX(-20%) skewX(30deg);
		-o-transform: translateX(-20%) skewX(30deg);
		transform: translateX(-20%) skewX(30deg);
	} 
    80% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(-15deg);
		-moz-transform: translateX(0%) skewX(-15deg);
		-ms-transform: translateX(0%) skewX(-15deg);
		-o-transform: translateX(0%) skewX(-15deg);
		transform: translateX(0%) skewX(-15deg);
	} 
    100% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(0deg);
		-moz-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		-o-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
	} 
} 

/* much of this zoomInUp code from https://coveloping.com/tools/css-animation-generator site??? */
.light_speed_in_from_left {
	-webkit-animation-name: lightSpeedInFromLeft;
	animation-name: lightSpeedInFromLeft;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes lightSpeedInFromLeft { 
    0% { 
		opacity: 0;
		-webkit-transform: translateX(-100%) skewX(30deg);
		-moz-transform: translateX(-100%) skewX(30deg);
		-ms-transform: translateX(-100%) skewX(30deg);
		-o-transform: translateX(-100%) skewX(30deg);
		transform: translateX(-100%) skewX(30deg);
	} 
    60% {
		opacity: 1; 
		-webkit-transform: translateX(20%) skewX(-30deg);
		-moz-transform: translateX(20%) skewX(-30deg);
		-ms-transform: translateX(20%) skewX(-30deg);
		-o-transform: translateX(20%) skewX(-30deg);
		transform: translateX(20%) skewX(-30deg);
	} 
    80% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(15deg);
		-moz-transform: translateX(0%) skewX(15deg);
		-ms-transform: translateX(0%) skewX(15deg);
		-o-transform: translateX(0%) skewX(15deg);
		transform: translateX(0%) skewX(15deg);
	} 
    100% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(0deg);
		-moz-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		-o-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
	} 
} 

@-webkit-keyframes lightSpeedInFromLeft { 
    0% { 
		opacity: 0;
		-webkit-transform: translateX(-100%) skewX(30deg);
		-moz-transform: translateX(-100%) skewX(30deg);
		-ms-transform: translateX(-100%) skewX(30deg);
		-o-transform: translateX(-100%) skewX(30deg);
		transform: translateX(-100%) skewX(30deg);
	} 
    60% {
		opacity: 1; 
		-webkit-transform: translateX(20%) skewX(-30deg);
		-moz-transform: translateX(20%) skewX(-30deg);
		-ms-transform: translateX(20%) skewX(-30deg);
		-o-transform: translateX(20%) skewX(-30deg);
		transform: translateX(20%) skewX(-30deg);
	} 
    80% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(15deg);
		-moz-transform: translateX(0%) skewX(15deg);
		-ms-transform: translateX(0%) skewX(15deg);
		-o-transform: translateX(0%) skewX(15deg);
		transform: translateX(0%) skewX(15deg);
	} 
    100% { 
		opacity: 1;
		-webkit-transform: translateX(0%) skewX(0deg);
		-moz-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		-o-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
	} 
} 


/* much of this zoomInUp code from https://coveloping.com/tools/css-animation-generator site??? */
.bounce_in {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

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

    70% { 
        transform: scale(.9); 
    } 

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

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

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

    70% { 
        transform: scale(.9); 
    } 

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


/* much of this zoomInUp code from https://coveloping.com/tools/css-animation-generator site??? */
.roll_in_from_left {
	-webkit-animation-name: rollInFromLeft;
	animation-name: rollInFromLeft;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes rollInFromLeft { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 

@-webkit-keyframes rollInFromLeft { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 

.roll_in_from_right {
	-webkit-animation-name: rollInFromRight;
	animation-name: rollInFromRight;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes rollInFromRight { 
    0% { opacity: 0; transform: translateX(100%) rotate(120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 

@-webkit-keyframes rollInFromRight { 
    0% { opacity: 0; transform: translateX(100%) rotate(120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 


.rotate_in_up_left { 
	-webkit-animation-name: rotateInUpLeft;
	animation-name: rotateInUpLeft;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; 
}

@keyframes rotateInUpLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 

@-webkit-keyframes rotateInUpLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 


.shake_back_and_forth {
	-webkit-animation-name: shakeBackAndForth;
	animation-name: shakeBackAndForth;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;}

@keyframes shakeBackAndForth { 
    0%, 100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	} 
    10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translateX(-10px);
		-moz-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		transform: translateX(-10px);
	}	
    20%, 40%, 60%, 80% {
		-webkit-transform: translateX(10px);
		-moz-transform: translateX(10px);
		-ms-transform: translateX(10px);
		-o-transform: translateX(10px);
		transform: translateX(10px);
	}
}

@-webkit-keyframes shakeBackAndForth { 
    0%, 100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	} 
    10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translateX(-10px);
		-moz-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		transform: translateX(-10px);
	}	
    20%, 40%, 60%, 80% {
		-webkit-transform: translateX(10px);
		-moz-transform: translateX(10px);
		-ms-transform: translateX(10px);
		-o-transform: translateX(10px);
		transform: translateX(10px);
	}
}


.swing_back_and_forth {
	-webkit-animation-name: swingBackAndForth;
	animation-name: swingBackAndForth;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
    transform-origin: top center;
	-webkit-transform-origin: top center;}

@keyframes swingBackAndForth { 
	20% { 
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(15deg);
	} 
	40% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg);
	} 
	60% { 
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	} 
	80% { 
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	} 
   	100% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	} 
} 

@-webkit-keyframes swingBackAndForth { 
    20% { 
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(15deg);
	} 
    40% {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg);
	} 
    60% { 
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	} 
    80% { 
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	} 
    100% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	} 
} 

.tada_animation {
	-webkit-animation-name: tadaAnimation;
	animation-name: tadaAnimation;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes tadaAnimation { 
    0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	} 
    10%, 20% {
		transform: scale(0.9) rotate(-3deg);
		-webkit-transform: scale(0.9) rotate(-3deg);
		-moz-transform: scale(0.9) rotate(-3deg);
		-ms-transform: scale(0.9) rotate(-3deg);
		-o-transform: scale(0.9) rotate(-3deg);
		transform: scale(0.9) rotate(-3deg);
	} 
    30%, 50%, 70%, 90% {
		-webkit-transform: scale(1.1) rotate(3deg);
		-moz-transform: scale(1.1) rotate(3deg);
		-ms-transform: scale(1.1) rotate(3deg);
		-o-transform: scale(1.1) rotate(3deg);
		transform: scale(1.1) rotate(3deg);
	} 
    40%, 60%, 80% {
		-webkit-transform: scale(1.1) rotate(-3deg);
		-moz-transform: scale(1.1) rotate(-3deg);
		-ms-transform: scale(1.1) rotate(-3deg);
		-o-transform: scale(1.1) rotate(-3deg);
		transform: scale(1.1) rotate(-3deg);
	} 
    100% {
		-webkit-transform: scale(1) rotate(0);
		-moz-transform: scale(1) rotate(0);
		-ms-transform: scale(1) rotate(0);
		-o-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0);
	} 
} 


.wiggle_back_and_forth {
	-webkit-animation-name: wiggleBackAndForth;
	animation-name: wiggleBackAndForth;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
}

@keyframes wiggleBackAndForth { 
    0% {
		-webkit-transform: skewX(9deg);
		-moz-transform: skewX(9deg);
		-ms-transform: skewX(9deg);
		-o-transform: skewX(9deg);
		transform: skewX(9deg);
	} 
    10% {
		-webkit-transform: skewX(-8deg);
		-moz-transform: skewX(-8deg);
		-ms-transform: skewX(-8deg);
		-o-transform: skewX(-8deg);
		transform: skewX(-8deg);
	} 
    20% {
		-webkit-transform: skewX(7deg);
		-moz-transform: skewX(7deg);
		-ms-transform: skewX(7deg);
		-o-transform: skewX(7deg);
		transform: skewX(7deg);
	} 
    30% {
		-webkit-transform: skewX(-6deg);
		-moz-transform: skewX(-6deg);
		-ms-transform: skewX(-6deg);
		-o-transform: skewX(-6deg);
		transform: skewX(-6deg);
	} 
    40% {
		-webkit-transform: skewX(5deg);
		-moz-transform: skewX(5deg);
		-ms-transform: skewX(5deg);
		-o-transform: skewX(5deg);
		transform: skewX(5deg);
	} 
    50% {
		-webkit-transform: skewX(-4deg);
		-moz-transform: skewX(-4deg);
		-ms-transform: skewX(-4deg);
		-o-transform: skewX(-4deg);
		transform: skewX(-4deg);
	} 
    60% {
		-webkit-transform: skewX(3deg);
		-moz-transform: skewX(3deg);
		-ms-transform: skewX(3deg);
		-o-transform: skewX(3deg);
		transform: skewX(3deg);
	} 
    70% {
		-webkit-transform: skewX(-2deg);
		-moz-transform: skewX(-2deg);
		-ms-transform: skewX(-2deg);
		-o-transform: skewX(-2deg);
		transform: skewX(-2deg);
	} 
    80% {
		-webkit-transform: skewX(1deg);
		-moz-transform: skewX(1deg);
		-ms-transform: skewX(1deg);
		-o-transform: skewX(1deg);
		transform: skewX(1deg);
	} 
    90% {
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-o-transform: skewX(0deg);
		transform: skewX(0deg);
	} 
    100% {
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-o-transform: skewX(0deg);
		transform: skewX(0deg);
	} 
} 


@-webkit-keyframes wiggleBackAndForth { 
    0% {
		-webkit-transform: skewX(9deg);
		-moz-transform: skewX(9deg);
		-ms-transform: skewX(9deg);
		-o-transform: skewX(9deg);
		transform: skewX(9deg);
	} 
    10% {
		-webkit-transform: skewX(-8deg);
		-moz-transform: skewX(-8deg);
		-ms-transform: skewX(-8deg);
		-o-transform: skewX(-8deg);
		transform: skewX(-8deg);
	} 
    20% {
		-webkit-transform: skewX(7deg);
		-moz-transform: skewX(7deg);
		-ms-transform: skewX(7deg);
		-o-transform: skewX(7deg);
		transform: skewX(7deg);
	} 
    30% {
		-webkit-transform: skewX(-6deg);
		-moz-transform: skewX(-6deg);
		-ms-transform: skewX(-6deg);
		-o-transform: skewX(-6deg);
		transform: skewX(-6deg);
	} 
    40% {
		-webkit-transform: skewX(5deg);
		-moz-transform: skewX(5deg);
		-ms-transform: skewX(5deg);
		-o-transform: skewX(5deg);
		transform: skewX(5deg);
	} 
    50% {
		-webkit-transform: skewX(-4deg);
		-moz-transform: skewX(-4deg);
		-ms-transform: skewX(-4deg);
		-o-transform: skewX(-4deg);
		transform: skewX(-4deg);
	} 
    60% {
		-webkit-transform: skewX(3deg);
		-moz-transform: skewX(3deg);
		-ms-transform: skewX(3deg);
		-o-transform: skewX(3deg);
		transform: skewX(3deg);
	} 
    70% {
		-webkit-transform: skewX(-2deg);
		-moz-transform: skewX(-2deg);
		-ms-transform: skewX(-2deg);
		-o-transform: skewX(-2deg);
		transform: skewX(-2deg);
	} 
    80% {
		-webkit-transform: skewX(1deg);
		-moz-transform: skewX(1deg);
		-ms-transform: skewX(1deg);
		-o-transform: skewX(1deg);
		transform: skewX(1deg);
	} 
    90% {
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-o-transform: skewX(0deg);
		transform: skewX(0deg);
	} 
    100% {
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-o-transform: skewX(0deg);
		transform: skewX(0deg);
	} 
} 


.wobble_back_and_forth {
	-webkit-animation-name: wobbleBackAndForth;
	animation-name: wobbleBackAndForth;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
}


@keyframes wobbleBackAndForth { 
  	0% {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-ms-transform: translateX(0%);
	-o-transform: translateX(0%);
	transform: translateX(0%);
  	} 
  	15% {
  	-webkit-transform: translateX(-25%) rotate(-5deg);
  	-moz-transform: translateX(-25%) rotate(-5deg);
  	-ms-transform: translateX(-25%) rotate(-5deg);
  	-o-transform: translateX(-25%) rotate(-5deg);
  	transform: translateX(-25%) rotate(-5deg);
  	} 
  	30% {
   	-webkit-transform: translateX(20%) rotate(3deg);
   	-moz-transform: translateX(20%) rotate(3deg);
   	-ms-transform: translateX(20%) rotate(3deg);
   	-o-transform: translateX(20%) rotate(3deg);
   	transform: translateX(20%) rotate(3deg);
  	} 
  	45% {
   	-webkit-transform: translateX(-15%) rotate(-3deg);
   	-moz-transform: translateX(-15%) rotate(-3deg);
   	-ms-transform: translateX(-15%) rotate(-3deg);
   	-o-transform: translateX(-15%) rotate(-3deg);
   	transform: translateX(-15%) rotate(-3deg);
  	} 
	60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -moz-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    -o-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
	} 
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -moz-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    -o-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  } 
  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  } 
} 

@-webkit-keyframes wobbleBackAndForth { 
  	0% {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-ms-transform: translateX(0%);
	-o-transform: translateX(0%);
	transform: translateX(0%);
  	} 
  	15% {
  	-webkit-transform: translateX(-25%) rotate(-5deg);
  	-moz-transform: translateX(-25%) rotate(-5deg);
  	-ms-transform: translateX(-25%) rotate(-5deg);
  	-o-transform: translateX(-25%) rotate(-5deg);
  	transform: translateX(-25%) rotate(-5deg);
  	} 
  	30% {
   	-webkit-transform: translateX(20%) rotate(3deg);
   	-moz-transform: translateX(20%) rotate(3deg);
   	-ms-transform: translateX(20%) rotate(3deg);
   	-o-transform: translateX(20%) rotate(3deg);
   	transform: translateX(20%) rotate(3deg);
  	} 
  	45% {
   	-webkit-transform: translateX(-15%) rotate(-3deg);
   	-moz-transform: translateX(-15%) rotate(-3deg);
   	-ms-transform: translateX(-15%) rotate(-3deg);
   	-o-transform: translateX(-15%) rotate(-3deg);
   	transform: translateX(-15%) rotate(-3deg);
  	} 
	60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -moz-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    -o-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
	} 
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -moz-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    -o-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  } 
  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  } 
} 

/*
.animation_duration_1s {
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
}

.animation_delay_200ms {
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}
*/

/*
#article_title {
	background-color: red;}
*/


/* Jello Vertical and Horizontal from animista.net website. FreeBSD License. http://animista.net/license for more info. w: http://animista.net, t: @cssanimista Original animation time was 0.9s;  */

.jello_vertical {
	-webkit-animation: jello-vertical 0.5s both;
	        animation: jello-vertical 0.5s both;
}

@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.jello_horizontal {
	-webkit-animation: jello-horizontal 0.5s both;
	        animation: jello-horizontal 0.5s both;
}

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


/* Tilt in Forward from animista.net website. FreeBSD License. http://animista.net/license for more info. w: http://animista.net, t: @cssanimista Original translated values were "300px, 300px" for tilt_in_fwd_br and "-300px, 300px" for tilt_in_fwd_bl. */

.tilt_in_fwd_br {
	-webkit-animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-br 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-fwd-br {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(-35deg) translate(50px, 50px) skew(35deg, -10deg);
            transform: rotateY(20deg) rotateX(-35deg) translate(50px, 50px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-br {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(-35deg) translate(50px, 50px) skew(35deg, -10deg);
            transform: rotateY(20deg) rotateX(-35deg) translate(50px, 50px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

.tilt_in_fwd_bl {
	-webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-50px, 50px) skew(-35deg, 10deg);
            transform: rotateY(-20deg) rotateX(-35deg) translate(-50px, 50px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-50px, 50px) skew(-35deg, 10deg);
            transform: rotateY(-20deg) rotateX(-35deg) translate(-50px, 50px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/* 'Roll In Blurred' from animista.net website. FreeBSD License. http://animista.net/license for more info. w: http://animista.net, t: @cssanimista. Scale was not in animista CSS but was added by Paul. TranslateX was originally at -1000px for roll_in_blurred_left and 1000px for roll_in_blurred_right. */

.roll_in_blurred_left {
	-webkit-animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@-webkit-keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-100px) rotate(-720deg) scale(.5);
            transform: translateX(-100px) rotate(-720deg) scale(.5);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg) scale(1);
            transform: translateX(0) rotate(0deg) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-100px) rotate(-720deg) scale(.5);
            transform: translateX(-100px) rotate(-720deg) scale(.5);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg) scale(1);
            transform: translateX(0) rotate(0deg) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

.roll_in_blurred_right {
	-webkit-animation: roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@-webkit-keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(100px) rotate(720deg) scale(.5);
            transform: translateX(100px) rotate(720deg) scale(.5);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg) scale(1);
            transform: translateX(0) rotate(0deg) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(100px) rotate(720deg) scale(.5);
            transform: translateX(100px) rotate(720deg) scale(.5);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg) scale(1);
            transform: translateX(0) rotate(0deg) scale(1);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


/* 'Slide in Elliptic' from animista.net website. FreeBSD License. http://animista.net/license for more info. w: http://animista.net, t: @cssanimista. Scale was not in animista CSS but was added by Paul Change(s) made by Paul to value(s). Original translateY 0% was at 600px and 50% -1400px for 100% level of transform-origin */
.slide_in_elliptic_bottom_fwd {
	-webkit-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-elliptic-bottom-fwd {
  0% {
    -webkit-transform: translateY(200px) rotateX(30deg) scale(0);
            transform: translateY(200px) rotateX(30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -400px;
            transform-origin: 50% -400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-bottom-fwd {
  0% {
    -webkit-transform: translateY(200px) rotateX(30deg) scale(0);
            transform: translateY(200px) rotateX(30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -400px;
            transform-origin: 50% -400px;
    opacity: 1;
  }
}