.head-bg {
    /* background-image: url('public/images/head-bg.png');
    height: 639px; */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}

.figure-64 {
    height: 64px;
    width: 64px;
    background: #2e368f;
    background: linear-gradient(135deg,
        rgba(46,54,143,1) 0%,
        rgba(128,128,128,1) 75%,
        rgba(253,30,41,1) 100%);
    margin: auto;
}

.figure-64:hover {
    background: #fd1e29;
    background: linear-gradient(135deg,
        rgba(46,54,143,1) 0%,
        rgba(128,128,128,1) 25%,
        rgba(253,30,41,1) 100%);
}

.figure-clipboard {
    mask: url('../images/icon-clipboard.png');
    -webkit-mask: url('../images/icon-clipboard.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-clipboard-ok {
    mask: url('../images/icon-clipboard-ok.png');
    -webkit-mask: url('../images/icon-clipboard-ok.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-monitor {
    mask: url('../images/icon-monitor.png');
    -webkit-mask: url('../images/icon-monitor.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-team {
    mask: url('../images/icon-team.png');
    -webkit-mask: url('../images/icon-team.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-communication {
    mask: url('../images/icon-communication.png');
    -webkit-mask: url('../images/icon-communication.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-voip {
    mask: url('../images/icon-voip.png');
    -webkit-mask: url('../images/icon-voip.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-emobility {
    mask: url('../images/icon-emobility.png');
    -webkit-mask: url('../images/icon-emobility.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-conversation {
    mask: url('../images/icon-conversation.png');
    -webkit-mask: url('../images/icon-conversation.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-development {
    mask: url('../images/icon-development.png');
    -webkit-mask: url('../images/icon-development.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.figure-customer-service {
    mask: url('../images/icon-customer-service.png');
    -webkit-mask: url('../images/icon-customer-service.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.hlContent {
    color: #000;
    position: relative;
    height: 100%;
    width: 100%;
}

.hlOverlay {
    position: absolute;
    top: 0;
    left: 0;
    background: grey;
    opacity: 0.2;
    height: 100%;
    width: 100%;
    display: block;
    /*z-index: 100;*/
}

.hlContent:hover .hlOverlay {
    opacity: 0;
}