.ease { 
transition: all .2s ease-in-out;
}

/* Floating animation 1*/
.floating{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 3s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-top: 5px;
}
@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 12px);}
 to {-webkit-transform: translate(0, -0px); } 
}
 
@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 12px);}
 to {-moz-transform: translate(0, -0px);} 
}

/* Floating animation 2 */
.floating2{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 4s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-top: 5px;
}
@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); } 
}
 
@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 15px);}
 to {-moz-transform: translate(0, -0px);} 
}

/* Floating animation 3 */
.floating3{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 3.5s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 3.5s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-top: 5px;
}
@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); } 
}
 
@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 15px);}
 to {-moz-transform: translate(0, -0px);} 
}

/* Floating animation 4 */
.floating4{
 float: left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 4.5s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 4.5s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-top: 5px;
}
@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); } 
}
 
@-moz-keyframes Floating{
 from {-moz-transform:translate(0, 0px);}
 65% {-moz-transform:translate(0, 15px);}
 to {-moz-transform: translate(0, -0px);} 
}

/* Black & White photo filter */
.blackwhite {
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}
.blackwhite:hover {
filter: none;
-webkit-filter: grayscale(0);
}