* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

.banner-container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    height: 140px;
    overflow: hidden;
    position: relative;
}

.banner-container .top-banner, .banner-container .bottom-banner {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.banner-container .top-banner {
    height: 75%;
    background-color: #dcd4c9;
    justify-content:space-between;
}

.banner-container .bottom-banner {
    height: 25%;
    background-color: #90bfc7;
}

.banner-container .top-banner div {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.banner-container .bottom-banner div {
    width: 100%;
    height: auto;
}

.banner-container .bottom-banner picture {
    display: flex;
    justify-content: center;
}

.banner-container .bottom-banner picture > img {
    position: absolute;
    top: 0rem;
    /* right: 100%; */
    animation: fleet 25s infinite forwards;
    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
}

.banner-container .top-banner .start {
    display: flex;
    justify-content: start;
    align-items: center;
}

.banner-container .top-banner .end {
    display: flex;
    justify-content: end;
    align-items: center;
}

.banner-container .top-banner .center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container .center picture {
    position: absolute;
    margin-top: 1.5rem;
    max-width: 20rem;
    height: auto;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container .top-banner .start > img, .banner-container .top-banner .end > img {
    max-width: 100%;
    height: 65px;
}

.banner-container .top-banner .start > img {
    margin-left: 50px;
}

.banner-container .top-banner .end > img {
    margin-right: 50px;
}

 
.center picture:nth-of-type(5) {
    animation: letter5 25s infinite;
}
.center picture:nth-of-type(4) {
    animation: letter4 25s infinite;
}
.center picture:nth-of-type(3) {
    animation: letter3 25s infinite;
}
.center picture:nth-of-type(2) {
    animation: letter2 25s infinite;
}
.center picture:nth-of-type(1) {
    animation: letter1 25s infinite;
}

@keyframes fleet {
    0%   {right: 100%}
    100% {right: -100%}
}

@keyframes letter1 {
    0% {
        opacity:1;
    }
    9.99% {
        opacity:1;
    }
    13.32% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

@keyframes letter2 {
    0% {
        opacity:0;
    }
    16.65% {
        opacity:0;
    }
    19.98% {
        opacity:1;
    }
    26.64% {
        opacity:1;
    }
    29.97% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

@keyframes letter3 {
    0% {
        opacity:0;
    }
    33.3% {
        opacity:0;
    }
    36.63% {
        opacity:1;
    }
    43.29% {
        opacity:1;
    }
    46.62% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

@keyframes letter4 {
    0% {
        opacity:0;
    }
    49.95% {
        opacity:0;
    }
    53.28% {
        opacity:1;
    }
    59.94% {
        opacity:1;
    }
    63.27% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

@keyframes letter5 {
    0% {
        opacity:0;
    }
    66.6% {
        opacity:0;
    }
    69.93% {
        opacity:1;
    }
    76.59% {
        opacity:1;
    }
    79.92% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

@keyframes letter6 {
    0% {
        opacity:0;
    }
    83.25% {
        opacity:0;
    }
    86.58% {
        opacity:1;
    }
    89.91% {
        opacity:1;
    }
    93.24% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    .banner-container .top-banner .start > img, .banner-container .top-banner .end > img {
        max-width: 6rem;
    }

    .banner-container .top-banner .center picture img{
        max-width: 40rem !important;
    }

    .banner-container .top-banner .start > img, .banner-container .top-banner .end > img{
        margin-left: 25px;
    }

    .banner-container .top-banner .end > img {
        margin-right: 25px;
    }
 }

 @media only screen and (max-width: 458px) {
    .banner-container .top-banner .center picture img{
        max-width: 25rem !important;
        margin-top: .5rem;
    }

    .banner-container .top-banner .start > img, .banner-container .top-banner .end > img{
        display: none;
    }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
    .banner-container .top-banner div > picture img {
        max-width: 40rem;
    }

    .banner-container .top-banner .start > img, .banner-container .top-banner .end > img {
        height: 65px;
    }

    .banner-container .top-banner .start > img, .banner-container .top-banner .end > img{
        margin-left: 25px;
    }

    .banner-container .top-banner .end > img {
        margin-right: 25px;
    }
 }

 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
    .banner-container .top-banner div > picture img {
        max-width: 50rem;
        margin-top: .75rem;
    }
    .banner-container .top-banner .start > img {
        margin-left: 25px;
    }

    .banner-container .top-banner .end > img {
        margin-right: 25px;
    }
 }

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
    .banner-container .top-banner div > picture img {
        max-width: 70rem;
        margin-top: .5rem;
    }
 }

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1480px) {
    .banner-container .top-banner div > picture img {
        max-width: 92rem;
        margin-top: 1.25rem;
    }
 }