* { margin: 0; padding: 0; }

    body
    {
        color: #4e6b7a;
        font-family: 'Work Sans', sans-serif;
        font-weight: lighter;
    }

    h2.center { padding: 1.5em 0; text-align: center; }

    div.inner { margin: 0 auto; max-width: 1000px; }

/* Form */

    form { margin-top: 2em; text-align: center; }
    form * { margin: 0; }
    form fieldset { border: 0; margin-bottom: 0px; margin-top: 20px; padding: 20px; text-align: center; }
    form fieldset dl { display: inline-block; margin-bottom: 5px; width: 51%; }
    form fieldset dl dt { margin-bottom: 5px; padding-right: 2%; text-align: center; vertical-align: top; width: 100%; }
    form fieldset dl dd { margin-bottom: 10px; text-align: left; width: 100%; }
    form fieldset dl dd input { text-align: center; }
    form fieldset dl dd input, fieldset dl dd select, fieldset dl dd textarea { padding: 0.5em 0; width: 100%; }
    form > input { display: inline-block;  }


/* Navigation */

    #nav { text-align: center; width: 100%; }
    #nav ul { display: inline-block; list-style: none; text-transform: lowercase; }
    #nav ul li { display: inline-block; margin: 2em 1em; }
    #nav ul li a { color: #4e6b7a; text-decoration: none; }
    #nav ul li a:hover { color: #c9af98; }

    @media screen and (max-width: 600px)
    {
        #nav ul li { display: inline-block; margin: 1em; }
    }

/* Banner / logo */

    #banner
    {
        color: #4e6b7a;
        margin: 4em 0 0 0;
        text-align: center;
        width: 100%;
    }

/* Slideshow */

    #slideshow { margin-top: 2em; }
    #slideshow img { display: block; width: 100%;}
    #slideshow ul { list-style: none; }

/* Text */

    #text
    {
        color: #4e6b7a;
        margin: 2em auto 0 auto;
        max-width: 1200px;
        text-align: center;
        width: 90%;
    }

    #text.lefty { text-align: left; }

/* Portlets */

    #portlets
    {
        color: #4e6b7a;
        font-size: 0.9em;
        line-height: 145%;
        padding: 2em 0 0 0;
        width: 100%;
    }

    #portlets div.frame
    {
        align-items: flex-start;
        display: flex;
        justify-content: center;

    }

    #portlets div.frame div.box
    {
        margin: 1em;
        max-width: 300px;
        text-align: center;
        width: 25%;
    }

    #portlets div.frame div.box img
    {
      margin-bottom: 1em; width: 100%;
    }

    #portlets div.frame div.box p
    {
      margin-bottom: 1em;
    }

    div.box a { color: #c9af98; }

/* About */

    #about
    {
        display: flex;
        margin: 2em auto 0 auto;
        max-width: 1200px;
        width: 90%;
    }

    #about_text
    {
        color: #4e6b7a;
        line-height: 145%;
        padding: 2em 3em 2em 0;
        width: 50%;
    }

    #about_text a
    {
        color: #c9af98;
    }

    #about_text h3
    {
        font-size: 2em;
        margin-bottom: 1em;
    }

    #about_image
    {
        width: 50%;
    }

    #about_image img
    {
        display: block;
        width: 100%;
    }

/* Title */

    div.title
    {
        margin: 4em auto 0 auto;
        text-align: center;
        width: 90%;
    }

    div.title h3
    {
        font-size: 2.7em;
        font-weight: lighter;
        margin-bottom: 0.5em;
    }

/* Portfolio */

    #portfolio { margin-bottom: 1em; width: 100%; }


    * { box-sizing: border-box; }

    .grid
    {
        margin: 0 auto;
        max-width: 1200px;
    }

    .grid:after
    {
        content: '';
        display: block;
        clear: both;
    }

    .grid-item
    {
        float: left;
        width: 200px;
        height: 200px;
        background: white;
        border: 5px solid white;
        overflow: hidden;
    }

    .grid-item--width2 { width: 400px; }
    .grid-item--height2 { height: 400px; }

    .grid-item img { border: 1px solid #ccc; width: 99% !important; }
    .grid-item--width2 img {  }
    .grid-item--height2 img { height: 99%; width: auto; }

/* View page (portfolio image) */

    #view { margin-top: 2em; text-align: center; width: 100%; }
    #view img { border: 1px solid #ccc; display: inline-block; max-width: 90%; width: auto; }

    .pager { color: #4e6b7a; text-decoration: none; }
    .pager:hover { color: black; text-decoration: underline; }


/* Footer */

    #footer
    {
        color: #4e6b7a;
        font-size: 0.9em;
        line-height: 145%;
        margin: 4em 0 0 0;
        text-align: center;
        width: 100%;
    }

    #footer p
    {
        margin-bottom: 1em;
    }

    #footer img { margin: 1em 0.5em; }

/* Dropdown */

    #droppy { background: #4e6b7a; padding: 1em; position: fixed; text-align: center; bottom: 0px; left: 0px; width: 100%; }

/* Mobilise */

    @media screen and (max-width: 600px)
    {
        #about, #about_text, #about_image { display: block; width: 90% !important; }
        #about { margin-right: 0; }
        #about_image img { width: 100% !important; }
        #portlets div.frame { display: block; width: 100%; }
        #portlets div.frame div.box { width: 90% !important; max-width: 90% !important; }
    }