/*
==========================================================

PremiumZone

Version :
3.0.0

File :
assets/css/ornament.css

Description :
PremiumZone Corner Ornament

==========================================================
*/

/* ==========================================================
   BASE
========================================================== */

.pz-ornament{

    position:absolute;

    display:block;

    background:#00F3FF;

    opacity:.95;

    pointer-events:none;

    box-shadow:

        0 0 4px #00F3FF,

        0 0 10px rgba(

            0,

            243,

            255,

            .55

        );

    animation-duration:1800ms;

    animation-timing-function:ease-in-out;

    animation-iteration-count:infinite;

    animation-delay:

        var(--delay);

}

/* ==========================================================
   SHAPE
========================================================== */

.pz-ornament-v{

    width:2px;

    height:8px;

    animation-name:

        pzMoveVertical;

}

.pz-ornament-h{

    width:8px;

    height:2px;

    animation-name:

        pzMoveHorizontal;

}

/* ==========================================================
   TOP LEFT
========================================================== */

.pz-corner-tl .pz-ornament-v0{

    left:-8px;

    top:-2px;

}

.pz-corner-tl .pz-ornament-v1{

    left:-8px;

    top:8px;

}

.pz-corner-tl .pz-ornament-v2{

    left:-8px;

    top:18px;

}

.pz-corner-tl .pz-ornament-h0{

    top:-8px;

    left:-2px;

}

.pz-corner-tl .pz-ornament-h1{

    top:-8px;

    left:8px;

}

.pz-corner-tl .pz-ornament-h2{

    top:-8px;

    left:18px;

}

/* ==========================================================
   TOP RIGHT
========================================================== */

.pz-corner-tr .pz-ornament-v0{

    right:-8px;

    top:-2px;

}

.pz-corner-tr .pz-ornament-v1{

    right:-8px;

    top:8px;

}

.pz-corner-tr .pz-ornament-v2{

    right:-8px;

    top:18px;

}

.pz-corner-tr .pz-ornament-h0{

    top:-8px;

    right:-2px;

}

.pz-corner-tr .pz-ornament-h1{

    top:-8px;

    right:8px;

}

.pz-corner-tr .pz-ornament-h2{

    top:-8px;

    right:18px;

}

/* ==========================================================
   BOTTOM LEFT
========================================================== */

.pz-corner-bl .pz-ornament-v0{

    left:-8px;

    bottom:-2px;

}

.pz-corner-bl .pz-ornament-v1{

    left:-8px;

    bottom:8px;

}

.pz-corner-bl .pz-ornament-v2{

    left:-8px;

    bottom:18px;

}

.pz-corner-bl .pz-ornament-h0{

    bottom:-8px;

    left:-2px;

}

.pz-corner-bl .pz-ornament-h1{

    bottom:-8px;

    left:8px;

}

.pz-corner-bl .pz-ornament-h2{

    bottom:-8px;

    left:18px;

}

/* ==========================================================
   BOTTOM RIGHT
========================================================== */

.pz-corner-br .pz-ornament-v0{

    right:-8px;

    bottom:-2px;

}

.pz-corner-br .pz-ornament-v1{

    right:-8px;

    bottom:8px;

}

.pz-corner-br .pz-ornament-v2{

    right:-8px;

    bottom:18px;

}

.pz-corner-br .pz-ornament-h0{

    bottom:-8px;

    right:-2px;

}

.pz-corner-br .pz-ornament-h1{

    bottom:-8px;

    right:8px;

}

.pz-corner-br .pz-ornament-h2{

    bottom:-8px;

    right:18px;

}

/* ==========================================================
   MOTION
========================================================== */

@keyframes pzMoveVertical{

    0%{

        transform:

            translateY(-2px);

    }

    50%{

        transform:

            translateY(0);

    }

    100%{

        transform:

            translateY(-2px);

    }

}

@keyframes pzMoveHorizontal{

    0%{

        transform:

            translateX(-2px);

    }

    50%{

        transform:

            translateX(0);

    }

    100%{

        transform:

            translateX(-2px);

    }

}