html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body {line-height:1.25em;font:12px arial;background:#fff; color:#00638e; font-family: Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;}

h1 {font-size:1.8rem; font-weight:bold; margin-bottom: 15px;}
h2 {font-size:1.8rem; font-weight:bold; margin-bottom: 15px;}
a {text-decoration: none; cursor:pointer; color: #28326d;}
a:hover {text-decoration: underline;}

#main {margin:0 auto; max-width:800px;}
.wrap {margin:0 auto; }

#header {padding: 35px 5% 0 5%; width: 90%; text-align: center; height: 100px;}
#header h1 {background: url(logo.jpg) no-repeat 30% 25%; background-size:51%; padding:0 0 20px 300px; margin-bottom:5px; font-size: 2.5rem; color:#00638e}

#header .imgblock {display: block; width: 40%;}
#header img {display: block; width: 76%; margin-top: 8px;}

#header #imgblock_ih {float: right;}
.boxShow {width:100%; text-align: center; background:#00638e; padding: 30px 0;}
.boxShow h1 {color:#fff; padding: 0 0 18px 0; margin:0 auto; text-align: center; font-size:1.8rem;}
.boxShow p {color:#fff; width: 75%; font-size: 1.25rem; display:block; margin:0 auto 10px auto;}
.boxShow strong {font-weight: bold;}
.photos {padding-bottom:30px; overflow: auto;}
.photos li {width:31.3%; padding:0 1% 20px 1%; font-size: 1rem; float:left; position:relative;}
.photos img {width:100%}

.uspList li {padding-bottom: 20px; clear:both; font-size:1.25rem;}
.uspList li strong {display: block; font-weight: 2.2rem; float:left; margin-right: 30px; border: solid 3px #00638e; text-align: center; border-radius: 50%; width: 100px; height:30px; margin-bottom: 20px; padding-top:70px; font-size: 0.9rem}
.uspList li strong.science {background: url(images/science-icon.png) no-repeat 50% 25%; background-size:75px}
.uspList li strong.testing {background: url(images/research-icon.png) no-repeat 50% 25%; background-size:65px}
.uspList li strong.natural {background: url(images/natural-icon.png) no-repeat 50% 30%; background-size:60px}
.uspList li p {padding-top:30px;}
.boxWrap {width:100%; display: block; margin-bottom:20px;}
.boxWrap h1 {color:#fff; background:#00638e; padding: 15px 0;margin:0 auto; text-align: center; font-size:1.25rem;}

.heroPic {width:100%; display:block; margin:10px 0 30px 0;}

#products-tower li {width:45%; padding:0 5% 20px 0; font-size: 1rem; float:left; position:relative;}
#products-tower img {float:left; padding:10px 0; display: block; width:30%;}
#products-tower div {position: absolute; top: 30px; right: 5%; display: block; font-size: 1.25rem; text-align: left; width: 65%;}
#products-tower strong {font-weight: bold; font-size: 1.18rem; padding-bottom: 10px;}
#products-tower p {font-size: 0.9rem; padding:7px 0;}
#products-tower div ul {padding-top:10px;}
#products-tower div li {list-style-type: disc; display: list-item; font-size: 0.9rem; width: 100%; padding: 0 0 5px 0; margin-left:20px; float:none;}

#products-grid li {width:20%; padding:0 2.5% 30px 2.5%; float:left; text-align: center; font-size: 1rem;}
#products-grid img {width:100%; padding:10px 0;}
#products-grid strong {display: block; font-size: 1.25rem; text-align: center;}

.products {padding-top:20px;}

#recipes li {width:100%; padding: 0 0 5px 0; float: left; display: block;}
#recipes li img {width:100%;}
#recipes li.mid {width:49%; margin-right: 1%;}
#recipes li.small {width:32%; margin-right: 1%;}

#contactList {padding: 50px 5% 50px 5%; width: 90%; text-align: center; font-size:1.25rem;}
.contactItem {display: inline-block; width: 15%; margin: 0 5% 0 5%; }
.contactItem span { display:block; padding:10px 0}
.contactItem img {width:100%; height:auto}
#contactList .address {clear:both; display:block; line-height: 1.5em; padding-top:20px;}

#contact {background: url(images/logo.png) no-repeat 0 80%; background-size: 200px;}
#contact div {display: block; font-size: 1.8rem; padding: 80px 0 80px 40%;}
#contact a {display: block; line-height: 1.5em;}

#video {text-align:center; padding:20px 0 50px 0;}
#video h2 {font-size:1.8rem; color:#111}
#video strong {padding:30px 0; font-size:1.25rem; width:65%; margin: 0 auto; display: block;}
#map {background:url(images/map.jpg) no-repeat 50% 0; padding-top:500px;}
#map ul {clear:both; margin: 0 auto; text-align: center;}
#map li {background: url(images/pin.png) no-repeat 50% 30%; width: 200px; height: 100px; text-align: center; padding-top:100px; font-size: 1.2rem; margin:0 5%; border: solid 1px #fff; border-radius: 200px; display: inline-block; }
#stockist {text-align: center; font-size: 1.2rem; padding-bottom: 50px;}
.box {clear:both; margin-bottom: 20px; clear:both;}
.boxLeft {float: left; display:block; margin-right: 4%; width: 48%; text-align: right;}
.boxRight {float: right; display: block; margin-left: 4%; width: 48%; text-align: left;}
.subtitle {font-size:180%;}
.subtitleAlt {font-size:180%;}
.itemList { display: block; clear:both; }
.item {display: block; float:left; width: 30%; margin-right: 5%}
.item:every(3) {margin-right:0}
.itemPic { display: block; margin-bottom: 15px;}

.itemText { display: block; }
.mediaBox {margin-bottom: 15px;}
#distributors span {font-size: 1.8rem; text-align: center; display: block;}

.ingredients {display: block; font-size:70%;}
.boxLeft h2, .boxRight h2 {text-shadow: 0 0 5px #000; padding-top:10px}
.boxLeft span, .boxRight span {text-shadow: 0 0 5px #000;}
.boxImageRight {float:right;}
.boxImageLeft {float:left;}
.intro { margin-bottom: 0; text-align:center;}
.intro strong, #about strong {padding-bottom:30px; font-size:1.25rem; width:65%; margin: 0 auto; display: block;}
.footerLogo { width: 50%; display:block; margin: 50px auto}

#peaches, #pears, #peach, #puree, #crushup, #provital, #jam, #tomatoes, #beans, #taylor
{min-height:270px; height:auto; width:100%; background: url(images/peachesbg.jpg) no-repeat 50% 50%; background-size:cover; padding-top:90px; color:#fff; margin-bottom: 0}
#about img, #closer img {width:100%; padding-bottom: 10px; display: block}
#about .boxRight {text-shadow: 0 0 5px #fff;}
#about .boxRight h2 {font-size:150%; text-shadow: 0 0 5px #fff;}
#about .boxRight span {text-shadow: 0 0 5px #fff; width:70%}
#grower, #jam {padding-top:50px;}
#grower {padding-bottom: 50px}

.recipeTitle {padding-top:10px; clear:both; display: block;}
#jam h1 {text-shadow: 0 0 5px #000;}
#jam .intro {text-shadow: 0 0 5px #000;}
.gapLater {padding-top:58px;}
.gapLaterBeta {padding-top:38px;padding-bottom:20px;}
#growers {width:100%; display:block}
#growers li {padding: 0 0 10px 0; width:100%; display: block; text-align: center; position:relative;}
.grower-item img {display:block; width: 100%;}
.grower-item strong {font-weight: bold; font-size: 1.5rem; position:absolute; bottom: 50px; left: 15%; text-align: left; text-shadow: 0 0 5px #000;}
.grower-item strong em {font-size:2rem; text-shadow: 0 0 5px #000;}
#pears {background-image: url(images/pearbg.jpg)}
#peach {background-image: url(images/peachbg.jpg)}
#puree {background-image: url(images/pureebg.jpg)}
#crushup {background-image: url(images/crushbg.jpg)}
#provital {background-image: url(images/provitalbg.jpg)}
#jam {background-image: url(images/jambg.jpg)}
#tomatoes {background-image: url(images/tomatoesbg.jpg)}
#beans {background-image: url(images/beansbg.jpg)}
#taylor {background-image: url(images/taylorbg.jpg)}
#youku {width:710px; height:400px; background:#111;}

.clear {width:100%; height: 1px; background:none; display:block; clear:both; border:none;}

@media only screen and (max-width: 800px) {
  #header h1 {background-size:49%; padding-left: 220px; background-position: 30% 27%; font-size: 1.9rem;}
  .boxShow p {width:90%}
  #contact {background-size: 120px; background-position: 10px 60%}
  .contactItem {width:30%}
  .uspList {padding: 0 5%;}
  .uspList li p {padding-top:20px;}
}
@media only screen and (max-width: 700px) {
    .uspList li p {padding-top:10px;}
    .footerLogo { width: 70%; }
    #products-tower li {width:90%; padding:0 5% 20px 5%;}
    #products-tower img {width:20%;}
    #products-tower div {position: absolute; width: 75%; padding-left:3%; right:0}
}

@media screen and (max-width: 600px) {
  #header h1 {background-size:55%; background-position:15% 50%; font-size:1.7rem; padding: 0 0 5px 160px;}
  #header {height: 90px;}
}

@media only screen and (max-width: 500px) {
  #products-tower img {width:40%;}
  #products-tower div { width: 45%; right:10%}
  .uspList li p {padding-top:0;}
  .photos li {width:90%; padding:0 5% 20px 5%; }
  .photos li:nth-child(3), .photos li:last-child {padding-right:2.5%}
  #header h1 {background-size:55%; background-position:15% 50%; font-size:1.7rem; padding: 0 0 5px 160px;}
  #header {height: 90px;}
}