.bg-medio{
    overflow: hidden;
    background:  #A5E4FA;
}

svg#fish {
    top: 15em;
}

/* Fish Animation */
svg.fish{
    overflow:visible;
}

@-webkit-keyframes swim
{
    0% {margin-left: -235px}
    90% {margin-left: 100%;}
    100% {margin-left: 100%;}
}

@keyframes swim
{
    0% {margin-left: -235px}
    70% {margin-left: 100%;}
    100% {margin-left: 100%;}
}

.fish{

    width: 235px;
    height: 104px;
    margin-left: -235px;
    position: absolute;
    animation: swim 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

svg #fish1,
svg #fish2,
svg #fish3,
svg #fish4,
svg #fish5,
svg #fish6 {
    animation: bounce 2s infinite;
}

svg #fish1{
    fill:#06163A;
}

svg #fish2{
    fill:#FF9E73;
    animation-delay: 0.5s;
}

svg #fish3{
    fill: #06163A;
    animation-delay: 0.2s;
}

svg #fish4{
    fill:#FF9E73;
    animation-delay: 0.4s;
}

svg #fish5{
    fill: #06163A;
    animation-delay: 0.1s;
}

svg #fish6{
    fill:#FF9E73;
    animation-delay: 0.3s;
}

/**/
@keyframes bounce {
    0%, 50%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(-3px);
    }
}