@media all and (max-width: 1280px) {
    .page-wrap, header, .select2-dropdown, .popup { font-size: 1.2em; }
}
@media all and (max-width: 1024px) {
    .page-wrap, header, .select2-dropdown, .popup { font-size: 1.3em; }
    header { padding-left: 2.5em; }
    .page-content { padding-left: 0; padding-right: 0; }
}
@media all and (max-width: 767px) {
    .page-wrap, .select2-dropdown, .popup { font-size: 1.8em; }
    header { font-size: 1.55em; }
    .page-wrap.logedin { padding-top: 7em; }
    .home-section { padding: 0; }
    .home-section .col { width: 48%; }
    .page-table { min-height: 42.7em; }
    .table-content-wrap { height: 37.2em; }
    .table-row-wrap:not(.table-row-head) .table-row { display: block; }
    .table-row-wrap:not(.table-row-head) .table-row > div { width: 100% !important; padding: 1em 1em 1em 10em !important; position: relative; justify-content: flex-start; }
    .table-row-wrap:not(.table-row-head) .table-row > div:before { line-height: 1; position: absolute; top: 1.2em; left: 0.8em; width: 9em; text-align:left; font-weight: bold; content: attr(data-title); white-space: pre; display: flex; height: 3em; align-items: center; }
    .table-row-wrap:not(.table-row-head) { border-top: 3px solid #e8e9ea; }
    .table-row-wrap:not(.table-row-head):first-child { border: 0; }
    .table-row-head .table-row > div { display: none; }
    .table-row-head .table-row .filter-box { display: flex; width: 100%; padding-left: 0; justify-content: flex-end; }
    .table-row-head .table-row .filter-box .select2-container { width: auto !important; min-width: 10em; }
    .table-info.cols-3 { margin: 0; display: block; }
    .table-info.cols-3 > div { padding: 0; width: 100%; margin: 0.563em 0; float: none; min-height: unset; }
    .table-info.add-border > div:after { display: none; }
    .table-row-info { padding-left: 2.5em; padding-right: 2.5em; }
    .new-data .table-content-wrap { height: auto; }
    .map-box { min-height: 20em; }
    .page-content-top h2 { display: block; width: 100%; clear: both; padding: 0.3em 0 0 0; }
    .contribution-table .table-content-wrap { height: 31.9em; }
}
@media all and (max-width: 600px) {
    .page-wrap, header, .select2-dropdown, .popup { font-size: 2.5em; }
    header > div:first-child { font-size: 0.8em; }
    header .header-title { display: none; }
    .home-section .col { width: 100%; min-height: 14em; }
    .table-info.cols-2 { margin: 0; display: block; }
    .table-info > div.width-40, .table-info > div.width-60 { width: 100%; float: none; padding: 0; min-height: unset; margin: 0.563em 0; }
    .table-info > div.width-40.media { max-width: 50%; }
}
@media all and (max-width: 450px) {
    .page-wrap, .select2-dropdown, .popup { font-size: 3.4em; }
    header { font-size: 2.8em; padding-left: 20px; padding-right: 20px; }
    header .login-details .user-detail { width: 12em; font-size: 1.2em; }
    .table-info > div.width-40.media { max-width: 100%; }
}