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

@keyframes slide-up-fade-in{
 0% {
  opacity:0;
  transform:  translate(0px,40px)  ;
 }
 100% {
  opacity:1;
  transform:  translate(0px,0px)  ;
 }
}

@-moz-keyframes slide-up-fade-in{
 0% {
  opacity:0;
  -moz-transform:  translate(0px,40px)  ;
 }
 100% {
  opacity:1;
  -moz-transform:  translate(0px,0px)  ;
 }
}

@-webkit-keyframes slide-up-fade-in {
 0% {
  opacity:0;
  -webkit-transform:  translate(0px,40px)  ;
 }
 100% {
  opacity:1;
  -webkit-transform:  translate(0px,0px)  ;
 }
}

@-o-keyframes slide-up-fade-in {
 0% {
  opacity:0;
  -o-transform:  translate(0px,40px)  ;
 }
 100% {
  opacity:1;
  -o-transform:  translate(0px,0px)  ;
 }
}

@-ms-keyframes slide-up-fade-in {
 0% {
  opacity:0;
  -ms-transform:  translate(0px,40px)  ;
 }
 100% {
  opacity:1;
  -ms-transform:  translate(0px,0px)  ;
 }
} 


/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

  
/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.two {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.three {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}

.four {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

.five {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}

.six {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}

.seven {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}

.eight {
-webkit-animation-delay: 7.5s;
-moz-animation-delay: 7.5s;
animation-delay: 7.5s;
}



/*=== Animations start here  ===*/

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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


/*=== FADE IN DOWN ===*/
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
 }
@-webkit-keyframes fadeInDown {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes fadeInDown {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
} 

/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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


/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

/*=== FADE IN UP Big ===*/
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
  }
@-webkit-keyframes fadeInUpBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, 2000px, 0);
	transform: translate3d(0, 2000px, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	}
}
@keyframes fadeInUpBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, 2000px, 0);
	transform: translate3d(0, 2000px, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	}
} 

/*=== FADE IN DOWN Big ===*/
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInDownBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -2000px, 0);
	transform: translate3d(0, -2000px, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes fadeInDownBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -2000px, 0);
	transform: translate3d(0, -2000px, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
} 

/*=== FADE IN LEFT Big ===*/
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(-2000px, 0, 0);
	transform: translate3d(-2000px, 0, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes fadeInLeftBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(-2000px, 0, 0);
	transform: translate3d(-2000px, 0, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
} 

/*=== FADE IN RIGHT Big ===*/
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
  }
@-webkit-keyframes fadeInRightBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(2000px, 0, 0);
	transform: translate3d(2000px, 0, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes fadeInRightBig {
0% {
	opacity: 0;
	-webkit-transform: translate3d(2000px, 0, 0);
	transform: translate3d(2000px, 0, 0);
}
100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}

/* Demo Purpose Only*/
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #2ecc71;		
}