/* Buttons */
.btn, .button{

	background-color:transparent; color:$black; padding:12px 24px 10px; font-family: $title; text-transform: uppercase; font-size:13px; font-weight: 700; text-align:center; display:inline-block; border:2px solid $black; border-radius:30px; position:relative; white-space:normal; @include transition(); letter-spacing: 0.07em;

	&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus {background-color:$black; color:$white; border-color:$black;}

	&-lg{font-size:14px; padding:15px 30px 13px;}
	&-sm{font-size:11px; padding:8px 18px 6px;}
	&-icon{width: 50px; height: 50px; line-height: 46px; padding: 0;}

	&-default{
		.section-dark &, .bg-dark &{background-color:transparent; color:$white; border-color:$white;
			&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus { background-color:$white; color:$black; border-color:$white;}
		}
		.section-dark .bg-lightgrey &{background-color:transparent; color:$black; border-color:$black;
			&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus {background-color:$black; color:$white; border-color:$black;}
		}
	}

	&-primary {  background-color:$teal; color:$white; border-color:transparent;
		&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus { background-color:$turquoise; color:$white; border-color:transparent;}
	}

	&-gradient{ background:linear-gradient(135deg,$gradientblue,$gradientlightblue); background-size: 120% auto; background-position: 20% 0; border-color: transparent; color: $white;
		&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus { background-position: 95% 0; background-size: 200% auto; border-color: transparent; color: $white;}
	}

	&-link{ color:$black; background: transparent; border-color:transparent; padding-left: 0; padding-right: 0;
		&:after{content:"\f105"; font-family:'Font Awesome 5 Pro'; font-weight: 400; margin-left: 5px;}
		&:hover, &:focus, &:active, &.active, &.disabled, &.disabled:active, &.disabled:hover, &.disabled:focus, &.active.focus, &.active:focus, &.focus, &.focus:active, &:active:focus, &:focus { color:$blue; border-color:transparent; background: transparent; text-decoration: none;}
		.section-dark &{color: $white;
			&:hover{color: $turquoise;}
		}
		.section-grey &:hover{background: $white;}
	}

	&-video{
		&:before{content:"\f144"; font-family:'Font Awesome 5 Pro'; font-weight: 700; margin-right: 10px;}
	}


	& + .btn{margin-left: 15px;}

}