body {
        background-image: url('assets/media/fh-bg.jpg');
    }

    .stars {
        background:  #0d0417 url("../media/stars.png") repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        z-index: 0;
        overflow: hidden
    }
    .stars:before{content:""; display: block; width: 100%; height: 100%;
        background: transparent url("../media/twinkling.png") repeat;
        background-size: 1000px 1000px;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;

        animation: move-background 45s linear infinite;


    }
    i.circle{position: absolute;border-radius: 50%; z-index: 999; background: #fff;}
    .planet{
        text-align: center;
        width:100%;

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        animation-name: h-item;
        animation-duration: 2s;
        animation-delay: 3s;
        animation-fill-mode: both;

    }

    .planet:before{content:""; width: 100%; height: 50vh; position: absolute; left: 0; right: 0; bottom: 0;   background-image: -moz-linear-gradient( -90deg, rgba(31,119,192,0) 0%, rgb(39,35,100) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgba(31,119,192,0) 0%, rgb(39,35,100) 100%);
        background-image: -ms-linear-gradient( -90deg, rgba(31,119,192,0) 0%, rgb(39,35,100) 100%);
        z-index: 99}

    .planet img {
        position: relative;
        z-index: 99999;
        max-width: 100%;
        top:0;
        animation-name: rotate; /* added animation-name property */
        animation-duration: 100s; /* added animation-duration property */
        animation-iteration-count: infinite; /* added animation-iteration-count property */
        animation-timing-function: linear; /* added animation-timing-function property */
    }


    @keyframes h-item {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }



    @keyframes rotate { /* added keyframes */
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }
    @keyframes move-background {
        0% {
            transform: translate3d(0px, 0px, 0px);
        }
        50% {
            transform: translate3d(1000px, 0px, 0px);
        }
        100% {
            transform: translate3d(0px, 0px, 0px);
        }
    }

    .rotate {
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 50s;
        animation-duration: 50s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }


    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }


    .col.h-item{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}