/* @keyframes left-slide-right {
	from {
		transform: translateX(-180px);
	}
	to {
		transform: translateX(0px);
	}
}

@keyframes right-return {
	from {
		transform: translateX(0px);
	}
	to {
		transform: translateX(-180px);
	}
}

@keyframes right-slide-left {
	from {
		transform: translateX(180px);
	}
	to {
		transform: translateX(0px);
	}
} */

.lightshade-button {
	width: 165px;
	display: block;
	font-weight: 500;
	background-color: rgb(209, 0, 0);
	border-radius: 11px;
	text-align: center;
	padding-top: 13px;
	padding-bottom: 13px;
	overflow: hidden;
	position: relative;
	span {
		position: relative;
		color: rgb(255, 255, 255);
		transition: 0.5s;
		text-transform: capitalize;
	}
}

.lightshade-button .arrow {
	position: relative;
	margin-left: 12.5px;
	translate: 0px -1px;
  border: solid rgb(255, 255, 255);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
	transition: 0.5s;
}

.lightshade-button .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.lightshade-button:hover {
	span {
		color: rgb(0, 0, 0);
	}
}

.lightshade-button:hover .arrow {
  border: solid rgb(0, 0, 0);
	border-width: 0 3px 3px 0;
	translate: 5px -1px;
}

.lightshade-button::before {
	content: '';
	height: 100%;
	width: 0%;
	top: 0;
	left: 0;
	background: rgb(255, 255, 255);
	position: absolute;
	transition: 0.5s;
}

.lightshade-button:hover::before {
	width: 100%;
}

.darkshade-button {
	width: 165px;
	display: block;
	font-weight: 500;
	background-color: rgb(209, 0, 0);
	border-radius: 11px;
	text-align: center;
	padding-top: 13px;
	padding-bottom: 13px;
	overflow: hidden;
	position: relative;
	span {
		position: relative;
		color: rgb(255, 255, 255);
		transition: 0.5s;
		text-transform: capitalize;
	}
}

.darkshade-button .arrow {
	position: relative;
	margin-left: 12.5px;
	translate: 0px -1px;
  border: solid rgb(255, 255, 255);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
	transition: 0.5s;
}

.darkshade-button .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.darkshade-button:hover .arrow {
  border: solid rgb(255, 255, 255);
	border-width: 0 3px 3px 0;
	translate: 5px -1px;
}

.darkshade-button::before {
	content: '';
	height: 100%;
	width: 0%;
	top: 0;
	left: 0;
	background: rgb(8, 21, 44);
	position: absolute;
	transition: 0.5s;
}

.darkshade-button:hover::before {
	width: 100%;
}