@charset "utf-8";
/* CSS Document */


#header {background-color: #0096D6; padding-top: 9px; padding-bottom: 9px;}

#context {margin-top: 8em; margin-bottom: 3.125em;}
.image_container {width: 20%; float:left; padding-left: 3%;}
.textarea {width:71%; float:left; padding-left: 3%; padding-right: 3%;}
.textarea h2 {font-family: "HPSimplified-light",arial; font-size: 3.5em; line-height: 1em; font-weight: 100; margin-top:0em;}
.textarea p {font-size: 1.5em; color: #767676; line-height: 1.125em;}
.textarea a {font-size: 1.5em; color:#0096D6; line-height: 1.125em;}
.textarea a:hover {color:#006699;}

@media only screen and (max-width: 1024px) and (min-width: 497px){
	.row { padding-left: 6%; padding-right: 6%; width:88%;}
	.row .row { padding-left: 0em; padding-right: 0em; width: 100%;}
	.image_container {width: 25%; padding-left: 0%;}
	.textarea  {width: 72%; padding-right: 0%;}
}

@media only screen and (max-width: 800px) and (min-width: 497px){
	.textarea h2 {font-size: 2.5em;}
	.textarea p {font-size: 1.25em;}
	.textarea a {font-size: 1.25em;}
}

@media only screen and (max-width: 496px){
	.row { padding-left: 2%; padding-right: 2%; width:96%;}
	#context {margin-top: 2em;}
	.image_container {width: 100%; max-width: 60px; padding: 0em;}
	.textarea {width:100%; padding: 0em;}
	.textarea h2 {font-size: 2em; margin-top: 0.3125em;}
	.textarea p {font-size: 1em;}
	.textarea a {font-size: 1em;}
}