/* Animation */

#animation {
    position: fixed;
    opacity: 1;
    bottom: 0;
    right: 0;
    height: 720px;
    width: 726px;
    background: url('/img/animated-portrait.gif') left center;
    animation: play 2.8s steps(29) infinite;
    z-index: -1;
    transition: right .5s linear;
}

/*#animBox {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 720px;
    width: 726px;
}
    height: 720px;
    width: 726px;*/

@keyframes play {
    100% { background-position: -21054px; }
}

.bio > div, .about > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.about > div {            
  transform: translateY(0);
} 

/* Responsive rules */

@media only screen and (max-width: 768px) {
    
    #bio {
        top: 320px;
        width: 75%;
        left: 40px;
    }
    
    #animation {
        opacity: 0;
    }

}

@media only screen and (max-width: 400px) {
    
    #bio {
        top: 320px;
        width: 75%;
        left: 40px;
    }
    
    #animation {
        opacity: 0;
    }

}