.c1 {
    margin:10px;
}
.c2 {
    margin:10px;
}
.card-edge {
    border-radius: 5%;
}

/* based on David Walsh Flipper */
.flip-container {
    height:100%;
    perspective: 1000px;
}
  /* flip the pane when has the backed */
.flip-container.backed .flipper {
    transform: rotateY(180deg);
}
.fli300 {
    height: 320px;
}
.fli300 .front {
    height: 320px;
}
.fli300 .back {
    height: 320px;
    top:-320px;
}

/* flip speed goes here */
.flipper {
    transition: .4s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: relative;
    left: 0;
    height: 100%;
}

/* front pane, placed above back */
.flipper .front {
    z-index: 2;
    top: 0;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flipper .back {
    transform: rotateY(180deg);
}

/* some flex stuff */
.flexinl {  
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:center;
    margin-top:40px;
}