#Projects
{
    min-height: 400px;
}

.ProjectMainView
{
    padding: 10px 5px;
    transition: all .8s;
}

.ProjectMainView .Image
{
    height: 258px;
    width: 100%;
    background-size: cover;
    background-position: center;
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    transition: all .8s;
}

.ProjectMainView:hover .Image
{
    filter: none;
    -webkit-filter: grayscale(0%);
    -webkit-transform: scale(1.01, 1.01);
    transform: scale(1.01, 1.01);
}

.ProjectMainView .title
{
    font-size: 22px;
    font-weight: bold;
    font-family: YesevaOne;
}

.ProjectMainView .category
{
    font-size: 12px;
    color: gray;
}