#header {
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		background: #fff;
		background: rgba(255,255,255,0.95);
		height: 3em;
		line-height: 3em;
		box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
	}
	
	body {
		padding-top: 3em;
	}

	
	#nav {
		position: absolute;
		right: 0.5em;
		top: 0;
		height: 3em;
		line-height: 3em;
	}

		#nav ul {
			margin: 0;
		}

			#nav ul li {
				display: inline-block;
				margin-left: 0.5em;
				font-size: 0.9em;
			}
			
				#nav ul li a {
					display: block;
					color: inherit;
					text-decoration: none;
					height: 3em;
					line-height: 3em;
					padding: 0 0.5em 0 0.5em;
					outline: 0;
					background-color:#ffffff;
				}

				#nav ul li a:hover {
					color: #ffffff;
					background-color:#0B5A9D;
				}


			/* I wanted to center my loader */
			#cycle-loader {
				height:32px;
				left:50%;
				margin:-8px 0 0 -8px;
				position:absolute;
				top:50%;
				width:32px;
				z-index:999;
			}
			
			/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
			#maximage {
				display:none;/* Only use this if you fade it in again after the images load */
				position:fixed !important;
			}
			
			/*Set my gradient above all images*/
			#gradient {
				left:0;
				height:100%;
				position:absolute;
				top:0;
				width:100%;
				z-index:999;
			}
			
			/*Set my logo in bottom left*/
			#logo {
				bottom:30px;
				height:auto;
				left:30px;
				position:absolute;
				width:20%;
				z-index:1000;
			}
			#logo img {
				width:100%;
			}
			
			#arrow_left, #arrow_right {
				bottom:30px;
				height:67px;
				position:absolute;
				right:30px;
				width:36px;
				z-index:1000;
			}
			#arrow_left {
				right:86px;
			}
			
			#arrow_left:hover, #arrow_right:hover {
				bottom:29px;
			}
			#arrow_left:active, #arrow_right:active {
				bottom:28px;
			}
			
			a {color:#666;text-decoration:none;}
			a:hover {text-decoration:underline;}
			
			.in-slide-content { 
				color:#333;
				float:right;
				font-family:'Helvetica Neue', helvetica;
				font-size:30px;
				font-weight:bold;
				right:0;
				margin:40px auto;
				padding:20px;
				position:absolute;
				top:100px;
				width:20%;
				z-index:9999; /* Show above .gradient */
				-webkit-font-smoothing:antialiased;
			}

			.in-slide-content img { 
				width:100%;
				height:100%;
			}
			.light-text {color:#ddd;text-shadow: 0 1px 0 #666;}
			.smaller-text {font-size:30px;}
			.youtube-video, video {
				left:0;
				position:absolute;
				top:0;
			}


@media screen and (max-width: 640px) {

			#logo {
				bottom:30px;
				height:auto;
				left:30px;
				position:absolute;
				width:50%;
				z-index:1000;
			}


			.in-slide-content { 
				width:50%;

			}

			.in-slide-content img { 
				width:100%;
				height:100%;
			}

}