@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes from_right {
    0% {
        left: 105%;
    }
    100% {
        left: 0;
    }
}

.kids, .pool {
    position: absolute;
    width: 100%;
    height: 100%;
}

.kids {
    width: 500px;
    height: 260px;
    left: -100px;
    top: -5px;
    transform: scale(1);
    animation: kids 6s linear;
    animation-fill-mode: forwards;
}

@keyframes kids {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

.pool {
    width: 575px;
    height: 300px;
    left: -132px;
    top: -25px;
    transform: scale(1.15);
    animation: pool 6s linear;
    animation-fill-mode: forwards;
}

@keyframes pool {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

.banner__titles {
    opacity: 0;
    animation: opacity 1.2s linear;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;
}

/*comment slide 1 - 6s; the next slide - 0.4s delay: start 6.4s*/
#slide2 {
    left: 105%;
    animation: from_right 0.5s cubic-bezier(0.1, 0.3, 0.1, 1);
    animation-fill-mode: forwards;
    animation-delay: 6.4s;
}

.title1 {
    opacity: 0;
    animation: opacity 0.6s linear;
    animation-fill-mode: forwards;
    animation-delay: 7s;
}

.hide-toleft {
    position: relative;
    left: 0;
    animation: hide_toleft 0.3s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 8.7s;
}

@keyframes hide_toleft {
    0% {
        left: 0;
    }
    100% {
        left: -110%;
    }
}

.title1, .title2 {
    position: absolute;
    width: auto;
    top: 0;
    left: 0;
    display: inline-block;
}

.titles-left .title1, 
.titles-left .title2 {
    width: 100%;
}

.to-left {
    left: 105%;
    animation: from_right 0.5s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 8.7s;
}

.titles-right .title1, 
.titles-right .title2 {
    right: 0;
    left: auto;
}

.to-right {
    right: -100%;
    opacity: 0;
    animation: to_right 0.5s ease-out;
    animation-fill-mode: forwards;
    animation-delay: 8.7s;
}

@keyframes to_right {
    0% {
        opacity: 0;
        right: -100%;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}

.note {
    bottom: -50px;
    opacity: 0;
    animation: from_bottom 0.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 9.3s;
}

@keyframes from_bottom {
    0% {
        opacity: 0;
        bottom: -50px;
    }
    100% {
        opacity: 1;
        bottom: 0;
    }
}

.note__text, .btn-block {
    position: relative;
    top: 45px;
    opacity: 0;
    animation: to_top 0.5s linear;
    animation-fill-mode: forwards;
}

.note__text {
    animation-delay: 9.8s;
}

.btn-block {
    animation-delay: 10.6s;
}

@keyframes to_top {
    0% {
        opacity: 0;
        top: 45px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}

.slide2-titles {
    position: absolute;
}

.slide-titles_right {
    top: 0;
    right: 0;
}

.slide-title {
    width: auto;
    display: inline-block;
}