.btn {

	font-weight: 400;

	padding: 0 40px;

	font-family: var(--font);

	color: white;

	cursor: pointer;

	line-height: 49px;

	opacity: 1;

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

	-ms-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;

	display: inline-block;

	font-size: 16px;

	border: 1px solid transparent;

	background: var(--color);

	opacity: 1;

	transform: scale(1);

	position: relative;

	border-radius: 8px;

}

.btn.btn-color {

	background-color: var(--color);

}

.btn.btn-color2 {

	background-color: var(--color2);

}

.btn.btn-color3 {

	background-color: var(--color3);

}

.btn:after {

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

	-ms-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;

	content: "";

	width: 0;

	display: block;

	position: absolute;

	left: 0;

	top: 0;

	bottom: 0;

	background-color: rgba(0, 0, 0, 0.05);

}

.btn:hover:after {

	width: 100%;

}

.btn:hover {

	transform: scale(1.075);

	-webkit-box-shadow: 5px 5px 5px 0 rgba(0 0 0 / 10%);

	-moz-box-shadow: 5px 5px 5px 0 rgba(0 0 0 / 10%);

	box-shadow: 5px 5px 5px 0 rgba(0 0 0 / 10%);

}

.btn.btn-s {

	line-height: 35px;

	padding: 0 20px;

}

.btn.btn-l {

	line-height: 48px;

	padding: 0 20px;

	font-size: 24px;

}

.btn.btn-red {

	background: #c77474;

}