#loading                {position: fixed;    z-index: 500; width: 80px; height: 80px; top: calc(50% - 40px); left: calc(50% - 40px);}
#dimmer                 {position: fixed;    z-index: 599; width: 100%; height: 100%; top: 0px; left:  0px;}
#dimmeddiv              {position: absolute; z-index: 600; width: 100%; height: 100%; top: 0px; left:  0px;}
#dimmedimg              {position: relative; z-index: 601;}
#dimmedtxt              {position: absolute; z-index: 601; width: 100%; height: auto; top: 0px; left:  0px;}
#dimmer .dimright       {position: absolute; z-index: 603; width: 57px; height: 100%; top: 0px; right: 4px;}
#dimmer .dimleft        {position: absolute; z-index: 603; width: 57px; height: 100%; top: 0px; left:  4px;}
#dimmer .dimclose       {position: absolute; z-index: 603; width: 57px; height: 57px; top: 4px; right: 4px;}

#loading                {display: none;}
#loading img            {border: none;}

#dimmer                 {visibility: hidden; background: rgba(0, 0, 0, 0.99); display: flex; justify-content: center; align-items: center;}

#dimmedimg              {display: inline-block; border: none; transition: opacity 0.5s; opacity: 0;
                         object-fit: contain; max-height: 100vh; max-width: 100%;}

#dimmedtxt              {text-align: center; color: #fff; font-size: 14px; padding: 4px;
                         background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
                         text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000;}

#dimmer .dimright,
#dimmer .dimleft,
#dimmer .dimclose       {display: flex; justify-content: center; align-items: center;}


#dimmer .icon           {width: 57px; height: 57px; border-radius: 50%; overflow: hidden;}
#dimmer .dimright .icon {background: rgba(0,0,0,0.5) url('images/rightarrowtrans.png') no-repeat center;}
#dimmer .dimleft  .icon {background: rgba(0,0,0,0.5) url('images/leftarrowtrans.png') no-repeat center;}
#dimmer .dimclose .icon {background: rgba(0,0,0,0.5) url('images/closetrans.png') no-repeat center;}


#dimmer .dimright:hover,
#dimmer .dimleft:hover,
#dimmer .dimclose:hover { cursor: pointer;}


.gallery                        {width: 100%; max-width: 960px; margin: auto; display: grid; grid-gap: 5px;}

.rchgal                         {display: grid; grid-gap: 10px;
                                 grid-auto-flow: row dense;
                                 grid-template-columns: auto;
                                 grid-template-areas:
                                      "bigLeft  bigLeft  bigLeft  bigLeft  rightL  rightL  rightL    rightR    rightR    rightR"
                                      "leftL    leftL    leftL    leftR    leftR   leftR   bigRight  bigRight  bigRight  bigRight";}

.rchgal .thumb                  {min-height: 160px;}

@media screen and (min-width: 960px) {
.rchgal .thumb                  {min-height: 240px;}
}

.rchgal .thumb:nth-child(6n+1)  {grid-area: auto / bigLeft   / span 1;}
.rchgal .thumb:nth-child(6n+2)  {grid-area: auto / rightL    / span 1;}
.rchgal .thumb:nth-child(6n+3)  {grid-area: auto / rightR    / span 1;}
.rchgal .thumb:nth-child(6n+4)  {grid-area: auto / leftL     / span 1;}
.rchgal .thumb:nth-child(6n+5)  {grid-area: auto / leftR     / span 1;}
.rchgal .thumb:nth-child(6n+6)  {grid-area: auto / bigRight  / span 1;}

.rchgal .thumb                  {width: 100%; height: 100%; box-shadow: 0 0 2.5px #000; border-radius: 5px; overflow: hidden;}
.rchgal .thumb .innerDiv        {width: 100%; height: 100%; background: url() no-repeat center / cover; transition: transform 2.5s;}
.rchgal .thumb:hover .innerDiv  {transform: scale(1.25);}

.rchgal .thumb                  {position: relative; overflow: hidden;}
.rchgal .thumb .descbg,
.rchgal .thumb .desc            {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.rchgal .thumb .desc            {display: flex; justify-content: center; align-items: center;}
.rchgal .thumb .desc            {font-size: 14px; line-height: 110%; color: #fff; text-align: center; font-weight: 400; padding: 10px;
                                 text-shadow: 1px 0px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000;}

.rchgal .thumb       .descbg    {background: rgba(0,0,0,0.00); transition: background 0.5s;}
.rchgal .thumb:hover .descbg    {background: rgba(0,0,0,0.50);}

.rchgal .thumb       .desc      {opacity: 0; transform: translateY(50%); transition: opacity 0.5s, transform 0.5s;}
.rchgal .thumb:hover .desc      {opacity: 1; transform: translateY( 0%);}

@media screen and (min-width: 960px) {
.rchgal .thumb .desc            {font-size: 16px; line-height: 110%;}
}