/* Custom Block: Flipping Panels */
.wp-block-flipping-panels {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    flex-wrap:wrap;
}
.wp-block-flipping-panels .panel {
    position: relative;
    display: block;
    flex-basis: calc(33% - 12px);
    margin-bottom: 25px;
  }
.wp-block-flipping-panels .panel-sizer {
    margin-top: 100%;
    position: relative;
}
.wp-block-flipping-panels .front_vert {
    background-color: var(--brand-color1);
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 900;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
    width: 100%;
    height: 100%;
    padding: 42px 18px;
    box-sizing:border-box;
    color: #fff;
}
.wp-block-flipping-panels .back_vert{
    background-color: var(--accent-color1);
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 1000;
    transform: rotateX(180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
    width: 100%;
    height: 100%;
}
.wp-block-flipping-panels .back_vert:before {
    content: ' ';
    background-image: url(../1-skeleton/images/checkmark.svg);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center 110%;
    width: 100%;
    height: 100%;
    display:block;
    position:relative;
    opacity:0.17;
}
.wp-block-flipping-panels .back_vert > div {
    position: absolute;
    top: 0;
    display: block;
    padding: 42px 18px;
}

.wp-block-flipping-panels .panel.flip .front_vert{
    z-index: 900;
    transform: rotateX(-180deg);
}
.wp-block-flipping-panels .panel.flip .back_vert{
    z-index: 1000;
    transform: rotateX(0deg);
}
.wp-block-flipping-panels .front_vert h4 {
    color: #fff;
  }
.wp-block-flipping-panels img {
    width: 100px;
    padding-bottom: 30px;
  }

/*============ Screen sizes up to 1024px ============*/
@media screen and (max-width:1024px) {
    .wp-block-flipping-panels .panel {
        flex-basis: calc(50% - 12px);
    }
    .wp-block-flipping-panels .panel-sizer {
        margin-top: 150%;
    }
}
/*============ Screen sizes up to 576px ============*/
@media screen and (max-width:576px) {
    .wp-block-flipping-panels .panel {
        flex-basis: 100%;
    }
    .wp-block-flipping-panels .panel-sizer {
        margin-top: 70%;
    }
}