.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat;
  height: 200px;
  width: 400px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -200px;
  transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes walk-cycle {
  0% {background-position: 0 0; }
  100% {background-position: 0 -2391px; }
}

.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0);
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background:  url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg {
  0% { background-position: -3584px 100%;}
  100% {background-position: 0 100%; }
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background:  url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {
  0% { background-position: -3000px 100%;}
  100% {background-position: 0 100%; }
}

.background {
  background-image:
    url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}

body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
}

#main-image{
    height: 500px;
    background: url('images/main.jpg') center;
}

.wrapper{
    width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

 /*--------suite--------------------*/


 #banniere_image
 {
     margin-top: 15px;
     height: 200px;
     border-radius: 5px;
     background: url('images/pt.jpg') no-repeat;
     position: relative;
     box-shadow: 0px 4px 4px #1c1a19;
     margin-bottom: 25px;
 }

 #banniere_description
 {
     position: absolute;
     bottom: 0;
     border-radius: 0px 0px 5px 5px;
     width: 95.5%;
     height: 33px;
     padding-top: 15px;
     padding-left: 4px;
     background-color: rgba(24,24,24,0.5);
     color: white;
     font-size: 0.8em;

 }

 .bouton_rouge
 {
     height: 25px;
     position: absolute;
     right: 25px;
     bottom: 550px;
     background: url('images/fond_degraderouge.png') repeat-x;
     border: 1px solid #760001;
     border-radius: 5px;
     font-size: 1.2em;
     text-align: center;
     padding: 3px 8px 0px 8px;
     color: white;
     text-decoration: none;
 }

 .bouton_rouge img
 {
     border: 0;
 }

.kourou{
  color:blue;
}