.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px 0;
    grid-template-areas:
    "title title title title title title"
    "img1 img1 img1 services services services"
    "img2 banrnews banrnews banrnews banrnews banrnews"
    "banner banner banner banner banner banner"
    "section1 section1 section2 section2 section3 section3"
    "section3a section3a section3a section3a section3a section3a"
    "section4 section4 section4 section5 section5 section5"
    "footer footer footer footer footer footer";
}
.img {
    display: grid;
    grid-row: 3/4;
    grid-column: 1/4;
    grid-area: img1;
    float: left;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
}
.responsive  {
    width: 100%;
    height: auto;
}
.services  {
    display: grid;
    grid-row: 3/4;
    grid-column: 4/7;
    grid-area: services;
    margin: 0;
    padding: .7rem;
    width: 100%;
    height: auto;
    background-color: #ddd;
    color: #000;
    font-weight: bold;
    align-items: center;
    font-size: 1rem;
}
.p1  {
    color: #000;
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
    padding-top: 1rem;
    font-weight: bold;
    line-height: 1.5rem;
}
#blackfnt1  {
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
.blackfnt2  {
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
.hi2 {
    padding-top: 1.2rem;
    font-size: 1.8rem;
    text-align: center;
}
.banner2  {
    display: grid;
    grid-row: 4/5;
    grid-column: 1/7;
    grid-area: banner;
    text-align: center;
    font-weight: bold;
    background-color: #afafb5;
    align-items: center;
    justify-content: center;
    padding-top: .6rem;
}
.bannernews  {
    display: grid;
    grid-row: 4/5;
    grid-column: 1/7;
    grid-area: banrnews;
    text-align: center;
    font-weight: bold;
    background-color: #cfcfc5;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.5rem .6rem 1.5rem;
}
.img2 {
    display: grid;
    grid-row: 4/5;
    grid-column: 1/2;
    grid-area: img2;
    float: left;
    text-align: center;
    background-color: #cfcfc5;
    justify-content: center;
    align-items: center;
}
.p2  {
    color: #000;
    font-size: 16px;
    font-weight: normal;
}
.p5  {
    font-size: 1.8rem;
    color: #000;
    margin: 0;
    line-height: 2.1rem;
    text-align: center;
    font-family: times, helvetica, sans-serif;
    padding: .6rem 0 1.2rem 0;
 }
.section1  {
    display: inline-grid;
    grid-row: 5/6;
    grid-column: 1/3;
    grid-area: section1;
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 1rem;
    justify-content: center;
    background-color: #e2e3ea;
}
p  {
    color: #000;
    margin: 0 auto;
    line-height: 1.2rem;
    font-family: times, helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
 }
.section1 img {
    display: block;
    margin: 0 auto;
}
h6  {
    color: #000;
    background-color: #ccc;
    font-family: times, helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.section2  {
    display: inline-grid;
    grid-row: 5/6;
    grid-column: 3/5;
    grid-area: section2;
    min-height: 320px;
    font-weight: bold;
    margin: 0;
    line-height: 1rem;
    color: #000;
    background-color: #e2e3ea;
    justify-content: center;
    text-align: center;
}
.section2 img {
    display: block;
    margin: 0 auto;
}
.section3  {
    display: inline-grid;
    grid-row: 5/6;
    grid-column: 5/7;
    grid-area: section3;
    min-height: 320px;
    line-height: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #e2e3ea;
}
.section3 img {
    display: block;
    margin: 0 auto;
}
.section3a {
    display: grid;
    grid-column: 1/7;
    grid-row: 6/7;
    grid-area: section3a;
    background-color: #e2e3ea;
    align-items: center;
}
#separate  {
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem 0 1rem 0;
}
#separate a{
    list-style: none;
    text-decoration: none;
}
#separate a:hover{
    color: #a00;
}
.section4  {
    display: inline-grid;
    grid-row: 7;
    grid-column: 1/4;
    grid-area: section4;
    margin: 0;
    padding: 0 20px;
    width: 100%;
    height: auto;
    color: #000;
    background-color: #ccc;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    grid-gap: 0;
}
#open  {
    display: grid;
    font-size: 1.9rem;
    font-weight: bold;
    color: #000;
    padding: 10px;
    margin: 1rem auto;
    font-family: times, helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
}
.article4  {
    font-size: 1.1rem;
    padding: .6rem 2rem;
}
.wrap  {
    margin: 0 auto;
    font-weight: bold;
}
.capital  {
    text-transform: uppercase;
    font-family: times, helvetica, sans-serif;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
}
.noncapital  {
    font-size: 1.1rem;
    text-align: center;
    font-family: Arial, helvetica, sans-serif;
    font-style: italic;
    margin-bottom: 20px;
    color: #a03030;
}
.section5  {
    display: grid;
    grid-row: 7;
    grid-column: 4/7;
    grid-area: section5;
    width: 100%;
    height: auto;
    color: #000;
    background-color: #ccc;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 1rem 4rem;
    align-content: center;
}
.p3 {
    font-size: 1.1rem;
    text-align: justify;
    line-height: 1.4rem;
    background-color: #ccc;
    padding: 6rem 1rem 0 1rem;
    width: 100%;
}
.capitalize:first-letter {
    float: left;
    font-size: 6rem;
    font-weight: bold;
}
.footer  {
    display: grid;
    grid-column: 1/7;
    grid-row: 8;
    grid-area: footer;
    align-items: center;
    /*justify-content: center;*/
}
.bottom  {
    color: #fff;
    background-color: #222;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1.5rem;
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
body {
    width: 100%;
    max-height: 100vh;
    margin: 0 auto;
    padding: 0;
    color: #000;
    background-color: #eee;
    font-family: times, helvetica, sans-serif;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.grid {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(10, auto);
    grid-template-areas:
    "title"
    "img1"
    "services"
    "img2"
    "banrnews"
    "banner"
    "section1"
    "section2"
    "section3"
    "section3a"
    "section4"
    "section5"
    "footer";
    min-width: 320px;
    color: #000;
    background-color: #888;
    margin: 0 auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-area: title;
    margin: 0 auto;
    width: 100%;
    min-height: 80px;
    justify-content: center;
    align-items: center;
    background-color: #afafb5;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.title a  {
    color: #000;
    text-decoration: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
#fs1  {
    font-size: 1.1rem;
    color: #222;
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.highlight  {
    font-size: 1.3rem;
    padding: 15px 20px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p5  {
    font-size: 1.5rem;
    color: #000;
    margin: 0;
    line-height: 2.1rem;
    text-align: center;
    padding: 10px 10px;
 }
 }
.img {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-area: img1;
     background-color: #ddd;
    justify-content: center;
    align-items: center;
}
.responsive  {
    width: 100%;
    height: auto;
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.bannernews  {
    display: grid;
    grid-row: 4/5;
    grid-column: 1/7;
    grid-area: banrnews;
    text-align: center;
    font-weight: bold;
    background-color: #cfcfc5;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.img2 {
    display: grid;
    grid-row: 4/5;
    grid-column: 1/2;
    grid-area: img2;
    float: left;
    text-align: center;
    background-color: #cfcfc5;
    justify-content: center;
    align-items: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.responsive2  {
    width: 80%;
    height: auto;
    justify-content: center;
    align-items: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p2  {
    color: #000;
    font-size: 14px;
    font-weight: normal;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p1  {
    color: #000;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    min-width: 320px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
#blackfnt1  {
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.blackfnt2  {
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.hi2 {
    padding-top: 1.2rem;
    font-size: 1.5rem;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.section1  {
    display: grid;
    min-height: 320px;
    padding: 0 15px;
    margin: 0 auto;
    line-height: 1rem;
    justify-content: center;
    background-color: #e2e3ea;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.responsive  {
    width: 100%;
    height: auto;
}
}
.section3a {
    display: grid;
    /*grid-column: 1;*/
    /*grid-row: 6/7;*/
    grid-area: section3a;
    background-color: #e2e3ea;
    align-items: center;
}
#separate  {
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem 4rem 1rem 0;
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.section4  {
    display: grid;
    grid-area: section4;
    width: 98%;
    min-height: 350px;
    color: #000;
    background-color: #ccc;
    margin: 0;
    border: none;
    padding: 1rem 3rem 1rem 1rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
#open  {
    display: grid;
    font-size: 1.9rem;
    font-weight: bold;
    color: #000;
    margin: 0 auto;
    padding: 0 0 20px 25px;
    text-align: center;
    text-transform: uppercase;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.capitalize {
    font-size: 1.3rem;
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.wrap  {
    margin: 0 auto;
    font-weight: bold;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.capital  {
    text-transform: uppercase;
    font-family: times, helvetica, sans-serif;
    font-size: 18px;
    padding: 0 10px;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.noncapital  {
    font-size: 16px;
    text-align: center;
    font-style: italic;
    color: #a03030;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p3 {
    font-size: 1rem;
    line-height: 1.4rem;
    background-color: #ccc;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.section5  {
    display: block;
    grid-row: 6;
    grid-column: 1;
    grid-area: section5;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 350px;
    color: #000;
    background-color: #ccc;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.2rem;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p3 {
    font-size: 1rem;
    text-align: justify;
    line-height: 1.2rem;
    background-color: #ccc;
    padding: 1rem 1rem 0 1rem;
    width: 100%;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.p6:first-letter {
    float: left;
    font-size: 4rem;
    font-weight: bold;
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.footer  {
    display: grid;
    grid-column: 1/7;
    grid-row: 4/5;
    grid-area: footer;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) and (orientation: portrait) {
.bottom  {
    color: #fff;
    background-color: #222;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    padding: 1.2rem;
    width: 100%;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-height: 100vh;
    color: #000;
    background-color: #eee;
    font-family: times, helvetica, sans-serif;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.grid {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, auto);
    grid-template-areas:
    "title title title title title title"
    "img1 img1 img1 services services services"
    "img2 img2 banrnews banrnews banrnews banrnews"
    "banner banner banner banner banner banner"
    "section1 section1 section2 section2 section3 section3"
    "section4 section4 section4 section5 section5 section5"
    "footer footer footer footer footer footer";
    grid-gap: 10px;
    /*min-width: 320px;*/
    color: #000;
    background-color: #888;
    /*margin: 0 auto;*/
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-area: title;
    margin: 0 auto;
    width: 100%;
    padding: 5px;
    min-height: 80px;
    justify-content: center;
    align-items: center;
    background-color: #afafb5;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.title a  {
    color: #000;
    text-decoration: none;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
#fs1  {
    font-size: 1.1rem;
    color: #222;
    padding: 10px 20px;
    font-weight: bold;
    text-align: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.highlight  {
    font-size: 2rem;
    padding: 0 20px;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.img {
    display: grid;
    grid-row: 3/4;
    grid-column: 1/4;
    grid-area: img1;
    float: left;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.responsive  {
    width: 100%;
    height: auto;
}
}
@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
.services  {
    display: grid;
    grid-column: 4/7;
    grid-row: 3/4;
    grid-area: services;
    margin: 0 auto;
    padding: .7rem 0 .7rem 2rem;
    width: 100%;
    height: auto;
    background-color: #ddd;
    color: #000;
    font-weight: bold;
    align-items: center;
}
}
@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
.bannernews  {
    display: grid;
    /*grid-row: 4/5;*/
    /*grid-column: 1/7;*/
    grid-area: banrnews;
    text-align: justify;
    font-weight: bold;
    background-color: #cfcfc5;
    align-items: center;
    justify-content: center;
    padding: .6rem 1rem .5rem 1rem;
}
}
@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
.img2 {
    display: grid;
    /*grid-row: 4/5;*/
    grid-column: 1/2;
    grid-area: img2;
    float: left;
    text-align: center;
    background-color: #cfcfc5;
    justify-content: center;
    align-items: center;
}
}
@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
.p2  {
    color: #000;
    font-size: 16px;
    font-weight: normal;
}
}
@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
.p1  {
    color: #b00;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    padding-top: 0;
    font-weight: bold;
    line-height: 1.8rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.hi2 {
    font-size: 1.2rem;
    text-align: center;
    padding-top: 1.2rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
#blackfnt1  {
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.blackfnt2  {
    font-size: .6rem;
    margin: 0 auto;
    text-align: center;
    color: #000;
    background-color: #ddd;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.section4  {
    display: grid;
    grid-area: section4;
    width: 98%;
    min-height: 350px;
    color: #000;
    background-color: #ccc;
    margin: 0;
    border: 1px solid black;
    padding: 1rem 3rem 1rem 1rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
#open  {
    display: grid;
    font-size: 1.9rem;
    font-weight: bold;
    color: #000;
    margin: 0 auto;
    padding: 0 0 20px 25px;
    font-family: times, helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.capitalize {
    font-size: 1.3rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.wrap  {
    margin: 0 auto;
    font-weight: bold;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.capital  {
    text-transform: uppercase;
    font-family: times, helvetica, sans-serif;
    font-size: 18px;
    padding: 0 10px;
    text-align: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.noncapital  {
    font-size: 16px;
    text-align: center;
    font-family: Arial, helvetica, sans-serif;
    font-style: italic;
    color: #a03030;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.p3 {
    font-size: 1rem;
    line-height: 1.4rem;
    background-color: #ccc;
    /*min-width: 320px;*/
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.section5  {
    display: block;
    grid-row: 6;
    grid-column: 1;
    grid-area: section5;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 350px;
    color: #000;
    background-color: #ccc;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 1rem 3rem;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.p3 {
    font-size: 1rem;
    text-align: justify;
    line-height: 1.2rem;
    background-color: #ccc;
    padding: 1rem 1rem 0 1rem;
    width: 100%;
}
}
@media only screen and (min-width: 415px) and (max-width: 800px) {
.p6:first-letter {
    float: left;
    font-size: 4rem;
    font-weight: bold;
}
}
@media only screen and (min-width: 1281px){
body {
    width: 96%;
    max-height: 100vh;
    margin: 0 auto;
    padding: 0;
    font-size: 1rem;
    font-family: times, helvetica, sans-seriff;
}
}
@media only screen and (min-width: 1281px){
.grid {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, auto);
    grid-template-areas:
    "nav nav nav nav nav nav"
    "title title title title title title"
    "img1 img1 img1 services services services"
    "banner banner banner banner banner banner"
    "section1 section1 section2 section2 section3 section3"
    "section4 section4 section4 section5 section5 section5"
    "footer footer footer footer footer footer";
    min-width: 320px;
    color: #000;
    background-color: #888;
    margin: 0 auto;
}
}
@media only screen and (min-width: 1024px){
.img {
    display: grid;
    grid-row: 3/4;
    grid-column: 1/4;
    grid-area: img1;
    float: left;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
}
}
@media only screen and (min-width: 1024px){
.responsive  {
    width: 100%;
    height: auto;
}
}
@media only screen and (min-width: 1024px){
.section1  {
    display: inline-grid;
    grid-row: 5/6;
    grid-column: 1/3;
    grid-area: section1;
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 1rem;
    justify-content: center;
    background-color: #e2e3ea;
}
}