body, html {
    height: 100%;
    margin: 0px;
    overflow:hidden;
}

.bg {
    /* The image used */
    background-image: url("images/background.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.footer {

    display: block;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.float-up {
    width: 100%;
    background: #000000;
    color: #fff;
    font-size: 18px;
    font-family: Tahoma;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-name:float-up;
    -moz-animation-name:float-up;
    -o-animation-name:float-up;
    animation-name:float-up;
    -webkit-animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    position:absolute;
}

@-webkit-keyframes float-up {
    0% {
        bottom:-200px;
        opacity:0;
    }

    45% {
        bottom:30px;
        opacity:0.8;
    }
    100% {
        bottom:0px;
        opacity:0.6;
    }
}
@-moz-keyframes float-up {
    0% {
        bottom:-200px;
        opacity:0;
    }

    45% {
        bottom:30px;
        opacity:0.8;
    }
    100% {
        bottom:0px;
        opacity:0.6;
    }
}
@-o-keyframes float-up {
    0% {
        bottom:-200px;
        opacity:0;
    }

    45% {
        bottom:30px;
        opacity:0.8;
    }
    100% {
        bottom:0px;
        opacity:0.6;
    }
}
@-keyframes float-up {
    0% {
        bottom:-200px;
        opacity:0;
    }

    45% {
        bottom:30px;
        opacity:0.8;
    }
    100% {
        bottom:0px;
        opacity:0.6;
    }
}



.logo-float-down {
    width: 100%;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -o-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-animation-name:logo-float-down;
    -moz-animation-name:logo-float-down;
    -o-animation-name:logo-float-down;
    animation-name:logo-float-down;
    -webkit-animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    position:absolute;
}

@-webkit-keyframes logo-float-down {
    0% {
        top:-200px;
    }
    100% {
        top:0px;
    }
}
@-moz-keyframes logo-float-down {
    0% {
        top:-200px;
    }
    100% {
        top:0px;
    }
}
@-o-keyframes logo-float-down {
    0% {
        top:-200px;
    }
    100% {
        top:0px;
    }
}
@-keyframes logo-float-down {
    0% {
        top:-200px;
    }
    100% {
        top:0px;
    }
}