html, body{ background-color: #000; height:100%; margin:0;padding:0}

#slide1 { background-color: #000000; }
#slide2 { background-color: #202124; }
#slide3 { background-color: #C5C1C8; }
#footer { font-family: Roboto, sans-serif; font-size: 40px; vertical-align: middle; }

@keyframes floating{0%,to{transform:translate(0%,-50%)}25%{transform:translate(5px,calc(-50% + 15px))}50%{transform:translate(10px,calc(-50% + 5px))}75%{transform:translate(0%,calc(-50% + 15px))}}

.float-animation {
position: relative;
top: 290px;
  animation-name: floating;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* .populated { padding-top: 250px; display: block; } */

@keyframes bounce{0%,20%,60%,80%,to{transform: translateY(0)}40%{transform: translateY(-10px)}50%{transform: translateY(5px)}}

.arrow-down{
position: fixed;
bottom: 60px;
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
cursor: pointer;
animation: bounce 3s infinite;
transition: opacity 1.3s ease;
fill: #FFF;
opacity: 1
}