@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.select
{
    display:block;
    text-align:center;
}
.select-item
{
    display:inline-block;
    color:#fff;
    background-color:#f46e44;
    border-radius:2px;
    border:1px solid #f46e44;
    cursor:pointer;
    padding:4px 10px;
    margin:5px;
    transition:0.4s;
}
.select-item #short {
    width: 75px;
}
#alphab {
    width: 40px;
}
#hover
{
    display:none

}

.select-item:hover,.select-item.select-item-active
{
    background-color:#fff;
    color:#f46e44;
}
.select-item:hover #hover 
{
    display: block;
}
.select-item:hover #short 
{
    display: none;
}
.select-item.select-item-active #hover
{
    display: block;

}
.select-item.select-item-active #short
{
    display: none;

}

#cards-container
{
    font-family: 'Roboto', sans-serif;
    display:block;
    text-align:center;
    /* padding-left:110px; */

}
#cards-container .card
{
    width:300px;
    height:400px;
    vertical-align:top;
    border-radius:4px;
    border:1px solid #ddd;
    background:#fafafa;
    padding:20px;
    display:inline-block;
    margin:10px;
    overflow:hidden;
}

#cards-container .card img
{
    width:auto;
    padding:3px!important;
    background:#fff;
    /* margin:0!important; */
    /* margin-right:20px!important; */
    /* margin-bottom:20px!important; */
    border: 1px solid #CCCCCC;
    padding: 6px;
    height: auto;
    /*max-width: 97.4%;*/
    max-width: 100%;
    margin: 0.5em 1em 0.5em 0;
}
#cards-container .card hr
{
    margin:0;
    margin-top:20px;
    margin-bottom:10px;
    background:-webkit-linear-gradient(left, rgba(192,192,192,0), rgba(192,192,192,0.75), rgba(192,192,192,0));
    background:-moz-linear-gradient(left, rgba(192,192,192,0), rgba(192,192,192,0.75), rgba(192,192,192,0));
    background:-ms-linear-gradient(left, rgba(192,192,192,0), rgba(192,192,192,0.75), rgba(192,192,192,0));
    background:-o-linear-gradient(left, rgba(192,192,192,0), rgba(192,192,192,0.75), rgba(192,192,192,0));
    background:linear-gradient(left, rgba(192,192,192,0), rgba(192,192,192,0.75), rgba(192,192,192,0));
    clear:both;
}

#cards-container .p {
    font-size: 14px;
}

@media screen and (max-width:500px)
{
#cards-container .card
{
    width:80%;
}
}