.wdk-field-files .wdk-listing-image { object-fit: cover; object-position: center center; width: 100%; height: 200px; max-width: 100%; display: block; overflow: hidden; } .wdk-field-files .wdk-listing-image.auto_height { object-fit: initial !important; height: auto !important; } .wdk-field-files figure figcaption { text-align: center; color: #232425; } .wdk-field-files figure figcaption a { color: inherit; text-decoration: none; } .wdk-field-files figure figcaption:hover { color: #0074E4; } .wdk-field-files .files-row { margin-top: 15px; } .wdk-field-files .files-row ul.files, .wdk-field-files .files-row ul.files li { padding: 0; margin: 0; list-style: none; } .wdk-field-files .files-row ul.files li:not(:last-child) { margin-bottom: 5px; } .wdk-field-files .files-row .list-item a { display: inline-flex; align-items: center; text-decoration: none; color: #232425; } .wdk-field-files .files-row .list-item a .wdk-listing-file-icon { max-height: 25px; max-width: 25px; display: inline-block; margin-right: 5px; } .wdk-field-files .files-row .list-item a:hover { color: #0074E4; } .wdk-field-files.wdk_js_gallery { /* animation */ } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card { position: relative; cursor: pointer; display: block; } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card .file.wdk-listing-image { object-fit: contain !important; } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card:before { content: ''; opacity: 0; left: 0; width: 100%; height: 100%; top: 0; position: absolute; background: rgba(0, 0, 0, 0.65); -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out; transition: opacity .3s ease-out, -webkit-transform .3s ease-out; -o-transition: transform .3s ease-out, opacity .3s ease-out; transition: transform .3s ease-out, opacity .3s ease-out; transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out; will-change: auto; z-index: 1; } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card:hover:before { opacity: 1; -webkit-transition: opacity .3s ease-in, -webkit-transform .3s ease-in; transition: opacity .3s ease-in, -webkit-transform .3s ease-in; -o-transition: transform .3s ease-in, opacity .3s ease-in; transition: transform .3s ease-in, opacity .3s ease-in; transition: transform .3s ease-in, opacity .3s ease-in, -webkit-transform .3s ease-in; } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card:after { content: ''; opacity: 0; left: 0; width: 100%; height: 100%; top: 0; position: absolute; background: url(../../../../public/img/plus.png) center center no-repeat; -webkit-background-size: 50px 50px; background-size: 50px 50px; -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out; transition: opacity .3s ease-out, -webkit-transform .3s ease-out; -o-transition: transform .3s ease-out, opacity .3s ease-out; transition: transform .3s ease-out, opacity .3s ease-out; transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out; will-change: auto; z-index: 2; } .wdk-field-files.wdk_js_gallery .wdk-listing-image-card:hover:after { opacity: 1; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: opacity .3s ease-in, -webkit-transform .3s ease-in; transition: opacity .3s ease-in, -webkit-transform .3s ease-in; -o-transition: transform .3s ease-in, opacity .3s ease-in; transition: transform .3s ease-in, opacity .3s ease-in; transition: transform .3s ease-in, opacity .3s ease-in, -webkit-transform .3s ease-in; }