.piece:after {
  content: none;
}
.piece img {
  position: relative;
  width: 100%;
}


ul li { 
	list-style-image: url(/media/com_rj/images/hexagon_li.png); 
} 

.rj_spacer_top {
	padding-top: 1rem;
}
.rj_spacer_top_double {
	padding-top: 2rem;
}
.rj_title {
  font-variant: small-caps;
  margin-top: 0px;
  width: fit-content;
  margin: auto;
  padding-bottom: 10px;
}
.rj_intro {
}
.rj_status {
	padding: 15px 0;
}
.rj_important_info {
	font-size:1.1rem;
	font-weight: bold;
}
.rj_rel {
	position: relative;
}
.rj_latest_item {
	float: right;
}

.rj_center_div {
	width: fit-content;
	margin: auto;
}
.rj_fbform {
	background: aliceblue;
	padding: 15px;
}
.rj_front {
	z-index: 1000;
	position: relative;
}
.rj_table {
	display: flex;
	justify-content: center;
	height: auto;
}
.rj_table_col {
	padding: 0 5px;
}
.rj_table_head {
	font-weight: bold;
	padding-bottom: 5px;
}
.rj_challenge_container {
}
.rj_challege_thumbnail {
	display: inline-block;
	padding: 5px 0;
}
.rj_challenge_titel {
	display: inline-block;
	padding-left: 10px;
}


/* on safari ios these need to be on the element itself to work! */
.rj_backgroundimage_txt {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.rj_cube_nameCentered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center; 
	width: 100%;
	overflow: hidden;
	font-size: 24px;
	line-height: 28px;
	
	background-image: url('/media/com_rj/images/gold-texture.jpg');
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.rj_cube_title img {
	width: 36px;
	padding-right: 10px;
}
.rj_cube_wrapper {
	overflow: auto;
	padding-bottom: 1rem;
	max-width: 900px;
	margin: auto;
}
.rj_element_container {
	position: relative;
	float: left;
	width: 33.33%;
	border: 2px solid white;
	box-sizing: border-box;
}
.rj_cube_item_container {
	position: relative;
	float: left;
	width: 33.33%;
}
.rj_cube_item_container:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.rj_cube_item_container a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.rj_cube_item {
	position: relative;
	border: 2px solid black;
	box-sizing: border-box;
}
.rj_relative {
	position: relative;
}
.rj_arrows {
	position: absolute;
}
.rj_left_arrow {
	float: left;
	padding-top: 10rem;
	padding-left: 10px;
}
.rj_right_arrow {
	float: right;
	padding-top: 10rem;
	padding-right: 10px;
}
.rj_pad {
	padding-left: 25px;
	padding-right: 25px;
}
.rj_detail_image {
	box-shadow: 5px 5px 3px gray;
}
.grayscale {
	filter: grayscale(100%);
}
h1 {
	font-variant: small-caps;
	margin-top: 0px;
}
h1 img {
	padding-right: 10px;
}
h2 {
	
}
.rj_content {
	padding-bottom: 0.5rem;
}
.rj_content img {
	max-width: 400px;
}
.rj_comment_container {
	padding-top: 10px;	
}

/* image slider */
.rj_bullet_container {
	text-align: center;
}
.rj_bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
	background: lightgray;
	border-radius: 5px;
	margin: 10px 5px;
}
.rj_bullet.active {
	background: black;
}
/* tabs */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  position: relative;
  z-index: 99;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
.tablinks, .tablinks2 {
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
	background-image: none !important;
	background-color: #1a1a1a !important;
}
.tablinks.active, .tablinks2.active {
	font-weight: bold;
	background-color: #002f8d !important;
}
.tablinks:hover, .tablinks2:hover {
	background-color: #002f8d !important;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* Style the tab */
.tab2 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  position: relative;
  z-index: 99;
}

/* Style the buttons inside the tab */
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab2 button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent2 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.challengeContainer {
	position: relative;
	text-align: center;
}
.challenge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.3rem;
	line-height: 1.7rem;
	width: 80%;
	max-width: 240px;
}
.cube-1, .cube-2, .cube-3, .cube-4, .cube-5, .cube-6 {
	color: white;	
}
.field {
	padding-top: 5px;
}
@media only screen and (max-width: 500px) {
	.rj_cube_item {
		position: relative;
		border: 0.5px solid black;
		box-sizing: border-box;
	}
	.rj_cube_title {
		font-size: 18px;
		line-height: 20px;
	}
}

/*
.cd_spacer {
	padding-bottom: 1rem;
}

.cd_title {
	font-variant: small-caps;
	margin-top: 0px;
}
.cd_content {
	padding-bottom: 0.5rem;
}
.cd_statement {
	font-style: italic;
}
.cd_radio_label {
	margin: 4px 0px 0px 4px;
}
.cd_pad {
	padding-left: 25px;
	padding-right: 25px;
}
.cd_relative {
	position: relative;
}
.cs_arrows {
	position: absolute;
}
.cd_left-arrow {
	float: left;
	padding-top: 7rem;
}
.cd_right-arrow {
	float: right;
	padding-top: 7rem;
}
.cd_detail_image {
	box-shadow: 5px 5px 3px gray;
}

.cd_deck_wrapper {
	overflow: auto;
}
.cd_piece {
	position: relative;
}
.cd_card_container {
  position: relative;
  float: left;
  width: 11.11%;
  border: 2px solid white;
  box-sizing: border-box;
}
.cd_card_container:after {
  content: "";
  display: block;
  padding-bottom: 100%; 
}
.cd_card_container a {
  position: absolute; 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center;
}
.cd_roll_over:hover
{ 
  border: 2px solid black;
  box-sizing: border-box;
}
.cd_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;
}


.cd_btnStart {
	margin: 5px auto auto !important;
	display: block;
}
.cd_btnStop {
	margin: 5px auto auto !important;
	display: none;
}
.cd_draw_image {
	width: 300px;
	box-shadow: 5px 5px 3px gray;
	margin-bottom: 5px;
	border-radius: 5px;
}
.cd_draw_container {
	max-width: 300px;
	padding: 15px;
	box-shadow: inset 0 0 15px goldenrod;
}
.cd_modal {
	width: 300px !important;
	margin: auto !important;
	left: 0px !important;
	right: 0px !important;
	z-index: -1 !important;
}
.cd_modal.in {
	z-index: 1041 !important;
}
.cd_modal_close {
	position: absolute;
	right: 0px;
	cursor: pointer;
}
.cd_small_number {
	width: 50px;
}
.cd_dynText {
	margin-left: 5px;
	padding-bottom: 8px;
	vertical-align: middle;
	display: inline-block;
}
.cd_deck_image {
	box-shadow: 10px 10px 5px gray;
}
.cd_bullet_container {
	text-align: center;
}
.cd_bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
	background: lightgray;
	border-radius: 5px;
	margin: 10px 5px;
}
.cd_bullet.active {
	background: black;
}
.cd_task_container {
	margin-top: 10px;
}
.cd_task_link {
	color: goldenrod;
	text-decoration: none;
	text-align: center;
}
.cd_task_icon {
	width:	20px;
}
.cd_task_text {
	color: black;
}
.cd_link {
	color: goldenrod;
}
.discount {
	color: red;
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: line-through;
}
.cd_fit_content {
	width: fit-content !important;
	height: fit-content !important;
}
.cd_spacer_top {
	padding-top: 1rem;
}
.cd_modal_img {
	max-height: 100%;
	border-radius: 5px;
}*/

.game_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background-color: #fff;
}

.game {
  position: relative;
  width: auto;
  height: 100%; 
}
.rj_dice_instr {
  width: fit-content;
  margin: auto;
  padding-bottom: 10px;
}
.dices {
  width: fit-content;
  margin: auto;
}

.dice_container {
  position: relative;
  display: inline-block;
  margin-top: 2rem;
}

.dice_heading {
  text-align: center;
  padding-bottom: 30px;
  font-weight: bold;
  font-size:large;
}

.dice_result {
  text-align: center;
  padding-top: 130px;
  font-weight: bold;
}
.rj_error {
  color: red;
  margin: auto;
  width: fit-content;
  padding-top: 10px;
}
.btn_container {
  margin: auto;
  padding-top: 10px;
  width: fit-content;
}

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s; 
  float: left;
  margin: 0 2rem;
}

.side {
  position: absolute;
  background-color: #f9f9f9;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
  background-position: center;
  background-repeat: no-repeat;
}

.side:nth-child(1) {
  transform: translateZ(3.1em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-2 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-4 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-5 {
  transform: rotateX(450deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.dot {
  width: 50%;
  height: 50%;
  content: '';
  position: absolute;
  top: 25%;
  left: 25%
}
#dice1 .one .dot {
  background-image: url('/media/com_rj/images/alchemy_fire.png');
}
#dice1 .two .dot {
  background-image: url('/media/com_rj/images/alchemy_air.png');
  transform: rotateY(-180deg) rotateX(180deg);
}
#dice1 .three .dot {
  background-image: url('/media/com_rj/images/alchemy_metal.png');
}
#dice1 .four .dot {
  background-image: url('/media/com_rj/images/alchemy_earth.png');
}
#dice1 .five .dot {
  background-image: url('/media/com_rj/images/alchemy_water.png');
}
#dice1 .six .dot {
  background-image: url('/media/com_rj/images/alchemy_ether.png');
}

#dice2 .s1 .dot {
  background-image: url('/media/com_rj/images/vibrance_realm.png');
}
#dice2 .s2 .dot {
  background-image: url('/media/com_rj/images/creativity_realm.png');
}
#dice2 .s3 .dot {
  background-image: url('/media/com_rj/images/wisdom_realm.png');
}
#dice2 .s4 .dot {
  background-image: url('/media/com_rj/images/nature_realm.png');
}
#dice2 .s5 .dot {
  background-image: url('/media/com_rj/images/divine_infinity_realm.png');
}
#dice2 .s6 .dot {
  background-image: url('/media/com_rj/images/spirituality_realm.png');
}

#dice3 .s1 .dot {
  background-image: url('/media/com_rj/images/structure_chaos.png');
}
#dice3 .s2 .dot {
  background-image: url('/media/com_rj/images/structure_hearts.png');
}
#dice3 .s3 .dot {
  background-image: url('/media/com_rj/images/structure_creatures.png');
}
#dice3 .s4 .dot {
  background-image: url('/media/com_rj/images/structure_lines.png');
}
#dice3 .s5 .dot {
  background-image: url('/media/com_rj/images/structure_rays.png');
}
#dice3 .s6 .dot {
  background-image: url('/media/com_rj/images/structure_flowers.png');
}
#dice3 .s7 .dot {
  background-image: url('/media/com_rj/images/structure_circles.png');
}
#dice3 .s8 .dot {
  background-image: url('/media/com_rj/images/structure_spirals.png');
}
#dice3 .s9 .dot {
  background-image: url('/media/com_rj/images/structure_planes.png');
}
#s2_2 .dot {
  transform: rotateY(-180deg) rotateX(180deg);
}
#s3_2 .dot {
  transform: rotateY(-180deg) rotateX(180deg);
}