body, html {
	padding: 0;
	margin: 0;
	line-height: 170%;
    font-family: 'Karla', sans-serif;
	font-size: 18px;
	font-weight: 400;
    color: RGB(249, 248, 246);
    height: 100%;
    background-color: RGB(7, 54, 48);
}
h2 {
	font-family: 'Spectral', serif;
	font-weight: 500;
	font-size: 32px;
}
a {
    color: RGB(219, 199, 174);
	text-decoration: underline;
}
a:hover {
    color: RGB(238, 225, 216);
}

.container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 100%;
}
.left {
	background-color: black;
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	background-image: url("../bg/horizontal_bw.jpg");
	background-size: cover;
	background-position: top center;
}
.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 50px 80px;
}



@media screen and (min-width: 1400px) {
	
	body, html {
		font-size: 24px;
	}
	h2 {
		font-size: 60px;
	}
	
}

@media (orientation: portrait) {

	.container {
		flex-direction: column;
	}
	.left {
		padding-top: 60%;
		background-image: url("../bg/vertical_bw.jpg");
	}
	.main {
		padding: 30px;
	}


}

@media screen and (max-width: 700px) {
	
	.container {
		flex-direction: column;
	}
	.left {
		padding-top: 60%;
		background-image: url("../bg/vertical_bw.jpg");
	}
	.main {
		padding: 30px;
	}


}