.navbar-brand{
    font-family: 'UnifrakturCook', cursive ;
    bottom: 0;
        position: relative;
        text-align: bottom;
        font-size: 25px;
        color:#adadad;
        background-color:#000035;
}
.navbar-brand:hover {
  color: black;
  transition: 0.7s;
}
select option[value="DSB"] {
  background-color: #FF0000 !important;
  color: #FFD700 !important;
}
@keyframes fireGlow {
  from {
    text-shadow: 0 0 5px #FF4500, 0 0 10px #FF7800, 0 0 15px #FFCC00;
  }
  to {
    text-shadow: 0 0 10px #FF4500, 0 0 20px #FF7800, 0 0 30px #FFCC00, 0 0 40px rgba(255, 69, 0, 0.6);
  }
}
#body2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  margin: 0;
  background-color: #000035;
  font-family: Arial, sans-serif;
}
@media screen and (max-width: 1200px) {
  input[type="checkbox"], input[type="radio"] {
    transform: scale(0.9);
  }
  label {
    font-size: 0.9em;
  }
}
#descr5 td:nth-child(3) {
  padding-left: 20px; /* Adjust this value to increase or decrease space */
}
@media screen and (max-width: 992px) {
  input[type="checkbox"], input[type="radio"] {
    transform: scale(0.8);
  }
  label {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 768px) {
  input[type="checkbox"], input[type="radio"] {
    transform: scale(0.7);
  }
  label {
    font-size: 0.7em;
  }
}

@media screen and (max-width: 576px) {
  input[type="checkbox"], input[type="radio"] {
    transform: scale(0.6);
  }
  label {
    font-size: 0.6em;
  }
}

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2vw;
  width: 30%; /* Reduced from 60% to 30% to make the overall layout smaller */
  min-width: 100px; /* Reduced min-width */
  max-width: 400px; /* Reduced max-width */
}

.pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.level {
  display: flex;
  justify-content: center;
  width: 100%;
}

.block {
  width: 18%;
  padding-bottom: 12%;
  margin: 0.5%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 1px currentColor, 0 0 2px currentColor; /* Reduced shadow size */
  border: 0.5px solid currentColor; /* Reduced border width */
  position: relative;
}


.block:hover {
  transform: scale(1.1);
}

#level-1 .block { background-color: #E64A4A; color: #E64A4A; }
#level-2 .block { background-color: #4ABBE6; color: #4ABBE6; }
#level-3 .block { background-color: #E6D74A; color: #E6D74A; }
#level-4 .block { background-color: #E6934A; color: #E6934A; }
#level-5 .block { background-color: #4AE668; color: #4AE668; }

#level-1 .block:hover { 
  box-shadow: 0 0 5px #E64A4A, 0 0 10px #87CEEB; 
}
#level-2 .block:hover { 
  box-shadow: 0 0 5px #4ABBE6, 0 0 10px #87CEEB; 
}
#level-3 .block:hover { 
  box-shadow: 0 0 5px #E6D74A, 0 0 10px #87CEEB; 
}
#level-4 .block:hover { 
  box-shadow: 0 0 5px #E6934A, 0 0 10px #87CEEB; 
}
#level-5 .block:hover { 
  box-shadow: 0 0 5px #4AE668, 0 0 10px #87CEEB; 
}

#info-box {
  width: 200%;
  background-color: #000035;
  color: #ffffff;
  padding: 1vw;
  border-radius: 2px; /* Slightly reduced border-radius */
  box-shadow: 0 0 3px #000035; /* Slightly reduced shadow */
  backdrop-filter: blur(3px); /* Slightly reduced blur */
  font-size: 1.5vw; /* Kept the same as before */
}

#info-box-content {
 
  overflow: hidden;
}

.tutorial-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2vw;
  border-radius: 5px;
  max-width: 80%;
  text-align: center;
}
.tutorial-highlight {
  position: relative;
  z-index: 1000;
}

.tutorial-highlight::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid yellow;
  box-shadow: 0 0 10px yellow;

  z-index: 999;
  pointer-events: none;
}
.glow-effect {
  box-shadow: 
      0 0 0.26vw #FFFF00,
      0 0 0.52vw #FFFF00,
      0 0 0.78vw #FFFF00,
      0 0 1.04vw #FFFF00,
      0 0.052vw 0.26vw #FFFF00,
      0 0.052vw 0.52vw #FFFF00,
      0 0.052vw 0.78vw #FFFF00,
      0 0.052vw 1.04vw #FFFF00;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
      box-shadow: 
          0 0 0.26vw #FFFF00,
          0 0 0.52vw #FFFF00,
          0 0 0.78vw #FFFF00,
          0 0 1.04vw #FFFF00,
          0 0.052vw 0.26vw #FFFF00,
          0 0.052vw 0.52vw #FFFF00,
          0 0.052vw 0.78vw #FFFF00,
          0 0.052vw 1.04vw #FFFF00;
  }
  to {
      box-shadow: 
          0 0 0.52vw #FFFF00,
          0 0 1.04vw #FFFF00,
          0 0 1.56vw #FFFF00,
          0 0 2.08vw #FFFF00,
          0 0.052vw 0.52vw #FFFF00,
          0 0.052vw 1.04vw #FFFF00,
          0 0.052vw 1.56vw #FFFF00,
          0 0.052vw 2.08vw #FFFF00;
  }
}
.glow-effect2 {
  box-shadow: 
      0 0 0.26vw #FF8C00,
      0 0 0.52vw #FF8C00,
      0 0 0.78vw #FF8C00,
      0 0 1.04vw #FF8C00,
      0 0.052vw 0.26vw #FF8C00,
      0 0.052vw 0.52vw #FF8C00,
      0 0.052vw 0.78vw #FF8C00,
      0 0.052vw 1.04vw #FF8C00;
  animation: glow2 1.5s ease-in-out infinite alternate;
}

@keyframes glow2 {
  from {
      box-shadow: 
          0 0 0.26vw #FF8C00,
          0 0 0.52vw #FF8C00,
          0 0 0.78vw #FF8C00,
          0 0 1.04vw #FF8C00,
          0 0.052vw 0.26vw #FF8C00,
          0 0.052vw 0.52vw #FF8C00,
          0 0.052vw 0.78vw #FF8C00,
          0 0.052vw 1.04vw #FF8C00;
  }
  to {
      box-shadow: 
          0 0 0.52vw #FF8C00,
          0 0 1.04vw #FF8C00,
          0 0 1.56vw #FF8C00,
          0 0 2.08vw #FF8C00,
          0 0.052vw 0.52vw #FF8C00,
          0 0.052vw 1.04vw #FF8C00,
          0 0.052vw 1.56vw #FF8C00,
          0 0.052vw 2.08vw #FF8C00;
  }
}

@keyframes glow3 {
  0% {
    box-shadow: 0 0 5px #FFFFF0, 0 0 10px #FFFFF0, 0 0 15px #FFFFF0, 0 0 20px #D3D3D3, 0 0 35px #D3D3D3, 0 0 40px #D3D3D3, 0 0 50px #D3D3D3, 0 0 75px #D3D3D3;
  }
  100% {
    box-shadow: 0 0 10px #FFFFF0, 0 0 20px #FFFFF0, 0 0 30px #FFFFF0, 0 0 40px #D3D3D3, 0 0 70px #D3D3D3, 0 0 80px #D3D3D3, 0 0 100px #D3D3D3, 0 0 150px #D3D3D3;
  }
} 
.owned-word {
  animation: glow3 1.5s ease-in-out infinite alternate;
}
body {
  background-color: #B0D3E6;
}
h5 {
  font-family:"Helvetica", cursive ;
  font-weight:'lighter';
}
th {
  font-family:"Helvetica", cursive ;
  font-weight:'lighter';
}
.nav-item:hover {
background-color: #2F56E9;
transition: 0.7s;
}
#example_200:hover {
  background-color:#df3933;
  transition: 0.7s;
}
#example_201:hover {
  background-color: #2d50d1;
  transition: 0.7s;
}
#example_210 {
  opacity: 0.0;
  transition: opacity 0.4s;
}
#example_210:hover {
  opacity: 1.0;
 
}
.your-custom-class {
  background-color:white;
  color: #000035;
  font-size: 1.4vw;
}

#ex52:hover {
  background-color:rgb(207, 177, 6);
  transition: 0.7s;
}
#ex53:hover {
  background-color:#c5342f;
  transition: 0.7s;
}
#ex54:hover {
  background-color:#37ad28;
  transition: 0.7s;
}
#build{
  font-family: 'EB Garamond', ;
}
.first-txt{
      font-family: 'UnifrakturCook', cursive ;
}
.button-gradient {
  background-color: linear-gradient(to right, red, blue);/* Gradient background from dark blue to dark red to light blue */
  color: #FFFFFF; /* White text color */
  /* Additional styles as needed */
}
.container {
  margin: 0 auto ;
  position: relative;
  width: 100%;
}
.indent{
  padding-left:65px;
}
.centrered{
    font-family: 'UnifrakturCook';
}
.wrapper {
    display: inline-block;
    margin-top: 25px;
    position: relative;
}

.wrapper img {
   display: block;
   max-width:100%;
}

.wrapper .overlay {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.25);
    color:white;
}
h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
#pic_5{
	border: none;
	height: auto;
  max-width: 30%;
	width: auto;
}
img[usemap] {
	border: none;
	height: auto;
  max-width: 100%;
	width: auto;
  z-index: 800;
}
/* This is the checked state
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-color: red;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
/*    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
    border-radius: 50%;*/

#customRadio1 {
    background-color: red;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
    border-radius: 50%;
  }
#customRadio2 .custom-control-input:checked~.custom-control-label ::after {
    background-color: blue;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
    border-radius: 50%;
}
.djangtwo{
  border:1px solid black

}

#example_2 {
  position: relative;
  width: 100%; /* Ensure the background image fills its container */
  max-width: 100%;
  z-index: 1;

}
.child-2 {
  position:absolute;
  width:auto;

}

#bkg {
  position: absolute;
  top: 0%;
  left: 0%;
  img-align:centre;
}
#example_3 {
  position: absolute;
  top: 20%;
  left: 85%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#lumberhut {
    position: absolute;
    top: 0%;
    left: 0%;
    img-align:centre;
}
#example_5 {
          position: absolute;
          top: 20%;
          left: 45%;
          img-align:centre;
          z-index: 704;
}
#example_11 {
            position: absolute;
            top: 0%;
            left: 0%;
            img-align:centre;
            z-index: 812;
  }
  .image-container {
    position:absolute;
    width: 13%; /* Adjust to the desired width */
    height: auto; /* Adjust to the desired height */
    top: 1.5%;
    left: 6.6%;
  }
  
  .image-container img {
    position: relative;

    width: 100%;
    height: auto;
 /* Adjust as needed to control how the image fits within the container */
  }

  /* Define a class for the container div */

.image-container2 {
  /* Set the background image URL */
  background-image: url('{% static 'images/items/goldbg2.png' %}'); /* Replace 'background-image.jpg' with your background image URL */

  /* Set background size and position */
  background-size: cover; /* or 'contain' or specific dimensions */


  /* Specify the dimensions of the container div */


  /* Style for the contained image (your PNG image) */
}
/* Style for the contained image */
.image-container2 img {
  display: block; /* Ensure the image is a block element */
  width: 100%; /* Make the image width 100% of the container */
  height: auto; /* Maintain the aspect ratio */
}

.image-container3 {
  position: relative;
  width: 40%%;
  height: auto; /* Set the height as needed */
  background-image: url('{% static 'images/letters/parchment.webp' %}');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.text-over-image3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.4vw;
  text-align: center;
  /* Add other styles as needed */
}

#slotct {
  position: absolute;
  top: 35.5%;
  left: 34.2%;
  img-align:centre;
  z-index: 708;
}
#slotwlb {
  position: absolute;
  top:46.4%;

  left: 8.9%;
  img-align:centre;
  z-index: 735;
}
#slotwlt {
  position: absolute;
  top:0.3%;
  left: 8.9%;
  img-align:centre;
  z-index: 635;
}
#slotwol {
  position: absolute;
  top:82.5%;
  left: 60%;
  img-align:centre;
  z-index: 635;
}
#slotlh {
  position: absolute;
  top: 2%;
  left: 8.5%;
  img-align:centre;
  vertical-align:bottom;
  z-index: 604;
}
#slotsq {
  position: absolute;
  top: 74%;
  left: 85%;
  img-align:centre;
  z-index: 708;
}
#slotgmt {
  position: absolute;
  top: 56.5%;
  left: -0.88%;
  img-align:centre;
  z-index: 739;
}
#slotgmt2 {
  position: absolute;
  top: 48.5%;
  left: 0%;
  img-align:centre;
  z-index: 736;
}
#ruins {
  position: absolute;
  top: 37%;
  left: 34.5%;
  img-align:centre;
  z-index: 706;
}
#slotim {
  position: absolute;
  top: 4.5%;
  left: 83.8%;
  img-align:centre;
  z-index: 604;
}
#slotgm {
  position: absolute;
  top: 74.1%;
  left: 3%;
  img-align:centre;
  z-index: 737;
}
#slotkp {
  position: absolute;
  top: 16.8%;
  left: 39%;
  img-align:centre;
  z-index: 704;
}
#slotkps {
  position: absolute;
  top: 18.8%;
  left: 40%;
  img-align:centre;
  z-index: 704;
}
#slot1 {
    position: absolute;
    top: 35%;
    left: 11%;
    img-align:centre;
    z-index: 700;
}
#slot2 {
  position: absolute;
  top: 22.9%;
  left: 16%;
  img-align:centre;
  z-index: 699;
}
#slot3 {
  position: absolute;
  top: 14%;
  left: 22.2%;
  img-align:centre;
  z-index: 698;
}
#slot4 {
  position: absolute;
  top: 7%;
  left: 31%;
  img-align:centre;
  z-index: 697;
}
#slot5 {
  position: absolute;
  top: 2%;
  left: 42%;
  img-align:centre;
  z-index: 675;
}
#slot6 {
  position: absolute;
  top: 44%;
  left: 17.5%;
  img-align:centre;
  z-index: 708;
}
#slot7 {
position: absolute;
top: 33%;
left: 23%;
img-align:centre;
z-index: 707;
}
#slot8 {
position: absolute;
top: 23.8%;
left: 29.4%;
img-align:centre;
z-index:705;
}
#slot9 {
position: absolute;
top: 14%;
left: 38%;
img-align:centre;
z-index: 704;
}
#slot10 {
position: absolute;
top: 5%;
left: 52%;
img-align:centre;
z-index: 675;
}
#slot11 {
  position: absolute;
  top: 50%;
  left: 26%;
  img-align:centre;
  z-index: 711;
}
#slot12 {
position: absolute;
top: 16%;
left: 61%;
img-align:centre;
z-index: 709;
}
#slot13 {
position: absolute;
top: 60.7%;
left: 31.5%;
img-align:centre;
z-index: 715;
}
#slot14 {
position: absolute;
top: 52.5%;
left: 42%;
img-align:centre;
z-index: 725;
}
#slot15 {
position: absolute;
top: 40%;
left: 50%;
img-align:centre;
z-index: 722;
}
#slot16 {
position: absolute;
top: 27%;
left: 55.5%;
img-align:centre;
z-index: 716;
}
#slot17 {
position: absolute;
top: 65%;
left: 40%;
img-align:centre;
z-index: 734;
}
#slot18 {
position: absolute;
top: 62%;
left: 50%;
img-align:centre;
z-index: 730;
}
#slot19 {
position: absolute;
top: 45%;
left: 58.5%;
img-align:centre;
z-index: 723;
}
#slot20 {
position: absolute;
top: 35%;
left: 63.5%;
img-align:centre;
z-index: 718;
}
#slot21 {
  position: absolute;
  top: 24%;
  left: 70%;
  img-align:centre;
  z-index: 717;
}
#slot22 {
position: absolute;
top: 59%;
left: 59.5%;
img-align:centre;
z-index: 729;
}
#slot23 {
position: absolute;
top: 50.5%;
left: 67.8%;
img-align:centre;
z-index: 726;
}
#slot24 {
position: absolute;
top: 38%;
left: 72.5%;
img-align:centre;
z-index: 720;
}
#resources {
  position: absolute;
  top: 20%;
  left: 13%;
  img-align:centre;
}
#example_6 {
            position: absolute;
            top: 0%;
            left: 0%;
            img-align:centre;
  }
#example_13 {
            position: absolute;
            top: 87%;
            left: 72%;
            z-index: 729;

  }
#example_7 {
                position: absolute;
                top: 0%;
                left: 0%;
                img-align:centre;
      }
#example_8 {
    position: absolute;
    top: -4%;
    left: 16%;
    transform: translate(-50%, -50%);
    text-align: left;
    color:white;
}
#example_12 {
      position: absolute;
      top: -4%;
      left: 12%;
      transform: translate(-50%, -50%);
      text-align: left;
      color:#C4A484;
  }


#title {
  font-size: 3.5vw;
  margin-bottom: 2vw;
  margin-top: 2vw;
}
#time {
  font-size: 2vw;
  margin-bottom: 2vw;
  margin-top: 2vw;
}
#sub_title3 {
  font-size: 2.5vw;
  vertical-align: top;
}
#sub_title {
  font-size: 2.5vw;
  margin-bottom: 1vw;
  margin-top: 1vw;
}
#prod_title {
  font-size: 2.5vw;
  margin-bottom: 1vw;
  margin-top: 0vw;
  text-align: left;
}
#prod_detail {
  font-size: 1.4vw;
  text-align: right;
  padding-left:10%;
}
#prod_detail2 {
  font-size: 1.4vw;
  text-align: left;

}
#sub_title2 {
  font-size: 2vw;
  margin-bottom:2vw;
  margin-top: 2vw;
}
#sub_title3 {
  font-size: 2vw;
  margin-bottom:1vw;
}
#sub_title4 {
  font-size: 2vw;
  margin-bottom:1.5vw;
}

#sec_title {
  font-size: 2vw;
  margin-bottom: 0.8vw;
  margin-top: 0.8vw;
}
#descr {
  font-size: 1.4vw;
}
#descr1 {
  font-size: 2vw;
}
#descr0 {
  font-size: 2.4vw;
}
#descr3 {
  font-size: 1.5vw;
  padding-bottom: 0.1vw;
  
}
#nameov {
  font-size: 1.4vw;
  margin-bottom: 5vw;
  margin-top: 2vw;

}
#descr2 {
  font-size: 1.4vw;
  padding-right: 15%;
}
.resource-icon-alt {
  width: 3vw;
  height: auto;
  vertical-align: middle;
}

#type_alt_1_1, #type_alt_2_1, #type_alt_3_1, #type_alt_4_1, #type_alt_5_1, #type_alt_6_1 {
  position: absolute;
  top: 0; /* Adjusted to top of container */
  transform: translate(-50%, 0);
}

#type_alt_1_2, #type_alt_2_2, #type_alt_3_2, #type_alt_4_2, #type_alt_5_2, #type_alt_6_2 {
  position: absolute;
  top: 0; /* Adjusted to top of container */
  transform: translate(-50%, 0);
  text-align: left;
  color: white;
  font-size: 1.4vw;
}

/* Adjust left positions for icons and numbers */
#type_alt_1_1 { left: 1.8%; }
#type_alt_1_2 { left: 9%; }

#type_alt_2_1 { left: 19%; }
#type_alt_2_2 { left: 27%; }

#type_alt_3_1 { left: 36%; }
#type_alt_3_2 { left: 43%; }

#type_alt_4_1 { left: 52%; }
#type_alt_4_2 { left: 60%; }

#type_alt_5_1 { left: 70%; }
#type_alt_5_2 { left: 79%; }

#type_alt_6_1 { left: 87%; }
#type_alt_6_2 { left: 96%; }

#example_2b {
  position: relative;
  width: 100%;
  padding-top: 3vw; /* Adjusted to use vw for consistency */
  height: 4vw; /* Set a fixed height */
}

/* Styles for resource bars */
.resource-bar-container-alt {
  position: absolute;
  height: 0.4vw;
  width: 12%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  bottom: 0; /* Positioned at the bottom of the container */
}

.resource-bar-alt {
  height: 100%;
  background: linear-gradient(to right, #2c60a0, #3c70bc);
  box-shadow: 0 0 5px rgba(60, 112, 188, 0.5);
  border-radius: 1px;
}

#bar_alt_1 { left: 0.4%; }
#bar_alt_2 { left: 17.6%; }
#bar_alt_3 { left: 34.6%; }
#bar_alt_4 { left: 50.6%; }
#bar_alt_5 { left: 68.6%; }
#bar_alt_6 { left: 85.6%; }

.resource-icon {
  width: 3vw;
  height: auto;
  vertical-align: middle;
}

#type_1_1, #type_2_1, #type_3_1, #type_4_1, #type_5_1, #type_6_1 {
  position: absolute;
  top: -5%;
  transform: translate(-50%, -50%);
}

#type_1_2, #type_2_2, #type_3_2, #type_4_2, #type_5_2, #type_6_2 {
  position: absolute;
  top: -5%;
  transform: translate(-50%, -50%);
  text-align: left;
  color: white;
  font-size: 1.4vw;
}

/* Adjust left positions for icons and numbers */
#type_1_1 { left: 1.8%; }
#type_1_2 { left: 9%; }

#type_2_1 { left: 19%; }
#type_2_2 { left: 27%; }

#type_3_1 { left: 36%; }
#type_3_2 { left: 43%; }

#type_4_1 { left: 52%; }
#type_4_2 { left: 60%; }

#type_5_1 { left: 70%; }
#type_5_2 { left: 79%; }

#type_6_1 { left: 87%; }
#type_6_2 { left: 96%; }

/* New styles for resource bars */
.resource-bar-container {
  position: absolute;
  height: 0.4vw;
  width: 12%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  top: -1.4%; /* Moved up */
 
}

.resource-bar {
  height: 100%;
  background: linear-gradient(to right, #2c60a0, #3c70bc);
  box-shadow: 0 0 5px rgba(60, 112, 188, 0.5);
  border-radius: 1px;
}

#bar_1 { left: 0.4%; }   /* Moved 1.4% to the left from original 1.8% */
#bar_2 { left: 17.6%; }  /* Moved 1.4% to the left from original 19% */
#bar_3 { left: 34.6%; }  /* Moved 1.4% to the left from original 36% */
#bar_4 { left: 50.6%; }  /* Moved 1.4% to the left from original 52% */
#bar_5 { left: 68.6%; }  /* Moved 1.4% to the left from original 70% */
#bar_6 { left: 85.6%; }  

#parent {
  height: auto;
  width: 12%;
  left: -2%;
  top: -2.4%;
  opacity: 1;
  position: fixed;
  z-index: 9999;

}

.my-child {
  position:absolute;
  height: auto;
  width: 12%;
  left: 0;
  top: 0;
  opacity: 1;
  transform: translateY(100%);
  z-index: 999;

}
.child-img {
  position:fixed;
  height: auto;
  width:100%;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s;
  z-index: 9997;

}


.child-img:hover {
  opacity: 1.0;
  width:100%;
  height: auto;

  position: fixed;
  top: 0; /* Set this to the height of the first image */
  left: 0;
  transform: translateY(100%);
  z-index: 9998;

}
#example_9 {
              position: absolute;
              top: 74%;
              left: 8%;
              img-align:centre;
    }
#example_10 {
                position: absolute;
                top: 0%;
                left: 0%;
                img-align:centre;
}
#example_11 {
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            img-align:centre;
}
#example_12 {
  position: absolute;
  top: 40%;
  left: 45%;
  img-align:centre;
}

#xcoord {
  position: absolute;
  top: 86%; /* Adjust the vertical position as needed */
  left: 13%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#ycoord {
  position: absolute;
  top: 12%; /* Adjust the vertical position as needed */
  left: 13%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#nw {
  position: absolute;
  top: 23.5%; /* Adjust the vertical position as needed */
  left: 25.5%; /* Adjust the horizontal position as needed */
}
#up {
  position: absolute;
  top: 1.5%; /* Adjust the vertical position as needed */
  left: 48.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#ne {
  position: absolute;
  top: 23.5%; /* Adjust the vertical position as needed */
  left: 71%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#right {
  position: absolute;
  top: 47.5%; /* Adjust the vertical position as needed */
  left: 93.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#se {
  position: absolute;
  top: 69.5%; /* Adjust the vertical position as needed */
  left: 71.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#down {
  position: absolute;
  top: 92%; /* Adjust the vertical position as needed */
  left: 48.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#sw {
  position: absolute;
  top: 69.5%; /* Adjust the vertical position as needed */
  left: 25.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#left {
  position: absolute;
  top: 47.5%; /* Adjust the vertical position as needed */
  left: 2.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.4vw;
}
#y1 {
  position: absolute;
  top: 43.5%; /* Adjust the vertical position as needed */
  left: -1%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y2 {
  position: absolute;
  top: 38.8%; /* Adjust the vertical position as needed */
  left: 3.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y3 {
  position: absolute;
  top: 34.2%; /* Adjust the vertical position as needed */
  left: 7.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y4 {
  position: absolute;
  top: 29.8%; /* Adjust the vertical position as needed */
  left: 12.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y5 {
  position: absolute;
  top: 25.3%; /* Adjust the vertical position as needed */
  left: 17.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y6 {
  position: absolute;
  top: 20.7%; /* Adjust the vertical position as needed */
  left: 21.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y7 {
  position: absolute;
  top: 16.2%; /* Adjust the vertical position as needed */
  left: 26.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y8 {
  position: absolute;
  top: 11.7%; /* Adjust the vertical position as needed */
  left: 30.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y9 {
  position: absolute;
  top: 6.9%; /* Adjust the vertical position as needed */
  left: 35.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y10 {
  position: absolute;
  top: 2.4%; /* Adjust the vertical position as needed */
  left: 39.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#y11 {
  position: absolute;
  top: -2%; /* Adjust the vertical position as needed */
  left: 44.3%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x1 {
  position: absolute;
  top: 52.3%; /* Adjust the vertical position as needed */
  left: -1%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x2 {
  position: absolute;
  top: 56.5%; /* Adjust the vertical position as needed */
  left: 3.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x3 {
  position: absolute;
  top: 60.9%; /* Adjust the vertical position as needed */
  left: 7.5%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x4 {
  position: absolute;
  top: 65.7%; /* Adjust the vertical position as needed */
  left: 12.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x5 {
  position: absolute;
  top: 70.2%; /* Adjust the vertical position as needed */
  left: 17.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x6 {
  position: absolute;
  top: 74.8%; /* Adjust the vertical position as needed */
  left: 21.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x7 {
  position: absolute;
  top: 79.5%; /* Adjust the vertical position as needed */
  left: 26.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x8 {
  position: absolute;
  top: 84.1%; /* Adjust the vertical position as needed */
  left: 30.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x9 {
  position: absolute;
  top: 88.6%; /* Adjust the vertical position as needed */
  left: 35.2%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x10 {
  position: absolute;
  top: 93.2%; /* Adjust the vertical position as needed */
  left: 39.7%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#x11 {
  position: absolute;
  top: 97.5%; /* Adjust the vertical position as needed */
  left: 44.3%; /* Adjust the horizontal position as needed */
  color: #ffffff; /* Text color */
  font-size: 1.2vw;
}
#aa {
  position: absolute;
  top: 45%;
  left: 0%;
  img-align:centre;
}
#ab {
  position: absolute;
  top: 49.5%;
  left: 4.5%;
  img-align:centre;
}
#ac {
  position: absolute;
  top: 54%;
  left: 9%;
  img-align:centre;
}
#ad {
  position: absolute;
  top: 58.5%;
  left: 13.5%;
  img-align:centre;
}
#ae {
  position: absolute;
  top: 63%;
  left: 18%;
  img-align:centre;
}
#af {
  position: absolute;
  top: 67.5%;
  left: 22.5%;
  img-align:centre;
}
#ag {
position: absolute;
top: 72%;
left: 27%;
img-align:centre;
}
#ah {
  position: absolute;
  top: 76.5%;
  left: 31.5%;
  img-align:centre;
}
#ai {
  position: absolute;
  top: 81%;
  left: 36%;
  img-align:centre;
}
#aj {
  position: absolute;
  top: 85.5%;
  left: 40.5%;
  img-align:centre;
}
#ak {
  position: absolute;
  top: 90%;
  left: 45%;
  img-align:centre;
}

#ba {
  position: absolute;
  top: 40.5%;
  left: 4.5%;
  img-align:centre;
}
#bb {
    position: absolute;
    top: 45%;
    left: 9%;
    img-align:centre;
}

#bc {
      position: absolute;
      top: 49.5%;
      left: 13.5%;
      img-align:centre;
}
#bd {
      position: absolute;
      top: 54%;
      left: 18%;
      img-align:centre;
}
#be {
          position: absolute;
          top: 58.5%;
          left: 22.5%;
          img-align:centre;
}

#bf {
        position: absolute;
        top: 63%;
        left: 27%;
        img-align:centre;
}
#bg {
      position: absolute;
      top: 67.5%;
      left: 31.5%;
      img-align:centre;
}
#bh {
      position: absolute;
      top: 72%;
      left: 36%;
      img-align:centre;
}
#bi {
      position: absolute;
      top: 76.5%;
      left: 40.5%;
      img-align:centre;
}
#bj {
      position: absolute;
      top: 81%;
      left: 45%;
      img-align:centre;
}
#bk {
      position: absolute;
      top: 85.5%;
      left: 49.5%;
      img-align:centre;
}
#ca {
      position: absolute;
      top: 36%;
      left: 9%;
      img-align:centre;
}
#cb {
      position: absolute;
      top: 40.5%;
      left: 13.5%;
      img-align:centre;
}
#cc {
      position: absolute;
      top: 45%;
      left: 18%;
      img-align:centre;
}
#cd {
      position: absolute;
      top: 49.5%;
      left: 22.5%;
      img-align:centre;
}
#ce {
      position: absolute;
      top: 54%;
      left: 27%;
      img-align:centre;
}
#cf {
      position: absolute;
      top: 58.5%;
      left: 31.5%;
      img-align:centre;
}
#cg {
position: absolute;
top: 63%;
left: 36%;
img-align:centre;
}
#ch {
  position: absolute;
  top: 67.5%;
  left: 40.5%;
  img-align:centre;
}
#ci {
  position: absolute;
  top: 72%;
  left: 45%;
  img-align:centre;
}
#cj {
  position: absolute;
  top: 76.5%;
  left: 49.5%;
  img-align:centre;
}
#ck {
position: absolute;
top: 81%;
left: 54%;
img-align:centre;
}
#da {
  position: absolute;
  top: 31.5%;
  left: 13.5%;
  img-align:centre;
}
#db {
  position: absolute;
  top: 36%;
  left: 18%;
  img-align:centre;
}
#dc {
  position: absolute;
  top: 40.5%;
  left: 22.5%;
  img-align:centre;
}
#dd {
  position: absolute;
  top: 45%;
  left: 27%;
  img-align:centre;
}
#de {
  position: absolute;
  top: 49.5%;
  left: 31.5%;
  img-align:centre;
}
#df {
  position: absolute;
  top: 54%;
  left: 36%;
  img-align:centre;
}
#dg {
  position: absolute;
  top: 58.5%;
  left: 40.5%;
  img-align:centre;
}
#dh {
  position: absolute;
  top: 63%;
  left: 45%;
  img-align:centre;
}
#di {
position: absolute;
top: 67.5%;
left: 49.5%;
img-align:centre;
}
#dj {
  position: absolute;
  top: 72%;
  left: 54%;
  img-align:centre;
}
#dk {
  position: absolute;
  top: 76.5%;
  left: 58.5%;
  img-align:centre;
}
#ea {
  position: absolute;
  top: 27%;
  left: 18%;
  img-align:centre;
}
#eb {
  position: absolute;
  top: 31.5%;
  left: 22.5%;
  img-align:centre;
}
#ec {
  position: absolute;
  top: 36%;
  left: 27%;
  img-align:centre;
}
#ed {
  position: absolute;
  top: 40.5%;
  left: 31.5%;
  img-align:centre;
}
#ee {
  position: absolute;
  top: 45%;
  left: 36%;
  img-align:centre;
}
#ef {
  position: absolute;
  top: 49.5%;
  left: 40.5%;
  img-align:centre;
}
#eg {
  position: absolute;
  top: 54%;
  left: 45%;
  img-align:centre;
}
#eh {
  position: absolute;
  top: 58.5%;
  left: 49.5%;
  img-align:centre;
}
#ei {
  position: absolute;
  top: 63%;
  left: 54%;
  img-align:centre;
}
#ej {
  position: absolute;
  top: 67.5%;
  left: 58.5%;
  img-align:centre;
}
#ek {
  position: absolute;
  top: 72%;
  left: 63%;
  img-align:centre;
}
#fa {
position: absolute;
top: 22.5%;
left: 22.5%;
img-align:centre;
}
#fb {
  position: absolute;
  top: 27%;
  left: 27%;
  img-align:centre;
}
#fc {
  position: absolute;
  top: 31.5%;
  left: 31.5%;
  img-align:centre;
}
#fd {
  position: absolute;
  top: 36%;
  left: 36%;
  img-align:centre;
}
#fe {
  position: absolute;
  top: 40.5%;
  left: 40.5%;
  img-align:centre;
}
#ff {
  position: absolute;
  top: 45%;
  left: 45%;
  img-align:centre;
}
#fg {
  position: absolute;
  top: 49.5%;
  left: 49.5%;
  img-align:centre;
}
#fh {
  position: absolute;
  top: 54%;
  left: 54%;
  img-align:centre;
}
#fi {
  position: absolute;
  top: 58.5%;
  left: 58.5%;
  img-align:centre;
}
#fj {
  position: absolute;
  top: 63%;
  left: 63%;
  img-align:centre;
}
#fk {
  position: absolute;
  top: 67.5%;
  left: 67.5%;
  img-align:centre;
}
#ga {
  position: absolute;
  top: 18%;
  left: 27%;
  img-align:centre;
}
#gb {
  position: absolute;
  top: 22.5%;
  left: 31.5%;
  img-align:centre;
}
#gc {
  position: absolute;
  top: 27%;
  left: 36%;
  img-align:centre;
}
#gd {
position: absolute;
top: 31.5%;
left: 40.5%;
img-align:centre;
}
#ge {
  position: absolute;
  top: 36%;
  left: 45%;
  img-align:centre;
}
#gf {
  position: absolute;
  top: 40.5%;
  left: 49.5%;
  img-align:centre;
}
#gg {
  position: absolute;
  top: 45%;
  left: 54%;
  img-align:centre;
}
#gh {
  position: absolute;
  top: 49.5%;
  left: 58.5%;
  img-align:centre;
}
#gi {
  position: absolute;
  top: 54%;
  left: 63%;
  img-align:centre;
}
#gj {
  position: absolute;
  top: 58.5%;
  left: 67.5%;
  img-align:centre;
}
#gk {
  position: absolute;
  top: 63%;
  left: 72%;
  img-align:centre;
}
#ha {
  position: absolute;
  top: 13.5%;
  left: 31.5%;
  img-align:centre;
}
#hb {
  position: absolute;
  top: 18%;
  left: 36%;
  img-align:centre;
}
#hc {
  position: absolute;
  top: 22.5%;
  left: 40.5%;
  img-align:centre;
}
#hd {
  position: absolute;
  top: 27%;
  left: 45%;
  img-align:centre;
}
#he {
  position: absolute;
  top: 31.5%;
  left: 49.5%;
  img-align:centre;
}
#hf {
  position: absolute;
  top: 36%;
  left: 54%;
  img-align:centre;
}
#hg {
  position: absolute;
  top: 40.5%;
  left: 58.5%;
  img-align:centre;
}
#hh {
  position: absolute;
  top: 45%;
  left: 63%;
  img-align:centre;
}
#hi {
position: absolute;
top: 49.5%;
left: 67.5%;
img-align:centre;
}
#hj {
  position: absolute;
  top: 54%;
  left: 72%;
  img-align:centre;
}
#hk {
  position: absolute;
  top: 58.5%;
  left: 76.5%;
  img-align:centre;
}
#ia {
  position: absolute;
  top: 9%;
  left: 36%;
  img-align:centre;
}
#ib {
  position: absolute;
  top:  13.5%;
  left: 40.5%;
  img-align:centre;
}
#ic {
  position: absolute;
  top: 18%;
  left: 45%;
  img-align:centre;
}
#id {
  position: absolute;
  top: 22.5%;
  left: 49.5%;
  img-align:centre;
}
#ie {
  position: absolute;
  top: 27%;
  left: 54%;
  img-align:centre;
}
#if {
  position: absolute;
  top: 31.5%;
  left: 58.5%;
  img-align:centre;
}

#ig {
position: absolute;
top: 36%;
left: 63%;
img-align:centre;
}
#ih {
  position: absolute;
  top: 40.5%;
  left: 67.5%;
  img-align:centre;
}
#ii {
  position: absolute;
  top: 45%;
  left: 72%;
  img-align:centre;
}
#ij {
  position: absolute;
  top: 49.5%;
  left: 76.5%;
  img-align:centre;
}
#ik {
  position: absolute;
  top: 54%;
  left: 81%;
  img-align:centre;
}
#ja {
  position: absolute;
  top: 4.5%;
  left: 40.5%;
  img-align:centre;
}
#jb {
  position: absolute;
  top: 9%;
  left: 45%;
  img-align:centre;
}
#jc {
  position: absolute;
  top: 13.5%;
  left: 49.5%;
  img-align:centre;
}
#jd {
position: absolute;
top: 18%;
left: 54%;
img-align:centre;
}
#je {
position: absolute;
top: 22.5%;
left: 58.5%;
img-align:centre;
}
#jf {
  position: absolute;
  top: 27%;
  left: 63%;
  img-align:centre;
}
#jg {
  position: absolute;
  top: 31.5%;
  left: 67.5%;
  img-align:centre;
}
#jh {
  position: absolute;
  top: 36%;
  left: 72%;
  img-align:centre;
}
#ji {
  position: absolute;
  top:  40.5%;
  left: 76.5%;
  img-align:centre;
}
#jj {
  position: absolute;
  top: 45%;
  left: 81%;
  img-align:centre;
}
#jk {
  position: absolute;
  top: 49.5%;
  left: 85.5%;
  img-align:centre;
}
#ka {
  position: absolute;
  top: 0%;
  left: 45%;
  img-align:centre;
}
#kb {
  position: absolute;
  top: 4.5%;
  left: 49.5%;
  img-align:centre;
}

#kc {
position: absolute;
top: 9%;
left: 54%;
img-align:centre;
}
#kd {
  position: absolute;
  top: 13.5%;
  left: 58.5%;
  img-align:centre;
}
#ke {
  position: absolute;
  top: 18%;
  left: 63%;
  img-align:centre;
}
#kf {
  position: absolute;
  top: 22.5%;
  left: 67.5%;
  img-align:centre;
}
#kg {
  position: absolute;
  top: 27%;
  left: 72%;
  img-align:centre;
}
#kh {
  position: absolute;
  top: 31.5%;
  left: 76.5%;
  img-align:centre;
}
#ki {
  position: absolute;
  top: 36%;
  left: 81%;
  img-align:centre;
}
#kj {
  position: absolute;
  top: 40.5%;
  left: 85.5%;
  img-align:centre;
}
#kk {
position: absolute;
top: 45%;
left: 90%;
img-align:centre;
}