/*** 
=============================================
    Client Page
=============================================
***/
.client-page {
    position: relative;
    display: block;
    background: var(--cleanin-white);
    padding: 120px 0px 90px;
}

.client-page__single {
    position: relative;
    display: block;
    max-width: 270px;
    width: 100%;
    margin: 0 auto 30px;
    -webkit-box-shadow: 0px 3px 6px 2px #ececec;
    box-shadow: 0px 3px 6px 2px #ececec;
    transition: all 700ms ease 100ms;
    z-index: 1;
}

.client-page__single:hover {
    box-shadow: none;
}

.client-page__single::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--cleanin-gray-bg);
    transform: scaleX(0);
    transition: all 700ms ease 100ms;
    z-index: -1;
    content: "";
}

.client-page__single:hover:before {
    transform: scaleY(1);
}

.client-page__single::after {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: var(--cleanin-base);
    transform: scaleX(0);
    transition: all 700ms ease 100ms;
    z-index: -1;
    content: "";
}

.client-page__single:hover::after {
    transform: scaleY(1);
}

.client-page__single a {
    position: relative;
    display: inline-block;
    padding: 20px 0px 20px;
}

.client-page__single a img {
    opacity: .5;
    transition: all 0.2s ease-in-out 0.1s;
}

.client-page__single:hover a img {
    opacity: 1.0;
    transition: all 0.3s ease-in-out 0.1s;
}