/*
Flipbox
*/
.bc-flipbox[data-bc-hide]{
    opacity: 0;
}
.bc-flipbox{
    width: 300px; /*dimensiones*/
    --height: 300px; /*dimensiones*/
    height: var(--height);
    
    perspective: 800px; /*intensidad de la perspectiva*/
}
.bc-flipbox__wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    border-radius: 30px; /*borde común*/
    /*box shadow*/

    --trans-duration: 1.3s;
    --trans-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition: -webkit-transform var(--trans-duration) var(--trans-easing); /*duration*/ /*easing*/
    transition: transform var(--trans-duration) var(--trans-easing); /*duration*/ /*easing*/
}
.bc-flipbox__flip--front{
    position: relative;
    perspective: 1000px;
}
.bc-flipbox__flip--back{
    position: absolute;
    top: 0;
    left: 0;
}
.bc-flipbox__flip{
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    border-radius: 30px; /*borde común*/
    background: #fff; /*background*/
}
.bc-flipbox__wrapper[data-x] .bc-flipbox__flip--back{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.bc-flipbox__wrapper[data-x][data-flipped]{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.bc-flipbox__wrapper[data-x-reverse] .bc-flipbox__flip--back{
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.bc-flipbox__wrapper[data-x-reverse][data-flipped]{
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.bc-flipbox__wrapper[data-y] .bc-flipbox__flip--back{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.bc-flipbox__wrapper[data-y][data-flipped]{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.bc-flipbox__wrapper[data-y-reverse] .bc-flipbox__flip--back{
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
.bc-flipbox__wrapper[data-y-reverse][data-flipped]{
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}