/* ==========================================================================
   Primary Styles
   Authored by: Vertex Software Corporation
   Austin, Texas
   ========================================================================== */

* {
	box-sizing: border-box;
}

body {
	width: 100%;
	padding: 0;
	margin: 0;
	background: #f4f2f3;
}

article {
  	position: relative;
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
	color: #222;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	background: #fff;
}

p {
	margin: 0;
}

a,
a:hover {
	color: inherit;
	text-decoration: underline;
}
h2 a,
h2 a:hover {
	text-decoration: none;
}
a img {
	border: 0;
}

header {
	width: 100%;
}
header .logo-healthenotes {
	margin: 0;
	padding: 10px 10px 10px 30px;
	text-align: right;
}
header .logo-healthenotes a {
	display: inline-block;
}
header .logo-healthenotes img {
	display: block;
	width: 260px;
}
header .issue-date {
	margin: 0;
	padding: 10px 30px 10px 10px;
	text-align: right;
	color: #5d6771;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.5;
}

nav.nav-top {
	display: none;
}

section.content .featured-story > *:first-child,
section.content .story > *:first-child {
	margin: 0;
	padding: 10px;
}
section.content .featured-story > *:first-child img,
section.content .story > *:first-child img {
	display: block;
	height: auto !important;
	width: 100% !important;
	max-width: none;
}
section.content .featured-story > h2:not(:first-child),
section.content .story > h2:not(:first-child) {
	margin: 0;
	padding: 20px 30px 10px 30px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
	overflow: hidden;
}
section.content .featured-story > p:not(:first-child),
section.content .story > p:not(:first-child) {
	margin: 0;
	padding: 10px 30px;
	overflow: hidden;
}

section.content .story > p:last-child {
	padding: 0px;
}
section.content .story:empty,
section.content .story > *:empty {
	display: none;
}

hr {
	padding: 0;
	margin: 30px 0 15px 0;
	width: 100%;
	height: 1px;
	color: #afb6ba;
	background-color: #afb6ba;
	border: 0;
}

aside.promos > div {
	text-align: center;
}
aside.promos > div h2 {
	margin: 0;
	padding: 0;
	color: #9361a6;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
}
aside.promos > div p {
	padding: 10px;
	text-align: center;
}
aside.promos > div img {
	display: block;
	margin: 0 auto;
  	max-width: 100%;
  	height: auto;
}
aside.promos + hr {
	margin: 15px 0 30px 0;
}

nav.nav-btm {
	background-color:#9361a6 !important;;
}

nav.nav-btm ul {
	margin: 0;
	padding: 0;
}
nav.nav-btm ul li {
	margin: 0;
	padding: 0 0 10px 0;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
nav.nav-btm ul li a {
	display: inline-block;
	padding: 10px;
}
nav.nav-btm ul li a img {
	display: block;
	width: 50px;
}

aside.text-promo {
	text-align: center;
}
aside.text-promo h2 {
	padding: 30px 20px 0 20px;
	margin: 0;
	color: #4b116f;
	font-size: 20px;
	line-height: 1.5;
	font-weight: bold;
}
aside.text-promo p {
	margin: 0;
	padding: 0 10px 20px 10px;
}

nav.nav-social {
	padding: 10px;
  	background-color: #9361a6;
}
nav.nav-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
nav.nav-social ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
nav.nav-social ul li + li {
	margin-left: 10px;
}
nav.nav-social ul li a {
	display: block;
	width: 36px;
	height: 36px;
	font-size: 24px;
	line-height: 36px;
}

footer {
	margin: 0;
	padding: 0 30px 30px 30px;
	text-align: center;
	font-size: 11px;
	line-height: 1.5;
  	color:white !important;
  	background-color: #9361a6 !important;
}
footer .logo-arc {
	display: inline-block;
	padding: 20px 10px 10px 10px; 
  	background-color: #9361a6;
}
footer .logo-arc img {
	display: block;
	width: 100px;
	height: 35px;
  	background-color: #9361a6;
}
footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	  background-color: #9361a6;
}
footer ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
footer ul li + li {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #222;
}

/* Responsive Styles */

@media screen and (min-width:600px) {
	
	header {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-end;
	}	
	
	nav.nav-top {
		display: block;
	}
	nav.nav-top ul {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	nav.nav-top ul li {
		display: inline-block;
		margin: 0;
		padding: 10px;
	}
	nav.nav-top ul li a {
		color: #f78c26;
		font-size: 14px;
		line-height: 1.5;
		font-weight: bold;
		text-decoration: none;
	}

	section.content .story > *:first-child {
		float: left;
		padding-top: 30px;
	}
	section.content .story > *:first-child img {
		width: 280px !important;
	}
  	section.content .story > *:first-child.right {
		float: right;
	}
	
	aside.promos:not(.stacked) {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
	}
	aside.promos:not(.stacked) > div {
		width: 50%;
	}

	nav.nav-btm ul {
		list-style: none;
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
    		padding-top:10px;
	}
	nav.nav-btm ul li {
		width: 33%;
	}
	
  	nav.hr {
  	color:white;
  	}
}


/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }