.main-page
{
  margin: 80px auto;
  display: inline-block;
}

.main-page img
{
  height: 160px;
  width: 160px;
}

.page
{
  height: 515px;
}

figure
{
  float: left;
  margin: 0px 5px 0px 0px;
}

figcaption 
{
  font-family: 'Nunito', sans-serif;
  text-align: center;
  margin-top: 0px;
}

#aboutImage
{
  animation:aboutAnimation 3s linear;
  -webkit-animation:aboutAnimation 3s linear;
}

@keyframes aboutAnimation
{
    0% { transform: translate3d(-500px,   -300px,0); }
  10% { transform: translate3d(200px,   132px,0); }
   20% { transform: translate3d(400px,-80px,0);}
   30% { transform: translate3d(600px,132px,0);}
   40% { transform: translate3d(665px,-80px,0);}
   50% { transform: translate3d(500px,132px,0);}
   60% { transform: translate3d(300px,-80px,0);}
   70% { transform: translate3d(100px,132px,0);}
}

@-webkit-keyframes aboutAnimation /* Safari and Chrome */
{
    0% { -webkit-transform: translate3d(-500px,   -300px,0); }
  10% { -webkit-transform: translate3d(200px,   132px,0); }
   20% { -webkit-transform: translate3d(400px,-80px,0);}
   30% { -webkit-transform: translate3d(600px,132px,0);}
   40% { -webkit-transform: translate3d(665px,-80px,0);}
   50% { -webkit-transform: translate3d(500px,132px,0);}
   60% { -webkit-transform: translate3d(300px,-80px,0);}
   70% { -webkit-transform: translate3d(100px,132px,0);}
}

#projectsImage
{
  animation:projectsAnimation 3s linear;
  -webkit-animation:projectsAnimation 3s linear;
}

@keyframes projectsAnimation
{
    0% { transform: translate3d(-800px,   600px,0); }
    70% { transform: translate3d(110px,   100px,0); }
}

@-webkit-keyframes projectsAnimation /* Safari and Chrome */
{
    0% { -webkit-transform: translate3d(-800px,   600px,0); }
    70% { -webkit-transform: translate3d(110px,   100px,0); }
}

#servicesImage
{
  animation:servicesAnimation 3s linear;
  -webkit-animation:servicesAnimation 3s linear;
}

@keyframes servicesAnimation
{
    0% { transform: translate3d(700px,   300px,0); }
   10% { transform: translate3d(500px,-80px,0);}
   20% { transform: translate3d(300px,132px,0);}
   30% { transform: translate3d(100px,-80px,0);}
   40% { transform: translate3d(-100px,132px,0);}
   50% { transform: translate3d(-300px,-80px,0);}
   60% { transform: translate3d(-500px,132px,0);}
   70% { transform: translate3d(-300px,-80px,0);}
}

@-webkit-keyframes servicesAnimation /* Safari and Chrome */
{
    0% { -webkit-transform: translate3d(700px,   300px,0); }
   10% { -webkit-transform: translate3d(500px,-80px,0);}
   20% { -webkit-transform: translate3d(300px,132px,0);}
   30% { -webkit-transform: translate3d(100px,-80px,0);}
   40% { -webkit-transform: translate3d(-100px,132px,0);}
   50% { -webkit-transform: translate3d(-300px,-80px,0);}
   60% { -webkit-transform: translate3d(-500px,132px,0);}
   70% { -webkit-transform: translate3d(-300px,-80px,0);}
}

#teamImage
{
  animation:teamAnimation 3s linear;
  -webkit-animation:teamAnimation 3s linear;
}

@keyframes teamAnimation
{
    0% { transform: translate3d(800px,   200px,0); }
    70% { transform: translate3d(-100px,   100px,0); }
}

@-webkit-keyframes teamAnimation /* Safari and Chrome */
{
    0% { -webkit-transform: translate3d(800px,   200px,0); }
    70% { -webkit-transform: translate3d(-100px,   100px,0); }
}

.bounce:hover
{
  animation:bounceHover 0.7s infinite;
  -webkit-animation:bounceHover 0.7s infinite;
}

@keyframes bounceHover
{
    0% { transform: translate3d(0,   0px,0); 
         animation-timing-function: ease-out; }
   50% { transform: translate3d(0,-30px,0); 
         animation-timing-function: ease-in; }
  100% { transform: translate3d(0,   0px,0); }
}

@-webkit-keyframes bounceHover /* Safari and Chrome */
{
    0% { -webkit-transform: translate3d(0,   0px,0); 
         -webkit-animation-timing-function: ease-out; }
   50% { -webkit-transform: translate3d(0,-30px,0); 
         -webkit-animation-timing-function: ease-in; }
  100% { -webkit-transform: translate3d(0,   0px,0); }
}

.footer-main
{
  color: #FFF;
  position: absolute;
  margin-bottom: 90px;
}