#hero {
	position: relative;
	@hero-color: white;
	//margin-bottom: 20px;
	.hero-content {
		position: absolute;
		top: 45%;
		transform: translateY(-50%);
		width: 100%;
		text-align: center;
		left: 0;
		color: @hero-color;
	}
	.hero-title {
		a{
			color: @onaccent;
			font-weight: bold;
		}
		font-weight: bold;
		font-size: 42px;
		margin-bottom: 20px;
	}
	.hero-desc {
		font-size: 18px;
	}
	.hero-button-wrapper {
		margin: 40px auto;
		.hero-button {
			color: @hero-color;
			border: solid 2px @hero-color;
			padding: 15px 29px;
			border-radius: 8px; 
			font-size: 15px;
			text-transform: uppercase;
			.transition(0.4s all ease);
			padding-right: 42px;
			padding-left: 24px;
			&:before {
				//icon
				right: 18px;
				top: 14px;
				content: "\f101";
			}
			&:hover {
				background: fade(@accent,50%);
				color: @onaccent;
			}
		}
	}
	body:not(.home) & {
		height: 300px;
	}
	.home & {
		height: 500px;
	}
}