boPrompter.css

.bop_screen {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.25);
    perspective: 800px;
    z-index: 10;
}

.bop_card {
    font-family: "Segoe UI",Arial,sans-serif;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 2px;
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.19)!important;
}

.bop_card--container:after {
    content:"";
    display:table;
    clear:both;
}

.bop_card--container {
    padding:0.01em 16px;
}

.bop_card--header {
    color:#000!important;
    background-color:#f1f1f1!important;
}

.bop_card--header h1 {
    font-weight: 400;
    margin: 10px 0;
}

.bop_close_btn {
    width: 100%;
    border:none;
    display:inline-block;
    outline:0;
    padding:6px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none!important;
    color:#fff;
    background-color:#000;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    -webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
    transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
}

.bop_close_btn:hover {
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.bop_card hr {
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0;
    border:0;
    border-top:1px solid #eee;
    margin:10px 0;
}

.bop_card--container div {
    margin:20px 0;
}

@-webkit-keyframes bop_card_kf_webkit {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) rotateY(-90deg);
    }

    60% {
        opacity: 0.8;
        -webkit-transform: translate(-50%, -50%) rotateY(20deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    }
}

@keyframes bop_card_kf {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(-90deg);
    }

    70% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(20deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(0deg);
    }
}

.bop_card_anim {
    opacity:0;
    transform-style: preserve-3d;
    -webkit-animation: bop_card_kf_webkit 0.5s linear forwards;
    animation: bop_card_kf 0.5s linear forwards;
}