/*************************************
* 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;
    &::before {
        content: '';
        display: block;
        padding-top: 100%;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    @at-root .nb-loc [data-sek-level] .sek-module-inner .sek-nimble-image-wrapper a {
      color: #ffffff;
      &:hover {
        color: #ffffff;
      }
    }
    .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;
      //background-color: rgba(206,206,206,0.5);
      .nb-pro-img-icon {
        font-size: 80px;
        line-height: 1em;
        color: #000000;
        transition: all .3s ease;
      }
      .nb-pro-img-text, .nb-pro-img-text * {
        color: #000000;
        font-size: 16px;
        line-height: 1.5em;
        font-weight: 400;
        transition: all .3s ease;
      }
      .nb-pro-img-text p {
        margin: 0;
        padding: 0;
      }
    }
    //hover color consistent with default value
    &.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;
    &::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-nimble-image-wrapper.nb-mask-expand &,
        // .sek-nimble-image-wrapper.nb-mask-always-shrinked & {
        //     width: 63%;
        //     padding-bottom: 63%;
        // }
        // .sek-nimble-image-wrapper.nb-mask-expand.hover &,
        // .sek-nimble-image-wrapper.nb-mask-expand:hover & {
        //     width: 88%;
        //     padding-bottom: 88%;
        // }
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand:hover &,
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink &,
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-expanded & {
            width: 88%;
            padding-bottom: 88%;
        }
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink:hover &,
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand &,
        .sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-shrinked & {
            width: 63%;
            padding-bottom: 63%;
        }
        // .sek-nimble-image-wrapper.expanded &,
        // .sek-nimble-image-wrapper.nb-mask-expand.hover &,
        // .sek-nimble-image-wrapper.nb-mask-expand:hover & {
        //     transform: scale(1.4);
        // }
    }

    .sek-nimble-image-wrapper.nb-circle-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;
}