.flipbox-wrapper {perspective: 800px; perspective-origin: 50% 50%;}
.flipbox-wrapper .flipbox-box {position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition-property: transform;}
.flipbox-wrapper .flipbox-box .flipbox-side {position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-front {transform: translateZ(0);}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-left {transform-origin: center left;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-right {transform-origin: top right;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-top {transform-origin: top center;}
.flipbox-wrapper .flipbox-box .flipbox-side.flipbox-bottom {transform-origin: bottom center;}

.box {width: 148px; height: 100px; margin: 30px 0; font-size: initial;position: fixed;bottom: -25px}
.box .side {line-height: 18px; font-size: 13px; font-weight: 700; color: #fff; text-align: center; user-select: none;
padding: 4px 2px;border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;display: flex;
    flex-direction: row;
    justify-content: space-evenly;}
.box .side.side1 {background: #3366CC;}
.box .side.side2 {background: #ED605C;}
.box .side.side3 {background: #479716;}
.box .side p {
    margin-bottom: 0px;
}
.flipbox__icon {
    padding-top: 10px;
}