.btn{
	padding: 8px 20px;
	display: inline-block;
	text-align: center;
	font-family:$base-font-family;	
	position: relative;
	
	@include transition(0.4s ease);
	
	cursor: pointer;	

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

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

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


		&.\--small{
			padding:4px 10px;
			font-weight:400;
			font-size:13px;
		}
	}
	&.btn-white{
		background-color: #fff;
		color: $theme-primary;
		font-weight: 600;
		border:none;
		.circle{
			   color: #af8b2d;
		    border-radius: 50%;
		    width: 20px;
		    text-align: center;
		    padding: 0px;
		    font-weight: 600;
		    line-height: 1.4;
		    height: 20px;
		    border: 1.5px solid #af8b2d;
		}
		&:hover{
			background-color: rgba($theme-secondary, 0.9);
			color: white;
			i{
				color:white;
			}
		}
		&.\--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;
		font-weight: 400;
		border-radius:5px;
		&:hover{
			background-color: rgba($theme-primary, 0.9);
		}
		&.\--outline{
			background: none;
			border: 2px solid $theme-secondary;
		}
		&.--large{
			padding:8px 25px;
			min-width: 210px;
			font-size: 16px;
		}
	}
}