/*Add class floating-image to image have absolute style to parallax*/

@keyframes floating {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}
@keyframes floating-xl {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-80px);
    }
    100% {
        transform: translatey(0px);
    }
}
.floating-image {
    transform: translatey(0px);
    animation: floating 6s ease-in-out infinite;
}
.floating-image.s04 {
    transform: translatey(0px);
    animation: floating 4s ease-in-out infinite;
}
.floating-image.s02 {
    transform: translatey(0px);
    animation: floating 2s ease-in-out infinite;
}
.floating-image.s08 {
    transform: translatey(0px);
    animation: floating 8s ease-in-out infinite;
}
.floating-image.s10 {
    transform: translatey(0px);
    animation: floating 10s ease-in-out infinite;
}
.floating-image.s12 {
    transform: translatey(0px);
    animation: floating 12s ease-in-out infinite;
}
.floating-image.s16 {
    transform: translatey(0px);
    animation: floating 16s ease-in-out infinite;
}
.floating-image-xl.s08 {
    transform: translatey(0px);
    animation: floating-xl 8s ease-in-out infinite;
}
.floating-image-xl {
    transform: translatey(0px);
    animation: floating-xl 7s ease-in-out infinite;
}
.floating-image-xl.s06 {
    transform: translatey(0px);
    animation: floating-xl 6s ease-in-out infinite;
}
.floating-image img {
    width: 100%;
    height: auto;
}

.button-floating:hover{
    animation-play-state: paused;
    background: linear-gradient(to top right, rgba(0, 120, 118, 0.8), rgba(0, 120, 118, 0.4));
}

.button-floating{
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(to top right, rgba(0, 120, 118, 0.5), rgba(0, 120, 118, 0.2));
    border: none;
    border-radius: 10px;
    color: white;
    font-family: Inconsolata;
    animation: hover 3.5s ease-in-out infinite;
    box-shadow: -10px 10px 10px 0px rgba(31, 31, 31, 0.3);
    text-shadow: -2px 2px rgba(31, 31, 31, 0.4);
}

@keyframes hover{
    0%{
        transform: rotate(-5deg) translatey(0px);
    }
    50%{
        transform: rotate(-3deg) translatey(7px);
    }
    100%{
        transform: rotate(-5deg) translatey(0px);
    }
}

.runaway-box{
    position:relative;
    display:inline-block;
    text-align:center;
}


/*circular img*/
.image-circular {
    position: relative;
    -webkit-animation:spin 32s linear infinite;
    -moz-animation:spin 32s linear infinite;
    animation:spin 32s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }