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


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

/* Fullscreen picture viewer */
#dimmeddiv          {visibility: hidden; position: fixed; z-index: 100; text-align: center;}

#dimcatdiv          {height: 18px;}
#dimmedimg          {display: block; border: none; transition: opacity 0.5s; opacity: 0;}
#dimdesouter        {height: 16px; position: relative;}
#dimdesdiv          {position: absolute; left:  0; top: 0;}
#dimimgdiv          {position: absolute; right: 0; top: 0;}

#dimcatdiv          {font-size: 12px; line-height: 18px; color: #fff; font-weight: bold;}
#dimdesdiv          {font-size: 11px; line-height: 16px; color: #fff;}
#dimimgdiv          {font-size: 10px; line-height: 15px; color: #fff;}

/* Fullscreen Navigation */
#dimarrows          {position: fixed;    width: 100%; height: 100%; top: 0; left:  0; z-index: 200; visibility: hidden;}
.dimright, .dimleft {position: absolute; width:  50%; height: 100%; top: 0;}
.dimclose           {position: absolute; width: 100%; height: 42px; top: 0;}

.dimright           {right: 0; background: url('images/rightarroww.png') no-repeat center right;}
.dimleft            {left:  0; background: url('images/leftarroww.png') no-repeat center left;}
.dimclose           {right: 0; background: url('images/close2w.png') no-repeat center right;}


/* Various thumbnail codes */
.rchgal                         {max-width: 1600px; margin: auto;
                                 display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.rchgal .thumb                  {height: 128px; margin: 10px 5px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 5px #888; border-radius: 32px 0 32px 0;}
.rchgal .thumb .innerdiv        {height: 100%; max-width: 100%; transition: transform 0.5s;}
.rchgal .thumb:hover .innerdiv  {transform: scale(1.25);}

@media screen and (min-width: 640px) {
    .rchgal .thumb              {height: 192px; margin: 10px 7.5px; border: 5px solid #fff; border-radius: 41px 0 41px 0;}
}

@media screen and (min-width: 1280px) {
    .rchgal .thumb              {height: 256px; margin: 10px; border: 8px solid #fff; border-radius: 50px 0 50px 0;}
}
