:root {
    /* ----- Site Colors ----- */
    --color-primary:rgb(15, 76, 119); /* ----- header text ----- */
    --color-secondary:rgb(140, 192, 75);
    --color-compementry-one:rgb(51, 145, 170);
    --color-compementry-two:rgb(255, 208, 0); 
    --color-compementry-three:rgb(245, 159, 66);
    --color-complmentry-four:rgb(212, 216, 218);
    --color-links:rgb(0, 100, 0); /* ----- link color ----- */
    --color-hover-text:rgb(162, 73, 119); /* ----- hover Colors ----- */
    --font-family_two: 'Trebuchet MS', Tahoma, Arial, sans-serif;
}
/* ----- Universal css ----- */
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    color: rgb(51, 51, 51);
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: underline;
    word-wrap: break-word;
    font-weight: 500;
    color: var(--color-links);
    text-decoration: none; 
}
a:hover,
li a:hover {
    text-decoration: underline; 
    cursor: pointer;
    color: var(--color-hover-text)
}
a img{
    border: none;
}
img {display: block; max-width: 100%; height: auto;}
h1 {
    font-size: 2em;
    margin: 0;
    line-height: 1.1em;
    color: var(--color-primary);
}
h2,
h3,
h4,
h5 {
    margin: .5rem 0;
    line-height: 1.375em;
    color: var(--color-primary);
    font-family: var(--font-family_two);
    font-weight: 400;
}
h2 {font-size: 1.45em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
p {margin: 0; padding: .5rem 0;}
p a {text-decoration: underline;}
li a {text-decoration: none; padding: 1rem;}
strong {font-weight: 600;}
nav li {
    display: grid;
}
nav  a,.footer_menu a {
    word-wrap: break-word;
    font-weight: 500;
    color: var(--color-links);
    text-decoration: none;
    font-size: 1.1em;
}
.footer_menu a {
    font-size: 1em;
}
nav a:hover,.footer_menu a:hover {
    color: var(--color-secondary);
    text-decoration: underline; 
}
.footer_menu li a {
    text-decoration: none; 
    padding: 0;
}
nav a:link,
.footer_menu a:link { 
    color: var(--color-links); 
}
nav a:visited,.footer_menu a:visited {
    color: var(--color-links); 
}
nav a:hover,.footer_menu a:hover {
    color: var(--color-secondary);
}
nav a:focus,.footer_menu a:focus { 
    color: var(--color-links);
}
nav li .active,.subnavtitle .active h2 {
    color: var(--color-primary);
    font-weight: 600;
}

/* -------- CSS Grid Core -------- */
header {
    grid-area: head;
}
main {
    grid-area: main;
}
footer {
    grid-area: footer;
}
 body {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas:
            "head"
            "main"
            "footer";
 }
 header {
    display: grid;
    height: auto;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    color: var(--color-primary);
}
main {
    display: grid;
    min-height: calc(100vh - 277px);
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 200px min-content;
    grid-gap: 1rem;
    position: relative;
    padding: .5rem 0 1rem;
}
.mainsafety {
    grid-template-rows: 320px min-content;
}
.mainprojects {
    grid-template-rows: 230px min-content;
}
footer {
    display: grid;
    height: auto;
    color: var(--color-primary);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(80px, 1fr));
    padding: 0 1rem;
}
/* -------- Header -------- */

@supports (display: grid) {
    header .logo {
        grid-column: 1 / 7;
        grid-row: 1 / 3;
        padding: 1rem 0 0;
        width: auto;
    }
}
header .contact {
    display: none;
}
header nav {
    grid-column: 1 / 7;
    grid-row: 3 / 4;
    width: auto; 
}
.logo {
    display: grid;
    justify-content: center;
    align-content: center;
}
.logo_img {
    height: 150px;
}
nav {
    display: grid;
    align-self: center;
}
nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    min-height: 45px;
    height: auto;
}
/* -------- Main -------- */
.subnav {
    grid-column: 1 / 13;
    grid-row: auto; 
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    line-height: 1.3;
}
.hidenav {
    display: none;
}
.mobnav {
    order: -1;
}
.project, .safety, .support, .innovation {
flex: 1; 
display: flex;
flex-direction: column;
align-items: center;
margin: 0 .15rem;
}
.subnavtitle {
background-color:rgb(255, 255, 255);
width: 100%;
border: solid 2px;
border-top: none;
}
@supports (display: grid) {
    .subnav {
        height: 175px;
        width: 100%;
    }
    .subnavdelivery {
        height: 215px;
        width: 100%;
    }
    .subnavsafety {
        height: 280px;
        width: 100%;
    }
}
.subnav ul {
 padding: 0 .5rem;
}
.subnav li a {
 display: flex;
 padding: 8px;
 align-items: center;
}
.subnav li .active {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}
.subnavtitle a h2 {
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: .25rem 0;
    text-align: center;
    color: var(--color-links);
}
main h1 {
    grid-column: 1 / 13;
    padding: 0 0 .5rem 1rem;
    margin-left: 1rem;
    border-left: solid 20px transparent;
    border-bottom: solid 5px transparent;
    width: 50%;
}
.underline {
    border-color: rgb(212, 216, 218);
    border-radius: 50px 0 0 50px;
    width: max-content;
}
.project .subnavtitle {
    border-color: rgb(255, 208, 0);
}
.project_b_top {
    border-top: solid 1px rgb(255, 208, 0);
}
.project_bg {
    background: linear-gradient(to bottom, rgb(255, 218, 55), rgb(255, 255, 255));
}
.project_underline {
    border-color: rgb(255, 208, 0);
    border-radius: 50px 0 0 50px;
    width: max-content;
}
.safety .subnavtitle {
    border-color: rgb(245, 159, 66);
}
.safety_b_top {
    border-top: solid 1px rgb(245, 159, 66);
}
.safety_bg {
    background: linear-gradient(to bottom, rgb(255, 178, 94), rgb(255, 255, 255));
}
.safety_underline {
    border-color: rgb(245, 159, 66);
    border-radius: 50px 0 0 50px;
    width: max-content;
}
.support .subnavtitle {
    border-color: rgb(140, 192, 75);
}
.support_b_top {
    border-top: solid 1px rgb(140, 192, 75);
}
.support_bg {
    background: linear-gradient(to bottom, rgb(155, 210, 88), rgb(255, 255, 255));
}
.support_underline {
    border-color:rgb(140, 192, 75);
    border-radius: 50px 0 0 50px;
    width: max-content;
}
.innovation .subnavtitle {
    border-color: rgb(134, 190, 205);
}
.innovation_b_top {
    border-top: solid 1px rgb(134, 190, 205);
}
.innovation_bg {
    background: linear-gradient(to bottom, rgb(146, 207, 223), rgb(255, 255, 255));
}
.innovation_underline {
    border-color: rgb(134, 190, 205);
    border-radius: 50px 0 0 50px;
    width: max-content;
}
.full_panel {
    grid-column: 3 / 11;
    grid-row: auto; 
}
@supports (display: grid) {
        .main_panel {
        grid-column: 1 / 13;
        grid-row: auto; 
        padding: 0 1rem;
    }
    .main_panel .photo,
    .main_panel .photo-50,
    .main_panel .photo_right {
        display: flex;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: .5rem;
    }
}
.main_panel .photo-50 {
width: 100%;
}
iframe {
width: 90%;
}
figcaption {
text-align: center;
font-style: italic;
color: var(--color-primary);
}
.main_panel p {
    width: auto;
    padding: 0 0 .6rem 0;
}
.main_panel ul {
    width: 100%;
    padding: 0 0 0 1rem;
    border-left: solid 7px rgb(235, 239, 241);
    margin-bottom: .7rem;
}
.full_panel ul {
    width: 100%;
    padding: 0 0 0 2rem;
    margin-bottom: .7rem;
}
.main_panel ul li {
    padding: .25rem 0;
}
.full_panel ul li {
    padding: .25rem 0 .25rem 1rem;
    list-style-type: decimal;
}
.main_panel ul li:first-child {
    padding: 0 0 .25rem;
}
.main_panel ul li:last-child {
    padding: .25rem 0 0;
}
.page_title {
    grid-column: 1 / 12;
    grid-row: auto;
    display: flex;
    flex-flow: wrap;
}
.page_title h1 {
    width: auto;
}
.side_panel {
    grid-column: 1 / 13;
    grid-row: auto;
    display: grid;
    padding: 0 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: 2px auto;
    justify-items: center;
}
.side_panel .img {
    width: 70%;
    height: auto;
    max-width: 300px;
    padding: .5rem 0 0;
    align-self: end;
    grid-row: end;
    justify-self: center;
}
.callout {
    height: auto;
    padding: .5rem;
    text-align: center;
    margin: .5rem 0 0;
    border: 2px solid var(--color-complmentry-four);
    align-self: center;
}
.callout_title {
    font-size: 1.3em;
    color: var(--color-primary);
    font-family: var(--font-family_two);
    font-weight: 400;
}
@supports (display: grid) {
    .callout {
        width: 100%;
    }
}
.multi-line {
    width: 100%;
}
.project_links { 
    padding: .5rem 0;
}
.project_links li {
    padding: .5rem 0;
}
.project_links a {
    padding: .5rem 0;
}
main::before {
    content:'';
    width:100%;
    position: absolute;
    left:0;
    top:-1px;
    height: 3px;
    background: linear-gradient(to right, rgb(255, 208, 0), rgb(140, 192, 75), rgb(51, 145, 170));
}
main::after {
    content:'';
    width:100%;
    position: absolute;
    left:0;
    bottom:-1px;
    height: 3px;
    background: linear-gradient(to left, rgb(255, 208, 0), rgb(140, 192, 75), rgb(51, 145, 170));
}
/* -------- Project Card -------- */
.projects_panel {
    grid-column: 2 / 12;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 1rem;
    justify-self: center;
}
.projects_card {
    grid-column: 2 / 12;
    grid-row: auto; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    border: solid 1px var(--color-primary);
}
.projects_card a {
    grid-column: span 1;
    grid-row: span 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-gap: .5rem;
    text-decoration: none;
}
.projects_card a:hover {
    box-shadow: 0 5px 14px 0 var(--color-primary);
}
.projects_card_img {
    grid-column: 1 / 7;
    grid-row: auto;
}
.projects_card_img img {
    width: 100%;
    height: auto;
    display: grid;
    max-height: 200px;
    object-fit: cover;
}
.projects_card .card_text {
    grid-column: 1 / 7;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:auto;
    justify-items: center;
    padding: .5rem;
}
.projects_card .card_text h2 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: center;
    text-align: center;
    font-size: 1.3em;
}
.projects_card .card_text p {
    grid-column: 1 / 2;
}
.projects_lnk {
    justify-self: end;
    text-align: right;
    font-size: 1.1rem;
    align-self: end;
}
.projects_card a:hover .projects_lnk {
    text-decoration: underline;
}
/* -------- Service Card -------- */
.services_panel {
    grid-column: 1 / 13;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-gap: 1.7rem;
    align-content: space-around;
    padding: 0 2rem;
}
.services_card {
    grid-column: 2 / 12;
    grid-row: auto; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    border: solid 1px var(--color-primary);
    border-radius: 5px;
}
.services_card a {
    grid-column: span 1;
    grid-row: span 1; 
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 75px auto;
    text-decoration: none;
    border-radius: 5px;
}
.services_card a:hover {
    box-shadow: 0 5px 14px 0 var(--color-primary);
}
.services_card_title {
    grid-column: 1 / 7;
    grid-row: 1 / 2; 
    display: grid;
    border-radius: 5px 5px 0 0;
    padding: 5px;
    justify-content: center;
    align-items: center;
}
.services_card h2 {
    font-size: 1.1em;
}
.services_card .card_text {
    grid-column: 1 / 7;
    grid-row: 2 / 3;
    display: grid;
    justify-content: center; 
    padding: .5rem;
}
.service_lnk {
    align-self: flex-end;
    text-align: right;
    font-size: 1.1rem;
}
.services_card a:hover .service_lnk {
    text-decoration: underline;
}
/* -------- Footer -------- */
footer {
    min-height: 60px;
    justify-content: center;
    align-content: center;
    padding: 1rem;
}
.footer_menu {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}
.copyright {
    grid-column: 1 / 7;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
}
.contact {
    grid-column: 3 / 7;
    grid-row: 1 / 2;
    display: grid;
    justify-items: end;
}
footer p {
    margin: 0;
    padding: 0 0 .25rem;
}
.footer_menu li {
    display: grid; 
    width: auto;
    height: 40px;
    max-width: 180px;
}
/* ------------ Contact Page ------------ */
.contact_text {
    grid-column: 2 / 12;
}
.contact_panel {
    grid-column: 2 / 12;
    display: grid;
}
@supports (display: grid) {
    .contact_panel {
        justify-content: center;
        align-items: center;
        align-self: start;
    }
}
.contact_panel h2,
.contact_panel h3 {
    padding: 0;
}
.message {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content;
    justify-content: center;
    padding: 0 1rem;
}
.message h2 {
    grid-column: 1 / 3;
}
/* ------------ Sitemap Page ------------ */
.sitemap_content {
    grid-column: 1 / 13;
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
}
.sitemap_panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.sitemap_panel ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.sitemap_panel li {
    height: 45px;
    display: flex;
    border: solid 1px gainsboro;
    margin: .5rem;
}
.sitemap_panel li a{
    flex-grow: 1;
    align-self: center;
    padding: .5rem;
}
/* ----- Form ----- */
form {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    justify-content: center;
    align-content: center;
    grid-gap: .5rem;
    margin: 0;
}
input, textarea {
    cursor: pointer;
    grid-column: 1 /5;
    font-size: 16px;
    height: auto;
    outline: 0;
    padding: 15px;
    color: rgb(105, 108, 113);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.06) inset;
    margin: 0 0 8px;
    }
input[type="text"], input[type="email"], textarea {
    grid-column: 1 /5;
    font-size: 16px;
    height: auto;
    outline: 0;
    padding: 15px;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
}
label {
    grid-column: 1 / 5;
    font-family: var(--font-family_two);
    font-size: 1.1em;
    color: var(--color-primary);
    display: block;
}
button[type="submit"]  {
    grid-column: 1 / 2;
    border-radius: 8px;
    color: var(--color-compementry-two); 
    background-color: var(--color-primary);
    padding: .8rem;
    border: solid 1px var(--color-primary);
    font-family: var(--font-family_two);
    font-weight: 600;
    font-size: 1.1em;
    cursor: pointer;
}
button:hover {
    color: var(--color-primary);
    background-color: var(--color-complmentry-four);
}
.error {
    grid-column: span 2;
    color: rgb(220, 20, 60);
}
/* ----------------- Media Queries ----------------- */
@media screen and (min-width: 320px) {
    html {
      font-size: calc(16px + 4 * ((100vw - 320px) / 680));
    }
  }
@media screen and (min-width: 490px) {
    @supports (display: grid) {
        .main_panel .photo,
        .main_panel .photo-50 {
            float: left;
            padding: .5rem 1rem .5rem 0;
        }
        .main_panel .photo_right {
            float: right;
            padding: .5rem 0 .5rem 1rem;
        }
    }
}
@media only screen and (min-width: 36.25em) { /* 580px */
    nav ul {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media only screen and (min-width: 48em) { /* 768px */
    /* -------- Header -------- */
    header {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    @supports (display: grid) {
        header .logo {
            padding: 1rem 0 .6rem;
        }
    }
    /* -------- Navigation -------- */
    nav  a, .footer_menu a {
        word-wrap: break-word;
        font-weight: 500;
        color: var(--color-links);
        text-decoration: none;
        position: relative;
    }
    nav a:before, .footer_menu a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color:rgb(255, 255, 255);
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
    }
    nav a:hover, .footer_menu a:hover {
        color:  var(--color-primary);
        text-decoration: none; 
    }
    nav a:hover:before, .footer_menu a:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        background-color: var(--color-primary);
    } 
    /* -------- Project Card -------- */
    .projects_card a {
        grid-column: span 1;
        grid-row: span 1; 
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        text-decoration: none;
    }
    .projects_card a:hover {
        box-shadow: 0 5px 14px 0 var(--color-primary);
    }
    .projects_card_img {
        grid-column: 1 / 3;
    }
    .projects_card .card_text {
        grid-column: 3 / 7;
    }
    /* -------- Service Card -------- */
    .services_card {
        grid-column: span 4;
        grid-row: auto; 
    }
    /* ------------ Contact Page ------------ */
    @supports (display: grid) {
        .contact_text {
            grid-column: 2 / 12;
        }
        .contact_panel {
            grid-column: 8 / 13;
            padding: .5rem;
        }
        .message {
            grid-column: 2 / 7;
            display: grid;
            padding: 0;
        }
    }
    /* -------- Footer -------- */
    footer {
        grid-template-rows: minmax(80px, 1fr);
    }
}
@media only screen and (min-width: 52em) {  /* 832px */
    header .logo {
        grid-column: 1 / 3;
        grid-row: 1 / 4;
    }
    header nav {
        grid-column: 3 / 7;
        grid-row: 1 / 4;
    }
}
@media only screen and (min-width: 60em) { /* 960px */
    /* -------- Main -------- */
    main,
    .mainsafety,
    .mainprojects {
        grid-template-rows: 300px min-content auto;
    }
    .subnav {
        grid-column: 1 / 13;
        grid-row: auto; 
        display: flex;
        flex-direction: row;
    }
    .hidenav {
        display: flex;
        flex-direction: column;
    }    
    .mobnav {
        order: 0;
    }
    .main_panel .photo-50 {
        width: 50%;
    }
    /* -------- main -------- */
    @supports (display: grid) {
        .main_panel {
            grid-column: 1 / 9;
            grid-row: auto; 
            padding: 0 1rem 1rem 3rem;
        }
        .side_panel {
            grid-column: 9 / 13;
            grid-row: auto;
            padding: 0 1rem 0 0;
        }
    }
}
@media only screen and (min-width: 62.5em) { /* 1000px */
    html {
        font-size: 1.2em;
    }
}
@supports not (display:grid) {
    /* -------- Flex Core -------- */
    body {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    header {
        display: flex;
        height: auto;
        color: var(--color-primary);
        flex-direction: column;
    }
    main {
        display: flex; 
        flex-wrap: wrap;
        min-height: calc(100vh - 277px);
        position: relative;
        padding: .5rem 0 1rem;
    }
    /* -------- Header -------- */
    header {
        justify-content: space-between;
    }
    .logo {
        width: 100%;
        height: auto;
        justify-content: center;
        align-content: center;
        display: flex;
    }
    nav {
        width: 100%;
        height: auto;
        justify-content: center;
        align-content: center;
        display: flex;
    }
    nav ul {
        display: flex;
        flex-direction: row;
        height: 45px;
        width: auto;
        flex-flow: wrap;
    }
    nav li {
        display: flex;
        flex-direction: row;
    }
     /* -------- Main -------- */
    .subnav {
        width: 100%;
        max-height: 200px;
    }
    .subnavdelivery {
        max-height: 200px;
    }
    .subnavsafety {
        max-height: 320px;
    }
    .page_title {
        width: 100%;
        height: max-content;
    }
    .full_panel {
        width: 100%; 
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
    }
    .main_panel {
        width: 100%; 
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
    }
    .side_panel {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
    }
    .underline, .project_underline, .safety_underline, .support_underline, .innovation_underline {
        border-radius: 50px 0 0 50px;
        width: max-content;
        height: max-content;
        display: flex;
        align-self: center;
        margin-top: 1rem;
    }
    .underline {
        border-color:rgb(212, 216, 218);
    }
    .project_underline {
        border-color: rgb(255, 208, 0);
    }    
    .safety_underline {
        border-color: rgb(245, 159, 66);
    }
    .support_underline {
        border-color:rgb(140, 192, 75);
    }
    .innovation_underline {
        border-color: rgb(134, 190, 205);
    }
    /* -------- Project Card -------- */
    .projects_panel {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .projects_card {
        width: 70%;
        display: flex;
        margin: .5rem 0;
    }
    .projects_card a {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .projects_card a:hover {
        box-shadow: 0 5px 14px 0 var(--color-primary);
    }
    .projects_card_img {
        width: 100%;
    }
    .projects_card_img img {
        width: 100%;
        height: 100%;
    }
    .projects_card .card_text {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        padding: .5rem;
    }
    .projects_card .card_text h3 {
        align-self: center;
        justify-self: center;
        text-align: center;
    }
    .projects_card .card_text p {
        align-self: center;
        justify-self: center;
    }
    /* -------- Service Card -------- */
    .services_panel {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .services_card {
        width: 80%;
        height: auto;
        min-height: 195px;
        display: flex;
        flex-direction: column;
        margin: .5rem;
    }
    .services_card a {
        width: 100%;
        height: auto;
        min-height: 195px;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        border-radius: 5px;
    }
    .services_card a:hover {
        box-shadow: 0 5px 14px 0 var(--color-primary);
    }
    .services_card h3 {
        text-align: center;
    }
    /* ------------ Contact Page ------------ */
    .contact_text {
        width: 100%;
        height: auto;
        justify-content: center;
        display: flex;
    }
    .contact_text p {
        width: 80%;
        height: auto;
    }
    .contact_panel {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0 0 0 2rem;
    }
    .message {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 1rem;
        margin-bottom: 1rem;
    } /* ----- Form ----- */
    form {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: 0;
    }
    input, textarea {
        cursor: pointer;
        font-size: 16px;
        height: auto;
        outline: 0;
        padding: 15px;
        color: rgb(105, 108, 113);
        box-shadow: 2px 2px 3px rgba(0,0,0,0.06) inset;
        margin: 0 0 8px;
        }
    input[type="text"], input[type="email"], textarea {
        font-size: 16px;
        height: auto;
        outline: 0;
        padding: 15px;
        border: 1px solid rgb(15, 76, 119);
        border-radius: 5px;
    }
    label {
        font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
        font-size: 1.1em;
        color: rgb(15, 76, 119);
        padding: .25rem 0;
    }
    button[type="submit"]  {
        width: 40%;
        border-radius: 8px;
        color: rgb(255, 208, 0); 
        background-color: rgb(15, 76, 119);
        padding: .8rem;
        border: solid 1px rgb(15, 76, 119);
        font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
        font-weight: 600;
        font-size: 1.1em;
        cursor: pointer;
    }
    button:hover {
        color: rgb(15, 76, 119);
        background-color: rgb(212, 216, 218);
    }
    .error {
        color: rgb(220, 20, 60);
    }
    /* -------- Footer -------- */
    footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .footer_menu {
        width: 50%;
    }
    .contact {
        width: 50%;
    }
    .copyright {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: .5rem .5rem 0;
    }
    @media only screen and (min-width: 48em) { /* 768px */
        /* -------- Header -------- */
        header {
            display: flex;
            height: auto;
            flex-direction: row;
            justify-content: space-between;
        }
        .logo {
            width: 40%;
            justify-content: center;
            align-content: center;
            display: flex;
        }
        nav {
            width: 60%;
            justify-content: center;
            align-content: center;
            display: flex;
        }
        /* -------- Main -------- */
        .full_panel {
            width: 80%; 
        }
        .main_panel {
            width: 65%; 
            padding: 0 1rem 0 3rem;
        }
        .side_panel {
            width: 35%;
            display: flex;
            flex-direction: column;
            padding: 0 1rem;
        }
        /* -------- Project Card -------- */
        .projects_card a {
            width: 100%;
            display: flex;
            flex-direction: row;
        }
        .projects_card_img {
            width: 40%;
        }.projects_card .card_text {
            width: 60%;
        }
        /* -------- Services Card -------- */
        .services_panel {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
        .services_card {
            width: 30%;
        }
        /* ------------ Contact Page ------------ */
        .contact_panel {
            width: 45%;
        }
        .message {
            width: 55%;
        }
    }
    @media only screen and (min-width: 60em) { /* 960px */
        .subnav {
            width: 100%;
            max-height: 300px;
        }
        .subnavdelivery {
            max-height: 300px;
        }
    }
}