/* rmf_anim - Romart, 2021*/

#rmf_card3d_1
{
    display: none;
    position: fixed;
    top: 10px;
    left: 2%;
    margin: 0 auto;
    padding: 0;
    width: 96%;
    max-width: 550px;
    height: 450px;
    opacity: 0;
    z-index: 1;

    border-radius: 8px;
    color: #fff;
    background-color: #222324;
    
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.85);
    cursor: pointer;
}

#rmf_card_face,
#rmf_card_back
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

#rmf_card_face
{
    background-color: #222324;
    color: #fff;
}
#rmf_card_back
{
    background-color: rgb(204, 204, 204);
    color: #222324;
    transform: rotateY(-180deg);
}

#rmf_card_face .crd_hdr,
#rmf_card_back .crd_hdr,
#rmf_card_face .crd_btm,
#rmf_card_back .crd_btm,
#rmf_card_face .crd_cntnt,
#rmf_card_back .crd_cntnt
{
    display: inline-block;
}


#rmf_card_face .crd_hdr,
#rmf_card_back .crd_hdr,
#rmf_card_face .crd_btm,
#rmf_card_back .crd_btm
{
    height: 50px;
}
#rmf_card_face .crd_cntnt,
#rmf_card_back .crd_cntnt
{
    height: 340px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 15px;
}


.rmf_flip3d-animate
{
    z-index: 100000;
    -webkit-animation: rmf_flip3d-anm 0.2s ease-in-out 0s 1 normal forwards;
    -moz-animation: rmf_flip3d-anm 0.2s ease-in-out 0s 1 normal forwards;
    -ms-animation: rmf_flip3d-anm 0.2s ease-in-out 0s 1 normal forwards;
    animation: rmf_flip3d-anm 0.2s ease-in-out 0s 1 normal forwards;
}
.rmf_flip3d-reverse
{
    z-index: 100000;
    -webkit-animation: rmf_flip3d-rev 0.2s ease-in-out 0s 1 normal forwards;
    -moz-animation: rmf_flip3d-rev 0.2s ease-in-out 0s 1 normal forwards;
    -ms-animation: rmf_flip3d-rev 0.2s ease-in-out 0s 1 normal forwards;
    animation: rmf_flip3d-rev 0.2s ease-in-out 0s 1 normal forwards;
}
.rmf_flip3d-animate-next
{
    z-index: 100000;
    -webkit-animation: rmf_flip3d-anm-next 0.3s ease-in-out 0s 1 normal forwards;
    -moz-animation: rmf_flip3d-anm-next 0.3s ease-in-out 0s 1 normal forwards;
    -ms-animation: rmf_flip3d-anm-next 0.3s ease-in-out 0s 1 normal forwards;
    animation: rmf_flip3d-anm-next 0.3s ease-in-out 0s 1 normal forwards;
}

@-webkit-keyframes rmf_flip3d-anm {
    0%{ opacity: 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(-90deg); }
    100%{ opacity: 1; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); }
}
@keyframes rmf_flip3d-anm {
    0%{ opacity: 0; transform: perspective(800px) rotateY(-90deg); }
    100%{ opacity: 1; transform: perspective(800px) rotateY(0deg); }
}
@-webkit-keyframes rmf_flip3d-rev {
    0%{ opacity: 1; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); }
    100%{ opacity: 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(-90deg); }
}
@keyframes rmf_flip3d-rev {
    0%{ opacity: 1; transform: perspective(800px) rotateY(0deg); }
    100%{ opacity: 0; transform: perspective(800px) rotateY(-90deg); }
}

@-webkit-keyframes rmf_flip3d-anm-next {
    0%{ opacity: 1; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); }
    100%{ opacity: 1; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(180deg); }
}
@keyframes rmf_flip3d-anm-next {
    0%{ opacity: 1; transform: perspective(800px) rotateY(0deg); }
    100%{ opacity: 1; transform: perspective(800px) rotateY(180deg); }
}

.ic_btn_close_card_x,
.ic_btn_close_card_x_w
{
    display: inline-block;
    color: #090a0b;
    text-decoration: none;
    text-align: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-size: 0.9em !important;
    background-image: url('../img/ic_btn_x.svg');
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: center center;
    cursor: pointer;
}
.ic_btn_close_card_x_w
{
    background-image: url('../img/ic_btn_x_w.svg');
}