@font-face {
  font-family: "Pitch";
  src: url('fonts/Pitch-Regular.otf');
}
* {
    padding: 0px;
    margin: 0px;
        box-sizing: border-box;
    }
body {
    background-color: #728f61;
}
p {
    font-size: 14px;
    line-height: 16px;
}
a {
    color: black;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
header {
    width: 100%;
    background-color: #728f61;
    padding: 25px;
    color: black;
    font-family: 'Pitch', monospace;
    text-align: center;
    text-transform: uppercase;
}
header p {
    padding-top: 25px;
        font-size: 18px;
}
header img {
    width: 20%;
}

footer {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Pitch', monospace;
    color: black;
padding: 10px;
    text-align: center;
}

/* GRID
----------------------------------- */
.photos {
    width: 100%;
}
.photos img {
    width: 100%;
    vertical-align: bottom;
}
    .row,
    .group,
    .grouped {
        overflow: hidden;
    }
    .column,
    .columns {
    float: left;
    }

    .one     {width: calc(100% / 12 * 01); }
    .two     {width: calc(100% / 12 * 02); }
    .three   {width: calc(100% / 12 * 03); }
    .four    {width: calc(100% / 12 * 04); }
    .five    {width: calc(100% / 12 * 05); }
    .six     {width: calc(100% / 12 * 06); }
    .seven   {width: calc(100% / 12 * 07); }
    .eight   {width: calc(100% / 12 * 08); }
    .nine    {width: calc(100% / 12 * 09); }
    .ten     {width: calc(100% / 12 * 10); }
    .eleven  {width: calc(100% / 12 * 11); }
    .twelve  {width: calc(100% / 12 * 12); }

    /* column offset */
    .offset-by-one     {margin-left: calc(100% / 12 * 01); }
    .offset-by-two     {margin-left: calc(100% / 12 * 02); }
    .offset-by-three   {margin-left: calc(100% / 12 * 03); }
    .offset-by-four    {margin-left: calc(100% / 12 * 04); }
    .offset-by-five    {margin-left: calc(100% / 12 * 05); }
    .offset-by-six     {margin-left: calc(100% / 12 * 06); }
    .offset-by-seven   {margin-left: calc(100% / 12 * 07); }
    .offset-by-eight   {margin-left: calc(100% / 12 * 08); }
    .offset-by-nine    {margin-left: calc(100% / 12 * 09); }
    .offset-by-ten     {margin-left: calc(100% / 12 * 10); }
    .offset-by-eleven  {margin-left: calc(100% / 12 * 11); }
    .offset-by-twelve  {margin-left: calc(100% / 12 * 12); }


/* MOBILE
----------------------------------- */
@media only screen and (max-width: 715px) {

.header {
    padding-left: 25px;
    padding-top: 25px;
    padding-bottom: 50px;
    padding-right: 25px;
    flex-direction: column;
}
.brand {
    width: 95%;
}
.contact-info {
    width: 90%;
    padding-top: 10px;
}
.location {
    width: 90%;
    padding-top: 10px;
}
.big-footer {
    width: 100%;
    flex-direction: column;
}
.services {
    width: 90%;
    padding-top: 10px;
}
    .about {
        width: 90%;
}
    .clients {
        width: 90%;
        padding-top: 10px;
}
    .footer {
        flex-direction: column;
    }
    .column,
    .columns {
    float: left;
        width: 100%;
    }
    header img {
    width: 90%;
}
}