.super-spiiner-neg4 {
	animation-name: spinnerCustom;
	-webkit-animation-name: spinnerCustom;

	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;
}

@keyframes spinnerCustom {
	0% {
		transform: translateX(200%) rotate(45deg);
	}
	100% {
		transform: translateX(0%) rotate(-4deg);
	}	
}

@-webkit-keyframes spinnerCustom {
	0% {
		-webkit-transform: translateX(200%) rotate(45deg);
	}	
	100% {
		-webkit-transform: translateX(0%) rotate(-4deg);
	}	
}


.super-spiiner-two {
	animation-name: spinnerTwo;
	-webkit-animation-name: spinnerTwo;

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;
}

@keyframes spinnerTwo {
	0% {
		transform: translateX(150%) rotate(45deg);
	}
	100% {
		transform: translateX(0%) rotate(2deg);
	}	
}

@-webkit-keyframes spinnerTwo {
	0% {
		-webkit-transform: translateX(150%) rotate(45deg);
	}	
	100% {
		-webkit-transform: translateX(0%) rotate(2deg);
	}	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(120%);
		opacity: 0.5;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(120%);
		opacity: 0.5;
	}	
	100% {
		-webkit-transform: translateY(0%);
		opacity: 1;
	}	
}

/*
==============================================
slideUp End
==============================================
*/

/*
==============================================
slideDown
==============================================
*/

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  
 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
 
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
 
    visibility: visible !important;         
}
 
@keyframes slideDown {
    0% {
        transform: translateY(-120%);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }   
}
 
@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-120%);
        opacity: 0.5;
    }   
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }   
}

/*
==============================================
slideDown End
==============================================
*/


/*
==============================================
slideLeft
==============================================
*/


.slideLeft {
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideLeft {
	0% {
		transform: translateX(300%);
	}
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(300%);
	}	
	100% {
		-webkit-transform: translateX(0%);
	}	
}

/*
==============================================
slideLeft End
==============================================
*/





/*
==============================================
slideRight
==============================================
*/


.slideRight {
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideRight {
	0% {
		transform: translateX(-300%);
	}
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-300%);
	}	
	100% {
		-webkit-transform: translateX(0%);
	}	
}

/*
==============================================
slideRight End
==============================================
*/








/*
==============================================
slideRightOut
==============================================
*/


.slideRightOut {
	animation-name: slideRightOut;
	-webkit-animation-name: slideRightOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideRightOut {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-300%);
	}	
}

@-webkit-keyframes slideRightOut {
	0% {
		-webkit-transform: translateX(0%);
	}	
	100% {
		-webkit-transform: translateX(-300%);
	}	
}

/*
==============================================
slideRightOut End
==============================================
*/

/* ================================================
 * START
 * CUSTOM ANIMATIONS
 * ============================================== */
        
    /*
    ==============================================
    CSS3 ANIMATION CHEAT SHEET
    ==============================================

    Made by Justin Aguilar

    www.justinaguilar.com/animations/

    Questions, comments, concerns, love letters:
    justin@justinaguilar.com
    ==============================================
    */

    /*
    ==============================================
    slideUp
    ==============================================
    */

    .slideUpNoBounce{
      animation-name: slideUpNoBounce;
      -webkit-animation-name: slideUpNoBounce;

      animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;

      animation-timing-function: ease;
      -webkit-animation-timing-function: ease;

      visibility: visible !important;
    }

    @keyframes slideUpNoBounce {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(0%);
      }
    }

    @-webkit-keyframes slideUpNoBounce {
      0% {
        -webkit-transform: translateY(100%);
      }
      100% {
        -webkit-transform: translateY(0%);
      }
    }

    /*
    ==============================================
    slideLeft
    ==============================================
    */

    .slideLeftNoBounce{
      animation-name: slideLeftNoBounce;
      -webkit-animation-name: slideLeftNoBounce;

      animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;

      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;

      visibility: visible !important;
    }

    @keyframes slideLeftNoBounce {
      0% {
        transform: translateX(150%);
      }
      100% {
        transform: translateX(0%);
      }
    }

    @-webkit-keyframes slideLeftNoBounce {
      0% {
        -webkit-transform: translateX(150%);
      }
      100% {
        -webkit-transform: translateX(0%);
      }
    }

    .slideLeftNoBounceAndPulse{
      animation-name: slideLeftNoBounceAndPulse;
      -webkit-animation-name: slideLeftNoBounceAndPulse;

      animation-duration: 1.5s;
      -webkit-animation-duration: 1.5s;
    }

    @keyframes slideLeftNoBounceAndPulse {
      0% {
        transform: translateX(150%);
        opacity: 1;
      }
      41% {
        transform: translateX(0%);
        opacity: 1;
      }
      70% {
        opacity: 0.2;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes slideLeftNoBounceAndPulse {
      0% {
        transform: translateX(150%);
      }
      33.333% {
        transform: translateX(0%);
        opacity: 1;
      }
      66.667% {
        opacity: 0.2;
      }
      100% {
        opacity: 1;
      }
    }

    /*
    ==============================================
    slideRight
    ==============================================
    */

    .slideRightNoBounce{
      animation-name: slideRightNoBounce;
      -webkit-animation-name: slideRightNoBounce;

      animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;

      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;

      visibility: visible !important;
    }

    @keyframes slideRightNoBounce {
      0% {
        transform: translateX(-150%);
      }
      100% {
        transform: translateX(0%);
      }
    }

    @-webkit-keyframes slideRightNoBounce {
      0% {
        -webkit-transform: translateX(-150%);
      }
      100% {
        -webkit-transform: translateX(0%);
      }
    }

    /*
    ==============================================
    onePulse
    ==============================================
    */

    .onePulse{
      animation-name: onePulse;
      -webkit-animation-name: onePulse;

      animation-duration: 0.7s;
      -webkit-animation-duration: 0.7s;
    }

    @keyframes onePulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes onePulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }