/* ------------------- FRAME BOX ------------------- */

.frame{
display:inline-block;
position:relative;
background:#ddc; /* color of picture frame matteing url(blank.png) 100% 100%; */
box-sizing:padding-box;
text-align:center;
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;
-webkit-filter:drop-shadow(0 0 .95vw rgba(254,254,244,1));
-moz-filter:drop-shadow(0 0 .95vw rgba(254,254,244,1));
-ms-filter:drop-shadow(0 0 .95vw rgba(254,254,244,1));
-o-filter:drop-shadow(0 0 .95vw rgba(254,254,244,1));
filter:drop-shadow(0 0 .95vw rgba(254,254,244,1));
z-index:auto}

.frame:nth-of-type(1){left:6vw;top:0;width:var(--framedisplaywidth);height:var(--framedisplayheight);padding:.75vw}
.frame:nth-of-type(2){left:7vw;top:-8.25vw;width:var(--frameBdisplayBwidth);height:var(--frameBdisplayBheight);padding:.5vw}
.frame:nth-of-type(3){left:8vw;top:-16.5vw;width:var(--frameCdisplayCwidth);height:var(--frameCdisplayCheight);padding:.25vw}

.frameA:nth-of-type(1){left:6vw;top:0;width:var(--framedisplaywidth);height:var(--framedisplayheight);padding:.75vw}
.frameA:nth-of-type(2){left:7vw;top:-15vw;width:var(--frameBdisplayBwidth);height:var(--frameBdisplayBheight);padding:.5vw}
.frameA:nth-of-type(3){left:8vw;top:-15vw;width:var(--frameCdisplayCwidth);height:var(--frameCdisplayCheight);padding:.25vw}

/* outer most fancy line */
.frame:nth-of-type(1)::after,.frame:nth-of-type(2)::after,.frame:nth-of-type(3)::after{position:absolute;border-radius:0;box-shadow:.1vw .1vw .2vw .2vw rgba(0,0,0,.25);content:"";}
.frame:nth-of-type(1)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}
.frame:nth-of-type(2)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}
.frame:nth-of-type(3)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}

.frameA:nth-of-type(1)::after,.frameA:nth-of-type(2)::after,.frameA:nth-of-type(3)::after{position:absolute;border-radius:0;box-shadow:.1vw .1vw .2vw .2vw rgba(0,0,0,.25);content:"";}
.frameA:nth-of-type(1)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}
.frameA:nth-of-type(2)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}
.frameA:nth-of-type(3)::after{top:-2.4%;bottom:-2.15%;left:-1.15%;right:-1.125%}

/* inside most fancy line */
.frame:nth-of-type(1)::before,.frame:nth-of-type(2)::before,.frame:nth-of-type(3)::before{position:absolute;border-radius:0;box-shadow:inset .1vw .1vw .2vw .2vw rgba(0,0,0,.25);content:"";}
.frame:nth-of-type(1)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}
.frame:nth-of-type(2)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}
.frame:nth-of-type(3)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}

.frameA:nth-of-type(1)::before,.frame:nth-of-type(2)::before,.frame:nth-of-type(3)::before{position:absolute;border-radius:0;box-shadow:inset .1vw .1vw .2vw .2vw rgba(0,0,0,.25);content:"";}
.frameA:nth-of-type(1)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}
.frameA:nth-of-type(2)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}
.frameA:nth-of-type(3)::before{top:-1.7%;bottom:-1.5%;left:-.9%;right:-.8%}

/* 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:nth-of-type(1)::before:hover,.frame:nth-of-type(2)::before:hover,.frame:nth-of-type(3)::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}

.frameA:nth-of-type(1)::before:hover,.frameA:nth-of-type(2)::before:hover,.frameA:nth-of-type(3)::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}

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

/* 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); 



.......


.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%;

}*/