.sbhh-flip-container {
perspective: 1000px;
width: 250px;
height: 250px;    overflow: hidden;
}
.sbhh-flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.sbhh-front, .sbhh-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 15px;
box-sizing: border-box;
border-radius: 50%;
}
.sbhh-front {
background-color: #4CAF50; z-index: 2;
transform: rotateY(0deg);
}
.sbhh-back {
background-color: #2196F3; transform: rotateY(180deg);
padding: 20px;
}
.sbhh-flipper.flipped {
transform: rotateY(180deg);
}
.sbhh-flipper.reset {
transition: none;
transform: rotateY(0deg);
}