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

}

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

}

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

}

.frame {
  display: inline-block;
  position: absolute;
  background: #ddc; /* url(blank.png) 100% 100%; */
  top:35%;
  left:50%;
  margin-left:-45%;
  width:37%;
  height:50%;
  -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:not(hover::before) { /* EXPERIMENTAL - PLEASE ERASE WHEN TESTED - NOT YET TRIED */
  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;

}


/* ------------------- FLIP BOX ------------------- */
.box{
  position:absolute;
  background:black;
  visibility:visible;
  top:25%;
  left:25%;
  width:33.7%;
  height:50%;

}

.flipSpeed{
  -webkit-transition:all 750ms;
  -moz-transition:all 750ms;
  /*-ms-transition:all 750ms;*/
  -o-transition:all 750ms;
  transition:all 750ms;

}

#base1{
  z-index:1;

}

#base2{
  z-index:auto;
  

}

#base3{
  z-index:auto;
  

}

#base4{
  z-index:auto;
  
}

#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:-100% -100%;
  -moz-transform-origin:-100% -100%;
  -ms-transform-origin:-100% -100%;
  -o-transform-origin:-100% -100%;
  transform-origin:-100% -100%;

}

#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:250% -150%;
  -moz-transform-origin:250% -150%;
  -ms-transform-origin:250% -150%;
  -o-transform-origin:250% -150%;
  transform-origin:250% -150%;

}

#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:-150% 250%;/* IMPORTANT y,x */
  -moz-transform-origin:-150% 250%;
  -ms-transform-origin:-150% 250%;
  -o-transform-origin:-150% 250%;
  transform-origin:-150% 250%;

}

#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:200% 200%;
  -moz-transform-origin:200% 200%;
  -ms-transform-origin:200% 200%;
  -o-transform-origin:200% 200%;
  transform-origin:200% 200%;

}

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

}

.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);/* orients image inside of clip frame*/
  -moz-transform:rotateZ(-90deg);
  -ms-transform:rotateZ(-90deg);
  -o-transform:rotateZ(-90deg);
  transform:rotateZ(-90deg);
  -webkit	-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;

}

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

}

.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:50%; /*controls the boxes toal w and h ... AND lower right is your control */
  height:50%;
  -webkit-clip-path: polygon(0 0, 0 100%, 16.1% 100%, 16.1% 15.5%, 85% 15.5%, 85% 84.45%, 16.1% 84.45%, 16.1% 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);

}

.imagePlus1:hover,.imagePlus2:hover,.imagePlus3:hover,.imagePlus4:hover{
  -webkit-animation:spinPulsing 5s 1 ease-in reverse;
  -moz-animation:spinPulsing 5s 1 ease-in reverse;
  -ms-animation:spinPulsing 5s 1 ease-in reverse;
  -o-animation:spinPulsing 5s 1 ease-in reverse;
  animation:spinPulsing 5s 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{
  position: absolute;
  background:blue;
  left:50%;
  width:24.4%;
  height:36.145%;
  z-index:auto;


}

.place2{
  position: absolute;
  background:green;
  left:50%;
  width:24.4%;
  height:36.145%;
  z-index:auto;

}

.place3{
  background:yellow;
  position: absolute;
  left:50%;
  width:24.4%;
  height:36.145%;
  z-index:auto;

}

.place4{
  position: absolute;
  background:red;
  left:50%;
  width:24.4%;
  height:36.145%;
  z-index:auto;

}

#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 3-CUBE new stuff ----------------- */

.stage{
  position:absolute;
  top:27.5%;
  left:50%;
  opacity:0.8;
  

}

.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:0.06vw solid #ccc;
  box-shadow:inset 0 0 1.8vw 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:2.2vw 2.2vw 0; /* 30px 30px 0 */
  -moz-transform-origin:2.2vw 2.2vw 0;
  -ms-transform-origin:2.2vw 2.2vw 0;
  -o-transform-origin:2.2vw 2.2vw 0;
  transform-origin:2.2vw 2.2vw 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:2.2vw 2.2vw 0; /* 30px 30px 0 */
  -moz-transform-origin:2.2vw 2.2vw 0;
  -ms-transform-origin:2.2vw 2.2vw 0;
  -o-transform-origin:2.2vw 2.2vw 0;
  transform-origin:2.2vw 2.2vw 0;

}

.cubespinner div{
  position:absolute;
  border-radius:7%;
  width:71.5%;
  height:auto;
  border:0.06vw solid #ccc;
  background:rgba(255,255,255,0.8);
  box-shadow:inset 0 0 1.8vx 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);

}