a.button {
	/* background-color: white; */
	display: flex;
	justify-content: center;
	border-color: #888;
	border-width: 1px;
	/* border: 1px solid #eee; */
	border-radius: 0.2rem;
	font-size: 1rem;
	line-height: 3rem;
	text-align: center;
	color: white;
}

a.button.white {
	background-color: white;
	color: #444;
}

a.button.gray {
	background-color: white;
	color: #444;
}
a.button.gray:hover {
	background-color: white;
	color: #444;
}


a.button.orange {
	background-color: #ff7d00;
}
a.button.orange:hover {
	background-color: #fdb815;
}
a.button.green {
	background-color: #fdb815;
}
a.button.green:hover {
	background-color: #ff7d00;
}

a.button:hover {
	box-shadow: 1px 1px 3px #777;
}

a.button1 {
	font-size: 0.9rem;
	line-height: .9rem;
	border-radius: 2px;
	line-height: 2rem;
	/* padding-left: 2rem; */
}

a.button1.orange.anim-bottom-to-top{
	position: relative;
	text-align: right;
	/* padding-right: 2rem; */
}
a.button1.orange.anim-bottom-to-top::after{
	content: "";
	transition: width .0s;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 0%;
	background-color: orangered;
	/* padding-right: 2rem; */
	/* padding-left: 2rem; */
}

a.button1.orange.anim-bottom-to-top:hover{
	/* background-color: #ffe4a4; */
	color: transparent;
	border-color: #fdb815;
	transform-origin: center bottom;
}
a.button1.orange.anim-bottom-to-top:hover::after{
	content: attr(data-hover) "  ➜";
	color: #fff;
	width: 100%;
	transition: width .2s;
}


a.button2, button {
	font-size: 1.4em;
	background-color: green;
	border-radius: 3px;
	color: white;
	box-shadow: 3px 3px 8px #333;
	padding: 8px 25px;
	display: flex;
	justify-content: center;
}
a.button2:hover {
	background-color: lime;
	color: white;
}

a.button-big {
	background-color: #fff4db;
	color: #333;
	border-radius: .3em;
	padding: 0.3em;
	height: 2em;
	font-size: 1.6em;
	width: 10rem;
}
a.button-big:hover {
	box-shadow: inset 3px -3px 30px #ffb719, 0px 0px 10px #000000;
	background-color: #ffb719dd;
	cursor: pointer;
	color: #711e00;
}

/*Real button */
button {
	background-color: #1b851b;
	border: none;
	border-radius: 3px;
	color: white;
	box-shadow: 1px 1px 4px #333;
	padding: 8px 25px;
	display: flex;
	justify-content: center;
	cursor: pointer;
}
button:hover {
	background-color: #1ea51e;
	box-shadow: 3px 3px 8px #333;

}


/* ROUND BUTTON */
a.round-button {
	font-size: 1rem;
	line-height: 2rem;
	border-radius: 25px;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: border-radius 1s;
	margin: 0 auto;
	/* padding-left: 2rem; */
}
a.round-button:hover {
	
}
a.round-button.orange {
	background-color: #fdb815;
}
a.round-button.orange:hover {
	background-color: #ff4141;
	box-shadow: 0px 0px 5px #777;

}
a.round-button.anim-round-to-square{
	position: relative;
	/* padding-right: 2rem; */
}
a.round-button.orange.anim-round-to-square::after{
	content: "";
	transition: height .0s;
	position: absolute;
	font-size: .8rem;
	bottom: -5px;
	line-height: 1rem;
	left: 50%;
	transform: translateX(-50%);
	height: 0;
	width: 30ch;
	text-align: center;
	background-color: #ff4141;
	border-radius: 2px;
	z-index: 3;
	/* padding-right: 2rem; */
	/* padding-left: 2rem; */
}

a.round-button.orange.anim-round-to-square:hover{
	/* background-color: #ffe4a4; */
	color: transparent;
	border-color: #ff4141;
	transform-origin: center bottom;
	border-radius: 3px;
}


a.round-button.orange.anim-round-to-square:hover::after{
	content: attr(data-hover) "  ➜";
	color: #fff;
	height: 1rem;
	transition: height .2s;
}