@charset "UTF-8";
/* 
FONTS—
	font-family: 'Roboto', sans-serif;
	font-family: 'Roboto Condensed', sans-serif;
COLORS—
	GREEN: #008251
	PALE GREEN: #2bb673
	GRAY GREEN: #9fa5a2
	TYPE: #5D6460
*/

html {
    scroll-behavior: smooth;
}
body {
	margin: auto;
	padding: 0;
	width: 100%;
	background-image: url("../siteGFX/BGpattern.svg");
	background-repeat: repeat;
	background-size: 40px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.6em;
	color: #484848;
}
.container {
  	max-width: 1100px;
  	width: 100%;
	background: url(../siteGFX/sub-tomatoSplash.jpg) no-repeat -30px 0px;
	background-size: 1400px auto;
	border: 1px solid #D4D9DC;
	border-radius: 0 0 12px 12px;
	margin: 0 auto 0 auto;
	background-color: #FFF;
	overflow: hidden;
}

a:link {
	color: #008251;
	text-decoration: none;
	font-weight: 400;
}
a:visited {
	color: #636060;
	text-decoration: none;
}
a:hover {
	color: #2bb673;
	text-decoration: underline;
}

/*SECTIONS*/
section.splashContent {
	font-family: 'Roboto Condensed', sans-serif;
	float: left;
	width: 485px;
	margin-top: 350px;
	text-align: right;
}
aside.photoBlock {
	border-top: 2px solid #EFEFEF; 
	padding-top: 10px;
	margin-top: -40px;
	width: 440px;
	float: right;
}
aside.photoBlock.shortmenu {
	margin-top: 210px;
}
aside.photoBlock img.deskpic {
	border: solid 1px #9C9C9C;
	height: 350px;
	width: 440px;
	object-fit: cover;
	object-position: 70% 0;
}
aside.photoBlock img.deskpic.mine {
	object-position: 25% 0;
}
aside.photoBlock p.caption {
	margin: 0px 0 18px 0px;
	font-size: .95em;
	line-height: 1.2em;
}
aside.photoBlock p.caption .credit {
	font-size: .85em;
	line-height: 1.2em;
}
aside.photoBlock2 {
	display: none;
}
section.mainContent {
	font-family: 'Roboto', sans-serif;
	width: 95%;
	margin: 0 0 0 520px;
}
section.mainContent h1 {
	margin: 0 555px 10px 0px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 3em;
	line-height: 1em;
	color: #008251;
	letter-spacing: -1px;
}
section.mainContent h1.lead {
	font-weight: 400;
	margin: 128px 0 102px 0px;
	font-size: 1.5em;
	line-height: 1.6em;
	letter-spacing: -.4px;
	color: #FFFFFF;
}
section.mainContent h2 {
	margin: 30px 550px 5px 0px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.6em;
	line-height: 1em;
	color: #2bb673;
}
section.mainContent p {
	margin: 0px 550px 8px 0px;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #5D6460;
}
section.mainContent p strong {
	font-weight: 400;
}
section.mainContent p.intro {
	font-family: 'Roboto', sans-serif;
	font-size: 1.3em;
	line-height: 1.5em;
	margin: 0 500px 0px 0px;
	font-weight: 400;
}
section.mainContent p.first {
	color: #000;
}
section.mainContent p .see {
	font-size: .8em;
	line-height: 1.5em;
}
section.mainContent aside.infoblock {
	width: 51%;
	margin: 8px 0 8px -4px;
}	
section.mainContent aside.infoblock img.infographic {
	width: 100%;
}
section.mainContent p.footnote {
	font-size: .8em;
	line-height: 1.3em;
	margin-top: 30px;
	margin-bottom: 40px;
	border-top: 1px solid #9fa5a2;
	padding-top: 4px;
}
section.mainContent sup { 
    vertical-align: super;
    font-size: .7em;
	line-height: 1.5em;
}
section.mainContent p.dropMenu {
	font-family: 'Roboto Condensed', sans-serif;
	border-top: 1px solid #9fa5a2;
	padding-top: 3px;
}
section.mainContent p.baseblurb {
	font-size: 1em;
	line-height: 1.2em;
	margin: 10px 0 10px 0%;
}
section.mainContent p.basebuy {
	display: inline-block;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	border: 1px solid #9fa5a2;
	background-color: #b3ddc4;
	padding: 8px 10px 6px 12px;
	margin: 18px 0 10px 0px;
}
section.mainContent footer {
	border-top: 1px solid #98A3AB;
	margin-top: 50px;
}
section.mainContent footer p {
	font-size: 1em;
	line-height: 1.4em;
	margin: -5px 0 20px 0%;
}
section.mainContent footer p.footorder {
	/*border-top: 1px solid #C3C6C6;*/
	padding-top: 4px;
	margin-bottom: 50px;
}
section.mainContent footer p a:link {
	color: #1755A5;
}

/*NAVIGATION*/
aside.expando {
	font-family: 'Roboto Condensed', sans-serif;
} 

aside.navigation ul {
	font-family: 'Roboto Condensed', sans-serif;
	padding: 0px;
	list-style-type: none;
	margin-bottom: 0px;
}
aside.navigation ul li {
	font-size: 17px;
	line-height: 18px;
	margin: 0px 0px 15px 10px;
	font-weight: 400;
}
aside.navigation ul li.goHead {
	font-size: 19px;
	font-weight: bold;
	color: #2bb673;
	margin-top: 18px;
	margin-bottom: 5px;
}
aside.navigation ul li.goHead2 {
	font-size: 17px;
	font-weight: bold;
	color: #2bb673;
	margin-top: 18px;
	margin-bottom: 5px;
}
aside.navigation ul li.also {
	font-size: 16px;
	line-height: 18px;
}
aside.navigation br {
	display: none;	
}
aside.navigation ul li a:link {
	color: #5A5D5E;
	text-decoration: none;
}
aside.navigation ul li a:visited {
	color: #A4A8A9;
	text-decoration: none;
}
aside.navigation ul li a:hover {
	background-image: url(../siteGFX/plusbullet.svg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 22px;
	padding-right: 26px;
	padding-top: 6px;
	padding-bottom: 6px;
	color: #009639;
	margin-right: -25px;
	font-weight: 700;
}
section.mainContent p.dropMenu {
	display: none;
}
section.mainContent aside.expando {
	display: none;
}

/*GRAPHICS*/
.buyPonicsStone {
	margin: 0 0 0 0px;
}
.hesslogo {
	margin: 0px;
}


/*MEDIA QUERIES • • • MEDIA QUERIES • • • MEDIA QUERIES • • • MEDIA QUERIES*/

@media screen and (max-width: 1100px) {
.container {
	background: url(../siteGFX/sub-tomatoSplash.jpg) no-repeat -30px 0px;
	background-size: 1400px auto;
	background-color: #FFF;
}
}

@media screen and (max-width : 1050px ){
.container {
	background: url(../siteGFX/sub-tomatoSplash.jpg) no-repeat -45px 0px;
	background-size: 1300px auto;
	background-color: #FFF;
}
section.splashContent {
	width: 435px;
	margin-top: 340px;
}
aside.navigation ul {
	margin: 0px 0px 0px 0px;
}
section.mainContent {
	margin: 0 20px 0 470px;
}
section.mainContent h1.lead {
	margin: 115px 0 92px 0px;
}
section.mainContent h1 {
	margin: 0 450px 10px 0px;
}
section.mainContent p {
	margin: 0px 450px 8px 0px;
}
/*section.mainContent img.infographic {
	width: 54%;
}*/
aside.photoBlock {
	margin-top: -30px;
	width: 405px;
}
aside.photoBlock img.deskpic {
	height: 350px;
	width: 405px;
}
}

@media screen and (max-width : 948px ){
.container {
	background: url(../siteGFX/sub-tomatoSplash.jpg) no-repeat -30px 0px;
	background-size: 1230px auto;
	background-color: #FFF;
}
section.splashContent {
	width: 422px;
	margin-top: 322px;
}
section.mainContent {
	width: 90%;
	margin: 0 0 0 460px;
}
section.mainContent h1 {
	margin: 0 390px 10px 0px;
}
section.mainContent h1.lead {
	font-size: 1.3em;
	line-height: 1.7em;
	padding-top: 2px;
	margin: 110px 0 86px 0px;
}
section.mainContent h2 {
	margin: 10px 390px 6px 0px;
}
section.mainContent p {
	margin: 0px 400px 8px 0px;
}
aside.navigation br {
	display: block;	
}
aside.photoBlock {
	margin-top: 0px;
	width: 390px;
}
aside.photoBlock.shortmenu {
	margin-top: 180px;
}
aside.photoBlock img.deskpic {
	height: 350px;
	width: 390px;
}
section.mainContent footer p {
	margin: -5px 0 20px 11%;
}
}

@media screen and (max-width : 850px ){
.container {
	background: url(../siteGFX/sub-tomatoSplash.jpg) no-repeat -35px 0px;
	background-size: 960px auto;
	background-color: #FFF;
}
section.splashContent {
	width: 320px;
	margin-top: 268px;
}
aside.photoBlock {
	margin-top: 20px;
	width: 300px;
}
section.mainContent {
	margin: 0 20px 0 355px;
}
section.mainContent h1 {
	margin: 0px 340px 10px 0px;
}
section.mainContent h1.lead {
	margin: 81px 0px 61px 0px;
	font-size: 1.2em;
	line-height: 1.9em;
	font-weight: normal;
}
section.mainContent h2 {
	margin: 10px 290px 6px 0px;
}
section.mainContent p {
	margin: 0px 340px 8px 0px;
}
aside.photoBlock {
	width: 300px;
}
aside.photoBlock.shortmenu {
	margin-top: 80px;
}
aside.photoBlock img.deskpic {
	object-position: 30% 0;
	height: 300px;
	width: 300px;
}
section.mainContent footer p {
	margin: -5px 0 20px 13%;
}
}

@media screen and (max-width : 750px ){ /* single column */
.container {
	background: url(../siteGFX/submobi-tomatoSplash.jpg) no-repeat -50px 0px;
	background-size: 111% auto;
	background-color: #FFF;
}
section.splashContent {
	display: none;
}
section.spacer {
	margin-top: 25%; /*allows nav trigger to move in concert with scaling background art*/
}
section.mainContent {
	clear: right;
	margin: 0px 0px 0 30px;
}
section.mainContent p.dropMenu { /*trigger*/
	display: block;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 18px;
	text-align: right;
	margin: -20px 30px 160px 0px;
	font-weight: 400;
}
section.mainContent aside.expando {
	margin: 26% 4% 0 0px;
	text-align: right;
}
section.mainContent aside.expando ul {
	display: block;
	font-family: "acumin-pro-condensed", sans-serif;
	padding: 0px;
	list-style-type: none;
	margin: 0 0 -280px 0;
	border-bottom: 2px solid #E9E9E9;
}
section.mainContent aside.expando ul li {
	font-size: 18px;
	line-height: 22px;
	margin: 0px 0px 12px 10px;
}
section.mainContent aside.expando ul li.goHead {
	font-size: 20px;
	font-weight: bold;
	color: #008251;
	margin-top: 18px;
}
section.mainContent aside.expando ul li.goHead2 {
	font-size: 17px;
	font-weight: bold;
	color: #2bb673;
	margin-top: 18px;
	margin-bottom: 5px;
}
section.mainContent aside.expando ul li.also {
	font-size: 16px;
	line-height: 18px;
	margin-bottom: 20px;
}
section.mainContent aside.expando ul li a:link {
	color: #5A5D5E;
	text-decoration: none;
}
section.mainContent aside.expando ul li a:visited {
	color: #A4A8A9;
	text-decoration: none;
}
section.mainContent aside.expando ul li a:hover {
	background-image: url(../siteGFX/plusbullet.svg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 22px;
	padding-right: 32px;
	padding-top: 6px;
	padding-bottom: 6px;
	color: #009639;
	margin-right: -28px;
	font-weight: 700;
}
section.mainContent h1.lead {
	display: none;
}
section.mainContent h1 {
	margin: 335px 30px 10px 0px;
}
section.mainContent h2 {
	margin: 25px 30px 6px 0px;
}
section.mainContent p {
	margin: 10px 30px 10px 0px;
}
section.mainContent aside.infoblock {
	width: 96%;
	margin: 8px 0 8px -4px;
}
section.mainContent p.footnote {
	margin-bottom: 10px;
}
aside.photoBlock2 {
	display: block;
	border-top: 2px solid #EFEFEF; 
	padding-top: 20px;
	margin-top: 20px;
	width: 95%;
}
.mobipic {
	border: solid 1px #9C9C9C;
	width: 100%;
}
aside.photoBlock2 p.caption {
	margin: 0px 10px 18px 0px;
	font-size: .9em;
	line-height: 1.2em;
}
aside.photoBlock2 p.caption .credit {
	font-size: .85em;
	line-height: 1.2em;
}
section.mainContent footer p {
	margin: -5px 0 20px 15.5%;
}
}

@media screen and (max-width: 550px) {
.container {
	background: url(../siteGFX/submobi-tomatoSplash.jpg) no-repeat -38px 0px;
	background-size: 112% auto;
	background-color: #FFF;
}
section.spacer {
	margin-top: 24%;
}
section.mainContent p.dropMenu {
	margin-bottom: 135px;
}
/*section.mainContent aside.expando ul {
	margin-bottom: -230px;
}*/
section.mainContent aside.expando {
	margin: 26% 6% 0px 0px;
}
section.mainContent h1 {
	margin: 300px 30px 10px 0px;
}
aside.photoBlock2 .keyline {
	width: 99%;
}
aside.photoBlock2 p.caption {
	margin: 0px 180px 18px 0px;
	width: 92%;
}
section.mainContent footer p {
	margin: -5px 0 20px 19%;
}
}

@media screen and (max-width: 425px) {
.container {
	background: url(../siteGFX/submobi-tomatoSplash.jpg) no-repeat -30px 0px;
	background-size: 111% auto;
	background-color: #FFF;
}
section.spacer {
	margin-top: 23%;
}
section.mainContent p.dropMenu {
	margin-bottom: 110px;
}
section.mainContent aside.expando ul {
	margin-bottom: -190px;
}
section.mainContent h1 {
	margin: 200px 30px 10px 0px;
	font-size: 2.5em;
	line-height: .9em;
}
aside.photoBlock2 p.caption {
	margin: 0px 80px 18px 0px;
}
section.mainContent footer p {
	margin: -5px 0 20px 25%;
}
}