/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

@charset "utf-8";
@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
:root {
--blue: #214261;
--grey_light: #e8ecef;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.15;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}

body {
max-width: 48em;
margin: 0 auto;
padding: 0 0 1em 0;
color: #505759;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: 100%;
line-height: 1.5;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}

h1 {
color: #fff;
margin: 0;
font-size: 150%;
font-weight: 500;
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
}
h1 small {
display: block;
margin-bottom: .5em;
color: #999;
font-size: 62%;
letter-spacing: .2em;
}
h2 {
margin: 3em auto;
color: var(--blue);
font-size: 100%;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}

a {
color: inherit;
background-color: transparent;
}
b, strong {
font-weight: 600;
}
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 1em auto;
}
figcaption {
font-size: 81.25%;
font-style: italic;
text-align: right;
}
hr {
margin: 4.5em auto;
width: 6em;
border: 0;
border-top: 2px solid var(--grey_light);
}

header {
position: relative;
padding: 4.5em 1em 1.5em;
background: var(--blue);
background-image: -webkit-gradient(linear, left top, right top, from(var(--blue)), to(#224));
background-image: -o-linear-gradient(left, var(--blue), #224);
background-image: linear-gradient(to right, var(--blue), #224);
}
main {
margin: 1.5em 0 3em;
padding: 0 1em;
}
main a {
position: relative;
text-decoration: none;
display: inline-block;
}
main a:after {
content: '';
position: absolute;
z-index: -1;
bottom: .1em;
left: 0;
right: 0;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
border-bottom: 2px solid var(--grey_light);
}
main a:hover:after {
border-color: var(--blue);
}
.a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
}
.a figure {
min-width: 12em;
max-width: 16em;
}
.a div {
-webkit-box-flex: 2;
    -ms-flex: 2 1 auto;
        flex: 2 1 auto;
padding-right: 1.5em;
}
.a ul {
list-style: none;
margin: 2.25em 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-ms-flex-pack: distribute;
    justify-content: space-around;
}
.a li {
position: relative;
margin: .5em;
}
.a li:before {
content: '';
position: absolute;
z-index: -1;
top: -.25em;
bottom: -.25em;
left: -.5em;
right: -.5em;
background: #e8ecef;
border-radius: 3px;
-webkit-transform: skewX(-15deg) rotate(-2deg);
    -ms-transform: skewX(-15deg) rotate(-2deg);
        transform: skewX(-15deg) rotate(-2deg);
opacity: .8;
}

.b ul {
padding-left: 0;
list-style: none;
-webkit-columns: 2 18em;
   -moz-columns: 2 18em;
        columns: 2 18em;
-webkit-column-gap: 2.25em;
   -moz-column-gap: 2.25em;
        column-gap: 2.25em;
}
.b li {
padding-left: 1em;
-webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
        break-inside: avoid;
}
.b li:before {
content: '';
position: relative;
display: inline-block;
width: .5em;
height: .5em;
left: -1em;
top: -1px;
margin-right: -.5em;
background: var(--blue);
}

footer {
margin: 6em 1em 0 1em;
padding: 1em 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
border-top: 1px solid var(--grey_light);
}
footer p {
margin: 0;
font-size: 87.5%;
font-style: italic;
}
footer a {
display: inline-block;
text-decoration: none;
}
footer a + a {
margin-left: 1em;
}


.s {
max-height: 0;
max-width: 45em;
overflow: hidden;
margin: 0 calc(1em * 16/13);
font-size: 81.25%;
color: #999;
}
.s:target {
max-height: 400em;
}
.s > *:first-child {
margin-top: 3rem;
}

@media screen and (min-width: 36em) {

.a {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
}

}

@media screen and (min-width: 48em) {

html {
overflow-x: hidden;
}

header {
padding-top: 5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: 2em;
}
header:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blue)), color-stop(50%, #224));
background-image: -o-linear-gradient(left, var(--blue) 50%, #224 50%);
background-image: linear-gradient(to right, var(--blue) 50%, #224 50%);
}
main {
padding: 0 1.5em;
}
footer {
margin-left: 1.5em;
margin-right: 1.5em;
}

}