/* uservoice list */
.uservoice-list{
    background: #e2e2e2;
    max-width: 100%;
    padding: 20px;
    font-size: 0;
}
.uservoice-list div{max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.uservoice-list a{display:inline-block; background: #FFF; font-size: 14px; width: 31.33%; margin: 0 1% 20px; text-decoration:none; color:#000;} 
.uservoice-list a figure img{width: 100%;}
.uservoice-list a strong, .uservoice-list a span{display:block; line-height:18pt; padding: 10px;}
.uservoice-list a strong{font-size: 20px; padding:10px 10px 0; font-weight: 600;} 
.uservoice-list a small{display: block; color: #fff; float: right; background: #8f8f8f; padding: 5px; margin: 10px;}
.uservoice-list a:hover figure{opacity: 0.9;}
.uservoice-list a:hover strong{color:#45cec1;}

/* uservoice detail */
.uservoice-detail{
    background: #e2e2e2;
    max-width: 100%;
    padding: 20px;
    margin:0 0 -24px;
}

.uservoice-detail div{max-width: 680px; margin: 0 auto; background: #FFF; overflow: hidden;}
.uservoice-detail div figure img{width: 100%;}
.uservoice-detail div strong, .uservoice-detail div span{display:block; line-height:18pt; padding: 20px;}
.uservoice-detail div strong{font-size: 20px; padding:20px 20px 0; font-weight: 600;} 
.uservoice-detail div small{display: block; color: #fff; font-size: 18px; float: right; background: #8f8f8f; padding: 5px; margin: 10px;}

/* @media */
@media(max-width:780px){
.uservoice-list{padding:10px;}
.uservoice-list div{width: auto; margin: 0 auto;}
.uservoice-list a{width: 48%; margin:0 1% 10px}
}

@media(max-width:480px){
    .uservoice-list a{width:auto; margin: 0 0 20px;}
    }