/*------------------------------------*\
    #Client
\*------------------------------------*/

.clients {
    padding-top   : 0;
    padding-bottom: 0;
    border-top    : 1px solid #eaeaea;
    overflow      : visible;

    &.bg-grey {
        color: var(--global--color-gray);
    }

    .client {
        padding-top   : 60px;
        padding-bottom: 60px;
        cursor        : pointer;
        transition    : 0.3s ease;
        width         : 150px;
        margin-right  : auto;
        margin-left   : auto;
        position      : relative;

        @media #{$noteBook} {
            width: 130px;
        }

        &:hover {
            &::before {
                width: 100%;
            }
        }

        &::before {
            content         : '';
            position        : absolute;
            top             : -1px;
            left            : 50%;
            transform       : translateX(-50%);
            width           : 0%;
            height          : 1px;
            transition      : 0.3s ease-in-out;
            background-color: var(--global--color-primary);
        }

        a {
            position: absolute;
            width   : 100%;
            height  : 100%;
            top     : 0;
            left    : 0;
            right   : 0;
            z-index : 2;
        }

        img {
            max-width   : 100%;
            width       : auto;
            display     : block;
            margin-right: auto;
            margin-left : auto;
        }
    }
}

.certificate {
    img {
        display: block;
        margin : 0 auto;
    }
}