div#gallery_group
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  position: relative;
  width: 100%;
  padding: .5rem;
  row-gap: .5rem;
  margin: 0 auto;
}

div#image_group > img#fullscreen_icon
{
  display: none;
  position: absolute;
  left: 0;
  top: -18px;
  max-width: 18px;
  cursor: pointer;
}

div#gallery_group div#image_group
{
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  
  /* this causes padding and borders to be inside the width and height of the element */
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div#image_group div#img_box
{
  position: relative; /* children are position absolute */
  width: 100%;
  padding: 0px;
}

div#image_group div#img_box div#sizer_box
{
  width: 100%;  
}

div#image_group div#img_box div.gallery_img
{
  display: block;
  position: absolute;    
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;

  border: 1px none white;
}

div#image_group div.img_pevnxt
{
  display: block;
  position: absolute;
  top: 0px;
  width: 33%;
  height: 100%;
  cursor: pointer;
  z-index: 4;

  background-repeat: no-repeat;
  background-size: 25px;
  opacity: 0;
  transition: opacity .4s ease-in-out;
  border: 1px none yellow;

}

div#image_group div.img_pevnxt:hover
{
  opacity: 1;
}

div#image_group #img_box #go_prev
{
  background-image: url("/images/gallery/ig_prev.svg");
  background-position: left center;
  left: 0px;
}

div#image_group #img_box #go_next
{
  background-image: url("/images/gallery/ig_next.svg");
  background-position: right center;
  right: 0px;
}

/* image comment / description */
div#gallery_group div#comment
{
  display: block;
  position: relative;
  width: 100%;
  min-height: 3em;
  padding: 0 1rem;
}

/* nav-group */

div#nav_group
{
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  margin: auto auto 1em auto;
}

div#nav_section
{
  display:flex;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px none yellow;
}

div#nav_group div#prev_box,
div#nav_group div#next_box
{
  display: flex;
  cursor: pointer;
  width: 50px;
  border: 1px none white;
}

div#nav_group div#prev_box img,
div#nav_group div#next_box img
{
  align-self: center;
  width: 15px;
}

.tn_box,
.sel_tn_box              /* tn_box, un-selected thumbnail */
{
  display: block;
  position: relative;
  margin: 2px;
  padding: 2px;
  cursor: pointer;
  border: 2px solid transparent;
}

.sel_tn_box          /* sel_tn_box, selected thumbnail */
{
  cursor: pointer;
  border: 2px solid #A52A2A;
}