section.subHeader {
    background-image: url("../../images/banner-over-ons.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.main-container {
    background: url(../../images/bg-login-register.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

form#formUserDataDesktop {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 50px 30px;
    border-radius: var(--ThumbRadius);
    margin-top: -75px;
    width: 500px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    z-index: 2;
    border: 3px solid var(--ButtonColor);
}

form#formUserDataDesktop h2 {
    margin-bottom: 25px;
    grid-column-start: 1;
    grid-column-end: 4;
    font-family: var(--SubheaderFont);
    font-size: 40px;
}

form#formUserDataDesktop input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: var(--ButtonRadius);
    padding: 10px;
    margin-bottom: 10px;
    display: block;
}

form#formUserDataDesktop button[type="submit"] {
    background: var(--ButtonColor);
    color: var(--ButtonTextColor);
    font-family: var(--ButtonTextFont);
    padding: var(--ButtonPadding);
    border: none;
    width: 100%;
    display: block;
    border-radius: var(--ButtonRadius);
}

form#formUserDataDesktop button[type="submit"]:hover {
    background: var(--ButtonColorHover);
    color: var(--ButtonTextColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

form#formUserData {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 50px 30px;
    border-radius: var(--ThumbRadius);
    margin-top: -75px;
    width: 500px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    z-index: 2;
    border: 3px solid var(--ButtonColor);
}

form#formUserData h2 {
    margin-bottom: 25px;
    grid-column-start: 1;
    grid-column-end: 4;
    font-family: var(--SubheaderFont);
    font-size: 40px;
}

form#formUserData input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: var(--ButtonRadius);
    padding: 10px;
    margin-bottom: 10px;
    display: block;
}

form#formUserData button[type="submit"] {
    background: var(--ButtonColor);
    color: var(--ButtonTextColor);
    font-family: var(--ButtonTextFont);
    padding: var(--ButtonPadding);
    border: none;
    width: 100%;
    display: block;
    border-radius: var(--ButtonRadius);
}

form#formUserData button[type="submit"]:hover {
    background: var(--ButtonColorHover);
    color: var(--ButtonTextColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

.item-wrap h2 {
    font-size: 30px;
    font-family: var(--SubheaderFont);
}

a#register-new-account {
    margin-top: 25px;
    display: block;
    color: var(--ButtonColor);
}

a#register-new-account:hover {
    color: var(--ButtonColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

a#register-new-account i {
    margin-right: 5px;
}

a#wachtwoord-vergeten {
    display: block;
    margin-top: 10px;
    color: #000000;
}

a#wachtwoord-vergeten i {
    margin-right: 5px;
}

a#wachtwoord-vergeten:hover {
    color: var(--ButtonColorHover);
    transition: var(--ButtonTransition);
    cursor: pointer;
}

.info-text {
    margin-bottom: 25px;
}

.mobileVersion {
    display: none !important;
}

.desktopVersion {
    display: block;
}



@media only screen and (max-width: 600px) {
    .mobileVersion {
      display: block !important;
      margin-bottom: 30px;
    }

    form#formUserDataDesktop {
        display: none;
    }

    .desktopVersion {
        display: none;
    }
  }