#body {
	padding: 0;
}

#home {
	display: block; position: relative;
}
#home::after {
	content: "";
	display: block; clear: both;
}

@-webkit-keyframes spin-full {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

#home .icon {
	display: block;
	border-radius: 50%; box-shadow: 0 0 0 3px #fff;
}
#home .icon img {
	display: block;
	width: 100%; height: 100%;
}

@media (min-width: 1024px) {
	.cwrap {
		display: block; position: relative; box-sizing: border-box;
		width: 100%; max-width: 880px; margin: 0 auto;
	}
}

#about {
	display: block; position: relative; box-sizing: border-box;
	padding: 2rem;
	background: rgba(255,255,255,0.7);
}
@media (min-width: 1024px) {
	#about {
		float: left;
		width: 13rem; margin: 5rem 0 0 2rem;
	}
}
#about p {
	margin-top: 0.6em;
}

#icons {
	display: block; position: relative; box-sizing: border-box;
	width: 100%; max-width: 560px; margin: 0 auto; padding: 32px;
}
@media (min-width: 1024px) {
	#icons {
		float: right;
		padding-top: 5rem; padding-bottom: 5rem;
	}
}
#icons::after {
	content: "";
	display: block; clear: both;
}
#icons .icon {
	display: block; position: relative;
	width: 64px;
}
@media (min-width: 400px) {
	#icons .icon {
		width: 96px;
	}
}
@media (min-width: 600px) {
	#icons .icon {
		width: 128px;
	}
}
#icons .smart .icon { width: 96px; }
@media (min-width: 400px) {
	#icons .smart .icon {
		width: 128px;
	}
}
@media (min-width: 600px) {
	#icons .smart .icon {
		width: 160px;
	}
}
#icons .fnc .icon {
	width: 48px;
}
@media (min-width: 400px) {
	#icons .fnc .icon {
		width: 64px;
	}
}
@media (min-width: 600px) {
	#icons .fnc .icon {
		width: 80px;
	}
}
#icons .icon .label {
	display: block; position: absolute;
	left: 50%; top: 50%;
	font-family: "Ubuntu Mono"; font-size: 1em; color: rgba(0,0,0,0.75); text-transform: uppercase; text-align: center; line-height: 0;
}
@media (min-width: 768px) {
	#icons .icon .label {
		font-size: 1.2em;
	}
}
#icons .icon .char {
	display: block; position: absolute; box-sizing: border-box;
	left: 0; top: 0; width: 2em; height: 2em; padding: 1em 0; margin: -1em 0 0 -1em;
}
#icons .smart {
	display: block; float: left;
}
#icons .fnc {
	display: block; float: right;
	margin-top: 24px;
}
@media (min-width: 400px) {
	#icons .fnc { margin-top: 32px; }
}
@media (min-width: 600px) {
	#icons .fnc { margin-top: 40px; }
}
#icons .prds {
	display: block; clear: left;
	margin: 0 -16px; padding-top: 32px;
}
#icons .prds::after {
	content: "";
	display: block; clear: both;
}
#icons .prd {
	display: block; box-sizing: border-box; float: left;
	width: 33.33%; margin-top: 32px; padding: 0 16px;
}
#icons .prd:nth-child(5n+4) {
	margin-left: 16.6666%;
}
#icons .prd .icon {
	display: block;
	margin: 0 auto;
}

#spin {
	display: block; position: absolute; overflow: hidden;
	left: 0; right: 0; top: 0; bottom: 0;
}
#arcs {
	display: block; position: absolute;
	left: 0; top: 0; width: 1024px; height: 1024px;
	border-radius: 512px;
}
#arcs .arc {
	display: block; position: absolute;
	left: 0; top: 0;
}
#arcs .arc.c1 { fill: rgba(0,0,0,0.07); }
#arcs .arc.c2 { fill: rgba(0,0,0,0.05); }
#arcs .arc.c3 { fill: rgba(0,0,0,0.03); }
@media (min-width: 768px) {
	#arcs .arc.s1 { -webkit-animation: spin-full 15s infinite linear; }
	#arcs .arc.s2 { -webkit-animation: spin-full 21s infinite linear reverse; }
	#arcs .arc.s3 { -webkit-animation: spin-full 33s infinite linear; }
	#arcs .arc.s4 { -webkit-animation: spin-full 37s infinite linear reverse; }
	#arcs .arc.s5 { -webkit-animation: spin-full 49s infinite linear; }
}

#draw {
	display: block; position: absolute;
	left: 0; top: 0;
}