$page-header-bg:		$theme-color !default
$page-header-color:		#fff !default

#page-header
	background-repeat: no-repeat
	background-size: contain
	background-position: center top
	width: 100%
	position: relative
	border-bottom: 1px solid #f3f3f3
	background: $theme-color
	background: -moz-linear-gradient(top, $theme-color 0%, $theme-color 0%, #ffffff 100%)
	background: -webkit-gradient(left top, left bottom, color-stop(0%, $theme-color), color-stop(0%, $theme-color), color-stop(100%, #ffffff))
	background: -webkit-linear-gradient(top, $theme-color 0%, $theme-color 0%, #ffffff 100%)
	background: -o-linear-gradient(top, $theme-color 0%, $theme-color 0%, #ffffff 100%)
	background: -ms-linear-gradient(top, $theme-color 0%, $theme-color 0%, #ffffff 100%)
	background: linear-gradient(to bottom, $theme-color 0%, $theme-color 0%, #ffffff 100%)

	&:after
		content: ''
		background-image: url("../images/frontend/bg-header.png")
		background-repeat: no-repeat
		background-position: center bottom
		background-size: cover
		position: absolute
		bottom: 0
		left: 0
		width: 100%
		height: 100%

	.amy-wrap
		position: relative
		width: 100%
		min-height: 492px

		h1
			color: $page-header-color
			position: absolute
			bottom: 14px
			left: 0
			color: $theme-color
			font-size: 30px

		.amy-breadcrumb
			position: absolute
			bottom: 28px
			right: 0
			&, a
				color: $text-color

			a
				&:hover,
				&:active,
				&:focus
					text-decoration: underline

// responsive
@media (min-width: 1281px) and (max-width: 1600px)
	#page-header
		.amy-wrap
			min-height: 350px
@media(max-width: 767px)
	#page-header
		padding-top: 20px
		padding-bottom: 20px

		h1
			font-size: 26px
			margin-top: 16px