.logo-box {
    display: block;
    position: relative;
    text-align: center;
    overflow: hidden
}

.logo-box img {
    width: 100%;
    display: block
}

.logo-box .logos-item-content {
    position: absolute;
    background: rgba(245, 245, 245, .9);
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.logo-box .logos-item-content:before {
    content: "";
    background: 0 0;
    position: absolute;
    left: -3px;
    top: -3px;
    right: -3px;
    bottom: -3px;
    border: 1px solid rgba(245, 245, 245, .8)
}

.logo-box .logos-item-content:after {
    content: "";
    background: 0 0;
    position: absolute;
    left: -6px;
    top: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid rgba(245, 245, 245, .8)
}

.logo-box h3 {
    margin: 0;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out, -moz-transform .3s ease-in-out, -o-transform .3s ease-in-out, transform .3s ease-in-out;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.logo-box h3 a {
    text-decoration: none
}

.logo-box .logos-cats {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out, -moz-transform .3s ease-in-out, -o-transform .3s ease-in-out, transform .3s ease-in-out;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
    color: #999
}

.logo-box .logos-item-content-inner {
    position: absolute;
    width: 100%;
    z-index: 99998;
    top: 50%;
    padding: 10px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.logo-box .logos-cats a {
    color: #999;
    font-family: open sans, sans-serif;
    font-size: 12px;
    text-transform: lowercase;
    text-decoration: none
}

.logo-box .logos-cats a:hover {
    color: #000
}

.logo-box:hover .logos-item-content {
    opacity: 1;
    visibility: visible
}

.logo-box:hover h3 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.logo-box:hover .logos-cats {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}
