/* @override http://www.gmxco.com/css/gmx.css
	http://gmx.site/css/gmx.css */

/* @group Universal */

/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
   	vertical-align: top; removed from block by us
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

/* HTML5 elements */
section, article, header, footer, nav, aside {display: block;}

body, html {
	background-color: #ffffff;
	color: #333333;
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-size: 100%;
	line-height: 1.5;
}

.wrap {width: 100%; overflow: auto;}

.container_16 {margin: 0 auto;}

img {max-width: 100%; height: auto;}


#masthead, #elevator, #content, #feature, #footer {
	clear: both;
	margin-bottom: 1em;
}

nav {
	background-color: #ffffff;
	position: relative;
	z-index: 5000;
}

#menu-icon {display: none;}

#elevator {border-bottom: 4px double #2a6fb5;}

#footer {
	background-color: #001133;
	color: #eeeeee;
}

.footer-phone, .footer-nav, .footer-share {padding-bottom: 1em;}


/* TYPOGRAPHY */

#elevator h1 {
	font-family: 'Playfair Display', Georgia, "Times New Roman", Times, serif;
	padding: .5em 1em 1em 1em;
}

#elevator p {
	color: #003388;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: .5em .5em 0 .5em;
}

#content h2, #content h3, #content p {padding: 0.625em; /* 10px/16px */}

#content h2, #content h3 {font-weight: bold;}
#content h2 {color: #556622;}
#content h3 {color: #797261;}

#content p, #content li {font-size: 0.875em;}

#content p + p {padding-bottom: 0.3125em;}

#content p.intro {
	font: italic normal 1em/1.75em Georgia, "Times New Roman", Times, serif;
}

#footer h2 {
	color: #eeeeee;
	font-weight: bold;
	margin-top: ;
	padding: 1em 0 0 .875em;
}

#footer p {
	font-size: 0.875em;
	padding: 1em;
}

#footer h2 + p, #footer p + p {padding-top: 0;}

.footer-nav {text-align: center;}

hr {
	border: none 0;
	clear: both;
	width: 96%;
	height: 1px;
	margin: 0 0 .625em 2%;
	padding: 0;
	/* left align in IE, Opera */
	text-align: left;
}

#content hr {border-top: 1px dashed #333333;}
#footer hr {border-top: 1px solid #888888;}

ul, ol {
	margin-left: 1.25em; /* 20px/16px */
	padding: 0.625em; /* 10px/16px */
}

li	{padding-bottom: 0.5em;}

#footer p {
	font-size: 0.875em;
}

#feature h2 {
	border-bottom: 1px dashed #ffffff;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
}

#feature p {color: #ffffff;}


/* LINKS */

a:link    {color: #003388;}
a:visited {color: #2a6fb5;}
a:hover   {color: #556622;}
a:active  {color: #556622;}

#footer a:link    {color: #aaccff;}
#footer a:visited {color: #eeeeee;}
#footer a:hover   {color: #ff8833;}
#footer a:active  {color: #ff8833;}

.btn {
	border-radius: .375em;
	display: inline-block;
	font-weight: bold;
	padding: .5em 1em;
	text-decoration: none;
}

a.btn.bg-blue {color: #ffffff;}
a.btn.bg-blue:hover {
	background-color: #003388;
	color: #ffffff;
}

a.btn.bg-green {color: #ffffff;}
a.btn.bg-green:hover {
	background-color: #334411;
	color: #ffffff;
}

a.btn.bg-red {color: #ffffff;}
a.btn.bg-red:hover {
	background-color: #841005;
	color: #ffffff;
}

/* COLOR PALETTE*/

.bg-blue-dark {background-color: #003388;}
.cp-blue-dark {color: 			 #003388;}

.bg-blue {background-color: #2a6fb5;}
.cp-blue {color: 			#2a6fb5;}

.bg-green {background-color: #556622;}
.cp-green {color: 			#556622;}

.bg-khaki-dark {background-color:	#797261;}
.cp-khaki-dark {color:				#797261;}

.bg-khaki {background-color:	#a39c8c;}
.cp-khaki {color:				#a39c8c;}

.bg-gray-dark {background-color:	#333333;}
.cp-gray-dark {color:				#333333;}

.bg-gray {background-color:	#cccccc;}
.cp-gray {color:			#cccccc;}

.bg-red {background-color: #b10f00;}

/* MARGIN & PADDING */

.whtspc-1  {margin: 		1em;}
.whtspc-1t {margin-top: 	1em;}
.whtspc-1r {margin-right: 	1em;}
.whtspc-1b {margin-bottom:  1em;}
.whtspc-1l {margin-left: 	1em;}

.whtspc-15 	{margin: 		1.5em;}
.whtspc-15t {margin-top: 	1.5em;}
.whtspc-15r {margin-right: 	1.5em;}
.whtspc-15b {margin-bottom: 1.5em;}
.whtspc-15l {margin-left: 	1.5em;}

.nudge-1  {margin:			1em;}
.nudge-1t {margin-top:		1em;}
.nudge-1r {margin-right:	1em;}
.nudge-1b {margin-bottom:	1em;}
.nudge-1l {margin-left:		1em;}

.nudge-15  {padding: 		1.5em;}
.nudge-15t {padding-top: 	1.5em;}
.nudge-15r {padding-right: 	1.5em;}
.nudge-15b {padding-bottom: 1.5em;}
.nudge-15l {padding-left: 	1.5em;}


/* ALIGNMENT */

.alignright {float:right;}
.alignleft {float:left;}
.aligncenter {display: block; margin-left: auto; margin-right: auto}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}


/* FORM INPUTS */

input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {width: 96%; margin-left: 2%; margin-bottom: 1.5em;}

input[type='text'],
input[type='email'],
input[type='tel'],
textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input#builder-other,
input#contractor-other,
input#architect-other,
input#homeowner-other {
	width: 80%;
}

label {
	margin-left: 1em;
}


/* NICOLE SULLIVAN'S MEDIA OBJECT: bit.ly/cCY3Ew
I've renamed the classes and slightly modified the code. */

.profile,
.profile h2,
.profile h3,
.profile p,
.profile ul,
.profile li {overflow: hidden;}
.profile-pic {float: left;}
.profile-pic img {display: block;}


/* STYLING */

.shadow {box-shadow: 0 .125em .25em 0 rgba(110,10,40,.2);}

.mat {
	background-color: #ffffff;
	border: 1px solid #bbbbbb;
	padding: .5625em .5625em .625em .5625em;
}

.rounded {border-radius: .5em;}


/* BACK TO TOP */

#backtotop {
	position: fixed;
	right:0px;
	bottom:15px;
	display:none;/*hid the button first*/
}
#backtotop a {
	text-decoration:none;
	border:0 none;
	display:block;
	width:24px;
	height:90px;
}
#backtotop a:hover {
	opacity:.7; /*mouse over fade effect*/
}

/* FIELDSET */

.wr_fieldset {
	width: 95%; 
	margin: 0.875em;
	padding: 0;
}

.wr_fieldset fieldset {border: 1px solid #003f76; }

.wr_fieldset legend {
	margin: 0 0.875em;
	padding: 0 0.3125em;
	color: #003f76;
	font-size: 0.875em;
	font-weight: bold;
}

.wr_fieldset_pad {
	margin: 0;
	padding: 0.5em;
}


/* TABLES & ZEBRA STRIPES */
table {border-collapse: collapse;}


th {
	background: #555555;
	color: #ffffff;
	font-weight: bold;
}

td, th {
	border-bottom: 1px solid #cccccc;
	padding: .625em;
	vertical-align: top;
}


table.zebra-stripe tr:nth-of-type(even) {background-color: #eeeeee;}


table.frm td {
	width: 90%;
	padding: 3px; 
	font-size: 0.875em;
}
	
table.frm caption {
	text-align: left;
}


/* FLEXIBLE CONTAINER */

.Flexible-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 2em;
	height: 0;
	overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* @end */




/* ---- SMALL ---- */

@media screen and (max-width: 600px) {

/* iOS and Windows Mobile font-size changes fix from Ethan Marcotte */
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}

/* @group S: Grid */

/*

	960 Grid System ~ Core CSS.

	Learn more ~ http://960.gs/



	Licensed under GPL and MIT.

*/

.container_16 {}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  margin-left: .625em;
  margin-right: .625em;
}

/* @end */


/* @group S: Structure */

body, html {background-color: #ffffff;}

#small-logo {
	margin-top: .5em;
	margin-bottom: .75em;
}

#masthead  {}

#feature {padding-bottom: 1.25em; /* 20px/16px */}

#content img {max-width: 100%;}

#masthead,
#elevator,
#content,
#feature,
#footer {
	margin-left: 2%;
	margin-right: 2%;
}

.product-grid .grid_4 {
	display: inline;
	float: left;
	width: 40%;
}

.product-grid img {margin-top: 1em;}

#content.product-grid p {
	padding-left: 0;
}

.hide-on-mobile {display: none;}

/* @end */


/* @group S: Typography */

#elevator h1 {font-size: 1.5em;}

#content h2, #content h3 {font-size: 0.875em;}

.footer-nav a {
	display: block;
	font-size: 1.25em;
	margin: 0 .5em;
	padding: .25em;
}

#footer .footer-nav a:hover,
#footer .footer-nav a:active {
	background-color: #2a6fb5;
	border-radius: .25em;
	color: #ffffff;
}

.footer-nav p {color: #001133;}
/* hides the bullets separating the links */

.footer-design-cred {font-size: .75em;}

/* @end */


/* @group Touch Menu */

#nav-wrap {
	margin-top: .5em;
	margin-bottom: .5em;
}

nav a {
	padding-right: 1em;
	display: inline-block;
}

#menu-icon {
		background: #003388 url(../images-gmx/mobile-menu-icon-white.gif) no-repeat .625em center;
		color: #ffffff;
		cursor: pointer;
		display: block; /* show menu icon */
		font-weight: bold;		
		height: 2em;
		padding: .75em 0 0 3em;
	}

#menu-icon:hover,
#menu-icon.active {background-color: #2a6fb5;}

ul#topnav {
	background-color: #ddeeff;
	margin: 0;
	padding-top: 0;
	text-align: left;
	display: none;/* visibility will be toggled with jquery */
}

ul#topnav li {
	border-bottom: 1px solid #ffffff;
	display: block;
	list-style: none;
	padding: 0.5em 2em;
}

ul#topnav li a {
	color: #003388;
	display: block;
	font-weight: bold;
	padding: .25em;
	text-decoration: none;
}

ul#topnav li a:hover {
	background-color: #2a6fb5;
	border-radius: .25em;
	color: #ffffff;
}

ul#topnav li .sub,
ul#topnav li .sub ul,
ul#topnav .sub ul li,
ul#topnav .sub ul li h2,
ul#topnav .sub ul li a {
	display: none;
}

/* @end */

}/*/mediaquery*/




/* ---- MEDIUM ---- */

@media screen and (min-width: 601px) {

body, html {
	background: #eeeeee url(../images-gmx/bg-concrete_wall_2.jpg);
}


/* @group Grid 16 */

.container_16

{

	background-color: #ffffff;
	max-width: 960px;
	width: 92%;

	margin-left: auto;

	margin-right: auto;
	overflow: auto;
	-webkit-box-shadow: 0 .25em .5em 0 rgba(51,51,51,.7);
	   -moz-box-shadow: 0 .25em .5em 0 rgba(51,51,51,.7);
			box-shadow: 0 .25em .5em 0 rgba(51,51,51,.7);

}



.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9,

.grid_10,

.grid_11,

.grid_12,

.grid_13,

.grid_14,

.grid_15,

.grid_16

{

	display: inline;

	float: left;

	margin-left: 1%;

	margin-right: 1%;

}



.container_16 .grid_1 {width: 4.25%;}

.container_16 .grid_2 {width: 10.5%;}

.container_16 .grid_3 {width: 16.75%;}

.container_16 .grid_4 {width: 23%;}

.container_16 .grid_5 {width: 29.25%;}

.container_16 .grid_6 {width: 35.5%;}

.container_16 .grid_7 {width: 41.75%;}

.container_16 .grid_8 {width: 48%;}

.container_16 .grid_9 {width: 54.25%;}

.container_16 .grid_10 {width: 60.5%;}

.container_16 .grid_11 {width: 66.75%;}

.container_16 .grid_12 {width: 73%;}

.container_16 .grid_13 {width: 79.25%;}

.container_16 .grid_14 {width: 85.5%;}

.container_16 .grid_15 {width: 91.75%;}

.container_16 .grid_16 {width: 98%;}

.alpha {margin-left: 0;}

.omega {margin-right: 0;}


.container_16 .prefix_1 {padding-left: 6.25%;}

.container_16 .prefix_2 {padding-left: 12.5%;}

.container_16 .prefix_3 {padding-left: 18.75%;}

.container_16 .prefix_4 {padding-left: 25%;}

.container_16 .prefix_5 {padding-left: 31.25%;}

.container_16 .prefix_6 {padding-left: 37.5%;}

.container_16 .prefix_7 {padding-left: 43.75%;}

.container_16 .prefix_8 {padding-left: 50%;}

.container_16 .prefix_9 {padding-left: 56.25%;}

.container_16 .prefix_10 {padding-left: 62.5%;}

.container_16 .prefix_11 {padding-left: 68.75%;}

.container_16 .prefix_12 {padding-left: 75%;}

.container_16 .prefix_13 {padding-left: 81.25%;}

.container_16 .prefix_14 {padding-left: 87.5%;}

.container_16 .prefix_15 {padding-left: 93.75%;}



.container_16 .suffix_1 {padding-right: 6.25%;}

.container_16 .suffix_2 {padding-right: 16.5%;}

.container_16 .suffix_3 {padding-right: 18.75%;}

.container_16 .suffix_4 {padding-right: 25%;}

.container_16 .suffix_5 {padding-right: 31.25%;}

.container_16 .suffix_6 {padding-right: 37.5%;}

.container_16 .suffix_7 {padding-right: 43.75%;}

.container_16 .suffix_8 {padding-right: 50%;}

.container_16 .suffix_9 {padding-right: 56.25%;}

.container_16 .suffix_10 {padding-right: 62.5%;}

.container_16 .suffix_11 {padding-right: 68.75%;}

.container_16 .suffix_12 {padding-right: 75%;}

.container_16 .suffix_13 {padding-right: 81.25%;}

.container_16 .suffix_14 {padding-right: 87.5%;}

.container_16 .suffix_15 {padding-right: 93.75%;}

/* @end */


/* @group M: Structure */

#masthead, #elevator, #content, #feature, #footer {
	float: left;
	margin-bottom: 1.25em; /* 20px/16px */
}

#masthead  {}

.footer-design-cred {
	font-size: .75em;
	text-align: right;
}

.show-on-small {display: none;}

/* @end */


/* @group M: Typography */

#elevator h1 {font-size: 1.5em;}

/* @end */


/* @group M: mega menu */

nav {text-align: center;}

ul#topnav {
	margin: 0; padding: 0;
	display: block !important;
	width: 100%;
	list-style: none;
}

ul#topnav li {
	display: inline-block;
	*display: inline; /* IE7 */
	*zoom: 1; /* IE7 */
	margin: 0; padding: 0;
	position: relative;
	*overflow: hidden; /* IE7 */
}

ul#topnav li a.nav-gmx,
ul#topnav li a.nav-about,
ul#topnav li a.nav-products,
ul#topnav li a.nav-resources,
ul#topnav li a.nav-warranty,
ul#topnav li a.nav-contact,
ul#topnav li a.nav-home {
	color: #003388;
	*display: inline-block; /* IE comp. fix for the issue mentioned below in ul#topnav li a.nav-gmx*/
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: .875em;
	font-weight: bold;
	margin: 1em .125em;
	padding: .125em;
	text-decoration: none;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
}

ul#topnav li a.nav-gmx {
	background: url(../images-gmx/nav-logo.gif) no-repeat center top;
	display: inline-block; /* IE compatibility has a problem with this */
	text-indent: -9999px;
	width: 6.5em;
	-ms-behavior: url(../backgroundsize.min.htc);
	-webkit-background-size: contain;
	   -moz-background-size: contain;
		 -o-background-size: contain;
			background-size: contain;
}

ul#topnav li a.nav-gmx {
	*background: none;
	*text-indent: 0px;
	*width: auto;
}/* hack for IE compatibility mode */

ul#topnav li:hover a, ul#topnav li a:hover {
	background-color: #2a6fb5;
	border-radius: .25em;
	color: #ffffff;
}

ul#topnav li:hover a.nav-gmx,
ul#topnav li a:hover.nav-gmx {
	background-color: transparent;
}

ul#topnav li:hover a.nav-gmx,
ul#topnav li a:hover.nav-gmx {
	*background-color: #ffffff;
}/* hack for IE compatibility mode */

ul#topnav li .sub {
	position: absolute;	
	top: 1.375em; left: 0;
	border: 1px solid #003388;
	background-color: #ddeeff;
	padding: 1em;
	float: left;
	text-align: left;
	display: none;
	box-shadow: 0 .125em .25em #888888;
}

ul#topnav li:hover .sub,
ul#topnav li a:hover .sub {display: block;}

ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 200px;
	float: left;
}

/* width 100% overrides parent list item */
ul#topnav .sub ul li {
	width: 100%; 
	color: #333333;
}

ul#topnav .sub ul li h2 {
	padding: 0; margin: 0;
	font-size: 14px;
	
}
ul#topnav .sub ul li h2 a {
	padding: 7px 5px 7px 5px;
	background-image: none;
	color: #0088bb;
	font-weight: bold;
}

/* removed from tutorial code - background: url(navlist_arrow.png) no-repeat 5px 12px; */

ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 7px 5px 7px 5px;
	display: block;
	text-decoration: underline;
	font-size: 14px;
	background-color: #ddeeff;
	color: #003388;
	text-shadow: none;
}

ul#topnav .sub ul li a:hover {
	background-color: #003388;
	color: #ffffff;
	display: block;
	background-position: 5px 12px ;
	padding: 7px 5px 7px 5px;
}

/* @end */

}/*/mediaquery*/




/* ---- LARGE ---- */

@media screen and (min-width: 901px) {

/* @group L: Structure */

#masthead  {}

#feature {padding-bottom: 20px;}

/* @end */

/* @group L: Typography */

#elevator h1 {font-size: 2em;}

#content h2, #content h3 {
	font-size: 1.125em; /* 18px / 16px */
}


#feature h2 {
	font-size: 1.75em; /* 44px/16px */
	padding: 0.25em; /* 11px/44px */
	text-shadow: 0px -1px 1px #777777;
}


#feature p {
	font-size: 1.25em; /* 20px/16px*/
	padding: 0.55em; /* 11px/20px */
}

/* @end */


/* @group L: Elements */

.icon {
	padding: 0 .5em 0 0;
}

/* @end */


/* @group L: mega menu */

ul#topnav li a.nav-gmx,
ul#topnav li a.nav-about,
ul#topnav li a.nav-products,
ul#topnav li a.nav-resources,
ul#topnav li a.nav-warranty,
ul#topnav li a.nav-contact,
ul#topnav li a.nav-home {
	font-size: 1.125em;
	margin: 1em .25em;
	padding: .5em .25em;
}

ul#topnav li a.nav-gmx {
	height: 1.75em;
	-ms-behavior: url(../backgroundsize.min.htc);
	-webkit-background-size: contain;
	   -moz-background-size: contain;
		 -o-background-size: contain;
			background-size: contain;
}

ul#topnav li .sub {
	top: 1.75em; left: 0;
	padding: 1em;
}

/* @end */

}/*/mediaquery*/