/* These are current styles for the body of articles. */

h3 {
	margin-top: 30px; font-family: "Nunito Sans", "Open Sans", sans-serif; font-weight: 900;
}

h4 {
	margin-top: 20px;
}

	/* Inline image styles */
	.cap {
		font-size: .875rem; font-family: "nunito sans", helvetica, sans-serif; vertical-align: top; text-align: center; padding: 0; margin: 20px auto; color: #404144; background-color: #f4f5f6; border: none;
	}
	
	.noborder {
		border: none;
	}
	
	.nobackgroundcolor {
		background-color: #none;
	}
	
	.cap figcaption {
		margin: 5px; padding: 10px; text-align: left;
	}
	
	.nocap {
		vertical-align: top; padding: 0; margin: 20px auto; border: none;
	}
	
	.cap p {
		margin: 5px; padding: 10px; text-align: left;
	}

	.floatleft {
	  float: left; width: 50%; margin: 0px 20px 20px 0px;
	}

	.floatright {
	  width: 45%; float: right; margin: 0px 0px 20px 20px;
	}

@media only screen and (max-width: 600px) {	
		.cap {
			font-size: .8em;
		}
	
		img {
			display: block;
			float: none;
			margin: 0px auto;
		}
	
		.side {
			margin: 20px auto 20px auto; width: 300px; display: block;
		}
		.floatleft {
			float: none;
			width: 100%;
			margin: 0px auto 20px auto;
		}
		.floatright {
			float: none;
			width: 100%;
			margin: 0px auto 20px auto;
		}
	}
	
	.sidebyside {
		width: 48%; float: left; display: block; display: inline-block; margin-bottom: 20px;
	}
	
	.sidebyside img {
	  width: 100%;
	}
	
	.clearfloat {
		clear: both;
	}

	.clearleft {
		clear: left;
	}

	.clearright {
		clear: right;
	}

/*Pull quote styles */

	.pullquote {
		display: block; margin: 20px auto; width: 80%; padding: 10px; float: none;
	}
	
	.pullquote p {
		font-weight: bold; font-style: italic; font-size: 21px; text-align: center;
	}

/* TEXT COLOR. Used mainly for pullquotes and headlines to change color of text */
	.Blue {
		color: #557391;
	}
	
	.Red {
		color: #B5111A;
	}
	
/* BACKGROUND COLOR. Used mainly for sidebars */

	.backgroundBlue {
		background-color: #557391;
	}
	
	.backgroundRed {
		background-color: #B5111A;;
	}
	
/* Can be added to related articles or related columns asides */

	.backgroundPink {
		background-color: #FFF6F6;
		border: 1px dashed #B5111A;
	}
	
/* NEW PULLQUOTE STYLE. */
	.pquote {
	  display: block;
		float: none;
		width: 80%;
		clear: all;
		margin: 40px auto;
		background: url(https://www.qualitymag.com/ext/resources/images/openquote.gif) top left no-repeat; background-size: 50px; 
		font-size: 26px; 
		line-height: 1.0; 
		font-style: italic; 
		padding: 20px 13px;
	}
	
	.pquote p:first-letter {
		font-size: 41px; 
		font-weight: 700;
	}
	
	.pquotesig {
		font-family: ariel, helvetica, sans-serif; font-weight: 700; font-size: smaller;
	}
	
	@media only screen and (max-width: 600px) {
    .pquote {
		    width: 100%;
		    margin: 10px auto;
		    font-size: 23px; 
	   }
        
	}
	
/* For pullquotes. Use color and border styles as separate css */
	
.pullquote {
		display: block; margin: 20px auto; width: 80%; padding: 10px; float: none;
	}
	
.pullquote p {
	  font-weight: bold; font-style: italic; font-size: 21px; text-align: center;
	}
	
/* Borders for pullquotes */
	.topbottomborder {
	
		border-top: 3px solid silver; border-bottom: 3px solid silver; margin: 20px auto;
	}
	
	.leftrightborder {
		
		border-left: 3px solid silver; border-right: 3px solid silver; margin: 20px auto; 
	}

/* Pullquotes with signatures */
	.quotesig {
			font-family: ariel, helvetica, sans-serif; font-weight: 700; font-size: smaller;
		}

/* Used mostly to align pullquotes left or right */
	.right {
	  float: right; width: 45%; margin-left: 20px;
	}
	
	.left {
	  float: left; width: 45%; margin-right: 20px;
	}

/* For smaller screens */
  
  @media only screen and (max-width: 600px) {
	
	.pullquote p {
	  font-size: .85em; 
	}
	
	.pullquote p {
	  font-size: .85em; 
	}
	
	.topbottomborder {
		
		border-top: 1px solid #404144; border-bottom: 1px solid #404144; 
	}
	
	.leftrightborder {
		
		border-left: 1px solid #404144; border-right: 1px solid #404144; 
	}
		

	.quotesig {
			font-size: 11px; color: #404144;
		}
		
	.quotesig p {
			font-size: 11px; color: #404144;
		}

	.right {
	  float: none; width: 100%; margin: 10px auto;
	}
	
	.left {
	  float: none; width: 100%; margin: 10px auto;
	}
  }

/* Can be used for related article box */

	/* For Related articles boxes */
	.readMore { 
    	float: right; padding: 20px 20px 10px 20px; margin-left: 10px; font-family: "Nunito Sans", "Open Sans", sans-serif; color: #fff; font-size: 18px; background-color: #1C4974; border-radius: 5px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
    }
	
    /* OLD STYLE .readMore {
    	display: inlineblock; float: right; width: 30%; padding: 10px 5px; margin-left: 5px; text-align: center; color: #fff; background-color: #1C4974;
    } */
    
    .readMore a:link {
    		border: none; text-decoration: none;
    	}
    .readMore a:visited {
    		border: none; text-decoration: none;
    	}
    .readMore a:hover {
    		border: none; text-decoration: none;
    	}
    .readMore a:active {
    		border: none; text-decoration: none;
    	}
    	
    @media only screen and (max-width: 600px) {
    	
    	.readMore {
    	float: none; width: 80%; padding: 10px 5px; margin: 5px auto; text-align: center;
    	}
    
	}
	
/* OLD STYLE
.readMore {
		display: inlineblock; 
		padding: 20px;
		margin: 0px 0px 8px 8px;
		float: right;
		text-align: center;
		width: 30%; 
		font-size: 18px; 
		font-weight: 900;
		color: #fff;
		background-color: #557391; 
		border: solid 7px #F4F5F6; 
		border-radius: 20px;
  }
  
  .readMore a:link {
    color: #fff;
    text-decoration: none;
    border-bottom: none;
  } */
  
/* Aside can be used for related link */

	/* Aside Right */
	.asideRight{
		display: inlineblock; 
		padding: 20px;
		width: 50%;
		margin: 0px 0px 8px 8px;
		float: right;
		text-align: center;
	}
	
	@media screen and (max-width: 700px){
		.asideRight{
		float: none;
		width: 80%;
		margin: 8px auto;
		}
	}
	
	.asideRight img{
	max-width: 100%;
	max-height: 300px;
	}
	
	.asideRight p{
	margin: 5px auto;
	color: #808080;
	font-size:14px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	text-align: left;
	}
	
	.asideRight a:link{
	border-bottom: none;
	}
	
	/*Aside Left*/
	.asideLeft{
	display: inlineblock; 
	padding: 20px;
	width: 50%;
	margin:0px 8px 8px 0px;
	float: left;text-align: center;
	}
	
	@media screen and (max-width:700px){
	.asideLeft{
	float: none;
	width: 80%;
	margin: 8px auto;
	}
	
	}
	
	.asideLeft img{
	max-width: 100%;
	max-height: 300px;
	}
	.asideLeft p{
	margin: 5px auto;
	font-size: 14px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	color: #808080; 
	text-align: left;
	}
	
	.asideLeft a:link{
	border-bottom: none;

}

/* View Gallery wrap for Continuum body photo gallery */

	.galleryWrap {
		background-color: #f4f5f6; margin-top: 20px; padding: 10px; font-family: 'Nunito Sans', sans-serif;
	}

/* BREAKOUT BOX STYLE THAT BLEEDS TO SIDES */

	.sidebarFullWidth {
		position: relative; left: -30px; margin-right: -60px; color: #fff; padding: 20px 40px; width: auto; box-shadow: none; font-family: 'Nunito Sans', sans-serif;
	}
	
	.sidebarFullWidth h3 {
		color: #fff; margin-top: 5px !important;
	}
	
	.sidebarFullWidth p strong {
		color: #fff; margin-left: 10px
	}
	
	.sidebarFullWidth a:link {
		color: #fff; text-decoration: none; border: none;
	}
	.sidebarFullWidth a:visited {
		color: #fff; text-decoration: none; border: none;
	}
	.sidebarFullWidth a:hover {
		color: #fff; text-decoration: none; border: none;
	}
	.sidebarFullWidth a:active {
		color: #fff; text-decoration: none; border: none;
	}
	.sidebarFullWidth ul li {
		color: #fff; text-decoration: none; border: none;
	}
	
	/* USED IN HERO FOR ARTICLE INDEX AND RELATED ARTICLES */
	
	#toc {
		width: 45%; float: right; margin: 5px auto 5px 10px; background-color: #FFF6F6; padding: 10px 20px; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: medium; border-left: 10px solid #B5111A;
	}
	
	#toc h4 {
		font-family: Tahoma, Verdana, Segoe, sans-serif; color: #B5111A;
	}
	
	.menu {
		list-style-type: square; color: #557391; border: none; text-decoration: none;
	}
	
	.menu a:link {
		border: none; text-decoration: none; color: #557391;
	}
	
	.menu a:hover {
		border: none; text-decoration: none; color: #B5111A;
	}
	
	.menu a:visited {
		border: none; text-decoration: none; color: #557391;
	}
	
	.menu2 {
		list-style-type: square; color: #557391; border: none; text-decoration: none;
	}
	
	.menu2 a:link {
		border: none; text-decoration: none; color: #557391;
	}
	
	.menu2 a:hover {
		border: none; text-decoration: none; color: #B5111A;
	}
	
	.menu2 a:visited {
		border: none; text-decoration: none; color: #557391;
	}

/* class instead of id for toc */

	.toc {
		width: 40%; float: right; padding: 20px; margin: 5px 0px 5px 10px; font-family: "Nunito Sans", "Open Sans", sans-serif; line-height: 1.388; color: #404144; font-weight: 700; text-decoration: none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.toc p {
	  color:#557391; font-size:16px;
	}
	
	.toc h3 {
		font-size: 21px; font-weight: 900; color: #B5111A; margin-top: 5px !important;
	}
	
	.toc h4 {
		font-size: 18px; font-weight: 900; color: #557391;
	}	
	
	.toc2 {
		width: 40%; float: right; padding: 20px; margin: 5px 0px 5px 10px; font-family: "Nunito Sans", "Open Sans", sans-serif; line-height: 1.388; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.toc2 p {
	  color:#fff; font-size:16px;
	}
	
	.toc2 h3 {
		font-size: 21px; font-weight: 900; color: #fff; margin-top: 5px !important;
	}
	
	.toc2 h4 {
		font-size: 18px; font-weight: 900; color: #fff;
	}	
	
@media only screen and (max-width: 600px) {
	
	.toc {
		width: 100%; float: none; margin: 20px auto; padding: 10px;
	}
	
	#toc {
		width: 100%; float: none; margin: 20px auto; padding: 10px;
	}
}
	
	
/* SIDE BY SIDE USING FLEX METHOD FOR IMAGES */

	* {
	  box-sizing: border-box;
	}

	.row {
			display: flex; flex-wrap: wrap;
		}
		
	/* Create two equal columns that sits next to each other */
		
	.column {
			flex: 49.5%; padding: 5px; text-align: left;
		}

	/* Create three equal columns that sits next to each other */
	.column3 {
	  flex: 33.33%;
	  padding: 5px;
	  text-align: left;
	}
	
	.column4 {
		flex: 25%
		padding: 5px;
		text-align: left;
	}


@media only screen and (max-width: 600px) {
		.column {
			flex: 100%; max-width: 100%; 
			margin: 5px;
		}
	
		.column2 {
			flex: 100%;
			max-width: 100%; 
			margin: 5px;
		}
		
		.column3 {
			flex: 100%;
			max-width: 100%; 
			margin: 5px;
		}
		
		.sidebyside {
			width: 100%; float: none; display: block;
		}
		
		.toc {
			float: none; width: 100%;
		}
		.toc img {
			width: 50%; height: auto;
		}
	
}

/* Podcast */

	.pod {
		border-radius: 5px; padding: 5px; display: flex; justify-content: center; align-items: center; width: 100%;
	}
	
	.line {
		background-color: #b5111a; height: 2px; margin-top: 20px;
	}
	
/* NOTE: CODE FOR PODCAST THAT DOESN'T FLOAT RIGHT OR LEFT: */
	
	.side {
		color: #404144; width: 100%; display: inline-block; font-family: 'Nunito Sans', sans serif;
	}
	
	.side ul {
		padding-left: 20px; font-size: .85em; font-style: italic; margin: 10px 15px 10px 15px;
	}
	
	.side h3 {
		padding: 15px; color: #b5111a; text-align: center;
	}
	
	.side h4 {
		color: #E71D13; text-align: center; margin-top: 20px; margin-bottom: 20px; font-weight: bold;
	}
	
	.side p {
		font-size: .85em; caption-side: bottom; padding: 10px 5px 0px 5px;
	}
	
	.podcontainer {
		width: 97%; background-color: #E71D13; border-radius: 25px; padding: 20px; display: flex; justify-content: center; align-items: center; margin: 0px auto;
	}

/* Used for reference notes at the bottom of articles */

	#footnote {
		font-size: 13px; border-top: solid 1px #f4f5f6; text-decoration: italic; margin: 30px auto 0px auto; padding: 20px;
	}
	
	#footnote h4 {
		font-size: 15px; margin-top: 20px; font-family: Ariel, Helvetica, sans serif;
	}
	
	/* OLD STLE #footnote {
		font-size: .9em; font-family: Ariel, Helvetica, sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	} */

	#endnote {
		font-size: .9em; font-family: Ariel, Helvetica, sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	}
	
/* The "Top" button that allows you to go back to the top of the page */

#TopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #B5111A; /* Set a background color */
  color: #fff; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#TopBtn:hover {
  background-color: #404144; /* Add a dark-grey background on hover */
}

@charset "utf-8";
	/* This contains the hidden content. */
	
	.hideRevealContainer {
		display: none; position: relative; animation: revealDown 0.4s;
	}
	
	.moreButtonContainer {
		display: none;
	position: relative;
	animation: revealDown 0.4s;
	}
	@keyframes revealDown{
		from{
			top: -25px;
			opacity: 0;
		}
		to{
			top: 0;
			opacity: 1;
		}
	}

/* toggle buttons for dropdown sidebars. If you have more than three hidereveals, add as inbody styles instead */


#moreBtn, #moreBtnTwo, #moreBtnThree {
  position: relative;
  background-color: #008094;
  color: #f4f5f6;
  padding: 5px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
}
#moreBtn-checkbox, #moreBtnTwo-checkbox, #moreBtnThree-checkbox {
  display: none;
}
#moreBtn-checkbox:checked + #moreBtn:after, #moreBtnTwo-checkbox:checked + #moreBtnTwo:after, #moreBtnThree-checkbox:checked + #moreBtnThree:after {
  content: "Close";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #008094;
  color: #f4f5f6;
  padding: 5px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
}

/*** DEPRECATED STYLES. DO NOT DELETE. OLD ARTICLES ARE STILL USING. ***/

/* Sidebar */
	.sidebarBleed {
		position: relative; left: -30px; margin-right: -60px; background-color: #557391; color: #fff; padding: 20px; width: auto; box-shadow: none; font-family: Tahoma, Verdana, Segoe, sans-serif;
	}
	
	.sidebarBleed h3 {
		color: #fff; padding-top: 10px;
	}
	
	.sidebarBleed p strong {
		color: #fff;
	}
	
	.sidebarhdrQTY {
		background-color: #557391; margin: 0px; padding: 10px; font-weight: bold; font-family: ariel, helvetica, sans-serif; width: 100%; color: #fff;
	}
	
  .sidebarhdrQTY h4 {
		color: #ffffff; font-weight: bold; font-family: ariel, helvetica, sans-serif;
	}

	.sidebarhdrQTY p {
		color: #ffffff; font-weight: bold; font-family: ariel, helvetica, sans-serif;
	}
  
	.sidebarQTY {
		border: 1px solid #557391; color: #404144; padding: 10px; margin: 0px auto; font-family: Tahoma, Verdana, Segoe, sans-serif; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.sidebarQTY p {
	  padding: 0px 20px;
	}
  
  .sidebarQTY strong {
		color: #557391; font-family: Tahoma, Verdana, Segoe, sans-serif;
	}

	.sidebarQTY ul {
		margin-left: 20px;
		margin-right: 20px;
	}
	
/* For older articles before pullquote styles above */
	
	.pullquoteBlue {
		display: block; margin: 20px auto; width: 80%; padding: 10px; float: none; color: #557391;
	}
	
	.pullquoteBlue p {
	  font-weight: bold; font-style: italic; font-size: 21px; text-align: center;
	}

	.pullquoteRed {
		display: block; margin: 20px auto; width: 80%; padding: 10px; float: none; color: #B5111A;
	}
	
	.pullquoteRed p {
	  font-weight: bold; font-style: italic; font-size: 21px; text-align: center;   
	}
	
@media only screen and (max-width: 600px) {
	
	.pullquoteBlue p {
	  font-size: .85em; 
	}
	
	.pullquoteRed p {
	  font-size: .85em; 
	}
}