@font-face {
	font-family: 'fontIcon';
	src: url("../fonts/icons/icons.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* Set font line-height and font-size wherever its used */
[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'fontIcon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	background: none;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-gear:before {
	content: "\e901";
}

.icon-gear.using {
	animation: rotation 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.icon-home:before {
	content: "\e900";
}

.icon-close:before {
	content: "\e90a";
}

.icon-scene {
	position: relative
}

.icon-scene:before {
	content: "\e902";
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	transition: 1000ms text-shadow ease-out;
}

.icon-scene.using:before {
	text-shadow: 0px -1px 2px #0033ff;
}

.icon-scene:after {
	position: absolute;
	width: 15%;
	height: 15%;
	content: "";
	background: #ffee00;
	z-index: 1;
	left: 50%;
	top: 60%;
	border-radius: 50%;
	transition: 500ms top ease-out;
}

.icon-scene.using:after {
	background: #0033ff;
	top: 25%;
	animation: bloom 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

@keyframes bloom {
	0% {
		box-shadow: 0px 0px 0px;
	}

	50% {
		box-shadow: 0px 0px 10px;
	}

	100% {
		box-shadow: 0px 0px 0px;
	}
}

.icon-info:before {
	content: "\e905"
}

.icon-file:before {
	content: "\e903"
}

.icon-download:before {
	content: "\e906"
}

.icon-menu:before {
	content: "\e907"
}

.icon-fullscreen:before {
	content: "\e908"
}

.icon-controls:before {
	content: "\e909"
}

.icon-github {
	background-image: url(../images/icons/octocat.png) !important;
}

[class^="icon-with-text"]::after,
[class*=" icon-with-text"]::after {
	font-size: 21px;
	color: black;
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translate(-50%, 0);
	font-family: 'ostrich-rounded';
}

[class^="icon-with-text"]::before,
[class*=" icon-with-text"]::before {
	position: absolute;
	left: 50%;
	transform: translate(-50%, calc(-50% - 10px));
	top: 50%;
	font-size: 0.85em;
}

.icon-text-svg::after {
	content: "svg"
}

.icon-text-json::after {
	content: "json"
}

.icon-text-png::after {
	content: "png"
}

.icon-text-stl::after {
	content: "stl"
}