/*css reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	background-position: c c;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/* ---  end of css reset  --- */

* {
	transition: all 0.3s ease;
	box-sizing: border-box;
}
body {
	margin-top: 10px;
	margin-bottom: 20px;
}

.backgroundImg{
	background-image: url(images/topographic_map_background.jpg);
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	top: 1px;
	left: 1px;
}

#container {
	/*width: 960px;*/
	width: 90%;
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
	-webkit-box-shadow: 1px 1px 4px 3px #1c2129;
	box-shadow: 1px 1px 4px 3px #1c2129;
}

a {
	text-decoration: none;
}

#indxCntctUs {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	padding-bottom: 10px;
}

#indxCntctUs:hover {
	color: #a6a481;
	font-weight: bold;
}

header p#logo {
	background: url(images/gpgLogo.png) no-repeat;
	height: 170px;
	width: 190px;
	position: absolute;
	top: 20px;
	left: 50px;
	text-indent: -9999px;
}

header {
	background: #7C7466 url(images/gpgLogoOlvLt-GrnSmaller.jpg);
	height: 190px;
}

header h1 {
	font-family: 'Sigmar One', cursive;
	color: #1c2129;
	font-size: 36px;
	text-align: right;
	position: absolute;
	top: 60px;
	right: 50px;
}

header h2 {
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	color: #1c2129;
	font-size: 20px;
	text-align: right;
	position: absolute;
	top: 117px;
	right: 50px;
}


/*---     start of main_nav     ---*/
	nav {
		height: 30px;
		padding: 5px 40px 5px 0;
		background: #7C7466;
	}

	#hamburger {
		display: none;
	}

	#main_nav ul {
		list-style: none;
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;
		font-size: 14px;
		letter-spacing: 3px;
		text-transform: uppercase;
		float: right;
		line-height: .5em;
	}

	#main_nav ul li {
		display: inline;
	}

	#main_nav a {
		text-decoration: none;
		color: #fff;
		display: block;
		text-align: center;	
		padding: 5px 10px;
		float: left;
	}  

	#main_nav a:hover {
		background: #b5a995;
		font-weight: bold;
		text-decoration: none;
		border-radius: 3px;
		transition: all linear 0.25s;
	}
/*---      end of main_nav      ---*/

#content {
	overflow: hidden;
	background-image: url(images/CustomizationLanding.jpg);
}

section {
	width: 60%;
	padding: 20px 30px 20px 40px;
	float: left;
	position: relative;
}

div.about_us {
	height: 400px;
}

section.graphics, section.webdesign {
	width: 50%;
	padding: 20px 30px 20px 40px;
}

section.index, section.portfolio, section.contact {
	width: 100%;
	padding: 20px 40px;
}

/*div#portfolio_1, #portfolio_2, #slideshow {
	width: 50%;
	padding: 20px;
	float: left;
}*/

div.area {
	width: 50%;
	float: left;
	/*box-sizing: content-box;*/
}

article {
	height: 410px;
	margin: 5px;
	border: thin solid #939393;
	padding: 10px;
}

div.samples {
	margin: 0 auto;
}

img.grphcs {
	margin: 0 auto;
	padding: 0 5px;
}

#normPhoto {
	max-width: 300px;
	margin: 0 auto;
	padding: 0 5px;
}

section p {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	padding-bottom: 10px;
}

section p.area {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	padding: 10px 5px;
}

section p.clickHere {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 10px;
	font-style: italic;
	letter-spacing: 1px;
	line-height: 18px;
	padding: 0 5px;
}

.underLine {
	border-bottom: 1px solid #1c2129;
}

section h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #435a4e;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 22px;
	padding-bottom: 8px;
}

section.contact a {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	padding-bottom: 8px;
	/*padding-top: 10px;*/
}

section.contact p a:hover {
	color: #b5a995;
	font-weight: bold;
}

section h3 {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	color: #435a4e;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 18px;
	padding-bottom: 8px;
}

section img#grphcs {
	height: 140px;
}

section img#wbdsgn {
	height: 230px;
}

#container aside {
	postion: relative;
}

aside.background {
	width: 40%;
	height: auto;
	padding: 15px;
	float: left;
	background: #A6A481 url(images/samples.png) no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	top: 25px;
	right: 20px;
	border: solid;
	border-color: #1c2129;
	border-width: 1px;
}

div.transbox {
	margin: 30px;
	background-color: #fff;
	border: solid;
	border-color: #1c2129;
	border-width: 1px;
	opacity: 0.6;
}

div.transbox:hover {
	opacity: 0.9;
}

aside.webdesign, aside.graphics {
	width: 50%;
	height: auto;
	padding: 20px 50px 20px 30px;
	float: left;
	/*background: #dad2b6;*/
	position: relative;
	top: auto;
	right: auto;
	border: none;
	border-color: #1c2129;
	border-width: 0;
}

aside div h2 {
	font-family: 'Sigmar One', cursive;
	text-align: center;
	color: #435a4e;
	font-size: 12px;
	letter-spacing: 2px;
	padding: 8px;
	position: relative;
}

aside.portfolio p, aside.graphics p {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 22px;
	padding-bottom: 8px;
}

aside.portfolio h2, aside.webdesign h2, aside.graphics h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #435a4e;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 22px;
}

aside h3 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #435a4e;
	font-size: 12px;
	letter-spacing: 2px;
	line-height: 18px;
	padding-bottom: 8px;
}

aside.graphics li, aside.webdesign li {
	font-family: 'Open Sans', sans-serif;
	color: #1c2129;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	text-indent: 0;
	padding-top: 4px;
	padding-bottom: 6px;
}

#slideshow {
	width: auto;
	height: 320px;
	left: 10px;
	position: relative;
}
	
#slideshow > div {
	position: absolute;
	top: 0;
	left: 0;
}

/* below is design & credit */
footer {
	clear: both;
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #dad2b6;
	background: #7C7466;
	padding: 10px;
}

footer #lowerNav {
	text-align: center;
	font-size: 12px;
	padding-bottom: 10px;
	text-transform: uppercase;
}

footer #designBy {
    text-align: right;
    font-size: 12px;
    color: #1c2129;
	line-height: 14px;
    margin-right: 40px;
    padding-bottom: 5px;
}

footer #credits {
    text-align: right;
    font-size: 10px;
    margin-right: 40px;
	padding-bottom: 7px;
}

footer a {
	color: #dad2b6;
}

footer a:hover {
	color: #fff;
	font-weight: bold;
}


/*  start lightbox2  */
.lb-loader,.lightbox {
	text-align:center;
	line-height:0
}
body:after {
	content:url(images/close.png) url(images/loading.gif) url(images/prev.png) url(images/next.png);
	display:none
}
.lb-dataContainer:after,.lb-outerContainer:after {
	content:"";
	clear:both
}
body.lb-disable-scrolling {
	overflow:hidden
}
.lightboxOverlay {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	background-color:#000;
	filter:alpha(Opacity=80);
	opacity:.8;
	display:none
}
.lightbox {
	position:absolute;
	left:0;
	width:100%;
	z-index:10000;
	font-weight:400
}
.lightbox .lb-image {
	display:block;
	height:auto;
	max-width:inherit;
	border-radius:3px
}
.lightbox a img {
	border:none
}
.lb-outerContainer {
	position:relative;
	background-color:#fff;
	width:250px;
	height:250px;
	margin:0 auto;
	border-radius:4px
}
.lb-loader,.lb-nav {
	position:absolute;
	left:0
}
.lb-outerContainer:after {
	display:table
}
.lb-container {
	padding:10px
}
.lb-loader {
	top:43%;
	height:25%;
	width:100%
}
.lb-cancel {
	display:block;
	width:32px;
	height:32px;
	margin:0 auto;
	background:url(images/loading.gif) no-repeat
}
.lb-nav {
	top:0;
	height:100%;
	width:100%;
	z-index:10
}
.lb-container>.nav {
	left:0
}
.lb-nav a {
	outline:0;
	background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next,.lb-prev {
	height:100%;
	cursor:pointer;
	display:block
}
.lb-nav a.lb-prev {
	width:34%;
	left:0;
	float:left;
	background:url(images/prev.png) left 48% no-repeat;
	filter:alpha(Opacity=0);
	opacity:0;
	-webkit-transition:opacity .6s;
	-moz-transition:opacity .6s;
	-o-transition:opacity .6s;
	transition:opacity .6s
}
.lb-nav a.lb-prev:hover {
	filter:alpha(Opacity=100);
	opacity:1
}
.lb-nav a.lb-next {
	width:64%;
	right:0;
	float:right;
	background:url(images/next.png) right 48% no-repeat;
	filter:alpha(Opacity=0);
	opacity:0;
	-webkit-transition:opacity .6s;
	-moz-transition:opacity .6s;
	-o-transition:opacity .6s;
	transition:opacity .6s
}
.lb-nav a.lb-next:hover {
	filter:alpha(Opacity=100);
	opacity:1
}
.lb-dataContainer {
	margin:0 auto;
	padding-top:5px;
	width:100%;
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px
}
.lb-dataContainer:after {
	display:table
}
.lb-data {
	padding:0 4px;
	color:#ccc
}
.lb-data .lb-details {
	width:85%;
	float:left;
	text-align:left;
	line-height:1.1em
}
.lb-data .lb-caption {
	font-family: 'Open Sans', sans-serif;
	font-size:13px;
	font-weight:700;
	line-height:1em
}
.lb-data .lb-number {
	display:block;
	clear:left;
	padding-bottom:1em;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	color:#999
}
.lb-data .lb-close {
	display:block;
	float:right;
	width:30px;
	height:30px;
	background:url(images/close.png) top right no-repeat;
	text-align:right;
	outline:0;
	filter:alpha(Opacity=70);
	opacity:.7;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	-o-transition:opacity .2s;
	transition:opacity .2s
}
.lb-data .lb-close:hover {
	cursor:pointer;
	filter:alpha(Opacity=100);
	opacity:1
}
/*  end of lightbox2  */	



	/*  1 of 3  MEDIA QUERY  */
@media screen and (min-width:811px) and (max-width: 920px) {
	body {
		background: none;
		margin: 0;
	}

	#container {
		width: 100%;
	}
	
/*--- start main_nav ---*/
	#main_nav ul {
		font-size: 14px;
		letter-spacing: 2px;
		float: right;
	}
/*--- end main_nav ---*/
}


	/*  2 of 3  MEDIA QUERY  */
@media screen and (min-width:711px) and (max-width: 810px) {
	body {
		background: none;
		margin: 0;
	}

	#container {
		width: 100%;
	}

/*--- start main_nav ---*/
	#main_nav ul {
		font-size: 14px;
		letter-spacing: 2px;
		float: right;
	}
/*--- end main_nav ---*/
	section {
		width: 66.66%;
	}

	aside {
		width: 33.33%;
	}
}

	/*  3 of 3  MEDIA QUERY  */
@media screen and (max-width: 710px) {
	body {
		background: none;
		margin: 0;
	}

	#container {
		width: 100%;
	}
	
	header p#logo {
		background: url(images/gpgLogo.png);
		background-size: cover;
		height: 90px;
		width: 100px;
		position: relative;
		margin: 0px auto;
		top: 0;
		left: 0;
		text-indent: -9999px;
	}
	
	header h1 {
		font-size: 26px;
		text-align: center;
		top: 19px;
		right: 0;
		position: relative;
	}

	header h2 {
		font-size: 12px;
		text-align: center;
		top: 20px;
		right: 0;
		position: relative;
	}
	
/*--- start main_nav ---*/
	nav {
		height: auto;
		padding: 0;
	}

	#main_nav ul {
		display: none;
	}
	
	#main_nav.open ul {
		display: block;
		float: none;
	}
	
	#main_nav a {
		background: #7C7466;
		width: 100%;
		border-right: none;
		float: none;
		line-height: 40px;
	}
	
	#main_nav ul li {
		display: block;
	}

	#hamburger {
		display: block;
		color: #fff;
		position: absolute;
		/*background: #7c7466;*/
		padding: 5px;
		top: 5px;
		right: 5px;
		cursor: pointer;
		background: url(images/hamburger.png);
		background-repeat: no-repeat;
		width: 40px;
		height: 50px;
		text-indent: -9999px;
	}
/*--- end main_nav ---*/

	section {
		width: 100%;
		padding: 30px;
	}
	
	section.graphics {
		width: 100%;
		padding: 30px;
	}
	
	section.webdesign {
		width: 100%;
		padding: 30px;
	}
	
	div.area {
		width: 100%;
		float: left;
	}
	
	section p {
		font-size: 14px;
	}
	
	aside {
		width: 100%;
		padding: 30px;
		font-size: 14px;
		margin: 0;
		top: 0;
		right: 0;
		border: none;
		display: none;
	}

	aside.graphics {
		width: 100%;
		padding: 30px 30px 30px 40px;
		font-size: 14px;
		margin: 0;
		position: relative;
		top: 0;
		right: 0;
		border: none;
		display: inherit;
	}
	
	aside.webdesign {
		width: 100%;
		padding: 30px 30px 30px 40px;
		font-size: 14px;
		margin: 0;
		border: none;
		display: inherit;
	}
	
	aside.portfolio {
		width: 100%;
		height: 380px;
		padding: 30px;
		font-size: 14px;
		margin: 0;
		position: relative;
		top: 0;
		right: 0;
		border: none;
		display: inherit;
	}
	
	div#portfolio_1, div#portfolio_2, #slideshow {
		width: 100%;
		padding: 5px 10px;
		float: left;
	}
	
	article {
		height: 450px;
	}
		
	aside.graphics li {
		font-size: 14px;
	}
	
	aside.webdesign li {
		font-size: 14px;
	}
	
	#slideshow {
		left: 0;
	}

	footer #lowerNav {
		font-size: 10px;
	}
	
	footer #designBy {
		font-size: 10px;
		margin-right: 10px;
		padding-bottom: 5px;
	}

	footer #credits {
		font-size: 10px;
		margin-right: 10px;
	}
}