/************************************* * NIMBLE IMAGE MODULE *************************************/ .sek-nimble-image-wrapper { max-width: 100%; overflow: hidden; width: 100%; position: relative; display: block; background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transform-style: preserve-3d; } .sek-nimble-image-wrapper::before { content: ''; display: block; padding-top: 100%; } .nb-loc [data-sek-level] .sek-module-inner .sek-nimble-image-wrapper a { color: #ffffff; } .nb-loc [data-sek-level] .sek-module-inner .sek-nimble-image-wrapper a:hover { color: #ffffff; } .sek-nimble-image-wrapper .nb-icon-text-wrapper { position: absolute; width: 100%; height: 100%; z-index: 1; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; } .sek-nimble-image-wrapper .nb-icon-text-wrapper .nb-pro-img-icon { font-size: 80px; line-height: 1em; color: #000000; transition: all .3s ease; } .sek-nimble-image-wrapper .nb-icon-text-wrapper .nb-pro-img-text, .sek-nimble-image-wrapper .nb-icon-text-wrapper .nb-pro-img-text * { color: #000000; font-size: 16px; line-height: 1.5em; font-weight: 400; transition: all .3s ease; } .sek-nimble-image-wrapper .nb-icon-text-wrapper .nb-pro-img-text p { margin: 0; padding: 0; } .sek-nimble-image-wrapper.nb-icon-has-hover-color:hover .nb-pro-img-icon { color: #969696; } .sek-nimble-image-mask { position: absolute; border-color: #fff; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; } .sek-nimble-image-mask::before { position: absolute; content: ''; z-index: 1; border: 150vw solid; border-color: inherit; box-sizing: content-box; transition: all .3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand:hover .sek-nimble-image-mask::before, .sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink .sek-nimble-image-mask::before, .sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-expanded .sek-nimble-image-mask::before { width: 88%; padding-bottom: 88%; } .sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink:hover .sek-nimble-image-mask::before, .sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand .sek-nimble-image-mask::before, .sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-shrinked .sek-nimble-image-mask::before { width: 63%; padding-bottom: 63%; } .sek-nimble-image-wrapper.nb-circle-mask .sek-nimble-image-mask::before { border-radius: 50%; } .sek-nimble-image { position: absolute; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 0; top: 0; }