footer {
    width: auto;
    min-width: 320px;
    max-width: 980px
}

#header {
    width: auto;
    min-width: 320px;
    max-width: 980px
}

#main {
    width: auto;
    min-width: 320px;
    max-width: 980px
}





@media only screen and (max-width: 1020px) {
    #frontpage-left-column {
        float: left;
        width: 410px;
        margin-right: 30px
    }

    #frontpage-right-column {
        float: left;
        width: 440px
    }

    .comparison-listing-container > div > div {
        width: 120px
    }

    #model-comparison-table-header {
        width: calc(100% - 20px)
    }

    .tab-container > div > a {
        padding: 0 18px !important
    }
}




@media only screen and (max-width: 920px) {
    #frontpage-left-column {
        float: none;
        width: 100%
    }

    #frontpage-right-column {
        float: none;
        width: 100%
    }

    .brand-listing-container-frontpage,
    .brand-listing-container-news {
        -webkit-columns: auto 6;
        -moz-columns: auto 6;
        columns: 6 auto
    }

    .tab-container > div > a {
        padding: 0 14px !important
    }
}




@media only screen and (max-width: 820px) {
    .comparison-listing-container > div {
        height: auto
    }

    .comparison-listing-container > div:not(:nth-last-child(1)) {
        padding-bottom: 20px
    }

    .comparison-listing-container > div > div {
        float: none;
        width: 170px;
        padding: 0 0 0 42px;
        line-height: 40px
    }

    .comparison-listing-container > div > div:not(:nth-last-child(2)) {
        margin-bottom: 4px
    }

    table.model-comparison-table tr td:first-child {
        padding: 8px 5px 8px 10px
    }

    .brand-listing-container-frontpage,
    .brand-listing-container-news {
        -webkit-columns: auto 5;
        -moz-columns: auto 5;
        columns: 5 auto
    }

    .tab-container > div > a {
        padding: 0 8px !important
    }

    .tab-container > div > a > span.icon {
        display: none !important
    }

    #model-image {
        width: 100%;
        float: none;
        clear: both;
        background-position: center;
    }

    #model-image a.review {
        left: calc(50% - 160px);
    }

    #model-image div.unconfirmed-specifications {
        left: calc(50% - 140px);
    }

    #model-brief-specifications {
        float: none;
        clear: both;
        width: auto;
        margin: 30px 0 0 50px;
        height: auto
    }

    table.chart-table tr td:first-child {
        width: 50%
    }

    table.chart-table tr td span.verbose {
        display: none
    }
}




@media only screen and (max-width: 670px) {
    #header #social-follow {
        position: absolute;
        left: 11px;
        top: -28px
    }

    #header #display-finder {
        right: 180px
    }

    #header #search {
        width: 150px
    }

    #header #language-flags a {
        margin-left: 10px
    }

    .social-follow-16 {
        width: 68px
    }

    .social-follow-16 > a {
        margin-left: 10px
    }

    .social-follow-24 {
        width: 92px
    }

    .social-follow-24 > a {
        margin-left: 10px
    }

    .brand-listing-container-frontpage,
    .brand-listing-container-news {
        -webkit-columns: auto 4;
        -moz-columns: auto 4;
        columns: 4 auto
    }

    .brand-listing-container-frontpage a,
    .brand-listing-container-news a {
        margin: 10px
    }

    #news-more > div {
        float: none;
        width: 100%
    }

    #news-more > div :nth-child(1) {
        margin-top: 0
    }

    #news-more > div :nth-child(2) {
        margin-top: 20px
    }

    #news-more > div :nth-child(even) {
        margin-left: auto
    }

    .tab-container > div > a {
        padding: 0 23px !important
    }

    .tab-container > div > a > span.icon {
        display: inherit !important
    }

    .tab-container > div > a > span.text {
        display: none
    }

    table.model-information-table tr td:first-child {
        width: 200px
    }

    table.chart-table tr td:first-child {
        width: 50%
    }

    table.chart-table tr td:first-child .name {
        max-width: 100px
    }

    table.chart-table tr td span.verbose {
        display: none !important
    }

    .user-review > div.text {
        clear: both;
        margin-top: 160px
    }

    table.model-comparison-table tr td {
        font-size: 10px
    }

    #comparison {
        right: 10px;
        width: 450px
    }

    #comparison > div.comparison-container {
        padding: 0 10px 15px 4px
    }

    #comparison a.comparison-button {
        top: 145px
    }

    #advanced-search > #advanced-search-inputs {
        width: 150px
    }

    #advanced-search > #advanced-search-results {
        left: 160px
    }

    div .window-overlay .window-suggest-an-edit {
        width: 322px;
        height: 352px
    }
}




@media only screen and (max-width: 480px) {
    #header #logo {
        top: 25px;
        width: 187px;
        height: 25px;
        background-size: 187px 25px
    }

    #header #display-finder {
        right: 110px
    }

    #header #search {
        width: 80px
    }

    .brand-listing-container-frontpage,
    .brand-listing-container-news {
        -webkit-columns: auto 3;
        -moz-columns: auto 3;
        columns: 3 auto
    }

    .brand-listing-container-frontpage a,
    .brand-listing-container-news a {
        margin: 10px
    }

    table.model-information-table tr td:first-child {
        width: 150px
    }

    table.chart-table tr td:first-child {
        width: 65%
    }

    table.chart-table tr td:first-child .name {
        max-width: 100px
    }

    table.chart-table tr td span.verbose {
        display: none !important
    }

    .tab-container > div > a {
        padding: 0 18px !important
    }

    .tab-container > div > span.icon {
        display: inherit
    }

    .tab-container > div > span.text {
        display: none
    }

    #comparison {
        right: 0;
        width: 440px
    }

    #comparison > div.icon-x {
        display: none
    }

    #comparison > div.comparison-container {
        padding: 0 0 15px 4px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end
    }

    #comparison a.comparison-button {
        top: 145px
    }
}




@media only screen and (max-width: 350px) {
    .tab-container > div > a {
        padding: 0 14px !important
    }

    .tab-container > div > span.icon {
        display: inherit
    }

    .tab-container > div > span.text {
        display: none
    }
}