/* clients Hover Start  */

/* .overflow-wrapper img.show-image {
    opacity: 1;
}
.clients-wrap:hover>.clients {
    opacity: .25;
}

.opacity-focus:hover>.clients,
.solid.clients {
    opacity: 1;
}

.opacity-focus .clients {
    z-index: 0;
} */


.clients-wrap {
    /* margin: 5% auto 0; */
    padding: 0;
    max-width: 1280px;
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 10px;
}

.clients {
    vertical-align: middle;
    position: relative;
    margin: 5px;
    /* max-width: calc(20% - 20px); */
    max-width: calc(12% - 8px);
    height: 100%;
    width: 100%;
    list-style-type: none;
    display: inline-block;
    text-align: center;
    transition: .2s ease all;
}

.clients:hover .clients-meta {
    opacity: 1;
    visibility: visible;
}

.clients:hover .overflow-wrapper {
    z-index: 5;
    left: 0;
}

.clients-meta {
    position: absolute;
    display: block;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    width: 100%;
    /* min-height: 200px; */
    min-height: 75px;
    background-color: rgb(255, 255, 255);
    text-align: left;
    border: 1px solid rgb(228, 228, 228);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    -webkit-transition: .2s ease all;
    -moz-transition: .2s ease all;
    -ms-transition: .2s ease all;
    -o-transition: .2s ease all;
    transition: .2s ease all;
}
.overflow-wrapper {
    position: relative;
    /* padding-top: calc(100% - 45px); */
    padding-top: calc(100% - 60px);
    width: 100%;
    display: inline-block;
    z-index: 3;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: .2s ease all;
}

.overflow-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    padding: 1px;
    border-radius: 4px 4px 0 0;
    -webkit-transition: .15s ease all;
    -moz-transition: .15s ease all;
    -ms-transition: .15s ease all;
    -o-transition: .15s ease all;
    transition: .15s ease all;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

.clients-logo {
    z-index: 1;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    top: 50%;
    width: 80%;
    height: auto;
    transition: .2s ease all;
    -webkit-animation: fadein .8s;
    -moz-animation: fadein .8s;
    -ms-animation: fadein .8s;
    -o-animation: fadein .8s;
    animation: fadein .8s;
}
/* Sizes for demo */
.square {
    padding: 20%;
}

.smaller {
    padding: 10%;
}
/* clients Hover End  */