.flip-card-front,
.flip-card-back {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    color: black;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-card-front {
    z-index: 2;
    /* for firefox 31 */
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 181px;
}

.flip-card-front img,
.flip-card-back {
    border-radius: 5px;
}

@media(min-width:981px) {
    .flip-card-wrapper {
        min-height: 180px;
    }
}
.carousel-viewport {
    height: 100%;
    max-height:1200px;
    overflow: hidden;
    position: relative;
  }
  
  .carousel-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .carousel-track .flip-card-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 210px;
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -ms-transition: -ms-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
}
.carousel-track .flip-card {
    
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -ms-transition: -ms-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
@media(min-width:981px) {
    .carousel-track .slide {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .carousel-track .slide>div {
        width: 50%;
        height: 100%;
        padding: 10px;
        display: inline-block;               /* allows transform/scale */
        transition: transform 0.25s ease;     /* smooth scale */
        transform-origin: center center; 
    }

    .carousel-track .slide>div:first-of-type {
        transform: translateY(-50%);
    }
    .slide .flip-card:hover {
        transform: scale(1.1);
        z-index: 1; /* bring it above siblings if it grows */
    }
}
@media(max-width:980px) {
}

@media(max-width:767px) {

}