:root {
    --fa-style-family-classic: "FontAwesome";
    --fa-font-solid: normal 900 1em/1 "FontAwesome"
}

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.ttf) format("truetype")
}

body,
html {
    height: 100;
}

body {
    background-color: #353334;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    text-align: center;
}

body,
body * {
    margin: 0;
}

#container {
    background-color: #fbfcfe;
    height: 100%;
    border-radius: .90rem;
}

header {
    background: #353334 url('../images/lady-justice.jpg');
    background-position-y: 0;
    background-position-x: -587px;
    height: 18rem;
    /* background-repeat: no-repeat; */
}

header h1 {
    color: #f5f2e9;
    text-shadow: 0 0 7px #000;
    font-size: 5rem;
    padding: 0 .5rem 0 15vw;
    text-align: right;

}

#container>article {
    padding: 2rem 1.5rem;
}

#container>article h2 {
    margin-top: 1rem;
}

#services {
    margin: 1rem 0 1rem 0;
    list-style: none;
    display: flex;
    flex-flow: column wrap;
    gap: .5rem;
    justify-content: space-evenly;
    padding: 0;

}

#services>li {
    flex: 1 1 auto;
    padding: 1rem .1rem .5rem 260px;
    border: 2px solid #333;
    min-width: auto;
    max-width: auto;
    width: 100%;
    min-height: 6rem;
    height: auto;
    border-radius: .6rem;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-color: #FFF;
    box-sizing: border-box;
    text-align: left;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 2rem auto;
}

#services>li:hover {
    border-color: #AAA;
    box-shadow: 0 0 5px #333;
}

#services li ul li {
    text-align: left;
}

#services h3 {
    text-align: left;
}

#family {
    background-image: url('../images/card-family3.jpg');
}

#criminal {
    background-image: url('../images/card-criminal.jpg');
}

#guardianship {
    background-image: url('../images/card-guardian.jpg');
}

#estate {
    background-image: url('../images/card-estate.jpg');
}

#immigration {
    background-image: url('../images/card-immigration.jpg');
}

#probate {
    background-image: url('../images/card-probate.jpg');
}

.disclaimer {
    font-size: .9rem;
    border-top: 1p;
}

footer {
    border-top: 1px solid #AAA;
    padding: 1.5rem;
    background-color: #fbf8f1;
    border-radius: 0 0 .75rem .75rem;
}

footer h2 {
    color: #737172;
}

footer .links{
    display: flex;
    justify-content: center;
}


footer .links li{
    display: inline-block;
    padding: .5rem;
    font-size: .95rem;
}

.contact-group {
    display: flex;
    gap: 1rem;
    text-align: center;
    flex-flow: row wrap;
    justify-content: space-around;
    font-size: .95rem;
}

.contact-group > div {
    flex: 1 1 auto;
    width: 100%;
    background-color: rgba(255, 255, 255, .7);
    border-top: 1px solid #AAA;
    border-radius: 1em;
    padding: 1em;
    margin: .5rem;
    position: relative;
}

.contact-group div a {
    display: block;
}

.contact-group h3 {
    font-weight: normal;
    color: #888;
}

.contact-group p,
.contact-group address {}

.opt-in {
    font-size: .75em;
}

/* Contact Icons */

.contact-group > div::before{
    color: #b5b8b7;
    position: absolute;
    top: .5em;
    left: .5em;
    font-size: 1.5em;
}

.mail::before{
    font-family: FontAwesome;
    content: "\f0e0";
}

.email::before{
    font-family: FontAwesome;
    content: "\40";
}

.office::before{
    font-family: FontAwesome;
    content: "\e4da";
}

.fax::before{
    font-family: FontAwesome;
    content: "\f1ac";
}

.phone.text::before{
    font-family: FontAwesome;
    content: '\f3cf';
    /* content: "\f095\20\f27a"; */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #services>li {
        width: 100%;
        min-height: 14rem;
        grid-template-columns: auto;
        grid-template-rows: 2rem auto 80px;
        padding: 0;
        background-position: bottom center;
    }

    #services>li>ul {
        grid-row: 2;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    header{
        height: 15rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    body{
        text-align: left;
    }

    #services {
        flex-flow: row wrap;
    }

    header{
        height: 12rem;
    }

    header h1 {
        padding: 3rem 0 0 0;
    }

    #services > li {
        width: auto;
        min-width: 45%;
        max-width: 47%;
        min-height: 14rem;
        grid-template-columns: auto;
        grid-template-rows: 2rem auto 60px;
        padding: 0;
        background-position: bottom center;
    }

    #services h3{
        text-align: center;
    }

    #services>li>ul {
        grid-row: 2;
    }

    .contact-group > div {
        width:auto;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body {
            font-size: 18px;  /* Large desktop */
    }

    #container{
        max-width: 1300px;
        width: 80vw;
        margin: auto;
    }

    #services > li{
        min-width: 15rem;
        max-width: 20rem;
        grid-template-rows: 2rem auto 60px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body {
        font-size: 20px;  /* Large desktop */
    }

    header h1{
        text-align: center;
    };
}