@font-face {
    font-family: "alienleague";
    src: url("../../font/alien_league/alienleague.ttf") format("truetype");
}
article {
    width: 25%;
    overflow: auto;
    padding: 1em;
    box-sizing: border-box;
    
    background-color: gray;
    float:left;
    font-family: "Open sans", "Arial", sans-serif;
}

article .apercu {
    background-color: #323230;
    width:100%;
    height:10em;
    background-image: url("http://d3gqasl9vmjfd8.cloudfront.net/abd269ab-d87b-482f-8fb9-303dcf5d6048.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
}

.apercu img {
    max-width: 100%;
    max-height: 100%;
}

article h2 {
    font-family: "alienleague", "Arial black", sans-serif;
}

.description, article h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prix {
    float:right;
}

a:nth-of-type(5n+3) article {
    background-color: #C5C5C5;
}

a:nth-of-type(5n+2) article {
    background-color: #858585;
}

a:nth-of-type(5n+1) article {
    background-color: #959595;
}

a:nth-of-type(5n) article {
    background-color: darkgray;
}

article:hover, a:nth-of-type(n) article:hover {
    background-color: dimgray;
    cursor: pointer;
}