.card {
    /*width: 365px;*/
    margin-bottom: 22px;
}

    .card h3 {
        font-weight: 300;
    }

    .card .menu-content {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        .card .menu-content::before, .card .menu-content::after {
            content: '';
            display: table;
        }

        .card .menu-content::after {
            clear: both;
        }

        .card .menu-content li {
            display: inline-block;
        }

        .card .menu-content a {
            color: #fff;
        }

        .card .menu-content span {
            position: absolute;
            left: 50%;
            top: 0;
            font-size: 10px;
            font-weight: 700;            
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

    .card .wrapper {
        background-color: #fff;
        min-height: 450px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 3px 4px 0 rgba(201,201,201,.5);
        border: 1px solid #ccc;
        cursor: pointer;
    }

        .card .wrapper:hover .data {
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

    .card .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        /*-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);*/
        -ms-transform: translateY(46px);
        -webkit-transform: translateY(calc(30px + 1em));
        transform: translateY(calc(30px + 1em));
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
    }

        .card .data .content {
            padding: 1em;
            position: relative;
            z-index: 1;
        }

    .card .author {
        font-size: 12px;
    }

    .card .title {
        margin: 0 0 5px;
        font-weight: bold;
        font-size: 16px;
        color: #555;
        font-family: 'Roboto Slab', serif;
    }

    .card .candidate-name {
        color: #7c7c7d;
        margin-bottom: 0;
        font-size: 15px;
        margin-top: 5px;
    }

    .card .date {
        float: left;
        font-size: 14px;
        color: #b1b1b3;
    }

        .card .date span {
            display: block;
            text-align: center;
        }


    .card .ie-purpose {
        float: left;
        font-size: 12px;
        color: #b1b1b3;
    }


    .card .amount {
        float: right;
        font-weight: bold;
        font-size: 14px;
    }

    .card .support-oppose {
        float: right;
        padding-right: 5px;
        margin-bottom: 10px;
    }

    .card .text {
        height: 30px;
        margin: 0;        
    }

    .card input[type='checkbox'] {
        display: none;
    }

        .card input[type='checkbox']:checked + .menu-content {
            -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
        }

    .card .content {
        background-color: #fff;
        border-top: 1px solid #eee;
    }

    .card .menu-button {
        position: absolute;
        z-index: 999;
        top: 10px;
        right: 16px;
        text-align: center;
        cursor: pointer;
    }

        .card .menu-button span {
            width: 5px;
            height: 5px;
            background-color: gray;
            color: gray;
            position: relative;
            display: inline-block;
            border-radius: 50%;
        }

            .card .menu-button span::after, .card .menu-button span::before {
                content: '';
                display: block;
                width: 5px;
                height: 5px;
                background-color: currentColor;
                position: absolute;
                border-radius: 50%;
            }

            .card .menu-button span::before {
                left: -10px;
            }

            .card .menu-button span::after {
                right: -10px;
            }

    .card .menu-content {
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

        .card .menu-content li {
            width: 33.333333%;
            float: left;
            background-color: #77d7b9;
            height: 60px;
            position: relative;
        }

        .card .menu-content a {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 24px;
        }

        .card .menu-content span {
            top: -10px;
        }

.support {
    border-radius: 5px;
    padding: 4px 6px;    
    font-weight: 300;
    font-size: 12px;
    background-color: #CFF0C9;
    color: #317353;
    border: 1px solid #9FE0A0;
}

.oppose {
    border-radius: 5px;
    padding: 4px 6px;    
    font-weight: 300;
    font-size: 12px;
    color: white;    
    background-color: #EC9488;
    color: #fff;
}

.notdetermined {
    border-radius: 5px;
    padding: 4px 6px;    
    font-weight: 300;
    font-size: 12px;
    background-color: #ddd;
    color: #777;
}



/******************* plyr - start *******************/

.plyr__video-wrapper {
    background: #fff;
}
.plyr--video .plyr__controls {
    padding: 20px 10px 10px;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgb(81,76,73,0.5))); 
    background: linear-gradient(rgba(0,0,0,0),rgb(81,76,73,0.5));

    width: 80%;
    margin: 0 auto;
}
.plyr__play-large,
.plyr .plyr__controls button.tab-focus:focus, 
.plyr .plyr__controls button:hover {
     background: #96b7d8;
}
.plyr__progress--played, .plyr__volume--display {
    /*color: #f27900 !important;*/
}

/******************* plyr - end *******************/