/* These styles for the body of articles. */
	
	h3 {
		font-family: Lato, Arial, sans-serif; font-weight: bold; font-size: 18px; color: #207BBC; margin: 40px 0 10px 0;
	}
	/* Inline image styles */
	
	.cap {
		font-size: .85em; font-family: "nunito sans", helvetica, sans-serif; vertical-align: top; text-align: center; padding: 0; margin: 20px 0px; color: #404144; border-bottom: 4px solid #EAF1F7;
	}
	
	.cap p {
		margin: 5px; padding: 10px; text-align: left;
	}
	
	.nocap {
		vertical-align: top; padding: 0; margin: 20px 0px; border: none;
	}

/* 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: 48%; padding: 5px; text-align: left;
			}

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


	@media only screen and (max-width: 600px) {
		.column {
			flex: 100%; max-width: 100%; 
			margin: 5px;
		}
	
		.column3 {
			flex: 100%;
			max-width: 100%; 
			margin: 5px;
		}
		
		.column4 {
			flex: 100%;
			max-width: 100%; 
			margin: 5px;
		}
	
	}
	
	/* For asides or divs that can float either right or left */

	.right {
	  float: right; width: 40%; margin-left: 15px;
	}
	
	.left {
	  float: left; width: 40%; margin-right: 15px;
	}

	/* For smaller screens */
  
	@media only screen and (max-width: 600px) {
			
		.right {
			float: none; width: 100%; margin: 10px auto;
		}
	
		.left {
			float: none; width: 100%; margin: 10px auto;
		}
	}
	
/* NEW PULLQUOTE STYLE. */
	.pquote {
	  display: block;
		float: none;
		width: 80%;
		clear: all;
		margin: 20px auto;
		background: url(/ext/resources/images/openquote.gif) top left no-repeat; background-size: 50px; 
		font-size: 26px; 
		line-height: 1.0; 
		font-style: italic; 
		padding: 13px;
		color: #C64F2F;
	}
	
	.pquote p:first-letter {
		font-size: 41px; 
		font-weight: 700;
	}
	
	.quotesig {
			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 Related articles boxes */
	
	.readMore {
    	float: right; max-width: auto; text-align: center; padding: 20px 20px 10px 20px; margin-left: 10px 20px 0px 20px; font-family: "Nunito Sans", "Open Sans", sans-serif; color: #fff; font-size: 18px; background-color: #207BBC; 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);
    }
    
    .readMore a:link {
    		border: none; text-decoration: none; color: #fff;
    	}
    .readMore a:visited {
    		border: none; text-decoration: none; color: #fff;
    	}
    .readMore a:hover {
    		border: none; text-decoration: none; color: #fff;
    	}
    .readMore a:active {
    		border: none; text-decoration: none; color: #fff;
    	}
    	
    @media only screen and (max-width: 600px) {
    	
    	.readMore {
    	float: none; width: 80%; padding: 10px; margin: 5px auto; text-align: center;
    	}
    
	}
	
/* USED IN HERO FOR ARTICLE INDEX AND RELATED ARTICLES */
	
	.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:#C64F2F; font-size:16px;
	}
	
	.toc h3 {
		font-size: 21px; font-weight: 900; color: #9D2E68; margin-top: 5px !important;
	}
	
	.toc h4 {
		font-size: 18px; font-weight: 900; color: #C64F2F;
	}
	
	.menu {
		list-style-type: square; color: #C64F2F; border: none; text-decoration: none;
	}
	
	.menu a:link {
		border: none; text-decoration: none; color: #C64F2F;
	}
	
	.menu a:hover {
		border: none; text-decoration: none; color: #9D2E68;
	}
	
	.menu a:visited {
		border: none; text-decoration: none; color: #C64F2F;
	}
	
	.menu2 {
		list-style-type: square; color: #C64F2F; border: none; text-decoration: none;
	}
	
	.menu2 a:link {
		border: none; text-decoration: none; color: #C64F2F;
	}
	
	.menu2 a:hover {
		border: none; text-decoration: none; color: #9D2E68;
	}
	
	.menu2 a:visited {
		border: none; text-decoration: none; color: #9D2E68;
	}
	
	@media only screen and (max-width: 600px) {
	
	.toc {
		width: 100%; float: none; margin: 20px auto; padding: 10px;
	}
}

	/* 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;
	}
	
/* BACKGROUND COLORS FOR SIDEBARS */

	.backgroundBlue {
		background-color: #C64F2F;
	}
	
	.backgroundRed {
		background-color: #207BBC;
	}
	
/* 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 {
		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;
	}
	
	/* 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: #207BBC; /* 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 */
		}