﻿@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;}
}
@font-face{font-family:'ecoicon';src:url('../fonts/ecoicons/ecoicon.eot');src:url('../fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),
url('../fonts/ecoicons/ecoicon.woff') format('woff'),
url('../fonts/ecoicons/ecoicon.ttf') format('truetype'),
url('../fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');font-weight:normal;font-style:normal;}
.hi-icon:hover{text-decoration:none;}
.hi-icon-wrap{text-align:center;margin:0 auto;padding:.5em;}
.hi-icon{
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 30px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #676767;
}
.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:32px;line-height:90px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;display:block;-webkit-font-smoothing:antialiased;}
.hi-icon-earth:before{content:"\e002";}
.hi-icon-clock:before{content:"\e004";}
.hi-icon-pencil:before{content:"\e00b";}
.hi-icon-user:before{content:"\e012";}
.hi-icon-effect-1 .hi-icon{background:rgba(241,98,51,0.1);background:#F8F8F8;-webkit-transition:background 0.2s, color 0.2s;-moz-transition:background 0.2s, color 0.2s;transition:background 0.2s, color 0.2s;border:1px solid #DDDDDD;}
.hi-icon-effect-1 .hi-icon:after{top:-7px;left:-7px;padding:7px;box-shadow:0 0 0 4px #DC3522;-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;text-decoration:none;}
.no-touch .hi-icon-effect-1a .hi-icon:hover{background:rgba(241,98,51,.3);color:#DC3522;border:1px solid rgba(220,53,34,0.0);}
.no-touch .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;}
