.btn-container { display: flex; }

.btn-container.align-left { justify-content: flex-start; }

.btn-container.align-center { justify-content: center; }

.btn-container.align-right { justify-content: flex-end; }

.btn-container .btn {
	position: relative;
    display: inline-block;
	margin-bottom: 16px;
	padding: 18px 28px;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 400ms cubic-bezier(0,0,0.3,1);
	cursor: pointer;
}
.btn-container .btn:hover { text-decoration: none; }

.btn-container .btn.default {
	color: #1a1a1a;
	background-color: #FDB924;
}
.btn-container .btn.default:hover { background-color: #F7AA02; }

.btn-container .btn.purple {
	color: #fff;
	background-color: hsl(286, 79%, 30%);
}
.btn-container .btn.purple:hover { background-color: rgb(88, 10, 112); }

.btn-container .btn.yellow {
	color: #1a1a1a;
	background-color: #FDB924;
}
.btn-container .btn.yellow:hover { background-color: #F7AA02; }

.btn-container .btn.green {
	color: #fff;
	background-color: #94C73D;
}
.btn-container .btn.green:hover { background-color: rgb(121, 187, 6); }

.btn-container .btn.blue {
	color: #fff;
	background-color: #00A5E5;
}
.btn-container .btn.blue:hover { background-color: rgb(3, 131, 182); }

.btn-container .btn.red {
	color: #fff;
	background-color: #D9531E;
}
.btn-container .btn.red:hover { background-color: rgb(199, 67, 15); }

.btn-container .btn.black {
	color: #fdb924;
	background-color: #1a1a1a;
}
.btn-container .btn.black:hover { background-color: #111; }

.btn-container .btn.white {
	color: #1a1a1a;
	background-color: #f5f5f5;
}
.btn-container .btn.white:hover { background-color: #d4d1d1; }

.btn-container .btn.custom::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0,0,0.3,1);
}

.btn-container .btn.custom:hover::after {
	opacity: 1;
}