/* fonts
****************************************************************************************/
@font-face {font-family: "Cabin-Bold"; src: url("fonts/Cabin-Bold.otf") format("opentype");}
@font-face {font-family: "Cabin-BoldItalic"; src: url("fonts/Cabin-BoldItalic.otf") format("opentype");}
@font-face {font-family: "Cabin-Italic"; src: url("fonts/Cabin-Italic.otf") format("opentype");}
@font-face {font-family: "Cabin-Medium"; src: url("fonts/Cabin-Medium.otf") format("opentype");}
@font-face {font-family: "Cabin-MediumItalic"; src: url("fonts/Cabin-MediumItalic.otf") format("opentype");}
@font-face {font-family: "Cabin-Regular"; src: url("fonts/Cabin-Regular.otf") format("opentype");}
@font-face {font-family: "Cabin-SemiBold"; src: url("fonts/Cabin-SemiBold.otf") format("opentype");}
@font-face {font-family: "Cabin-SemiBoldItalic"; src: url("fonts/Cabin-SemiBoldItalic.otf") format("opentype");}
@font-face {font-family: "JustusPro-Bold"; src: url("fonts/JustusPro-Bold.otf") format("opentype");}
@font-face {font-family: "JustusPro-BoldItalic"; src: url("fonts/JustusPro-BoldItalic.otf") format("opentype");}
@font-face {font-family: "JustusPro-Italic"; src: url("fonts/JustusPro-Italic.otf") format("opentype");}
@font-face {font-family: "JustusPro-Light"; src: url("fonts/JustusPro-Light.otf") format("opentype");}
@font-face {font-family: "JustusPro-LightItalic"; src: url("fonts/JustusPro-LightItalic.otf") format("opentype");}
@font-face {font-family: "JustusPro-Medium"; src: url("fonts/JustusPro-Medium.otf") format("opentype");}
@font-face {font-family: "JustusPro-MediumItalic"; src: url("fonts/JustusPro-MediumItalic.otf") format("opentype");}
@font-face {font-family: "JustusPro-Regular"; src: url("fonts/JustusPro-Regular.otf") format("opentype");}
@font-face {font-family: "JustusPro-Thin"; src: url("fonts/JustusPro-Thin.otf") format("opentype");}
@font-face {font-family: "JustusPro-ThinItalic"; src: url("fonts/JustusPro-ThinItalic.otf") format("opentype");}

/* bootstrap overrides
****************************************************************************************/
body {padding-top: 91px; line-height: 15px;}
a, a:hover {color: #1d84c6;}
textarea.form-control {height: 200px;}
.breadcrumb {padding-left: 0; margin: 0; background: none;}
.page-header{margin: 0; padding: 0; border: none;}
.form-control {background: transparent; border-color: #777777; border-left: none; border-right: none; border-top: none; border-radius: 0; box-shadow: none;}
textarea.form-control {background-color: #E9E9E9;}

/* headers
****************************************************************************************/
h1, h2, h3, h4, h5, h6 {font-family: "JustusPro-Bold"; margin-top: 0; margin-bottom: 0;}
h1 {padding: 0; line-height: 41px;}
.box-header {padding-top: 25px;}
.box-header-element {display: inline-block;	vertical-align: middle;}
.box-header-element-first {width: 24%; height: 75px;}
.box-header-element-second {width: 75%;}
#header-category, #header-wwa {margin-top: -12px; padding-bottom: 60px;}
#header-category .box-header {padding-top: 60px;}
#header-category h1, #header-wwa h1, #header-other h1 {font-size: 40px; margin-bottom: 0;}
#header-other #h1 {padding-bottom: 25px;}
#header-category .ico-title, #header-wwa .ico-title, #header-story .ico-title, 
#header-other .ico-title, #header-wwa .ico-title {float: right; margin-right: 30px;}
article h3 {margin-top: 0px; margin-bottom: 15px; font-size: 24px;}
footer h3 {margin-top: 11px; margin-bottom: 2px; font-family: "JustusPro-Medium"; font-size: 15px;}
#tek-wrap-leftrail h3 {margin-top: 0; margin-bottom: 15px; font-size: 24px;}
h5 {font-family: "JustusPro-Medium"; line-height: 15px; margin-top: 15px;}
h4.media-heading a {font-size: 20px; line-height: 23px; color: #3e4045;}
h4.media-heading.lg a {font-size: 30px; line-height: 29px;}
#related-stories h3 {font-size: 24px; margin-top: 20px; margin-bottom: 20px;}
h2.wwa {font-size: 36px; margin-top: 40px; margin-bottom: 0;}
h3.wwa {font-family: "Cabin-Regular"; font-size: 24px; margin-top: 15px; margin-bottom: 15px;}

/* callout - not included in base bootstrap */
.bs-callout {margin-top: -35px; padding: 30px 30px 60px 30px; border-left: 5px solid #eee;}
.bs-callout h4 {margin-top: 0;}
.bs-callout p:last-child {margin-bottom: 0;}
.bs-callout code, .bs-callout .highlight {background-color: #fff;}
.bs-callout-danger {background-color: #fcf2f2; border-color: #d9534f;}
.bs-callout-warning {background-color: #fefbed;	border-color: #f0ad4e;}
.bs-callout-info {background: url('/common/graphics/1126/bg_2878.png') no-repeat; background-size: 100% 100%; border-color: #D36B3F;}

/* carousel */
.carousel-caption {
	left: auto;
	right: auto;
	top: 30%;
	padding-bottom: 0;
	text-align: left;
	font-size: 16px;
	width: 512px;
}
.carousel-caption .carousel-featured {font-family: "JustusPro-Bold"; font-size: 18px;}
.carousel-featured-stroke {margin-top: 5px; height: 7px; width: 109px; background: url('/common/graphics/NPB_HOMEPAGE_featured_underline.png') no-repeat;}
.carousel-indicators {display: none;}
.carousel-caption h3 a {color: #fff; font-family: "JustusPro-Medium"; font-size: 48px;}
.carousel-counter {position: absolute; right: 60px; bottom: 40px; color: #fff; font-family: "JustusPro-Regular"; font-size: 25px;}
.carousel-counter span.on {font-family: "JustusPro-Medium"; color: #dab35f;}
.carousel-control {position: relative; width: 0;}
.carousel-control, .carousel-control:hover {opacity: 1; text-shadow: none; display: block;}
.carousel-control.left, .carousel-control.right {position: absolute; background: transparent;}
.carousel-control .glyphicon-menu-right, .carousel-control .glyphicon-menu-left {font-size: 30px; top: -8px;}
.carousel-control .glyphicon-menu-right {right: 4px;}
.carousel-control .glyphicon-menu-left {left: -25px;}


/* navbar */
.navbar-brand {margin-left: 0; padding: 0;}
.navbar-default .navbar-nav>li>a {font-family: "JustusPro-Medium"; font-size: 14px; color: #6d6e70;}
.nav>li>a {padding-left: 27px; padding-right: 27px;}
.navbar-nav>li>.dropdown-menu {margin-top: -30px; padding-top: 15px; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.dropdown-menu>li>a {font-family: "JustusPro-Regular";}
.navbar-inverse div { line-height: 30px; }
.navbar-right {margin-right: 0;}
.navbar-nav>li>a {padding-top: 45px; padding-bottom: 29px;}
.navbar-toggle {border: none;}
.navbar-allergy {z-index: 9999; position: absolute; top: 0; right: 0; height: 29px; line-height: 29px; padding: 0 10px; background-color: #868686; font-family: "JustusPro-Medium"; font-size: 10px; color: #fff; text-align: center;}
.navbar-allergy a {font-family: "JustusPro-Bold"; color: #fff; text-decoration: underline;}
.navbar-allergy a:hover {text-decoration: none !important;}

/* bootstrap validator - avoiding adding another http for separate css file.
****************************************************************************************/
.bootstrap-validator-form .help-block{margin-bottom:0}

/* hr line styles
****************************************************************************************/
hr.content {clear: both; border-top: 1px dashed #999; border-bottom: none; border-right: none; border-left: none; height: 1px; padding: 0; margin: 10px 0;}

/* main containers -- note: the tek containers are overridden with layout.css if not in responsive mode.  make your changes in layout.css if that is the case.
****************************************************************************************/
#tek-wrap-footer {background: #fff url(../graphics/Footer-Background.png) no-repeat; background-size: 100% 100%;}
.header-wrap {position: relative;}
.header-wrap-outer {position: relative; height: 91px; background: url(../graphics/Navigation-Background.png) no-repeat; background-size: 100% 100%;}
a.header-search {display: block; width: 24px; height: 24px; background: url(../graphics/NPB_searchICON.png) center right no-repeat;}
li.header-search-li a.header-search {padding-left: 8px; padding-top: 77px;}
.footer-wrap {}
.footer-wrap-2 {color: #fff; background-color: #CFC2A9;}
.footer-wrap-2 a {color: #fff;}
#tek-site {padding-bottom: 22px;}/*padding-bottom: 54px;*/
#tek-wrap-site {background-color: #fff;}
#tek-rr-items, #tek-lr-items {margin: 0;}
ul#tek-rr-items ul, ul#tek-lr-items ul {margin: 0; padding-left: 1.25em;}
#tek-rr-items h4.media-heading {padding-top: 1em;}
#poweredBy {height: 71px; width: 133px;	float: left;}
#nonmediawarning {width: 400px;}
.rail-box {margin-right: 15px; padding: 15px; border: 1px solid #cccccc;}
#wwa-history {/*margin-top: -20px;*/}


/* page specific:  home page
****************************************************************************************/
#hm-tweet {width: 700px; position: relative; margin-top: 65px; margin-bottom: 0px; margin-left: auto; margin-right: auto; font-family: "JustusPro-Regular"; font-size: 26px; line-height: 27px;}
.tweet-npb-handle {position: absolute; /*upper left corner:*/ top: -29px; left: 40px;}
.tweet-bird {z-index: 999; position: absolute; /*upper left corner:*/ top: -30px; left: -30px; /*lower right corner: top: 130px; right: -26px;*/ width: 61px; height: 53px; background: url(../graphics/twitter_bird.png) no-repeat;}
.tweet-left {/*background: url(../graphics/NPB_CornerTwitter_TopLeft.png) no-repeat top left;*/}
.tweet-right {/*padding: 15px; background: url(../graphics/NPB_CornerTwitter_bottomRight.png) no-repeat bottom right;*/}
#hm-tweet a {color: #dab35e;}
#tweet-carousel .cycle-caption {
	padding: 15px;
	background-image: url(../graphics/NPB_CornerTwitter_TopLeft.png), url(../graphics/NPB_CornerTwitter_bottomRight.png);
	background-position: top left, bottom right;
	background-repeat: no-repeat;
	width: 700px;
}


/* page specific:  recipes
****************************************************************************************/
#recipe-meta {line-height: 25px;}
.nutri-box {background-color: #EAE9E9; border-radius: 2px; padding: 5px; margin-bottom: 10px; text-align: center;}
.nutri-num {font-family: "Cabin-Bold"; font-size: 15px;}
.nutri-col {padding-left: 3px; padding-right: 2px;}
ul.recipe-meta-data li {padding-right: 10px;}
.recipe-meta, .recipe-meta-data {font-family: "Cabin-Bold"; font-size: 21px; line-height: 24px;}
.recipe-prep-time {display: block; padding-left: 34px; background: url(../graphics/Timer-Vector-resized.png) no-repeat;}
.recipe-servings {display: block; padding-left: 34px; background: url(../graphics/Recipe_Person-Icon-resized.png) no-repeat;}
.recipe-diff-easy {display: block; padding-left: 101px; background: url(../graphics/npb_easy.gif) no-repeat;}
.recipe-diff-expert {display: block; padding-left: 101px; background: url(../graphics/npb_expert.gif) no-repeat;}
.recipe-diff-intermediate {display: block; padding-left: 101px; background: url(../graphics/npb_intermediate.gif) no-repeat;}

/* page specific:  who we are
****************************************************************************************/
#header-wwa {background: url(../graphics/We-Are-Peanuts-Background.png) no-repeat; background-size: 100% 100%; padding-bottom: 60px;}
.wwa-section {padding-right: 50px;}
#wwa-values {background: url(../graphics/Values-Background.png) no-repeat; background-size: 100% 100%; padding-bottom: 60px;}

/* comments styles
****************************************************************************************/
.comments_username {color: #888; font-weight: bold;}
.comments_date {color: #888; font-weight: normal; font-size: 10px;}
.comments_text {font-weight: normal;}
	
/* tag cloud styles: 
NOTE: you may want to make same changes to maint\newsroom_maint.css
****************************************************************************************/
.tag_cloud_smallest, a.tag_cloud_smallest, a.tag_cloud_smallest:link, a.tag_cloud_smallest:visited {font-weight: normal; font-size: 12px; line-height: 14px;}
.tag_cloud_small, a.tag_cloud_small, a.tag_cloud_small:link, a.tag_cloud_small:visited {font-weight: normal; font-size: 16px; line-height: 18px;}
.tag_cloud_medium, a.tag_cloud_medium, a.tag_cloud_medium:link, a.tag_cloud_medium:visited {font-weight: normal; font-size: 18px; line-height: 20px;}
.tag_cloud_large, a.tag_cloud_large, a.tag_cloud_large:link, a.tag_cloud_large:visited {font-weight: normal; font-size: 22px; line-height: 24px;}
.tag_cloud_largest, a.tag_cloud_largest, a.tag_cloud_largest:link, a.tag_cloud_largest:visited {font-weight: normal; font-size: 26px; line-height: 28px;}

/* section tree styles
****************************************************************************************/
.mSectionTree {line-height: 12px;}
.mSectionTree table {margin: 0; padding: 0;}
.mSectionTree td {margin: 0; padding: 0; vertical-align: top;}
.mout {background-color: #ffffff; width: 100%; padding: 0px; font-family: Tahoma, Verdana; font-size: 11px;}
.mover {background-color: #eeeeee; width: 100%; font-weight: bold; padding: 0px; font-family: Tahoma, Verdana; font-size: 11px;}
.mdisabled0, a.mdisabled0:link, a.mdisabled0:active, a.mdisabled0:visited, a.mdisabled0:hover {color: #999999; background-color: #ffffff; text-decoration: none; width: 100%; padding: 0px; font-family: Tahoma, Verdana; font-size: 11px;}
.mdisabled1 {text-decoration: none;}
.mtblbase {background-color: #fff;color: #000000; font-family: Tahoma, Verdana; font-size: 11px; margin: 0; padding: 0;}
.mExpandBlock {background: none;}
.mExpand {background: none; text-decoration:none; color:#0000aa;}

/* link styles
****************************************************************************************/
.taglinks, a.taglinks, a.taglinks:visited, .editlinks, a.editlinks, a.editlinks:visited, .relatedlinks, a.relatedlinks, a.relatedlinks:visited, .pagenavlinks, a.pagenavlinks, a.pagenavlinks:visited {}
a.morelinks:hover, a.taglinks:hover, a.editlinks:hover, a.relatedlinks:hover, a.pagenavlinks:hover, a.smallfont:hover {}
.pagenavlinks, a.pagenavlinks {display: block; padding-top: 30px;}
a.pagination {margin: 0; font-family: "Cabin-Bold"; color: #3e4045;}
.npb-caret {position:relative; top: 5px; font-family: arial; color: #ccc; font-size: 32px;}
.morelinks, a.morelinks , a.morelinks:visited {text-decoration: underline;}
a.morelinks:hover {text-decoration: none;}
#tek-carousel a.morelinks {color: #DAB35F;}
.thumb-desc a.morelinks {color: #fff;}

/* misc
****************************************************************************************/
.sm-share {padding-bottom: 20px;}
.body-popup {background-color: #fff; padding: 10px;}
.rail-fb *, .rail-twitter * {width: 100% !important;} /*makes responsive width*/
.recaptchatable {line-height: 14px;}/*anything higher than 16px causes gaps in the layout.*/
.nowrap {white-space: nowrap;}
.spacer {height: 15px;}
.underscore {text-decoration: underline;}
.fo_select, .fo_select td {margin: 0; padding: 0;}
.spacer5 {clear: both; height: 5px;}
.spacer10 {clear: both; height: 10px;}
.spacer15 {clear: both; height: 15px;}
.spacer25 {clear: both; height: 25px;}
.spacer30 {clear: both; height: 30px;}
.spacer1em {clear: both; height: 1em;}
.spacer2em {clear: both; height: 2em;}
.pad-5 {padding: 5px;}
.pad-10 {padding: 10px;}
.pad-15 {padding: 15px;}
.pad-20 {padding: 20px;}
.pad-25 {padding: 25px;}
.pad-1em {padding: 1em;}
.pad-2em {padding: 2em;}
.pad-right5 {padding-right: 5px;}
.pad-right10 {padding-right: 10px;}
.pad-right15 {padding-right: 15px;}
.pad-right20 {padding-right: 20px;}
.pad-right25 {padding-right: 25px;}
.pad-right1em {padding-right: 1em;}
.pad-right2em {padding-right: 2em;}
.pad-left5 {padding-left: 5px;}
.pad-left10 {padding-left: 10px;}
.pad-left15 {padding-left: 15px;}
.pad-left20 {padding-left: 20px;}
.pad-left25 {padding-left: 25px;}
.pad-left1em {padding-left: 1em;}
.pad-left2em {padding-left: 2em;}
.pad-top5 {padding-top: 5px;}
.pad-top10 {padding-top: 10px;}
.pad-top15 {padding-top: 15px;}
.pad-top20 {padding-top: 20px;}
.pad-top25 {padding-top: 25px;}
.pad-top1em {padding-top: 1em;}
.pad-top2em {padding-top: 2em;}
.pad-bottom5 {padding-bottom: 5px;}
.pad-bottom10 {padding-bottom: 10px;}
.pad-bottom15 {padding-bottom: 15px;}
.pad-bottom20 {padding-bottom: 20px;}
.pad-bottom25 {padding-bottom: 25px;}
.pad-bottom1em {padding-bottom: 1em;}
.pad-bottom2em {padding-bottom: 2em;}
.warning {color: #ff0000; font-weight: bold;}
.tek-thumbnail-left {float: left !important; margin-right: 1em;}
.tek-thumbnail-right {float: right !important; margin-left: 1em;}
.media-strip {margin-top: 20px; margin-bottom: 20px;}
.list-box {border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.list-box-first {border-top: 1px solid #ccc;}
.list-box a {color: #3e4045;}
.addthis_toolbox {min-width: 200px;}
.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
	left: 8px;
    right:7px;
    z-index: 99999;
}
#pageme {
    padding-top: 25px;
	/*position: absolute;*/
    left: 50%;
	bottom: -35px;
}

/* colors */
.npb-yellow, a.npb-yellow, a.npb-yellow:hover {color: #DAB35F;}
.npb-blue, a.npb-blue, a.npb-blue:hover {color: #01414D;}
.npb-orange, a.npb-orange, a.npb-orange:hover {color: #D36B3F;}
.npb-purple, a.npb-purple, a.npb-purple:hover {color: #5D1D42;}
.npb-green, a.npb-green, a.npb-green:hover {color: #939B72;}


/* submenu links
****************************************************************************************/
#submenu {margin-top: -10px;}
#submenu div {padding-top: 40px;}
#submenu a {font-family: "JustusPro-Regular"; font-size: 18px; color: #3e4045;}

/* classes for tigra form validator */
.inputHighlighted {color: red;}
.inputNormal {color: black;}

/* content detail display based styles (ie: article display, press kit display, etc.)
****************************************************************************************/
#related-stories {margin-top: 21px; margin-bottom: 39px; padding-bottom: 30px; background: url(../graphics/BACKGROUND-Combined.png) no-repeat; background-size: 100% 100%;}
.outlet, .author, .author-box {font-style:italic; color: #919191;}
.author-box {margin-bottom: 15px;}
.author-box img {padding-right: 10px; width: 100px; max-height: 100px; overflow: hidden;}
.abstract {line-height: 14px;}
.abstract-grid {color: #fff; font-size: 11px; line-height: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.6);}
.abstract-grid.lg {font-size: 12px;}
.abstract-grid-emphasize {color: #DAB35E; text-shadow: 0 1px 2px rgba(0,0,0,0.6);}
.section-desc {font-size: 14px; line-height: 17px;}
.tek-caption {font-size: .85em;}
.subtitle {}
.rel-date, .bio-title {}
.disclaimer {
	margin: 0 0 10px 0;
	font-style:italic;
	font-size: 0.9em;
}
.contacts {margin: 10px 0;}
.headshot {padding-right: 5px; display: block; float: left;}
article .alignleft {padding: 10px 10px 10px 0; float: left;}

#content-details {/*overflow: auto;*/}
#content-details img {margin: 5px; max-width: 100%; height: auto;}/* makes content images responsive */
#content-details .media img.media-object {max-width: 600px;} /* images aligned left/right within content don't shrink down to nothing */
#comments, #tags, #related-assets {margin: 0 0 15px 0;}

/* carousel styles
****************************************************************************************/
#tek-carousel {margin: 0 0 25px 0; padding: 0; overflow: hidden; margin-top: -12px;}
/* jQuery Cycle */
/* NOTE: if you are having issues with your carousel showing all pieces of content for a brief second when the page loads,
you can fix this by specifying an exact height on the data-cycle-auto-height element and set overflow: hidden on tek-carousel container; */
.cycle-pager {text-align: center; width: 100%; z-index: 500; overflow: hidden; margin-top: 10px;}
.cycle-pager span { font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer;}
.cycle-pager span.cycle-pager-active { color: #5B9CC8;}
.cycle-pager > * { cursor: pointer;}
.cycle-slideshow-img-left {padding: 0 10px 10px 0;}
.cycle-slideshow-img-right {padding: 0 0 10px 10px;}

/* Bootstrap */
/*.carousel-inner .item img {width: 100%;}*/

.tek-index-mm-box {}
.tek-index-mm-box.video {} /*special properties for video*/
.tek-index-mm-box.audio {} /*special properties for audio*/
.tek-index-mm-box.image {} /*special properties for image*/

/* media gallery popup
****************************************************************************************/
.media_gallery {
	margin: 10px;
	padding: 10px;
	width: 740px;
	border: #ccc solid 1px;
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px; 
	color: #000; 
}
.media_gallery img { padding-right: 10px;}

/************* icons ********************/
.ico-sm {height: 16px; width: 16px; display: block;}
.ico-med {height: 24px; width: 24px; display: block;}
.ico-lg {height: 32px; width: 32px; display: block;}
.ico-title {display: block;}

/* types */
.ico-rss {background: url(../graphics/sm_icons/feed-16x16.png) no-repeat;}
.ico-heart {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_yourHeart_large.png) no-repeat;}
.ico-article {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_LatestNews_large.png) no-repeat;}
.ico-book {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_PeanutInfo_large.png) no-repeat;}
.ico-recipe {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_Recipes_large.png) no-repeat;}
.ico-peanut {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_AboutUs_large.png) no-repeat;}
.ico-plus {height: 75px; width: 76px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_Sustainability_large.png) no-repeat;}

/* actions */
.ico-create-pdf-sm {background: url(../graphics/icons/icon-pdf-16px.png) no-repeat;}
.ico-create-rtf-sm {background: url(../graphics/icons/icon-word-16px.png) no-repeat;}
.ico-create-pdf-med {background: url(../graphics/icons/icon-pdf-24px.png) no-repeat;}
.ico-create-rtf-med {background: url(../graphics/icons/icon-word-24px.png) no-repeat;}
.ico-create-pdf-lg {background: url(../graphics/icons/icon-pdf-32px.png) no-repeat;}
.ico-create-rtf-lg {background: url(../graphics/icons/icon-word-32px.png) no-repeat;}
.ico-dl-sm {background: url(../graphics/icons/icon-dl-16px.png) no-repeat;}
.ico-dl-med {background: url(../graphics/icons/icon-dl-24px.png) no-repeat;}
.ico-dl-lg {background: url(../graphics/icons/icon-dl-32px.png) no-repeat;}

/* social media share */
.share-fb {height: 37px; width: 37px; display: block; padding: 0; margin-right: 20px; background: url(../graphics/Social-Icons.png) no-repeat 0px 0px;}
.share-pi {height: 37px; width: 37px; display: block; padding: 0; margin-right: 20px; background: url(../graphics/Social-Icons.png) no-repeat -60px 0px;}
.share-tw {height: 37px; width: 37px; display: block; padding: 0; margin-right: 20px; background: url(../graphics/Social-Icons.png) no-repeat -120px 0px;}
.share-ig {height: 37px; width: 37px; display: block; padding: 0; background: url(../graphics/Instagram.png) no-repeat;}

/* logos */
.ico-tek {height: 67px; width: 127px; display: block; padding: 0; margin: 0; background: url(../graphics/tek-logo.png) no-repeat;}
.logo {position: absolute; top: 12px; left: 0;}

/* make youtube and other iframes responsive */
.resp-video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.resp-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* thumbnails
****************************************************************************************/
/* make thumbnails all a consistent size regardless of dimensions */
.ratio-4-3, .ratio-1-1, .ratio-2-1 {
  width:100%;
  position:relative;
  background:url() no-repeat 49.9% 49.9%;  /* not 50% to fix the 1px gap that happens in Chrome */
  background-size: cover;
  background-clip:content-box;
}

.ratio-1-1:before {
    display:block;
    content:"";
    padding-top:100%;
}
.ratio-2-1:before {
    display:block;
    content:"";
    padding-top:50%;
}
.ratio-4-3:before {
    display:block;
    content:"";
    padding-top:65%;
}

.ratio-slider {
  width:100%;
  height: 418px;
  position:relative;
  background:url() 50% 50% no-repeat;
  background-size:cover;
  background-clip:content-box;
}

div.thumb-wrapper {
    position:relative; /* important(so we can absolutely position the description div */
}

div.thumb-desc {
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	color: #fff;
	padding: 25px;
	margin:0px;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

div.thumb-desc h4.media-heading a {color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6);}

/* media queries
****************************************************************************************/
@media (max-width: 767px) {
	body {padding-top: 120px;}
	.container {padding-left: 0; padding-right: 0;}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {background-color: #fff;}
	.navbar-allergy {position: relative;}
	li.header-search-li a.header-search {padding-top: 0; padding-left: 27px;}
	.carousel-caption {position: relative; top: 0; left: 0; background-color: #000; font-size: 12px; padding: 10px; width: 100%;}
	.carousel-caption h3 a {font-size: 18px;}
	.carousel-caption .carousel-featured {display: none;}
	.footer-wrap {background: none; background-color: #F7F9F9;}
	#header-wwa h1 {margin-bottom: 0px;}
	article, .section-desc, .wwa-section, #related-stories h3, .hm-tagline, h2.wwa, h3.wwa, #tek-rr-items, .mobile-pad,
		#header-category, #header-wwa, #header-story, #header-other {padding-left: 1em; padding-right: 1em;}
	#hm-tweet {width: 335px;}
	#tweet-carousel {margin: 50px 20px 50px 35px;}
	#tweet-carousel .cycle-caption {min-width: 275px; width: 100%; font-size: 20px;}
	.navbar-nav>li>a {padding-top: 1em; padding-bottom: 1em;}
	#header-category h1, #header-wwa h1, #header-other h1 {font-size: 32px;}
	#header-category .ico-title, #header-wwa .ico-title, #header-story .ico-title, 
	#header-other .ico-title, #header-wwa .ico-title {margin-right: 15px;}
	#pageme {left: 25%;}
	h1, .h1 {font-size: 26px; line-height: 30px;}
	.rail-box {margin-left: 15px;}
	ul.recipe-meta-data li {padding-bottom: 10px;}
}

@media (max-width: 991px) {	
	body {background-color: #fff;}
	h2.hm-hdr-latest-news, h2.hm-hdr-your-health, h2.hm-hdr-recipes, h2.hm-hdr-peanut-info {position: relative; padding-left: 73px; padding-top: 0px; font-size: 36px; line-height: 86px; text-align: center; display: inline-block;}
	h2.hm-hdr-latest-news {margin-top: -25px; background: url(../graphics/NpB_icon_LatestNews.png) no-repeat 0 14px;}
	h2.hm-hdr-your-health {background: url(../graphics/NpB_icon_yourHeart.png) no-repeat 0 14px;}
	h2.hm-hdr-recipes {background: url(../graphics/NpB_icon_Recipes.png) no-repeat 0 14px;}
	h2.hm-hdr-peanut-info {background: url(../graphics/NpB_icon_PeanutInfo.png) no-repeat 0 14px;}
	.hm-section-desc {margin: auto; text-align: center;}
	.hm-tagline {margin: auto; padding-bottom: 1em; font-size: 15px; line-height: 20px; text-align: left;}
	.ico-heart {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_yourHeart.png) no-repeat;}
	.ico-article {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_LatestNews.png) no-repeat;}
	.ico-book {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_PeanutInfo.png) no-repeat;}
	.ico-recipe {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_Recipes.png) no-repeat;}
	.ico-peanut {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_AboutUs.png) no-repeat;}
	.ico-plus {height: 53px; width: 54px; padding: 0; margin: 0; background: url(../graphics/NpB_icon_Sustainability.png) no-repeat;}
	.footer-wrap, .footer-wrap-2 {padding-left: 1em; padding-right: 1em; margin-top: 25px;}
	.box-header-element-first {height: 53px;}
	#header-category h1, #header-wwa h1, #header-other h1 {/*line-height: 53px;*/}
	#header-other {padding-bottom: 35px;}
	#submenu {margin-top: 0;}
	#submenu div {padding-top: 20px;}
	div.thumb-desc {padding: 10px;}
}

@media (min-width: 678px) and (max-width: 991px){
	.nav>li>a {padding-left: 15px; padding-right: 15px;}
	.navbar-nav>li>.dropdown-menu {margin-top: -24px;}
	.carousel-caption h3 a {font-size: 26px;}
	.hm-tagline {text-align: center;}
	.rail-box {margin-left: 0; margin-right: 0;}
	.share-fb, .share-pi, .share-tw, .share-ig {margin-right: 0;}
}

@media (min-width: 992px) {
	.footer-wrap {margin-top: 25px; min-height: 105px;}
	#tek-wrap-centerwell {min-height: 500px;}
	.center-lg {text-align: center;}
	.bumpleft {margin-left: -256px;}
	#header-category {min-height: 337px;}
		
	/* home page
	****************************************************************************************/
	h2.hm-hdr-latest-news, h2.hm-hdr-your-health, h2.hm-hdr-recipes, h2.hm-hdr-peanut-info {padding-left: 73px; font-size: 36px; line-height: 86px; text-align: center; display: inline-block;}
	
	#hm-latest-news {margin-top: -35px; height: 377px; width: 100%; background: url(../graphics/1_HP_Latest-News_Background.gif) no-repeat; background-size: 100% 100%;}
	h2.hm-hdr-latest-news {margin: 10px 0 0 0; background: url(../graphics/NpB_icon_LatestNews.png) no-repeat 0 14px;}
		
	#hm-your-health {padding-top: 40px; margin-top: 0px; height: 618px; width: 100%; background: url(../graphics/2_HP_Your-Health_Background.jpg) no-repeat; background-size: 100% 100%;}
	h2.hm-hdr-your-health {line-height: 53px; background: url(../graphics/NpB_icon_yourHeart.png) no-repeat;}
	
	#hm-recipes {padding-top: 50px; margin-top: 0px; height: 612px; width: 100%; background: url(../graphics/3_HP_Recipe-Background.gif) no-repeat; background-size: 100% 100%;}
	h2.hm-hdr-recipes {line-height: 53px; background: url(../graphics/NpB_icon_Recipes.png) no-repeat;}
	
	#hm-peanut-info {margin-top: 0px; height: 385px; width: 100%; background: url(../graphics/4_HP_Peanut-Info_background.png) no-repeat; background-size: 100% 100%;}
	h2.hm-hdr-peanut-info {background: url(../graphics/NpB_icon_PeanutInfo.png) no-repeat 0 14px;}
	
	.hm-section-desc {padding-top: 205px; margin: auto; text-align: center;}
	.hm-tagline {margin: 0 auto; width: 315px; font-size: 15px; line-height: 20px; padding-left: 90px; text-align: left;}
	.hm-tagline.recipe {width: 405px; padding-left: 173px;}
	
	#hm-back-to-top {position: absolute; bottom: -37px; right: 8px; width: 110px; height: 49px; padding-top: 28px; padding-left: 24px; font-family: "JustusPro-LightItalic"; font-size: 12px; color: #CCB27D; background: url(../graphics/NPB_bg_backtotop.jpg) no-repeat;}
	#hm-back-to-top a {color: #ccb27d;}	
}