/* These styles are for the body of articles and include old and new styles. */

h3 {
		margin-top: 30px;
}

	/* thick gradient border 75% width */
	
	hr.red60 {
		border: 0;
    height: 10px;
    background-image: linear-gradient(75deg, #FFF, #EAF1F7, #E71D13, #EAF1F7, #FFF); width: 75%; background-color: #E71D13 /* For browsers that don't support gradient */
	}
	

/* USE TO ADD TO PULLQUOTES, HEADLINES, SUBHEADLINES */

.Red {
	color: #E71D13;
}

.Brown {
		color: #7E6E66;
	}
	
.lightBlue {
		background-color: #EAF1F7;
		color: #404144;
}


	/* 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: 2px solid #E71D13;
	}
	
	/* For the first image next to skyscraper. Class="firstimage cap" */
	.firstimage {
	  width: 97%; margin: 0px auto;
	}
	
	.cap p {
  margin: 5px; padding: 10px; text-align: left;
	}
	

/* 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;
	}


@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;
		}
	
}
	
	
	/* CAN BE USED FOR IMAGES AND BREAKOUT BOXES */

	.floatleft {
	  float: left; width: 50%; margin-right: 10px;
	}

	.floatright {
	  float: right; width: 50%; margin-right: 10px;
	}

	@media only screen and (max-width: 600px) {
		.cap {
			display: block;
			float: none;
			margin: 0px auto;
		}

		.floatleft {
			display: block;
			float: none;
			margin: 0px auto;
		}
		.floatright {
			display: block;
			float: none;
			margin: 0px 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. Use border, color, and float classes as needed.*/
	
	.pullquote {
		display: block; margin: 10px auto; width: 90%; padding: 10px; float: none;
	}
	
	.pullquote p {
	  font-weight: bold; font-style: italic; font-size: 1.5em; 
	}
	
	.topbottomborder {
		
		border-top: 3px solid silver; border-bottom: 3px solid silver; margin: 10px; 
	}
	
	.leftrightborder {
		
		border-left: 3px solid silver; border-right: 3px solid silver; margin: 10px; 
	}
		

	.quotesig {
			font-size: 14px; color: 404144;
		}

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

/* For smaller screens */
  
  @media only screen and (max-width: 600px) {
	
		.pullquote p {
		  font-size: .9em; 
		}
		
		.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;
			}

		.right {
		  float: none; width: 95%; margin: 20px auto;
		}
		
		.left {
		  float: none; width: 95%; margin: 20px auto;
		}
	}
	
/* USE THESE STYLES FOR SIDEBARS */
  
	.sidebarSW {
		border: 1px solid #E71D13; color: #404144; padding: 0px; width: 98%; margin: 0px auto; font-family: 'Nunito Sans', sans serif; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	.sidebarSW h3 {
	
	background-color: #E71D13; margin: 0px; padding: 10px; font-weight: bold; font-family: 'Nunito Sans', sans serif; width: 100%; color: #fff;
	
	}
	
	.sidebarSW h4 {
		color: #ffffff; font-weight: bold; font-family: 'Nunito Sans', sans serif;
	}

	.sidebarSW p {
	  padding: 0px 20px;
	}
  
	.sidebarSW strong {
		color: #E71D13; font-family: 'Nunito Sans', sans serif;
	}

	.sidebarSW ul li {
		list-style: none;
		margin-left: 20px;
		margin-right: 20px;
	}
	
/* BREAKOUT BOX STYLE THAT BLEEDS TO SIDES */
	
	.sidebarFullWidth {
		position: relative; left: -30px; margin-right: -60px; color: #fff; padding: 20px; width: auto; box-shadow: none; font-family: 'Nunito Sans', sans serif;
	}
	
	.sidebarFullWidth h3 {
		color: #fff; margin-top: 5px !important;
	}
	
	.sidebarFullWidth p strong {
		color: #fff;
	}
	
	@media screen and (max-width: 600px) {
		.cap {
			font-size: .8em;
		}
		.sidebyside {
			width: 100%; float: none; display: block;
		}
		
		.floatleft {
	  float: none; display: block; width: 100%;
	}
	}
	
/* For Related articles boxes */

    .readMore {
    	.display: inlineblock; float: right; width: 30%; padding: 10px 5px; margin-left: 5px; text-align: center; color: #fff; background-color: #E71D13;
    }
    
    .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 {
    	.display: inlineblock; float: none; width: 80%; padding: 10px 5px; margin: 5px auto; text-align: center; color: #fff; background-color: #E71D13;
    	}
    
	}
	
/* Red background, white border, white lettering for related article box */
	
.relatedAside {
    display: inlineblock; font-family: 'Nunito Sans', sans serif; float: right; width: 35%; padding: 10px 30px; margin-left: 10px; color: #fff; border: 3px solid #fff; box-shadow: 5px 5px 8px #ccc; background-color: #E71D13;
  }
  
  .relatedAside p strong {
	  color: #fff;
  }
  
  .relatedAside h4 {
    color: #fff;
  }
  
  .relatedAside a:link {
    color: #fff; text-decoration: none; border: none;
  }
  
  .relatedAside a:visited {
    color: #fff; text-decoration: none; border: none;
  }
  
  .relatedAside a:hover {
    color: #404144; text-decoration: none; border: none;
  }
  
  .relatedAside a:active {
    color: #404144; text-decoration: none; border: none;
  }
  
  @media only screen and (max-width: 600px) {
    
    .relatedAside {
    display: inlineblock; float: none; width: 100%; padding: 10px;
    }
    
  }

/* Menu button styles */
	.Menubutton {
		border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 5px; padding: 5px; font-size: 18px; font-weight: bold; width: 250px; height: 50px; font-family: 'Nunito Sans', sans serif;
		}
		
	.Menubutton:hover {
		border: 5px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 5px; padding: 5px; font-size: 18px; width: 250px; height: 50px; font-family: 'Nunito Sans', sans serif;
		}

	.Menucontainer {
	  width: 97%;
	  height: 500px;
	  margin: 0px auto 0px 20px;
	  padding: 10px;

	}

.center {
  margin: 0px 0px 0px 10px;

}

/* Back to the menu bar in product articles */
.back2menu {
	border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 5px; padding: 5px; font-size: 18px; font-weight: bold; width: 100%; height: 50px; font-family: 'Nunito Sans', sans serif;
	}
	
.back2menu:hover {
	border: 5px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 5px; padding: 5px; font-size: 18px; width: 100%; height: 50px; font-family: 'Nunito Sans', sans serif;
	}
	
/* For a link bar in product pages just below the product info */

a.linkbar:link, a.linkbar:visited {
  background-color: #E71D13;
  color: white;
  width: 100%;
  padding: 0px 10px;
  margin: 0px auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.linkbar:hover, a.linkbar:active {
  background-color: #E71D13;
}

/* Smaller screens Menu buttons */
@media only screen and (max-width: 600px) {
  
    .Menubutton {
	border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 3px; padding: 3px; font-size: 14px; font-weight: bold; width: 75px; height: 75px; font-family: 'Nunito Sans', sans serif;
	}
	
	.Menubutton:hover {
		border: 3px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 3px; padding: 3px; font-size: 14px; width: 75px; height: 75px; font-family: 'Nunito Sans', sans serif;
		}
		
	.Menucontainer {
	  width: 97%;
	  margin: 0px auto;
	  padding: 10px;
	}
	  
	}

/* NOTE: CODE FOR PODCAST THAT DOESN'T FLOAT RIGHT OR LEFT: */

	.line {
		background-color: #E71D13; height: 1px; margin-top: 20px;
	}
	
	.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: #E71D13; 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;
	}
	
	.pod {
		width: 97%; background-color: #E71D13; border-radius: 25px; padding: 20px; display: flex; justify-content: center; align-items: center; margin: 0px auto;
	}
	
	.podfloatright {
		float: right; margin: 0 0 10px 15px;
	}
	
/* Style for podcast article aside with podcast logo icon */
	.moreaside {
    width: 300px; text-align: center; margin: 10px auto; font-family: 'Nunito Sans', sans serif; font-weight: 700;
  }
	
	@media only screen and (max-width: 600px) {
		.side {
			margin: 20px auto 20px auto; width: 95%; display: block;
		}
		
		.podfloatright {
			float: none;
		}
		
		.moreaside {
			width: 95%;
		}
	}
	
	/* Used for reference notes at the bottom of articles */

	#footnote {
		font-size: .9em; font-family: 'Nunito Sans', sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	}

	#endnote {
		font-size: .9em; font-family: 'Nunito Sans', sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	}
	
/* USED IN WOMEN SPOTLIGHT AND FOTY ARTICLES */
	
	.profileimg {
		display: inline-block; vertical-align: middle; margin: 5px 10px 5px 5px; padding: 5px; max-width: 350px;
	}
	
	@media only screen and (max-width: 600px) {
		.profileimg {
			display: inline-block; margin: 5px; padding-bottom: 10px; float: none; width: 100%; max-width: 100%;
		}
	}
	
/* SPECIFICALLY USED FOR BREAKOUT BOX STYLES FOR SIDEBARS FOR FOTY */

	.sidebarFOTY {
		position: relative; left: -30px; margin-right: -60px; background-color: #eaf1f7; color: #404144; padding: 20px; width: auto; box-shadow: none;
	}
	
	.sidebarFOTY h3 {
		color: #404144; padding: 20px;
	}
	
	.sidebarFOTY p strong {
		color: #404144;
	}
	/* Text under banner */
	
	#underbanner {
		color: #E71D13; text-align: center; font-size: 27px; font-family: Nunito Sans, sans-serif; font-weight: bold; padding: 0px;
	}
	/* Top navigation under the banner */
	
	.jumpnav {
		text-align: center; float: right;
	}
	/* unvisited link */
	
	.jumpnav a:link {
		background-color: #E71D13; border: 5px solid #fff; color: #fff; padding: 10px; width: 200px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; font-family: 'Nunito Sans', sans serif; margin: 4px 10px 4px 4px; cursor: pointer; border-radius: 15px 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 3px 3px 7px 3px #CCC;
	}
	/* visited link */
	
	.jumpnav a:visited {
		background-color: #E71D13; border: 5px solid #fff; color: #fff;
	}
	/* mouse over link */
	
	.jumpnav a:hover {
		background-color: #404144; border: 5px solid #fff; color: #fff; padding: 10px; width: 200px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; font-family: 'Nunito Sans', sans serif; margin: 4px 10px 4px 4px; cursor: pointer; border-radius: 50px 15px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 3px 3px 7px 3px #CCC;
	}
	/* selected link */
	
	.jumpnav a:active {
		background-color: #404144; border: 5px solid #fff; color: #fff;
	}
	
	#intro {
		font-size: 18px; text-align: left;
	}
	
	#column {
		text-align: left;
	}
	
	#sponsorbox {
		width: 100%; padding: 10px; margin: 0px 0px 10px 0px;
	}
	
	.sponsoredby {
		font-size: inherit; padding-right: 20px; text-align: right;
	}
	/* For the breakout boxes */
	
	* {
		box-sizing: border-box;
	}
	
	.boxflex-container {
		display: flex; flex-wrap: wrap; text-align: left; padding: 3px; margin: 0 auto;
	}
	
	.boxflex-item {
		background-color: #f4f5f6; border-radius: 0px; padding: 10px; width: 100%; flex: 45%; margin: 10px; text-align: left; border-left: 10px solid #e71d13;
	}
	
	.boxflex-item h4 {
		color: #e71d13;
	}
	/* For the Archives sidebars */
	
	.archivebox {
		border-left: 10px #e71d13 solid; margin-left: 5px; padding-left: 10px;
	}
	
	.archivebox a:link {
		text-decoration: none;
	}
	
	.archivebox a:visited {
		text-decoration: none;
	}
	
	.archivebox a:hover {
		text-decoration: none;
	}
	
	.beforeVote {
		display: block; font-size: 21px; color: #E71D13; text-align: center; font-weight: bold; margin: 0px auto;
	}
	
	@media only screen and (max-width: 600px) {
		/* Top navigation under the banner */
		.jumpnav {
			text-align: center; float: none;
		}
		/* unvisited link */
		.jumpnav a:link {
			background-color: #E71D13; border: 3px solid #fff; color: #fff; padding: 5px; width: 50%; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; font-family: 'Nunito Sans', sans serif; margin: 10px auto; cursor: pointer; border-radius: 15px 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 3px 3px 7px 3px #CCC;
		}
		/* visited link */
		.jumpnav a:visited {
			background-color: #E71D13; border: 3px solid #fff; color: #fff;
		}
		/* mouse over link */
		.jumpnav a:hover {
			background-color: #404144; border: 3px solid #fff; color: #fff; padding: 5px; width: 50%; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; font-family: 'Nunito Sans', sans serif; margin: 10px auto; cursor: pointer; border-radius: 50px 15px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 3px 3px 7px 3px #CCC;
		}
		#sponsorbox {
			flex: 100%; max-width: 100%; padding: 0px; margin: 0px auto; clear: all;
		}
		.sponsoredby {
			font-size: inherit; text-align: left; float: none;
		}
		/* For the Archives sidebars */
		.archivebox {
			margin-left: 5px; padding-left: 10px; width: 100%;
		}
		/* For the breakout boxes, responsive layout - makes a one column-layout instead of a two-column layout */
		.boxflex-item {
			flex: 100%; max-width: 100%; margin: 5px;
		}
		.beforeVote {
			display: block; font-size: 18px; color: #E71D13; text-align: center; font-weight: bold; margin: 0px auto;
		}
	}
	
	/* USED IN FOTY FOR Q AND A SECTION */
	
	.qanda {
		display: block; margin: 0px auto; padding: 5px; text-align: center;
	}
	
	.qanda a:link {
		font-weight: 700; text-decoration: none; text-align: center;
	}
	
	.qanda a:active {
		font-weight: 700; text-decoration: none; text-align: center;
	}
	
	.qanda a:hover {
		font-weight: 700; text-decoration: none; text-align: center;
	}
	
	.qanda a:visited {
		font-weight: 700; text-decoration: none; text-align: center;
	}
	/* END SPECIFIC FOTY STYLES */
	

/* USED IN FOTY AND WOMEN SPOTLIGHT FOR ARTICLE INDEX AND RELATED ARTICLES */
	
	#toc {
		width: 45%; float: right; margin: 5px auto 5px 10px; background-color: #EAF1F7; padding: 10px 20px; font-family: 'Nunito Sans', sans serif; font-size: medium; border-left: 10px solid #E71D13;
	}
	
	#toc h4 {
		font-family: 'Nunito Sans', sans serif; color: #E71D13;
	}
	
	.menu a:link {
		border: none; text-decoration: none;
	}
	
	.menu a:hover {
		border: none; text-decoration: none;
	}
	
	.menu a:visited {
		border: none; text-decoration: none;
	}
	
	@media only screen and (max-width: 600px) {
		#toc {
			width: 100%; float: none; margin: 20px auto; padding: 10px;
		}
	}

/*FOR HIDE REVEAL "READ MORE" AND "CLOSE" BUTTONS. USED FOR FOTY, BUT CAN BE USED FOR ANYTHING */
@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 */
	
	#moreBtn,
	#moreBtnTwo,
	#moreBtnThree,
	#moreBtnFour,
	#moreBtnFive,
	#moreBtnSix,
	#moreBtnSeven,
	#moreBtnEight {
		position: relative; background-color: #000; color: #f4f5f6; padding: 5px; text-align: center; width: 100px; border-radius: 5px;
	}
	
	#moreBtn-checkbox,
	#moreBtnTwo-checkbox,
	#moreBtnThree-checkbox,
	#moreBtnFour-checkbox,
	#moreBtnFive-checkbox,
	#moreBtnSix-checkbox,
	#moreBtnSeven-checkbox,
	#moreBtnEight-checkbox {
		display: none;
	}
	
	#moreBtn-checkbox:checked + #moreBtn:after,
	#moreBtnTwo-checkbox:checked + #moreBtnTwo:after,
	#moreBtnThree-checkbox:checked + #moreBtnThree:after,
	#moreBtnFour-checkbox:checked + #moreBtnFour:after,
	#moreBtnFive-checkbox:checked + #moreBtnFive:after,
	#moreBtnSix-checkbox:checked + #moreBtnSix:after,
	#moreBtnSeven-checkbox:checked + #moreBtnSeven:after,
	#moreBtnEight-checkbox:checked + #moreBtnEight:after {
		content: "Close"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; color: #f4f5f6; padding: 5px; text-align: center; width: 100px; border-radius: 5px;
	}

	
/* 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: #E71D13; /* 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 */
}

/* DEPRECATED STYLES. Keep for old articles to prevent breaking sidebars */

	.sidebarhdrSW {
		background-color: #E71D13; margin: 0px; padding: 10px; font-weight: bold; font-family: 'Nunito Sans', sans serif; width: 100%; color: #fff;
	}
	
  .sidebarhdrSW h4 {
		color: #ffffff; font-weight: bold; font-family: 'Nunito Sans', sans serif;
	}

	.sidebarhdrSW p {
		color: #ffffff; font-weight: bold; font-family: 'Nunito Sans', sans serif;
	}
	
	.pullquoteBrown {
		display: block; margin: 10px auto; width: 90%; padding: 10px; float: none; color: #7E6E66;
	}
	
	.pullquoteBrown p {
	  font-weight: bold; font-style: italic; font-size: 1.5em; 
	}

	.pullquoteRed {
		display: block; margin: 10px auto; width: 90%; padding: 10px; float: none; color: #E71D13;
	}
	
	.pullquoteRed p {
	  font-weight: bold; font-style: italic; font-size: 1.5em; 
	}
	
	@media only screen and (max-width: 600px) {
	
		.pullquoteBrown p {
		  font-size: .9em; 
		}
		
		.pullquoteRed p {
		  font-size: .9em; 
		}