/* Scss Document */


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

body {
  background-color: gray; }

h1 {
  margin-bottom: 1.5rem;
  text-align:center }

.container {
  width: 80%;
  background-color: lightgray;
  margin:0 auto;
  padding: 0.5em;
  line-height: 1.5; }

.one {
  background-color: white;
  height: 20%;
  width: 20%;
  padding: 1rem;
  margin-bottom: 1.5rem;
  transition-duration: 5s;
  //position: relative;
  //z-index: 9999; }

  .one img {
    height: 90%;
    width: 98%;
    margin: auto; }

  
  .one .caption {
    text-align: center; }


.one:hover {
  -ms-transform: translate(600px, 125px) rotate(360deg) scale(2, 2);
  -moz-transform: translate(600px, 125px) rotate(360deg) scale(2, 2);
  -webkit-transform: translate(600px, 125px) rotate(360deg) scale(2, 2);
  transform: translate(600px, 125px) rotate(360deg) scale(2, 2); }

.flex {
  display: flex; }

img {
  width: 265px;
  height: 200px; }

.flip-box {
  /*conatainer around the picture*/
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  margin: 1rem; }

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  	 -ms-transition: transform .8s;
 	 -moz-transition: transform .8s;
 	 -webkit-transition: transform .8s;
  transition: transform .8s;
 	 -ms-transform-style: preserve-3d;
 	 -moz-transform-style: preserve-3d;
	 -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.flip-box:hover .flip-box-inner {
  	-ms-transform: rotateY(180deg);
  	-moz-transform: rotateY(180deg);
  	-webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }

.flip-box-front {
  color: black; }

.flip-box-back {
  background-color: gray;
  width: 100%;
  height: 100%;
  color: white;
  	-ms-transform: rotateY(180deg);
  	-moz-transform: rotateY(180deg);
  	-webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding-top: 1.5rem; }

.zaxis {
  transform-origin: center;
  transform: rotate3d(-9, 0, 9, 45deg);
  transition: 1s;
  margin-left: 1.5rem; }

.flex img:hover {
  transform: scale(1.25); }

@media only screen and (max-width: 400px) {
  .container {
    width: 100%; }

  .one {
    width: 98%;
    height: 15rem;
    margin: auto; }

  .flex {
    display: flex;
    flex-direction: column;
    margin: auto; }

  .flip-box {
    margin-left: 0;
    padding-left: 0; }