.middle {
    height: 100%;
    overflow-y: auto;   /* create the scrollbar */
    min-height: 0;  /* IMPORTANT! Turns off minimum heigh constrains, otherwise the container keeps growing */
    grid-area: middle;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
/*  IF ADDING MORE ROWS WITH SCROLLBAR, USE THESE:*/
/*    grid-template-rows: repeat(3, minmax(16vw, 1fr));*/        /* grid-template-rows: auto;*/
/*    grid-auto-rows:     minmax(16vw, 1fr);*/                       /* implicit rows get same rule */
    gap: min(1vw, 12px);
    /*grid-gap: min(1vw, 12px);*/
    align-content: start;

    box-sizing: content-box;
    padding: 50px 50px 80px 50px;

    color: rgb(255, 165, 0);
    font-size: min(2vw, 24px);
}

.middle .parmabox{
  position: relative;
  overflow: hidden;
  cursor: pointer;
     min-height: 200px;   
  /*
  align-items: center;
  */
  justify-content: center;
}

.middle .parmabox:hover {
/*
    font-size: min(2.6vw, 31.2px);
    border-radius: 10px;*/
    transition: all 0.9s ease-in-out;
}
.middle .parmabox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 45%;
  height: auto;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
  border: 2px solid rgb(24,24,24);
  transition: opacity 0s cubic-bezier(.4,0,.2,1),
              transform 0.9s cubic-bezier(.4,0,.2,1),
              z-index 0s linear 0.2s;
}
.middle .parmabox img.bitaxe-img {
  transform: translate(-50%, -50%) scale(0.7); 
  transition: opacity 0s cubic-bezier(.4,0,.2,1),
              transform 0.9s cubic-bezier(.4,0,.2,1),
              z-index 0s linear 0.2s;
}

.middle .parmabox .box-text {
  display: block !important;
  z-index: 4;
}

.middle .parmabox:hover img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 3;
  border: 2px solid rgb(24,24,24);
  transition: opacity 0s cubic-bezier(.4,0,.2,1),
              transform 0.3s cubic-bezier(.4,0,.2,1),
              z-index 0s;
}
.middle .parmabox:hover img.bitaxe-img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 3;
  border: 2px solid rgb(24,24,24);
  transition: opacity 0s cubic-bezier(.4,0,.2,1),
              transform 0.3s cubic-bezier(.4,0,.2,1),
              z-index 0s;
}

.middle_product {
    display: flex;
    position: relative;
    grid-area: middle;
    flex-direction: column;
    position: relative;
    height: auto;
    padding: 50px;
    color: rgb(255, 165, 0);
    font-size: min(1vw, 12px);
    overflow-y: auto;   /* create the scrollbar */
    min-height: 0;  /* IMPORTANT! */
  }


@media (max-width: 1000px) {
   .middle_product {
    padding: 15px;
   }

}
  #subheading {
    font-size: 3em; 
    margin-top: 10px;
    text-align: center;
    padding-bottom: 100px;
  }

    #subheading2 {
    font-size: 0.5em; 
    margin-top: 10px;
    margin-bottom: 50px; 
    }

  #machines {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    gap: 40px;
  }

  #machines_a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%; 
  }

  .machine_image {
     height: auto; border: 0.5vw solid rgb(255, 165, 0); margin: auto;
     max-width: 420px;
  }
  .machine_image.bitaxe {
     max-width: 320px;
     max-height: 500px;
  }
  .bitaxe_img {
    transform: scale(0.7) !important;
  }
  
  @media (max-width: 1000px) {
    .machine_image {
      max-width: 200px;
    }
    }
  #machines_b {
    width: 50%;
  }
  #machines_b.pos {
    padding-left: 100px;
  }

  #option_box {
    display: flex; flex-direction: column; align-items: stretch ; justify-content: top ; font-size: 15px; width: 100%;
  }
  .dropdown {
    text-align: center; 
    font-weight: bold; 
    font-size: 22px;
    width: 100%; 
    padding: 0.5em;
    background-color: rgb(255, 165, 0); 
    color: black;
    margin: 15px auto;
  }

#option_heading {
   margin-top: 2vw;
   font-size: 20px;
   font-style: italic;
   margin-bottom: 0px !important;
}

 #optiondiv {
    width: 100%;
 }

#currency_text{
  font-size: 0.9em;
  color: darkorange;
  margin-top: 50px;
}




  #slideshow_box  {
    position: relative; 
    width: 100%; 
    height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto; 
    padding: 0 20% 0 20%;
  }

  #slideshow-happy {
    max-width: 100%; max-height: 100%; object-fit: contain
  }

  @media (max-width: 1000px) {
    #slideshow_box {
    padding: 0;
    }
  }


.slideshow-button {
  position: absolute;
  font-family: sans-serif;

  top: 50%;
  transform: translateY(-50%);
  line-height: 1;               /* avoid font baseline quirks */
  padding: 0;                  

  z-index: 10;
  font-size: 8vw;
  background: none;
  color: green;
  border: none;
}
.slideshow-button.left {
left: -50px ;
}
.slideshow-button.right {
right: -50px ;
}

.slideshow-button:hover {
  color:rgb(103, 234, 86);
  transition: color 0.1s;
  cursor: pointer;
}

.slideshow-button:active {
  color: green;
}
  

  @media (max-width: 1000px) { 
    
    #subheading {
    font-size: 4em; 
    margin-top: 4vw;
    padding-bottom: 6vw; 
    text-align: center;
    }

    .footer {
      font-size: 10px;
    }

    #machines {
      flex-direction: column;
    }
    #machines_a {
      flex-direction: column;
      width: 100%;
    }
    #machines_b {
      flex-direction: column;
      width: 100%;
    }
    #option_box {
      font-size: 3.5vw;
    }
    #option_heading {
      font-size:  14px;
    }
    #optiondiv {
      width: 100%;
    }
    .dropdown {
      font-size: 0.85em;
    }
    .features {
      font-size: 4.75em;
    }
    .features_list {
      font-size: 3em;
    }
    .parmabox {
    font-size: 15px;
    letter-spacing: 2px; 
}
/*
#footer_toggle {
   display: none;
}
*/

.footer {
  grid-template-columns: 2fr 2fr 1fr; /* keep 3 equal sections */
  grid-template-rows: auto;           /* shrink row to content */
  height: auto;                       /* don’t stretch */
  font-size: 3vw;                     /* scale text with screen */
}

.footer .parmabox {
    padding: 0;
    margin-top: 6px; 
    font-size: 15px;
    font-size: 2vw;     /* smaller text on mobile */
    height: auto;       /* no forced stretch */
/*  margin-top: 0.5em;  /* give breathing room */
}

#homebutton {
  font-size: 10vw !important; /* make home icon scale */
}
} 

@media (max-width: 1000px) {
  .middle {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 80% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding-top: 20px;
  }
  .middle .parmabox {
    display: block;
    height: 320px;
  }
  .middle .parmabox img {
    display: block !important;
    margin: 0 auto !important;
    width: 200px !important;
    height: auto !important;
    overflow-y: hidden !important;
  }
   .middle .parmabox .box-text {
    position: absolute;
    bottom: 0;
  }
  .spacer { margin-bottom: 0px !important; }
}