@import "http://fonts.googleapis.com/css?family=Lato:300,400,700";
	@font-face {
	font-family:codropsicons;
	src:url(../fonts/codropsicons/codropsicons.eot);
	src:url(../fonts/codropsicons/codropsicons.eot?#iefix) format('embedded-opentype'),url(../fonts/codropsicons/codropsicons.woff) format('woff'),url(../fonts/codropsicons/codropsicons.ttf) format('truetype'),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format('svg');
	font-weight:400;
	font-style:normal
}



.container>header {
	margin:0 auto;
	padding:2em
}
.container>header {
	text-align:center;
	background:rgba(0,0,0,.01)
}
.container>header h1 {
	font-size:2.625em;
	line-height:1.3;
	margin:0;
	font-weight:300
}
.container>header span {
	display:block;
	font-size:60%;
	opacity:.8;
	padding:0 0 .6em .1em
}
.codrops-top {
	background:#fff;
	background:rgba(255,255,255,.8);
	text-transform:uppercase;
	width:100%;
	font-size:.69em;
	line-height:2.2
}
.codrops-top a {
	padding:0 1em;
	letter-spacing:.1em;
	color:#6b7381;
	display:inline-block
}
.codrops-top a:hover {
	color:#424b5a;
	background:#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:400;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased
}
.codrops-icon-drop:before {
	content:"\e001"
}
.codrops-icon-prev:before {
	content:"\e004"
}
.codrops-demos {
	padding-top:1em;
	font-size:.9em
}
.codrops-demos a {
	display:inline-block;
	margin:.5em;
	padding:.7em 1.1em;
	border:3px solid #6b7381;
	color:#6b7381;
	font-weight:700
}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover {
	opacity:.6
}
@media screen and (max-width:25em) {
	.codrops-icon span {
	display:none
}
}