/* ==========================================================================
   Assigns CSS3 Animations
   ========================================================================== */

/*
 *	CSS 3 animations based on, and borrowed from, Animate.css:  
 *  https://github.com/daneden/animate.css/blob/master/animate.css	
 *
 *  Animations applied using javaScript.  See this file for related
 *  javaScript: js/main-globalhead.js 
 *		 
 */ 
 
 
/* 
   Animation Delays
   ========================================================================== */  
 
.anim-delay_1-0 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;	
} 

.anim-delay_0-75 {
  -webkit-animation-delay: .75s;
  animation-delay: .75s;	
} 

.anim-delay_0-2 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;	
}

/* 
   Animation Durations, Types & Options
   ========================================================================== */ 

/*
 * Applied to elements that are fadded in/out 
 */
 
.anim-fade {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
  transition-timing-function: ease-out;    
}

.anim-fade-fast {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
  transition-timing-function: ease-out;    
}

/* 
 * Applied to  to all whole page sliding elements 
 */
 
.anim-slide-page {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
  transition-timing-function: ease-out;  
}

/* 
   Animation Keyframes & Keyframe Class Assigments
   ========================================================================== */ 

/* 
 * FadeIn 
 */ 
 
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
} 

/*
 * fadeInUp 
 */ 
 
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

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

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    -ms-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
} 

/* 
 * fadeInUpContent 
 *
 * Applied to content section
 */ 
 
@-webkit-keyframes fadeInUpContent {
  0% {
    opacity: 0.9;
    -webkit-transform: none;
    transform: none;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);	
  }
}

@keyframes fadeInUpContent {
  0% {
    opacity: 0.9;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;  
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -40px, 0);
    -ms-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);	
  }
}

.fadeInUpContent {
  -webkit-animation-name: fadeInUpContent;
  animation-name: fadeInUpContent;
} 

/* 
 * Frame (Main site Menu) SlidInLeft 
 */ 
 
@-webkit-keyframes SlideInLeft {
	
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

@keyframes SlideInLeft {
	
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

.SlideInLeft {
  -webkit-animation-name: SlideInLeft;
  animation-name: SlideInLeft;
}

.SlideInLeft-alt { left:0 !important; }

/* 
 * Frame (Item Added Alert) SlideInTop 
 */ 
 
@-webkit-keyframes SlideInTop  {
	
  0% {
    -webkit-transform: translate3d( 0, 47px, 0);
    transform: translate3d(0, 47px, 0);
  }

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

@keyframes SlideInTop  {
	
  0% {
    -webkit-transform: translate3d( 0, 47px, 0);
    transform: translate3d(0, 47px, 0);
  }

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

.SlideInTop  {
  -webkit-animation-name: SlideInTop;
  animation-name: SlideInTop;
}

.SlideInTop-alt { top: 0 !important; }

/* 
 * Frame (Shopping Cart View) SlidInRight 
 */ 
 
@-webkit-keyframes SlideInRight  {
	
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

@keyframes SlideInRight  {
	
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

.SlideInRight  {
  -webkit-animation-name: SlideInRight;
  animation-name: SlideInRight;
}

.SlideInRight-alt { right:0 !important; }

/* 
 * Frame (main site menu) SlideBackLeft ***************
 */

@-webkit-keyframes SlideBackLeft {
  0% {
    -webkit-transform: translate3d( 100%, 0, 0);
    transform: translate3d(100%, 0, 0);    
  }

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

@keyframes SlideBackLeft {
  0% {
    -webkit-transform: translate3d( 100%, 0, 0);
    transform: translate3d(100%, 0, 0);    
  }

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

.SlideBackLeft {
  -webkit-animation-name: SlideBackLeft ;
  animation-name: SlideBackLeft ;	
}

.SlideBackLeft_snap { transform: translate3d(0, 0, 0); }

.SlideBackLeft-alt { left:-30% !important; }

/* 
 * Frame (Item Added Alert) SlideBackTop 
 */ 
 
@-webkit-keyframes SlideBackTop {
  0% {
    -webkit-transform: translate3d( 0, 100%, 0);
    transform: translate3d(0, 100%, 0);	  
  }

  100% { 
    -webkit-transform: translate3d( 0, 47px, 0);
    transform: translate3d(0, 47px, 0);
  }
}

@keyframes SlideBackTop {
  0% {
    -webkit-transform: translate3d( 0, 100%, 0);
    transform: translate3d(0, 100%, 0);	  
  }

  100% { 
    -webkit-transform: translate3d(0, 47px, 0);
    transform: translate3d(0, 47px, 0);
  }
}


.SlideBackTop {
  -webkit-animation-name: SlideBackTop;
  animation-name: SlideBackTop;	
}

.SlideBackTop-alt { bottom:0; }

/* 
 * Frame (Shopping Cart View) SlideBackRight 
 */ 
 
@-webkit-keyframes SlideBackRight {
  0% {
    -webkit-transform: translate3d( -100%, 0, 0);
    transform: translate3d(-100%, 0, 0);	  
  }

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

@keyframes SlideBackRight {
  0% {
    -webkit-transform: translate3d( -100%, 0, 0);
    transform: translate3d(-100%, 0, 0);	  
  }

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


.SlideBackRight {
  -webkit-animation-name: SlideBackRight ;
  animation-name: SlideBackRight ;	
} 

.SlideBackRight_snap { transform: translate3d(0, 0, 0); }

.SlideBackRight-alt { right:-70% !important; }


/* 
 * Frame (Chat Launcher) SlideInBottom 
 */ 
 
@-webkit-keyframes SlideInBottom  {
	
  0% {
    -webkit-transform: translate3d( 0, 0 , 0);
    transform: translate3d(0, 0, 0);
  }

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

@keyframes SlideInBottom  {
	
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

.SlideInBottom  {
  -webkit-animation-name: SlideInBottom;
  animation-name: SlideInBottom;
}

.SlideInBottom-alt { top:auto !important; bottom:0 !important; }


/* 
 * Frame (Chat Launcher) SlideBackBottom 
 */ 
 
@-webkit-keyframes SlideBackBottom {
  0% {
    -webkit-transform: translate3d( 0, -100%, 0);
    transform: translate3d(0, -100%, 0);	  
  }

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

@keyframes SlideBackBottom {
  0% {
    -webkit-transform: translate3d( 0, -100%, 0);
    transform: translate3d(0, -100%, 0);	  
  }

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

.SlideBackBottom {
  -webkit-animation-name: SlideBackBottom;
  animation-name: SlideBackBottom;	
}

.SlideBackBottom-alt { bottom:0 !important; top:100% !important; }


/* 
 * Page Move Right 30% 
 */
 
@-webkit-keyframes MovePageR_30 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);    
  }

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

@keyframes MovePageR_30 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);    
  }

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


.MovePageR_30 {
  -webkit-animation-name: MovePageR_30 ;
  animation-name: MovePageR_30 ;	
}

/* 
 * Page Move Left 60% 
 */
 
@-webkit-keyframes MovePageL_60 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);	  
  }

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

@keyframes MovePageL_60 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);	  
  }

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

.MovePageL_60 {
  -webkit-animation-name: MovePageL_60 ;
  animation-name: MovePageL_60 ;	
}

/* 
 * Page Move Left 70% 
 */
 
@-webkit-keyframes MovePageL_70 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);	  
  }

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

@keyframes MovePageL_70 {
  0% {
    -webkit-transform: translate3d( 0, 0, 0);
    transform: translate3d(0, 0, 0);	  
  }

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

.MovePageL_70 {
  -webkit-animation-name: MovePageL_70;
  animation-name: MovePageL_70;	
}

/* 
 * Page Move Back to default position from Right 30% 
 */
 
 @-webkit-keyframes MovePageBackR_30 {
  0% {
    -webkit-transform: translate3d( 30%, 0, 0);
    transform: translate3d( 30%, 0, 0);   
  }

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

@keyframes MovePageBackR_30 {
  
  0% {
    -webkit-transform: translate3d( 30%, 0, 0);
    transform: translate3d( 30%, 0, 0); 
  }

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


.MovePageBackR_30 {	
  -webkit-animation-name: MovePageBackR_30 ;
  animation-name: MovePageBackR_30 ;			
}

.MovePageBackR_30_snap { transform: translate3d( -30%, 0, 0); }

/* 
 * Page Move Back to default position from Left 60% 
 */
 
@-webkit-keyframes MovePageBackL_60 {
  0% {
    -webkit-transform: translate3d( -60%, 0, 0);
    transform: translate3d( -60%, 0, 0);	  
  }

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

@keyframes MovePageBackL_60 {
  
  0% {
    -webkit-transform: translate3d( -60%, 0, 0);
    transform: translate3d( -60%, 0, 0); 
  }

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

.MovePageBackL_60 {	
  -webkit-animation-name: MovePageBackL_60 ;
  animation-name: MovePageBackL_60 ;
  			
}

.MovePageBackL_60_snap {	
	transform: translate3d( 0, 0, 0);
}

/* 
 * Page Move Back to default position from Left 70% 
 */
 
@-webkit-keyframes MovePageBackL_70 {
  0% {
    -webkit-transform: translate3d( -70%, 0, 0);
    transform: translate3d( -70%, 0, 0);	  
  }

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

@keyframes MovePageBackL_70 {
  
  0% {
    -webkit-transform: translate3d( -70%, 0, 0);
    transform: translate3d( -70%, 0, 0); 
  }

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

.MovePageBackL_70 {	
  -webkit-animation-name: MovePageBackL_70 ;
  animation-name: MovePageBackL_70 ;
  			
}

.MovePageBackL_70_snap {	
	transform: translate3d( 0, 0, 0);
}

/* Spin clockwise 90 degrees */

.spin-cw-90 {	
  animation: spin-cw-90 ease-in .25s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: spin-cw-90 ease-in .25s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: spin-cw-90 ease-in .25s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: spin-cw-90 ease-in .25s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: spin-cw-90 ease-in .25s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes spin-cw-90{
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(90deg) ;
  }
}

@-moz-keyframes spin-cw-90{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  100% {
    -moz-transform:  rotate(90deg) ;
  }
}

@-webkit-keyframes spin-cw-90 {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  rotate(90deg) ;
  }
}

@-o-keyframes spin-cw-90 {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  100% {
    -o-transform:  rotate(90deg) ;
  }
}

@-ms-keyframes spin-cw-90 {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  100% {
    -ms-transform:  rotate(90deg) ;
  }
}

.spin-back-cw-90 {
  animation: spin-back-cw-90 ease-in .25s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: spin-back-cw-90 ease-in .25s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: spin-back-cw-90 ease-in .25s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: spin-back-cw-90 ease-in .25s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: spin-back-cw-90 ease-in .25s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/		
}

@keyframes spin-back-cw-90{
  0% {
    transform:  rotate(90deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes spin-back-cw-90{
  0% {
    -moz-transform:  rotate(90deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes spin-back-cw-90 {
  0% {
    -webkit-transform:  rotate(90deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes spin-back-cw-90 {
  0% {
    -o-transform:  rotate(90deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes spin-back-cw-90 {
  0% {
    -ms-transform:  rotate(90deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}