:root {
	--warm-grey: #888888;
	--hd-orange: #f08200;
	--hd-dark-orange: #d87600;
	--hd-black: #232323;
}

html,
body {
	min-height: 100%;
	min-width: 100%;
	font-family: Lato;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: 0.1px;
	text-align: left;
	color: #232323;
	color: var(--hd-black);
	position: relative;
}

div {
	background:  transparent;
}

h1 {
	font-size: 33px;
	font-weight: 400;
	margin: 10px 0;
}

h2 {
	font-size: 22px;
	color: #444;
	text-align: center;
}

a {
	font-family: Lato;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: 0.1px;
	text-align: right;
	color: #f08200;
	color: var(--hd-orange);
	text-decoration: none;
}

/*
 * Mobile media query.
 */

@media all and (min-width: 930px) {

	#bd {
		background-color: #fff;
		position: relative;
		border-radius: 3px;
		border-style: solid;
		border-width: 1px;
		height: auto;
		margin: 0px auto 8px;
		width:  400px;
		min-width: 300px;
		border-top-color: rgb(221, 221, 221);
		border-right-color: rgb(221, 221, 221);
		border-bottom-color: rgb(216, 216, 216);
		border-left-color: rgb(221, 221, 221);
		box-shadow: 0 2px 0 hsla(0,0%,68.6%,.12);
		padding: 20px 42px 20px 42px;
	}

	#bg-image {
		background-size: cover;
		background-position: 50%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right:  0;
		z-index: -5;
	}

	#content-pane {
		min-width: 300px;
		min-height: 100%;
		display: inline-block;
		width: 100%;
	}

}

@media all and (max-width: 350px) {

 #bd {
	 border: 0;
	 box-shadow: none;
 }

 #content-pane {
		width: 300px;
	}
}