.n-sc-button[class*=gradient] {
	background-color: transparent !important;
	opacity: 1;
	box-shadow: none;
}

.n-sc-button[class*=gradient]:after, .n-sc-button[class*=gradient][class*=see-through]:after {
	position: absolute;
	content: " ";
	top: -2%;
	left: -1%;
	width: 101.5%;
	height: 104%;
	transform-origin: right;
	-webkit-transform-origin: right;
	-ms-transform-origin: right;
	transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-ms-transition: transform .38s cubic-bezier(.2, .95, .4, .95), background-size .38s ease;
	transition: transform .38s cubic-bezier(.2, .95, .4, .95), background-size .38s ease;
	-webkit-transition: transform .38s cubic-bezier(.2, .95, .4, .95), background-size .38s ease;
	z-index: -1;
}

.n-sc-button[class*=gradient]:hover:after, .n-sc-button[class*=see-through][class*=gradient]:after {
	background-size: 225% 100% !important;
	background-position: right !important;
}

.n-sc-button[class*=gradient]:after, .n-sc-button[class*=see-through][class*=gradient]:hover:after {
	background-position: left !important;
	background-size: 100% 100% !important;
}

.n-sc-button[class*=see-through][class*=gradient]:hover:after {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform-origin: left;
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
}

.n-sc-button[class*=gradient]:after {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform-origin: left;
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
}

.n-sc-button[class*=gradient]:hover:after {
	transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform-origin: right;
	-webkit-transform-origin: right;
	-ms-transform-origin: right;
}

.n-sc-button[class*=gradient] .hover, .n-sc-button[class*=gradient] .start, .n-sc-button[class*=see-through][class*=gradient] .hover, .n-sc-button[class*=see-through][class*=gradient] .start {
	-ms-transition: transform .38s cubic-bezier(.2, .95, .4, .95), opacity .38s cubic-bezier(.2, .95, .4, .95);
	transition: transform .38s cubic-bezier(.2, .95, .4, .95), opacity .38s cubic-bezier(.2, .95, .4, .95);
	-webkit-transition: transform .38s cubic-bezier(.2, .95, .4, .95), opacity .38s cubic-bezier(.2, .95, .4, .95);
}

.n-sc-button[class*=gradient] .start {
	animation: gradientTextHoverHover .38s;
	animation-timing-function: cubic-bezier(.2, .9, .4, .9);
	animation-fill-mode: forwards;
	display: inline-block;
}

.n-sc-button[class*=gradient] .hover {
	position: absolute;
	display: inline;
	left: 0;
	animation: gradientTextHoverOff .38s;
	animation-timing-function: cubic-bezier(.2, .9, .4, .9);
	animation-fill-mode: forwards;
	text-align: center;
	width: 100%;
	opacity: 0;
	z-index: 0;
}

.n-sc-button[class*=gradient]:hover .hover {
	animation: gradientTextHoverHover .38s;
	animation-timing-function: cubic-bezier(.2, .9, .4, .9);
	animation-fill-mode: forwards;
}

.n-sc-button[class*=gradient]:hover .start {
	animation: gradientTextHoverOff .38s;
	animation-timing-function: cubic-bezier(.2, .9, .4, .9);
	animation-fill-mode: forwards;
}

.n-sc-button[class*=see-through][class*=gradient] .hover {
	position: absolute;
	display: inline;
	left: 0;
	text-align: center;
	width: 100%;
	opacity: 0;
	z-index: 100;
}

.n-sc-button[class*=gradient] .start.loading {
	animation: gradientTextHoverHover 0s;
}

.light .n-sc-button[class*=gradient]:hover .hover, .light .n-sc-button[class*=see-through][class*=gradient] .start, .light .n-sc-button[class*=see-through][class*=gradient]:hover .start {
	background: 0 0 !important;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	background-clip: border-box;
}

.light .n-sc-button[class*=gradient].no-text-grad .start {
	color: #fff !important;
}

.light .n-sc-button[class*=gradient] .start, .light .n-sc-button[class*=see-through][class*=gradient] .start, .light .n-sc-button[class*=see-through][class*=gradient]:hover .start {
	opacity: 1 !important;
	animation: none !important;
}

.light .n-sc-button[class*=gradient] .hover, .light .n-sc-button[class*=see-through][class*=gradient] .hover {
	opacity: 0 !important;
	animation: none !important;
}

@keyframes gradientTextHoverHover {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	
	70% {
		opacity: 1;
	}
	
	100% {
		transform: translateX(0) !important;
		opacity: 1;
	}
}

@keyframes gradientTextHoverOff {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	
	70% {
		opacity: 0;
	}
	
	100% {
		transform: translateX(0) !important;
		opacity: 0;
	}
}

.n-sc-button[class*=gradient].medium.has-icon {
	padding: 7px 30px;
}

.n-sc-button[class*=gradient].large.has-icon {
	padding: 12px 35px;
}

.n-sc-button[class*=gradient] i {
	opacity: 1;
	right: 24px;
	background: inherit;
	background-size: 500% 100%;
	background-position: right;
}

.n-sc-button[class*=gradient].has-icon span {
	left: -18px;
}

.n-sc-button[class*=gradient].has-icon:hover i, .n-sc-button[class*=gradient].has-icon:hover span {
	-ms-transform: none;
	transform: none;
	-webkit-transform: none;
}

.n-sc-button[class*=gradient].jumbo i {
	opacity: 1;
	font-size: 20px;
	line-height: 20px;
	width: 20px;
	text-align: center;
	margin-top: -10px;
}

.n-sc-button[class*=gradient].extra_jumbo i {
	width: 40px;
}

.n-sc-button[class*=gradient].has-icon.extra_jumbo span {
	left: -35px;
}

.n-sc-button[class*=gradient].has-icon.jumbo span {
	left: -16px;
}

.n-sc-button[class*=gradient].has-icon.large span {
	left: -14px;
}

.n-sc-button[class*=gradient].has-icon.medium span {
	left: -13px;
}

.n-sc-button[class*=gradient].has-icon.small span {
	left: -11px;
}

.n-sc-button[class*=gradient].jumbo .hover i {
	right: 8px;
}

.n-sc-button[class*=gradient].extra_jumbo .hover i {
	right: 19px;
}

.n-sc-button[class*=gradient].large .hover i {
	right: 5px;
}

.n-sc-button[class*=gradient].medium .hover i {
	right: 3px;
}

.n-sc-button[class*=gradient].small .hover i {
	right: 7px;
}

.n-sc-button[class*=gradient].jumbo .start i {
	right: -32px;
}

.n-sc-button[class*=gradient].extra_jumbo .start i {
	right: -75px;
}

.n-sc-button[class*=gradient].large .start i {
	right: -32px;
}

.n-sc-button[class*=gradient].medium .start i {
	right: -30px;
}

.n-sc-button[class*=gradient].small .start i {
	right: -30px;
}

.n-sc-button[class*=gradient].small {
	padding: 5px 14px;
}

.n-sc-button[class*=gradient].medium {
	border-width: 3px;
	padding: 7px 15px;
}

.n-sc-button[class*=gradient].large {
	border-width: 3px;
	padding: 12px 22px;
}

.n-sc-button[class*=gradient].jumbo {
	border-width: 4px;
	padding: 21px 40px;
}

.n-sc-button[class*=gradient].extra_jumbo {
	border-width: 10px;
	padding: 56px 90px;
}

.n-sc-button[class*=gradient] span {
	z-index: 100;
}