/*
Section 1 - mobile 1st rules (default)
Section 2 - @media screen and (min-width:480px) {}
Section 3 - @media screen and (min-width:600px) {}
Section 4 - @media screen and (min-width:768px) {}
Section 5 - @media screen and (min-width:910px) {}
*/

/*******************************************************/
/* Mobile styles (Mobile 1st)                          */
/*******************************************************/
.accessible {
	position: absolute;
	visibility: hidden;
}
body {
	background-color: #911f04;
	color:#011c26;
	font: normal 62.5% 'SourceSansProRegular', Arial, sans-serif;
}
#wrapper {
	min-width:320px;
	max-width:960px;
	margin:0 auto;
}
h2 {
	font: normal 1.4em 'SourceSansProBold', Arial, sans-serif;
	margin:10px 20px 0;
	text-shadow: 1px 2px 1px #FFFFFF;
}

.redfont {
	color:#911F04;
	font-weight:bold;
}
.error {
	background-color:#eee !important;
	border:1px solid #911f04 !important;
}
textarea {
	resize:none;
}

.main_content p,
.main_content ul {
	margin:10px 20px;
}

header {
	height:140px;
	border-bottom:1px solid #9c9a95;
	background: url(../images/bg_head.jpg) repeat-x 0 0 #fff;
}

#left-side {
	/*float:left;*/
	height:104px;
	cursor:default;
}
div .logo_bg {
	font: normal 2.6em 'SourceSansProBold', Arial, sans-serif;
	background: url(../images/bg_logo.png) no-repeat left 0 transparent;
	padding:20px 0 14px 60px;
	min-width:295px;
}
p.logo_caption {
	font-size:1.4em;
	min-width:310px;
	padding:0 0 0 53px;
	color:#fff;
}
div .logo_pre {
	color:#011c26;
}
div .logo_post {
	color:#911f04;
}
nav {
	min-width:350px;
	text-transform:uppercase;
	position:relative;
	top:13px;
}	
nav ul {
	margin:10px 0;
}
nav ul li{
	display:inline;
	font-family:'SourceSansProRegular', Arial, sans-serif;	
	font-size: 1.4em;
	padding-right:5px;
}	
a.navbtn {
	color:#ccc;
	text-decoration:none;
	padding:9px 8px;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
a.navbtn:hover {
	background: rgba(0,0,0, .20);
	color:#fff;
}
#quotes {
	margin-top:10px;
	text-align:center;
	height:40px;
	font-family:'SourceSansProItalic', Arial, sans-serif;	
	font-size:1.2em;
	color:#011c26;
	background-color:#DFDED6;	
	overflow:hidden;
}
#quotes ul {
	float:left;
	margin:0;
	width:100%;
	margin-top:2px;
}
#quotes ul li {
	margin:0;
	height:40px;
	list-item:none;
}

.large_quotes {
	color:#A6242F;
	font-family:'SourceSansProBold', Arial, sans-serif;
	font-size:1.8em;
	vertical-align:middle;
}
.content_left li {
	margin-bottom:15px;
}
section.nobg {
	background:none;
	border:none;
	box-shadow:none;
	margin-bottom:10px;
}
section.gradbg,
section.fixed_height {
	background-color:#DFDED6;
	background-image: linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 20%, #EAE9E1 80%);
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0%, #FFFFFF),
		color-stop(100%, #EAE9E1)
	);
	border:1px solid #bbb;
}
section.gridbg {
	background:url('../images/isometric-grid.png') repeat 0 0 transparent;
	border:1px solid #bbb;	
}
section.fixed_height {
	height:325px;
}
ul.clients {
	text-align:center;
}
ul.clients li {
	background: url('../images/client-sprite.png') no-repeat 0 0 transparent;
	margin:0;
	padding:0;	
	display:inline-block;
	*display:inline;
	zoom:1;
}

footer {
	border-bottom:1px solid #9c9a95;
	background: url('../images/bg_head.jpg') repeat-x 0 -70px transparent;
	height:55px;
	text-align:center;
    position: relative;
    text-transform: uppercase;
    top: 10px;	
}
footer ul {
	padding-top:10px;
}
footer ul li{
	display:inline;
	font-family:'SourceSansProRegular', Arial, sans-serif;	
	font-size: 1.4em;
	padding-right:5px;
}	
footer a.navbtn {
	padding:4px 8px;
}
.copyright {
	position:relative;
	top:14px;
	color:#ccc;
	text-transform:none;
}
#content_wrapper {
	margin:0 auto;
	min-width:320px;
	background-color:#fff;
	position:relative;
	top:10px;
}
.main_content {
	min-height:550px;
	font-size:1.6em;
	background: url('../images/bg_pat.png') repeat 0 0 transparent;	
	padding-bottom:15px;
}
.content_left {
	margin:0 auto 30px;
	padding:10px 0;
	width:95%;
	background-color:#fff;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	border:1px solid #ddd;
}
.services {
	text-align:center;
	margin-top:20px;
}
#contact_form {
	margin:20px auto;
}
div.formfield {
	margin:0 0 10px 0;
}
#contact_form label,
#contact_form p {
	display:block;
	font-weight:bold;
	line-height:1.4;
	color:#666;
	color:rgba(0,0,0,0.6);
	text-shadow:0 1px 1px #fff;
	margin-top:0;
}
#contact_form ul {
	margin: 0 0 15px 0;
}
#contact_form ul label {
	display: inline-block;
	margin-left: 5px;
}
#contact_form .formfield input[type="text"],
#contact_form .formfield textarea {
	width:300px;
	padding:5px 8px;
	font-size:1em;
	color:#000;
	border:1px solid #ccc;
	background-color:#fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}
#contact_form input[type="checkbox"] {
	cursor:pointer;
}
#contact_form textarea {
	font-family:arial;
}
#contact_form div.button input{
	margin-left:15px;
	padding:4px 20px;
	font-weight:bold;
	line-height:1;
	color:#444;
	border:1px solid #ccc;
	background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from (#fff), to(#bbb));
	background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb);
	background-color:#ccc;
	-webkit-border-radius:23px;
	-moz-border-radius:23px;
	-o-border-radius:23px;
	border-radius:23px;
	cursor:pointer;
}
#thankyou .close {
	padding:2px 10px;
	font-weight:bold;
	line-height:1;
	color:#444;
	border:1px solid #ccc;
	background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from (#fff), to(#bbb));
	background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb);
	background-color:#ccc;
	-webkit-border-radius:23px;
	-moz-border-radius:23px;
	-o-border-radius:23px;
	border-radius:23px;	
	cursor:pointer;
	position:relative;
	top:8px;
	left:196px;
}
#lside_form,
#rside_form {
	float: left;
}
#rside_form {
	margin-left:58px;
}
#rside_form li {
	margin:0;
}
#mask {
	display:none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 	/* IE 8 */
	filter: alpha(opacity=50);	/* IE 5-7 */
	opacity:0.5;	
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
}
#thankyou_wrap {
	display:none;
	position:absolute;
	bottom:250px;
	width:95%;
	z-index:500;
}
#thankyou {
	position:relative;
	width:50%;
	margin:0 auto;
	background-color:#BBB;
	background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from (#EAE9E1), to(#FFF));
	background-image: -moz-linear-gradient(0 100% 90deg, #EAE9E1, #FFF);	
	-webkit-border-radius:23px;
	-moz-border-radius:23px;
	-o-border-radius:23px;
	border-radius:23px;	
	padding:25px;
	border:5px solid #911f04;
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;	
	z-index:9999;	
}
/*******************************************************/
/* Mobile styles - screen widths of 400px and less     */
/*******************************************************/	
@media screen and (max-width: 400px) {	
	nav {
		text-align:center;
	}
	nav ul li{
		padding-right:7px;		
	}	
	ul.clients {
		margin:10px 0;	
	}
	ul.clients li {
		height:106px;
		width:110px;	
	}
	ul.clients li.crosby { background-position:-2px -186px; }
	ul.clients li.es3 { background-position: -120px -186px; }
	ul.clients li.i3logic{ background-position: -238px -186px; }
	ul.clients li.ilg{ background-position: -356px -186px; }
	ul.clients li.gp{ background-position: -484px -186px; }
	ul.clients li.mrtc{ background-position: -602px -186px; }
	ul.clients li.mta{ background-position: -720px -186px; }
	ul.clients li.plastipak{ background-position: -838px -186px; }
	ul.clients li.sun{ background-position: -956px -186px; }
	ul.clients li.synergy{ background-position: -1074px -186px; }
	ul.clients li.ums{ background-position: -1192px -186px; }	
	
	#quotes ul li {	
		font-size:.8em;
		margin-top:6px;
	}
	#contact_form {
		width:320px;
	}
	section.fixed_height {
		height:560px;
	}	
	section.gradbg {	
		background-image: linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -moz-linear-gradient(bottom, #FFFFFF 20%, #EAE9E1 80%);
		background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0%, #FFFFFF),
			color-stop(100%, #EAE9E1)
		);	
	}
}
	
/*******************************************************/
/* Tablet styles - screen widths of 401 - 700px        */
/*******************************************************/
@media screen and (min-width: 401px) and (max-width: 700px) {
	nav {
		padding-left:42px;
	}
	ul.clients {
		margin:10px 0;	
	}	
	ul.clients li{
		height:165px;
		width:175px;	
	}	
	ul.clients li.crosby { background-position:0 0; }
	ul.clients li.es3 { background-position: -175px 0; }
	ul.clients li.i3logic{ background-position: -352px 0; }
	ul.clients li.ilg{ background-position: -530px 0; }
	ul.clients li.gp{ background-position: -708px 0; }
	ul.clients li.mrtc{ background-position: -885px 0; }
	ul.clients li.mta{ background-position: -1062px 0; }
	ul.clients li.plastipak{ background-position: -1240px 0; }
	ul.clients li.sun{ background-position: -1417px 0; }
	ul.clients li.synergy{ background-position: -1595px 0; }
	ul.clients li.ums{ background-position: -1773px 0; }	
	
	#contact_form {
		width:325px;
	}	
	section.fixed_height {
		height:560px;
	}	
	section.gradbg {	
		background-image: linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -moz-linear-gradient(bottom, #FFFFFF 20%, #EAE9E1 80%);
		background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EAE9E1 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0%, #FFFFFF),
			color-stop(100%, #EAE9E1)
		);	
	}
}	

/*******************************************************/
/* Desktop styles - screen widths of 701px or greater  */
/*******************************************************/
@media screen and (min-width: 701px) {
	nav {
		padding-left:42px;
	}
	ul.services {
		margin-left:50px;
		text-align:left;
	}
	ul.clients li{
		height:165px;
		width:175px;	
	}	
	ul.clients li.crosby { background-position:0 0; }
	ul.clients li.es3 { background-position: -175px 0; }
	ul.clients li.i3logic{ background-position: -352px 0; }
	ul.clients li.ilg{ background-position: -530px 0; }
	ul.clients li.gp{ background-position: -708px 0; }
	ul.clients li.mrtc{ background-position: -885px 0; }
	ul.clients li.mta{ background-position: -1062px 0; }
	ul.clients li.plastipak{ background-position: -1240px 0; }
	ul.clients li.sun{ background-position: -1417px 0; }
	ul.clients li.synergy{ background-position: -1595px 0; }
	ul.clients li.ums{ background-position: -1773px 0; }	
	
	#contact_form {
		width:585px;
	}	
	section.gradbg {
		background:
			url("../images/bg_squares.png") no-repeat scroll 100% 0,
			url("../images/bg_grad.jpg") repeat-x scroll 100% 0;
	}
}

}