.card-btn {
	@include font-primary-regular;
	background: $color-white;
	border: 1px solid $color-charcoal1;
	border-radius: 4px;
	box-shadow: 0 3px 0 0 $color-charcoal1, 0 5px 7px 0 rgba($color-black, .1);
	color: $color-charcoal5;
	display: inline-block;
	font-size: 14px;
	height: 165px;
	margin-bottom: 3px;
	padding: 0;
	position: relative;
	text-align: center;
	transition: background-color $trans-time $trans-func, border-color $trans-time $trans-func, box-shadow $trans-time $trans-func;
	vertical-align: top;
	white-space: normal;
	width: 165px;

	> span {
		display: block;
		left: 10px;
		position: absolute;
		right: 10px;
	}

	&__icon {
		height: 80px;
		line-height: 80px;
		top: 20px;
		text-align: center;
		vertical-align: middle;

		img {
			display: inline-block;
			height: 100%;
			width: 100%;
		}
	}

	&__name {
		bottom: 25px;
		line-height: 15px;
		max-height: 30px;
		overflow: hidden;
		transform: translateY(50%);
	}

	&:hover,
	&:focus {
		background: $color-blue0;
		border-color: $color-blue3;
		box-shadow: 0 3px 0 $color-blue3, 0 5px 7px rgba($color-charcoal7, .1);
	}

	&:active {
		background: mix($color-white, $color-blue6, 30%);
		border-color: $color-blue7;
		box-shadow: 0 -3px 0 $color-blue7, inset 0 4px 4px rgba($color-black, .16);
		transform: translateY(3px);
	}
}