.gallery-image {
        background: lightgray;
}

@media only screen and (min-width: 768px) {
  #page-sidebar .box {

          width: 100%;
          float: right;
          color: #fff;

  }

  #text-areas-container .expando-in {
   /*
      max-height: 450px;
      overflow-y: scroll;
      overflow-x: hidden;
     */ 
  }
  
 .text-areas-wrapper > div {
     padding-right: 20px;
 } 
 
 .text-areas-wrapper {
    overflow-y: auto;
}    

  #text-areas-container .expando-in > div {
    /*  width: 89%; */
  }
}

body.mobile .text-areas-wrapper > div {
    padding-right: 10px;
}

/* New code */

body { 

    font-size: 14px; 
    color: #000; 
    background: url(images/bg-header.jpg); 
    margin: 0px auto; 
} 

input[type=text], input[type=email], input[type=tel], textarea { 
    width: 93%; 
    padding: 10px; 
    color: #595959; 
    font-size: 14px; 
} 

.box { 
    background: url(images/bg-mask.png); 
    background-color: #fff; 
    border: solid 1px #D5DBDE; 
    padding: 5px !important; 
    padding-right: 7px !important; 
    margin: 5px; 
    margin-bottom: 10px; 
    clear: both; 
    border-radius: 0px;
} 

.box>header>h1 { 
    font-size: 18px; 
    margin: 5px; 
    padding: 2px; 
} 

.button.blue, #add-to-cart { 
    background-color: #000 !important;
} 

input, button.new { 
    font-size: 16px; 
} 

button { 
    padding: 10px; 
    text-align: center; 
} 

.button { 
    background-color: #196f0c !important; 
} 

.button { 
    color: #fff; 
    font-weight: bold; 
    font-size: 18px; 
    border-radius: 0px;
} 

.expando h1 a, .expando h1 a:visited { 
    color: #000000; 
} 

.character-limit { 
    text-transform: capitalize; 
    text-align: right; 
    color: #595959; 
    font-size: 12px; 
} 

#page-sidebar h1 { 
    text-align: center; 
    text-transform: uppercase; 
    margin: 10px 0; 
    font-size: 18px; 
} 

#shop .btn.btn-secondary { 
    background: #fff; 
    border: #D5DBDE 1px solid; 
} 

 .text-areas-wrapper > div {
     padding-right: 5px;
 } 

/* Old code */




@media only screen and (max-width: 767px) {
/*  #text-areas-container .expando-in {
      max-height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
  }
  */

  #page-sidebar, #page-content {

          display: block;
          position: relative;
          width: 100% !important;
          clear: both;
          top: 0;
          right: 0;
          overflow: visible;

  }

  #page-content {
        margin-top: 70px;
        max-height:51%;
        overflow: hidden;
        min-height: 350px;
        height: auto;
  }

  #page-sidebar {
          background-color: #f6f6f6;
          height: auto;
          min-height: initial;
          top: initial;
         /* overflow-y: auto; */
          margin-top: 0px;
  }

  #renderer>canvas {
      top: 20px;
      min-width: 300px !important;
      min-height: 300px !important;
   }

     #prev-next {
      width: 101%;
      }
}


@media only screen and (max-height: 515px) {
    #page-content { max-height:51%; height: auto; }
}