/*------------------------------------*\
    #Hero
\*------------------------------------*/
.hero {
	padding-top: 310px;
	padding-bottom: 140px;
	background-position: right top;
	background-color: #F6FAFD;

	.hero-headline {
		color: $color-heading;
		font-size: 55px;
		font-weight: 500;
		line-height: 75px;
		margin-bottom: 35px;
	}

	.hero-bio {
		font-family: $font-body;
		font-size: 20px;
		font-weight: 400;
		line-height: 30px;
		margin-bottom: 50px;
	}

	.btn {
		height: 60px;
		line-height: 60px;
		width: 210px;
	}

}

/* Hero Action */
.hero-action {
	.btn {
		width: 190px;
	}

	form {
		margin-bottom: 0;

		.form-control {
			width: 300px;
			height: 50px;
			line-height: 50px;
			max-width: 100%;
			margin-right: 30px;
			margin-bottom: 0;
			@include rounded(4px);
			border: 1px solid #e6eaf4;
			background: $color-white;
		}

		input[type='submit'] {
			height: 50px;
			line-height: 50px;
		}
	}
}

@media only screen and (max-width : 767px) {
	.hero {
		background-image: none !important;

		.hero-action {
			.btn {
				display: block;
				margin: 15px auto;
			}

			form {
				text-align: center;

				.form-control {
					margin-bottom: 0;
					margin-right: 0;
					max-width: 280px;
					margin: 15px 0;
				}

				.btn {
					margin: 15px 0;
				}
			}
		}
	}
}

@media only screen and (max-width : 991px) {
	.hero {
		padding-top: 240px;

		.row-content {
			padding-top: 0;
		}

		.hero-headline {
			padding-top: 0;
			font-size: 28px;
			line-height: 33px;
		}

		.hero-bio {
			font-size: 15px;
			line-height: 26px;
		}

		.hero-img {
			img {
				margin-top: 40px;
				max-width: 100%;
				height: auto;
			}
		}

		.hero-action {

			form {
				justify-content: center;
			}
		}
	}
}

@media only screen and (min-width : 992px) and (max-width :1200px) {
	.hero {
		.row-content {
			padding-top: 0;
		}

		.hero-headline {
			padding-top: 0;
			font-size: 36px;
			line-height: 45px;
		}

		.hero-action {
			form {

				.form-control {
					width: 230px
				}
			}
		}
	}

}