/* Extra small devices (portrait phones, less than 576px)
/* No media query for `xs` since this is the default in Bootstrap

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.viewport:after {
		content: 'SM, 576px and above';
	}

	.text-panel {
		height: 45vh;
	}

	.image-panel {
		height: 55vh;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.viewport:after {
		content: 'MD, 768px and above';
	}

	.text-panel {
		height: 35vh;
	}

	.text-panel .content {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.text-panel .subtitle {
		font-size: 13px;
	}

	.text-panel .heading {
		font-size: 27px;
	}

	.image-panel {
		height: 65vh;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.viewport:after {
		content: 'LG, 992px and above';
	}

	.text-panel {
		width: 50%;
		height: 100vh;
	}

	.text-panel .heading {
		font-size: 3.18vw;
	}

	.text-panel .subtitle {
		font-size: 18px;
		padding: 0 2px;
	}

	.image-panel {
		width: 50%;
		height: 100vh;
		background-position: center;
		background: linear-gradient(to right,
				#fff 0%,
				rgba(202, 223, 242, 0) 20%),
			url('../images/facade.png');
		background-size: cover;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.viewport:after {
		content: 'XL, 1200px and above';
	}

	.text-panel {
		width: 46%;
	}

	.image-panel {
		width: 54%;
	}

	.text-panel .heading {
		font-size: 2.52vw;
		font-weight: 600;
	}

	.text-panel .subtitle {
		font-size: 20px;
	}

	.text-panel .content {
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	}
}