/* ==================================================
   GLOBAL ORNAMENTS
================================================== */

.ornament{

    position:fixed;

    pointer-events:none;

    z-index:1;

    mix-blend-mode:screen;

    will-change:transform;

    animation-timing-function:linear;

    animation-iteration-count:infinite;
}

/* ==================================================
   ORNAMENT 1
================================================== */

.ornament-1{

    top:2%;

    left:1%;

    width:220px;

    opacity:.08;

    animation:
    floatOne 4s infinite alternate;
}

/* ==================================================
   ORNAMENT 2
================================================== */

.ornament-2{

    top:18%;

    right:2%;

    width:120px;

    opacity:.14;

    animation:
    floatTwo 5s infinite alternate;
}

/* ==================================================
   ORNAMENT 3
================================================== */

.ornament-3{

    top:65%;

    left:4%;

    width:260px;

    opacity:.07;

    animation:
    floatThree 6s infinite alternate;
}

/* ==================================================
   ORNAMENT 4
================================================== */

.ornament-4{

    bottom:10%;

    right:5%;

    width:160px;

    opacity:.09;

    animation:
    floatFour 5.5s infinite alternate;
}

/* ==================================================
   ORNAMENT 5
================================================== */

.ornament-5{

    top:40%;

    left:45%;

    width:90px;

    opacity:.07;

    animation:
    floatFive 7s infinite alternate;
}

/* ==================================================
   FLOAT 1
================================================== */

@keyframes floatOne{

    0%{

        transform:
        translate(0px,0px)
        rotate(0deg)
        scale(1);
    }

    100%{

        transform:
        translate(300px,-180px)
        rotate(35deg)
        scale(1.2);
    }
}

/* ==================================================
   FLOAT 2
================================================== */

@keyframes floatTwo{

    0%{

        transform:
        translate(0px,0px)
        rotate(0deg);
    }

    100%{

        transform:
        translate(-320px,240px)
        rotate(-40deg);
    }
}

/* ==================================================
   FLOAT 3
================================================== */

@keyframes floatThree{

    0%{

        transform:
        translate(0px,0px)
        scale(1);
    }

    100%{

        transform:
        translate(420px,-260px)
        scale(.75);
    }
}

/* ==================================================
   FLOAT 4
================================================== */

@keyframes floatFour{

    0%{

        transform:
        translate(0px,0px)
        rotate(0deg);
    }

    100%{

        transform:
        translate(-260px,-260px)
        rotate(50deg);
    }
}

/* ==================================================
   FLOAT 5
================================================== */

@keyframes floatFive{

    0%{

        transform:
        translate(0px,0px)
        scale(.9);
    }

    100%{

        transform:
        translate(-300px,220px)
        scale(1.4);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:900px){

    .ornament-1{

        width:120px;
    }

    .ornament-2{

        width:70px;
    }

    .ornament-3{

        width:140px;
    }

    .ornament-4{

        width:90px;
    }

    .ornament-5{

        width:60px;
    }
}