html {
    color: #FFF;
    font-size: 15px;
    line-height: 1.6;
    background-color: #0067A6;
    font-family: 'Montserrat', sans-serif;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
    overflow:visible;
}

h1,h2,h3{
    text-align:center;
    font-family: 'Oswald', sans-serif;
}

h1{font-size: 1.65em;color:#b39455;}
h2{font-size: 1.5em;}
h3{font-size: 1.45em; margin:8px 0;}


img#logo{margin:0 auto; display:block;
    max-height:70px;
    padding:15px 0;
}

a{color:#0067A6; text-decoration: none;}

/*
* Theming colours*/

header {background: white;}

section#about {background: #0067A6;}

section#tagline{background:white; color: #0067A6; padding:10px 0}

section#core-values {
    font-family: 'Oswald', sans-serif;
    color:white;
    background: #00263D;
}

section#core-values > div{
    display:flex;
    justify-content: space-around;
    font-size: 1.25em;
    padding:3px 0;
    flex-wrap:wrap;
}

footer {
    padding: 0 0 10px;
    background: white;
    color:#0067A6}

footer h3{text-align:left;}

/*layout helpers*/
.grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
}

/*tablets*/
@media only screen and (min-width: 768px) {
    img#logo{max-height:125px}

    h1{font-size: 1.8em;}

    section#tagline{padding:20px 0}

    section#core-values{text-align:center;}
    section#core-values > div{
        font-size: 1.5em;
        padding:30px 0;
    }
}

/*bigger screens*/
@media only screen and (min-width: 1140px) {
    html {
        font-size: 1.05em;
        line-height: 1.5;
    }

    .wrapper {
        width: 950px;
        margin: 0 auto;
    }

    h2{font-size: 1.65em;}

    a:hover{color:#b39455}

    img#logo{padding:20px 0;}

    header .inner {
        background-image: url("../img/bg-image.jpeg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center bottom;
        background-size: cover;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content: flex-end;
        padding-top:20px;
        padding-bottom:30px;
    }

    main{padding-bottom: 40px;}

    main article p{margin-bottom: 10px;}

    section#about{padding:20px 0; background-color: transparent}
    section#about .wrapper{background-color: rgba(0,103,166, 0.85);padding:5px 15px}

    section#tagline{margin-bottom: 40px;}

    section#core-values .inner{width:950px; margin: 0 auto;}

    footer {padding: 0 0 20px; margin-top:30px;}
    footer .wrapper{padding-top:15px;}
}