.page-title {
	text-align: center;
	position: relative;

	&:before {
		content: "";
		@include overlay(transparentize($black, 0.3));
		z-index: 50;
	}

	.page-title-bg {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		-webkit-filter: sepia(100%);
		filter: sepia(100%);
	}	

	> .container {
		position: relative;
		height: 390px;
		z-index: 100;

		@include media-query(991px) {
			height: 320px;
		}
	}

	.title-box {
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		@include center-by-translating();

		h1 {
			font-size: 50px;
			color: $theme-primary-color;
			margin: 0 0 0.25em;
			text-transform: uppercase;

			span {
				color: $white;
			}

			@include media-query(991px) {
				font-size: 40px;
			}

			@include media-query(767px) {
				font-size: 30px;
			}
		}

		ol {
			background: transparent;
			padding: 0;
			margin: 0;

			li,
			a {
				color: $breadcrumb-color;
				font-size: 18px;
				text-transform: capitalize;

				@include media-query(991px) {
					font-size: 16px;
				}

				@include media-query(767px) {
					font-size: 15px;
				}
			}

			a:hover {
				text-decoration: none;
				color: $theme-primary-color;
			}	
		}
	}
}