@keyframes slideInFromLeft {
  0% {
    transform: translateX(+400px);
	opacity:0;
  }
  100% {
    transform: translateX(0);
	opacity:1;
  }
}
@keyframes slideInFromTop {
  0% {
    transform: translateY(-400px);
	opacity:0;
  }
  100% {
    transform: translateX(0);
	opacity:1;
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(+400px);
	opacity:0;
  }
  100% {
    transform: translateX(0);
	opacity:1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(-400px);
	opacity:0;
  }
  100% {
    transform: translateX(0);
	opacity:1;
  }
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	width: 100%;
	background-color:black;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.left-fadein{
	opacity:0;
	transition: opacity 3s ease;
}
.left-fadein-active{
	opacity:1;
}

.responsive-hidden{
	transform:translateX(100%);
	opacity:0;
	transition: 	transform 1s,
					opacity 1s ease;
}

.slidein-active{
	transform:none;
	opacity:1;
}

/*Front page load fade in*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0;  /* make things invisible upon start */
 -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 
 -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 
 -webkit-animation-duration:3s;
 -moz-animation-duration:3s;
 animation-duration:3s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
/**/
