@charset "utf-8";


@-ms-viewport {
	width: device-width;
}

/*colors
rgba(205,92,36,1) --orange
rgba(235,190,40,1) --yellow
rgba(130,135,55,1) --green
rgba(20,125,175,1) --blue
*/

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;

}

html {
	font-family: 'Lato', sans-serif;
	min-height: 100%;
	position: relative;
}

body { /* 14 / 16 */

	line-height: 1.5em;
	color: #313131;
}

img {
	max-width: 100%;
	height: auto;
}
	
.row {
	float: left;
	clear: both;
	width: 100%;
}

.work {
	float: left;
	clear: both;
	width: 100%;
}

.sidebar {
	float: right;
	clear: both;
	width: 22%;
}

.container {
	width: 95%;
	margin: 0 auto;
}

.container2 {
	width: 95%;
	margin: 0 auto;
}
	
.container .columns {
	float: left;
	padding-right: 1em;
	padding-left: 1em;
}

.container .columns.one,
.container .columns.two,		
.container .columns.three,
.container .columns.four,
.container .columns.five,
.container .columns.six,
.container .columns.seven,
.container .columns.eight,
.container .columns.nine,
.container .columns.ten,
.container .columns.eleven,
.container .columns.twelve,
.container .columns.thirteen,
.container .columns.fourteen,
.container .columns.fifteen,
.container .columns.sixteen   { width: 100% }


.clearfix:after,
.container:after {
	content: '';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	clear: both;
}

.clearfix,
.container {
	zoom: 1;
}

.container_nav {
	width: 100%;
	display: block;
	min-height: 120px;
	background: #FFF;
	border-bottom: 1px solid rgba(170,170,170,.6);
	top: 0;
	position: top;
	opacity: 1;
	margin: 0 auto;
	overflow: hidden;

}

h3 {
	display: block;
	color: rgba(205,92,36,1);
	background-color: white;
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: .5em;
}


/*logo*/
h1.logo {
	font-weight: bold;
}


h1.logo a {
	float: left;
	width: 220px;
	height: 130px;
	display: block;
	background: url(images/SJD_logo.png) no-repeat 0 0;
	margin: 0;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background-color: transparent;
}

h1.tagline {
		margin: 0;
		float: left;
		display: block;
		border: 0;
		width: 300px;
		height:40px;
		padding: 0em;
		padding-bottom: .5em;
		color: transparent;
		background-color: transparent;
	}

aside {
		display: none;
}

/*footer*/
footer {
	text-align: center;
	padding: 2em 0 0 0;
}

/*header*/
header.row {
	padding-bottom: 2em 0;
}

h4 {
	float: left;
	display: block;
	color: rgba(180,180,180,1);
	background-color: white;
	font-size: 1em;
	font-weight: bold;
	padding-top: 2em;
	padding-bottom: .5em;
}

.pad {
	display: none;
}

.main_section {
	width: 90%;
	display: block;
	margin: 1em;
	
}

.main_content {
	width: 100%;
	font-size: .9em;
	line-height: 1.5em;
	color: gray;
}

.main_pics {
	float: left;
  	margin: 1em;
	width: 95%;
	max-height: 50em;
}

.main_pics2 {
	float: left;
  	margin: 2em;
	width: 95%;
}

.main_pics3 {
	display: none;
}

.main_pics4 {
	float: left;
	display: block;
	padding-top: 1em;
	padding-right: 0em;
	width: 95%;
}

.pic_text {
	margin-left: .5em;
	float: left;
	display: block;
	width: 90%;
	padding-top: 1em;
}

.pic_text p {
	width: 85%;
	font-size: .8em;
	line-height: 1.2em;
	color: c
}

video {
	width: 90%;
	margin: 0em 0 0em 0;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(180,180,180,.9);

}

.video_title {
	padding-top: 2em;
	font-size: .9em;
	font-weight: bold;
	line-height: 1em;
	color: rgba(20,125,175,1);
}

/*band styles*/
.band {
	padding: .3em 0;
}

/*colors
rgba(205,92,36,1) --orange
rgba(235,190,40,1) --yellow
rgba(130,135,55,1) --green
rgba(20,125,175,1) --blue
*/

.band.banner {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_logo.jpg) no-repeat center center;
	background-color: rgba(205,92,36,1);
	min-height: 198px;
	}

.band.banner2 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_trade.jpg) no-repeat center center;
	background-color: rgba(205,92,36,1);
	min-height: 198px;
}

.band.banner3 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_3D.jpg) no-repeat center center;
	background-color: rgba(130,135,55,1);
	min-height: 198px;
}

.band.banner4 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_collateral.jpg) no-repeat center center;
	background-color: rgba(130,135,55,1);
	min-height: 198px;
}

.band.banner5 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_video.jpg) no-repeat center center;
	background-color: rgba(20,125,175,1);
	min-height: 198px;
}

.band.banner6 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_email.jpg) no-repeat center center;
	background-color: rgba(205,92,36,1);
	min-height: 198px;
}

.band.banner7 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_ppt.jpg) no-repeat center center;
	background-color: rgba(20,125,175,1);
	min-height: 198px;
}

.band.banner8 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_pos.jpg) no-repeat center center;
	background-color: rgba(235,190,40,1);
	min-height: 198px;
}

.band.banner9 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_comm.jpg) no-repeat center center;
	background-color: rgba(235,190,40,1);
	min-height: 198px;
}

.band.banner10 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/header_incentive.jpg) no-repeat center center;
	background-color: rgba(130,135,55,1);
	min-height: 198px;
}

.band.banner11 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/promoheader.jpg) no-repeat center center;
	background-color: rgba(20,125,175,1);
	min-height: 198px;
}

.band.banner12 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/photoheader.jpg) no-repeat center center;
	background-color: rgba(205,92,36,1);
	min-height: 198px;
}

.band.banner13 {
	margin-top: .6em;
	padding-bottom: 5% 0;
	background: url(images/packagingheader.jpg) no-repeat center center;
	background-color: rgba(235,190,40,1);
	min-height: 198px;
}

/*navigation*/
.nav-box {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	padding-top: 2.5em;
	padding-right: 1.5em;
	cursor: pointer;
}

nav[role="primary"] .nav-top {
	list-style: none;
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
}

nav[role="primary"] .linkText a {
	text-decoration: none;
	font-size: .9em;
	letter-spacing: .06em;
	display: block;
	padding: .5em;
	color: #AAAAAA;
	background: white;
	border-bottom: 1px solid rgba(210,210,210,1);
}

nav[role="primary"] .linkText a:hover {
	color: rgba(205,92,36,1);
}

nav[role="primary"] .linkText:last-child a {
	border: none;
}

/*page specific styles*/
.featured-section {
	margin: 2em 0 0;
}

.featured-section .four {
	margin: 10px 0px;
}

.banner h2 {
	color: rgba(235,190,40,.7);
	font-size: 3em;
	line-height: 1em;
	letter-spacing: -.05em;
	text-align: center;
}

.bar4 {
	width: 100%;
	height: 10px;
	display: block;
	background: url(images/bar2.jpg);
	margin: 0;
	padding: 0;
	border: 0;
}

.bar-bottom {
	width: 100%;
	display: block;
	padding: 2em .2em;
}

footer {
	bottom: 0;
	width: 100%;
	text-align: center;
	border-top: 9px solid #AAA;
	display: block;
	background: rgba(255,255,255,1);
	padding: 2em 0 .6em 0;
	font-family: 'Lato', sans-serif;
	color: rgba(170,170,170,1);
	font-size: .8em;
	line-height: 1.3em;
	height: 4em;
}


/*media queries*/
@media screen and (min-width: 500px) {
	.container .columns.one 		{ width: 6.25%}
	.container .columns.two 		{ width: 12.5%}
	.container .columns.three 		{ width: 18.75%}
	.container .columns.four 		{ width: 25%}
	.container .columns.five 		{ width: 31.25%}
	.container .columns.six 		{ width: 37.5%}
	.container .columns.seven 		{ width: 43.75%}
	.container .columns.eight 		{ width: 50%}
	.container .columns.nine 		{ width: 56.25%}
	.container .columns.ten 		{ width: 62.5%}
	.container .columns.eleven 		{ width: 68.75%}
	.container .columns.twelve 		{ width: 75%}
	.container .columns.thirteen 	{ width: 81.25%}
	.container .columns.fourteen 	{ width: 87.5%}
	.container .columns.fifteen 	{ width: 93.75%}
	.container .columns.sixteen 	{ width: 100%}

	.container {
	width: 95%;
	margin: 0 auto;
	}

	.container2 {
	width: 90%;
	margin: 0 auto;
	}

	h1.logo {
		float: left;
		margin: 0 .5em 0 0;
	}

	.banner h2 {
		color: #522c24;
		font-size: 5em;
		text-align: left;

	}

	.container .featured-section .four {
		width: 50%;
	}

	.container .featured-section .four:nth-child(3) {
		clear: both;
	}

	/*navigation*/
	.nav-box {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	padding-top: 2.5em;
	padding-right: 1.5em;
	cursor: pointer;
}
		
	aside {
		display: none;
	}

	ul {
		width: 100%;
		float: left;
		list-style: none;
		text-decoration: none;
		padding: 1em 0 3em .2em;
	}

	ul li {
		padding: 0 0 .8em 0;
	}

	ul li:first-child {
		padding: 0 0 .1em 0;
	}

	.active_link {
		color: rgba(205,92,36,1) !important;
	}

	ul li a {
		display: block;
		list-style: none;
		text-decoration: none;
		color: rgba(20,125,175,1);
		line-height: 1.1em;
		font-size: .9em;
		background-color: transparent;
	}

	ul li a:hover {
		color: rgba(205,92,36,1);
	}


	.nav_title {
		width: 100%;
		display: block;
		color: rgba(205,92,36,1);
		background-color: white;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.5em;
		border-bottom: 1px solid rgba(205,92,36,1);
		margin-bottom: .3em;
	}

	.other_title {
		width: 100%;
		display: block;
		color: rgba(20,125,175,1);
		background-color: white;
		font-size: .9em;
		font-weight: bold;
		line-height: 1em;
		border-bottom: 1px solid rgba(190,190,190,1);
		padding-top: 1em;
		margin-bottom: .5em;
	}

	ul li.other {
		display: block;
		list-style: none;
		text-decoration: none;
		color: rgba(170,170,175,1);
		line-height: 1.1em;
		font-size: .8em;
		background-color: transparent;
	}

	.award_pic {
		margin-left: .5em;
		margin-right: .5em;
		float: left;
		height: 110px;
		padding-left: 1em;
		padding-bottom: 0em;
		background: url(images/award_nobg_small70x83.png) no-repeat 0 0;
	}

	.award_pic p {
		float: right;
		text-align: right;
		color: rgba(205,92,36,1);
		background-color: transparent;
		font-size: .75em;
		line-height: 1.2em;
		padding: .25em 0em 0em 1em;
		margin-left: 4.5em;
	}

	.quote_pic {
		margin: .5em;
		margin-right: 1em;
		float: left;
		width: 90%;
		padding-top: 1em;
		padding-left: 0em;
		max-width: 250px;
		min-width: 180px;
	}

	.quote_pic1 {
		border-top: 1px solid rgba(180,180,180,1);
		margin: .5em;
		margin-right: 1em;
		float: left;
		width: 90%;
		padding-top: 1em;
		padding-left: 0em;
		max-width: 250px;
		min-width: 180px;
	}


	.quote {
		float: left;
		width: 70%;
		display: block;
		text-align: center;
		color: rgba(180,180,180,1);
		background-color: transparent;
		font-size: .7em;
		line-height: 1.1em;
		padding: .25em 1em 0em 1em;
		margin-left: 1em;
	}
}

@media screen and (min-width: 643px) {
	
	.container .featured-section .four {
		width: 25%;
	}

	.container .featured-section .four:nth-child(3) {
		clear: none;
	}

	.band.banner {
	padding-bottom: 5%;
	min-height: 200px;
	}

	.band.banner2 {
	padding-bottom: 5%;
	min-height: 200px;
	}

	.work {
		float: left;
		clear: both;
		width: 75%;
	}

	aside {
		float: right;
		min-height: 100%;
		display: block;
	}

	h1.tagline {
		margin: 0;
		float: left;
		display: block;
		border: 0;
		width: 300px;
		height: auto;
		padding-top: 1.7em;
		padding-bottom: .2em;
		color: transparent;
		background-color: transparent;
	}

	.main_section {
		float: left;
		width: 75%;
		display: block;
		margin: 1em auto;
		border-right: 1px solid rgba(170,170,170,.6);
	}

	.main_content {
		width: 88%;
		font-size: .9em;
		line-height: 1.5em;
		color: gray;
	}

	.main_pics {
		width: 45%;
		padding-right: 2em;
	}

	.main_pics2 {
		width: 90%;
		padding-right: 2em;
	}

	.main_pics3 {
		float: left;
		display: block;
		width: 90%;
		padding-top: 2em;
		padding-right: 2em;
	}

	.main_pics4 {
		display: none;
	}
	
	.pad {
		display: block;
		background-color: white;
		height: 1100px;
		width: 80%;
	}

}


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


	.nav-box {
		display: none;
	}

	a.nav-link {
		display: none;
	}

	nav[role="primary"] .nav-top {
		position: relative;
		display: block;
		right: 0;
		float: right;
		padding-top: .1em;
		padding-left: 3em;
		padding-right: 0em;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
		width: auto;

	}

	nav[role="primary"] .linkText {
		position: relative;
		margin: 0 0 0 0;
		float: left;
	}


	nav[role="primary"] .linkText a {
		background: none;
		display: block;
		color: rgba(170,170,170,1);
		border: none;
		font-size: .9em;
		letter-spacing: .07em;
		padding: .4em;
		padding-right: 1.5em;
	}

	nav[role="primary"] .linkText a:hover {
		color: rgba(205,92,36,1);
		background: none;
	}

	nav[role="primary"] .linkText:last-child a {
		margin: 0;
	}

	nav[role="primary"] .linkText:last-child {
		margin: 0px;
		right: 0;
		padding-right: 1.2em;
	}
}

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

	.quote_pic {
		float: left;
		max-width: 250px;
	}

}

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

	nav[role="primary"] .nav-top {
			padding-top: 5.1em;
	}
}

.lt-ie9 .container {
	max-width: 600px;
}