.gallery .gallery-wrapper { text-align: center; position: relative; } .gallery .img-container { margin-bottom: 50px; } .gallery .img-container .img-box { display: inline-block; position: relative; } .gallery .img-container .img-box:hover span { visibility: visible; } .gallery .img-container img { border: 4px solid #dff0fd; border-radius: 3px; cursor: pointer; } .gallery .img-container .title { margin-top: 5px; font-size: 13px; } .gallery .img-container .icon { position: absolute; background: rgba(56, 156, 240, 0.8); height: 48px; width: 48px; visibility: hidden; left: 41%; border-radius: 100%; cursor: pointer; text-align: center; } .gallery .img-container i { display: inline-block; margin-top: 14px; } .gallery .img-container span.edit { top: 23%; } .gallery .img-container span.trash { top: 48%; } .gallery .new-img { display: inline-block; } .gallery .new-img img { border: 2px dashed #dee3e8; cursor: pointer; margin-bottom: 50px; } .gallery .new-img img:hover { opacity: 0.8; border-color: #ccc; } /* gallery blank state */ .no-gallery { border-top: 1px solid #edeff1; padding-top: 40px; box-shadow: 0px 4px 9px -6px rgba(0, 0, 0, 0.12) inset; margin-bottom: 100px; } .no-gallery .center { margin: 0 auto; text-align: center; width: 42%; } .no-gallery .center h6 { color: #364453; font-weight: 600; margin: 30px 0 9px; font-size: 15px; } .no-gallery .center p { color: #364453; font-size: 13px; } .no-gallery .center a { margin-top: 30px; } /*Responsive*/ @media (max-width: 979px) { .gallery .popup { display: none; } }