html, body {
  direction: rtl;
  font-family: 'Arimo', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color:#fafafa;
}

h1 { font-weight: 700; }

#my-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  direction: rtl;
}

/* ________________________________________________ */
/*_________https://davidwalsh.name/css-flip(tweaked)________*/
/* entire container, keeps perspective */

.flip-container {
  display: inline-block;
  perspective: 1000px;
}

.flip-container, .front, .back {
  transform-style: preserve-3d;
  width: 320px;
  height: 420px;
}

/* flip speed goes here */

.flipper {
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

.fast { transition: 0.1s !important; }

/* back, initially hidden pane */

.back { transform: rotateY(180deg); }
/*__END____https://davidwalsh.name/css-flip________*/
/* ________________________________________________ */