/*What to do when screen width has been reduced below a certain width (for mobile or small screens)*/
@media screen and (max-width: 900px) {
    .imageContainer img  {
        display: block !important;
        max-width: 100% !important;
        pointer-events: none;
    }
}

/*Images inside image container*/
.contentBox .imageContainer > a > img {
    max-width: 40%;
    min-width: 25%;
    margin-right: 10px;
    border: 1px solid #03582D;
    opacity: 1;
}

.contentBox .imageContainer > a > img.enlarged {
    max-width: 100%;
    max-height: 1200px;
}

a:has(img.enlarged) {
    display: block;
}

.hideMenu {
    opacity: 0 !important;
    height: 0px;
}

.buttonGroup {
    text-align: center;
}

.buttonContainer {
    text-align: center;
    display: inline-block;
    margin-bottom: 20px;
}

.buttonContainer a {
    width: 140px;
    font-size: 1.2em;
}

.buttonContainer input {
    max-width: 125px;
    width: 100%;
    margin: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    text-align: center;
}

a.button:focus,
a.button:hover{
    background-color: unset;
}

.menu-button-selected {
    background-color: #86C18D !important;
}