@charset "utf-8";
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/*CSS STANDARD FADE & SLIDE ANIMATIONS*/


@keyframes fadeIn {
  0%   {opacity:0;}
  25%  {opacity:0.25;}
  50%  {opacity:0.50;}
  75%  {opacity:0.75;}
  100% {opacity:1;}
}

@keyframes fadeInOp {
  0%   {opacity:0;}
  25%  {opacity:0.25;}
  50%  {opacity:0.50;}
  75%  {opacity:0.75;}
  100% {opacity:0.9;}
}

@keyframes fadeOut {
    0%   {opacity:1;}
  25%  {opacity:0.75;}
  50%  {opacity:0.50;}
  75%  {opacity:0.25;}
  100% {opacity:0;}
}

@keyframes fadeOut10 {
    0%   {opacity:1.0;}
      20%   {opacity:0.15;}
  50% {opacity:0;}
  100%{opacity:0;}
}

@keyframes crossFader {
  0%   {opacity:1.0;}
  20%   {opacity:0.5;}
  50% {opacity:0.1;}
  100%{opacity:0;}
}

@keyframes fadeInUp {
  0%   {opacity:1; margin-top: 7px; margin-top: 5px;}
  25%  {opacity:0.75; margin-top: 5px; margin-top: 3px;}
  50%  {opacity:0.50; margin-top: 3px; margin-top: 2px;}
  75%  {opacity:0.25; margin-top: 2px; margin-top: 1px;}
  100% {opacity:0; margin-top: 1px; margin-top: 0px;}
}

@keyframes fadeInUpTab {
  0%   {opacity:0; margin-top: 7px; margin-top: 5px;}
  25%  {opacity:0.25; margin-top: 5px; margin-top: 3px;}
  40%  {background-color:#323131; opacity:1; margin-top: 1px; margin-top: 0px;}
  41% {background-color:#cfff00; opacity:1;}
  75%  {background-color:#cfff00; opacity:1;}
  99% {background-color:#cfff00; opacity:1;}
  100% {opacity:1; margin-top: 0px;}
}

@keyframes fadeInDown {
  0%   {opacity:0; margin-top: 0px; margin-top: 1px;}
  25%  {opacity:0.25; margin-top: 1px; margin-top: 2px;}
  50%  {opacity:0.50; margin-top: 2px; margin-top: 3px;}
  75%  {opacity:0.75; margin-top: 3px; margin-top: 5px;}
  100% {opacity:1; margin-top: 5px; margin-top: 7px;}
}



@keyframes slideInRight {
  0%   {margin-left:-100%; opacity:0;}
  100% {margin-left:0%; opacity:1;}
}

@keyframes slideInLeft {
  0%   {margin-right:-50%; margin-right:-40%;}
  25%  {margin-right:-40%; margin-right:-30%;}
  50%  {margin-right:-30%; margin-left:-20%;}
  75%  {margin-right:-20%; margin-right:-10%;}
  100% {margin-right:-10%; margin-right:0%;}
}

@keyframes fadeOutIn {
  0%   {opacity:1;}
  50%  {opacity:0;}
  95%  {opacity:0;}
  100% {opacity:1;}
}

@keyframes fadeOutRW {
    0%   {opacity:1.0;}
   20%   {opacity:0.15;}
  50% {opacity:0;}
  100%{opacity:0;}
}

/*main UI build*/


@keyframes rightUIBuild {
  0%   {background-color:black; margin-right:-50%; opacity:0.65;}
  25%  {margin-right:0%; opacity:.25;}
  100%  {margin-right:50%; width:200%;opacity:1;}
}

@keyframes leftUIBuild {
  0%   {margin-left:-50%;opacity:.5;}
  25%  {margin-left:0%;opacity:0.25;}
  50%  {background-color:#000000; width:70%; width:2%; opacity:.1;}
  75%  {background-color:#6a59d5;width:2%; width:0.05%; opacity:0.5}
  76% {background-color:#cfff00;width:2%; width:110%;}
  100% {background-color:#cfff00; width:110%; width:0.85%; float:left; float:right; opacity:1;}
}



/*CARD FLIPPER ANIMATIONS*/

@keyframes cloneFlip_R {
  0%   {opacity:0.10; transform:rotateY(0deg);}
  25%  {opacity:0.25; transform:rotateY(45deg); top:45%; left:45%; width:10%; height:10%;}
  50%  {opacity:0.50; transform:rotateY(90deg); top:30%; left:30%; width:40%; height:40%;}
  75%  {opacity:0.75; transform:rotateY(135deg); top:20%; left:20%; width:60%; height:60%;}
  100% {opacity:0.9; transform:rotateY(180deg); top:0%; left:0%; width:120%; height:120%;}
}



@keyframes cloneFlip_L {
  0%   {opacity:0.10;transform:rotateY(0deg); }
  25%  {opacity:0.25; transform:rotateY(-45deg); top:45%; left:45%; width:10%; height:10%;}
  50%  {opacity:0.50; transform:rotateY(-90deg); top:30%; left:30%; width:40%; height:40%;}
  75%  {opacity:0.75; transform:rotateY(-135deg); top:20%; left:20%; width:60%; height:60%;}
  100% {opacity:0.9; transform:rotateY(-180deg); top:0%; left:0%; width:120%; height:120%;}
   /* rotatefront = transform:"rotateY(-180deg)";*/
     /* rotateback = "transform: rotateY(-360deg)";*/
}



/*CARD FLIPPER FUNCITONS*/
/* modded Card flipper animation - jwhazel */

.cFlipR{
    animation-name: cloneFlip_R;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-direction: normal;
	animation-fill-mode: both;
}


.cFlipR_rev{
    animation-name: cloneFlip_R;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-direction: reverse;
	animation-fill-mode: both;
}


.cFlipL{
    animation-name: cloneFlip_L;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
		animation-direction: normal;
	animation-fill-mode: both;
}


.cFlipL_rev{
    animation-name: cloneFlip_L;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-direction: reverse;
	animation-fill-mode: both;
}


/*FADERS*/



.fadeOutIn{
	animation-name: fadeOutIn;
	animation-duration: 5s; 
	animation-delay: -2s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}

.slideR{
	animation-name: slideInRight;
	animation-duration: 2.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}


.fadeIn{
	animation-name: fadeIn;
	animation-duration: 0.7s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.midFadeIn{
    animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.slowFadeIn{
	animation-name: fadeIn;
	animation-duration: 1.7s; 
	animation-delay: 0s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}

.arcFadeIn{
	animation-name: fadeIn;
	animation-duration: 1.2s; 
	animation-delay: 4s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}


.fastFadeIn{
	animation-name: fadeIn;
	animation-duration: 2s; 
	animation-delay: 0.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}

.slowFadeOut{
	animation-name: fadeOut10;
	animation-duration: 1.8s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}
.fadeOutRW{
	animation-name: fadeOutRW;
	animation-duration: 1.25s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
.titleFadeIn{
    animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.copyFadeIn{
    animation-name: fadeIn;
	animation-duration: 1.25s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.flickerIn{
	animation-name: flicker;
	animation-duration: .3s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.bgsFadeIn{
    animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.fadeOut{
	animation-name: fadeOut;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}


.sub_fade{
	animation-name: fadeIn;
	animation-duration: 1s; 
	animation-delay: 0.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}

@keyframes titleFadeIn {
  0%   {margin-left: -1.25%; opacity:0;}
  25%  {opacity:0.25;}
  50%  {opacity:0.50;}
  75%  {opacity:0.75;}
  100% {margin-left: -0.25%; opacity:1;}
}

.title_fade{
	animation-name: titleFadeIn;
	animation-duration: 1s; 
	animation-delay: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}



.slow_fade{
	animation-name: fadeIn;
	animation-duration: 1s; 
	animation-delay: 4s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	
}


.crossFader{
	animation-name: crossFader;
	animation-duration: 2.5s;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}


/*CSS SPINNER - Luke Haas */
 

 .loader {
  font-size: 8px;
  margin: 23% 40%;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #cfff00;
  background: -moz-linear-gradient(left, #cfff00 10%, rgba(207, 255, 0, 0) 42%);
  background: -webkit-linear-gradient(left, #cfff00 10%, rgba(207, 255, 0, 0) 42%);
  background: -o-linear-gradient(left, #cfff00 10%, rgba(207, 255, 0, 0) 42%);
  background: -ms-linear-gradient(left, #cfff00 10%, rgba(207, 255, 0, 0) 42%);
  background: linear-gradient(to right, #cfff00 10%, rgba(207, 255, 0, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #cfff00;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #000000;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



/****** SOFTPAN CLASS TO LOAD ON EACH ENLARGEMENT****/

/*DESIGNATE FEATURED AREA IN XML (Center center) and adjust drift math*/

@keyframes softPan {
  0%   {top:62px;left:-1px;}
  35%  {top:-30%;left:-13%;}
  60%  {top:-12%;left:-5%;}
  100% {top:62px;left:-1px;}
}


.softPan{
	animation-name: softPan;
	animation-duration: 30s; 
	animation-delay: 0s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

#mover{
position:absolute;
display: block;
top:53px;
left:-1px;
z-index:85;
width:100%;
height:100%;
/*border: 4px solid yellow;*/
}


/****** MAIN LEVEL RESPONSIVE ANIMATIONS,  gravity drift and perspective scaling/shift with darkening ****/

@keyframes zoomInLt {
 0%   {width: 150% !important; height: 150% !important;background-blend-mode:normal !important; }
}

@keyframes zoomOutDk {
  0%   {width: 50% !important; height: 50% !important;background-blend-mode:luminosity !important; }
}