/* --------------------------------------------

3: Transitions & Animations

----------------------------------------------- */
.slide-from-top-in {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.splash-transition {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.splash-transition-out {
  -webkit-transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: transform 1s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}






/* --------------------------------------------

17: The splash screen & animation

----------------------------------------------- */
#splash {
	-webkit-transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	z-index: 100000;
	background-color: #136de8;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
/* 17.1: The markup for the loadbar and logo */
}

#splash.hidden {display: none;}

#splash .loader {
position: absolute;
top: 45%;
width: 100%;
}

#splash .loader img {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}

#splash .loader img.visible {opacity: 1;}

#splash .loader .line {
	width: 0;
	height: 1px;
	background-color: #ffffff;
	/* 17.2: The splash animation */
	-webkit-animation: fadeInAnimation 2s;
	-moz-animation: fadeInAnimation 2s;
	-o-animation: fadeInAnimation 2s;
	animation: fadeInAnimation 2s;
}

@-webkit-keyframes fadeInAnimation {
  0% {width: 0;}
  80% {width: 100%;}
  100% {width: 0;}
}

@-moz-keyframes fadeInAnimation {
  0% {width: 0;}
  80% {width: 100%;}
  100% {width: 0;}
}

@keyframes fadeInAnimation {
  0% {width: 0;}
  80% {width: 100%;}
  100% {width: 0;}
}