/*
      Final Project

      Author: Ryan Brownell, W0274281
      Date: December 12, 2015
      Filename: animations.css
	  Purpose: Defines all website animations

*/

/* Color Reference
blue : #00007D;
red : #A10000;
green : #007500;
violet : #5400A3;
orange : #C95000;
white : #FFF;
*/

/* Initial Element Settings */
footer {
	opacity:1;
}

section {
	opacity: 1;
}

/* ### Background Animations ### */

/* RED BACKGROUND */
/* Fade to Red from Black */
.fade-in-red {
	animation: in-red-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-red-from-black {
	from {background-color: #000;}
    to {background-color: #A10000;}
}

@keyframes in-red-from-black {
	from {background-color: #000;}
    to {background-color: #A10000;}
}

/* Fade to Black from Red */
.fade-out-red.fade-in-red {
	animation: black-out-red 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-red {
	from {background-color: #A10000;}
    to {background-color: #000000;}
}

@keyframes black-out-red {
	from {background-color: #A10000;}
    to {background-color: #000000;}
}
/* /RED BACKGROUND */

/* ORANGE BACKGROUND */
/* Fade to Orange from Black */
.fade-in-orange {
	animation: in-orange-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-orange-from-black {
	from {background-color: #000;}
    to {background-color: #C95000;}
}

@keyframes in-orange-from-black {
	from {background-color: #000;}
    to {background-color: #C95000;}
}

/* Fade to Black from Orange */
.fade-out-orange.fade-in-orange {
	animation: black-out-orange 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-orange {
	from {background-color: #C95000;}
    to {background-color: #000000;}
}

@keyframes black-out-orange {
	from {background-color: #C95000;}
    to {background-color: #000000;}
}
/* /ORANGE BACKGROUND */

/* GREEN BACKGROUND */
/* Fade to Green from Black */
.fade-in-green {
	animation: in-green-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-green-from-black {
	from {background-color: #000;}
    to {background-color: #007500;}
}

@keyframes in-green-from-black {
	from {background-color: #000;}
    to {background-color: #007500;}
}

/* Fade to Black from Green */
.fade-out-green.fade-in-green {
	animation: black-out-green 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-green {
	from {background-color: #007500;}
    to {background-color: #000000;}
}

@keyframes black-out-green {
	from {background-color: #007500;}
    to {background-color: #000000;}
}
/* /GREEN BACKGROUND */

/* VIOLET BACKGROUND */
/* Fade to Violet from Black */
.fade-in-violet {
	animation: in-violet-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-violet-from-black {
	from {background-color: #000;}
    to {background-color: #5400A3;}
}

@keyframes in-violet-from-black {
	from {background-color: #000;}
    to {background-color: #5400A3;}
}

/* Fade to Black from Violet */
.fade-out-violet.fade-in-violet {
	animation: black-out-violet 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-violet {
	from {background-color: #5400A3;}
    to {background-color: #000000;}
}

@keyframes black-out-violet {
	from {background-color: #5400A3;}
    to {background-color: #000000;}
}
/* END VIOLET BACKGROUND */

/* BLUE BACKGROUND */
/* Fade to Blue from Black */
.fade-in-blue {
	animation: in-blue-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-blue-from-black {
	from {background-color: #000;}
    to {background-color: #00007D;}
}

@keyframes in-blue-from-black {
	from {background-color: #000;}
    to {background-color: #00007D;}
}

/* Fade to Black from Blue */
.fade-out-blue.fade-in-blue {
	animation: black-out-blue 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-blue {
	from {background-color: #00007D;}
    to {background-color: #000000;}
}

@keyframes black-out-blue {
	from {background-color: #00007D;}
    to {background-color: #000000;}
}
/* END BLUE BACKGROUND */

/* WHITE BACKGROUND */
/* Fade to White from Black */
.fade-in-white {
	animation: in-white-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-white-from-black {
	from {background-color: #000;}
    to {background-color: #FFF;}
}

@keyframes in-white-from-black {
	from {background-color: #000;}
    to {background-color: #FFF;}
}

/* Fade to Black from White */
.fade-out-white.fade-in-white {
	animation: black-out-white 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-white {
	from {background-color: #FFF;}
    to {background-color: #000;}
}

@keyframes black-out-white {
	from {background-color: #FFF;}
    to {background-color: #000;}
}
/* END WHITE BACKGROUND */

/* WHITE BACKGROUND */
/* Fade to White from Black */
.fade-in-white {
	animation: in-white-from-black 2s alternate;
	animation-fill-mode: forwards;	
}

@-webkit-keyframes in-white-from-black {
	from {background-color: #000;}
    to {background-color: #FFF;}
}

@keyframes in-white-from-black {
	from {background-color: #000;}
    to {background-color: #FFF;}
}

/* Fade to Black from White */
.fade-out-white.fade-in-white {
	animation: black-out-white 2s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes black-out-white {
	from {background-color: #FFF;}
    to {background-color: #000;}
}

@keyframes black-out-white {
	from {background-color: #FFF;}
    to {background-color: #000;}
}
/* END WHITE BACKGROUND */
/* ### End Background Animations ### */


/* ### Section Animation ### */

/* Initial Element Settings */
footer {
	opacity:0;
}

section {
	opacity:0;
}

/* Hide the scrollbar during animations */
.noscroll {
	overflow: hidden;
	scroll: none;
}

/* Section Flyup */
.flyup {
	animation: flyup 1.5s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes flyup {
    from {
		opacity: 1;
		-webkit-transform: translateY(110%);}
	to {
		opacity: 0;
		-webkit-transform: translateY(0);}
}

@keyframes flyup {
	from {
		opacity: 0;
		-ms-transform: translateY(110%);
		transform: translateY(110%);
		}
	to {
		opacity: 1;
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

/* Section Flydown */
.flydown {
	animation: flydown 1.5s alternate;
	animation-fill-mode: forwards;
}

@-webkit-keyframes flydown {
	from {
		opacity: 0;
		-webkit-transform: translateY(0);}
    to {
		opacity: 1;
		-webkit-transform: translateY(110%);}
}

@keyframes flydown {
	from {
		opacity: 1;
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
    to {
		opacity: 0;
		-ms-transform: translateY(110%);
		transform: translateY(110%);
		}
}

/* ### End Section Animation ### */

/* ### Button Animations ### */
/* Button Wiggle (NOT USED) */
.wiggle:hover {
	animation: wiggle 2s alternate;
}


@-webkit-keyframes wiggle {
	from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(7deg);}
}

@keyframes wiggle {
	from {
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
    to {
		-ms-transform: rotate(7deg);
		transform: rotate(7deg);
		}
}

/* Green Button */
.greenbutton {
	animation: green-out 2s alternate;
	animation-fill-mode: forwards;
}

.greenbutton:hover {
	animation: green-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes green-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(0, 117, 0, 0.60);}
}

@-webkit-keyframes green-out {
	from {background-color: rgba(0, 117, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes green-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(0, 117, 0, 0.60);}
}

@keyframes green-out {
	from {background-color: rgba(0, 117, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

/* Blue Button */
.bluebutton {
	animation: blue-out 2s alternate;
	animation-fill-mode: forwards;
}

.bluebutton:hover {
	animation: blue-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes blue-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(0, 0, 125, 0.60);}
}

@-webkit-keyframes blue-out {
	from {background-color: rgba(0, 0, 125, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes blue-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(0, 0, 125, 0.60);}
}

@keyframes blue-out {
	from {background-color: rgba(0, 0, 125, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

/* Violet Button */
.violetbutton {
	animation: violet-out 2s alternate;
	animation-fill-mode: forwards;
}

.violetbutton:hover {
	animation: violet-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes violet-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(84, 0, 163, 0.60);}
}

@-webkit-keyframes violet-out {
	from {background-color: rgba(84, 0, 163, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes violet-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(84, 0, 163, 0.60);}
}

@keyframes violet-out {
	from {background-color: rgba(84, 0, 163, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

/* Orange Button */
.orangebutton {
	animation: orange-out 2s alternate;
	animation-fill-mode: forwards;
}

.orangebutton:hover {
	animation: orange-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes orange-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(201, 80, 0, 0.60);}
}

@-webkit-keyframes orange-out {
	from {background-color: rgba(201, 80, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes orange-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(201, 80, 0, 0.60);}
}

@keyframes orange-out {
	from {background-color: rgba(201, 80, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

/* Red Button */
.redbutton {
	animation: red-out 2s alternate;
	animation-fill-mode: forwards;
}

.redbutton:hover {
	animation: red-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes red-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(161, 0, 0, 0.60);}
}

@-webkit-keyframes red-out {
	from {background-color: rgba(161, 0, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes red-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(161, 0, 0, 0.60);}
}

@keyframes red-out {
	from {background-color: rgba(161, 0, 0, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

/* White Button */
.whitebutton {
	animation: white-out 2s alternate;
	animation-fill-mode: forwards;
}

.whitebutton:hover {
	animation: white-in 2s alternate;
	animation-fill-mode: forwards;
}
	
@-webkit-keyframes white-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(255, 255, 255, 0.60);}
}

@-webkit-keyframes white-out {
	from {background-color: rgba(255, 255, 255, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}

@keyframes white-in {
	from {background-color: rgba(175, 175, 175, 0.15);}
    to {background-color: rgba(255, 255, 255, 0.60);}
}

@keyframes white-out {
	from {background-color: rgba(255, 255, 255, 0.60);}
    to {background-color: rgba(175, 175, 175, 0.15);}
}
/* ### End Button Animations ### */