* { border: 0; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: none; }

body { background: url('images/backdrop.jpg') top left; background-position: fixed; font-family: 'Oxygen', sans-serif; font-size: 100%; }

#frame { margin: 50px auto; max-width: 1000px; width: 98%; }

#banner { background: #E9E9EB; position: relative; width: 100%; }
#banner h1 { margin-left: 1%; }
#banner h2 { color: #26AFA9; font-size: 1em; margin: 0 0 0 2%; padding-bottom: 10px; }


	#facebook { position: absolute; right: 10px; top: 10px; width: 32px; }
	#twitter { position: absolute; right: 50px; top: 10px; width: 32px; }


#media { width: 100%; }

.bar_left { background: #E9E9EB; display: inline-block; height: 236px; width: 1%; vertical-align: top; }

#nav { display: inline-block; font-size: .7em; font-weight: light; min-height: 100px; width: 22.6%; vertical-align: top; }
#nav ul { list-style: none; margin: 20px 30px; text-transform: uppercase; }
#nav ul li { margin-bottom: 5px; }
#nav ul li a { color: white; text-decoration: none; }
#nav ul li a:hover { color: #2EA6A0; }
#nav ul li.selected a { color: #2EA6A0; }

.bar_middle { background: #E9E9EB; display: inline-block; height: 236px; width: 1%; vertical-align: top; }
.bar_middle_mobile { display: none; }

#slideshow { background: #E9E9EB; display: inline-block; position: relative; width: 74.4%; vertical-align: top; }
#slideshow img { display: block;  width: 100%; }

.slidesNavigation { display: none; }
.slidesPagination { display: none; }

#slides { height: 0; padding-bottom: 31.65%; }
#grey { background: url('images/grey.png') top left repeat-x; bottom: -1px; position: absolute; height: 35px; width: 100%; z-index: 50; }
#grey h4 { color: white; font-weight: light; text-transform: uppercase; margin: 8px 14px; }

.bar_right { background: #E9E9EB; display: inline-block; height: 236px; width: 1%; vertical-align: top; }

#content { background: #E9E9EB; color: #003945; font-size: .8em; line-height: 140%; min-height: 100px; padding: 15px 0; width: 100%; vertical-align: top; }
#content div.indent div.text { display: inline-block; margin-bottom: 10px; padding-right: 5%; width: 65%; vertical-align: top; }
#content div.indent div.right_image { display: inline-block; width: 30%; vertical-align: top; }
#content div.indent div.right_image img { width: 100%; }

#content h2 { font-weight: lighter; margin-bottom: -10px; text-transform: uppercase; }
#content h3 { color: #26AFA9; font-weight: lighter; margin-bottom: -20px; text-transform: uppercase; }

#subnav { display: inline-block; width: 26%; vertical-align: top; }
#subnav ul { list-style: none; margin: 0 0 0 8%; }
#subnav ul li a { color: #003945; text-decoration: none; text-transform: uppercase; }
#subnav ul li a:hover { color: #00AFAA; }

#boxes { background: #E9E9EB; margin: 0 auto; padding: 0 1%; width: 98%; }
#boxes > div { background: #26AFA9 url('images/arrow-blue.jpg') bottom right no-repeat; display: inline-block; min-height: 93px; width: 25%; vertical-align: top; }
#boxes > div a { color: white; display: block; height: 0; padding-bottom: 32%; text-decoration: none; width: 100%; }
#boxes > div div { margin: 10px 10px 0 10px; text-transform: uppercase; }
#boxes > div div img { float: left; display: inline-block; margin-right: 10px; }
#boxes > div div h4 { font-size: 0.8em; font-weight: lighter; padding-left: 10px; }

#boxes div.one { background: #003945 url('images/arrow-green.jpg') bottom right no-repeat; }
#boxes > div.one { width: 23%; }
#boxes > div.two { width: 25.5%; }
#boxes > div.three { width: 25.5%; }
#boxes > div.four { width: 26%; }

#footer { background: #E9E9EB; color: #26AFA9; font-size: .7em; padding: 20px 0 5px 1%; width: 99%; }
div.indent { display: inline-block; /*margin-left: 26.1%;*/ padding: 5px 0; width: 73%;  }
div.indent a { color: #26AFA9; }

@media screen and (max-width: 890px) {
	#frame { max-width: 670px; }
	#boxes > div.one { width: 50%; }
	#boxes > div.two { width: 50%; }
	#boxes > div.three { width: 50%; }
	#boxes > div.four { width: 50%; }
}

@media screen and (max-width: 690px) {
	#frame { max-width: 480px; }
	#nav { width: 98%; }
	div.bar_middle_mobile { background: #E9E9EB; display: inline-block; height: 158px; width: 1%; vertical-align: top; }
	.bar_right { background: #E9E9EB; display: inline-block; height: 158px; width: 1%; vertical-align: top; }
	#slideshow { height: 153px; padding-top: 5px; width: 98% !important; }
	div.indent { margin-left: 2%; width: 96%; }
	#content div.indent div.text {  width: 100%; }
	#content div.indent div.right_image {  width: 100%; }
	#subnav { margin-bottom: 10px; width: 100%; }
}

@media screen and (max-width: 500px) {
	#frame { max-width: 95%; }
	#nav { font-size: .8em; }
	#banner h1 img { width: 98%; }
	#boxes > div.one { margin-bottom: 5px; width: 100%; }
	#boxes > div.two { margin-bottom: 5px; width: 100%; }
	#boxes > div.three { margin-bottom: 5px; width: 100%; }
	#boxes > div.four { margin-bottom: 5px; width: 100%; }
}