.champion-tags-holder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center!important;
    justify-content: space-evenly;
    margin-bottom: 15px;
}
.champion-tag {
    -ms-flex: 0 0 calc((100% - 70px) / 7);
    flex: 0 0 calc((100% - 70px) / 7);
    max-width: calc((100% - 70px) / 7);
    padding: 5px 10px;
    position: relative;
    margin: 5px;
    color: #c9aa71;
    border: 2px solid #6b5835;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
    cursor: pointer;
}
.champion-tag.active {
    background: #6b5835;
    color: #f1e6d0;
}
.champion-tag img {
    max-width: 25px;
    margin-right: 5px;
}
.champions-holder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center!important;
    justify-content: space-evenly;
    margin-bottom: 15px;
}
.champion {
    -ms-flex: 0 0 52px;
    flex: 0 0 52px;
    max-width: 52px;
    position: relative;
    margin: 5px;
    border: 2px solid #6b5835;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.75);
}
.champion .mask {
    background: rgba(0, 0, 0, 0.25);
    transition: 0.4s;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s;
}
.champion:hover .mask {
    background: rgba(0, 0, 0, 0);
}
.champion.not-active .mask {
    background: rgba(0, 0, 0, 0.75);
    transition: 0.1s;
}
@media (max-width: 767px) {
    .champion-tag {
        text-align: center;
    }
    .champion-tag img {
        margin: 0;
    }
    .champion-tag span {
       display: none;
    }
}
@media (max-width: 475px) {
    .champion-tag {
        -ms-flex: 0 0 calc((100% - 70px) / 4);
        flex: 0 0 calc((100% - 70px) / 4);
        max-width: calc((100% - 70px) / 4);
    }
}
