.the-icons {
	  font-size: 14px;
	  line-height: 28px;
	}
	.the-icons i{
	  font-size: 16px;
	}
	.codesOn .i-name {
	  display: none;
	}
	.codesOn .i-code {
	  display: inline;
	}
	.i-code {
	  display: none;
	  }

.box1 {
		font-size: 16px;
		display: inline-block;
		width: 30%;
		padding: .25em .5em;
		margin: 20px 10px 0 0;
	}
	.fs1 {
		font-size: 2em;
	}
	.glyph {
		float: left;
		text-align: center;
		padding: .75em;
		margin: .4em 1.5em .75em 0;
		width: 6em;
		text-shadow: none;
	}
	
	.glyph input {
		font-family: consolas, monospace;
		font-size: 12px;
		width: 100%;
		text-align: center;
		border: 0;
		box-shadow: 0 0 0 1px #ccc;
		padding: .2em;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
	}

.font-icon-list {
	  padding: 20px 0px 0px 0px;
	  margin-bottom: 20px; }
	
	.font-icon-list:hover {
	  cursor: pointer; }
	
	.font-icon-detail {
	  text-align: center; }
	
	.font-icon-detail span:first-child {
	  display: inline-block;
	  transition: color 150ms linear, background 150ms linear, font-size 150ms linear, width 150ms;
	  padding: 10px 0px;
	  width: 70px;
	  font-size: 48px;
	  color: #1a1a1a;
	  border: 1px solid #eaeaea;
	  border-radius: 3px; }
	
	.font-icon-name {
	  font-size: 13px;
	  margin-top: 15px;
	  display: block;
	  text-align: center;
	  width: 100%;
	  padding: 0;
	  border: 0; }
	
	.font-icon-name:focus, .font-icon-name:active {
	  outline: none; }
	
	.font-icon-code {
	  max-height: 0;
	  overflow: hidden;
	  text-align: center;
	  opacity: 0;
	  transition: max-height 200ms linear, opacity 200ms linear; }
	
	.font-icon-code.show {
	  max-height: 200px;
	  opacity: 1; }
	
	.code-value, .unicode, .unicode-text {
	  background: none;
	  text-align: center;
	  border: none;
	  color: #a0a0a0; }
	
	.code-value {
	  display: block;
	  width: 100%; }
	
	.unicode, .unicode-text {
	  color: #a0a0a0; }
	
	.unicode {
	  float: left;
	  font-family: "Pe-icon-7-stroke";
	  text-align: right;
	  width: 38%;
	  padding-right: 5px; }
	
	.unicode-text {
	  text-align: left;
	  float: left;
	  display: inline-block;
	  width: 100px;
	  border: none; }
	
	.unicode-text:focus,
	.unicode-text:active {
	  outline: none; }
	
	.font-icon-list:hover .font-icon-name,
	.font-icon-list:hover .code-value,
	.font-icon-list:hover .unicode,
	.font-icon-list:hover .unicode-text,
	.font-icon-detail.zeroclipboard-is-hover .font-icon-name,
	.font-icon-detail.zeroclipboard-is-hover + .font-icon-code .code-value,
	.font-icon-detail.zeroclipboard-is-hover + .font-icon-code .unicode,
	.font-icon-detail.zeroclipboard-is-hover + .font-icon-code .unicode-text {
	  cursor: text;
	  color: #1a1a1a; }
	.font-icon-list:hover .font-icon-detail span:first-child,
	.font-icon-detail.zeroclipboard-is-hover span:first-child {
	  color: #fff;
	  background: #1a1a1a; }
	.font-icon-name::-moz-selection,
	.code-value::-moz-selection,
	.unicode::-moz-selection,
	.unicode-text::-moz-selection,
	.font-icon-name::-moz-selection {
	  background: #aadce2;
	  color: #1a1a1a; }
	
	.font-icon-name::selection,
	.code-value::selection,
	.unicode::selection,
	.unicode-text::selection,
	.font-icon-name::selection {
	  background: #aadce2;
	  color: #1a1a1a; }
	
	.font-icon-name::-moz-selection,
	.code-value::-moz-selection,
	.unicode::-moz-selection,
	.unicode-text::-moz-selection,
	.font-icon-name::-moz-selection {
	  background: #aadce2;
	  color: #1a1a1a; }


#icon_pack_4 i{ font-size:60px;}
		#icon_pack_4 >div{ text-align:center; margin-bottom:30px;}