/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.floating-header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 4em;
	z-index: 500;
}

.front-page .floating-header {
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0);
	animation-name: headerOut;
	animation-duration: 0.5s;
}


html:not([data-scroll='0']) {
.front-page .floating-header {
    background-color: white;	    
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
	animation-name: headerIn;
  	animation-duration: 0.8s;
  }
}


@keyframes headerIn {
  0%   {	
		background-color: rgba(255, 255, 255, 0);
		box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
	}
  100% {	
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
	}
}


@keyframes headerOut {
  0%   {	
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
	}
  100% {	
		background-color: rgba(255, 255, 255, 0);
		    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0);
	}
}