.btn{
	padding: 4px 16px;
	display: inline-block;
	text-align: center;
	position: relative;
	letter-spacing: 1px;
	@include transition(0.4s ease);
	border-radius: 4px;
	cursor: pointer;	

	&.\--large{
		padding: 25px 45px;
	}

	&.\--medium{
		padding: 15px 18px;
		
	}

	&.btn-primary{
		background-color: $theme-primary;
		color: $theme-white;
		font-weight: 600;
		&:hover{
			background-color: rgba($theme-black, 0.9);
		}
		&.\--outline{
			background: none;
			color: $theme-primary;
			border: 2px solid $theme-primary;
		}
	}

	&.btn-gradient{
		// background-color: $theme-pink;
		color: $theme-white;
		text-transform: uppercase;
		position: relative;
		overflow: hidden;

		&:before{
			@include bg-gradient;
			content: "";
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			z-index: -1;
		}
		&:hover{
			background-color: $theme-pink;
			&:before{
				transform: translate3d(-100%, 0, 0);
			}
		}
	}

	&.btn-secondary{
		background-color: $theme-secondary;
		color: $theme-white;
		&:hover{
			background-color: rgba($theme-primary, 0.9);
		}
		&.\--outline{
			background: none;
			border: 2px solid $theme-secondary;
		}
	}
}