html, body {
	/*height: 100%;*/
}

body {
	/*background: linear-gradient(#000 0%, #121212 100%);*/
}

/*@media (max-width: 900px){
	body{
	zoom: 200%;
	}
	
}*/


.center-wrap {
	width: 400px;
    margin: 0 auto;
    height: 80px;
    text-align: center;
}

.button {
	position: relative;
	display: block;
	background: none center center no-repeat;
	background-size: cover;
	border: 2px solid #2e2e2e;
	text-transform: uppercase;
	letter-spacing: .3rem;
	padding: 20px 15px;
	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);
}

.button a {
	color: #f7f7f7;
	font-family: 'Varela Round';
	text-decoration: none;
}

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

.button .mask {
	position: absolute;
	display: block;
	width: 300px;
	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;
}
a {
    color: #0d6efd;
    text-decoration: none;
}