#cinematic
{
    position: relative;
    height: calc(400px - 3px);
    width: 100%;
    z-index: 1;
    background:rgb(135, 182, 219);
    background: #4B79A1;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #283E51, #0A2342);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #283E51, #0A2342); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -olinear-gradient(to top, #283E51, #0A2342); 
    
    border-bottom: rgb(40, 44, 40) 3px solid;
}
.stars {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    display:block;
    background:url("../img/stars.png") repeat top center;
    z-index:0;
    animation: 240s linear starAnimation infinite;
  }
  @keyframes starAnimation {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: 2000px;
    }
}
#ship
{
    position: absolute;
    width: 200px;
    height: 100px;
    top:300px;
    left:calc(50% - 200px);
    background-color:rgb(81, 99, 99);
    background:url("../img/ship.png") no-repeat;
    
    transform: rotate(30deg);
    z-index:1;
}
.crash
{
    animation: 1s ease-in crashAnimation;
    
}
@keyframes crashAnimation {
    from {
        top:0px;
        left:0px;
    }
    to {
        top:300px;
        left:calc(50% - 200px);
    }
}
.takeOff
{
    animation: 3s ease-out takeoffAnimation;
    visibility: hidden;
}

@keyframes takeoffAnimation {
    0% {
        top:300px;
        left:calc(50% - 200px);
        visibility: visible;
    }
    40% {
        top:280px;
        left:calc(50% - 250px);
        transform: rotate(-5deg);
    }
    100% {
        top:-200px;
        left:90%;
        visibility: hidden;
        transform: rotate(-30deg);
    }
}
#smoke
{
    position: absolute;
    width: 347px;
    height: 312px;
    top:calc(400px - 200px);
    left:calc(50% - 200px);
    background: url("../img/source.gif");
    z-index: 10;
    animation: 0.8s ease-in 1s smokeAnimation;
    visibility: hidden;
}
@keyframes smokeAnimation {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}