@charset "UTF-8";
/*
  Colors
  Logo Blue:  #163744
  Logo Brown: #cf8143

  Light Blue: #255e73
  Dark Brown: #b97446
*/

body {
	width:100%;
	background: #13313e;
	color: black;
	font: 16px/26px 'Muli', "Arial", sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 32px; line-height: 35px; margin-bottom: 10px; }
h2 { font-size: 26px; line-height: 30px; margin-bottom: 8px; }
h3 { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
h4 { font-size: 16px; line-height: 26px; }
h5 { font-size: 14px; line-height: 21px; }
h6 { font-size: 12px; line-height: 19px; }

a, a:visited { color: black; text-decoration: underline; }
a:hover, a:focus { color: #163744; }
p a, p a:visited { line-height: inherit; }

hr {
  border: 0;
  height: 2px;
  background-color:#cf8143;
  clear:both;
  margin:6% 0;
}

hr.top {
  margin-top:7%!important;
  margin-bottom:3%!important;
}

hr.bottom {
  margin-top:3%!important;
  margin-bottom:7%!important;
}

blockquote { font-weight:700;font-size:18px; width:100%; margin: 1.2em auto; }
cite { display: block; text-align: right; font-weight:400;font-size:16px;font-style: italic;}
@media screen and (max-width : 600px){
  blockquote { width:90%;}
}

@media screen and (max-width : 600px){
  ul, ol { padding-left:20px; }
}

.width90 { width:90%;margin:0 auto; }
.brown { color:#cf8143; }
.center { text-align:center; }
.bold { font-weight:bold; }
.normal { font-weight:normal; }
.less-margin { margin:3px 0; }
.less-margin-top { margin-top:3px; }
.full-image { width:100%; }
.display-block { display:block; }
.round-corners { border-radius:12px; }

/* {{{ Header */
header {
  width:100%;
  background-color:#13313e;
  text-align: center;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  padding:0;
  display:block;
  background-size:100% cover;
}

header #headerImage { position:relative;z-index:1;width:100%;display:block; }

header #headerLogo {
  width:25%;
  float:left;
  max-width:270px;
  min-width:190px;
  margin-top:3%;
}

#headerContent {
  max-width:1020px;
  width:85%;
  margin:0 auto;
  z-index:3;
  display:block;
}

@media screen and (max-width : 1024px){
  #headerContent { width:96%;left:2%; }
}

@media screen and (max-width : 600px){
  header #headerLogo { margin-top:20px; }
}

/* }}} Header */

/* {{{ Nav */
nav {
  background: #cf8143;
  color:white;
	font: 17px/22px 'Hind', "Arial", sans-serif;
	font-weight:400;
	float:right;
	margin-top:0;
	border-radius:0 0 20px 20px;
	padding:0;
	z-index:2;
}
nav .active { font-weight:bold; } 
nav a, nav a:visited {
  color:white;
  text-decoration: none;
  display:block;
  padding:15px 12px;
  float:left;
  
}

nav a:hover {
  color:#255e73;
}

nav ul {
  list-style-type: none;
  margin:0;
  padding:0 10px;
  height:52px;
}
nav ul li {
  display:inline-block;
  position:relative;
}

nav ul li span {
  display:inline;
  float:right;
  padding:14px 0;
  color:white;
  margin-right:-4px;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	display: none;
	font-size:50px;
	padding-right:20px;
}

/*Hide checkbox*/
nav input[type=checkbox]{ display: none; }

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ ul { display: block; }

/* Small Screen */
@media screen and (max-width : 1080px){
  nav { width:100px; background-color:transparent;}

	/*Make dropdown links appear inline*/
	nav ul { display: none;
	  width: 100%;
	  right: 0;
	  position: absolute;
	  top: 100px;
	  background-color:#163744;
	  font-size:18px;
	  line-height:18px;
	  z-index:500;
  }
	/*Create vertical spacing*/
	nav ul li { display:block; }
	nav a {
	  margin: 0;
	  padding:20px 0;
	  border-top:1px solid white;
	}
	/*Make all menu links full width*/
	nav ul li, nav li a { width: 100%; background-color:#163744; }
	/*Display 'show menu' link*/
	.show-menu { display:block;float:right;padding-right:0; }

	nav li .active:after {display:none;}
  nav ul li span {
    display:none;
    float:none;
  }

}

/* }}} Nav */

/* {{{ Buttons */
button, .button {
  border:none;
  display:inline-block;
  line-height:1em;
  padding:15px 25px;
  margin:10px 0;
  font-weight: 700;
  color:white;
  border-radius: 8px;
  text-decoration:none;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#336072+0,163744+100 */
  background: rgb(51,96,114); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(51,96,114,1) 0%, rgba(22,55,68,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(51,96,114,1) 0%,rgba(22,55,68,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(51,96,114,1) 0%,rgba(22,55,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336072', endColorstr='#163744',GradientType=1 ); /* IE6-9 */
}

button:hover, .button:hover {
  color:white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#336072+0,163744+100&0.85+0,0.85+100 */
  background: -moz-linear-gradient(left,  rgba(51,96,114,0.85) 0%, rgba(22,55,68,0.85) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(51,96,114,0.85) 0%,rgba(22,55,68,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(51,96,114,0.85) 0%,rgba(22,55,68,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99336072', endColorstr='#99163744',GradientType=1 ); /* IE6-9 */
}
/* }}} Buttons */

/* {{{ Main Content */
main {
  width:100%;
  max-width:1200px;
  margin: 0 auto;
}

.content { padding: 0 15%;background-color:white; }
@media screen and (max-width : 600px){
  .content { padding: 0 10px; }
}
/* }}} Main Content */

/* {{{ Home */
#homeBanner { width:85%;max-width:1020px;margin:0 auto;padding:0;margin-top:3%;padding-bottom:3%; }
a.home-clickable, a.home-clickable:visited, a.home-clickable:focus { border:0;text-decoration:none; } 
.homeContent { padding:0 2%; }
.homeContent h1 { padding:0;margin:0;width:100%;margin:0 auto;font-size:24px;line-height:26px; }
/* v2
#homeBanner { width:85%;max-width:1020px;margin:0 auto;padding:0;margin-top:3%;padding-bottom:3%; }
#homeBanner .image-box { width:50%;max-width:512px;float:left;position:relative;display:inline-block;padding:0;margin:0; }
#homeBanner .image-box img { width:50%;max-width:256px;display:inline-block; }
#homeBanner .image-left { float:left; }
#homeBanner .image-right { float:right; }
#homeBanner .stacked-right { position:absolute;display:none;left:50%; }
#homeBanner .stacked-left { position:absolute;display:none;left:0; }
#homeBanner .active { display:block; }
#homeBanner .text-area  { font-size:2vw;background-color:#112c37;padding:20px;color:white;line-height:32px;padding-bottom:40px;margin-top:30px; }

.homeContent p { text-align:center;font-size:20px; }
.homeContent h4 { padding:0;margin:0; }
.homeContent .noupperpadding { padding-top:0;margin-top:0; }

@media screen and (min-width: 1200px) {
  #homeBanner .text-area { font-size: 28px; }
}

@media screen and (max-width: 1024px) {
  #homeBanner { width:100%;max-width:1024px;left:0%;}
}

@media screen and (max-width: 800px) {
  #homeBanner .text-area { font-size: 20px; }
}

@media screen and (max-width : 512px){
  #homeBanner .image-box { width:100%; }
  #homeBanner .text-area { padding:10px 20px; }
}
*/
/* }}} Home */

/* {{{ Secondary Page Header */
#secondaryBanner {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:block;
  margin-top:-130px;
  background-color:transparent;
  position:relative;
  z-index:1;
  padding-bottom:30px;
}
#secondaryBanner h1 {  width:100%;color:white;text-align:center;margin:0;margin-top:20px;position:relative;z-index:2; }

#secondaryBanner {
  margin:0 auto;
  max-width:1200px;
  text-align:center;
}
#secondaryBanner p {
  font-size: 22px;
  line-height: 30px;
}

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

}
/* }}} Secondary Page Header */

/* {{{ Geotextile */
.prod-list { width:100%; }
.prod-list .full-image { width:100%; }
.prods { list-style:none;padding:0;margin:0 auto;margin-top:1%; }
.prods li { width:48%;min-width:144px;display:inline-block;position:relative;box-sizing:border-box;margin-right:2%;border-radius:12px;background-color:#d18244;text-align:center;margin-bottom:2%; }
.prods .no-link { padding:12px 20px;color:white;font-weight:bold; } 
.prods li a { margin:0;display:block;padding:12px 20px;width:100%;color:white;font-weight:bold; }
.prods li a:hover { background-color:#ae6831;border-radius:12px; }
.prods .no-margin-right  { margin-right:0; }
.products p { font-size:20px;line-height:26px; }
.products .category-image { width:30%;margin-right:5%;float:left; }
.products .category-image.nomargin { margin-right:0; }
.products h1 { margin:0 0 4% 0; }
#product-image { width:100%;border-radius:12px; }

.cross-reference-comparison-chart { background-color:#113542; }
.cross-reference-comparison-chart:hover { background-color:#081d24; }

.civil-series-data-sheet { background-color:#256d85; }
.civil-series-data-sheet:hover { background-color:#1b5669; }



/* }}} */

/* {{{ Applications */
.applications-lower-content {
  padding: 5px 20px 20px;
  margin-top:2em;
}
.applications-lower-content .footer-image {
  width:100%;
}

.applications-lower-content li {
    position: relative;
}
.applications-lower-content li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -8px;
    content: ') ';
    background-color: #FFF;
    text-align: center;
}

.tab-img { width:100%;}
.ui-widget-content h3 { color:#163744 }

@media screen and (max-width : 600px){
  .ui-tabs { padding:0;}
  .ui-tabs .ui-tabs-nav li { margin: 1px 1px 0 0; }
  .ui-tabs .ui-tabs-nav { padding: .2em 0 0; }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em;
    font-size: 14px;
  }
  .applications-lower-content { padding: 5px; }
  body { overflow-x:hidden; }
}
/* }}} Applications */

/* {{{ Capabilities */
.capabilities h4 { background-color:#cf8143;padding:6px 10px;border-radius:6px;color:#ffffff; }
.capabilities ul { list-style:none; }
/* }}} */

/* {{{ Contact Us */
.postal {   float:left;
  width:38%;
  box-sizing: border-box;
margin-right:2%;}

.postal h2 { padding:2px 0;margin:0;  }
.postal p { padding:2px 0;margin:0;  }

.map-responsive{
  box-sizing: border-box;
  overflow:hidden;
  width:58%;
  float:left;
  position:relative;
  border-radius:8px;
  height:300px;
}
.map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
  max-height:300px;
}

@media screen and (max-width : 560px){
  .map-responsive, .postal {
    width:100%;
    float:none;
  }
}
/* }}} */

/* {{{ Footer */
footer {
  width:100%;
  color:white;
  padding-bottom:20px;
}

footer a, footer a:visited { color: white; text-decoration: underline; }
footer a:hover, footer a:focus { color: gray; }


footer section {
  text-align:center;
  width:100%;
  max-width:980px;
  margin: 20px auto 10px;
  font-size:12px;
  line-height: 15px;
}

/* }}} Footer */

/* {{{ Form */
input, textarea { color:black; }
.formRow { width:100%; clear:both;}
.formRow label { display:block; float:left;width:25%;clear:left;}
.formField {display:block; float:left; margin-bottom:15px;width:75%;}
.formRow textarea, .formRow input[type=text], .formRow input[type=email] {
  width:100%;
  box-sizing: border-box;
  border: 1px solid black;
  background-color:white;
  padding:3px;
  color:black;
  border-radius:8px;
}
.formRow textarea { height:150px; }

@media only screen and (max-width: 599px) {
  .formField, .formRow label { width:99%;}
}

.required { color: #f00; }
.formErr {color: #f00; }
/* }}} Form */

/* {{{ Graphics */
.vr { display:inline;float:left;height:100%;height:500px;width:1px;border: 0;background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }
@media screen and (max-width : 600px){
.vr { display:none; }
}


.img-holder {
  float:right;
  margin:0 0 25px 25px;
  max-width:400px;
  width:40%;
  border-radius:8px;
  background-color:white;
  padding:15px;
}
.img-holder img { width:100%; height:auto; }
.img-holder p { text-align:center;color:#8e8e8e;margin:.5em 0 0;}

@media screen and (max-width : 600px){
  .img-holder {
    float:none;
    margin:0 0;
    max-width:400px;
    width:90%;
  }
}
/* }}} Graphics */

/* {{{ About Us */
.aboutus .product-image { width:100%; }

#employeeDetails { width:100%;max-width:800px;margin:0 auto;margin-top:4%; }
.employee { padding:10px 0; }
.employee img { max-width:180px;width:100%;display:block;float:left;margin-right:4%;margin-bottom:3%; }
.nobottomline { border-bottom:0; }

@media screen and (max-width : 600px){
  .employee img { margin:0 auto;float:none; }
  .lastOpeningParagraph { margin-bottom:50px; }
}

/* }}} */

/* Use clearfix class on parent to clear nested columns */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {  clear: both; }
.clearfix { zoom: 1; }

ul.brownBullet {
  list-style: none; /* Remove default bullets */
  margin-bottom:2em;
}

ul.brownBullet li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #cf8143;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 1.25em;
}

.column {
  float:left;
  width:48%;
  box-sizing: border-box;
  margin-right:2%;
}

.column49 {
  float:left;
  width:49%;
  box-sizing: border-box;
  padding-right:0px;padding-left:10px;
}

.column:nth-child(odd) { padding-right: 10px; }
.column:nth-child(even) { padding-left: 10px; }
@media screen and (max-width : 600px){
.column, .column49 { width:100%;padding:0 10px;}
}

.two-columns {
	  columns: 2;
	  -webkit-columns: 2;
	  -moz-columns: 2;
}

.two-columns div {
    -webkit-column-break-inside: avoid;
    -moz-break-inside: avoid-column;
    break-inside: avoid-column;

}
.two-columns li { margin-left:1em }

@media screen and (max-width : 600px){
  .two-columns {
      columns: 1;
      -webkit-columns: 1;
      -moz-columns: 1;
  }
}