/* Variables (Color-Theme) */
:root {
    --primary-color: #1D2228;
    --secondary-color: #FB8122;
    --tertiary-color: #E1E2E2;
}

/* HTML and Body */
html {
    min-height: 100%;
}

body {
    width: 100%;
    background: var(--primary-color);
    margin: 0;
    border: 0;
    padding: 0;
}


/***** FONTS *****/
@font-face {
    font-family: "RageItalic";
    src: url(../fonts/RAGE.woff) format("woff"),
         url(../fonts/RAGE.ttf) format("truetype");
}


/***** Atomic Elements *****/
a, a:visited, a:link, a:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5, p {
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 3.272em;
    color: white;
    font-weight: normal;
}

h2 {
    font-size: 2.618em;
}

h3 {
    font-size: 2.023em;
}

h4 {
    font-size: 1.618em;
}

h5 {
    font-size: 1.25em;
}

p {
    font-size: 1em;
}

/* Container */
div#container {
    background: var(--primary-color);
    width: 98%;
    margin: 0 auto;
    border: 0;
    padding: 0;
}


/***** HEADER *****/
header {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: url("../img/laptop.jpg") no-repeat;
    background-color: var(--primary-color);
    background-blend-mode: multiply;
    background-size: center center cover;

    display: grid;
    grid-template-rows: 2fr 3fr;
    justify-items: center;
    align-items: center;
}

header div#title {
    text-align: center;
    margin-bottom: 3em;
}

header div#title h2 {
    color: var(--tertiary-color);
    margin: 0;
    border: 0;
    padding: 0 0.8em;
}


/***** NAV *****/
nav {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--primary-color);
    color: var(--secondary-color);
    background: var(--primary-color);
    opacity: 0.75;
}

nav a {
    color: var(--secondary-color);
}

nav ul {
    height: 100%;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
}

nav ul li#logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

svg#JC {
    width: 57%;
    fill: var(--secondary-color);
}

svg#JC .st0 {
    font-family: 'RageItalic';
}

svg#JC .st1 {
    font-size: 172px;
}

svg#JC .st2 {
    letter-spacing: -12px;
}


/***** MAIN *****/
main {
    width: 100%;
    margin: 0 auto;
    background: var(--primary-color);
}

section {
    width: 95%;
    margin: 0 auto;
    text-align: center;
    background: var(--primary-color);
    border: 0;
    padding: 0;
}


/* Services */
section#services {
    background: var(--tertiary-color);
}

section#services h2 {
    color: var(--secondary-color);
    margin: 1em 0 0.5em 0;
    padding: 0.8em 0;
}

section#services h5 {
    margin: 1.0em 0;
    padding: 1.0em auto;
}

section#services p {
    width: 75%;
    margin: 0 auto;
    padding: 1.2em 0;
    line-height: 1.5em;
}

section#services div#services-sections {
    color: black;
    background: var(--tertiary-color);
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}

section#services div#services-sections section {
    background: var(--tertiary-color);
    color: var(--primary-color);
}

section#services div#services-sections .divider {
    width: 40%;
    height: auto;
    margin: 1em 0;
}

section#services div#services-sections .cls-1 {
    fill: #1d2228;
}

section#services svg.icon {
    transform: scale(2.0);
    margin: 1.0em 0;
    padding: 0.6em;
}

section#services svg.spacing {
    margin-bottom: 2.0em;
}

section#services svg.end {
    padding-bottom: 1.0em;
}


/* Gallery */
section#gallery {
    padding: 2em 0;
    border: 0;
}

section#gallery h2 {
    color: var(--secondary-color);
    padding-bottom: 1.4em;
}

section#gallery h4 {
    color: white;
}

section#gallery h4 a,
section#gallery h4 a:link,
section#gallery h4 a:hover,
section#gallery h4 a:visited {
    color: white;
}

section#gallery h4 a:hover {
    color: var(--secondary-color);
}

section#gallery div.gallery-width {
    width: 96%;
    margin: 0 auto;

    display: grid;
    grid-template-rows: repeat(8, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5em;
}

section#gallery div.gallery-width a img {
    width: 100%;
    height: auto;
}

section#gallery a#img1 {
    grid-row: 1 / span 3;
    grid-column: 1;

    background: url('../img/insightss.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img2 {
    grid-row: 1 / span 2;
    grid-column: 2;

    background: url('../img/nwcs.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img3 {
    grid-row: 1 / span 3;
    grid-column: 3;

    background: url('../img/docjas.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img4 {
    grid-row: 4 / span 3;
    grid-column: 1;

    background: url('../img/first-night-spokane.png') no-repeat;
    background-size: cover;
}

section#gallery a#img5 {
    grid-row: 3 / span 3;
    grid-column: 2;

    background: url('../img/rw-hotshot.png') no-repeat;
    background-size: cover;
}

section#gallery a#img6 {
    grid-row: 4 / span 3;
    grid-column: 3;

    background: url('../img/argplanning.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img7 {
    grid-row: 7 / span 2;
    grid-column: 1;

    background: url('../img/ux1-project.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img8 {
    grid-row: 6 / span 3;
    grid-column: 2;

    background: url('../img/phoenix-reconstruction.jpg') no-repeat;
    background-size: cover;
}

section#gallery a#img9 {
    grid-row: 7 / span 2;
    grid-column: 3;

    background: url('../img/ugandajones.jpg') no-repeat;
    background-size: cover;
}


/* Testimonials */
section#testimonials {
    padding: 0;
    border: 0;
}

section#testimonials h2 {
    color: var(--secondary-color);
    margin-bottom: 1em; 
}

section#testimonials h4 {
    color: var(--tertiary-color);
    padding: 2em 0 0 0;
    margin: 0;
    border: 0;
}

div#testimonial_boxes {
    width: 100%;
    margin: 0 auto;
    color: var(--primary-color);

    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(16, 1fr);
    grid-gap: 0;
    justify-items: center;
    align-items: center;
}

div#testimonial_boxes #box-left {
    z-index: 1;
    width: 100%;
    height: 100%;
    grid-row: 2 / span 3;
    grid-column: 1 / span 6;
    background: white;
    border-radius: 10px;
}

div#testimonial_boxes #box-left section#partial-box-left {
    grid-column: 1 / span 6;
    background: white;
    margin: 0.25em 0.25em 0 0.25em;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 2fr;
}

div#testimonial_boxes #box-left section#partial-box-left h1 {
    grid-row: 1;
    grid-column: 1 / span 6;
}

div#testimonial_boxes #box-left section#partial-box-left p {
    grid-row: 2;
    grid-column: 1 / span 5;
    text-align: right;
    padding: 0 1.0em;
}

div#testimonial_boxes img#image-left {
    z-index: 2;
    grid-row: 4 / span 2;
    grid-column: 3 / span 2;
    width: 100px;
    border-radius: 50%;
}

div#testimonial_boxes div#box-end-left {
    grid-row: 5;
    grid-column: 2 / span 4;
    
    justify-self: center;
    align-self: end;
}

div#testimonial_boxes div#box-end-left p {
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--tertiary-color);
}

div#testimonial_boxes #box-mid {
    z-index: 5;
    width: 100%;
    height: 100%;
    grid-row: 1 / span 3;
    grid-column: 6 / span 6;
    background: var(--secondary-color);
    border-radius: 10px;
    align-self: center;
}

div#testimonial_boxes #box-mid section#partial-box-mid {
    grid-column: 1 / span 6;
    background: var(--secondary-color);
    margin: 0.25em 0.25em 0 0.25em;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 2fr;
}

div#testimonial_boxes #box-mid section#partial-box-mid h1 {
    grid-row: 1;
    grid-column: 1 / span 6;
}

div#testimonial_boxes #box-mid section#partial-box-mid p {
    grid-row: 2;
    grid-column: 1 / span 6;
    text-align: center;
    padding: 0 1.0em;
}

div#testimonial_boxes img#image-mid {
    z-index: 6;
    grid-row: 3 / span 2;
    grid-column: 8 / span 2;
    width: 100px;
    border-radius: 50%;
}

div#testimonial_boxes div#box-end-mid {
    grid-row: 4;
    grid-column: 7 / span 4;
    color: var(--tertiary-color);
    margin: 0.25em 0.25em 0 0.25em;

    justify-self: center;
    align-self: end;

}

div#testimonial_boxes div#box-end-mid p {
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--tertiary-color);
}

div#testimonial_boxes #box-right {
    z-index: 3;
    width: 100%;
    height: 100%;

    grid-row: 2 / span 3;
    grid-column: 11 / span 6;
    background: white;
    border-radius: 10px;
}

div#testimonial_boxes #box-right section#partial-box-right {
    grid-column: 11 / span 6;
    background: white;
    margin: 0.25em 0.25em 0 0.25em;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 2fr;
}

div#testimonial_boxes #box-right section#partial-box-right h1 {
    grid-row: 1;
    grid-column: 1 / span 6;
}

div#testimonial_boxes #box-right section#partial-box-right p {
    grid-row: 2;
    grid-column: 2 / span 5;
    text-align: left;
    padding: 0 1.0em;
}

div#testimonial_boxes img#image-right {
    z-index: 4;
    grid-row: 4 / span 2;
    grid-column: 13 / span 2;
    width: 100px;
    border-radius: 50%;
}

div#testimonial_boxes div#box-end-right {
    grid-row: 5;
    grid-column: 12 / span 4;
    justify-self: center;
    align-self: end;
}

div#testimonial_boxes div#box-end-right p {
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--tertiary-color);
}

section#partial-box-left h1,
section#partial-box-mid h1,
section#partial-box-right h1 {
    height: 50px;
    font-family: 'Coustard', serif;
    font-size: 100px;
    color: var(--primary-color);
    margin: 0;
    border: 0;
    padding: 0.4em 0 0.2em 0;
    position: relative;
}

div#testimonial_boxes p.full-name {
    font-size: 1.2em;
}

div#testimonial_boxes p.career {
    text-transform: lowercase;
}


/* Contact */
section#contact {
    border: 0;
    padding: 3em 0 0 0;
}

section#contact .tertiary {
    color: white;
}

section#contact h2 {
    margin-top: 1em;
}

section#contact h2, section#contact h5 {
    color: var(--secondary-color);
}

section#contact h4 {
    margin-bottom: 3em;
}

section#contact h4, section#contact p {
    color: var(--tertiary-color);
}

section#contact svg {
    fill: #FFFFFF;
    transform: scale(3.0);
}

section#contact div#contact-me {
    width: 85%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-rows: 2fr 1fr 2fr;
    grid-template-columns: 3fr 1fr 3fr 1fr 3fr;
    justify-items: center;
    align-items: center;
}

section#contact .col1 {
    grid-column: 1;
}

section#contact .col2 {
    grid-row: span 3;
    grid-column: 2;
}

section#contact .col3 {
    grid-column: 3;
}

section#contact .col4 {
    grid-row: span 3;
    grid-column: 4;
}

section#contact .col5 {
    grid-column: 5;
}

section#contact .row1 {
    grid-row: 1;
}

section#contact .row2 {
    grid-row: 2;
}

section#contact .row3 {
    grid-row: 3;
}

section#contact div#contact-me h5 {
    margin: 0;
    border: 0;
    padding: 0;
}

section#contact div#contact-me a,
section#contact div#contact-me a:link,
section#contact div#contact-me a:visited,
section#contact div#contact-me a:hover  {
    color: white;
    text-decoration: none;

}

section#contact div#contact-me address {
    color: var(--tertiary-color);
    text-decoration: none;
    margin-bottom: 1em;
}

section#contact form {
    width: 60%;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 1fr 1fr 3fr 1fr;
    grid-row-gap: 1em;
    align-items: center;
}

section#contact form input {
    border-radius: 5px;
    background: white;
    text-align: left;
    height: 1.4em;
    margin: 0;
    border: 0;
    padding: 1em;
}

section#contact form textarea {
    padding: 1em;
    border-radius: 5px;
}

section#contact input[type="submit"] {
    margin: 0 auto;
    border: 0;
    border-radius: 20px;
    padding: 1.4em 1.4em 2.4em 1.4em;  
    background: var(--secondary-color);
    color: white;
    text-align: center;
}


/***** FOOTER *****/
footer {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: var(--primary-color);
    text-align: center;
}

footer h3 {
    color: var(--secondary-color);
    margin-top: 2em;
}

footer img {
    width: 3.0em;
}

footer ul {
    width: 30%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
}

footer p {
    text-align: center;
    color: var(--tertiary-color);
    padding: 1.0em 0;
    font-size: 0.8em;
}


/***** MEDIA *****/
@media (max-width: 720px) and (min-width: 270px) {

/* Container */
    #container {
        grid-template-rows: 3fr 16fr 1fr;
    }


/* Header */
    header {
        width: 100%;
        margin: 0 auto;
    }

    header div#title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

/* Nav */
    nav {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    nav ul {
        display: block;
        margin: 0;
        padding: 0;
    }

/* Services */
    section#services div#services-sections {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
    }

/* Gallery */
    section#gallery div.gallery-width {
        display: grid;
        grid-template-rows: repeat(9, 1fr);
        grid-template-columns: 1fr;
        grid-gap: 0.5em;
    }
    
    section#gallery div.gallery-width a img {
        width: 100%;
        height: auto;
    }

    section#gallery a#img1 {
        grid-row: 1;
        grid-column: 1;
    
        background: url('../img/insightss.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img2 {
        grid-row: 2;
        grid-column: 1;
    
        background: url('../img/nwcs.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img3 {
        grid-row: 3;
        grid-column: 1;
    
        background: url('../img/docjas.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img4 {
        grid-row: 4;
        grid-column: 1;
    
        background: url('../img/first-night-spokane.png') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img5 {
        grid-row: 5;
        grid-column: 1;
    
        background: url('../img/rw-hotshot.png') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img6 {
        grid-row: 6;
        grid-column: 1;
    
        background: url('../img/argplanning.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img7 {
        grid-row: 7;
        grid-column: 1;
    
        background: url('../img/ux1-project.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img8 {
        grid-row: 8;
        grid-column: 1;
    
        background: url('../img/phoenix-reconstruction.jpg') no-repeat;
        background-size: cover;
    }
    
    section#gallery a#img9 {
        grid-row: 9;
        grid-column: 1;
    
        background: url('../img/ugandajones.jpg') no-repeat;
        background-size: cover;
    }

    section#gallery div.gallery-width img:hover {
        background-color: rgba(0, 0, 0, 1.0);
    }

    
/* Testimonials */
    div#testimonial_boxes {
        width: 100%;
        margin: 0 auto;
        color: var(--primary-color);

        display: grid;
        grid-template-rows: repeat(14, 1fr);
        grid-template-columns: 1fr;
        grid-gap: 0;
        justify-items: center;
        align-items: center;
    }

    div#testimonial_boxes #box-left {
        width: 100%;
        height: 100%;
        grid-row: 1 / span 3;
        grid-column: 1;
        background: white;
        border-radius: 10px;
    }

    div#testimonial_boxes #box-left section#partial-box-left {
        background: white;
        margin: 0.25em 0.25em 0 0.25em;

        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr;
    }

    div#testimonial_boxes #box-left section#partial-box-left h1 {
        grid-row: 1;
        grid-column: 1;
    }

    div#testimonial_boxes #box-left section#partial-box-left p {
        grid-row: 2;
        grid-column: 1;
        text-align: center;
        padding: 0 1.0em;
    }

    div#testimonial_boxes img#image-left {
        grid-row: 3 / span 2;
        grid-column: 1;
        width: 100px;
        border-radius: 50%;
    }

    div#testimonial_boxes div#box-end-left {
        grid-row: 4;
        grid-column: 1;
        justify-self: center;
        align-self: end;
    }

    div#testimonial_boxes div#box-end-left p {
        margin: 0;
        border: 0;
        padding: 0;
        color: var(--tertiary-color);
    }

    div#testimonial_boxes #box-mid {
        width: 100%;
        height: 100%;
        grid-row: 6 / span 3;
        grid-column: 1;
        background: var(--secondary-color);
        border-radius: 10px;
        align-self: center;
    }

    div#testimonial_boxes #box-mid section#partial-box-mid {
        background: var(--secondary-color);
        margin: 0.25em 0.25em 0 0.25em;

        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr;
    }

    div#testimonial_boxes #box-mid section#partial-box-mid h1 {
        grid-row: 1;
        grid-column: 1;
    }

    div#testimonial_boxes #box-mid section#partial-box-mid p {
        grid-row: 2;
        grid-column: 1;
        text-align: center;
        padding: 0 1.0em;
    }

    div#testimonial_boxes img#image-mid {
        grid-row: 8 / span 2;
        grid-column: 1;
        width: 100px;
        border-radius: 50%;
    }

    div#testimonial_boxes div#box-end-mid {
        grid-row: 9;
        grid-column: 1;
        color: var(--tertiary-color);
        margin: 0.25em 0.25em 0 0.25em;

        justify-self: center;
        align-self: end;
    }

    div#testimonial_boxes div#box-end-mid p {
        margin: 0;
        border: 0;
        padding: 0;
        color: var(--tertiary-color);
    }

    div#testimonial_boxes #box-right {
        width: 100%;
        height: 100%;

        grid-row: 11 / span 3;
        grid-column: 1;
        background: white;
        border-radius: 10px;
    }

    div#testimonial_boxes #box-right section#partial-box-right {
        background: white;
        margin: 0.25em 0.25em 0 0.25em;

        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr;
    }

    div#testimonial_boxes #box-right section#partial-box-right h1 {
        grid-row: 1;
        grid-column: 1;
    }

    div#testimonial_boxes #box-right section#partial-box-right p {
        grid-row: 2;
        grid-column: 1;
        text-align: center;
        padding: 0 1.0em;
    }

    div#testimonial_boxes img#image-right {
        grid-row: 13 / span 2;
        grid-column: 1;
        width: 100px;
        border-radius: 50%;
    }

    div#testimonial_boxes div#box-end-right {
        grid-row: 14;
        grid-column: 1;
        
        justify-self: center;
        align-self: end;
    }

    div#testimonial_boxes div#box-end-right p {
        margin: 0;
        border: 0;
        padding: 0;
        color: var(--tertiary-color);
    }


/* Contact */
    section#contact div#contact-me {
        width: 85%;
        margin: 0 auto;
        padding: 0;
        border: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    section#contact form {
        width: 94%;
        height: 500px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 1fr 1fr 3fr 1fr;
        grid-row-gap: 1em;
        align-items: center;
    }

    section#contact div#contact-me svg {
        margin: 0.4em 0 1em 0;
        border: 0;
        padding: 0;
    }

    section#contact div#contact-me h5 {
        margin: 1em 0 0.5em 0;
        border: 0;
        padding: 0;
    }

    section#contact div#contact-me p,
    section#contact div#contact-me address {
        margin: 0 0 2em 0;
        border: 0;
        padding: 0;
    }

}


/***** 404 *****/
div#container-404 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: url("../img/laptop.jpg") no-repeat;
    background-color: var(--primary-color);
    background-blend-mode: multiply;
    background-size: center center cover;

    display: flex;
    justify-content: center;
    align-items: center;
}

div#container-404 a,
div#container-404 a:link,
div#container-404 a:visited,
div#container-404 a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

div#container-404 section#section-404 {
    background: white;
    text-align: center;
    padding: 1.0em;
}

div#container-404 section#section-404 h1 {
    font-size: 6em;
    color: var(--secondary-color);
    text-shadow: 2px 2px 2px var(--primary-color);
    margin-top: 1em;
}

div#container-404 section#section-404 p{
    color: black;
    font-size: 1.2em;
    line-height: 1.5;
}

div#container-404 section#section-404 p#end-404 {
    margin-bottom: 2em;
}