html,
body {
    height: 100%;
    width: 100%;
    padding: .5rem;
}

#outer {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#top_div {
    height: 35vw;
    min-height: 200px;
    background-color: grey;
}

.bottom_part1 {
    margin-top:1rem;
    background-color: #627d83;
    flex-grow : 1;
}

.bottom_part2 {
    margin-top:1rem;
    background-color: #af504d;
    flex-grow : 1;
}
.bottom_part3 {
    margin-top:1rem;
    background-color: #c09b6f;
    flex-grow : 1;
}

.bottom_part3 {
    margin-top:1rem;
    background-color: #ea5045;
    flex-grow : 1;
}

.bottom_part4 {
    margin-top:1rem;
    background-color: #af504d;
    flex-grow : 1;
}


.bottom_part5 {
    margin-top:1rem;
    background-color: #f7a823;
    flex-grow : 1;
}

.bottom_part5 {
    margin-top:1rem;
    background-color: #f7a823;
    flex-grow : 1;
}





.bottom_responsive {
    width: 100%;
    min-width: 150px;
    max-width:18vh;
    height: auto;
}

img {
    width:100%;
    height:100%;
    object-fit: cover;
}

.subtitle_text{
    color: white;
    font-size: 5vw;
    padding-left:  2rem;
    padding-right:2rem;
    line-height: 1.1;
}

.title_text{
    color: white;font-size: 11vw;font-weight: bolder;line-height:1.2;
}

.bottom_text_control{margin:1rem;padding-top:2.5rem;}