/*Galery below*/
/* // FS FEEDBACK ANNIMATION:formatting */

.fixed-height {
    height: 40vh;  
    object-fit: contain
  }

#carousel_item{
    height:100%;

}

#galery_image{
    height: 100%;
    object-fit: contain;
}

.fixed-arrow {
    background-color: gray
  }
/*waveboat below*/
#anim_container {
height: 70vh;
width: 100%;
overflow: hidden;
margin-bottom: 2vh;
position: relative;
background: linear-gradient(to bottom, white 50%, #2F4781 50%)
}

.anim_waves{
    width: 100%;
    position: absolute;
    top: 45%;
    z-index: 1;

}

#anim_shipyard{
    width: auto;
    height: 20vh;
    position: absolute;
    top: 20%;
    z-index: 3;
}

.shipyardLeft{
    left: -1%;
    transform: scaleX(-1);
}

.shipyardRight{
    right: -1%;
    top: 32%;
}

#anim_uploaded_image{
    width: 20%;
    max-height: 20vh;
    object-fit: contain;
    position: absolute;
    z-index: 0;
}

#anim_uploaded_NameAge{
    position: absolute;
    z-index: 2;
    height: 5vh;
    width: 20%;
}

.textBoat{
    bottom: 70%
}

.boat{
    bottom: 50%;

}

.textSubmarine{
    bottom: 10%;
    color: #F2F2F2;
}
.submarine{
    bottom: 15%;
  
}

.textFly{
    top: 10%;
}

.fly{
    top: 15%;
}


.textAnimal{
    bottom: 7%;
    color: #F2F2F2;
}
.animal{
    bottom: 16%;

}

.left, 
.textLeft{
    right: 0%;
    animation: slideRight 10s linear infinite, sway 2s ease-in-out infinite alternate;
}

.right,
.textRight{
    left: 0%;
    animation: slideLeft 10s linear infinite, sway 2s ease-in-out infinite alternate;
}

/*Animations*/

@keyframes slideLeft {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

@keyframes slideRight {
    0% {
        right: 0%;
    }
    100% {
        right: 100%;
    }
}

@keyframes sway {
    0% {
        transform: rotateZ(-5deg) translateY(-3px);
    }
    50% {
        transform: rotateZ(5deg) translateY(3px) translateY(-5px);
    }
    100% {
        transform: rotateZ(-5deg) translateY(-3px);
    }
}

@keyframes updown {
    0% {
        transform: translateY(-3px);
    }
    50% {
        transform: translateY(3px) translateY(-5px);
    }
    100% {
        transform: translateY(-3px);
    }
}



/*** Annimations for start page ***/

.welcome_annimation{
    position: relative;
    height: 400px;
    overflow: hidden;
}

.welcome_annimation .annimation_waves,
.welcome_annimation .annimation_waves_layer1,
.welcome_annimation .annimation_waves_layer2
{
    position: absolute;
    /*width: 1200px;*/
    width: 100%;

}

.welcome_annimation .annimation_waves_layer0{
    z-index: 100;
    top: 350px;
    animation: waveMovement 2s infinite cubic-bezier(0.25, 0.1, 0.25, 1) alternate;

}

.welcome_annimation .annimation_waves_layer1{
    z-index: 50;
    top: 340px;
    animation: waveMovement 3s infinite cubic-bezier(0.25, 0.1, 0.25, 1) alternate;

}

.welcome_annimation .annimation_waves_layer2{
    z-index: 10;
    top: 330px;
    animation: waveMovement 4s infinite cubic-bezier(0.25, 0.1, 0.25, 1) alternate;

}


.welcome_annimation .annimation_ship
{
    position: absolute;
    width: 200px;


}

.ship1{
    bottom: 10px;
    right: -200px;
    z-index: 51;
    animation: shipMoveAndBob 16s infinite linear ;

}

.ship2{
    bottom:15px;
    z-index: 20;
    right: -200px;
    animation: shipMoveAndBob 20s infinite linear 4s ;

}

.ship3{
    bottom:40px;
    z-index: 8;
    right: -500px;
    width: 380px !important;
    animation: shipMoveAndBob 40s infinite linear 5s ;

}

.welcome_annimation .annimation_balloon{
    position: absolute;
    top: 30px;
    left:-150px;
    width: 140px;
    z-index: 52;
    animation: balloonMovement 16s infinite linear;

}

.welcome_annimation .annimation_cloud{
    position: absolute;
    width: 140px;
    z-index: 4;

}


.cloud1{
    top: 30px;
    left:-150px;
    animation: balloonMovement 30s infinite linear;

}

.cloud2{
    top: 50px;
    left: -150px;
    animation: balloonMovement 40s infinite linear 7s;

} 

.cloud3{
    top: 20px;
    left: -150px;
    animation: balloonMovement 35s infinite linear 14s;

}

.welcome_annimation .annimation_background_sky{
    position: absolute;
    top: -30px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: lightcyan;
}

@keyframes waveMovement {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10%); }
  }

  @keyframes shipMoveAndBob {
    0% {transform: translate(0, 0);}
    25% {transform: translate(-200%, -5px) rotate(5deg);;}
    50% {transform: translate(-400%, -15px) rotate(-5deg);}
    75% {transform: translate(-600%, -5px) rotate(5deg);}
    100% {transform: translate(-800%, 0) rotate(-5deg);}
  }

  @keyframes balloonMovement {
    0% { transform: translate(0) }
    25% { transform: translate(250%,-15%)  }
    50% { transform: translate(500%,-15%)  }
    75% { transform: translate(750%,15%); }
    100% { transform: translate(1000%,-20%); }
  }