/*--------------------------------------------------------------
# Image Box
--------------------------------------------------------------*/

.pxl-image-box1 {
    .pxl-item--inner {
        position: relative;
        &:hover {
            .image--reveal {
                opacity: 0;
                @include transform(translateX(-20px));
            }
        }
    }
    .pxl-item--button {
        position: absolute;
        bottom: 90px;
        left: -54px;
        z-index: 1;
        @media #{$max-sm} {
            left: 0;
        }
        .text {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            line-height: 21px;
            text-transform: capitalize;
            margin-right: 10px;
        }
        >a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 170px;
            height: 170px;
            animation: icon_bounce infinite linear 5s;            
            min-width: auto;
            padding: 0;
            border-radius: 100%;
            background-color: $secondary_color;
            &:hover {
                background-color: #fff;
                .text {
                    color: $secondary_color;
                }
                .text-arrow {
                    i {
                        &:nth-child(1) {
                            transform: translate(30px, -30px);
                        }
                        &:nth-child(2) {
                            transform: translate(0px, 0px);
                        }
                    }
                }
            }
        }
        .text-arrow {
            position: relative;
            overflow: hidden;
            @include transition(all 500ms ease-in-out);  
            i {
                color: inherit;
                font-size: 14px;
                &:nth-child(1) {
                    color: #fff;
                    display: inline-block;
                    transition: transform 0.5s linear;
                }
                &:nth-child(2) {
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: translate(-30px, 30px);
                    transition: transform 0.5s linear;
                }
            }   
        }
    }
    .image--reveal {
        position: absolute;
        left: 20px;
        bottom: 17px;
        line-height: 1;
        z-index: 1;
        pointer-events: none;
        @include transition(all 500ms ease-in-out);
        @media #{$max-xs} {
            display: none;
        }
    }
    .canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        @extend .pxl-item--flexct;
    }
    .item--image {
        img {
            opacity: 0;
            object-fit: cover;
        }
    }
    .image-back, .map {
        @extend .pxl-spill;
    }
}

.pxl-image-box2 {
    .logo-dark {
        display: none;
    }
    .pxl-item--inner {
     position: relative;
     width: 152px;
     height: 152px;
     cursor: pointer;
     overflow: hidden;
     @extend .pxl-bg-pri-fou;
     @include border-radius(100%);
 }
 .item--text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include transform-origin(center);
}
.item--text div {
    display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 42%;
    font-size: 16px;
    font-weight: 500;
    line-height: 0;
    text-transform: uppercase;
    pointer-events: none;
    mix-blend-mode: difference;
    @extend .pxl-color-fou-pri;
    @include transform-origin(50% 95%);
}
.item--image {
    pointer-events: none;
    @extend .pxl-middle;
}
}

.pxl-image-box3 {
    .item--front {
        position: relative;
        width: 130px;
        height: 135px;
        margin: 0 auto;
        z-index: 1;
        .image3 {
            animation: blink 5s linear infinite;
        }
        .image2 {
            position: absolute;
            right: 7px;
            top: -15px;
            animation: blink 3.5s linear infinite;
        }
        .image1 {
            position: absolute;
            left: 15px;
            top: 10px;
            animation: blink 3s linear infinite;
        }
    }
    .pxl-item--inner {
        position: relative;
        @extend .pxl-custom-transition;
    }
}