.setareh-brandsbox {
     position: relative;
     z-index: 1;
     overflow: hidden;
     margin: 0 0 30px;
     text-align: center;
     cursor: pointer;
 }
 
 .setareh-brandsbox .pic {
     position: relative;
     z-index: 0;
 }
 
 .setareh-brandsbox .pic::before {
     position: absolute;
     content: "";
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     transition: all .35s;
     pointer-events: none;
 }
 
 .setareh-brandsbox .pic img {
     width: calc(100% + 50px) !important;
     max-width: calc(100% + 50px) !important;
     transition: opacity .35s, transform .35s;
     transform: translate3d(40px, 0, 0);
 }
 
 .setareh-brandsbox .content {
     position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;
     min-height: 25%;
     max-height: 100%;
     text-align: right;
     padding: 30px 30px 20px 30px;
     color: #fff;
     font-size: 1em;
     backface-visibility: hidden;
 }
 
 .setareh-brandsbox .content>* {
     color: inherit;
 }
 
 .setareh-brandsbox .content .title {
     color: black;
     padding: 0;
     margin: 0;
     font-size: medium;
     transform: translate3d(0, 50px, 0);
     transition: transform .35s;
 }
 
 .setareh-brandsbox .content .description {
     margin-top: 15px;
     opacity: 0;
     transform: translate3d(0, 40px, 0);
     transition: opacity .2s, transform .35s;
 }
 
 .setareh-brandsbox:hover img {
     transform: translate3d(0, 0, 0);
     transition-delay: .05s;
     transition-duration: .35s;
 }
 
 .setareh-brandsbox:hover .content .title {
     opacity: 1;
     transform: translate3d(0, 0, 0);
     transition-delay: .05s;
     transition-duration: .35s;
 }
 
 .setareh-brandsbox:hover .content .description {
     opacity: 1;
     transform: translate3d(0, 0, 0);
     transition-delay: .05s;
     transition-duration: .35s;
     color: black;
 }