#animation{
   position:relative;
   z-index: 0;
   width:100%;
   height:600px;
   margin:0;
 
}
#vague{
   background: url(../images/bg_animation.png) no-repeat bottom right;
   background-size: contain;
   position: absolute;
   bottom:0;
   left:0;
   z-index: 1;
   width: 100%;
   height: 600px;
}
#sable{
   position: absolute;
   height: 32px;
   background: url(../images/sable.png) repeat-x left top;
   background-size:auto 32px;
   bottom:-30px;
   left:0;
   width: 100%;
}


/*@media screen and (min-width: 760px)  {
  #phare{
      right:2%;
      bottom:140px;
  }
}
@media screen and (min-width: 1260px)  {
  #phare{
      right:2%;
      bottom:60px;
  }
}
@media screen and (min-width: 1360px)  {
  #phare{
      right:6%;
      bottom:60px;
  }
}*/

#carousel .foo{
    position: relative;
    width:100%;
    height:600px;
    float: left;
}

#carousel{
  position: relative;
  z-index: 10;
  width:100%;
  height:600px;
}
.wrapper_animation{
  width:90%;
  margin:0 5%;
  position: relative;
}
.col_animation{
  width:50%;
  height: 500px;
  float: left;
  position: relative;
}
#carousel h2{
  font-family: 'Alegreya',arial,sans-serif;
  font-size:6em;
  line-height: 0.8em;
  font-weight: bold;
  color:#000;
  margin-bottom:20px
}
#carousel p{
  font-size:2em;
  color:#000;
  line-height: 1.5em;
}
.produit_anim_1{
  width:400px;
  height: auto;
  position: absolute;
  left:8%;
  bottom:40px;
  max-width: 100%;
}
/*////////////PAGER/////////*/
#wpager{
   position: absolute;
   bottom:30px;
   left:5%;
   z-index: 1000;
   width:100%;

}
#pager a{
   display: inline-block;
   width:18px;
   height: 18px;
   text-indent: -9999em;
   margin-right:5px;
   cursor: pointer;
   background-size: 36px 18px!important;
   background: url(../images/puces.png) no-repeat -18px top;
}
#pager a.selected,#pager a:hover{
   background: url(../images/puces.png) no-repeat left top;
}
#pager a:last-child{
   margin-right:0;
}
/*///////////FIN/PAGER/////////*/

#coeur1{
  width:43px;
  height: 38px;
  position: absolute;
  z-index: 3;
  background: url(../images/coeur1.png) no-repeat left top;
  left:30%;
  bottom:130px;
  animation: float2 8s ease-in-out infinite;
  background-size:43px 38px;
}
#coeur2{
  width:50px;
  height: 55px;
  position: absolute;
  z-index: 3;
  background: url(../images/coeur2.png) no-repeat left top;
  right:9%;
  top:0;
  animation: float3 10s ease-in-out infinite;
  background-size:50px 55px;
}
#mouette{
  width:68px;
  height: 58px;
  position: absolute;
  z-index: 3;
  background: url(../images/mouette.png) no-repeat left top;
  left:55%;
  top:20px;
  animation: float1 5s ease-in-out infinite;
  background-size:68px 58px;
}

@keyframes float1 {
	0% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(100%,100%);
	}
	100% {
		transform: translate(0,0);
	}
}
@keyframes float2 {
	0% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(110%,60%);
	}
	100% {
		transform: translate(0,0);
	}
}
@keyframes float3 {
	0% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(-110%,-60%);
	}
	100% {
		transform: translate(0,0);
	}
}