.jhaircutfont {
    text-align: right;
    padding-left: 30px;
    padding-right: 30px;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 1em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #818181,
        1px 2px 1px #818181,
        1px 3px 1px #818181,
    1px 8px 6px rgba(16,16,16,0.4),
    1px 12px 10px rgba(16,16,16,0.2),
    1px 15px 35px rgba(16,16,16,0.2),
    1px 20px 60px rgba(16,16,16,0.4);
}
.bordertable { 
  border: 40px solid transparent;
  height: 810px;
  padding: 0px;
  border-image: url(border.png) 40px round;
  background-image: url(borderwoodtile.jpg);
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on
 hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 60px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  border:0;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  text-align: left;
  width: 90vw;
  position: relative;
  height: 120%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 90vw;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  color: black;
background-image: url('03small.jpg');
background-size: auto 60px;
}

/* Style the back side */
.flip-box-back {
  color: white;
background-image: url('03greensmall.jpg');
background-size: auto 60px;

  transform: rotateX(180deg);
}


.jhaircut_stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;

}


.jhaircut_ball {
flex-direction: column-reverse;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  background: url('one-grey-mirror.png') repeat-x;
  background-size: auto 100%;
  -webkit-animation: move-map 30s infinite linear;
  -moz-animation: move-map 30s infinite linear;
  -o-animation: move-map 30s infinite linear;
  -ms-animation: move-map 30s infinite linear;
  animation: move-map 30s infinite linear;
  animation-direction: reverse; 

 left:0px; top:75px;

}

.jhaircut_ball:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
  z-index: 2;
}

.jhaircut_ball:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-filter: blur(0);
  opacity: 0.3;
  background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}

.jhaircut_ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-150px);
  -moz-transform: rotateX(90deg) translateZ(-150px);
  -ms-transform: rotateX(90deg) translateZ(-150px);
  -o-transform: rotateX(90deg) translateZ(-150px);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}





.jhaircut_ball2 {
flex-direction: column-reverse;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  background: url('one-red.png') repeat-x;
  background-size: auto 100%;
  -webkit-animation: move-map 30s infinite linear;
  -moz-animation: move-map 30s infinite linear;
  -o-animation: move-map 30s infinite linear;
  -ms-animation: move-map 30s infinite linear;
  animation: move-map 30s infinite linear;

 left:0px; top:75px;

}

.jhaircut_ball2:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
  z-index: 2;
}

.jhaircut_ball2:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-filter: blur(0);
  opacity: 0.3;
  background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}

.jhaircut_ball2 .shadow {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-150px);
  -moz-transform: rotateX(90deg) translateZ(-150px);
  -ms-transform: rotateX(90deg) translateZ(-150px);
  -o-transform: rotateX(90deg) translateZ(-150px);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}


@-moz-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-webkit-keyframes move-map {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -849px 0; }
}


@-o-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-ms-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }