#gallery            {width: 100%;}
#gallery .rchgal    {width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between;}

/* Loader for the fullscreen imahes */
#loading            {position: fixed; width: 80px; height: 80px; display: none; border: none; z-index: 1000;}


/* Black transparent background Div for fullscreen */
.dimmer             {visibility: hidden; display: block; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 99; background: rgba(0, 0, 0, 1);}

/* Fullscreen picture viewr */
#dimmeddiv      {visibility: hidden; position: fixed; border: 2px solid #000; border-radius: 10px;
                 background: #ffffff; padding: 0px 10px 6px 10px; z-index: 100;}

#dimmeddiv p, #dimmeddiv h4, #dimmeddiv h3, #dimmeddiv h2
                {font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0px;}

#dimmeddiv p    {font-size: 10px; line-height: 10px; color: #ffffff;}
#dimmeddiv h4   {font-size: 10px; line-height: 10px; color: #000000;}
#dimmeddiv h3   {font-size: 11px; line-height: 11px; color: #000000;}
#dimmeddiv h2   {font-size: 12px; line-height: 18px; color: #000000;}

#dimcatdiv      {margin: auto; display: block; height: 18px; overflow: hidden;}                         /* Total height 18px + 2px border */
#dimcatdiv div  {display: block; margin: auto; width: 100%;}
#dimmedcat      {}

#dimarrows      {position: relative;}
#dimmedimg      {display: block; border: none; transition: opacity 0.5s; opacity: 0;}

.dimright, .dimleft
                {position: absolute; width: 41px; height: 57px; top: 50%;}
.dimright       {right: -12px; background: url('images/rightarroww.png') no-repeat;}
.dimleft        {left:  -12px; background: url('images/leftarroww.png') no-repeat;}
.dimclose       {position: absolute; top: 0px; right: 0px; width: 42px; height: 42px; background: url('images/close2w.png') no-repeat;}

#dimdesdiv      {margin: auto; margin-top: 6px; display: block; height: 16px; overflow: hidden;}        /* Total height 22px */
#dimdesdiv div  {display: block; margin: auto; width: 100%;}

#dimimgdiv      {margin: auto; margin-top: 4px; display: block; height: 15px; overflow: hidden;}        /* Total height 19px + 6px padding + 2px border */
#dimimgdiv div  {display: block; margin: auto; width: 100%; text-align: center;}






/* Various thumbnail codes */


#thumbwall                      {width: 100%; height: 160px; position: relative; margin: 5px 0;}
#thumbwall .outerdiv            {width: 100%; height: 100%;  position: relative; cursor: pointer; overflow: hidden;}
#thumbwall .galimg              {position: absolute; width: 100%; height: 100%;}

#thumbwall .innerdiv            {position: absolute; width: 75%; height: 100%; top: 0; left: 12.5%;
                                 display: flex; justify-content: center; align-items: center; text-align: center;}
#thumbwall .innerdiv p          {font-size: 16px; margin: 0; padding: 0; color: #fff; font-weight: 400;white-space: pre;
                                 text-shadow: 1px 0px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000, 0 0 10px #000;}

#thumbwall .bulleticon          {display: none; height: 14px; cursor: pointer;}

#thumbwall .outerdiv       .galimg     {transition: transform 0.5s;}
#thumbwall .outerdiv:hover .galimg     {transform: scale(1.1);}

@media screen and (min-width: 512px) {
#thumbwall.left                 {padding-right: 5px;}
#thumbwall.right                {padding-left: 5px;}
  #thumbwall                    {width: 50%; height: 160px;}
}

@media screen and (min-width: 720px) {
  #thumbwall                    {width: 50%; height: 225px;}
  #thumbwall.left               {padding-right: 64px;}
  #thumbwall.right              {padding-left: 64px;}

  #thumbwall.left  .bulleticon  {display: block; position: absolute; right: 30px; bottom: 0px;}
  #thumbwall.right .bulleticon  {display: block; position: absolute; left: 30px; bottom: 0px;}
}