@font-face {
    font-family: harabara;
    src: url(harabara.off);
  }
body {
    color: #666;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
    font-size: 1.2em;
}
h2 {
    font-size: 1em;
}
a:link, a:visited {
    text-decoration: none;
    color: #7b7692;
}
a:active, a:hover{
    color: #514b7d;
}
.logo {
    font-family: 'harabara', Arial, Helvetica, sans-serif;
    font-size: 4em;
    color: #BBB;
}
.container {
    width: 720px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: top center;
    justify-content: center;
    row-gap: 7px;
    column-gap: 15px;
}
.header {
    width: 800px;
    padding: 40px 0;
}
.header img {
    width: 680px;
    display: block;
    margin: 0 auto;
}
.full-width {
    width: 800px;
    background: #EEE;
    border-radius: 0 15px 0 15px;
    padding: 10px 20px;
    box-shadow: 5px 5px 5px #AAA;
}
.menu-item {
    background: #EEE;
    border-radius: 0 15px 0 15px;
    width: 200px;
    padding: 20px;
    margin: 15px auto;
    box-shadow: 5px 5px 5px #AAA;
}
.high-vis {
    background: #8286c1;
    color: #FFF;
}
.high-vis a:link, .high-vis a:visited {
    text-decoration: none;
    color: #d7d2ec;
}
.high-vis a:active, .high-vis a:hover{
    color: #f4f4f4;
}
.content {
    background: #EEE;
    border-radius: 0 15px 0 15px;
    padding: 20px;
    margin: 15px auto;
    width: 420px;
    text-align: left;
    box-shadow: 5px 5px 5px #AAA;
}

@media (max-width:60em)  {
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    .header {
        width: 100%;
    }
    .header img {
        width: 100%;
    }
    .container {
        width: 95%;
    }
    .full-width {
        width: 100%;
    }
    .menu-item {
        width: 100%;
    }
    .content {
        width:100%;
    }
    .last-links {
        text-align: left !important;
    }
    .last-links li a:active, .last-links li a:hover, .last-links li a:visited {
        text-align: left !important;
    }
}