.listNames {
    max-height: 617px;
    overflow: auto;
}

.dum_list_names {
    clear: both;
    width: 100%;
    height: auto;
    margin-bottom: 0.25em;
    background: #e0e0e0;
    padding: 0.5em;
}

.dum_list_names h1 {
    width: auto;
    font-family: BoldCond;
    font-size: 1.5em;
}

.dum_list_names h1:hover {
    color: #fff;
    cursor: pointer;
}

.dum_list {
    width: auto;
    width: 1.5em;
    font-family: TitlingRegu;
    font-size: 2em;
}

@media only screen and (max-width: 1120px) {

    body {
        padding-top: 3em;
    }

    .listNames {
        max-height: 440px;
    }
}

@media only screen and (max-width: 1024px) {

    body {
        padding-top: 3em;
    }

    .listNames {
        max-height: 440px;
    }
}

@media only screen and (max-width: 846px) {

    body {
        padding-top: 2em;
    }

    .listNames {
        max-height: 240px;
    }
}

@media only screen and (max-width: 812px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        max-height: 200px;
    }
}

@media only screen and (max-width: 800px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        max-height: 480px;
    }
}

@media only screen and (orientation: landscape) and (max-width: 740px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        max-height: 190px;
        overflow: auto;
    }
}

@media only screen and (max-width: 667px) {

    body {
        padding-top: 1em;
    }

    .listNames {
        height: 240px;
        max-height: 240px;
        overflow: auto;
    }
}

@media only screen and (max-width: 640px) {

    body {
        padding-top: 1em;
    }

    .listNames {
        height: 240px;
        max-height: 220px;
    }
}

@media only screen and (max-width: 568px) {

    body {
        padding-top: 1em;
    }

    .listNames {
        max-height: 160px;
        overflow: auto;
    }
}

@media only screen and (max-width: 414px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        max-height: 640px;
        overflow: auto;
    }
}

@media only screen and (max-width: 375px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        height: 500px;
        margin-bottom: 1em;
    }

    .dum_list {
        font-size: 1.25em;
    }

    .dum_list_names h1 {
        font-size: 1.125em;
    }

    nav {
        padding-bottom: 0;
    }

    nav li {
        font-size: 1em;
    }

    footer {
        display: none;
    }
}

@media only screen and (max-width: 360px) {

    body {
        padding-top: 1.5em;
    }

    .listNames {
        max-height: 440px;
        margin-bottom: 0.5em;
    }
}

@media only screen and (max-width: 320px) and (max-height: 568px) {

    body {
        padding-top: 0.5em;
    }

    .listNames {
        height: 435px;
        overflow: auto;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    nav {
        padding: 0;
    }
}

@media only screen and (orientation: landscape) and (max-width: 320px) {

    body {
        padding-top: 0.5em;
    }

    .listNames {
        max-height: 125px;
        overflow: auto;
        margin-top: 1em;
        margin-bottom: 0;
    }

    nav {
        padding: 0;
    }
}

@media only screen and (max-width: 240px) {

    body {
        padding-top: 0.9em;
    }

    .listNames {
        max-height: 120px;
        overflow: auto;
        margin-bottom: 0.5em;
    }
}