.hi-icon-wrap {text-align: center;padding: 2em 0 3em;}

.hi-icon {display: inline-block;font-size: 0px;cursor: pointer;margin: 15px 40px;width: 170px;height: 170px;border-radius: 50%;	text-align: center;	position: relative;
z-index: 1;	color: #fff;}

.hi-icon:after {pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: 50%;content: '';-webkit-box-sizing: content-box; -moz-box-sizing: content-box;box-sizing: content-box;}

.hi-icon:before {font-family: 'ecoicon';speak: none;font-size: 86px;line-height: 166px;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;display: block;-webkit-font-smoothing: antialiased;}

.hi-icon-mobile:before {content: "\e009";}
.hi-icon-screen:before {content: "\e00a";}
.hi-icon-earth:before {content: "\e002";}
.hi-icon-support:before {content: "\e000";}
.hi-icon-locked:before {content: "\e001";}
.hi-icon-cog:before {content: "\e003";}
.hi-icon-clock:before {content: "\e004";}
.hi-icon-videos:before {content: "\e005";}
.hi-icon-list:before {content: "\e006";}
.hi-icon-refresh:before {content: "\e007";}
.hi-icon-images:before {content: "\e008";}
.hi-icon-pencil:before {content: "\e00b";}
.hi-icon-link:before {content: "\e00c";}
.hi-icon-mail:before {content: "\e00d";}
.hi-icon-location:before {content: "\e00e";}
.hi-icon-archive:before {content: "\e00f";}
.hi-icon-chat:before {content: "\e010";}
.hi-icon-bookmark:before {content: "\e011";}
.hi-icon-user:before {content: "\e012";}
.hi-icon-contract:before {content: "\e013";}
.hi-icon-star:before {content: "\e014";}

/* Effect 1 */
.hi-icon-effect-1 .hi-icon {background: rgba(255,255,255,0.1);-webkit-transition: background 0.2s, color 0.2s;-moz-transition: background 0.2s, color 0.2s;	transition: background 0.2s, color 0.2s;}

.hi-icon-effect-1 .hi-icon:after {top: -7px;left: -7px;padding: 7px;box-shadow: 0 0 0 4px #fff;-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;-webkit-transform: scale(.8);-moz-transition: -moz-transform 0.2s, opacity 0.2s;-moz-transform: scale(.8);-ms-transform: scale(.8);	transition: transform 0.2s, opacity 0.2s;	transform: scale(.8);opacity: 0;}

/* Effect 1a */
.hi-icon-effect-1a .hi-icon:hover {background: rgba(255,255,255,1);color: #3195c9;}

.hi-icon-effect-1a .hi-icon:hover:after {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;}

@import url(http://fonts.useso.com/css?family=Lato:300,400,700);

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.no-touch a:hover,.no-touch a:active {color: #fff;font-weight: bold;}
.container {height: 100%;position: relative;width:1170px\9;}
.container > section {min-height: 100%;	margin: 0 auto;	padding: 20em 3em;}
.touch .container > section {padding: 0;min-height: 0;}
.container > header {margin: 0 auto;padding: 2em 1em 2em;position: fixed;top: 0;left: 0;width: 100%;text-align: center;	background: #fff;z-index: 999999;	-webkit-backface-visibility: hidden;}
.touch .container > header {position: relative;}
.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: 0.6;padding: 0 0 0.6em 0.1em;}
.container > section p {color: #fff;text-align: center;padding: 1em;margin: 0;}
.codrops-top {background: #fff;background: rgba(255, 255, 255, 0.6);text-transform: uppercase;width: 100%;font-size: 0.69em;line-height: 2.2;position: fixed;top: 0;
left: 0;width: 100%;z-index: 9999999;}
.codrops-top a {padding: 0 1em;letter-spacing: 0.1em;display: inline-block;}
.codrops-top a:hover {background: rgba(255,255,255,0.95);color: #777;}
.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;	-webkit-font-smoothing: antialiased;}
.codrops-icon-drop:before {content: "\e001";}
.codrops-icon-prev:before {content: "\e004";}
.codrops-icon-archive:before {content: "\e002";}
.codrops-icon-next:before {content: "\e000";}
.codrops-icon-about:before {content: "\e003";}
.codrops-demos {padding-top: 1em;font-size: 0.9em;}
.touch .codrops-demos {display: none;}
.codrops-demos a {display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #ddd;font-weight: 700;}
.codrops-demos a:hover {opacity: 0.6;}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover {border: 3px solid #aaa;opacity: 1;color: #aaa;}
#set-2 {background: #eea303;}
#set-3 {background: #f06060;}
#set-4 {background: #0e83cd;}
#set-5 {background: #702fa8;}
#set-6 {background: #64bb5d;}
#set-7 {background: #d54f30;}
#set-8 {background: #3851bc;}
#set-9 {background: #96a94b;}
@media screen and (max-width: 800px) {
	.hi-icon {margin: 15px !important;}
	.container > section {padding: 20em 1em;}
}

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

}