.header-title {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;

	.title-wrap {
		width: 100%;
		height: 100%;
		display: table;
		position: relative;
		z-index: 2;
	}

	.bg-image {
		background: rgba($color_dark, .99);
		background-position: center center;
		background-size: cover;	
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}

	&:after {
		content: '';
		background: rgba(31, 31, 32, 0.6);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	&.without-cap .content {
		padding-top: 80px;
	}

	&.title-full {
		height: 100vh;

		.title-wrap {
			height: 100vh;
		}

		.content {
			padding-top: 0;
		}
	}

	.content {
		padding-top: 0px;
		position: relative;
		z-index: 2;
		display: table-cell;
		vertical-align: middle;
	}

	.wrap-container {
		padding: 0 15px;
	}

	.tags,
	h1.page-title,
	.subtitle {
		transform: translateY(40px);
		opacity: 0;
		transition: .5s cubic-bezier(.25,.6,.53,1);
		transition-property: opacity, transform;
	}

	.tags {
		width: 100%;
		display: inline-block;
		margin-bottom: 25px;
		transition-delay: .15s;

		.tag {
			color: #fff;
			border-color: rgba(#fff,.6);
		}
	}

	h1.page-title {
		width: 100%;
		max-width: 900px;
		margin: 0;
		display: inline-block;
		color: $color_white;
		text-align: inherit;
		font-size: $font_h1;
		line-height: 1.2;
		transition-delay: .3s;
	}

	.subtitle {
		max-width: 600px;
		color: #bbb;
		margin: 10px 0;
		line-height: 26px;
		text-align: inherit;
		font-size: $font_small-size;
		font-weight: 400;
		display: inline-block;
		position: relative;
		top: 50%;
		text-transform: uppercase;
		transition-delay: .45s;

		a {
			color: inherit;

			&:hover {
				text-decoration: underline;
			}
		}

		.square {
			background: #ebebeb;
			width: 3px;
			height: 3px;
			border-radius: 3px;
			display: inline-block;
			margin: 0 10px;
			vertical-align: 3px;
		}
	}

	&.show {
		.tags, .page-title, .subtitle {
			transform: none;
			opacity: 1;
		}
	}

	@media screen and (max-width: 768px) {
		height: auto;
		
		.title-wrap {
			margin-top: 60px;
		}

		.content {
			display: table-row;
			padding-top: 0px;
		}

		.page-container {
			height: 230px;
			vertical-align: middle;
			display: table-cell;
		}

		.wrap-container {
			padding: 0 0 40px 0;
		}

		h1.page-title {
			font-size: 40px !important;
			line-height: 48px !important;
			padding: 0;
			word-break: break-all;
		}

		&.without-cap .content {
			padding-top: 20px;
		}
	}
}