/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
.row .row { margin:  0 -1.5em; }
.col      { padding: 0  1.5em; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

@media only screen { .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
}}
/* layout */
body { padding: 0; margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #424242 }
nav { position: absolute; left: 0; right:0; top:0; }
nav>* { margin-top: 1em; padding-left: .5em; padding-right: .5em }
body>*>* {max-width: 1024px }
nav a { fill: #9DC2AF; display: inline }
a:hover { fill: lightgray}
nav svg { padding-left: 0.5em }
.middle { display: table; width: 100% }
.middle>* { display: table-cell; vertical-align: middle }
.top>* { display: table-cell; vertical-align: top }
.inline, .inline-all>* { display: inline-block }
ul.inline, ul.inline-all, ul.inline-all>* { list-style: none; padding-left: 0 }
.center, .center>* { text-align: center; margin-left: auto; margin-right: auto }
.float-left { float: left }
.float-right { float: right }

/* grid columns */
.width20, .width30, .width33, .width50, .width80, .width100 { box-sizing: border-box}
.width20>* {width: 20%; }
.width30>* {width: 30%; }
.width33>* {width: 33%; }
.width50>* {width: 50%; }
.width80>* {width: 100%; }
.width100>* {width: 100%; }

/* elements and colours */
.banner {
    color: white;
    font-size: 64pt;
    background-image: url('../images/c12ee0f379643a278198b2086afd3b9c-cropped.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 656px
}
article h1 { font-weight: normal; font-size: 24pt }
.pad { padding: auto 1em }
.pad>* { padding: 3em }
.cushion-vert>* { margin-top: 1em; margin-bottom: 1em }
.flow>* { display: inline-block }
.text-left, .text-left h1, .text-left section { text-align: left }
.text-right { text-align: right }
.bg-primary { background-color: #2F343B }
.color-primary { color: #2F343B; fill:#2F343B }
.color-main { color: #729FCF; fill:#729FCF }
.bg-main { background-color: #729FCF }
.color-secondary { color: #397186; fill:#397186 }
.bg-secondary { background-color: #397186 }
.color-highlight { color: #9DC2AF; fill:#9DC2AF }
.bg-highlight { background-color: #9DC2AF }
.color-contrast { color: #397186; fill:#397186 }
.bg-contrast { background-color: #397186 }
.color-white { color: white }
.color-grey { color: grey }
.bg-footer { background-color: #5F9AA0 }
.word-breaks { word-spacing: 100em }

.sticky { display: table; height:100%;  }
.sticky>* { display: table-row; }
.sticky>*:first-child, .sticky>*:last-child { height: 1px; }

.icon-medium svg, svg.icon-medium { width: 2em; height: 2em; }
.icon-large svg, svg.icon-large { width: 3em; height: 3em; }
.icon-xlarge svg, svg.icon-xlarge { width: 6em; height: 6em; }
.icon-xxlarge svg, svg.icon-xxlarge { width: 5em; height: 5em; }
.icon-xsmall svg, svg.icon-xsmall { width: .9em; height: .9em; }
.icon-small svg, svg.icon-small { width: 1.2em; height: 1.2em; }
.text-small { font-size: 10pt; }
a { text-decoration: none; color: #729FCF; fill: #729FCF; border: none }
img { border: none}
[role="main"]>footer { border-top: 1px solid grey }
[role="main"]>footer>* { vertical-align: top; padding: 1em }

@media screen and (min-width: 850px) {
    .pad>:first-child { padding-left: 0}
    .pad>:last-child { padding-right: 0 }
    .width20-lg, .width25-lg, .width30-lg, .width33-lg, .width40-lg, .width50-lg, .width80-lg, .width100-lg { box-sizing: border-box}
    .width20-lg>* {width: 20%; }
    .width25-lg>* {width: 25%; }
    .width30-lg>* {width: 30%; }
    .width33-lg>* {width: 33%; }
    .width40-lg>* {width: 40%; }
    .width50-lg>* {width: 50%; }
    .width80-lg>* {width: 80%; }
    .width100-lg>* {width: 100% }
    nav svg { padding-left: 1.5em }
    .inline-all-lg>* { display: inline-block }
}