/*-----------------------------------*\

	Toast
	A Simple CSS Framework
	=================================

	Values you may want to change:
	- .container { max-width:; }
	- p { margin-bottom:; }
	- html { font:; }

	Remember: no framework will be as
	good as a custom built, per-
	project	one. Toast and other
	frameworks are best used for
	rapid prototyping.

\*-----------------------------------*/

/*-----------------------------------*\
	$RESET
\*-----------------------------------*/

* {
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.clear {
	clear: both;
	}

/*-----------------------------------*\
	$GRID
\*-----------------------------------*/

.container {
	/* Whatever you want. They’re your oats. */
	width: 940px;
	margin: 0 auto;
/*
	padding: 0 30px;
	padding: 0 1.5rem;
*/
}

.grid {
	margin-left: -3%;
	max-width: 105%;
}

.unit {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-left: 3%;
	margin-right: -.25em;
	/* Clearfix */
	overflow: hidden;
	*overflow: visible;
}

	.unit.demo {
		background-color: #fff8eb;
		height: 48px;
		height: 3rem;
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
	}

.span-grid {
	width: 97%;
}

.one-of-two { width: 47%; }

.one-of-three { width: 30.36%; }
.two-of-three { width: 63.666666666%; }

.one-of-four { width: 22.05%; }
.three-of-four { width: 72%; }

.one-of-five { width: 17.07%; }
.two-of-five { width: 37%; }
.three-of-five { width: 57%; }
.four-of-five { width: 77%; }

@media screen and (max-width: 650px) {
/*
	.grid {
		margin-left: 0;
		max-width: none;
	}

	.unit {
		width: auto;
		margin-left: 0;
		display: block;
	}
*/
}

/*-----------------------------------*\
	$TYPE

	Works off the assumption of a 1.5
	line height @ 20px. Again, change
	as necessary.
\*-----------------------------------*/
	a {
		text-decoration: none;
		color: #46ABB8;
		border: none;
	}
	a img {
		border:none; 
	}
	p {
		margin-bottom: 10px;
	}
	.p, ul, ol, hr, table, form, pre,
	h1, .alpha, .beta {
		margin-bottom: 30px;
		margin-bottom: 1.5rem;
	}
	
	h1, .alpha {
		font-size: 60px;
		font-size: 3rem;
		font-weight: 700;
		line-height: 1;
	}
	
	h2, .beta {
		font-size: 45px;
		font-weight: 700;
		line-height: 1.5;
		margin-bottom: 0px;
		color: #555;
		font-family:  "myriad-pro-condensed";
		text-transform: uppercase;
	}
	
	h3, .gamma {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 5px;
		color: #555;
	}
	
	hr {
		border: none;
		border-bottom: 1px solid #ccc;
		margin: 10px 0 20px 0;
	}
	
	address {
		font-style: normal;
		}
	
/*-----------------------------------*\
	$BASE STUFF
\*-----------------------------------*/
	html {
		font: 125%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
	}
	
	@media screen and (max-width: 650px) {
		html {
			font-size: 100%;
		}
	}
	
	body {
		background: #e7e6e8;
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3ZTZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #e7e6e8 0%, #f6f6f6 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e6e8), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #e7e6e8 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #e7e6e8 0%,#f6f6f6 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #e7e6e8 0%,#f6f6f6 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #e7e6e8 0%,#f6f6f6 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e6e8', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-8 */
		behavior: url(/PIE.htc);
		background: white;
		font-family:  "myriad-pro", Helvetica, Arial, sans-serif; 
		font-size: 13px;
		color: #777;
	}
		
	.more {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-align: center;
		padding: 5px 22px;
		float: left;
		display: inline;
		margin: 20px 2px;
		background: #f5f5f5;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 1px 1px #A3A3A3;
		color: #666;
		font-weight: bold;
		font-size: 12.5px;
		behavior: url(/PIE.htc);
		}
	
		.more:hover {
			position: relative;
			bottom: -.5px;			 
			color: #888;
			}

	.ie9 .gradient {
		filter: none;
	}	
	
	#bg-band{
		background: black url(../images/bg.jpg) no-repeat top center;
		height: 553px;
		z-index: 1;
		position: absolute;
		width: 100%;
		top: 0;
		}

	.divider {
		clear: both;
		margin: 40px auto;
        margin-bottom: 0px;
		border: 0; 
		height: 1px; 
		width: 90%;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));		
		behavior: url(/PIE.htc);
		}	
		
	.ltie9 .divider {
		width: 80%;
		border: 1px solid #ccc;
		}			
		

	.button{
		background-color: #46ABB8;
		border: 1px solid #fff;
		border-radius: 10px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		box-shadow: 1px 2px 1px 0px rgba(0, 0, 0, 0.15);
		padding: 10px;
		text-transform: uppercase;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 500;
		font-size: 15px;
		text-decoration: none;
		transition: all ease-in-out 0.25s;
		-webkit-transition: all ease-in-out 0.25s;
		-moz-transition: all ease-in-out 0.25s;
		cursor: pointer;
		display: inline-block;
		color: #fff;
		margin: 10px auto;
		text-align: center;
		behavior: url(/PIE.htc);
		}
	
    	.button span{
		    padding-right: 10px;
		    vertical-align: bottom;
	    }
	    
	    .button:hover{
		    background-color: white;
		    color:#46ABB8;
			border: 1px solid #46ABB8;
		    }

	.button-alt {
		background: rgb(170,136,110);
		}

	    
	.center {
		text-align: center;
		}    

	.block {
		display: block;
		clear: both;
		}
	
/*-----------------------------------*\
	$MASTHEAD
\*-----------------------------------*/
	#masthead {
		z-index: 100;
		padding-top: 24px;
		}
	
		#masthead h1 {
			width: 350px;
			height: 70px;
			margin: 0 0 12px 0;
			}
		
			#masthead h1 a {
				display: block;
				width: 100%;
				height: 100%;
				background: url(../images/logo.png) no-repeat top left;
				text-indent: -9000px;
				}
				
	#nav {
		background: #233137;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 4px #444;
		-moz-box-shadow: 0 0 4px #444;
		box-shadow: 0 0 4px #444;
		float: left;
		width: 100%;
		margin-bottom: 10px;
		clear: both;
		z-index: 1000;
		}		

		#nav ul {
			margin: 0;
			}

		#nav li {
			list-style-type: none;
			float: left;
			display: inline;
			position: relative;
			}

			#nav li a {
				color: #999999;
				font-family:  "myriad-pro";
				text-transform: uppercase;				
				font-size: 16px;
				letter-spacing: .5px;
				border-right: 1px solid #555;
				border-right: 1px solid #39464b;
				display: block;
				width: 100%;
				padding: 13px 22px;
				text-shadow: 0px 0px 2px black;
				}

				#nav li a:hover, 
				#nav li .current {
					color: white;
					}

			
			#nav .home a {
				padding-left: 12px;
				padding-right: 12px;
				}

				#nav .home a img {
					position: relative;
					top: 2px;
					}

				
				#nav .last a {
					border-right: 0;
					}

		/* Subnav */				
		#nav .dropdown {
			display: none;
			background: #DFDFDF;
			position: absolute;
			top: 48px;
			left: 0;
			width: 250px;
			-moz-box-shadow: 0 0 4px #444;
			-webkit-box-shadow: 0 0 4px #444;
			box-shadow: 0 0 4px #444;
			}

			#nav li:hover .dropdown {
				display: block;
				}


			#nav .dropdown li {
				display: block;
				clear: both;
				float: none;
				}
			
			#nav .dropdown a {
				border:none;
				color: #444;
				text-shadow: none;
				font-size: 11px;
				}

				#nav .dropdown li a:hover {
					color: #000;
					
					}

		
	/* Home */
	#featured {
		clear: both;
		margin-bottom: 40px;
		}

		#featured .unit {
			background: white;
			/* overflow: visible; */
			/* width: 30.36%; */
		/*
			margin-left: 2%;
			margin-right: -.25em;
		*/
			width: 32%;
			margin-left: .5%;
			-webkit-box-shadow: 0 0 10px #666;
			-moz-box-shadow: 0 0 10px #666;
			box-shadow: 0 0 10px #666;
			behavior: url(/PIE.htc);
			}		
		
			#featured .first {
				margin-left: 3%;
				}
			
			.ie7 #featured {
				margin-left: 0;
			}

			.ie7 #featured .unit {
				margin-left: 1.7%;
			}
			
			.ie7 #featured .first {
				margin-left: 0;
				}
						
			#featured .unit img {
				background: white;
				padding: 10px 10px 6px 10px;
				}
		

/*-----------------------------------*\
	$CONTENT
\*-----------------------------------*/
	#content {
		position: relative;
		border-bottom: 1px solid #dfdfdf;
		z-index: 1;
		}
		
		#content img {
			max-width: 100%;
		}

	.callout span { 
		background: white;
		padding: 4px 4px 0 4px;
		display: block;
		margin-bottom: 25px;
		box-shadow: 0 1px 5px #888;
		clear: both;
		}

	.callout img { 
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		width: 100%;
		behavior: url(/PIE.htc);
		}

	.callout p {
		font-size: 14.5px;
		color: #A3A3A3;
		line-height: 1.2;
		}	

		
	/* HOME-SPECFIC */
	#intro {
		margin-bottom: 30px;
		}
			
		#intro h2 {
			font-size: 32px;
			font-weight: lighter;
			}		
	
		#intro p {
			font-size: 16.5px;
			}
		
	#home .callout {
		overflow: visible;
		margin-top: 20px;
		}

	/* SUB */
	#sub #content {
		}

		#sub #content .container {
			background: #efefef;
			z-index: 10;
			padding-bottom: 35px;
			-webkit-box-shadow: inset  0 2px 2px #444;
			-moz-box-shadow: inset  0 2px 2px #444;
			-o-box-shadow: inset  0 2px 2px #444;
			box-shadow: inset  0 2px 2px #444;
			behavior: url(/PIE.htc);
			}
	#main {
		width: 92%;
		float: left;
		display: inline;
		}		
		
		#content .fullwidth	{
			margin: 0 auto;
			float: none;
			display: block;
			width: 94%;
		}
		
		#main h2 {
			margin-top: 25px;
			margin-bottom: 10px;
            text-align: center;
			}
				
		#sidebar {
			}	
			
			#sidebar .callout {
				margin: 35px 35px 50px 35px;
				}
	
			#sidebar .callout span {
				margin-bottom: 15px;
				}
	
				#sidebar .callout .more {
					margin: 3px;
					}
				
				.ie8 #sidebar .callout .more {
					clear: both;
					margin-top: 20px;
					padding-top: 0;
					padding-bottom: 20px;
					}

	/* main styles for content */
	#main li {
		display: list-item;
		padding-bottom: 0.5em;
	}	

	#main ul, #main ol {
		margin-left: 25px;
		}

	#main ul li {
		padding-left: 1em;
	}

	#main ol {
		list-style: decimal;
	}
	
	#main ol li {
		list-style: decimal;
	}

	#main ol li em {
		font-weight: bold;
	}
									
	/* image grid */			
	.image-grid {
		float: left;
		width: 100%;
		clear: both;
		}

		.image-grid img {
			margin-bottom: 20px;
			width: 100%;
            box-shadow: 2px 4px 2px #000;
			}

				
		.image-grid .main {
			float: left;
			width: 66%;
			width: 380px;
			display: inline;
			}
	
		.image-grid .aside {
			float: right;
			width: 30%;
			width: 160px;
			display: inline;
			}
		
		.image-grid .flip-main {
			float: right;
			}

		.image-grid .flip-aside {
			float: left;
			}

	/* Full width stuff - specifically case studies but also general full width */
	.highlight-columns .unit {
		background: #335767;
		padding: 10px 20px;
		color: white;
		margin-bottom: 30px;
		}

	.highlight-columns h3 {
		color: white;
		text-align: center;
		}

		.highlight-columns img {
			margin: 10px 0 15px 0;
			}
		
		.highlight-columns .readmore-close {
			background: red;
			color: white;
			}
	
	/* Photo Gallery */		
	.gallery .grid{
		margin-bottom: 20px;
	}

	.gallery .unit {
		max-height: 180px;
		}
			
	/* Forms */	
	.form_success, .form_error {
		padding: 10px;
		background: #5AA2A7;
		color: white;	
		margin-bottom: 10px;
		}
		
	.form_error {
		background: #FF7772;
	}	
	
	form label {
		font-weight: bold;
		}
	
	form input, form textarea {
		margin-bottom: 20px;
		padding: 3px;
		color: #888;
		}
	
	.submit	{
		margin: 20px 0 0 0;
		width: 150px;
		background: #46ABB8;
		padding: 10px;
		border:none;
		color: white;
		cursor: pointer;
		-webkit-box-shadow: 0 0 2px #999;
		-moz-box-shadow: 0 0 2px #999;
		box-shadow: 0 0 2px #999;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(/PIE.htc);
	}		

	/* USED ON CAPABILITIES */

	.centered-images {text-align: center;}
	.centered-images img {
		display:inline-block;	
		padding: 6px;
	}
	

	
/*-----------------------------------*\
	$case-studies 
\*-----------------------------------*/


#case-studies.is-subpage .fullwidth {
    width: 100%;
    
}

#case-studies .case-studies-title {
	margin-bottom: 40px;
}

#case-studies .divider {
	margin: 20px auto;
}

#case-studies h3 a {
	color: #555;
}

#case-studies .banner .title {
	float: left;
	z-index: 6;
	color: white;
	background-color: rgba(0,0,0,0.4);
	text-shadow: 0px 0px 3px black;
	width: 100%;
	margin-top: 0;
	padding-top: 65px;
	height: 300px;
}

#case-studies .content > .title {
	margin: 25px;
}

  .container .content .content-left {
    width: 50%;
    float: left;
    padding-right: 12.5px;
    padding-left: 25px;
    margin-bottom: 25px;
  }

  .container .content .content-right {
    width: 50%;
    float: right;
    padding-right: 25px;
    padding-left: 12.5px;
    margin-bottom: 25px;
  }

  .container .content .content-full {
    padding-right: 25px;
    padding-left: 25px;
    margin-bottom: 25px;
  }

  .container .content .content-full .button {
    width: 250px;
    display: block;
  }

  .container .content .pull-quote {
  	font-style: italic;
  	opacity: .75;
  	margin-bottom: 50px;
  	border-top: 1px solid #777;
  	border-bottom: 1px solid #777;
  }

  .container .content .pull-quote p {
  	display: block;
  	text-align: center;
  	font-size: 24px;
  	font-family: serif;
  	padding: 25px;
  	margin-bottom: 0;
  }

  .container .content .content-right .title,
  .container .content .content-left .title {
  	text-align: left;
  }

  .content--clear-float {
  	clear: both;
  }
  

  /* hatch style groups
  --------------------------------------------- */

  .hatch-group--container {
  	margin-bottom: 25px;
  }

  .hatch-group--container h3 {
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
  }

  .hatch-group--container .content p {
    font-size: 18px;
  }

  .hatch-group--container .content img {
    width: 100%;
  }

  /* Group 1 */

  #hatchGroup1 {
    z-index: 5; /* slide over group 2 */
  }

  #hatchGroup1 .banner {
  	background-image: url(../images/case-studies/hatch-and-dump-valve-covers-for-carbon-railroad-cars/closeup-of-lift.jpg);
  	background-size: cover;
  	background-position: center 66%;
  	height: 300px;
  }


 /* easy loader style groups
  --------------------------------------------- */

  .loader-group--container {
  	margin-bottom: 25px;
  }

  .loader-group--container h3 {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
  }

  .loader-group--container .content p {
    font-size: 18px;
  }

  /* Group 1 */

  #loaderGroup1 .banner {
  	background-image: url(../images/case-studies/easy-loader/banner.jpg);
  	background-size: cover;
  	background-position: center 32%;
  	height: 300px;
  }
  
  #loaderGroup1 .banner .title {
	padding-top: 130px;  
  	}

  .content .group1-list {
    font-size: 18px;
  }

  .content .group1-list .title {
      font-size: 18px;
  }


/*-----------------------------------*\
	$FOOTER
\*-----------------------------------*/
	#footer {
		padding: 20px 0;
		background: #ededed;			
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZmRmZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #ededed 0%, #dfdfdf 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ededed 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ededed 0%,#dfdfdf 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ededed 0%,#dfdfdf 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #ededed 0%,#dfdfdf 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-8 */
		background: rgb(17,13,14);
		background: rgb(154,128,104);
		behavior: url(/PIE.htc);
		color: white;
		}

		#footer .unit {
			overflow: visible;	
			float: left;
			}
		
		#footer-logo {
			height: 58px;
			width: 224px;
			margin-bottom: 10px;
			}
			
			#footer-logo a {
				background: url(../images/logo.png) no-repeat bottom left;
				display: block;
				height: 100%;
				width: 100%;
				text-indent: -9000px;
				}
		
		#footer #work-with {
			width: 70%;
			margin: 10px 0 0 0;
			float: right;
			}
			
			.ie7 #work-with {
				
			}
			
			#work-with ul {
				float: left;
				width: 100%;
				clear: both;
				margin: 0;
				}
				
				
			 #work-with li {
				 float: left;
				 display: inline;
				 margin: 3px 3px;
				 background: white;
				 padding: 5px;

				 /* margin: 10px; */
				 }	

			 #work-with .spacer {
				 margin: 0 15px;
			 	}
			 
			 #work-with .first {
				 margin-left: 0;
			 	}

			 #work-with .last {
				 margin-right: 0;
			 	}