/* this will be the Main box for Gallery Box? contents */
.placerGDIF1 {
  top:26%;
  left:50%;
  margin-left:-10%;
  width:27%;
  height:40%;
  -webkit-filter: drop-shadow(0px 0px 12px rgba(254, 254, 244, 1)); /* frame shadow light! yellow */
  -moz-filter: drop-shadow(0px 0px 12px rgba(254, 254, 244, 1)); /* frame shadow light! yellow */
  -ms-filter: drop-shadow(0px 0px 12px rgba(254, 254, 244, 1)); /* frame shadow light! yellow */
  -o-filter: drop-shadow(0px 0px 12px rgba(254, 254, 244, 1)); /* frame shadow light! yellow */
  filter: drop-shadow(0px 0px 12px rgba(254, 254, 244, 1)); /* frame shadow light! yellow */
  z-index:auto;
}

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

}

.clipFrame2 {
  background:purple;
  -webkit-clip-path: polygon(6.9% 6.5%, 6.9% 92.7%, 92.55% 92.7%, 92.55% 6.5%);
  -moz-clip-path: polygon(6.9% 6.5%, 6.9% 92.7%, 92.55% 92.7%, 92.55% 6.5%);
  -ms-clip-path: polygon(6.9% 6.5%, 6.9% 92.7%, 92.55% 92.7%, 92.55% 6.5%);
  -o-clip-path: polygon(6.9% 6.5%, 6.9% 92.7%, 92.55% 92.7%, 92.55% 6.5%);
  clip-path: polygon(6.9% 6.5%, 6.9% 92.7%, 92.55% 92.7%, 92.55% 6.5%);
  

}

.placerGDIF2 {
  position: absolute;
  top: 26%;
  left: 10%;
  width: 30%;
  max-width: 400px;
  height: 45%;
  max-height: 425px;
  
}

.placerGDIF3 {
  position: absolute;
  top: 26%;
  left: 10%;
  width: 30%;
  max-width: 400px;
  height: 45%;
  max-height: 425px;
  
}

.placerGDIF4 {
  position: absolute;
  background: blue;
  top: 10%;
  left: 10%;
  width: 30%;
  max-width: 400px;
  height: 45%;
  max-height: 425px;
  
}

.frame {
  display: inline-block;
  position: absolute;
  background: #ddc; /* url(blank.png) 100% 100%; */
  top:50%;
  left:50%;
  margin-left:-45%;
  width:27%;
  height:40%;
  -webkit-filter: drop-shadow(0 0 0.75vw rgba(254, 254, 244, 1));
  -moz-filter: drop-shadow(0 0 0.75vw rgba(254, 254, 244, 1));
  -ms-filter: drop-shadow(0 0 0.75vw rgba(254, 254, 244, 1));
  -o-filter: drop-shadow(0 0 0.75vw rgba(254, 254, 244, 1));
  filter: drop-shadow(0 0 0.75vw rgba(254, 254, 244, 1));
  /*margin: 0vh 0vw; forces frame down and away from left: 0; top: 0; 
  content-box: none;*/
  border-radius: 0; /* outside frame corners ... added curvature */
  border: solid 17px #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: border-box;
  padding: 1%; /* inner classic picture matting */
  text-align: center;
  /*box-shadow: 10px 10px 10px 10px rgba(254, 254, 244, 1); 4px frame shadow light! yellow 0.75*/
  z-index:auto;
}

/* 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.1%; /* Full outside */
  bottom: -2.15%; /* Cir*/
  left: -2.4%; /* cum*/
  right: -2.15%; /* france*/

}

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

}

/* inner most fancy line ... animation curve */
.frame:hover::before {
  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: -3.65%; /* will control right side Matte width */
  margin-left: -3.05%;
  width: 103%; /* will control right side Matte width */
  height: 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;

}

.galleryCenter1 {
  position: absolute;
  background: green;
  left:50%;
  top:27.8%;
  margin-left:-10%;
  width:24.4%;
  height:36.145%;

}

.box{
  position:absolute;
  background:black;
  visibility:visible;
  top:25%;
  left:25%;
  width:33.7%;
  height:50%;

}

.flipSpeed{
  position:absolute;
  width:50%;
  /*max-width:100px;*/
  height:50%;
  /*max-height:100px;*/
  -webkit-transition:all 750ms;
  -moz-transition:all 750ms;
  /*-ms-transition:all 750ms;*/
  -o-transition:all 750ms;
  transition:all 750ms;

}

#base1:hover{
  -webkit-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:-105% -105%;
  -moz-transform-origin:-105% -105%;
  -ms-transform-origin:-105% -105%;
  -o-transform-origin:-105% -105%;
  transform-origin:-105% -105%;

}

#base2:hover{
  -webkit-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -webkit	-transform-origin:-40% -245%;
  -moz-transform-origin:-40% -245%;
  -ms-transform-origin:-40% -245%;
  -o-transform-origin:-40% -245%;
  transform-origin:-40% -245%;

}

#base3:hover{
  -webkit-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:-105% 105%;
  -moz-transform-origin:-105% 105%;
  -ms-transform-origin:-105% 105%;
  -o-transform-origin:-105% 105%;
  transform-origin:-105% 105%;

}

#base4:hover{
  -webkit-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:245% 245%;
  -moz-transform-origin:245% 245%;
  -ms-transform-origin:245% 245%;
  -o-transform-origin:245% 245%;
  transform-origin:245% 245%;

}

/* percent (145%) must remain constant */
#clip{
  width:145%;
  height:145%;

}

.clipPlus1{
  -webkit-transform:rotateZ(180deg);
  -moz-transform:rotateZ(180deg);
  -ms-transform:rotateZ(180deg);
  -o-transform:rotateZ(180deg);
  transform:rotateZ(180deg);

}

.clipPlus2{
  -webkit-transform:rotateZ(-90deg);
  -moz-transform:rotateZ(-90deg);
  -ms-transform:rotateZ(-90deg);
  -o-transform:rotateZ(-90deg);
  transform:rotateZ(-90deg);
  -webkit	-transform-origin:-100% 100%;
  -moz-transform-origin:-100% 100%;
  -ms-transform-origin:-100% 100%;
  -o-transform-origin:-100% 100%;
  transform-origin:-100% 100%;

}

.clipPlus3{
  -webkit-transform:rotateZ(90deg);
  -moz-transform:rotateZ(90deg);
  -ms-transform:rotateZ(90deg);
  -o-transform:rotateZ(90deg);
  transform:rotateZ(90deg);
  -webkit	-transform-origin:100% 0%;
  -moz-transform-origin:100% 0%;
  -ms-transform-origin:100% 0%;
  -o-transform-origin:100% 0%;
  transform-origin:100% 0%;

}

.clipPlus4{
  -webkit-transform:rotateZ(0deg);
  -moz-transform:rotateZ(0deg);
  -ms-transform:rotateZ(0deg);
  -o-transform:rotateZ(0deg);
  transform:rotateZ(0deg);
  -webkit-transform-origin:100% 100%;
  -moz-transform-origin:100% 100%;
  -ms-transform-origin:100% 100%;
  -o-transform-origin:100% 100%;
  transform-origin:100% 100%;

}

#image{
  background:url(http://www.richnutcoffee.net/Z_D/cosmetics_For_DIVs/galleryBox.png);
  background-size:contain;
  width:68%;
  /*max-width:100px;*/
  height:68%;
  /*max-height:100px;*/

}

.imagePlus1:hover,.imagePlus2:hover,.imagePlus3:hover,.imagePlus4:hover{
  -webkit-animation:spinPulsing 6s 1 ease-in reverse;
  -moz-animation:spinPulsing 6s 1 ease-in reverse;
  -ms-animation:spinPulsing 6s 1 ease-in reverse;
  -o-animation:spinPulsing 6s 1 ease-in reverse;
  animation:spinPulsing 6s 1 ease-in reverse;
  box-shadow:0px 0px 4px red,0px 0px 4px green,0px 0px 4px blue,0px 0px 4px blue,0px 0px 4px red,0px 0px 4px green,2px 2px 4px blue,4px 4px 4px red,6px 6px 4px green,2px 2px 4px blue,4px 4px 4px red,6px 6px 4px green;

}

.place1{
  top:-22.5%;
  left:-22.5%;

}

.place2{
  top:50%;
  left:195%;

}

.place3{
  top:122.5%;
  left:-22.5%;

}

.place4{
  top:50%;
  left:50%;

}

#clip,#image{
  overflow:hidden;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;

}

/* ----------------- the CUBE new stuff ----------------- */

.stage{
  opacity:0;

}

.stagePacity{
  -webkit-animation:fadeIn 2s;
  -moz-animation:fadeIn 2s;
  -ms-animation:fadeIn 2s;
  -o-animation:fadeIn 2s;
  animation:fadeIn 2s;
  /*pointer-events:all;*/

}

div[id="geeks"]{
  background-color: green;
  color:white;

}

div[class="stage"]{
  -webkit-animation:fadeIn 2s;
  -moz-animation:fadeIn 2s;
  -ms-animation:fadeIn 2s;
  -o-animation:fadeIn 2s;
  animation:fadeIn 2s;
  /*pointer-events:all;*/

}

#spinner div{
  position:absolute;
  background:rgba(255,255,255,0.8);
  width:25%;
  /*max-width:72px;*/
  height:25%;
  /*max-height:72px;*/
  border:1px solid #ccc;
  box-shadow:inset 0 0 12px rgba(0,0,0,0.2);
  text-align:center;
  line-height:18em;
  font-size:15em;

}

#spinner .face1{-webkit-transform:translateZ(2.2vw);-moz-transform:translateZ(2.2vw);-ms-transform:translateZ(2.2vw);-o-transform: translateZ(2.2vw);transform:translateZ(2.2vw);}

#spinner .face2{-webkit-transform:rotateY(90deg) translateZ(2.2vw);-moz-transform:rotateY(90deg) translateZ(2.2vw);-ms-transform:rotateY(90deg) translateZ(2.2vw);-o-transform:rotateY(90deg) translateZ(2.2vw);transform:rotateY(90deg) translateZ(2.2vw);}

#spinner .face3 {-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-o-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);}

#spinner .face4{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-o-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);}

#spinner .face5{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);}

#spinner .face6{-webkit-transform:rotateX(-90deg) translateZ(2.2vw);-moz-transform:rotateX(-90deg) translateZ(2.2vw);-ms-transform:rotateX(-90deg) translateZ(2.2vw);-o-transform:rotateX(-90deg) translateZ(2.2vw);transform:rotateX(-90deg) translateZ(2.2vw);}

@-webkit-keyframes spincube{
  from,to{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16% {-webkit-transform:rotateY(-90deg);}
  33% {-webkit-transform:rotateY(-90deg) rotateZ(90deg);}
  50% {-webkit-transform:rotateY(-180deg) rotateZ(90deg);}
  66% {-webkit-transform:rotateY(90deg) rotateX(90deg);}
  83% {-webkit-transform:rotateX(90deg);}

}

@-moz-keyframes spincube{
  from,to{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-moz-transform:rotateY(-90deg);}
  33%{-moz-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-moz-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-moz-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-moz-transform:rotateX(90deg);}

}

@-ms-keyframes spincube{
  from,to{-ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-ms-transform:rotateY(-90deg);}
  33%{-ms-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-ms-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-ms-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-ms-transform:rotateX(90deg);}

}

@-o-keyframes spincube{
  from,to{-o-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-o-transform:rotateY(-90deg);}
  33%{-o-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-o-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-o-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-o-transform:rotateX(90deg);}

}

@keyframes spincube{
  from,to{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{transform:rotateY(-90deg);}
  33%{transform:rotateY(-90deg) rotateZ(90deg);}
  50%{transform:rotateY(-180deg) rotateZ(90deg);}
  66%{transform:rotateY(-270deg) rotateX(90deg);}
  83%{transform:rotateX(90deg);}

}

#spinner{
  -webkit-animation-name:spincube 12s ease-in infinite preserve-3d;
  -moz-animation-name:spincube 12s ease-in infinite preserve-3d;
  -ms-animation-name:spincube 12s ease-in infinite preserve-3d;
  -o-animation-name:spincube 12s ease-in infinite preserve-3d;
  animation-name:spincube 12s ease-in infinite preserve-3d;
  -webkit-transform-origin:30px 30px 0;
  -moz-transform-origin:30px 30px 0;
  -ms-transform-origin:30px 30px 0;
  -o-transform-origin:30px 30px 0;
  transform-origin:30px 30px 0;
 
}

.cubespinner{
  -webkit-animation:spincube 12s ease-in-out infinite;
  -moz-animation:spincube 12s ease-in-out infinite;
  -ms-animation:spincube 12s ease-in-out infinite;
  -o-animation:spincube 12s ease-in-out infinite;
  animation:spincube 12s ease-in-out infinite;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform-origin:30px 30px 0;
  -moz-transform-origin:30px 30px 0;
  -ms-transform-origin:30px 30px 0;
  -o-transform-origin:30px 30px 0;
  transform-origin:30px 30px 0;

}

.cubespinner div{
  position:absolute;
  border-radius:7%;
  width:71.5%;
  height:auto;
  border:1px solid #ccc;
  background:rgba(255,255,255,0.8);
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
  line-height:170%;
  text-align:center;
  font-size:210%;

}

.cubespinner .face1{
  -webkit-transform:translateZ(2.2vw);
  -moz-transform:translateZ(2.2vw);
  -ms-transform:translateZ(2.2vw);
  -o-transform:translateZ(2.2vw);
  transform:translateZ(2.2vw);

}

.cubespinner .face2{
  -webkit-transform:rotateY(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(90deg) translateZ(2.2vw);
  -o-transform:rotateY(90deg) translateZ(2.2vw);
  transform:rotateY(90deg) translateZ(2.2vw);

}

.cubespinner .face3{
  -webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -o-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);

}

.cubespinner .face4{
  -webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -o-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);

}

.cubespinner .face5{
  -webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);

}

.cubespinner .face6{
  -webkit-transform:rotateX(-90deg) translateZ(2.2vw);
  -moz-transform:rotateX(-90deg) translateZ(2.2vw);
  -ms-transform:rotateX(-90deg) translateZ(2.2vw);
  -o-transform:rotateX(-90deg) translateZ(2.2vw);
  transform:rotateX(-90deg) translateZ(2.2vw);

}