/*
 Theme Name:   Twenty Twelve Child
 Description:  Twenty Twelve Child Theme
 Author:       Beth Terry
 Author URI:   https://myplasticfreelife.com
 Template:     twentytwelve
 Version:      1.0.0
  Text Domain:  twenty-twelve-child
*/

@import url("../twentytwelve/style.css");

/* Sections

 1.0 Reset
 2.0 Repeatable patterns
 3.0 Basic structure
 4.0 Main content and comment content
 5.0 Archives
 6.0 Single audio/video attachment view
 7.0 Single image attachment view
 8.0 Aside post format
 9.0 Post formats
10.0 Comments
11.0 Front page template
12.0 Widgets
13.0 Plugins
14.0 Media queries
15.0 Styles for Specific Pages
16.0 Print

Changes made by Beth
-------------------------------------------------------------- 
1.0 forward:  Changed all left and right margins from pixels to percentages for the sake of responsiveness on mobile devices.
2.0 Small Headers:  Changed .widget-title styles
2.0 Buttons: Changed .menu-toggle styles
2.0 Responsive Images:  Added .thumbnail img styles
2.0 Images:  Changed img.header-image styles
2.0 Images: Added .thumbnail img styles
3.0 Added Open Sans to body font-family (and embedded it in header)
3.0 Changed body text-rendering to auto. (Apparently optimizeLegibility slows down browsers, especially on mobile devices. https://css-tricks.com/almanac/properties/t/text-rendering/)
3.0 Changed body.custom-font-enabled.  Added Verdana and removed "Open Sans."
1) IMPORTANT:  I changed the site navigation menu class name from .main-navigation to .main-menu in order to override settings from Twenty Twelve theme that were marked as !important. Twenty Twelve was showing the main horizontal navigation menu to all browsers over 600px.  I wanted to show the mobile menu to sites under 800px instead of 600px.  
2) Changed Body margin-top
3) .main-menu li ul {z-index: 1000;}
4) Styles for #social-header
5) .site-content {margin: 0;}
6) Added .widget and .widget-title styles to match Content Manager content box styles
7) .widget-title {text-transform:none;}

Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     16; This was changed by Beth - originally it was 14.
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.0.3125rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.5rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

*/


/* 1.0 Reset
-------------------------------------------------------------- */

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%;
	vertical-align: baseline;
}
body {
	line-height: 1.5;
}
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;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
del {
	color: #333;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px 2%; /* Beth changed */
	margin-bottom: 1.714285714rem;

}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}


/* 2.0 Repeatable patterns
-------------------------------------------------------------- */

/* Small headers */
.archive-title,
.page-title,
.entry-content th,
.comment-content th {
	font-size: 16px;
	font-size: 1rem;
	line-height: 2.181818182;
	font-weight: bold;
	text-transform: uppercase;
	color: #636363;
}

.widget-title {  /* Added by Beth */
	text-transform:none;
	font-family: 'Trebuchet MS', sans-serif;
  	background: #5c8abf;
  	text-shadow: none;
}

/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
	font-size: 11px;
	font-size: 0.6875;
	line-height: 2.181818182;
}

/* Form fields, general styles first */
button,
input,
select,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px;
	padding: 0.428571429rem;
}
button,
input {
	line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* Buttons */

input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.6875rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled],
input[disabled] {
	cursor: default;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border-color: transparent;
}
.bypostauthor cite span {
	color: #fff;
	background-color: #21759b;
	background-image: none;
	border: 1px solid #1f6f93;
	border-radius: 2px;
	box-shadow: none;
	padding: 0;
}

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	background-image: url("https://myplasticfreelife.com/wp-content/uploads/2017/03/MENU-hamburger-120x120.png");
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	content: "";
	height: 48px;
	padding: 0;
	position: absolute;
	right: 0;
	text-transform: none;
	top: 0;
	width: 48px;
}

.menu-toggle:active,
.menu-toggle.toggled-on {
	background-image: url("https://myplasticfreelife.com/wp-content/uploads/2017/03/MENU-x-icon-120x120.png");
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Responsive images */
.entry-content img,
.comment-content img,
.widget img,
.thumbnail img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%; /* I changed this to 100% from 90% to make related posts images display properly */
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
}

/* Images */

.alignleft,
.alignright,
.aligncenter {
	display: block;
	float: none;
	margin: 0 auto;
	clear:both;
}
.entry-content img,
.comment-content img,
.widget img,
.author-avatar img,
img.wp-post-image,
.thumbnail img {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border-radius: 3px;
	box-shadow: none;
}
img.header-image {
    border: none;
	box-shadow: none;
	display: block;
	margin: 0 auto;
	padding: 0 0 20px 0;
}
.wp-caption {
	max-width: 100%; /* Keep wide captions from overflowing their container. */
	padding: 4px;
}
.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2;
	color: #757575;
}
img.wp-smiley,
.rsswidget img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
.entry-content dl.gallery-item {
	margin: 0;
}
.gallery-item a,
.gallery-caption {
	width: 90%;
}
.gallery-item a {
	display: block;
}
.gallery-caption a {
	display: inline;
}
.gallery-columns-1 .gallery-item a {
	max-width: 100%;
	width: auto;
}
.gallery .gallery-icon img {
	height: auto;
	max-width: 90%;
	padding: 5%;
}
.gallery-columns-1 .gallery-icon img {
	padding: 3%;
}

/* Navigation */
.site-content nav {
	clear: both;
	line-height: 2;
	overflow: hidden;
}
#nav-above {
	padding: 2% 0;
}
#nav-above {
	display: none;
}
.paged #nav-above {
	display: block;
}
.nav-previous,
.previous-image {
	float: left;
	width: 50%;
}
.nav-next,
.next-image {
	float: right;
	text-align: right;
	width: 50%;
}
.nav-single + .comments-area,
#comment-nav-above {
	margin: 48px 0;
	margin: 3.428571429rem 0;
}

/* Author profiles */
.author .archive-header {
	margin-bottom: 2%;
}
.author-info {
	border-top: 1px solid #ededed;
	margin: 2% 0;
	padding-top: 2%;
	overflow: hidden;
}
.author-description p {
	color: #757575;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.846153846;
}
.author.archive .author-info {
	border-top: 0;
	margin: 0 0 48px;
	margin: 0 0 3.428571429rem;
}
.author.archive .author-avatar {
	margin-top: 0;
}


/* 3.0 Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
	font-size: 100%;
}
body {
	font-size: 100%;
	font-size: 1rem;
	font-family: 'Open Sans', sans-serif;
	text-rendering: auto;
	color: #444;
}
body.custom-font-enabled {
	font-family: 'Open Sans', sans-serif;
}
a:focus {
	outline: none;
	color: #21759b;
}
a:hover {
	color: #0f3647;
}

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
}
.main-navigation .assistive-text:focus,
.site .screen-reader-text:hover,
.site .screen-reader-text:active,
.site .screen-reader-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
    font-size: 0.75rem;
	height: auto;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/* Page structure */
.site {
	padding: 0;
	background-color: #fff;
}
.site-content,
.site-content-page,
.widget-area-1,
.widget-area-2,
.widget-area {
	margin: 1% auto 0;
	max-width: 100%;
	padding: 0 5%;
}

.widget {
	margin-bottom: 2px;
	padding-bottom: 20px;
	border-radius: 10px;
}

.page-template-front-page-no-title .site-content-page {
	padding: 0 0 0 0;
}

.wrapper {
	padding: 0 0 0 0;
}

/* Header */
.site-header {
	padding: 0; 
	background: #F2fffa; 
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	width: 100%;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 30px;
	font-size: 1.875rem;
	line-height: 1.285714286;
	margin-bottom: 16px;
	margin-bottom: 1rem;
}
.site-header h2 {
	font-weight: normal;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.846153846;
	color: #757575;
}

/* Navigation Menu - Styles for Mobile main navigation menu since the navigation menu for devices larger than 800px are defined below and override these styles. */

.main-menu {
	text-align: left;
}

.main-menu a {
	color: #147;
}
.main-menu a:hover,
.main-menu a:focus {
	color: #21759b;
}
.main-menu ul {
	margin: 24px 0 0 0;
	text-indent: 0;
	background-color: #fff;
}
.main-menu li {
	margin: 10px 0 0 0;
	margin: 0.7142857142857143rem 0 0 0;
	padding: 10px;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.42857143;
	border-bottom: 1px solid #ededed;
	position: relative;
}
.main-menu li a {
	border-bottom: 0;
	color: #147;
	line-height: 3.692307692;
	text-transform: lowercase;
	white-space: nowrap;
}
.main-menu li a:hover,
.main-menu li a:focus {
	color: #000;
}
.main-menu li ul {
	margin: 0;
	padding: 0;
	position: relative; /* IMPORTANT so the sub-menus push the other menu items down. */
	top: 100%;
	left: 0;
	width: 100%;
	height: auto;
	border: 0;
	display: none;
	}
.main-menu li ul ul {
	top: 0;
	left: 100%;
}
.main-menu ul li:hover > ul,
.main-menu ul li:focus > ul,
.main-menu .focus > ul {
	display: inline-block;
}
.main-menu li ul li a {
	display: block;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2.181818182;
	padding: 8px 20px;
	padding: 0.571428571rem 1.428571428571429rem;
	white-space: normal;
}

.main-menu .current-menu-item > a,
.main-menu .current-menu-ancestor > a,
.main-menu .current_page_item > a,
.main-menu .current_page_ancestor > a {
	color: #636363;
	font-weight: bold;
}
/* Put an upside down arrow after every list item on the navigation menu. */
.main-menu li > a:after {
    content: ' ▾';
}

/* Remove the upside down arrow from any list items that are only-children.  */
.main-menu li > a:only-child:after {
    content: '';
}

/* Do not display the main navigation menu ever. */
.main-menu ul.nav-menu,
.main-menu div.nav-menu > ul {
	display: none;
}

/* Okay, display the main navigation menu if the menu toggle is on. (Can only happen on a device smaller than 800px.) */
.main-menu ul.nav-menu.toggled-on,
.menu-toggle {
	display: block;
}

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3rem;
}

/* Sidebar */
.widget-area-1 .widget, .widget-area-2 .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	word-wrap: break-word;
}
.widget-area-1 .widget h3, 
.widget-area-2 .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}
.widget-area-1 .widget p,
.widget-area-1 .widget li,
.widget-area-1 .widget .textwidget,
.widget-area-2 .widget p,
.widget-area-2 .widget li,
.widget-area-2 .widget .textwidget {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.846153846;
}
.widget-area-1 .widget p,
.widget-area-2 .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	padding: 0 12px;
    padding: 0 0.75rem;
}
.widget-area-1 .textwidget ul,
.widget-area-2 .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
}
.widget-area-1 .textwidget li,
.widget-area-2 .textwidget li {
	margin-left: 0;
	margin-left: 0rem;
}
.widget-area-1 .widget a,
.widget-area-2 .widget a {
	color: #147;
}
.widget-area-1 .widget a:hover,
.widget-area-2 .widget a:hover {
	color: #21759b;
}
.widget-area-1 .widget a:visited,
.widget-area-2 .widget a:visited {
	color: #147;
}
.widget-area-1 #s,
.widget-area-2 #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

.widget-area-1 select,
.widget-area-2 select {
	width: 90%;
	display: block;
	margin: 0 auto 24px;
    margin: 0 auto 1.5rem;
}

/* Footer */
footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2;
	max-width: 100%;  
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}


/* 4.0 Main content and comment content
-------------------------------------------------------------- */

header.blog-title {
	width: 95%;
	margin: 0 auto 24px;
}
.blog-title h3 {
	display: block;
	clear: left;
	color: #147;
	font-family: 'Trebuchet MS', Georgia,'Times New Roman', serif;
	font-style: italic;
	font-weight: bold;
	font-size: 100%;
	padding-bottom: 24px;
	background: url('https://myplasticfreelife.com/wp-content/uploads/2016/12/wave-border.png') repeat-x bottom left;
}
.blog-title img {
	width:60%; 
	max-width: 462px;
	height: auto;
	margin-bottom: -10px; /* So the letters line up properly with the text */
	margin-top: 10px; /* So when the image jumps below the text, there is space. */
}
.blog-title aside {
	padding: 16px 2%;
	padding: 1rem 2%;
	background: #f8f9f9; 
	margin: 24px 0 0 0;
	margin: 1.5rem 0 0 0;
	line-height: 1.5;
	color: #147;
	font-size: 14px;
	font-size: 0.875rem;
	font-family: 'Open Sans', sans-serif;
}
.date-header {
  font-size:100%;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#586;
  font-weight:bold;
  display: block;
  clear: both;	
  }

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 12px;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 30px;
	font-size: 1.875rem;
	line-height: 2;
	font-weight: bold;
}
h2.entry-title {
	font-size: 24px;
	font-size: 1.5rem;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    font-family: 'Trebuchet MS', serif;
}
.entry-header .entry-title a {
	text-decoration: none;
}
.entry-header .entry-format {
	margin-top: 2%;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 2%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

.thumbnail {
   float:left;
   clear: left;
   margin: 5px 10px 5px 0;
   max-width: 50%;
   height: auto;
}

.comments-link a,
.entry-meta a {
	color: #757575;
}
.comments-link a:hover,
.entry-meta a:hover {
	color: #21759b;
}
article.sticky .featured-post {
	border:none;
	color: #757575;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 3.692307692;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	text-align: center;
}
.entry-content,
.entry-summary,
.mu_register {
	line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	margin: 24px 0;
	margin: 1.5rem 0;
	line-height: 1;
    font-family: 'Trebuchet MS', serif;
}
.entry-content h1,
.comment-content h1 {
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1.5;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.6;
}
.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.846153846;
}
.entry-content h4,
.comment-content h4 {
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.846153846;
}
.entry-content h5,
.comment-content h5 {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.846153846;
}
.entry-content h6,
.comment-content h6 {
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.846153846;
}
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	line-height: 2;
}

.entry-content a:visited,
.comment-content a:visited {
	color: #21759b;
}
.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	line-height: 1.714285714;
}


.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
	margin-bottom: 0;
}
.entry-content ul,
.comment-content ul,
.mu_register ul {
	list-style: disc outside;
}
.entry-content ol,
.comment-content ol {
	list-style: decimal outside;
}
.entry-content li,
.comment-content li,
.mu_register li {
	margin: 0 0 0 36px;
	margin: 0 0 0 2.571428571rem;
}
.entry-content blockquote,
.comment-content blockquote {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	padding: 2%;
	font-style: italic;
}
.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child {
	margin-bottom: 0;
}
.entry-content code,
.comment-content code {
	font-family: Consolas, Monaco, 'Lucida Console', monospace;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2;
}
.entry-content pre,
.comment-content pre {
	border: 1px solid #ededed;
	color: #666;
	font-family: Consolas, Monaco, 'Lucida Console', monospace;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.714285714;
	margin: 24px 0;
	margin: 1.5rem 0;
	overflow: auto;
	padding: 2%;
}
.entry-content pre code,
.comment-content pre code {
	display: block;
}
.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
.entry-content address,
.comment-content address {
	display: block;
	line-height: 1.714285714;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
img.alignleft,
.wp-caption.alignleft,
img.alignright,
.wp-caption.alignright,
img.aligncenter,
.wp-caption.aligncenter {
	display: block;
	clear: both;
	margin: 1% auto;
}
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
	margin-bottom: 2%;
}
.entry-content dl,
.comment-content dl {
	margin: 0 2%;
}
.entry-content dt,
.comment-content dt {
	font-weight: bold;
	line-height: 1.714285714;
}
.entry-content dd,
.comment-content dd {
	line-height: 1.714285714;
	margin-bottom: 2%;
}
.entry-content table,
.comment-content table {
	border-bottom: 1px solid #ededed;
	color: #757575;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2;
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	width: 100%;
}
.entry-content table caption,
.comment-content table caption {
	font-size: 16px;
	font-size: 1rem;
	margin: 2% 0;
}
.entry-content td,
.comment-content td {
	border-top: 1px solid #ededed;
	padding: 6px 10px 6px 0;
}

.site-content article {
	border-bottom: 4px double #ededed;
	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.page-links {
	clear: both;
	line-height: 1.714285714;
}
footer.entry-meta {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	border: 0;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.single-author .entry-meta .by-author {
	display: none;
}
.mu_register h2 {
	color: #757575;
	font-weight: normal;
}


/* 5.0 Archives
-------------------------------------------------------------- */

.archive-header,
.page-header {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	padding-bottom: 22px;
	padding-bottom: 1.571428571rem;
	border-bottom: 1px solid #ededed;
}
.archive-meta {
	color: #757575;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	margin-top: 22px;
	margin-top: 1.571428571rem;
}

/* 6.0 Single audio/video attachment view
-------------------------------------------------------------- */

.attachment .entry-content .mejs-audio {
	max-width: 400px;
}

.attachment .entry-content .mejs-container {
	margin-bottom: 24px;
}


/* 7.0 Single image attachment view
-------------------------------------------------------------- */

.article.attachment {
	overflow: hidden;
}
.image-attachment div.attachment {
	text-align: center;
}
.image-attachment div.attachment p {
	text-align: center;
}
.image-attachment div.attachment img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}
.image-attachment .entry-caption {
	margin-top: 8px;
	margin-top: 0.571428571rem;
}


/* 8.0 Aside post format
-------------------------------------------------------------- */

article.format-aside h1 {
	margin-bottom: 2%;
}

article.format-aside h1 a {
	text-decoration: none;
	color: #4d525a;
}
article.format-aside h1 a:hover {
	color: #2e3542;
}
article.format-aside .aside {
	padding: 2% 2% 0;
	background: #d2e0f9;
	border-left: 22px solid #a8bfe8;
}
article.format-aside p {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #4a5466;
}
article.format-aside blockquote:last-child,
article.format-aside p:last-child {
	margin-bottom: 0;
}
#text-25 h3,
#text-3 h3,
#text-2 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/heart-18-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}
#text-8 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/literature-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}

#recent-posts-5 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/new-badge-2-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}
#categories-5 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/folder-2-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}

#categories-5 li > ul {
	margin-left: 10%;
}
#archives-5 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/filled-box-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}
#text-4 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/buy-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}
#text-26 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/add-user-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}
#sgr-custom-taxonomies-menu-2 h3 {
  background: #5c8abf url("https://myplasticfreelife.com/images/icons/conference-call-32.png") 10px 10px no-repeat;
    background-size: 18px;
    padding-left: 40px;
}

/* 9.0 Post formats
-------------------------------------------------------------- */

/* Image posts */
article.format-image footer h1 {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	font-weight: normal;
}
article.format-image footer h2 {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
}
article.format-image footer a h2 {
	font-weight: normal;
}

/* Link posts */
article.format-link header {
	padding: 0 10px;
	padding: 0 0.714285714rem;
	float: right;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	color: #848484;
	background-color: #ebebeb;
	border-radius: 3px;
}
article.format-link .entry-content {
	max-width: 80%;
	float: left;
}
article.format-link .entry-content a {
	font-size: 22px;
	font-size: 1.571428571rem;
	line-height: 1.090909091;
	text-decoration: none;
}

/* Quote posts */
article.format-quote .entry-content p {
	margin: 0;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
}
article.format-quote .entry-content blockquote {
	display: block;
	padding: 2% 2% 0;
	padding: 1.714285714rem 1.714285714rem 0;
	font-size: 15px;
	font-size: 1.071428571rem;
	line-height: 1.6;
	font-style: normal;
	color: #6a6a6a;
	background: #efefef;
}

/* Status posts */
.format-status .entry-header {
	margin-bottom: 2%;
}
.format-status .entry-header header {
	display: inline-block;
}
.format-status .entry-header h1 {
	font-size: 15px;
	font-size: 1.071428571rem;
	font-weight: normal;
	line-height: 1;
	margin: 0;
}
.format-status .entry-header h2 {
	font-size: 24px;
	font-size: 1.714285714rem;
	font-weight: normal;
	line-height: 2;
	margin: 0;
}
.format-status .entry-header header a {
	color: #757575;
}
.format-status .entry-header header a:hover {
	color: #21759b;
}
.format-status .entry-header img {
	float: left;
	margin-right: 21px;
	margin-right: 1.5rem;
}


/* 10.0 Comments
-------------------------------------------------------------- */
.comments-title {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.5;
	font-weight: normal;
}
.comments-area article {
	margin: 2% 0;
}
.comments-area article header {
	margin: 0 0 4%;
	overflow: hidden;
	position: relative;
}
.comments-area article header img {
	float: left;
	padding: 0;
	line-height: 0;
}
.comments-area article header cite,
.comments-area article header time {
	display: block;
	margin-left: 0;
}
.comments-area article header cite {
	font-style: normal;
	font-size: 15px;
	font-size: 1.071428571rem;
	line-height: 1.42857143;
}
.comments-area cite b {
	font-weight: bold;
}
.comments-area article header time {
	line-height: 1.714285714;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.857142857rem;
	color: #5e5e5e;
}
.comments-area article header a {
	text-decoration: none;
	color: #147;
}
.comments-area article header a:hover {
	color: #21759b;
}
.comments-area article header cite a {
	color: #147;
}
.comments-area article header cite a:hover {
	text-decoration: none;
}
.comments-area article header h4 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
	padding: 0.428571429rem 0.857142857rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	font-weight: normal;
	color: #fff;
	background-color: #0088d0;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #009cee, #0088d0);
	background-image: -ms-linear-gradient(top, #009cee, #0088d0);
	background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
	background-image: -o-linear-gradient(top, #009cee, #0088d0);
	background-image: linear-gradient(top, #009cee, #0088d0);
	border-radius: 3px;
	border: 1px solid #007cbd;
}
.comments-area .bypostauthor cite span {
	position: absolute;
	margin-left: 5px;
	margin-left: 0.357142857rem;
	padding: 2px 5px;
	padding: 0.142857143rem 0.357142857rem;
	font-size: 10px;
	font-size: 0.714285714rem;
}
.comments-area .bypostauthor cite b {
	font-weight: bold;
}
a.comment-reply-link,
a.comment-edit-link {
	color: #686868;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #21759b;
}
.commentlist .pingback {
	line-height: 1.714285714;
        padding-bottom: 20px;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	border-bottom: 4px double #ededed;

}

/* Comment form */
#respond {
	margin-top: 48px;
	margin-top: 3.428571429rem;
}
#respond h3#reply-title {
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.5;
}
#respond h3#reply-title #cancel-comment-reply-link {
	margin-left: 10px;
	margin-left: 0.714285714rem;
	font-weight: normal;
	font-size: 12px;
	font-size: 0.857142857rem;
}
#respond form {
	margin: 24px 0;
	margin: 1.714285714rem 0;
}
#respond form p {
	margin: 11px 0;
	margin: 0.785714286rem 0;
}
#respond form p.logged-in-as {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
#respond form label {
	display: block;
	line-height: 1.714285714;
}
#respond form input[type="text"],
#respond form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.714285714;
	padding: 10px;
	padding: 0.714285714rem;
	width: 100%;
}
#respond form p.form-allowed-tags {
	margin: 0;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #5e5e5e;
}
.required {
	color: red;
}


/* 11.0 Front page template
-------------------------------------------------------------- */

.entry-page-image {
	margin-bottom: 14px;
	margin-bottom: 1rem;
}
.template-front-page .site-content article {
	border: 0;
	margin-bottom: 0;
}
.template-front-page .widget-area-1 {
	clear: both;
	float: none;
	width: auto;
	padding-top: 2%;
	border-top: 1px solid #ededed;
}
.template-front-page .widget-area-1 .widget li {
	margin: 8px 0 0;
	margin: 0.571428571rem 0 0;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.714285714;
	list-style-type: square;
	list-style-position: inside;
}
.template-front-page .widget-area-1 .widget li a {
	color: #757575;
}
.template-front-page .widget-area-1 .widget li a:hover {
	color: #21759b;
}
.template-front-page .widget-area-1 .widget_text img {
	float: left;
	margin: 1% 2% 1% 0;
}


/* 12.0 Widgets
-------------------------------------------------------------- */

.widget-area-1 .widget ul,
.widget-area-2 .widget ul {
	margin: 0 10px 20px;
	list-style: none;
}

.widget-area-1 .widget ul ul,
.widget-area-2 .widget ul ul {
	margin-left: 0;
	margin-left: 0rem;
}
.widget_rss li {
	margin: 12px 0;
	margin: 0.857142857rem 0;
}
.widget_recent_entries .post-date,
.widget_rss .rss-date {
	color: #aaa;
	font-size: 11px;
	font-size: 0.785714286rem;
	margin-left: 12px;
	margin-left: 0.857142857rem;
}

.widget_recent_entries li {
	background-color: #fff;
	padding: 8px;
	border-bottom: 10px;
}
#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}
#wp-calendar #next {
	padding-right: 2%;
	text-align: right;
}
.widget_search label {
	display: block;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.widget_twitter li {
	list-style-type: none;
}
.widget_twitter .timesince {
	display: block;
	text-align: right;
}

/* Beth's Custom Sidebar Styles */

.widget-title {
  padding: 1% 1.5%;
  margin: 0 0 2%;
  font-size: 16px;
  font-family: 'Trebuchet MS', serif;
  color: #fff;
  background: #5c8abf;
  text-shadow: none;
  border-radius: 10px 10px 0px 0px;
}

.widget {
  font-family: 'Open Sans', sans-serif;
  text-shadow: none;
  background: #f2faff;
  padding-bottom: 24px;
  padding-bottom: 1.5rem;
  border-radius: 10px;
}

.widget-area-1,
.widget-area-2 {
  display: block;
  border: none;
  padding: 0;
  box-shadow: none;
  line-height: normal;
}

.widget p {
  margin-bottom: 0;
  margin-top: 0;
}

a {
  text-decoration: none;
  color: #21759b;
}

.widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6 {
  margin-top: 0;
}
.widget h5 {
  font-family: 'Trebuchet MS', serif;
  font-weight: bold;
  font-style: normal;
  /*color: #333333;*/
  line-height: 1.1;
  margin-bottom: 1%;
  margin-top: 0;
}
#social-header {	
	width: 100%;
	height: 49px;
	color: #fff;
	font-family: 'Trebuchet MS', serif;
	text-align: left;
	display: block;
	margin: 0 auto 24px;
	margin: 0 auto 1.5rem;
	padding: 0; 
	background: #147;
	overflow: hidden;
	border: 0;
	border-radius: 0;
    box-shadow: none;
}
#social-follow {
	display: block;
	float: left;
	padding:0;
	margin: 0;
	width: 70%;
	height: auto;
}
#social-header img {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	border: none;
	box-shadow: none;
	height: 25px;
	width: auto;
	margin: 5px 0 0 5%;
	padding: 0;
}
#social-header img.subscribe-icon {
	height: 48px;
	width: auto;
	padding: 0;
	margin: 0;
	border-radius: 3px;
}
#social-header img.rss-feed-icon,
#social-header img.linkedin-icon {
	display: none;
}
.search-form {
	position: absolute;
	right: 50px;
	top: 0;
}

.search-field {
	background-color: transparent;
	background-image: url("https://myplasticfreelife.com/wp-content/uploads/2017/03/search-icon-white-transparent-70x70.png");
	background-position: 0 center;
	background-repeat: no-repeat;
	background-size: 48px 48px;
	border: 1px solid #ccc;
	cursor: pointer;
	height: 48px;
	width: 49px;
	margin: 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;
}

.search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}

#advertisers {
	width: 90%;
	display: block;
	margin: 0 auto;
	padding: 0;
}

#advertisers img {
	display: block;
	margin: 0 auto;
}

.challenge-header {
	background: #E1ECF2; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(white, #E1ECF2); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(white, #E1ECF2); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(white, #E1ECF2); /* For Firefox 3.6 to 15 */
	background: linear-gradient(white, #E1ECF2); /* Standard syntax */
	width: 92%;
	color:#147;
	padding: 20px; 
	margin: 0 auto 20px;
	border: 1px solid #ddd; 
	border-radius: 6px; 
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	text-align:left;
    }

#challenge-description {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
}

#challenge-description h1 {
    clear: none;
    font-size: 30px;
    font-size: 1.875em;
    font-weight: bold;
    font-family: 'Maiandra GD', 'Trebuchet MS', 'Palatino Linotype', serif;
    margin-bottom: 20px;
    color: #147;
}


/* 13.0 Plugins
----------------------------------------------- */

/*****Smooth Slider*****/

#smooth_slider_featured {
	margin: 32px auto; 
	margin: 2rem auto; 
    text-align:center;
    padding: 0;
}
#smooth_slider_featured_nav {
	margin-top: 0; 
	padding-top: 0;
}
.smooth_slider {
	width: 100%; 
	min-height:300px;
	background-color:#000;
	border:1px solid #000;
} 
.smooth_slider .sldr_title {
	font-family: 'Trebuchet MS', serif;
	font-size:14px;
	font-size:0.875rem;
	font-weight:normal;
	font-style:normal;
	color:#000000;
} 
.smooth_slider .smooth_slideri {
	max-width:100%;
	margin:0; 
    padding: 0;
	background: #fff;
} 
.smooth_slider .smooth_slider_thumbnail{
	float:none;
	margin:0;
	border:1px solid #000;
} 
.smooth_slider .smooth_slideri h2{
	clear:none;
	line-height:17px;
	font-family: 'Trebuchet MS', serif;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	color:#000000;
} 
.smooth_slider .smooth_slideri h2 a{
	color:#000000;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	margin: 16px;
	margin: 1rem;
} 
.smooth_slider .smooth_slideri span{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	font-weight:normal;
	font-style:normal;
	color:#333333;
}
.smooth_slider .smooth_slideri p.more{
	color:#0092E4;
	font-family: 'Open Sans',sans-serif;
	font-size:12px;
	font-size: 0.75rem;
	margin-left: 10px;
} 
.smooth_slider .smooth_next{
} 
.smooth_slider .smooth_prev{
} 
.smooth_slider .smooth_slider_eshortcode{
	float:none;
	margin:0;
	height:auto;
	border:none;
} 
.smooth_more {
	width: 0; 
	height: 0; 
	color:#0092E4;
	font-family: 'Open Sans',sans-serif;
	font-size: 10px;
	font-size: 0.625rem;
	margin-left: 10px;
}

/*****WPDiscuz*****/

.wc-comment-text p {
    line-height: 2;
}

div.wpd-field-agreement,
div.wpd-field-cookies-consent {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

div.wpd-field-agreement div.wpd-field-group-title,
div.wpd-field-cookies-consent div.wpd-field-group-title {
    float: left;
    padding-right: 10px !important;
}

div.wpd-field-desc,
div.wpd-field-desc i {
    position: static !important;
    text-align: left !important;
    float: left;
}

/*****Youtube Channel Gallery*****/

div.youtubechannelgallery {
     overflow-x:hidden;
}

.feedblitz-header-form input[type="button"] {
	display: none;
}

/****Ultimate FAQ****/

div.ufaq-faq-category-title h4 {
	font-size: 24px;
    font-size: 1.5rem;
}
ufaq-faq-title-text h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
}


/* 14.0 Media queries
-------------------------------------------------------------- */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport{
width: device-width;
}
@viewport {
	width: device-width;
}

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: none;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: none;
		width: 80%;
	}
	.site {
		margin: 0;
		width: 100%;
		overflow: hidden;
	}
	.site-content {
		float: none;
		width: auto;
	}
	body.template-front-page .site-content,
	body.attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: none;
		width: auto;
	}
	.site-header h1,
	.site-header h2 {
		text-align: center;
	}
	.site-header h1 {
		font-size: 24px;
		font-size: 1.714285714rem;
		line-height: 1.285714286;
		margin-bottom: 14px;
		margin-bottom: 1rem;
	}
	.entry-header .entry-title {
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    line-height: 1.5;
	}
	#respond form input[type="text"] {
		width: 100%;
	}
	#respond form textarea.blog-textarea {
		width: 100%;
	}
	.template-front-page .site-content,
	.template-front-page article {
		overflow: hidden;
	}
	.template-front-page.has-post-thumbnail article {
		float: none;
		width: 100%;
	}
	.entry-page-image {
		float: none;
		margin-bottom: 14px;
		margin-bottom: 1rem;
		width: 100%;
	}
	.template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		float: none;
		width: 100%;
		margin-bottom: 2%;
	}
	.template-front-page .widget-area .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		float: none;
		width: 100%;
		margin: 0;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}
	.commentlist .children {
		margin-left: 0;
	}
	img.alignleft,
	.wp-caption.alignleft,
	.alignleft {
		float: left;
		margin: 1% 2% 1% 0;
	}
	img.alignright,
	.wp-caption.alignright,
	.alignright {
		float: right;
		margin: 1% 0 1% 2%;
	}
}

/* Minimum width of 800 pixels. */
@media screen and (min-width: 800px) {
	body {
                background: url(https://myplasticfreelife.com/wp-content/uploads/2014/07/fish_background_seamless.jpg) 	repeat;
	}

       .author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 90%;
		overflow: hidden;
	}
	.wrapper {
		padding: 0 2%;
	}
	.site-header {
		padding: 0;
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
	}
	.site-content {
		float: left;
		width: 52%;
	}
	.site-content-page {
		float: left;
		width: 76%;
	}
	.site-content,
	.site-content-page,
	.widget-area-1,
	.widget-area-2,
	.widget-area {
		padding: 0 0 0 0;
	}
	body.template-front-page .site-content,
	body.attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area-2 {
		float: left;
		width: 20%;
		margin-left: 2%; /* Beth - Important to use percentage instead of pixels so sidebars don't break at screen width wider than 800px. */
	}
	.widget-area-1 {
		float: right;
		width: 20%;
		margin-right: 0;
	}
	img.header-image {
		display: block;
                width: 38%;
		min-width: 400px;
		margin: 0 auto;
	}
	.site-header h1,
	.site-header h2 {
		text-align: left;
	}
	.site-header h1 {
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.5;
		margin-bottom: 0;
	}
	#social-header {	
		display: block;
		margin: 0 0 20px 0;
		padding: 5px 0;
		width: 100%;
	}
	#social-follow {
		display: block;
		float: left;
		margin: 10px;
		height: 32px;
		width: 60%;
	}
	#social-header img.rss-feed-icon,
	#social-header img.linkedin-icon {
		display: block;
	}		
	#social-header img {
		display: block;
		float: left;
		margin: 0 0 0 3%;
		height: 100%;
		width: auto;
	}
	#social-header img.subscribe-icon {
		display: none;
	}
	.feedblitz-header-form input[type="button"] {
		display: block;
		float: left;
	}
	.search-form {
		position: relative;
		display: block;
		float: right;
	}
	.search-field,
	.search-field:focus {
		float: right; 
		background-color: #fff;
		background-image: none;
		border: 2px solid #c3c0ab;
		cursor: text;
		outline: 0;
		width: 230px;
		height: 32px;
		margin: 10px 0;
	}
	.search-form
	.search-submit { 
		display:none;
	}
		

/* Now that we said not to display the nav menu up above, here we are saying to go ahead and display the top level of the nav menu as an inline block if the screen size is over 800px. */

	.main-menu {
		width: 100%;
        padding: 16px 0;
        padding: 1rem 0;
        background: #F2fffa;
	}

	.main-menu ul.nav-menu,
	.main-menu div.nav-menu > ul {
		border: none;
		display: inline-block !important;
		text-align: center;
		width: 100%;
        background: #F2fffa;
	}
	.main-menu ul {
		margin: 0;
		text-indent: 0;
        font-size: 0rem; /* This is to remove the spaces between list items */
	}
	.main-menu li a,
	.main-menu li {
		display: inline-block;
		text-decoration: none;
		font-family: 'Trebuchet MS', serif;
		font-size: 24px;
		font-size: 1.5rem;
		color: #147;
        font-weight: bold;
        margin: 0;
	}
    .main-menu li {
        border-right: 2px solid #5c8abf;  /* To add vertical lines between list items */
        padding: 0 1%;
    }
    .main-menu li:last-child {
        border-right: 0;  /* remove the pipe from the last list item */
    }  
	.main-menu li a {
		border-bottom: 0;
		color: #147;
		line-height: 1;
		text-transform: none;
		white-space: nowrap;
	}
	.main-menu li a:hover,
	.main-menu li a:focus {
		color: #000;
	}
	.main-menu li {
		margin: 0 auto 0;
		position: relative;
		border-bottom: 0;
	}
	.main-menu li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1000;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}
	.main-menu li ul ul {
		top: 0;
		left: 100%;
	}
	.main-menu ul li:hover > ul,
	.main-menu ul li:focus > ul,
	.main-menu .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-menu li ul li {
		border-top: 1px solid #deeffa;
		border-left: 1px solid #deeffa;
		border-right: 1px solid #deeffa;
		border-bottom: 0;
		padding: 0;
		margin: 0;
		width: 260px;
        text-align: left;
	}
	.main-menu li ul li:last-child {
		border-bottom: 1px solid #deeffa;
	}
	.main-menu li ul li a {
		background: #F2fffa;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		white-space: normal;
	}
	.main-menu li ul li a:hover,
	.main-menu li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-menu .current-menu-item > a,
	.main-menu .current-menu-ancestor > a,
	.main-menu .current_page_item > a,
	.main-menu .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	#respond form input[type="text"] {
		width: 46.333333333%;
	}
	#respond form textarea.blog-textarea {
		width: 79.666666667%;
	}
	.template-front-page .site-content,
	.template-front-page article {
		overflow: hidden;
	}
	.template-front-page.has-post-thumbnail article {
		float: left;
		width: 47.916666667%;
	}
	.entry-page-image {
		float: right;
		margin-bottom: 0;
		width: 47.916666667%;
	}
	.template-front-page .widget-area-1 .widget,
	.template-front-page.two-sidebars .widget-area-1 .front-widgets {
		float: left;
		width: 51.875%;
		margin-bottom: 2%;
	}
	.template-front-page .widget-area-1 .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .widget-area-1 .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area-1 .front-widgets + .front-widgets {
		float: right;
		width: 39.0625%;
		margin: 0 0 24px;
		margin: 0 0 1.714285714rem;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}
	.commentlist .children {
		margin-left: 48px;
		margin-left: 3.428571429rem;
	}
	#sidebar-5 {
		width: 20%;
	}
}

/* Minimum width of 960 pixels. DON'T CHANGE THIS NUMBER!  It doesn't matter that the max width is 1200px.*/
@media screen and (min-width: 960px) { 
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0;
		margin-top: 0;
		margin-bottom: 48px;
		margin-bottom: 3.428571429rem;
		box-shadow: none;
	}
	body.custom-background-empty {
		background-color: #fff;
	}
	body.custom-background-empty .site,
	body.custom-background-white .site {
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: none;
	}
	.main-menu li a,
	.main-menu li {
		font-family: 'Trebuchet MS', serif;
		font-size: 16px;
        font-size: 1rem;
        margin: 0;
	}
}

/* 15.0 Styles for Specific Pages 
----------------------------------------------- */

/**** Home Page Styles ****/

div.home {
    background: #fff;
}

div.home p {
	margin: 10px 0 10px;
}
div.home h2 {
	font-size: 110%;
}

div.welcome, 
div.recentposts, 
div.plasticfreebook,
div.takeaction, 
div.steps, 
div.challenge, 
div.forumfeedbox, 
div.youtubefeedbox {
	display: block;
	border: none;
	padding: 5%;
	width: 89%; /* Beth - This is very important to counteract the padding above! */
	height: auto;
	line-height: normal;
	overflow-y: auto;
	overflow-x: hidden;
	background: #f2faff;
	box-shadow: none;
	border-radius: 10px;
    margin: 0 auto 24px;
    margin: 0 auto 1.5rem;
}
div.welcome h2, 
div.recentposts h2, 
div.plasticfreebook h2, 
div.takeaction h2,
div.inline h2,
div.steps h2, 
div.challenge h2, 
div.forumfeedbox h2, 
div.youtubefeedbox h2 {
	display: block;
	clear: both;
	text-align:left;
	border: none;
	padding: 0;
	margin: 20px 0;
    box-shadow: none;
	line-height: normal;
    text-shadow: -1px 1px 0px #fff;
}
div.welcome {
	background: #f2faff;
	box-shadow: none;
	border-radius: 10px;
    margin: 0 auto 30px;
    margin: 0 auto 1.875rem;
}
.welcome img {
	width: 25%; 
	max-width: 160px;
	height: auto; 
	float: left; 
	border: none; 
	box-shadow: none; 
	padding-right: 1%;
}
.welcome p {
	line-height: 1.8;
}
div.recentposts,
div.plasticfreebook {
    background: #f2fffa;
}
div.plasticfreebook img, 
div.recentposts img {
	border: none;
	box-shadow: none;
}
div.takeaction {
    background: #fff8f7;
    padding: 2%;
    width: 96%;
}
div.inline {
	width: 100%;
	height: auto;
	overflow: hidden;
	clear:both;
	text-align:center;
}
div.inline h2 {
	width: 100%; 
	text-align: center; 
	border-bottom: 2px solid #147; 
	line-height: 0.1em;
	margin: 24px 0;
	margin: 1.5rem 0;
	color: #147;
}
div.inline h2 span { 
	background:#fff; 
	padding:0 10px; 
}
div.ppc,
div.bewastewise,
div.blogaward {
	box-shadow: none;
	border: none;
    margin-top: 24px;
    margin-top: 1.5rem;
}
div.blogaward img,
div.ppc img,
div.bewastewise img {
    height: 200px;
    width: auto;
}
div.steps {
	clear: left; 
	height: 440px;
}
.steps ol{
	list-style-type: decimal;
	margin: 20px;
	font-size: 85%;
}
div.forumfeedbox {
	height: 440px;
	overflow: auto;
}
div.rss-feedbox {
    height: 360px;
	overflow: auto;
}
.forumfeedbox ul {
	list-style-type: disc;
	margin: 0;
	padding: 20px;
	font-size: 85%;
}
a.forumfeedbox {
	text-decoration: none;
}
div.challenge img {
	width: 98%;
	height: auto;
}

/* Minimum width of 800 pixels. */
@media screen and (min-width: 800px) {
	div.welcome {
		width: 96%;
		padding: 2%;
		display: block;
  		box-shadow: none;
	}
	div.plasticfreebook, 
	div.recentposts {
		height: 580px;
	}
	div.youtubefeedbox, 
	div.challenge {
		height: 550px;
	}
	div.recentposts {
		width: 65%;
		float:left;
		padding: 0 1% 0 2.5%;
	}
	div.plasticfreebook {
		width: 25%;
		float:right;
		padding: 0 2%;
	}
	div.change-embed-petition, 
	div.coolthing {
		display: block;
		clear: none;
		height: auto;
		border: none;
		padding: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
		text-align: left;
	    margin: 0 auto 24px;
	    margin: 0 auto 1.5rem;
	}
    div.takeaction {
        text-align:center;
    }
	div.vitamix-petition {
		width: 35%;
		margin: 0;
	}
	div.tampon-petition {
		width: 35%;
		margin: 0 auto;
	}
	div.produce-petition {
		width: 30%;
		margin: 0;
	}
	div.ppc,
	div.bewastewise,
	div.blogaward {
		width: 30%;
		box-shadow: none;
		border: none;
        margin-top: 96px;
        margin-top: 6rem;
	}
	div.blogaward,
    div.blogaward img {
		float: right;
	}
    div.blogaward {
        margin-right: 8%;
    }
	div.ppc,
    div.ppc img {
	    float: left;
    }
    div.ppc {
        margin-left: 8%;
    }
	div.bewastewise {
		float:right;
        text-align: center;
        width: 20%;
	}
	div.bewastewise img {
        align: center;
    }
	div.steps {
		width: 42%;
		padding: 2%;
		float:left;
	}
	div.forumfeedbox {
		width: 42%;
		padding: 2%;
		float:right;
	}
	div.youtubefeedbox {
		width: 55%;
		padding: 2%;
		float:left;
	}
	div.challenge {
		width: 30%;
		padding: 2%;
		float:right;
	}
}

/**** Privacy Page Styles ****/

table.cookie-table {
	color: #757575;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 2;
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	width: 75%;
}

table.cookie-table th,
table.cookie-table td {
    padding: 16px 2%;
    padding: 1rem 2%;
    border: 1px solid #ededed;
    border: 0.0625rem solid #ededed;
}

table.cookie-table th {
    text-align:center;
    background: #ededed;
    border: 1px solid #d1d1d1;
    border: 0.0625rem solid #d1d1d1;
}

table.cookie-table td {
    text-align: left;
}


/* 16.0 Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}
	footer a[rel=bookmark]:link:after,
	footer a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	a {
		text-decoration: none;
	}
	.entry-content img,
	.comment-content img,
	.author-avatar img,
	img.wp-post-image {
		border-radius: 0;
		box-shadow: none;
	}
	.site {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	.site-header {
		margin-bottom: 72px;
		margin-bottom: 5.142857143rem;
		text-align: left;
	}
	.site-header h1 {
		font-size: 21pt;
		line-height: 1.5;
		text-align: left;
	}
	.site-header h2 {
		color: #000;
		font-size: 10pt;
		text-align: left;
	}
	.site-header h1 a,
	.site-header h2 a {
		color: #000;
	}
	.author-avatar,
	#colophon,
	#respond,
	.commentlist .comment-edit-link,
	.commentlist .reply,
	.entry-header .comments-link,
	.entry-meta .edit-link a,
	.page-link,
	.site-content nav,
	.widget-area-1,
	.widget-area-2,
	img.header-image,
	.main-menu {
		display: none;
	}
	.wrapper {
		border-top: none;
		box-shadow: none;
	}
	.site-content {
		margin: 0;
		width: auto;
	}
	.entry-header .entry-title,
	.entry-title {
		font-size: 21pt;
	}
	footer.entry-meta,
	footer.entry-meta a {
		color: #444;
		font-size: 10pt;
	}
	.author-description {
		float: none;
		width: auto;
	}

	/* Comments */
	.commentlist > li.comment {
		background: none;
		position: relative;
		width: auto;
	}
	.commentlist .avatar {
		height: 39px;
		left: 2.2em;
		top: 2.2em;
		width: 39px;
	}
	.comments-area article header cite,
	.comments-area article header time {
		margin-left: 50px;
		margin-left: 3.57142857rem;
	}
}