/*
 *** ANIMATIONS ***
*/

.animate-left, .animate-right, .animate-fade, .animate-bottom,
.animate-left-slow, .animate-right-slow, .animate-fade-slow, .animate-bottom-slow{
  display: block;
}

/*FADE IN*/
.fade-in{
  animation: fade-in-key 1.5s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

.fade-in-slow{
  animation: fade-in-key 1.5s;
  animation-delay: 1s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

@-webkit-keyframes fade-in-key {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}
@-moz-keyframes fade-in-key {
   0%   { opacity: 0;}
  100% { opacity: 1;}
}
@-o-keyframes fade-in-key {
   0%   { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade-in-key {
   0%   { opacity: 0;}
  100% { opacity: 1;}
}

/*FROM BOTTOM*/
.from-bottom{
  animation: from-bottom-key 1.5s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

.from-bottom-slow{
  animation: from-bottom-key 1.5s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

@-webkit-keyframes from-bottom-key {
  0%   { opacity:0;transform: translate(0, 300px);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0, 0px);}
}
@-moz-keyframes from-bottom-key {
  0%   { opacity:0;transform: translate(0, 300px);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0, 0px);}
}
@-o-keyframes from-bottom-key {
  0%   { opacity:0;transform: translate(0, 300px);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0, 0px);}
}
@keyframes from-bottom-key {
  0%   { opacity:0;transform: translate(0, 300px);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0, 0px);}
}

/*FROM RIGHT*/
.from-right{
  animation: from-right-key 1.5s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

.from-right-slow{
  animation: from-right-key 1.5s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

@-webkit-keyframes from-right-key {
  0%   { opacity:0;transform: translate(300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@-moz-keyframes from-right-key {
  0%   { opacity:0;transform: translate(300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@-o-keyframes from-right-key {
  0%   { opacity:0;transform: translate(300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@keyframes from-right-key {
  0%   { opacity:0;transform: translate(300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}

/*FROM LEFT*/
.from-left{
  animation: from-left-key 1.5s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

.from-left-slow{
  animation: from-left-key 1.5s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate; /* or: normal */
  animation-timing-function: lenear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-fill-mode: forwards; /* or: backwards, both, none */
}

@-webkit-keyframes from-left-key {
  0%   { opacity:0;transform: translate(-300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@-moz-keyframes from-left-key {
  0%   { opacity:0;transform: translate(-300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@-o-keyframes from-left-key {
  0%   { opacity:0;transform: translate(-300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}
@keyframes from-left-key {
  0%   { opacity:0;transform: translate(-300px, 0);}
  33% { opacity:.5;}
  66% { opacity:1;}
  100% { opacity:1;transform: translate(0px, 0);}
}