/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

*, ::after, ::before {
    box-sizing: border-box
}

html {
    font-family: system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    tab-size: 4
}

body {
    margin: 0
}

b, strong {
    font-weight: bolder
}

code, kbd, pre, samp {
    font-family: ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-color: currentcolor
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

/*
    Royal London Error Page Styles
*/

@font-face {
    font-family: Grot10Bold;
    src: url('../Fonts/Grot10_Bold.woff') format('woff');
}

:root {
    --purple-100: #470054;
    --purple-80: #6c3376;
    --purple-60: #916698;
    --purple-40: #b599bb;
    --purple-20: #daccdd;
    --teal-100: #00818a;
    --teal-80: #339aa1;
    --teal-60: #66b3b9;
    --teal-20: #cce6e8;
    --teal-dark: #00676e;
    --midnight: #222;
    --fog: #5e6675;
    --mist: #908b9c;
    --cloud: #d1d8dc;
    --ice: #f2f3f4;
    --white: #fff;
    --error-red: #c00;
}

/* Layout */

html, body {
    height: 100%;
    font-family: "PT Serif", sans-serif;
    color: var(--midnight);
}

.page-layout {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.page-layout__content {
    flex: 1;
}

.page-footer {
    padding: 3rem 0;
    background-color: var(--purple-100);
    color: var(--white);
    line-height: 1.5rem;
}

.container {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}

/* Header */

.site-header {
    border-bottom: 3px solid var(--ice);
}

.site-header__inner {
    padding-bottom: 26px;
}

@media (min-width: 620px) and (max-width: 991px) {
    .site-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .site-header__inner .nav {
        order: 2;
    }
}

/* Nav */

.nav {
    display: flex;
    list-style: none;
    margin-top: 2rem;
    padding: 0;
    font-family: Grot10Bold, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

    .nav li {
        display: block;
        border-right: 1px solid var(--ice);
    }

        .nav li:last-child {
            border-right: none;
        }

    .nav a {
        display: block;
        padding: 0 0.35rem;
        color: var(--fog);
        text-decoration: none;
    }

        .nav a:focus,
        .nav a:hover {
            color: var(--midnight);
        }

        .nav a:hover {
            text-decoration: underline;
        }

    .nav li:first-child a {
        padding-left: 0;
    }

@media (min-width: 768px) {
    .nav {
        font-size: 1rem;
    }
    .nav a {
        padding: 0 .5rem;
    }
}

@media (min-width: 992px) {
    .nav a {
        padding: 0 1rem;
    }
}

/* Logos */

.logo {
    display: inline-block;
}

.logo__mobile {
    display: block;
    width: 180px;
    height: auto;
}

.logo__desktop {
    display: none;
    width: 160px;
    height: auto;
}

@media (min-width: 768px) {
    .logo__mobile {
        width: 230px;
    }
}

@media (min-width: 992px) {
    .logo__mobile {
        display: none;
    }

    .logo__desktop {
        display: block;
    }
}

/* Main */

.main {
    padding-bottom: 5rem;
    font-size: 20px;
}

.main h1 {
    font-size: 42px;
    font-family: "Grot10Bold", sans-serif;
    color: var(--purple-80);
}

.main a {
    text-decoration: none;
    color: var(--teal-dark);
    border-bottom: 1px solid var(--purple-60);
}

.main a:hover {
    color: var(--purple-100);
    border-color: var(--purple-60)
}

.main a:focus {
    box-shadow: 0 0 3px var(--purple-60);
    outline: none;
}

@media (min-width: 992px) {
    .main h1 {
        font-size: 60px;
    }
}