@charset "utf-8";
/* Button Style */

.btn_wrap{
	text-align: center;
}
.btn_wrap .btn-effect{
	display: inline-block;
	vertical-align: top;
}

.btn-effect {
	position: relative;
	width: 200px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.btn-effect a {
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	color: #fff;
}





/* ======= Button Type ======= */
[data-bt-ui="border"]{
	border: 1px solid #fff;
}





/* ======= Fade Effect To Class ======= */ /* > developing... < */
.btn-fadeLeft:hover a {
}
.btn-fadeRight:hover a {
}
.btn-fadeTop:hover a {
}
.btn-fadeBottom:hover a {
}





/* ======= Button Text Style ======= */
/* Letter Spacing */
[data-bt-st="ls"] a{
	transition: ease-out 0.5s;
}
[data-bt-st="ls"]:hover a{
	letter-spacing: 2px;
}





/* ======= Fade Effect - Direction ======= */
/* Fade Right */
[data-bt="fadeRight"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: ease-out 0.2s;
}
[data-bt="fadeRight"]:hover:before{
	width: 100%;
	background: #fff;
}
[data-bt="fadeRight"]:hover a{
	color: #3F51B5;
}



/* Fade Left */
[data-bt="fadeLeft"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	transition: ease-out 0.2s;
}
[data-bt="fadeLeft"]:hover:before{
	width: 100%;
	background: #fff;
}
[data-bt="fadeLeft"]:hover a{
	color: #3F51B5;
}



/* Fade Bottom */
[data-bt="fadeBottom"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 0;
	transition: ease-out 0.2s;
}
[data-bt="fadeBottom"]:hover:before{
	height: 100%;
	background: #fff;
}
[data-bt="fadeBottom"]:hover a{
	color: #3F51B5;
}



/* Fade Top */
[data-bt="fadeTop"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 0;
	transition: ease-out 0.2s;
}
[data-bt="fadeTop"]:hover:before{
	height: 100%;
	background: #fff;
}
[data-bt="fadeTop"]:hover a{
	color: #3F51B5;
}




/* ======= Border Effect ======= */
/* Border Horizon */
[data-bt="borderHorizon"]:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderHorizon"]:after{
	content: '';
	position: absolute;
	bottom: 0;;
	left: 0;
	right: 0;
	margin: auto;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderHorizon"]:hover:before{
	width: 100%;
	background: #fff;
}

[data-bt="borderHorizon"]:hover:after{
	width: 100%;
	background: #fff;
}



/*Border Vertical*/
[data-bt="borderVertical"]:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderVertical"]:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderVertical"]:hover:before{
	height: 100%;
	background: #fff;
}

[data-bt="borderVertical"]:hover:after{
	height: 100%;
	background: #fff;
}



/* Border Quarter Clockwise */
[data-bt="borderQuarterClock"] .border-quarter-Horizon{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[data-bt="borderQuarterClock"] .border-quarter-Horizon:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarterClock"] .border-quarter-Horizon:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarterClock"] .border-quarter-Vertical:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarterClock"] .border-quarter-Vertical:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarterClock"]:hover .border-quarter-Horizon:before,
[data-bt="borderQuarterClock"]:hover .border-quarter-Horizon:after{
	width: 100%;
}
[data-bt="borderQuarterClock"]:hover .border-quarter-Vertical:before,
[data-bt="borderQuarterClock"]:hover .border-quarter-Vertical:after{
	height: 100%;
}



/* Border Quarter */
[data-bt="borderQuarter"] .border-quarter-Horizon{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[data-bt="borderQuarter"] .border-quarter-Horizon:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarter"] .border-quarter-Horizon:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarter"] .border-quarter-Vertical:before{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarter"] .border-quarter-Vertical:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 0;
	background: #fff;
	transition: ease-out 0.2s;
}
[data-bt="borderQuarter"]:hover .border-quarter-Horizon:before,
[data-bt="borderQuarter"]:hover .border-quarter-Horizon:after{
	width: 100%;
}
[data-bt="borderQuarter"]:hover .border-quarter-Vertical:before,
[data-bt="borderQuarter"]:hover .border-quarter-Vertical:after{
	height: 100%;
}





/* Hover Light Up */
[data-bt="hoverLightUp"]{
	overflow: hidden;
}
[data-bt="hoverLightUp"]:before{
	content: '';
	position: absolute;
	top: -50px;
	left: -80px;
	width: 50px;
	height: 160px;
	background: #fff;
	opacity: 0.2;
	transform: rotate(35deg);
	transition: ease-out 0.2s;
}
[data-bt="hoverLightUp"]:hover:before{
	left: 120%;
}



/* Hover Light */
[data-bt="hoverLight"] a{
	border: 1px solid rgba(255,255,255,0);
	transition: ease-out 0.5s;
}
[data-bt="hoverLight"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: ease-out 0.5s;
}
[data-bt="hoverLight"]:after{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	transition: ease-out 0.2s;
}
[data-bt="hoverLight"]:hover a{
	border: 1px solid rgba(255,255,255,1);
}
[data-bt="hoverLight"]:hover:before{
	box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,.6);
}
[data-bt="hoverLight"]:hover:after{
	transform: scale(1.1,1.5);
	border: 1px solid rgba(255,255,255,0);
}




/* Flip Border Vertical */
[data-bt="FlipVertical"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	transition: ease-out 0.2s;
}
[data-bt="FlipVertical"]:hover:before{
	transform: rotateX(180deg);
}





/* Flip Border Horizon */
[data-bt="FlipHorizon"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	transition: ease-out 0.2s;
}
[data-bt="FlipHorizon"]:hover:before{
	transform: rotateY(180deg);
}





/* Hover Text 1 */
[data-bt="hoverText1"] a{
	overflow: hidden;
	display: inline-block;
	height: 40px;
}
[data-bt="hoverText1"] a span{
	display: inline-block;
	position: relative;
	color: #fff;
	transition: ease-out 0.3s;
}
[data-bt="hoverText1"] a span:before{
	content: attr(data-tc);
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
}
[data-bt="hoverText1"] a:hover span {
	transform: translateY(50px);
}



/* Hover Text 2 */
[data-bt="hoverText2"] a{
	overflow: hidden;
	display: inline-block;
	height: 40px;
}
[data-bt="hoverText2"] a span{
	display: inline-block;
	position: relative;
	color: #fff;
	transition: ease-out 0.3s;
}
[data-bt="hoverText2"] a span:before{
	content: attr(data-tc);
	position: absolute;
	top: -100px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
}
[data-bt="hoverText2"] a span:after{
	content: attr(data-tc);
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
}
[data-bt="hoverText2"] a:hover span {
	transform: translateY(100px);
}




/* Shape Effect - Left */
[data-bt="shapeRight"]{
	width: auto;
}
[data-bt="shapeRight"] a{
	padding: 0 20px;
}
[data-bt="shapeRight"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 0;
	height: 10px;
	background: #F44336;
	transition: ease-out 0.2s;
}
[data-bt="shapeRight"]:hover:before{
	width: 100%;
}



/* Shape Effect - Center */
[data-bt="shapeCenter"]{
	width: auto;
}
[data-bt="shapeCenter"] a{
	padding: 0 20px;
}
[data-bt="shapeCenter"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	bottom: 10px;
	right: 0;
	left: 0;
	margin: auto;
	width: 0;
	height: 10px;
	background: #F44336;
	transition: ease-out 0.2s;
}
[data-bt="shapeCenter"]:hover:before{
	width: 100%;
}



/* Shape Effect - Right */
[data-bt="shapeLeft"]{
	width: auto;
}
[data-bt="shapeLeft"] a{
	padding: 0 20px;
}
[data-bt="shapeLeft"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	bottom: 10px;
	right: 0;
	width: 0;
	height: 10px;
	background: #F44336;
	transition: ease-out 0.2s;
}
[data-bt="shapeLeft"]:hover:before{
	width: 100%;
}



/* Shape Effect - Full */
[data-bt="shapeFull"]{
	width: auto;
}
[data-bt="shapeFull"] a{
	padding: 0 20px;
}
[data-bt="shapeFull"]:before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 0;
	margin: auto;
	height: 0;
	background: #F44336;
	transition: ease-out 0.2s;
}
[data-bt="shapeFull"]:hover:before{
	width: 100%;
	height: 100%;
}





/* Animation - Border Clockwise*/
[data-bt="animateBorderClock"] a{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
[data-bt="animateBorderClock"] .animate-border-Horizon{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[data-bt="animateBorderClock"] .animate-border-Vertical:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 0;
	background: #fff;
	animation: borderClock-v-l 4s infinite;
}
[data-bt="animateBorderClock"] .animate-border-Horizon:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #fff;
	animation: borderClock-h-t 4s infinite;
}
[data-bt="animateBorderClock"] .animate-border-Vertical:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 0;
	background: #fff;
	animation: borderClock-v-r 4s infinite;
}
[data-bt="animateBorderClock"] .animate-border-Horizon:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 1px;
	background: #fff;
	animation: borderClock-h-b 4s infinite;
}
@keyframes borderClock-v-l{
	0% { height: 0%; }
	25% { height: 100%; }
	50% { height: 100%; }
	75% { height: 100%; }
	100% { height: 100%; }
}
@keyframes borderClock-h-t{
	0% { width: 0; }
	25% { width: 0; }
	50% { width: 100%; }
	75% { width: 100%; }
	100% { width: 100%; }
}
@keyframes borderClock-v-r{
	0% { height: 0; }
	25% { height: 0; }
	50% { height: 0; }
	75% { height: 100%; }
	100% { height: 100%; }
}
@keyframes borderClock-h-b{
	0% { width: 0; }
	25% { width: 0; }
	50% { width: 0; }
	75% { width: 0; }
	100% { width: 100%; }
}



/* Animation - Border */
[data-bt="animateBorder"] a{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
[data-bt="animateBorder"] .animate-border-Horizon{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[data-bt="animateBorder"] .animate-border-Vertical:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 0;
	background: #fff;
	animation: border-v-l 4s infinite;
}
[data-bt="animateBorder"] .animate-border-Horizon:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 1px;
	background: #fff;
	animation: border-h-t 4s infinite;
}
[data-bt="animateBorder"] .animate-border-Vertical:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 0;
	background: #fff;
	animation: border-v-r 4s infinite;
}
[data-bt="animateBorder"] .animate-border-Horizon:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #fff;
	animation: border-h-b 4s infinite;
}
@keyframes border-v-r{
	0% { height: 0%; }
	25% { height: 100%; }
	50% { height: 100%; }
	75% { height: 100%; }
	100% { height: 100%; }
}
@keyframes border-h-t{
	0% { width: 0; }
	25% { width: 0; }
	50% { width: 100%; }
	75% { width: 100%; }
	100% { width: 100%; }
}
@keyframes border-v-l{
	0% { height: 0; }
	25% { height: 0; }
	50% { height: 0; }
	75% { height: 100%; }
	100% { height: 100%; }
}
@keyframes border-h-b{
	0% { width: 0; }
	25% { width: 0; }
	50% { width: 0; }
	75% { width: 0; }
	100% { width: 100%; }
}