.base-grade
{
    background-color: rgba(176, 195, 217, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(176, 195, 217, 0.35);
}

.consumer-grade
{
    background-color: rgba(176, 195, 217, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(176, 195, 217, 0.35);
}

.industrial-grade
{
    background-color: rgba(94, 152, 217, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(94, 152, 217, 0.35);
}

.high-grade
{
    background-color: rgba(75, 105, 255, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(75, 105, 255, 0.35);
}

.mil-spec-grade
{
    background-color: rgba(75, 105, 255, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(75, 105, 255, 0.35);
}

.restricted
{
    background-color: rgba(136, 71, 255, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(136, 71, 255, 0.35);
}

.remarkable
{
    background-color: rgba(136, 71, 255, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(136, 71, 255, 0.35);
}

.classified
{
    background-color: rgba(211, 44, 230, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(211, 44, 230, 0.35);
}

.exotic
{
    background-color: rgba(211, 44, 230, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(211, 44, 230, 0.35);
}

.covert
{
    background-color: rgba(235, 75, 75, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(235, 75, 75, 0.35);
}

.extraordinary
{
    background-color: rgba(235, 75, 75, 0.75);
    box-shadow: 3px 3px 4px 0px rgba(235, 75, 75, 0.35);
}

.base-grade:hover
{
    background-color: rgba(176, 195, 217, 1);
    box-shadow: 5px 5px 6px 0px rgba(176, 195, 217, 0.35);
}

.consumer-grade:hover
{
    background-color: rgba(176, 195, 217, 1);
    box-shadow: 5px 5px 6px 0px rgba(176, 195, 217, 0.35);
}

.industrial-grade:hover
{
    background-color: rgba(94, 152, 217, 1);
    box-shadow: 5px 5px 6px 0px rgba(94, 152, 217, 0.35);
}

.high-grade:hover
{
    background-color: rgba(75, 105, 255, 1);
    box-shadow: 5px 5px 6px 0px rgba(75, 105, 255, 0.35);
}

.mil-spec-grade:hover
{
    background-color: rgba(75, 105, 255, 1);
    box-shadow: 5px 5px 6px 0px rgba(75, 105, 255, 0.35);
}

.restricted:hover
{
    background-color: rgba(136, 71, 255, 1);
    box-shadow: 5px 5px 6px 0px rgba(136, 71, 255, 0.35);
}

.remarkable:hover
{
    background-color: rgba(136, 71, 255, 1);
    box-shadow: 5px 5px 6px 0px rgba(136, 71, 255, 0.35);
}

.classified:hover
{
    background-color: rgba(211, 44, 230, 1);
    box-shadow: 5px 5px 6px 0px rgba(211, 44, 230, 0.35);
}

.exotic:hover
{
    background-color: rgba(211, 44, 230, 1);
    box-shadow: 5px 5px 6px 0px rgba(211, 44, 230, 0.35);
}

.covert:hover
{
    background-color: rgba(235, 75, 75, 1);
    box-shadow: 5px 5px 6px 0px rgba(235, 75, 75, 0.35);
}

.extraordinary:hover
{
    background-color: rgba(235, 75, 75, 1);
    box-shadow: 5px 5px 6px 0px rgba(235, 75, 75, 0.35);
}

.weapon-box
{
    width: 110px;
    height: 110px;
    overflow: hidden;
    border-radius: 5px;
    float: left;
    margin: 5px;
    -webkit-transition: box-shadow 0.5s, background-color 0.5s;
    transition: box-shadow 0.5s, background-color 0.5s;
}

.weapon-box>img
{
    width:100%;
}