html {
    margin: 0;
    padding: 0;
    font-size: 18px;
}
body {
    font-size: 100%;
    margin: 0;
    padding: 0;
    font-family: assistant;
}

#main-content.service {
    display: block;
}

/********************************************
/       GRID LAYOUT                         /
********************************************/

/********************************************
/       MOBILE                      /
********************************************/
@media screen and (max-width: 480px) {
    nav.toc {
        max-width: unset;
        padding: 0.5rem;
    }
    nav.toc ul {
    }
    body > header {
        padding-bottom: 0.3rem;
    }
    body > header > * {
        margin-top: 1px;
    }
    main {
        padding: 0.25rem;
    }
    .mq-jc-center {
        justify-content: center;
    }
    #main-site-navigation {
        justify-content: center;
        align-items: stretch;
        /* gap: 3px; */
        margin: 0;
        padding-bottom: 5px;
    }
    #main-site-navigation a:nth-child(odd) {
        border-left: 1px solid #fff;
    }
    #main-site-navigation a {
        flex: 0 0 50%;
        margin: 0;
        border: none;
        border-radius: 0;
        border-bottom: 1px dotted #fff;
        text-align: center;
        padding: 5px;
        /* margin-top: 3px; */
    }
    #main-site-navigation a:last-child {
        flex: unset;
        margin-top: 5px;
    }
    html body .mq-no-flex,
    html body .mq-no-grid {
        display: unset;
    }
    html body div.mq-no-flex,
    html body article.mq-no-flex,
    html body section.mq-no-flex,
    html body p.mq-no-flex,
    html body div.mq-no-grid,
    html body article.mq-no-grid,
    html body section.mq-no-grid,
    html body p.mq-no-grid,
    html body .page-content .mq-no-grid,
    html body .page-content .mq-no-flex {
        display: block;
    }
    .mq-grid {
        display: grid;
    }
    /****---------------*****/
    /*      search's        */
    /****---------------*****/

    .mq-header-search {
        margin: 0;
        padding: 0;
    }
    .mq-header-search form {
        padding: 0;
        display: grid;
        grid-template-columns: 20% 1fr;
        place-content: center;
    }
    .mq-header-search img {
        grid-column: 1;
        grid-row: 1/3;
        margin: 0;
    }
    .mq-header-search input {
        grid-column: 2;
    }
    html body .mq-flex-100,
    html body .mq-grid-100 {
        grid-template-columns: 1fr;
    }
    .page-content div.article-main-image {
        float: none;
    }
    .mobile-buttons a,
    .mobile-button {
        border: 1px solid #999;
        border-radius: 3px;
        box-shadow: 0 0 10px -7px #000;
        background-color: #2f6183;
        color: #fff;
    }

    /****---------------*****/
    /*      Categories      */
    /****---------------*****/
    .page-content.categories {
    }
    .page-content.categories .category-item {
        margin-top: 1rem;
    }

    /****-----------*****/
    /*      Leads       */
    /****-----------*****/
    #leads-maker {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: unset;
        align-items: stretch;
        align-content: stretch;
        gap: 2px;
    }
    .lead-maker {
        border: 1px solid #aaa;
    }
    .lead-maker h2 {
        border: none;
    }
    .lead-maker > a {
        display: none;
    }

    .homepage {
        display: unset;
    }

    /****-----------*****/
    /*      Lawyers     */
    /****-----------*****/
    .mq-lawyer-card {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .lawyer-card > div.card-image {
        grid-row: 1;
        grid-column: 1/3;
    }
    .lawyer-card > div.card-info {
        grid-row: 2;
        grid-column: 1/3;
    }
    .lawyer-card > div.links {
        grid-row: 3;
        grid-column: 1;
    }
    .lawyer-card > address {
        grid-row: 3;
        grid-column: 2;
    }
    #header-and-footer {
        justify-content: center;
    }
}
/********************************************
/       TABLET                      /
********************************************/
@media screen and (min-width: 480px) and (max-width: 1200px) {
    .mq-jc-center {
        justify-content: center;
    }
    html body .mq-no-flex {
        display: unset;
    }
}
/********************************************
/       PC                      /
********************************************/
@media screen and (min-width: 1200px) {
    body > .content {
        max-width: 1200px;
        margin: 0 auto;
    }
    body > header > .content {
        max-width: 1200px;
        margin: 0 auto;
    }
    body > #main-content {
        display: grid;
        grid-template-columns: 6fr 2fr;
        max-width: 1200px;
        margin: 0 auto;
        gap: 1.5rem;
    }
    body > #main-content > main {
        grid-column: 1;
    }
    body > #main-content > aside {
        grid-column: 2;
    }
    body > footer > .content {
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
    }
}