degree.css

body {
  font-family: 'PT Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.degree-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 5%;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000; /*Based off the z=0 plane, gives 3D element perspective */
  border: 1px solid #ccc;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.flip-container, .front, .back {
  width: 320px;
  height: 427px;
}

.flipper {
  -webkit-transition: 0.8s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.8s;
  -moz-transform-style: preserve-3d;
  
  -o-transition: 0.8s;
  -o-transform-style: preserve-3d;

  transition: 0.8s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  position: absolute; 
  top: 0;
  left: 0;
  /*want the text for both front and back to appear on card*/
}

.front {
  background-repeat: no-repeat;
  width: 100%;
  z-index: 100;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

  background-color: #f8f8f8;
}

.front .front-title {
  font-size: 2em;
  color: white;
  /*background: rgba(33, 33, 33, 0.9);*/
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2%;
}

.traits-card {
  margin-top: 5%;
}

.back .back-title {
  line-height: 30px;
  font-size: 1.5em;
  padding: 3%;
}

.image-container, .info {
  display: inline;
}

.image {
  background-repeat: no-repeat;
  float: left;
  height: 2em;
  width: 2em;
  margin-left: 10px;
  margin-right: 10px;
}