.rollOver:hover { 
  border: 2px solid black;
  box-sizing: border-box;
}
.withOutline {
	outline-color: gold;
	outline-style: outset;
	outline-width: 2px;
	outline-offset: -2px;
}
.withOutline:hover {
	border: 5px solid black;
	box-sizing: border-box;
}
.roundImage {
	border-radius: 50%;
}
.piece {
	position: relative;
}
.carpetPieceContainer {
  position: relative;
  float: left;
  border: 3px solid white;
  box-sizing: border-box;
}
.carpetWrapper {
	overflow: auto;
	padding-bottom: 0.5rem;
	width: 100%;
	//max-width: 660px;
	margin: auto;
}
.zebraWrapper {
	width: 83.33%; 
	overflow: auto;
	//max-width: 550px;
	margin: auto;
}
.zebraPiece {
	width: 20%;
}
.carpetPiece {
	width: 16.66%;
}
.carpetPieceContainer:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.carpetPieceContainer img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}
.nameCentered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center; 
	width: 100%;
	overflow: hidden;
	font-size: 12px;
	line-height: 16px;
} 
.nameImg { 
  border: 1px solid grey;
  box-sizing: border-box;
  opacity: 0.4;
}
.portrait {
	border-radius: 75px;
}
.imageContainer {
    position: relative;
	width: 150px;
}
.imageContainer::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.imageContainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.fc_header {
	font-variant: small-caps; 
	text-align: center;
	margin-top: 0px;
}
.fc_right_header {
	font-size: 2em;
	line-height: 1;
}
.fc_info {
	display: inline-block;
	width: 100%;
	margin: auto;
	text-align: center;
	padding-top: 0.5em;
	font-variant: all-petite-caps;
}
.fc_info_progress {
	font-size: 1rem;
}
.fc_info_ended {
	font-size: 1.2em;
}
.fc_pad {
	padding: 0 5px;
}
.fc_border {
	padding: 10px;
	box-shadow: inset 0 0 15px 0 goldenrod;
}
.fc_potd_text {
	padding: 0.5rem 0;
}
.fc_fullwidth {
	width: 100% !important;
}
.fc_text_centered {
	text-align: center; 
}
.fc_piecesWrapper {
	//overflow: auto;
}
.fc_ninePiece {
	width: 11.11%;
}
.fc_threePiece {
	width: 33.33%;
}
.fc_piecesContainer {
  position: relative;
  float: left;
  box-sizing: border-box;
  border: transparent solid 5px;
}
.fc_piecesContainer:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}
.fc_piecesContainer img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

.fc_piecesContainer .fc_tooltiptext {
  visibility: hidden;
  background-color: goldenrod;
  color: black;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  min-width: 100%;
  font-weight: bold;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 95%;
  left: 50%;
  transform: translate(-50%, 0);

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.fc_piecesContainer .fc_tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: goldenrod transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.fc_piecesContainer:hover .fc_tooltiptext {
  visibility: visible;
  opacity: 0.9;
}
.fc_golden_ridge {
		outline: goldenrod 10px ridge;
}
/* controls */
.task_container {
	margin-top: 10px;
	overflow: auto;
}
.task_link {
	color: goldenrod;
	text-decoration: none;
	text-align: center;
}
.task_icon {
	width:	20px;
	color: goldenrod;
}
.task_text {
	color: black;
}
.pad_top {
	padding-top: 5px;
}
.chbox {
	float: left;
}
.chbox_label {
	float: left;
	width: 90%;
	padding-left: 5px;
}
.hidden {
	visibility: hidden;
}
.error {
	color: red;
	font-weight: bold;
}
.fc_link{
	color: goldenrod;
}
.fc_instr_container {
	overflow: auto; 
	padding: 20px 0;
}
.fc_instr_title {
	color: goldenrod; 
	font-size: x-large;
	font-weight: bold;
	line-height: normal;
	text-align: center;
}
.fc_instr_col4 {
	width: 25%; 
	float: left; 
}
.fc_instr_icon {
	color: goldenrod; 
	float: left; 
	padding-right: 5px; ;
}
.fc_icon_lar {
	font-size: 44px; 
}
.fc_instr_text {
	padding-right: 10px; 
	vertical-align: top;
}
.fc_nowrap {
	white-space: nowrap;
}
.fc_ex_instr_container {
	margin: auto; 
	width: 50%; 
	min-width: 210px; 
	text-align: center; 
	overflow: hidden; 
}
.fc_ex_instr_img {
	width: 210px; 
	height: 150px; 
	max-width: 100%;
}
.fc_pad_bot_med {
	padding-bottom: 10px;
}
.fc_pad_bot_lar {
	padding-bottom: 20px;
}
.fc_pad_top_med {
	padding-top: 10px;
}
.fc_icon_med {
	font-size: 22px;
}
.fc_modal {
	/* override modal defaults */
	margin: auto !important;
	left: 0px !important;
	right: 0px !important;
	z-index: -1 !important;
	background-color: black !important;
}
.fc_modal_horizontal {
	width: 420px !important;
	max-width: 90%;
}
.fc_modal_vertical {
	width: 300px !important;
	max-width: 90%;
}
.fc_modal.in {
	/* override modal defaults */
	z-index: 1041 !important;
}
.fc_modal_close {
	position: absolute;
	right: 0px;
	cursor: pointer;
}
.fc_description {
	color: goldenrod;
	padding: 5px;
	text-align: center;
	font-size: larger;
}
.fc_bullet_container {
	text-align: center;
}
.fc_bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
	background: lightgray;
	border-radius: 5px;
	margin: 10px 5px;
}
.fc_bullet.active {
	background: goldenrod;
}
.fc_example {
	position: absolute;
}
.fc_vertical {
	width: 300px;
	max-width: 100%;
	height: 420px;
}
.fc_horizontal {
	width: 420px;	
	max-width: 100%;
	height: 300px;
}
.fc_hidden {
	display: none;
}
.transition {
}
.fc_subtitle {
	font-weight: bold;
    font-size: medium;
    padding-bottom: 0.5rem;
}
.fc_subtitle_info {
	color: goldenrod;
	padding-bottom: 5px;
}
.fc_centre {
	text-align: center;
}
.fc_mod {
	border: solid black 2px;
	padding: 5px;
	margin: 5px 0;
	overflow: auto;
}
.fc_mod_title {
	font-variant: small-caps;
	color: goldenrod;
}
.fc_mod_item  {
	padding: 5px 0;
}
.fc_mod_bold {
	font-weight: bold;
}
.fc_mod_text {
	padding: 0 5px;
}
.fc_mod_icon {
	color: goldenrod;
}
.fc_mod_pending {
	color: red;
}
.fc_mod_done {
	color: green;
}
.fc_rule_container {
	width: 100%;
	height: 16px;
}
.fc_rule {
	border: 1px solid goldenrod;
	width: 90%;
	box-shadow: goldenrod 0px 0px 5px;
	margin: 3px auto 0px auto;
}
.fc_small_img {
	width: 48%;
	padding: 1%;
	float: left;
}
.fc_intro_text {
	font-size: 130%;
}	
.fc_intro {
	text-align: center;
	padding: 0 0 2rem 0;
}
	
	
@media only screen and (min-width: 700px) {
	.fc_instr_col4 {
		display: table;
	}
	.fc_instr_text {
		display: table-cell;
	}
	.fc_intro {
		padding: 0 30px 2rem 30px;
	}
}
@media only screen and (max-width: 768px) {
	.nameCentered {
		font-size: 10px;
		line-height: 14px;
	}
	.fc_ninePiece {
		width: 16.66%;
	}
}
@media only screen and (max-width: 500px) {
	.nameCentered {
		font-size: 12px;
		line-height: 16px;
	}
	.fc_ninePiece {
		width: 33.33%;
	}
}
@media only screen and (max-width: 400px) {
	.nameCentered {
		font-size: 8px;
		line-height: 12px;
	}
	.fc_ninePiece {
		width: 33.33%;
	}
}
.fc_fit_content {
	width: fit-content !important;
	height: fit-content !important;
}
.fc_spacer_top {
	padding-top: 1rem;
}
.fc_spacer_middle {
	padding-top: 3rem;
}
.fc_pad25 {
	padding-left: 25px;
	padding-right: 25px;
}
.fc_deck_image {
	box-shadow: 10px 10px 5px gray;
}
.fc_bullet_black {
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
	background: lightgray;
	border-radius: 5px;
	margin: 10px 5px;
}
.fc_bullet_black.active {
	background: black;
}
.fc_title {
	font-variant: small-caps;
	margin-top: 0px;
}
.fc_small_number {
	width: 50px;
}
.fc_dynText {
	margin-left: 5px;
	padding-bottom: 8px;
	vertical-align: middle;
	display: inline-block;
}
.fc_dot_sold {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	//background-color: #f00;
	position: absolute;
	top: 2px;
	right: 2px;  
	box-shadow: inset 0 0 5px #fff, inset 5px 0 80px #f00;
}
.pad {
	padding-left: 25px;
	padding-right: 25px;
}
.field {
	width: 200px;
	padding-top: 5px;
}
.left-arrow {
	position: absolute;
	left: 0;
	top: 8rem;
}
.right-arrow {
	position: absolute;
	right: 0;
	top: 8rem;
}
.discount {
	color: red;
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: line-through;
}

.fc_draw_container {
	max-width: 300px;
	padding: 15px;
	box-shadow: inset 0 0 15px goldenrod;
}
.fc_draw_image {
	width: 300px;
	box-shadow: 5px 5px 3px gray;
	margin-bottom: 5px;
	border-radius: 5px;
}
.fc_btn {
	margin: 5px auto auto !important;
}
.fc_modal2 {
	/* override modal defaults */
	width: fit-content !important;
	height: 90%;
	margin: auto !important;
	left: 0px !important;
	right: 0px !important;
	z-index: -1 !important;
	background-color: inherit !important;
	border: none !important;
	box-shadow: none !important;
}
.fc_modal2.in {
	/* override modal defaults */
	z-index: 1041 !important;
}
.fc_modal_close2 {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	height: auto;
}
.fc_modal_img_container {
	height: 50%;
}
.fc_modal_img {
	height: 100%;
	border-radius: 5px;
}
.fc_draw_intro_text {
	padding-bottom: 10px;
}
.fc_draw_intro_title {
	font-weight: bold;
    color: goldenrod;
    padding-bottom: 5px;
}