/* ---------------------------------------------------------------------------------
    ARTICLES | E-MAGAZINE
--------------------------------------------------------------------------------- */

#article-list { float: left; width: 100%; }
#article-list .article-row { float: left; width: 100%; padding-top: 10px; }
#article-list .article { float: left; width: 30.3%; margin: 0 1.5% 10px 1.5%; text-align: center; }
#article-list .article img { width: 100%; margin: 0 0 20px 0; }
#article-list .article h2 { font-size: 1.5em; text-transform: uppercase; font-weight: 700; }
#article-list .date { text-transform: uppercase; color: #b5b5b5; }
#article-list .date span { font-weight: 600; color: #979797; }

#article-left { float: left; width: 61%; padding: 10px 0 0 1%; }
#article-right { float: right; width: 30%; padding: 10px 1% 0 0; }
#article-right .thumb { width: 100%; }
#article-left .sm { font-size: 11px; }
#article-left img { max-width: 100%; height: auto; }

#article-left p { margin: 0 0 1.5em 0; }
#article-left p, #article-left li { font-size: 1.05em; line-height: 1.5em; }
#article-left p.intro { font-size: 1.35em; }
#article-left p a, #article-left li a { color: #bc0000; }
#article-left h1 { font-weight: bold; font-size: 1.7em; }
#article-left h2 { font-size: 1.4em; line-height: 1.25em; color: #0a579b; font-weight: bold; margin: 0.5em 0 1.0em 0; }
#article-left h2 a { color: #0a579b; text-decoration: underline; }
#article-left h3 { font-size: 1.15em; color: #32302b; margin: 0 0 15px 0; }
#article-left h3 a { color: #32302b; }
#article-left h4 { margin: 0 0 8px 0; }
#article-left li { padding-left: 20px; }
#article-left blockquote { float: left; width: 100%; font-style: italic; margin: 5px 0 30px 0; padding: 20px 0 0 0; border-top: dotted 2px #0a579b; border-bottom: dotted 2px #0a579b; }
#article-left blockquote p, #article-left p em { color: #0a579b; }
#article-left blockquote strong { font-style: normal; font-weight: bold; }
#article-left .img-topmargin { margin-top: 15px; }
#article-left .sm { font-size: 13px; }
#article-left hr { display: block; border: none; border-bottom: solid 1px #ccc; height: 15px; margin-bottom: 35px; }
#article-left figure { margin: 0; padding: 0; }
#article-left figcaption { float: left; width: 80%; font-style: italic; text-align: center; font-size: 0.9em; margin: 0 0 25px 0; padding: 5px 10% 0 10%; color: #666; }

#article-left ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
}
#article-left ol > li {
	position:relative; /* Create a positioning context */
	margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
	padding:0px 12px 15px 12px; /* Add some spacing around the content */
	list-style:none; /* Disable the normal item numbering */
	/* border-top:1px solid #0a579b; */
	background: none;
}
#article-left ol > li:before {
	content:counter(li); /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	/* Position and style the number */
	position:absolute;
	top:-2px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right:12px;
	padding: 3px 4px;
	color:#fff;
	background:#0a579b;
	font-weight:bold;
	text-align:center;
    -moz-border-radius: 30px; 
    border-radius: 30px; 
}

#heading.heading-article { text-align: center; border-bottom: dotted 2px #ccc; padding: 30px 5%; width: 90%; margin: 0 0 30px 0; }
#heading .cat { text-transform: uppercase; font-size: 1.4em; color: #a4a199; }
#heading .cat span { color: #888379; font-weight: 600; }
#heading.heading-article h1 { width: 100%; text-align: center; font-size: 2.2em; font-weight: bold; margin: 0; }

#article-photo { float: left; width: 100%; }
#article-photo img { width: 100%; }

#article-products { float: left; width: 100%; text-align: center; padding-top: 20px; }
#article-products h2 { font-size: 1.3em; font-weight: 700; }
#article-products ul { float: left; width: 100%; margin: 0; padding: 0; }
#article-products ul li { float: left; width: 100%; text-align: center; padding: 20px 0; border-top: solid 1px #ccc; margin: 0; list-style-type: none; }
#article-products ul li .img { float: left; width: 100%; margin: 0 0 10px 0; }
#article-products ul li img { max-height: 160px; max-width: 80%; }
#article-products ul li .fn { float: left; width: 100%; }

#article-comments { float: left; width: 100%; border-top: dotted 2px #ccc; text-align: center; padding: 30px 0; background: #f5f3ee; margin: 0 0 30px 0; }
#article-comments h2 { font-size: 1.8em; font-weight: 700; }

#article-right h3.bottom-border { float: left; width: 100%; text-align: center; border-bottom: solid 3px #4c9dd0; margin: 0; padding: 30px 0 10px; color: #32302b; }
#article-right .article { float: left; width: 100%; border-bottom: solid 1px #d2d2d2; border-top: none; padding: 15px 0; }
#article-right .article .thumb { float: left; width: 25%; }
#article-right .article img { float: left; width: 100%; }
#article-right .article .article-details { float: right; width: 69%; padding-right: 0%; }
#article-right .article .article-details span { color: #666; font-style: italic; }
#article-right .article h4 { font-size: 1.0em; line-height: 1.3em; margin: 0; }
#article-right .article h4 a { color: #4c9dd0; font-weight: normal; text-decoration: none; }
#article-right .article p { font-size: 0.9em; line-height: 1.3em; margin: 0; }
.references { float: left; width: 100%; border-top: solid 1px #ccc; padding-top: 30px; margin-top: 20px; }
.references p, .references li { font-size: 12px!important; line-height: 15px!important; }

.author { float: left; width: 100%; border-top: 1px solid #ccc; padding: 20px 0 0 0; margin-top: 15px; }
.author .thumb { float: left; width: 16%; }
.author .thumb img { border-radius: 50%; width: 100%; }
.author .info { float: right; width: 80%; }

.share-btns { float: left; padding: 20px 0; }

#lead-magnet { float: left; width: 80%; padding: 20px 10%; background: #dcd1bf; margin: 0 0 20px 0; text-align: center; }
#lead-magnet fieldset { float: left; width: 100%; margin: 0; padding: 0; }
#lead-magnet #lead-subscribe { float: left; width: 100%; height: auto; -webkit-appearance: none; -webkit-border-radius: 0; }
#lead-magnet #lead-magnet-email { width: 94%; padding: 5px 3%; font-size: 17px; text-align: left; background: #fff; border: solid 1px #c7bba7; -moz-border-radius: 6px; border-radius: 6px; }
#lead-magnet h3 { color: #32302b; font-size: 1.35em; margin: 0 0 10px 0; }
#lead-magnet .row { float: left; width: 100%; margin: 0 0 10px 0; position: relative; }
#lead-magnet .row label { position: absolute; text-align: left; top: 5px; left: 10px; z-index: 100; color: #ccc; cursor: text; }