@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto+Slab:wght@100..900&display=swap'); 
	
	h3 {
		font-family: 'Nunito Sans', Arial, sans-serif; font-weight: bold; font-size: 23px; color: #404144; margin: 40px 0 10px 0;
	}
	
	h4 {
		font-size: 21px !important;
	}

	/* Inline image styles */
	
	.cap {
		color: rgb(206, 47, 39); font-weight: bold; font-family: 'Nunito Sans', Arial, sans-serif; font-size: 16px; padding: 10px; text-align: left;
	}
	
	.cap em {
		color: #404144;
		font-weight: normal;
	}
	
	/*USED FOR IMAGE CREDIT ALIGNED TO THE RIGHT (SEE DF CSS BELOW)*/

  	.smallcap {
    		text-align: right !important; font-size: small;
			font-family: "nunito sans", helvetica, sans-serif;
  	}

	@media only screen and (max-width: 600px) {
    		.smallcap {
		    
		float: none;
		width: 100%;
		margin: 10px auto; 
	   }
        
	}
	/* Circle sidebar */
	
	.protein-light-sidebar {
		width: 425px; height: 425px; background-color: #70750F; color: white; border-radius: 50%; border: 5px solid #c2cb1a;/* Border thickness and color */
		padding: 55px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; font-family: inherit; text-align: left; float: right; margin: 0 0 10px 10px;
	}
	
	.protein-light-sidebar strong {
		text-align: center; color: #FFF; font-family: "Bebas Neue", "Open Sans", sans-serif; font-style: normal; font-size: 65px; font-weight: 400; line-height: .8em; margin: 0 0 18px;
	}
	
	.protein-light-sidebar p {
		margin: 0; font-size: 16px; text-align: center; line-height: 1.3;
	}
	
	.sidebarFullWidth {
		position: relative; left: -30px; margin-right: -60px; color: #000; padding: 20px 40px; width: auto; box-shadow: none; font-family: "Nunito Sans", "Open Sans", sans-serif; background-color: #e5debd; margin-top: 25px; margin-bottom: 25px;
	}
	
	/* Sidebar full-width no bleed on non-hero articles */
	
	.sidebarFullWidth {
		position: relative; left: -30px; margin-right: -60px; color: #000; padding: 20px 40px; width: auto; box-shadow: none; font-family: "Nunito Sans", "Open Sans", sans-serif; background-color: #e5debd; margin-top: 25px; margin-bottom: 25px;
	}
	
	/* 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) {
		/* Circle sidebar */
		.protein-light-sidebar {
			float: none; margin: 0px auto 10px auto;
		}
		.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;
		}
	}
	
	/* 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: #CE2F27; /* 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 */
		}