.popup {
    z-index: 60;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    overflow: hidden;
    user-select: none;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #000;
        opacity: 0.6;
    }

    .holder {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 0 20px;
        text-align: center;
        overflow: visible;
        -webkit-transform: translateY(50%);
        -moz-transform: translateY(50%);
        -ms-transform: translateY(50%);
        -o-transform: translateY(50%);
        transform: translateY(50%);

        .holdem {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }

    .view {
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
        min-height: 100px;
        max-width: 450px;
        min-width: 220px;
        background-color: #fff;
        padding: 24px 20px 8px 20px;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 0 150px #222, 0 0 8px #111;
        margin: auto;

        .title {
            color: #444;
            font: 900 22px/1.25em 'MuseoFast', Helvetica, Arial, sans-serif;
        }

        .desc {
            font-size: 17px;
            margin: 12px 0;
            line-height: 22px;
        }

        @media only screen and (min-width: 460px) {
            .title {
                font-size: 26px;
            }
        }        
    }

    .mm_arrow {
        position: absolute;
        top: 100px;
        right: 100px;
        width: 100px;
    }
}