#mondo-titlebar {
	background-color: @titlebar-bg-color;
	background-position: center;
	background-size: cover;
	color: @titlebar-text-color;
	position: relative;
	text-align: center;

	.page-title {
		margin: 0;
	}

	.page-subtitle {
		font-family: @titlebar-subtitle-font-family;
		font-size: @titlebar-subtitle-font-size;
		font-weight: @titlebar-subtitle-font-weight;
		line-height: @titlebar-subtitle-line-height;
		margin: 15px 0 0;
		text-transform: none;
	}

	&.thin {
		& > .container {
			padding-top: 30px;
			padding-bottom: 24px;
		}

		.page-title {
			color: @titlebar-thin-title-text-color;
			// font-family: @titlebar-thin-title-font-family;
			font-size: @titlebar-thin-title-font-size;
			// font-weight: @titlebar-thin-title-font-weight;
		}
		.page-subtitle {
			color: @titlebar-thin-subtitle-text-color;
			font-size: @titlebar-thin-subtitle-font-size;
			margin-top: 10px;
			text-transform: uppercase;
		}
	}
	&.wide,
	&.full {
		& > .container {
			max-width: @titlebar-container-max-width;
			position: relative;
			top: 50%;
			.translateY(-50%);
		}
	}
	&.wide {
		height: @titlebar-wide-height;
		& > .container {
			top: 55%;
		}
	}
	&.full {
		height: 100vh;
	}

	.blur {
		background-position: center;
		background-size: cover;
		opacity: 0;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	}
}