/*========== BUTTONS & LINKS ==========*/
.button {
	color: #fff;
	font-size: $fontSize14;
	text-transform: uppercase;
	padding: 15px 45px 15px 40px;
	display: inline-block;
	line-height: 1.5;
	@include borderRadius(2px);
	@include transition(all .2s ease-out);
	@include boxShadow(0px 30px 30px 0px rgba(0, 0, 0, 0.1));
	@media only screen and #{$phone} {
		width: 100%;
		display: block;
		text-align: center;
	}

	span {
		position: relative;
		line-height: 1.5;
		&:before {
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 4px solid #fff;
			position: absolute;
			right: -10px;
			bottom: 6px;
			content: '';
			@include transition(all .2s ease-out);
		}
		@media only screen and #{$phone} {
			display: inline-block;
		}
	}

	&.btn-primary {
		background: #e67b37;
		border: 1px solid #e67b37;
		&:hover {
			border: 1px solid #d87231;
			background: #d87231;
		}
	}

	&.btn-secondary {
		background: #509ae1;
		border: 1px solid #509ae1;
		&:hover {
			border: 1px solid #468fd6;
			background: #468fd6;
		}
	}

	&.btn-ghost {
		@include boxShadow(0px 0px 0px 0px rgba(0, 0, 0, 0));

		&.btn-primary {
			background: none;
			color: #e67b37;
			border: 1px solid #e67b37;
			&:hover {
				border: 1px solid #ce6523;
				background: none;
			}
			span {
				&:before {
					border-left: 4px solid #e67b37;
				}
			}
		}

		&.btn-secondary {
			background: none;
			color: #509ae1;
			border: 1px solid #509ae1;
			&:hover {
				border: 1px solid #317bc2;
				background: none;
			}
			span {
				&:before {
					border-left: 4px solid #509ae1;
				}
			}
		}
	}

	&:hover {
		span {
			&:before {
				right: -15px;
			}
		}
	}

}

.link {
	font-size: $fontSize14;
	text-transform: uppercase;
	font-family: 'robotobold';
	position: relative;
	&:before {
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		position: absolute;
		right: -12px;
		bottom: 6px;
		content: '';
		@include transition(all .2s ease-out);
	}
	&:after {
		width: 100%;
		height: 1px;
		border-bottom-width: 2px;
		border-bottom-style: dotted;
		position: absolute;
		opacity: .4;
		bottom: -7px;
		left: 0;
		content: '';
		@include transition(all .2s ease-out);
	}

	&.link-white {
		color: #fff;
		&:after {
			border-bottom-color: #fff;
		}
		&:before {
			border-left: 4px solid #fff;
		}
		&:hover {
			&:after {
				opacity: .8;
			}
		}
	}

	&.link-blue {
		color: #509ae1;
		&:after {
			border-bottom-color: #509ae1;
		}
		&:before {
			border-left: 4px solid #509ae1;
		}
		&:hover {
			&:after {
				opacity: .8;
			}
		}
	}

	&:hover {
		&:before {
			right: -15px;
		}
	}


}

/*========== FORM ELEMENTS==========*/
.form {}

label {
	display: block;
	color: #4f515e;

	&.inline {
		padding: 17px 0 0 0;
	}
}

.field {
	&:not(first-child) {
		padding: 0 0 10px 0;
	}

	.input {
		width: 100%;
		display: block;
		background: #fbfbfb;
		border: 1px solid #d9dae2;
		color: #5a6063;
		padding: 15px 20px;
		@include borderRadius(1px);
		@include transition(all .2s ease-out);

		&:not(textarea) {
			height: 50px;
		}

		&:not(input) {
			height: 170px;
		}

		&:hover,
		&:focus {
			background: #fff;
			border: 1px solid #c2c3cb;
		}
	}


}



