/******* FONTS **********/
/* BaconbuttyLite*/
@font-face 
{
  font-family: 'BaconbuttyLite';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* BaconbuttyRegular*/
@font-face 
{
  font-family: 'BaconbuttyRegular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* BaconbuttyBold*/
@font-face 
{
  font-family: 'BaconbuttyBold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* BaconbuttyBlack */
@font-face 
{
  font-family: 'BaconbuttyBlack';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Nunito Sans Black'), local('NunitoSans-Black'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8-BM5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/******* VARIABLES **********/
:root 
{


	--BaconbuttyPurple: #022E51;
	--BaconbuttyTeal: #022E51;
	--BaconbuttyRed: #b74803;
  	--BaconbuttyGreen: #022E51;
	--BaconbuttyNavy: #022E51;
	--BaconbuttyBlue: #022E51;
	--BaconbuttyYellow: #022E51;
	--BaconbuttyGrey: #022E51;
  	--BaconbuttyOrange: #cc6d3d;


	--BaconbuttyHeadingSize: 34pt;
	--BaconbuttyHeadingSizeSml: 24pt;

	--BaconbuttySubHeadingSize: 16pt;
	--BaconbuttySubHeadingSizeSml: 12pt;

	--BaconbuttyBodySize: 12pt;
	--BaconbuttyBodySizeSml: 10pt;

	--InfoBoxThree: 31%;
	--InfoBoxThreeInner: 29%;

	--InfoBoxTwo: 47%;
	--InfoBoxTwoInner: 45%;

	--InfoBoxOne: 98%;
	--InfoBoxOneInner: 95%;

	--Full: 100%;
}
/******** Core ********/
html
{	
	width: var(--InfoBoxOne);; 
	scroll-behavior: smooth;
}
body 
{	
	width: var(--InfoBoxOne);; 
	scroll-behavior: smooth;
}
p 
{ 
	margin:0; 
}
/******** ATOMS ********/
.Pre 
{ 
	white-space: pre-line; 
	font-family: "Courier New", Courier, monospace;
	margin-left:10px;
	font-weight:bold;
}
.Normal 
{ 
	color: black; 
}
.White 
{ 
	color: white; }
/******** LINKS ********/
a:link.Normal 
{ 
	color:black; 
}
a:visited.Normal 
{ 
	color:black; 
}
a:hover.Normal
{
	xdisplay:inline-block;
	background-color: var(--BaconbuttyGreen);
	color: white;
	xfont-weight:bold;
	xtext-decoration:none;
}
a:active.Normal 
{ 
	color:black; 
}
a:link.White 
{ 
	color:white; 
}
a:visited.White 
{ 
	color:white; 
}
a:hover.White
{
	display:inline-block;
	background-color:white;
	color: var(--BaconbuttyRed);
	text-decoration:none;
}
a:active.White 
{ 
	color:white; 
}
/******** MAIN LOGO ********/
.BaconbuttyLogo
{
	background-color: var(--BaconbuttyPurple);
	background-image: url("Baconbutty-logo.png");
	background-position: left;
	background-repeat: no-repeat;
	color: white;
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttyHeadingSize);
	height: 150px;
	margin:0 auto;
	margin-bottom:10px;
	width: 300px;
}
/******** HEADERS ********/
/* Used for both page header and section headers */
.BaconbuttyHeaderMain
{
	text-align:center;
	color: var(--BaconbuttyGreen);
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttyHeadingSize);
	margin-bottom:5px;	
}

.BaconbuttyHeaderBox
{
	width: var(--InfoBoxOne); 
	margin:0 auto;
	max-width:1500px; 
	text-align:center;
	margin-bottom:10px;
	margin-top:20px;
}
.BaconbuttySubHeaderBody
{
	color: black;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:20px;
}

.BaconbuttyHeaderWelcome
{
	color: var(--BaconbuttyGreen);
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttyHeadingSizeSml);
	margin-top:20px;
	margin-bottom:5px;
	text-decoration:underline;

}
.BaconbuttyHeaderWelcomeDate
{
	color: var(--BaconbuttyGreen);
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:20px;
}


/* Included for all headers */
.BaconbuttyHeader 
{
	color: black;
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttyHeadingSizeSml);
	margin-bottom:5px;
}
.BaconbuttySubHeader 
{
	color: black;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttySubHeadingSizeSml);
	margin-bottom:5px;
}
.BaconbuttyHeaderTask
{
	color: black;
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: var(--BaconbuttyHeadingSizeSml);
	margin-bottom:5px;
	color: black;
}

.BaconbuttySubHeaderTask 
{
	color: black;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttySubHeadingSizeSml);
	margin-bottom:5px;
}
.BaconbuttyHeaderIntro, 
.BaconbuttyHeaderUpcoming, 
.BaconbuttyHeaderGreen, 
.BaconbuttyHeaderQA, 
.BaconbuttyHeaderFooter
{
	color: var(--BaconbuttyGreen);
}
.BaconbuttySubHeaderIntro, 
.BaconbuttySubHeaderUpcoming, 
.BaconbuttySubHeaderGreen,
.BaconbuttySubHeaderQA, 
.BaconbuttySubHeaderFooter
{
	color: black;
}
.BaconbuttyHeaderPuzzle, 
.BaconbuttyHeaderPuzzles, 
.BaconbuttyHeaderRed
{
	color: var(--BaconbuttyRed);
}
.BaconbuttySubHeaderPuzzle, 
.BaconbuttySubHeaderPuzzles, 
.BaconbuttySubHeaderRed
{
	color: black;
}
.BaconbuttyHeaderDone, 
.BaconbuttyHeaderBlue, 
.BaconbuttyHeaderUpdate
{
	color: var(--BaconbuttyBlue);
}
.BaconbuttySubHeaderDone, 
.BaconbuttySubHeaderBlue, 
.BaconbuttySubHeaderUpdate
{
	color: black;
}
.BaconbuttyHeaderInfo, 
.BaconbuttyHeaderPurple
{
	color: var(--BaconbuttyPurple);
}
.BaconbuttySubHeaderInfo,
.BaconbuttySubHeaderPurple
{
	color: black;
}
.BaconbuttyHeaderInfo, 
.BaconbuttyHeaderNavy
{
	color: var(--BaconbuttyNavy);
}
.BaconbuttyHeaderInfo, 
.BaconbuttyHeaderTeal
{
	color: var(--BaconbuttyTeal);
}
.BaconbuttyHeaderInfo, 
.BaconbuttyHeaderYellow
{
	color: var(--BaconbuttyYellow);
}
/******** MAIN CONTENT ********/
/* Flex Box Storing InfoBox or PuzzleBox */
.BaconbuttyMainContent
{
	order:1; 
	x_width: var(--InfoBoxOne); 
	width: 100%; 
	max-width:1500px; 
	margin:0 auto;
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:space-between;
}
/******** INFOBOX ********/
.BaconbuttyInfoBox 
{	
	background:#fff; 
	border-width:2px;
	border-style:solid;
	border-color: var(--BaconbuttyGreen);
	margin-bottom:20px; 
	padding:8px; 
	position:relative;
	width: var(--InfoBoxOne); 
	max-width:1500px; 
}
/* NOT USED */
.BaconbuttyBoxHeaderNormal, 
.BaconbuttyBoxHeaderBlack
{
	color: black;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyBoxHeaderWhite
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyBoxHeaderDate, 
.BaconbuttyBoxHeaderDateBlack, 
.BaconbuttyBoxHeaderDateNormal
{
	color: black;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.BaconbuttyBoxHeaderDateWhite 
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxQA
{	
	border-color: var(--BaconbuttyGreen);
	margin-bottom:10px; 
	padding:4px; 
}
.BaconbuttyBoxHeaderQA
{
	color: var(--BaconbuttyGreen);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:3px;
}
.BaconbuttyBoxHeaderDateQA
{
	color: black;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
	margin-bottom:3px;
}
.BaconbuttyBoxBodyTextQA
{
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
	margin-bottom:3px;
}
.BaconbuttyInfoBoxIntro, 
.BaconbuttyInfoBoxGreenFill,
.BaconbuttyInfoBoxFooter
{	
	border-color: var(--BaconbuttyGreen);
	background-color: var(--BaconbuttyGreen);
}
.BaconbuttyBoxHeaderGreenFill,
.BaconbuttyBoxHeaderIntro, 
.BaconbuttyBoxHeaderFooter
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxUpcoming, 
.BaconbuttyInfoBoxGreen
{	
	border-color: var(--BaconbuttyGreen);
}
.BaconbuttyBoxHeaderUpcoming, 
.BaconbuttyBoxHeaderGreen
{

	color: var(--BaconbuttyGreen);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxUpdate, 
.BaconbuttyInfoBoxBlueFill
{
	border-color: var(--BaconbuttyBlue);
	background-color: var(--BaconbuttyBlue);
}
.BaconbuttyBoxHeaderBlueFill,
.BaconbuttyBoxHeaderUpdate
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxDone, 
.BaconbuttyInfoBoxBlue, 
.BaconbuttyInfoBoxDoneMain
{	
	border-color: var(--BaconbuttyBlue);
}
.BaconbuttyBoxHeaderDone, 
.BaconbuttyBoxHeaderDoneMain, 
.BaconbuttyBoxHeaderBlue
{
	color: var(--BaconbuttyBlue);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxRedFill
{	
	border-color: var(--BaconbuttyRed);
	background-color: var(--BaconbuttyRed);
}
.BaconbuttyBoxHeaderRedFill
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxPuzzles, 
.BaconbuttyInfoBoxRed
{	
	border-color: var(--BaconbuttyRed);
}

/* Reserved for Special Puzzle Box*/
/* .BaconbuttyInfoBoxPuzzle*/
.BaconbuttyBoxHeaderPuzzle, 
.BaconbuttyBoxHeaderPuzzles, 
.BaconbuttyBoxHeaderRed
{
	color: var(--BaconbuttyRed);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
	width:98%;
}
.BaconbuttyInfoBoxTask, 
.BaconbuttyInfoBoxYellowFill
{	
	border-color: var(--BaconbuttyYellow);
	background-color: var(--BaconbuttyYellow);
}
.BaconbuttyBoxHeaderTask,
.BaconbuttyBoxHeaderYellowFill
{
	color: black;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxYellow
{	
	border-color: var(--BaconbuttyYellow);
}
.BaconbuttyBoxHeaderYellow
{

	color: var(--BaconbuttyYellow);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxNavyFill
{	
	border-color: var(--BaconbuttyNavy);
	background-color: var(--BaconbuttyNavy);
}
.BaconbuttyBoxHeaderNavyFill
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxNavy
{	
	border-color: var(--BaconbuttyNavy);
}
.BaconbuttyBoxHeaderNavy
{

	color: var(--BaconbuttyNavy);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxTealFill
{	
	border-color: var(--BaconbuttyTeal);
	background-color: var(--BaconbuttyTeal);
}
.BaconbuttyBoxHeaderTealFill
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxTeal
{	
	border-color: var(--BaconbuttyTeal);
}
.BaconbuttyBoxHeaderTeal
{

	color: var(--BaconbuttyTeal);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxPurpleFill
{	
	border-color: var(--BaconbuttyPurple);
	background-color: var(--BaconbuttyPurple);
}
.BaconbuttyBoxHeaderPurpleFill
{
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxInfo, 
.BaconbuttyInfoBoxPurple
{	
	border-color: var(--BaconbuttyPurple);
}
.BaconbuttyBoxHeaderInfo, 
.BaconbuttyBoxHeaderPurple
{

	color: var(--BaconbuttyPurple);
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttySubHeadingSize);
	margin-bottom:5px;
}
.BaconbuttyInfoBoxTOC
{	
	border-color: var(--BaconbuttyGreen);
	max-width:1000px;
	width:1000px;
	padding:20px;
	margin:0 auto; 
	margin-bottom:10px; 
}
/******** INFOBOX | COLLAPSE BOX ********/
/* .BaconbuttyCollapseBox  *:nth-child(n+2) */
.BaconbuttyCollapseBoxShow > *:first-child
{
	cursor:pointer;
}
.BaconbuttyCollapseBoxShow > *
{
	x_display:block;
	max-height:4000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.BaconbuttyCollapseBoxHide > *:first-child
{
	cursor:pointer;
}
.BaconbuttyCollapseBoxHide > *:not(:first-child)
{
	x_display:none;
	overflow:hidden;
	max-height:0px;
	margin:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}
.BaconbuttyInfoBoxPuzzle
{
	border-color: var(--BaconbuttyRed);
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:space-between;
	width: var(--InfoBoxOne); 
	max-width:1500px; 
}
.BaconbuttyPuzzleLeftSide 
{
	width: width: var(--InfoBoxOneInner);
}
.BaconbuttyPuzzleRightSide 
{
	width: width: var(--InfoBoxOneInner);
}
.BaconbuttyPuzzleQuestionHeading
{
	background-color: var(--BaconbuttyRed);
	color:white;
	cursor:pointer;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.BaconbuttyPuzzleAnswerHeading
{
	background-color: var(--BaconbuttyGreen);
	color:white;
	cursor:pointer;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.BaconbuttyPuzzleReasonHeading
{
	background-color: var(--BaconbuttyNavy);
	color:white;
	cursor:pointer;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.BaconbuttyPuzzleText
{
	overflow:hidden;
	max-height:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}

/* Container box for the reveal*/
.BaconbuttyPuzzleTextShow
{
	display:block;
	max-height:10000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.BaconbuttyRadio
{
	cursor: pointer;
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin:5px;
	x_border:1px solid light-grey;
	max-width:400px;
}

.BaconbuttyRadio > label
{
	cursor: pointer;
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
}
.BaconbuttyOptionWrong
{
	background-color: #ECC5C0;
	width:95%;
	padding:10px;
	margin:10px;
	display:none;
	color:white;
}
.BaconbuttyOptionRight
{
	background-color: lightgreen;
	width:95%;
	padding:10px;
	margin: 10px;
	display:none;
}
/******** Box | Content ********/
/******** Box | Content | Flex  ********/
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */

/* Radio,Flex, Img max width 300 so ensure 3 by limiting to 1000px */

.BaconbuttySimpleFlex
{
	border-color: none;
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:flex-start;
	x_justify-content:space-between;
	x_justify-content:center;
	x_justify-content:justify-content;
	max-width:2000px; 
	gap:3px;
}

/* 
{_FLEX }
Use for images gallery, quotes, etc within a box 
*/
.BaconbuttySimpleFlexCol
{
	border-color: none;
	display:flex; 
	flex-direction:column; 
	flex-wrap:wrap; 
	justify-content:flex-start;
	x_justify-content:justify-content;
	max-width:950px; 
	height:300px;
}


.BaconbuttySimpleFlexCol100
{
	height:100px;
}

.BaconbuttySimpleFlexCol200
{
	height:200px;
}

.BaconbuttySimpleFlexCol300
{
	height:300px;
}

.BaconbuttySimpleFlexCol400
{
	height:400px;
}

.BaconbuttySimpleFlexCol500
{
	height:500px;
}

.BaconbuttyComplexFlexRow
{
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	x_justify-content:space-between; 
	x_justify-content:center;
	justify-content:flex-start;
	gap:5px;
}

.BaconbuttyFlexTOC
{
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:center;
	gap:5px;
	width:100%;
}

.BaconbuttyFlexTOCCol
{
	width:30%; 
	padding:5px; 
	text-align:center;
}


/******** Box | Content | Body Text ********/
.BaconbuttyBoxBodyText
{
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}

.BaconbuttyBoxBodyTextNormal, 
.BaconbuttyInfoBoxBodyTextBlack
{
	xcolor: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}

.BaconbuttyBoxBodyTextNormal a
{
	font-weight:bold;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}


.BaconbuttyBoxBodyTextComment
{
	background-color: var(--BaconbuttyGrey);
	margin-left:20px;
	margin-top:5px;
	margin-right:5px;
	margin-bottom:5px;
	padding: 10px;
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
}

.BaconbuttyBoxBodyTextWhite
{
	color: white;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.BaconbuttyBoxBodyTextBoldNormal, .BaconbuttyBoxBodyTextBoldBlack 
{
	color: black;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.BaconbuttyBoxBodyTextBoldWhite
{
	color: white;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
/* https://css-tricks.com/adaptive-photo-layout-with-flexbox/*/

.BaconbuttyImg
{
	display:block;
	width: 95%;
	max-width:400px;
	padding-left: 0px;

	x_box-shadow: 5px 5px 15px 5px grey;
	x_align-self: left;
}

.BaconbuttyImg > img { width:100%; }
.BaconbuttyVid
{
	display:block;
	width: 95%;
	max-width:400px;
	margin-left: 0px;
	margin-bottom: 10px;
}

/******** Box | Content | Quotes  ********/
.BaconbuttyBodyTextQuote
{
	color: black;
	background-color: lightyellow;
	font-family: 'Courier New', sans-serif;
	margin-bottom:10px;
	margin-left:0px;
	padding:10px;
}
.BaconbuttyBodyTextQuoteNormal, 
.BaconbuttyBodyTextQuoteBlack
{
	color: black;
	background-color: lightyellow;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
	font-style:italic;
	width: 300px;
	margin-bottom:10px;
	margin-left:10px;
	padding:10px;
}
.BaconbuttyBodyTextQuoteWhite
{
	color: white;
	border:1px solid white;
	font-family: 'Courier New', sans-serif;
	margin:5px;
	padding:10px;
}

.BaconbuttyBodyTextQuoteWhite
{
	color: white;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
	font-style:italic;
	width: 300px;
	margin-bottom:10px;
	margin-left:10px;
}
.BaconbuttyBodyTextLetter
{
	color: black;
	background-color: lightyellow;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: 12pt;
	max-width: 500px;
	padding:10px;
	margin-bottom:10px;
	margin-left:0px;
}
/******** Box | Content | Table ********/

/*** https://css-tricks.com/complete-guide-table-element/ ***/
.BaconbuttyBoxTable 
{
	border-collapse: collapse;
	border-spacing: 0;
	border:1px solid gray;
	table-layout: fixed;
	vertical-align: top;	
	width:95%;
}
.BaconbuttyBoxTable td
{
	 vertical-align: middle;
	 border:1px solid gray;
	padding:5px;

}
.BaconbuttyBoxTable img
{
	 max-width:100px;	
}
.BaconbuttyBoxTable td:nth-child(2) 
{
		
}
/******** Box | Content | TOC ********/
.BaconbuttyBoxBodyTextTOC1
{
	color: black;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.BaconbuttyBoxBodyTextTOC2
{
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySizeSml);
	margin-bottom:5px;
	padding-left:5px;
}
.BaconbuttySubBox
{
	border: 1px solid var(--BaconbuttyNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
/******** Content | Box | QA ********/
.BaconbuttySimpleQABox
{
	xbackground-color: var(--BaconbuttyTeal);
	margin:5px 0 5px 0;
	padding:5px;
	xborder:2px solid var(--BaconbuttyTeal);
}

/* QA Box (e.g. for jokes) */
.BaconbuttySimpleQuestionBox
{
	background-color: var(--BaconbuttyTeal);
	padding:5px;
}
.BaconbuttySimpleQuestionText
{
	color: white;
	cursor: pointer;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:0px;
}
.BaconbuttySimpleAnswerBox
{
	background-color: var(--BaconbuttyGrey);
	overflow:hidden;
	max-height:0px;
	opacity:0;
	padding:5px;
	transition: opacity 0.25s, max-height 0.5s;
}
.BaconbuttySimpleAnswerBoxShow
{
	display:block;
	max-height:2000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.BaconbuttySimpleAnswerText
{
	color: black;
	font-family: 'BaconbuttyRegular', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
/******** Content | Box | Choice 



<div class="BaconbuttyChoiceBox">
	<div  class="BaconbuttyChoiceItem">
		<p class="BaconbuttyChoiceHeading">Yes</p>
		<div class="BaconbuttyChoiceBody">
			<p class="BaconbuttyBodyTextNormal">Sheep – with the letter "H" replaced by the letter "L"</p>
		</div>
	</div>
	<div  class="BaconbuttyChoiceItem">
		<p class="BaconbuttyChoiceHeading">No</p>
		<div class="BaconbuttyChoiceBody">
			<p class="BaconbuttyBodyTextNormal">Nope!</p>
		</div>
	</div>
</div>


********/
.BaconbuttyChoiceBox
{
	border: 1px solid var(--BaconbuttyNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
.BaconbuttyChoiceItem:not(:last-child) 
{
	margin-bottom: 5px;
}
.BaconbuttyChoiceHeading
{
	cursor: pointer;
	background-color: var(--BaconbuttyNavy);
	padding: 5px;
	color: white;
	font-family: 'BaconbuttyBold', sans-serif;
	font-size: var(--BaconbuttyBodySize);
}
.BaconbuttyChoiceBody
{
	background-color: var(--BaconbuttyGrey);	
	margin-top: 5px;
	padding: 5px;
	xdisplay: none;

	overflow:hidden;
	max-height:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}
.BaconbuttyChoiceBodyShow
{
	display:block;
	max-height:2000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.BaconbuttyGuessBox
{
}

.BaconbuttyGuessBox *
{
	color: black;
	font-family: 'BaconbuttyLite', sans-serif;
	font-size: var(--BaconbuttyBodySize);
	margin-bottom:5px;
}
.ScoutGuessItem
{
	border: 1px solid var(--BaconbuttyNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
/******** Content | Box | Video ********/
.embed-container 
{ 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto; 
}
.embed-container iframe, .embed-container object, .embed-container embed 
{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
.embed-container-outer
{ 
	width:70%;
	x_margin: 0 auto;
	x_border:1px solid red;
}

.embed-container-inner
{
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	xoverflow: hidden;
	xborder:1px solid blue;
}

.embed-container-inner iframe
{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 	
}

.embed-container-inner > .embed-container-toggle
{ 
	cursor:pointer;
	font-family: 'BaconbuttyRegular', sans-serif;
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 150px; 
	height: 20px;
	background-color: red;
	color:white;
	z-index:2;
}
.video-embed
{ 
	position: relative; 
	width:95%;
	max-width:500px;
	x_margin: 0 auto;
}

.BaconbuttySimpleFlex .video-embed,
.BaconbuttyComplexFlexRow .video-embed
{
	margin:0;
}


.video-embed-toggle
{ 
	text-align:right;
	cursor:pointer;
	font-family: 'BaconbuttyRegular', sans-serif;
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 60px; 
	height: 20px;
	background-color: red;
	color:white;
	z-index:2;
}

.video-embed video
{ 
	width:100%;
	object-fit:fill;
}

.video-embed-title
{ 
	x_cursor:pointer;
	font-family: 'BaconbuttyRegular', sans-serif;
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 150px; 
	height: 20px;
	background-color: var(--BaconbuttyBlue);
	color:white;
	z-index:3;
}
/******** Content | Box | Escape Room ********/
.AnswerInput {
	font-family: 'BaconbuttyBlack', sans-serif;
	font-size: 16px;
	padding:5px;
	border-radius:5px;
}
.AnswerButton {
	color:white;
	cursor:pointer;
	display:inline-block;
	font-size: 16px;
	margin-left:5px;
	padding:5px;
	background-color:var(--BaconbuttyTeal);
	border:1px solid var(--BaconbuttyTeal);
	border-radius:3px;
	text-align:center;
	font-family: 'BaconbuttyBlack', sans-serif;
}
.AnswerButton:hover{
	color:white;
	cursor:pointer;
	display:inline-block;
	font-size: 16px;
	margin-left:5px;
	padding:5px;
	background-color:var(--BaconbuttyRed);
	border:1px solid var(--BaconbuttyRed);
	border-radius:3px;
	text-align:center;
	font-family: 'BaconbuttyBlack', sans-serif;
}
.AnswerWrong {
	margin:10px;
	color:var(--BaconbuttyRed);
	font-size: 30px;
	padding:10px;
	border:3px solid var(--BaconbuttyRed);
	border-radius:3px;
	width:300px;
	font-family: 'BaconbuttyBlack', sans-serif;
	text-align:center;
}
.AnswerCorrect {
	margin:10px;
	color:var(--BaconbuttyGreen);
	font-size: 30px;
	padding:10px;
	border:3px solid var(--BaconbuttyGreen);
	border-radius:3px;
	width:300px;
	font-family: 'BaconbuttyBlack', sans-serif;
	text-align:center;
}
.BaconbuttyEscapeStage 
{
	display: none;
}
.BaconbuttyImageCoverContainer
{
	border:1px solid black;
	position:relative;
	width:95%; 
}
.BaconbuttyImageCoverContainer > img
{
	width:100%;
}
.BaconbuttyImageCover
{
	background-color: var(--BaconbuttyBlue); 
	border:1px solid white;
	color:white;
	cursor:pointer;
	display:table-cell;
	font-weight:bold;
	opacity:100;
	position:absolute;
	transition: opacity 0.25s;
	vertical-align:middle;
}
.BaconbuttyImageUncover
{  
	background-color: var(--BaconbuttyBlue); 
	border:1px solid white;
	color:white;
	cursor:pointer;
	display:table-cell;
	font-weight:bold;
	opacity:0;
	position:absolute;
	transition: opacity 1s;
}
.BaconbuttyImageCover > p
{
	height:100%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.BaconbuttyImageUncover > p
{
	height:100%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.BaconbuttyCodeEditor
{
	height:300px; 
	margin-bottom:10px;
}
.BaconbuttyCodeOutput
{
	height:300px; 
	width:90%; 
	padding:5px; 
	background-color:lightgrey; 	
	overflow:auto;
}

/******** FLEX | SCREEN WIDTH  ********/
@media only screen and (max-width: 3000px) 
{
	/*********/
	/* Boxes */
	/*********/

	/* Three */
	.BaconbuttyInfoBox,
	.BaconbuttyInfoBoxBlue, 	
	.BaconbuttyInfoBoxDone, 
	.BaconbuttyInfoBoxDoneMain, 
	.BaconbuttyInfoBoxRed,		
	.BaconbuttyInfoBoxPuzzles, 
	.BaconbuttyInfoBoxYellow,
	.BaconbuttyInfoBoxNavy,
	.BaconbuttyInfoBoxTeal,
	.BaconbuttyInfoBoxPurple,
	.BaconbuttyInfoBoxInfo 
	{ width: var(--InfoBoxThree); }

	/* Two*/
	.BaconbuttyInfoBoxGreenFill,
	.BaconbuttyInfoBoxIntro, 
	.BaconbuttyInfoBoxGreen,
	.BaconbuttyInfoBoxUpcoming, 
	.BaconbuttyInfoBoxBlueFill,
	.BaconbuttyInfoBoxUpdate, 
	.BaconbuttyInfoBoxRedFill,
	.BaconbuttyInfoBoxYellowFill,
	.BaconbuttyInfoBoxTask,
	.BaconbuttyInfoBoxNavyFill,
	.BaconbuttyInfoBoxTealFill,
	.BaconbuttyInfoBoxPurpleFill,
	.BaconbuttyInfoBoxFooter
	{ width: var(--InfoBoxTwo);}

	/* Manual Three */
	.ManualThree { width: var(--InfoBoxThree); }

	/* Two Override */
	.BaconbuttyInfoBox:nth-child(1):nth-last-child(2):not(.ManualOne) { width: var(--InfoBoxTwo); }
	.BaconbuttyInfoBox:nth-child(2):nth-last-child(1):not(.ManualOne) { width: var(--InfoBoxTwo); }

	/* One */
	.BaconbuttyInfoBoxPuzzle { width: var(--InfoBoxOne); }

	/* Manual Two*/
	.ManualTwo { width: var(--InfoBoxTwo);}

  	/* One Override */
	.BaconbuttyInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }


	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.BaconbuttyPuzzleLeftSide { width: var(--InfoBoxTwo); }
	.BaconbuttyPuzzleRightSide { width: var(--InfoBoxTwo); }

	.BaconbuttySimpleFlex { width:var(--InfoBoxOneInner); }
	.BaconbuttySimpleFlex > * { width:var(--InfoBoxThree); min-width:200px;}

	/* Satisfies both */
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(2):nth-last-child(1),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxTwo); 
		min-width:200px;
	}

	.BaconbuttySimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.BaconbuttySimpleFlex { width:95%; }*/
	/*.BaconbuttySimpleFlex .BaconbuttyImg 	{ width:300px; }*/

	.BaconbuttyComplexFlexRow { width:var(--InfoBoxOneInner); }
	.BaconbuttyComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="2"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="3"] > * { width:var(--InfoBoxThree); min-width:200px; max-width:500px;}

	/***************/
	/* TOC */
	/***************/

	.BaconbuttyInfoBoxTOC { width : 1000px;}
	.BaconbuttySimpleFlexCol { width: 950px; margin:0 auto;} 
	.BaconbuttySimpleFlexCol { height: 300px; } 
	.BaconbuttySimpleFlexCol100{ height:100px; }
	.BaconbuttySimpleFlexCol200{ height:200px; }
	.BaconbuttySimpleFlexCol300 { height:300px; }
	.BaconbuttySimpleFlexCol400 { height:400px }
	.BaconbuttySimpleFlexCol500 { height:500px; }
}
@media only screen and (max-width: 1200px) 
{
	/*********/
	/* Boxes */
	/*********/
	
	/* Two (Was Three)*/
	.BaconbuttyInfoBox,
	.BaconbuttyInfoBoxBlue, 	
	.BaconbuttyInfoBoxDone, 
	.BaconbuttyInfoBoxDoneMain, 
	.BaconbuttyInfoBoxRed,		
	.BaconbuttyInfoBoxPuzzles, 
	.BaconbuttyInfoBoxYellow,
	.BaconbuttyInfoBoxNavy,
	.BaconbuttyInfoBoxTeal,
	.BaconbuttyInfoBoxPurple,
	.BaconbuttyInfoBoxInfo
	{ width: var(--InfoBoxTwo); }

	/* Two (No Change)*/
	.BaconbuttyInfoBoxGreenFill,
	.BaconbuttyInfoBoxIntro, 
	.BaconbuttyInfoBoxGreen,
	.BaconbuttyInfoBoxUpcoming, 
	.BaconbuttyInfoBoxBlueFill,
	.BaconbuttyInfoBoxUpdate, 
	.BaconbuttyInfoBoxRedFill,
	.BaconbuttyInfoBoxYellowFill,
	.BaconbuttyInfoBoxTask,
	.BaconbuttyInfoBoxNavyFill,
	.BaconbuttyInfoBoxTealFill,
	.BaconbuttyInfoBoxPurpleFill,
	{ width: var(--InfoBoxTwo);}

	/* Manual Three (Now Two) */
	.ManualThree { width: var(--InfoBoxTwo); }

	/* Two Override */
	.BaconbuttyInfoBox:nth-child(1):nth-last-child(2):not(.ManualOne) { width: var(--InfoBoxOne); }
	.BaconbuttyInfoBox:nth-child(2):nth-last-child(1):not(.ManualOne) { width: var(--InfoBoxOne); }

	/* One */
	.BaconbuttyInfoBoxPuzzle, 
	.BaconbuttyInfoBoxFooter	
	{ width: var(--InfoBoxOne); }
 
	/* Manual Two*/
	.ManualTwo { width: var(--InfoBoxTwo);}

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }

  	/* One Override */
	.BaconbuttyInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }


	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.BaconbuttyPuzzleLeftSide { width: var(--InfoBoxOne); }
	.BaconbuttyPuzzleRightSide { width: var(--InfoBoxOne); }

	.BaconbuttySimpleFlex { width:var(--InfoBoxOneInner); }
	.BaconbuttySimpleFlex > * { width:var(--InfoBoxTwo); min-width:200px; }

	/* Satisfies both */
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(2):nth-last-child(1),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxOne); 
		min-width:200px;
	}

	.BaconbuttySimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.BaconbuttySimpleFlex { width:95%; }*/
	/*.BaconbuttySimpleFlex .BaconbuttyImg 	{ width:300px; }*/


	.BaconbuttyComplexFlexRow { width:var(--InfoBoxOneInner); }
	.BaconbuttyComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="2"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="3"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}


	/***************/
	/* TOC */
	/***************/

	.BaconbuttyInfoBoxTOC { width : 750px;}
	.BaconbuttySimpleFlexCol { width: 700px; margin:0 auto;} 
	.BaconbuttySimpleFlexCol { height:600px; } 
	.BaconbuttySimpleFlexCol100{ height:200px; }
	.BaconbuttySimpleFlexCol200{ height:400px; }
	.BaconbuttySimpleFlexCol300 { height:500px; }
	.BaconbuttySimpleFlexCol400 { height:800px }
	.BaconbuttySimpleFlexCol500 { height:1000px; }

}
@media only screen and (max-width: 800px) 
{
	/*********/
	/* Boxes */
	/*********/
	
	/* One (Was Three)*/
	.BaconbuttyInfoBox,
	.BaconbuttyInfoBoxBlue, 	
	.BaconbuttyInfoBoxDone, 
	.BaconbuttyInfoBoxDoneMain, 
	.BaconbuttyInfoBoxRed,		
	.BaconbuttyInfoBoxPuzzles, 
	.BaconbuttyInfoBoxYellow,
	.BaconbuttyInfoBoxNavy,
	.BaconbuttyInfoBoxTeal,
	.BaconbuttyInfoBoxPurple,
	.BaconbuttyInfoBoxInfo
	{ width: var(--InfoBoxOne); }

	/* One(Was Two)*/
	.BaconbuttyInfoBoxGreenFill,
	.BaconbuttyInfoBoxIntro, 
	.BaconbuttyInfoBoxGreen,
	.BaconbuttyInfoBoxUpcoming, 
	.BaconbuttyInfoBoxBlueFill,
	.BaconbuttyInfoBoxUpdate, 
	.BaconbuttyInfoBoxRedFill,
	.BaconbuttyInfoBoxYellowFill,
	.BaconbuttyInfoBoxTask,
	.BaconbuttyInfoBoxNavyFill,
	.BaconbuttyInfoBoxTealFill,
	.BaconbuttyInfoBoxPurpleFill,
	.BaconbuttyInfoBoxFooter
	{ width: var(--InfoBoxOne);}

	/* Manual Three (Now One) */
	.ManualThree { width: var(--InfoBoxOne); }

	/* One */
	.BaconbuttyInfoBoxPuzzle { width: var(--InfoBoxOne); }

	/* Manual Two (Now One)*/
	.ManualTwo { width: var(--InfoBoxOne);}

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }

  	/* One Override */
	.BaconbuttyInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }

	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.BaconbuttyPuzzleLeftSide { width: var(--InfoBoxOne); }
	.BaconbuttyPuzzleRightSide { width: var(--InfoBoxOne); }

	.BaconbuttySimpleFlex { width:var(--InfoBoxOneInner); }
	.BaconbuttySimpleFlex > * { width:var(--InfoBoxOne); min-width:200px; }

	/* Satisfies both */
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyImg:nth-child(2):nth-last-child(1),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(1):nth-last-child(2),
	.BaconbuttySimpleFlex .BaconbuttyVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxOne); 
		min-width:200px;
	}

	.BaconbuttySimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.BaconbuttySimpleFlex { width:95%; }*/
	/*.BaconbuttySimpleFlex .BaconbuttyImg 	{ width:300px; }*/

	.BaconbuttyComplexFlexRow { width:var(--InfoBoxOneInner); }
	.BaconbuttyComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="2"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.BaconbuttyComplexFlexRow[cols="3"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}

	.BaconbuttyInfoBoxTOC { width:98%; padding:5px;}
	.BaconbuttySimpleFlexCol { width:90%; margin:0 auto;} 
	.BaconbuttySimpleFlexCol { height:auto; }
	.BaconbuttySimpleFlexCol100{ height:auto; }
	.BaconbuttySimpleFlexCol200{ height:auto; }
	.BaconbuttySimpleFlexCol300{ height:auto; }
	.BaconbuttySimpleFlexCol400{ height:auto; }
	.BaconbuttySimpleFlexCol500{ height:auto; }

}
/*'' https://medium.com/better-programming/introduction-to-nth-child-css-selector-9a94c9f00268#:~:text=With%20combined%20child%20ranges%2C%20you%20can%20apply%20multiple,accomplish%20this%20by%20writing%20a%20combined%20nth-child%20selection.
'' It satisfies both criteria*/

.test:nth-child(1):nth-last-child(2)
{
	color:red;
}
.test:nth-child(2):nth-last-child(1)
{
	color:red;	
}
.SquareTable 
{
	box-sizing:border-box;
	width: 200px;
}

/* https://absolide.tumblr.com/post/7317210512/full-css-fluid-squares*/
.SquareTable *
{
	font-size:20pt;
	box-sizing:border-box;
}
.SquareTable td
{
	width: 25%;
	position: relative;
	padding-bottom:25%; /* % is based on the tr wierdly */

	height:0;

	/*
    &:after, &:before {
        content: '';
	}
	*/

	/*
    display: block;
    padding-bottom: calc(25% - 0.25em);
	*/
}
.SquareTable td:after 
{
	content: '';

	/*
	display: block;
	margin-top: 100%;
	*/
}
.SquareTable td > div 
{
	border: 4px solid var(--BaconbuttyTeal); 
	color:black;
	cursor:pointer;	
	font-weight:bold;
	opacity:100;

	/*
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	*/
	
	height:100%;
	width:100%;
	
	position: absolute;
	transition: opacity 0.25s;

	text-align:center;	
}
.SquareTable td > div:hover
{
	border: 4px solid var(--BaconbuttyRed);
}
.SquareTable td > div > div
{
	display:table;
	height:100%;
	width:100%;
}
.SquareTable td > div > div:nth-of-type(2)
{
	background-color: var(--BaconbuttyBlue);
	opacity:0.5;
}
.SquareTable td > div > div:nth-of-type(3)
{
	background-color: var(--BaconbuttyRed);
	opacity:0.5;
}
.SquareTable td > div > div > div
{
	display:table-cell;
	height:100%;
	width:100%;
	vertical-align:middle;	
}
/********  ********/