#one {
    float: left;
    margin: 25px;
    height: 600px;
}
#two {
    float: left;
    margin: 25px;
    height: 600px;
}

/*Flip when clicked*/
    /* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
       
}
/*.flip-container2:hover .flipper2, .flip-container2.hover .flipper2, .flip-container2.flip .flipper2 {
	transform: rotateY(180deg);
}
	/* flip the pane when hovered */
/*	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}*/

.flip-container, .front, .back {
	width: 400px;
	height: 600x;
}

/* flip speed goes here */
.flipper {
        border: 1px black;
	transition: 0.6s;
	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 {
        width:400px;
        height:600px;
        padding: 10px;
        background: #003d3d;
	z-index: 2;
	transform: rotateY(0deg);
}
.front p {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.front h2 {
    color: white;
}
.front ul li {
    color: #fff;
    text-align: center;
    font-family: Arial;
    font-size: 2em;
    list-style-type: none;
}

/* back, initially hidden pane */
.back {
        width:400px;
        height:600px;
        padding-left: 10px;
        padding-right: 10px;
        background: #5b7e14;
	transform: rotateY(180deg);
}
.back h1 {
    color: white;
    text-align: left;
}
.back ul li {
    color: #fff;
    text-align: left;
    font-family: Arial;
    font-size: 1em;
    list-style-type: none;
}
.back p {
    color: #fff;
    font-family: Arial;
    font-size: .8em;
    
}
.flipped {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  transform:rotateY(180deg);
}


/*Second box*/

.flip-container2, .front2, .back2 {
	width: 400px;
	height: 600px;
}

/* flip speed goes here */
.flipper2 {
        border: 1px black;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front2, .back2 {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front2 {
        width:400px;
        height:600px;
        padding: 10px;
        background: #650000;
	z-index: 2;
	transform: rotateY(0deg);
}
.front2 h2 {
    color: white;
}
.front2 p {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.front2 ul li {
    color: #fff;
    text-align: center;
    font-family: Arial;
    font-size: 2em;
    list-style-type: none;
}

/* back, initially hidden pane */
.back2 {
        width:400px;
        height:600px;
        padding-left: 10px;
        background: #871616;
	transform: rotateY(180deg);
}
.back2 h1 {
    color: white;
    text-align: left;
}
.back2 ul li {
    color: #fff;
    text-align: left;
    font-family: Arial;
    font-size: .8em;
    list-style-type: none;
}
.back2 p {
    color: #fff;
    font-family: Arial;
    font-size: .8em;
}
.flipped {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  transform:rotateY(180deg);
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

#rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 30s;
  animation-iteration-count: 5;
  animation-direction: alternate;
  width: 50%;
  margin: auto;
  font-size: 3em;
  bottom:0;
  display:flex;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

#hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  width: 50%;
  margin: auto;
  font-size: 3em;
}