/*

.section-background-image div {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.section-background-image {
    width:100%;
    height:100%;
}


From
http://codepen.io/heyvian/pen/oihDk

*/

.universe div {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.universe {
    background-image: radial-gradient(circle, rgba(49, 30, 72, 1), rgba(0,0,0,1));
    overflow:hidden;
    position: absolute;
}

.space{
    position:absolute;
    top:0;
    left:0;
    background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 10px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 10px),
    radial-gradient(white, rgba(188,188,25,1) 2px, transparent 10px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 10px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 30px, 130px 270px, 70px 100px;
    -webkit-animation:spin 350s linear infinite;
    animation:spin 350s linear infinite;
    width:200%;
    height:400%;
    margin:-100% 0 0 -50%;
    opacity:.6;
}

.blackhole-container{
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.blackhole-container:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;

}

.blackhole-wrapper{
    position: relative;
    display: inline-block;
    height: auto;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
}

.blackhole{
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    margin:0 auto;
    border:4px solid rgba(0,0,0,1);
    border-radius:50%;
    -webkit-animation:spin 30s infinite linear;
    animation:spin 30s infinite linear;
    background:#000;
    box-shadow:0 0 50px 50px rgba(0,0,0,1);
}

.debris{
    position:absolute;
    top:160%;
    left:100%;
    width:28px;
    height:20px;
    margin:-5px 0 0 -5px;
    background:rgba(255,255,255,1) url('../images/email-icon.jpg');
    border-radius:0%;
    -webkit-animation:drain 5s infinite ease-in;
    animation:drain 5s infinite ease-in;
}

.debris + .debris{
    left:100%;
    -webkit-animation-delay:1200ms;
    animation-delay:1200ms;
    transform:scale(.7);
    -webkit-animation-duration:7s;
    animation-duration:7s;
}

.debris + .debris + .debris{
    top:0%;
    left:185%;
    -webkit-animation-delay:500ms;
    animation-delay:500ms;
    transform:scale(.8);
    -webkit-animation-duration:4s;
    animation-duration:4s;
}

.debris + .debris + .debris + .debris{
    top:200%;
    left:250%;
    -webkit-animation-delay:700ms;
    animation-delay:700ms;
    transform:scale(.4);
    -webkit-animation-duration:2s;
    animation-duration:2s;
}

.debris + .debris + .debris + .debris + .debris{
    top:150%;
    left:330%;
    -webkit-animation-delay:200ms;
    animation-delay:200ms;
    transform:scale(.5);
}
.debris + .debris + .debris + .debris + .debris + .debris{
    top:-380%;
    left:-300%;
    -webkit-animation-delay:2000ms;
    animation-delay:2000ms;
    transform:scale(.7);
    -webkit-animation-duration:6s;
    animation-duration:6s;
}

.debris + .debris + .debris + .debris + .debris + .debris + .debris{
    top:400%;
    left:200%;
    -webkit-animation-delay:3000ms;
    animation-delay:3000ms;
    transform:scale(.3);
}

.debris + .debris + .debris + .debris + .debris + .debris + .debris + .debris{
    top:500%;
    left:180%;
    -webkit-animation-delay:400ms;
    animation-delay:400ms;
    transform:scale(1.2);

}



@-webkit-keyframes drain{
    95%{
        opacity:1;
    }
    to{
        top:50%;
        left:50%;
        opacity:0;
    }
}



@-webkit-keyframes spin{
    to{
        transform:rotate(360deg);
    }
}


@keyframes drain{
    95%{
        opacity:1;
    }
    to{
        top:50%;
        left:50%;
        opacity:0;
    }
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}


/*
<!-- html: -->

<div class="space"></div>
  <div class="container">
  <div class="wrapper">
     <div class="blackhole">
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
       <div class="debris"></div>
    </div>
  </div>
</div>
*/