@font-face {
	font-family: 'codropsicons';
	src:url('//cso.org/assets/fonts/cso-fonts/codropsicons.eot');
	src:url('//cso.org/assets/fonts/cso-fonts/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('//cso.org/assets/fonts/cso-fonts/codropsicons.woff') format('woff'),
		url('//cso.org/assets/fonts/cso-fonts/codropsicons.ttf') format('truetype'),
		url('//cso.org/assets/fonts/cso-fonts/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: lighter;
}
.gn-container > header,
.codrops-top {
	background-color: #fff;
	color: #070707;
}

.gn-container > header {
	margin: 0 auto;
	padding: 12em 2em;
	padding-left: 320px; 
	background: rgba(0,0,0,0.05);
}

.gn-container > header a {
	color: #070707; 
	text-decoration: none;
	outline: none;
}

.gn-container > header a:hover, .gn-container > header a:focus {
	color: #fff; 
	background-color: #070707;
	text-decoration: none; 
}

.gn-container > header h1 {
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0;
	font-weight: normal;
}

.gn-container > header span {
	display: block;
	font-size: 55%;
	color: #74818e;
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: inherit;
}

.codrops-top a {
	text-decoration: none;
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #070707; /* changed was 888 */ 
	display: inline-block;
	
}

.codrops-top a:hover, .codrops-top a:focus {
	background: rgba(0,0,0,0.95);
	color: #fff;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}
.codrops-icon-asterisk:before {
  font-family: 'codropsicons';
  content: "\2a";
}
.codrops-icon-plus:before {
  font-family: 'codropsicons';
  content: "\2b";
}
.codrops-icon-minus:before {
  font-family: 'codropsicons';
  content: "\2212";
}
.codrops-icon-cloud:before {
  content: "\2601";
}
.codrops-icon-envelope:before {
  content: "\2709";
}
.codrops-icon-music:before {
  content: "\e002";
}
.codrops-icon-star:before {
  content: "\e006";
}
.codrops-icon-star-empty:before {
  content: "\e007";
}
.codrops-icon-user:before {
  content: "\e008";
}
.codrops-icon-ok:before {
  content: "\e013";
}
.codrops-icon-remove:before {
  content: "\e014";
}
.codrops-icon-zoom-in:before {
  font-family: 'codropsicons';
  content: "\e015";
}
.codrops-icon-zoom-out:before {
  font-family: 'codropsicons';
  content: "\e016";
}
.codrops-icon-off:before {
  font-family: 'codropsicons';
  content: "\e017";
}
.codrops-icon-cog:before {
  font-family: 'codropsicons';
  content: "\e019";
}
.codrops-icon-home:before {
  font-family: 'codropsicons';
  content: "\e021";
}
.codrops-icon-file:before {
  font-family: 'codropsicons';
  content: "\e022";
}
.codrops-icon-time:before {
  font-family: 'codropsicons';
  content: "\e023";
}
.codrops-icon-download:before {
  font-family: 'codropsicons';
  content: "\e026";
}
.codrops-icon-upload:before {
  font-family: 'codropsicons';
  content: "\e027";
}
.codrops-icon-inbox:before {
  font-family: 'codropsicons';
  content: "\e028";
}
.codrops-icon-play-circle:before {
  font-family: 'codropsicons';
  content: "\e029";
}
.codrops-icon-list-alt:before {
  content: "\e032";
}
.codrops-icon-picture:before {
  content: "\e060";
}
.codrops-icon-map-marker:before {
  content: "\e062";
}
.codrops-icon-share:before {
  content: "\e066";
}
.codrops-icon-check:before {
  content: "\e067";
}
.codrops-icon-play:before {
  content: "\e072";
}
.codrops-icon-chevron-left:before {
  font-family: 'codropsicons';
  content: "\e079";
}
.codrops-icon-chevron-right:before {
  font-family: 'codropsicons';
  content: "\e080";
}
.codrops-icon-plus-sign:before {
  font-family: 'codropsicons';
  content: "\e081";
}
.codrops-icon-minus-sign:before {
  font-family: 'codropsicons';
  content: "\e082";
}
.codrops-icon-question-sign:before {
  font-family: 'codropsicons';
  content: "\e085";
}
.codrops-icon-info-sign:before {
  font-family: 'codropsicons';
  content: "\e086";
}
.codrops-icon-arrow-left:before {
  font-family: 'codropsicons';
  content: "\e091";
}
.codrops-icon-arrow-right:before {
  font-family: 'codropsicons';
  content: "\e092";
}
.codrops-icon-arrow-up:before {
  font-family: 'codropsicons';
  content: "\e093";
}
.codrops-icon-arrow-down:before {
  font-family: 'codropsicons';
  content: "\e094";
}
.codrops-icon-share-alt:before {
  font-family: 'codropsicons';
  content: "\e095";
}
.codrops-icon-exclamation-sign:before {
  content: "\e101";
}
.codrops-icon-gift:before {
  content: "\e102";
}
.codrops-icon-warning-sign:before {
  content: "\e107";
}
.codrops-icon-calendar:before {
  font-family: 'codropsicons';
  content: "\e109";
}
.codrops-icon-chevron-up:before {
  font-family: 'codropsicons';
  content: "\e113";
}
.codrops-icon-chevron-down:before {
  font-family: 'codropsicons';
  content: "\e114";
}
.codrops-icon-shopping-cart:before {
  font-family: 'codropsicons';
  content: "\e116";
}
.codrops-icon-bell:before {
  content: "\e123";
}
.codrops-icon-thumbs-up:before {
  content: "\e125";
}
.codrops-icon-thumbs-down:before {
  content: "\e126";
}
.codrops-icon-circle-arrow-right:before {
  font-family: 'codropsicons';
  content: "\e131";
}
.codrops-icon-circle-arrow-left:before {
  font-family: 'codropsicons';
  content: "\e132";
}
.codrops-icon-circle-arrow-up:before {
  font-family: 'codropsicons';
  content: "\e133";
}
.codrops-icon-circle-arrow-down:before {
  font-family: 'codropsicons';
  content: "\e134";
}
.codrops-icon-globe:before {
  font-family: 'codropsicons';
  content: "\e135";
}
.codrops-icon-wrench:before {
  font-family: 'codropsicons';
  content: "\e136";
}
.codrops-icon-link:before {
  font-family: 'codropsicons';
  content: "\e144";
}
.codrops-icon-phone:before {
  font-family: 'codropsicons';
  content: "\e145";
}
.codrops-icon-unchecked:before {
  font-family: 'codropsicons';
  content: "\e157";
}
.codrops-icon-expand:before {
  font-family: 'codropsicons';
  content: "\e158";
}
.codrops-icon-collapse-down:before {
  font-family: 'codropsicons';
  content: "\e159";
}
.codrops-icon-collapse-up:before {
  font-family: 'codropsicons';
  content: "\e160";
}
.codrops-icon-log-in:before {
  font-family: 'codropsicons';
  content: "\e161";
}
.codrops-icon-log-out:before {
  font-family: 'codropsicons';
  content: "\e163";
}
.codrops-icon-new-window:before {
  font-family: 'codropsicons';
  content: "\e164";
}
.codrops-icon-open:before {
  font-family: 'codropsicons';
  content: "\e167";
}
.codrops-icon-credit-card:before {
  content: "\e177";
}
.codrops-icon-expand:before {
  font-family: 'codropsicons';
  content: "\e158";
}
.codrops-icon-log-in:before {
  content: "\e161";
}
.codrops-icon-drop:before {
	font-family: 'codropsicons';
	content: "\e001";
}
.codrops-icon-new-window:before {
  font-family: 'codropsicons';
  content: "\e164";
}
.codrops-icon-cog:before {
	font-family: 'codropsicons';
	content: "\e019";
}
.codrops-icon-prev:before {
	font-family: 'codropsicons';
	content: "\e004";
}
.codrops-icon-next:before {
	font-family: 'codropsicons';
	content: "\e002";
}

/* Demo Buttons Style */
.codrops-demos {
	padding-top: 1em;
	font-size: 0.9em;
}

.codrops-demos a {
	text-decoration: none;
	outline: none;
	display: inline-block;
	margin: 0.5em;
	padding: 0.7em 1.1em;
	border: none; /* changed from 1px solid #ccc - what does this affect? */ 
	color: #ccc;
	font-weight: normal;
	
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	border-color: #363636;
	color: #363636;
}

@media screen and (max-width: 925px) {
	.gn-container > header {
		margin: 0 auto;
		padding: 50px 20px;
		font-size: 70%;
		text-align: right;
	}
}

@media screen and (max-width: 740px) {
	.codrops-icon span {
		display: none;
	}

}