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

    main.main.big {
        --sidebar-size: 100vw;
        --map-size: 0px;

        display: block;

        height: 100vh;
        width: 100vw;
        
    }

    .sidebar {
        max-height: 100%;

        display: flex;
        flex-direction: column;

        
    }

    .sidebar .sidebar_content {
        flex-grow: 1;
        overflow-y: auto;

    }

    .search-container {
        grid-template-columns: 1fr;
    }

    .search-container-item.ices-search,
    .search-container-item.geographical-bounding-box {
        display: none;
    }

    .search-field .content-scrollable-overlay {
        display: none;
    }

    .map-reference-layers {
        display: none;
    }

    ul.social > li  {
        margin-bottom: 10px;
    }

    .toggle-map, .toggle-sidebar {
        display: none;
    }

    .steps {
        height: auto;
    }
    .browse-results-big {
        height: auto;
    }

    header {
        height: auto;
    }

    .search-field .content {
        height: auto;
    }

}


/* same rules as above but prefixed by .is-mobile to make sure it works on landscape aswell. */

body.is-mobile main.main.big {
    --sidebar-size: 100vw;
    --map-size: 0px;

    display: block;
    height: 100vh;
    width: 100vw;
}

body.is-mobile .sidebar {
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

body.is-mobile .sidebar .sidebar_content {
    flex-grow: 1;
    overflow-y: auto;
}

body.is-mobile .search-container {
    grid-template-columns: 1fr;
}

body.is-mobile .search-container-item.ices-search,
body.is-mobile .search-container-item.geographical-bounding-box {
    display: none;
}

body.is-mobile .search-field .content-scrollable-overlay {
    display: none;
}

body.is-mobile .map-reference-layers {
    display: none;
}

body.is-mobile ul.social > li  {
    margin-bottom: 10px;
}

body.is-mobile .toggle-map, 
body.is-mobile .toggle-sidebar {
    display: none;
}

body.is-mobile .steps {
    height: auto;
}

body.is-mobile .browse-results-big {
    height: auto;
}

body.is-mobile header {
    height: auto;
}

body.is-mobile .search-field .content {
    height: auto;
}