/* =========================================================
   EARTH
========================================================= */

.earth-wrapper{

    position:absolute;

    right:-220px;

    bottom:-220px;

    z-index:3;

    animation:
        earthApproach 5s ease-out forwards;

}

.earth{

    width:700px;
    height:700px;

    border-radius:50%;

    background:url("../img/earth.png") center/cover no-repeat;

    animation:
        earthRotate 18s linear infinite,
        earthPulse 4s ease-in-out infinite;

}

/* =========================================================
   EARTH ANIMATIONS
========================================================= */

@keyframes earthRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes earthPulse{

    0%{

        filter:drop-shadow(0 0 30px rgba(0,150,255,.45));

    }

    50%{

        filter:drop-shadow(0 0 60px rgba(0,180,255,.80));

    }

    100%{

        filter:drop-shadow(0 0 30px rgba(0,150,255,.45));

    }

}

@keyframes earthApproach{

    from{

        transform:scale(.45);

    }

    to{

        transform:scale(1.55);

    }

}