.btn-group {
	display:flex; flex-wrap: wrap; align-items: center;
	margin-left:-0.75rem; margin-right:-0.75rem; margin-bottom:-1.5rem;
}
.btn-group.center { justify-content: center; }
.btn-group > a,
.btn-group > button {
	margin-left:0.75rem; margin-right:0.75rem; margin-bottom:1.5rem;
}
.btn-group.btn-gap-xs { margin-left:-0.25rem; margin-right:-0.25rem; margin-bottom:-1rem; }
.btn-group.btn-gap-xs > a,
.btn-group.btn-gap-xs > button {
	margin-left:0.25rem; margin-right:0.25rem; margin-bottom:1rem;
}
.btn-group.btn-gap-sm { margin-left:-0.5rem; margin-right:-0.5rem; margin-bottom:-1.25rem; }
.btn-group.btn-gap-sm > a,
.btn-group.btn-gap-sm > button {
	margin-left:0.5rem; margin-right:0.5rem; margin-bottom:1.25rem;
}
.btn-group.btn-gap-lg { margin-left:-1.25rem; margin-right:-1.25rem; margin-bottom:-1.75rem; }
.btn-group.btn-gap-lg > a,
.btn-group.btn-gap-lg > button {
	margin-left:1.25rem; margin-right:1.25rem; margin-bottom:1.75rem;
}
.btn-group.btn-gap-xl { margin-left:-2rem; margin-right:-2rem; margin-bottom:-2rem; }
.btn-group.btn-gap-xl > a,
.btn-group.btn-gap-xl > button {
	margin-left:2rem; margin-right:2rem; margin-bottom:2rem;
}
.btn {
	border:0; line-height:1rem; padding:0.75rem 1rem; text-align:center;
	font-size:1rem; display:inline-block; position:relative; cursor:pointer;
	font-weight:500; background-color:transparent; text-transform:capitalize;
	transition-property:color, border-color, background-color; transition-duration:400ms;
	vertical-align:middle; border-radius:0; border-bottom:0.25rem solid transparent;
}
.btn > .btn-txt { position: relative; z-index: 20; }
.btn::after {
	content: ""; position: absolute; z-index: 10; bottom: 0; display: block; left: 0; right: 0;
	height: 0%; transition-duration: .3s; transition-property: height;
}
.btn::before { position: relative; z-index: 20; }
.btn:hover::after { height: 100%; }
.btn.btn-lg {  }
.btn.btn-xl {  }
.btn.btn-sm { font-size:18px;  }
.btn.btn-xs { font-size:16px;  }

.btn.btn1, .btn.hover1:hover { color:#FFF; border-color:#00BE00; background-color:#4d4d4d; }
.btn.btn1::after { background-color:#00BE00; }

.btn.btn2, .btn.hover2:hover { color:#FFF; border-color:#4d4d4d; background-color:#00BE00; }
.btn.btn2::after { background-color:#4d4d4d; }

.btn.btn3, .btn.hover3:hover { color:#00BE00; border-color:#00BE00; background-color:#FFF; }
.btn.btn3::after { background-color:#00BE00; }
.btn.btn3:hover { color: #FFF; }

.btn.btn4, .btn.hover4:hover { color:#FFF; border-color:#FFF; background-color:#00BE00; }
.btn.btn4::after { background-color:#FFF; }
.btn.btn4:hover { color: #00BE00; }

.btn.btn5, .btn.hover5:hover { color:#00BE00; border-color:#000; background-color:#FFF; }
.btn.btn5::after { background-color:#000; }
.btn.btn5:hover { color: #FFF; }

.btn.btn6, .btn.hover6:hover { color:#FFF; border-color:#FFF; background-color:#000; }
.btn.btn6::after { background-color:#FFF; }
.btn.btn6:hover { color: #000; }

.btn.btn7, .btn.hover7:hover { color:#000; border-color:#000; background-color:#FFF; }
.btn.btn7::after { background-color:#000; }
.btn.btn7:hover { color: #FFF; }