@import 'https://fonts.googleapis.com/css?family=Montserrat';
* /* {
	box-sizing: border-box;
} */
main {
	/* font-family: 'Montserrat', arial, sans-serif;
	margin: 0 auto;
	width: 1000px;
	max-width: 100%;
	padding: 1em;
	perspective: 1000px; */
	.top {
		border-bottom: 4px solid #52A949;
		h1 {
			margin: 0;
		}
	}
	h3 {
		margin-bottom: 0;
	}
	a {
		color: #00ade9;
		text-decoration: none;
		transition: all .2s cubic-bezier(.36,.07,.57,.99);
	}
	section {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: .5em 1em 1em;
		font-size: 2rem;
		border-bottom: 2px solid #52A949;
		i {
			transform: scale(1);
			display: block;
			margin: .25em .5em;
			transition: all .2s cubic-bezier(.36,.07,.57,.99);
			color: #aaa;
		}
	}
	.single-icon i:hover {
		transform: scale(1.5);
		color: #1813e4;
	}
	.multi-icon .set {
		position: relative;
		height: 40px;
		width: 60px;
		i {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			&:first-of-type {
				opacity: 1;
			}
		}
		&:hover i {
			transform: scale(1.5);
			color: #1813e4;
		}
	}
}
.fa-phone:hover {
	animation: phone 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-arrow-right:hover {
	animation: arrow-right .5s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-arrows-alt:hover {
	animation: arrows-alt 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-expand:hover {
	animation: expand .5s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-envelope-o:hover {
	animation: envelope-o 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.email:hover {
	animation: email 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-refresh:hover {
	animation: refresh 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-heart:hover {
	animation: heart .5s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-undo:hover {
	animation: undo 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-italic:hover {
	animation: italic 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-cog:hover {
	animation: cog 5s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-wrench:hover {
	transform-origin: 79% 26%;
	animation: wrench 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-mouse-pointer:hover {
	animation: mouse-pointer 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-magic:hover {
	animation: magic 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-lock:hover {
	animation: lock 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-unlock:hover {
	transform-origin: 75% 25%;
	animation: unlock 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-hourglass:hover {
	animation: hourglass 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-eraser:hover {
	animation: eraser 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-rocket:hover {
	animation: rocket 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.fa-times:hover {
	animation: times 1s cubic-bezier(.36,.07,.57,.99) infinite;
}
.battery-fill:hover {
	.fa-battery-quarter {
		animation: battery 2s .4s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-half {
		animation: battery 2s .8s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-three-quarters {
		animation: battery 2s 1.2s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-full {
		animation: battery 2s 1.6s cubic-bezier(.36,.07,.57,.99) infinite;
	}
}
.battery-drain:hover {
	.fa-battery-quarter {
		animation: battery 2s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-half {
		animation: battery 2s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-three-quarters {
		animation: battery 2s cubic-bezier(.36,.07,.57,.99) infinite;
	}
	.fa-battery-full {
		animation: battery 2s cubic-bezier(.36,.07,.57,.99) infinite;
	}
}


@keyframes phone {
	0% {
		transform: scale(1.5);
	}
	20% {
		transform: scale(2);
	}
	30% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(2);
	}
	100% {
		transform: scale(1.5);
	}
}

@keyframes envelope-o {
	0% {
		transform: scale(1.5);
	}
	20% {
		transform: scale(2);
	}
	30% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(2);
	}
	100% {
		transform: scale(1.5);
	}
}

@keyframes email {
	0% {
		transform: scale(1.5);
	}
	20% {
		transform: scale(2);
	}
	30% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(2);
	}
	100% {
		transform: scale(1.5);
	}
}



@keyframes arrow-right {
	0% {
		transform: scale(1.5) translateX(0);
	}
	33% {
		transform: scale(1.5) translateX(-5px);
	}
	66% {
		transform: scale(1.5) translateX(5px);
	}
	100% {
		transform: scale(1.5) translateX(0);
	}
}
@keyframes arrows-alt {
	0% {
		transform: scale(1.5) translate(0, 0);
	}
	20% {
		transform: scale(1.5) translate(-5px, 5px);
	}
	40% {
		transform: scale(1.5) translate(-5px, -5px);
	}
	60% {
		transform: scale(1.5) translate(5px, 5px);
	}
	80% {
		transform: scale(1.5) translate(5px, -5px);
	}
	100% {
		transform: scale(1.5) translate(0, 0);
	}
}
@keyframes expand {
	0% {
		transform: scale(1.5) translate(0, 0);
	}
	25% {
		transform: scale(1.5) translate(-5px, 5px);
	}
	50% {
		transform: scale(2) translate(0, 0);
	}
	75% {
		transform: scale(1.5) translate(5px, -5px);
	}
	100% {
		transform: scale(1.5) translate(0, 0);
	}
}
@keyframes refresh {
	from {
		transform: scale(1.5) rotate(0);
	}
	to {
		transform: scale(1.5) rotate(360deg);
	}
}
@keyframes heart {
	0% {
		transform: scale(1.5);
	}
	20% {
		transform: scale(2);
	}
	30% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(2);
	}
	100% {
		transform: scale(1.5);
	}
}
@keyframes undo {
	0% {
		transform: scale(1.5) translateX(0) rotate(0);
	}
	33% {
		transform: scale(1.5) translateX(10px) rotate(0);
	}
	66% {
		transform: scale(1.5) translateX(-10px) rotate(-360deg);
	}
	100% {
		transform: scale(1.5) translateX(0) rotate(-360deg);
	}
}
@keyframes italic {
	0% {
		transform: scale(1.5) skewX(0);
	}
	50% {
		transform: scale(1.5) skewX(12deg);
	}
	100% {
		transform: scale(1.5) skewX(0);
	}
}

@keyframes cog {
	0% {
		transform: scale(1.5) rotate(0);
	}
	10% {
		transform: scale(1.5) rotate(45deg);
	}
	17% {
		transform: scale(1.5) rotate(45deg);
	}
	20% {
		transform: scale(1.5) rotate(90deg);
	}
	27% {
		transform: scale(1.5) rotate(90deg);
	}
	30% {
		transform: scale(1.5) rotate(135deg);
	}
	37% {
		transform: scale(1.5) rotate(135deg);
	}
	40% {
		transform: scale(1.5) rotate(180deg);
	}
	47% {
		transform: scale(1.5) rotate(180deg);
	}
	50% {
		transform: scale(1.5) rotate(225deg);
	}
	57% {
		transform: scale(1.5) rotate(225deg);
	}
	60% {
		transform: scale(1.5) rotate(270deg);
	}
	67% {
		transform: scale(1.5) rotate(270deg);
	}
	70% {
		transform: scale(1.5) rotate(315deg);
	}
	77% {
		transform: scale(1.5) rotate(315deg);
	}
	80% {
		transform: scale(1.5) rotate(360deg);
	}
	100% {
		transform: scale(1.5) rotate(360deg);
	}
}
@keyframes wrench {
	0% {
		transform: scale(1.5) rotate(0);
	}
	20% {
		transform: scale(1.5) rotate(30deg);
	}
	30% {
		transform: scale(1.5) rotate(-20deg);
	}
	50% {
		transform: scale(1.5) rotate(30deg);
	}
	60% {
		transform: scale(1.5) rotate(-20deg);
	}
	100% {
		transform: scale(1.5) rotate(0);
	}
}
@keyframes mouse-pointer {
	0% {
		transform: scale(1.5);
	}
	20% {
		transform: scale(1.5);
	}
	22.5% {
		transform: scale(1.2);
	}
	32.5% {
		transform: scale(1.2);
	}
	35% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1.5);
	}
}

@keyframes magic {
	0% {
		transform: scale(1.5) translate(0, 0) rotate(0);
	}
	10% {
		transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
	}
	20% {
		transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
	}
	30% {
		transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
	}
	40% {
		transform: scale(1.5) translate(0, 0) rotate(-20deg);
	}
	50% {
		transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
	}
	60% {
		transform: scale(1.5) translate(10px, 0) rotate(0);
	}
	70% {
		transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
	}
	100% {
		transform: scale(1.5) translate(0, 0) rotate(0);
	}
}
@keyframes lock {
	0% {
		transform: scale(1.5) translateY(0);
	}
	20% {
		transform: scale(1.5) translateY(-5px);
	}
	30% {
		transform: scale(1.5) translateY(5px);
	}
	50% {
		transform: scale(1.5) translateY(-5px);
	}
	60% {
		transform: scale(1.5) translateY(5px);
	}
	100% {
		transform: scale(1.5) translateY(0);
	}
}
@keyframes unlock {
	0% {
		transform: scale(1.5) rotate(-15deg);
	}
	15% {
		transform: scale(1.5) rotate(-40deg);
	}
	30% {
		transform: scale(1.5) rotate(5deg);
	}
	45% {
		transform: scale(1.5) rotate(-30deg);
	}
	60% {
		transform: scale(1.5) rotate(-5deg);
	}
	75% {
		transform: scale(1.5) rotate(-20deg);
	}
	90% {
		transform: scale(1.5) rotate(-15deg);
	}
	100% {
		transform: scale(1.5) rotate(-15deg);
	}
}
@keyframes hourglass {
	0% {
		transform: scale(1.5) rotate(0);
	}
	35% {
		transform: scale(1.5) rotate(180deg);
	}
	65% {
		transform: scale(1.5) rotate(180deg);
	}
	100% {
		transform: scale(1.5) rotate(0);
	}
}
@keyframes eraser {
	0% {
		transform: scale(1.5) translate(0, 0);
	}
	15% {
		transform: scale(1.5) translate(-10px, -5px);
	}
	30% {
		transform: scale(1.5) translate(-10px, 5px);
	}
	45% {
		transform: scale(1.5) translate(-5px, -5px);
	}
	60% {
		transform: scale(1.5) translate(-5px, 5px);
	}
	75% {
		transform: scale(1.5) translate(0, 0);
	}
	100% {
		transform: scale(1.5) translate(10px, 0);
	}
}
@keyframes rocket {
	0% {
		transform: scale(1.5) translate(0, 0);
		opacity: 1;
	}
	5% {
		transform: scale(1.5) translate(2px, 0);
		opacity: 1;
	}
	10% {
		transform: scale(1.5) translate(1px, -2px);
		opacity: 1;
	}
	15% {
		transform: scale(1.5) translate(3px, -1px);
		opacity: 1;
	}
	20% {
		transform: scale(1.5) translate(2px, -3px);
		opacity: 1;
	}
	25% {
		transform: scale(1.5) translate(4px, -2px);
		opacity: 1;
	}
	50% {
		transform: scale(1.5) translate(10px, -10px);
		opacity: 0;
	}
	51% {
		transform: scale(1.5) translate(-10px, 10px);
		opacity: 0;
	}
	100% {
		transform: scale(1.5) translate(0, 0);
		opacity: 1;
	}
}
@keyframes times {
	0% {
		transform: scale(1.5) translateX(0);
	}
	15% {
		transform: scale(1.5) translateX(5px);
	}
	30% {
		transform: scale(1.5) translateX(-5px);
	}
	45% {
		transform: scale(1.5) translateX(3px);
	}
	60% {
		transform: scale(1.5) translateX(-3px);
	}
	75% {
		transform: scale(1.5) translateX(0);
	}
	100% {
		transform: scale(1.5) translateX(0);
	}
}
@keyframes battery {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}