[class*="button"]
{
	background: #09172d;
	transition: transform .1s ease;

	color: #e5e5e5;
	font: normal 600 17px/56px "Barlow Condensed", sans-serif;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;

	border: solid 3px #f8be21;
	display: inline-block;
	overflow: hidden;
	position: relative;
	 z-index: 2;

	height: 60px;
	width: 300px;
}

[class*="button"] span
{
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: color .5s ease;

	position: absolute;
	 top: 50%;
	 left: 50%;
	 z-index: 3;

	height: 100%;
	width: calc(100% - 2px);
}

[class*="button"]:after
{
	background: #f8be21;
	transform: translateY(-50%) scale(1.25) skew(-13deg);
	transition: all .3s ease;
	
	position: absolute;
	 top: 50%;
	 left: -3%;
	 z-index: 2;

	height: calc(100% + 4px);
	width: 0;

	content: "";
}

[class*="button"]:hover:not(:disabled)
{
	cursor: pointer;
}

[class*="button"]:hover:not(:disabled) span
{
	color: #09172d;
}

[class*="button"]:hover:not(:disabled):after
{
	width: 100%;
}

[class*="button"]:after
{
	z-index: -1;
}

@media (hover: hover), all and (-ms-high-contrast: none)
{
	[class*="button"]:active,
	[class*="button"]:focus
	{
		transform: scale(0.95);
	}
}

[class*="button"].button-blue
{
	background: #09172d;

	color: #e5e5e5;
}

[class*="button"].button-white
{
	background: #e5e5e5;

	color: #09172d;
}

[class*="button"].button-clear
{
	background: transparent;

	color: #f2f2f2;
}

[class*="button"].button-more
{
	border-color: #e5e5e5;
}

[class*="button"].button-more:after
{
	background: #e5e5e5;
}

[class*="button"].button-more-2
{
	background: transparent;

	color: #09172d;

	border-color: #f8be21;
}