@font-face {

    font-family: 'Mono Social Icons Font';

    src: url('../fonts/monofont/MonoSocialIconsFont-1.10.eot');

    src: url('../fonts/monofont/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),

         url('../fonts/monofont/MonoSocialIconsFont-1.10.woff') format('woff'),

         url('../fonts/monofont/MonoSocialIconsFont-1.10.ttf') format('truetype'),

         url('../fonts/monofont/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');

    src: url('../fonts/monofont/MonoSocialIconsFont-1.10.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



.hi-icon-wrap {

	text-align: center;

	float:right;

	width:220px;

	margin:20px 20px 0 0;

}



.hi-icon {

	display: inline-block;

	font-size: 0px;

	cursor: pointer;

	margin: 4px 10px;

	width: 30px;

	height: 30px;

	border-radius: 50%;

	border-bottom:none;

	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: 'Mono Social Icons Font';

	speak: none;

	font-size: 30px;

	line-height: 30px;

	font-style: normal;

	font-weight: normal;

	font-variant: normal;

	text-transform: none;

	display: block;

	-webkit-text-rendering: optimizeLegibility;

    -moz-text-rendering: optimizeLegibility;

    -ms-text-rendering: optimizeLegibility;

    -o-text-rendering: optimizeLegibility;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-font-smoothing: antialiased;

    -ms-font-smoothing: antialiased;

    -o-font-smoothing: antialiased;

    font-smoothing: antialiased;

}



.hi-icon-mobile:before {

	content: "\e027";

}



.hi-icon-screen:before {

	content: "\e086";

}



.hi-icon-earth:before {

	content: "\e071";

}

.hi-icon-earth1:before {

	content: "\e052";

}







/* Effect 5 */

.hi-icon-effect-5 .hi-icon {

	box-shadow: 0 0 0 4px rgba(233,233,233,1);

	overflow: hidden;

	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

	transition: background 0.3s, color 0.3s, box-shadow 0.3s;

	color:#333; background-color:#e9e9e9;

}



.hi-icon-effect-5 .hi-icon:after {

	display: none;

}



.no-touch .hi-icon-effect-5 .hi-icon:hover {

	background: rgba(247,112,7,1);

	color: #fff;

	box-shadow: 0 0 0 8px rgba(247,247,247,0.3);

}

.no-touch .hi-icon-effect-5d .hi-icon:hover:before {

	-webkit-animation: toBottomFromTop 0.3s forwards;

	-moz-animation: toBottomFromTop 0.3s forwards;

	animation: toBottomFromTop 0.3s forwards;

}



@-webkit-keyframes toBottomFromTop {

	29% {

		-webkit-transform: translateY(100%);

	}

	30% {

		opacity: 0;

		-webkit-transform: translateY(-100%);

	}

	31% {

		opacity: 1;

	}

}

@-moz-keyframes toBottomFromTop {

	29% {

		-moz-transform: translateY(100%);

	}

	30% {

		opacity: 0;

		-moz-transform: translateY(-100%);

	}

	31% {

		opacity: 1;

	}

}

@keyframes toBottomFromTop {

	29% {

		transform: translateY(100%);

	}

	30% {

		opacity: 0;

		transform: translateY(-100%);

	}

	31% {

		opacity: 1;

	}

}