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

    #logo {
        height: 25px;
        width: 25px;
        bottom: 7px;
        right: 38px;
        background-image:url(../img/logo-mobile.svg);
    }

    .last {
        display: none;
    }

    #console {
        width: 300px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 13px;
    }

    h3 {
        font-size: 20px;
    }

    li {
        font-size: 12px;
    }

    button {
        font-size: 12px;
    }

    .summary {
        font-size: 12.5px;
    }

    .citation {
        font-size: 11.5px;
    }

    .citation2 {
        display: none;
    }

    .marker {
        width: 25px;
        height: 25px;
    }

    .marker-icon {
        width: 15px;
        height: 15px;
        margin-top: 2px;
    }

    .marker i {           
        margin-top: 5.5px;
        font-size: 13px;
    }

}

@media all and (max-width: 570px) {

    #console {
        width: 280px;
    }

    h1 {
        font-size: 23px;
    }

    .subtitle {
        display: none;
    }

    #map {
        height: 500px;
    }

    .mapboxgl-popup {
        max-width: 280px;
    }

    .summary {
        font-size: 12px;
    }

    .citation {
        font-size: 11px;
    }

}

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

    #console {
        display: none;
    }

    #map {
        height: 400px;
    }

}