#svgGallery {
  /* background: #52525222; */
  border: 1px solid black;
  display: none;
  height: 96vh;
  left: 2vw;
  opacity: 0;
  position: absolute;
  stroke-linecap: round;
  stroke-linejoin: round;
  top: 2vh;
  /* transition-duration: 3.2s; */
  transition-duration: 2.7s;
  width: 96vw;
}





/******************* start svgGal wholesale add: *********/

/*  View Boxes:  */
.vBox {
  x: 3%;
  y: 3%;
  width: 90vw;
  height: 80vh;
  stroke-width: 2px;
  transition-duration: 8.0s;
  transition-property: all;
  opacity: 0;
  fill: none;
}
#inBox {
  stroke: green;
}
#outBox {
  fill: black;
  stroke: red;
  transition-duration: 8.0s;
}

#gInBox{
  border: blue solid 1px;
  stroke: pink;
}

/* Next */
#gNext:hover {
  stroke-width: .1%;
}
#gNext {
  stroke: purple;
  stroke-width: .1%;
  transform: translate(92vw, 44vh) scale(.6);
  fill: #0000; /* to facilitate :hover */
}
#cNextW {
  /* r: 3%; */
  r: 3vmax;
  stroke: white;
}
#cNextB {
  /* r: 3.2%; */
  r: 3.2vmax;
  stroke: black;
}

#plNextW {
  stroke: white;
}
#plNextB {
  stroke: black;
}

/*  Prev */
#cPrevB:hover {
  stroke-width: .1%;
  stroke: #fff6;
}
#cNextB:hover {
  stroke-width: .2%;
  stroke: #fff6;
}

#gPrev {
  transform: translate(4vw, 44vh) scale(.6);
  fill: #0000; /* to facilitate :hover */
}
#cPrevW {
  r: 3vmax;
  stroke: white;
}
#cPrevB {
  r: 3.2vmax;
  stroke: black;
}

#plPrevW {
  stroke: white;
}
#plPrevB {
  stroke: black;
}


/***********************/
  /*  Description:   */
/***********************/

#gDescPlus {
  transition-duration: 1.2s;
  transform: translate(5vw, 80vh);
}
#gBackgroundColorDots {
  transform: translate(40vw, 0vh);
}
#gExpandDot{
  transform: translateY(.3%);
}



#divGalComment {
  position: absolute;
  top: 2.4vh; left: 80vw;
  height: 35px; width: 8em;

  background-origin: border-box;
  /* background-clip: content-box, border-box; */
  background-clip: padding-box, border-box;

  /* background-image: linear-gradient(135deg, #2f2f2f2f, #f2f2f2f2),
                    linear-gradient(135deg, #f2f2f2f2, #2f2f2f2f); */

  border: solid .3vmin transparent;
  border-radius: 30px;
  box-shadow: 2px 3px 2px 0px black, inset 1px 1px 1px white;

  display: none;
  font-family:  PlayfairDisplay, Times New Roman, radleyregular, Times, Georgia, serif;
  font-size: 18px;
  /* font-style: italic; */
  padding: 0 0 0 1vmin;
  /* padding top/right/bottom/left */
  /* overflow: scroll; */
  overflow: clip;
  transition-duration: 1.2s;
}
#pGalComment {
  color: white;
  mix-blend-mode: difference;
  /* mix-blend-mode: exclusion; */
  /* mix-blend-mode: lighten; */
  isolation: isolate;
}

#divGalDesc {
  background: #0000;
  color: white;
  font-family:  PlayfairDisplay, Times New Roman, radleyregular, Times, Georgia, serif;
  font-size: 24px;
  /* height: 2%; */
  height: auto;
  left: 14%;
  padding-top: 1.5%;
  pointer-events: none;
  position: absolute;
  top: 81%;
  transition-duration: 1.2s;
  width: 3%;
}


#gThumbs {
  border: 3px solid red;
}


/******  XtoClose:    ***********/
/* #gXtoClose:hover { */
  /* stroke-width: .3%; */
/* } */
/* #l1XtoCloseB { */
  /* stroke-width: .5%; */
/* } */

.XtoClose:hover{
  stroke-width: 1.6;
}

/*
#gGalComment {
  transform: translate(80vw, 10vh);
} */



/*
.rounded-gradient-borders {
  position: absolute;
  background-clip: padding-box;
  padding: 1vmin;
  box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.rounded-gradient-borders::after {
  position: absolute;
  top: -.5vmin; bottom: -.5vmin;
  left: -.5vmin; right: -.5vmin;
  background: linear-gradient(#2f2f2f2f, #f2f2f2ff);
  content: '';
  z-index: -1;
  border-radius: 16px;
}
#divGalComment {
  display: none;
  font-size: 24px;
  font-style: italic;
  left: 80vw;
  position: absolute;
  top: 7vh;
  transition-duration: 1.2s;
  width: 40vw;
} */



#svgRestart {
  top: 35%; left: 39%;
  height: 20%; width: 20%;

  display: none;
  fill: #f2f2f2f2;
  overflow: visible;
  position: absolute;
  transition-duration: 1.2s;
}