html, body {
	height: 100%;
}



.center-wrap {
	/*position: absolute;*/
	top: calc(50% - 100px);
	left: calc(50% - 125px);
	/*width: 250px;*/
	/*height: 200px;*/
}

.button {
	position: relative;
	display: block;
	background: none center center no-repeat;
	background-size: cover;
	border: 0px solid #fff;
	text-transform: uppercase;
	letter-spacing: .3rem;
	padding: 12px 8px;
	text-align: center;
	max-width: 270px;
	min-width: 200px;
	cursor: pointer;
	overflow: hidden;
	-webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
	transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
	border-radius: 12px;
	background: #38464f;
}

.button a {
	color: #fff;
	font-family: 'Roboto', sans-serif !important;
	text-decoration: none;
}

.button .mask {
	background: #fff;
	background: rgba(255,255,255,0.5);
}

.button .mask {
	position: absolute;
	display: block;
	width: 200px;
	height: 100px;
	-webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
	transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
	-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button .shift {
	-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

.button:hover {
	border-color: #fff;
	/* box-shadow: 0 0 5px rgba(255,245,245,0.8); */
	/* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */
}

.button:hover a {
	color: #fff;
}

.button:hover .mask {
	background: #fff;
	-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
	transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}

.button:hover .shift {
	padding-left: 5px;
}