/* ------------------- FRAME BOX ------------------- 
/* dependant on something 
#stage{
  position:relative;
  float:center;
  overflow:visible;
  margin:0 auto;
  width:var(--displayAwidth);
  height:var(--displayAheight);

} /* this frame comines the un doubled element in #stage above

/*box-shadow: 10px 10px 10px 10px rgba(254, 254, 244, 1); 4px frame shadow light! yellow 0.75
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  -moz-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  -ms-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  -o-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); */

.frame {
  display: inline-block;
  position: relative;
  background: #ddc; /* color of picture frame matteing url(blank.png) 100% 100%; */
  width:var(--displayAwidth); /*width:100%; */
  height:var(--displayAheight); /* height:100%; */
  -webkit-filter: drop-shadow(0 0 0.95vw rgba(254, 254, 244, 1));
  -moz-filter: drop-shadow(0 0 0.95vw rgba(254, 254, 244, 1));
  -ms-filter: drop-shadow(0 0 0.95vw rgba(254, 254, 244, 1));
  -o-filter: drop-shadow(0 0 0.95vw rgba(254, 254, 244, 1));
  filter: drop-shadow(0 0 0.95vw rgba(254, 254, 244, 1));
  border-radius: 0; /* outside frame corners ... added curvature */
  border: solid 1.25vw #eee; /* outer most gray boarder width ... 3vmin is just visible underneath*/
  border-top-color: #ddd;
  border-left-color: #eee;
  border-right-color: #eee;
  border-bottom-color: #fff;
  box-sizing: padding-box;
  padding: .75vw; /* 17px inner classic picture matting embellishment */
  text-align: center;
  z-index: initial;
}

/* outer most fancy line */
.frame::after {
  position: absolute;
  border-radius: 0;
  box-shadow: .1vw .1vw .2vw .2vw rgba(0, 0, 0, 0.25); /* 2 2 2 2 bottom */
  content: "";
  top: -2.4%; /* 0% -2.1%;  Full ... outside ... */
  bottom: -2.15%;/* -2.15%;  Cir*/
  left: -1.15%; /* -2.4% cum*/
  right: -1.125%; /* -2.15% france
  z-index:10;*/
}

.frame::before {
  position: absolute;
  border-radius: 0;
  box-shadow:inset .1vw .1vw .2vw .2vw rgba(0, 0, 0, 0.25);
  content: "";
  top: -1.7%; /* -1.2% Full ... inside ... */
  bottom: -1.5%; /* -1.5% Cir */
  left: -.9%; /* -1.5%cum */
  right: -.8%; /* -1.35% france */

}

/* inner most fancy line */
.frame::before:not(:hover) {
  position: absolute;
  border-radius: 0;
  box-shadow:inset .1vw .1vw .2vw .2vw rgba(0, 0, 0, 1);
  content: "";
  top: -1.2%; /* -1.2% Full ... inside ... */
  bottom: -1.5%; /* -1.5% Cir */
  left: -1.5%; /* -1.5%cum */
  right: -1.35%; /* -1.35% france */

}

/* inner most fancy line ... animation curve ... make this a '.theCheese' on its own, to add JS-able var (.theCheese) to be added/written through a function called 'theMouse' EXPERIMENTAL - PLEASE ERASE WHEN TESTED - NOT YET TRIED */
.frame::before:hover {
  border-radius: 5%;
  -webkit-transition: 1s ease-in;
  -moz-transition: 1s ease-in;
  -ms-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;

}
/*
.lowerGalleryMatte {
  background: #000000 content-box;
  margin-top: 0; /* -3.65% will control right side Matte width 
  margin-left: 0; /* -3.05% 
  width: 90%; /* 103% will control right side Matte width 
  height: 4vh; /* 103.65% 
  border: solid .3vw #e18728;
  border-image: #ccb;
  border-bottom-color: #ffe;
  border-left-color: #eed;
  border-right-color: #eed;
  border-top-color: #ccb;

}

.clipFrame1 {
  -webkit-clip-path: polygon(0 0, 0 100%, 5.7% 100%, 5.7% 5.2%, 93.8% 5.2%, 93.8% 93.82%, 5.7% 93.82%, 5.7% 100%, 100% 100%, 100% 0);
  -moz-clip-path: polygon(0 0, 0 100%, 6.9% 100%, 6.9% 6.5%, 92.55% 6.5%, 92.55% 92.7%, 6.9% 92.7%, 6.9% 100%, 100% 100%, 100% 0);
  -ms-clip-path: polygon(0 0, 0 100%, 6.9% 100%, 6.9% 6.5%, 92.55% 6.5%, 92.55% 92.7%, 6.9% 92.7%, 6.9% 100%, 100% 100%, 100% 0);
  -o-clip-path: polygon(0 0, 0 100%, 6.9% 100%, 6.9% 6.5%, 92.55% 6.5%, 92.55% 92.7%, 6.9% 92.7%, 6.9% 100%, 100% 100%, 100% 0);
  clip-path: polygon(0 0, 0 100%, 6.9% 100%, 6.9% 6.5%, 92.55% 6.5%, 92.55% 92.7%, 6.9% 92.7%, 6.9% 100%, 100% 100%, 100% 0);

}

 ------------------- FRAME BOX ------------------- 

.clip_Gallery1a {
  background:none;
  -webkit-clip-path: polygon(-50% -50%, -50% 50%, 50% 50%, 50% -50%);
  -moz-clip-path: polygon(-50% -50%, -50% 50%, 50% 50%, 50% -50%);
  -ms-clip-path: polygon(-50% -50%, -50% 50%, 50% 50%, 50% -50%);
  -o-clip-path: polygon(-50% -50%, -50% 50%, 50% 50%, 50% -50%);
  clip-path: polygon(-50% -50%, -50% 50%, 50% 50%, 50% -50%);

}

.clip_Gallery1b {
  background:none;
  -webkit-clip-path: polygon(50% -50, 50% 50%, 150% 50%, 150% -50%);
  -moz-clip-path: polygon(50% -50, 50% 50%, 150% 50%, 150% -50%);
  -ms-clip-path: polygon(50% -50, 50% 50%, 150% 50%, 150% -50%);
  -o-clip-path: polygon(50% -50, 50% 50%, 150% 50%, 150% -50%);
  clip-path: polygon(50% -50, 50% 50%, 150% 50%, 150% -50%);

}

.clip_Gallery1c {
  background:none;
  -webkit-clip-path: polygon(-50% 50%, -50% 150%, 50% 150%, 50% 50%);
  -moz-clip-path: polygon(-50% 50%, -50% 150%, 50% 150%, 50% 50%);
  -ms-clip-path: polygon(-50% 50%, -50% 150%, 50% 150%, 50% 50%);
  -o-clip-path: polygon(-50% 50%, -50% 150%, 50% 150%, 50% 50%);
  clip-path: polygon(-50% 50%, -50% 150%, 50% 150%, 50% 50%);

}

.clip_Gallery1d {
  background:none;
  -webkit-clip-path: polygon(50% 50%, 50% 150%, 150% 150%, 150% 50%);
  -moz-clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%);
  -ms-clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%);
  -o-clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%);
  clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%);

}

.a_1{
  top:0;
  margin-left:-10%;

}

.a_2{
  top:0;
  margin-left:14.4%;

}

.a_3{
  top:36.15%;
  margin-left:-10%;

}

.a_4{
  top:36.15%;
  margin-left:14.4%;

}*/