html, body {
    background-color: #3B98AD;
    margin: 0;
    height: 100%;
}

.lt-grey-text {
    color: #CEC9B4;
}

.yellow-brown-text {
    color: #D1B242;
}

.yellow-text {
    color: #EAD370;
}

.dk-blue-btn {
    background-color: #297099;
    color: #CEC9B4;
}

.orange-btn {
    background-color: #d1710d;
    color: #CEC9B4;
}

.orange-btn:hover {
    background-color: #D1B242;
    /* color: #3B98AD; */
    color: #297099;
}

.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.7rem;
    border-radius: .5rem;
}

.yellow-btn {
    color: #EAD370;
    outline-color: #EAD370;
    outline-width: 1px;
    outline-style: solid;
}

.yellow-btn:hover {
    /* color: #916E49; */
    color: #297099;
    background-color: #D1B242;
    outline-color: #D1B242;
}

.brown-text {
    color: #916E49
}

#brown-hr {
    background-color: #916E49;
    height: 5px;
}

.display-1 {
    font-size: 7rem;
}

div {
    font-size: 1.3rem;
}

#test {
    overflow-y: hidden;
}

/* For md size:*/
/* @media (min-width: 768px) {
    #bottom-div {
        flex: 1 1 auto;
        overflow-x: hidden;
    }
} */

#demo-image {
    width: 100%
}

/* For sm size it would be 576px, but this is for lg size: */
@media (min-width: 992px) {
    #bottom-div {
        flex: 1 1 auto;
        overflow-y: hidden;
        /* overflow-x: hidden; */
    }

    #demo-image {
        height: 100%;
        width: auto;
    }

    .custom-h-lg-100 {
        height: 100%;
    }
}

#klask-link,
.link-highlight {
    color: #297099
}

#klask-link:hover,
.link-highlight:hover {
    /* color: #297099; */
    color: #CEC9B4;
}