/*!
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,400&display=swap");

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

    /**
 * Remove the inner border and padding in Firefox.
 */
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
 * Restore the focus styles unset by the previous rule.
 */
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.contain {
    margin: 0 auto;
    width: 100%;
    padding: 0 1em;
}

@media (min-width: 1025px) {
    .contain {
        padding: 0 1.5em;
    }
}

@media (min-width: 79.1rem) {
    .contain {
        max-width: 84.25em;
    }
}

.contain.small {
    max-width: 59.375em;
}

@font-face {
    font-family: 'seib';
    src: url("../fonts/seib-v1.eot?heo3oy");
    src: url("../fonts/seib-v1.eot?heo3oy#iefix") format("embedded-opentype"), url("../fonts/seib-v1.woff2?heo3oy") format("woff2"), url("../fonts/seib-v1.ttf?heo3oy") format("truetype"), url("../fonts/seib-v1.woff?heo3oy") format("woff"), url("../fonts/seib-v1.svg?heo3oy#seib-v1") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], a.external:after, .btn.fwd:after, .btn.back:before, .question-block .tooltip-message .tooltip-header a.close:before, [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'seib' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before {
    content: "\e901";
}

.icon-cross:before {
    content: "\e902";
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 132%;
    font-size: 1em;
}

strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

h1 {
    font-size: 1.75em;
    font-weight: 400;
    line-height: 122%;
}

h2 {
    font-size: 1.5em;
    font-weight: 400;
    line-height: 122%;
}

h3, .subheading, .consent .confirm-message {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 122%;
}

h4, header .form-steps ul li a span.count, .question-block .question p:first-child {
    font-size: 1.125em;
    font-weight: 400;
    line-height: 122%;
}

ul li, ol li {
    padding: .3em 0;
}

.primary-button {
    font-size: 1em;
    font-weight: 400;
    line-height: 122%;
}

a {
    color: #6B1C6B;
}

    a.external {
        position: relative;
    }

        a.external:after {
            position: absolute;
            right: 0;
            top: 50%;
            font-size: 0.5em;
            content: "\e901";
            transform: translateY(-50%) translateX(110%) rotate(-45deg);
        }

input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=number],
textarea,
select {
    display: block;
    width: 100%;
    appearance: none;
    outline: none;
    border: 2px solid #C5CFD6;
    border-radius: .5em;
    font-size: 1.125em;
    line-height: 122%;
    padding: .95em 1em;
    background-color: #fff;
    font-weight: 300;
    color: #6B1C6B;
}

    input[type=text]:hover, input[type=text]:focus,
    input[type=password]:hover,
    input[type=password]:focus,
    input[type=search]:hover,
    input[type=search]:focus,
    input[type=email]:hover,
    input[type=email]:focus,
    input[type=number]:hover,
    input[type=number]:focus,
    textarea:hover,
    textarea:focus,
    select:hover,
    select:focus {
        border-color: #4F90BD;
    }

    input[type=text] option[value=""][disabled],
    input[type=password] option[value=""][disabled],
    input[type=search] option[value=""][disabled],
    input[type=email] option[value=""][disabled],
    input[type=number] option[value=""][disabled],
    textarea option[value=""][disabled],
    select option[value=""][disabled] {
        display: none;
    }

    input[type=text] option,
    input[type=password] option,
    input[type=search] option,
    input[type=email] option,
    input[type=number] option,
    textarea option,
    select option {
        color: #6B1C6B;
    }

    select:required:invalid {
        color: gray;
    }

.styled-select {
    position: relative;
}

    .styled-select select {
        padding-right: 3.5em;
    }

    .styled-select:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4em;
        background: url(../images/arrow-drop.svg) no-repeat center center;
        background-size: 1em;
        z-index: 1;
        pointer-events: none;
    }

/*input[type=radio], input[type=checkbox] {
  display: none; }*/
input[type=radio], input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

    input[type=radio] + label, input[type=checkbox] + label {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        appearance: none;
        outline: none;
        border: 2px solid #C5CFD6;
        border-radius: .5em;
        font-size: 1.125em;
        line-height: 122%;
        padding: .95em 1em .95em 3em;
        font-weight: 400;
        font-size: 1em;
        margin-left: 1em;
        margin-right: 1em;
    }

        input[type=radio] + label:before, input[type=checkbox] + label:before {
            position: absolute;
            left: 1em;
            top: 50%;
            transform: translateY(-50%);
            content: '';
            display: block;
            border: 3px solid #6B1C6B;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        input[type=radio] + label:after, input[type=checkbox] + label:after {
            position: absolute;
            left: 1em;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 7px;
            margin-top: 0;
            content: '';
            display: block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
        }

    input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
        background: #6B1C6B;
    }

input[type='range'] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 1.625em;
    background: transparent;
    font: 1em arial, sans-serif;
    padding: 0;
}

    input[type='range'], input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

        input[type='range']::-webkit-slider-runnable-track {
            box-sizing: border-box;
            border: none;
            width: 100%;
            height: 0.5em;
            background: #ccc;
            border-radius: 3em;
        }

        input[type='range']::-moz-range-track {
            box-sizing: border-box;
            border: none;
            width: 100%;
            height: 0.5em;
            background: #ccc;
            border-radius: 3em;
        }

        input[type='range']::-ms-track {
            box-sizing: border-box;
            border: none;
            width: 100%;
            height: 0.5em;
            background: #ccc;
            color: transparent;
            border-radius: 3em;
            overflow: hidden;
            padding: 0;
        }

        input[type='range']::-webkit-slider-thumb {
            margin-top: -0.625em;
            box-sizing: border-box;
            border: none;
            width: 1.625em;
            height: 1.625em;
            border-radius: 50%;
            background: #fff;
            border: 4px solid #6B1C6B;
        }

        input[type='range']::-moz-range-thumb {
            box-sizing: border-box;
            border: none;
            width: 1.625em;
            height: 1.625em;
            border-radius: 50%;
            background: #fff;
            border: 4px solid #6B1C6B;
        }

        input[type='range']::-moz-range-progress {
            background: #6B1C6B;
            height: 0.5em;
            border-radius: 3em;
        }

        input[type='range']::-ms-fill-lower {
            background: #6B1C6B;
            height: 0.5em;
            border-radius: 3em;
        }

        input[type='range']::-ms-thumb {
            margin-top: 0;
            box-sizing: border-box;
            border: none;
            width: 1.625em;
            height: 1.625em;
            border-radius: 50%;
            background: #fff;
            margin: 4px;
            box-shadow: inset 0 0 0 4px #6B1C6B;
        }

        input[type='range']::-ms-tooltip {
            display: none;
        }

input[type=checkbox] + label:before {
    /*border-radius: .25em;*/
}

input[type=checkbox] + label:after {
    margin-top: 3px;
    margin-left: 9px;
}

input[type=checkbox]:checked + label:before {
    background: #6B1C6B;
}

input[type=checkbox]:checked + label:after {
    background: transparent !important;
    border-radius: 0;
    border-bottom-right-radius: .1em;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    height: 14px;
    width: 7px;
    transform: translateY(-50%) rotate(45deg);
    margin-top: -1px !important;
    margin-left: 9px !important;
}

.slidecontainer {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /* Width of the outside container */
}

    .slidecontainer input[type=text] {
        max-width: 90px;
        text-align: center;
        margin-left: 1em;
    }

    .slidecontainer.weight {
        flex-wrap: wrap;
        flex-direction: column;
    }

        .slidecontainer.weight input[type=text] {
            flex: 0 0 auto;
            min-width: 100px;
            text-align: center;
            padding: 0.75em 1.75em;
            max-width: none;
            width: 170px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1em;
        }

    .slidecontainer .scale {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 400;
    }

.consent {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #C5CFD6;
    padding-top: 1.5em;
    margin-top: 2em;
}

@media (min-width: 769px) {
    .consent {
        flex-wrap: nowrap;
    }
}

.consent .button-group {
    flex: 0 0 100%;
}

@media (min-width: 769px) {
    .consent .button-group {
        flex: 0 0 180px;
    }
}

.consent .input-container {
    flex: 0 0 100% !important;
}

.consent .confirm-message {
    flex: 1 1 100%;
    padding-top: 1.5em;
}

@media (min-width: 769px) {
    .consent .confirm-message {
        padding-top: 0;
        padding-left: 1.5em;
    }
}

body {
    background: #F7EBEF;
    color: #6B1C6B;
}

.btn {
    cursor: pointer;
    position: relative;
    appearance: none;
    outline: none;
    border: 2px solid #C5CFD6;
    border-radius: .5em;
    font-size: 1.125em;
    line-height: 122%;
    padding: .95em 1em;
    background: #fff;
    text-decoration: none;
    color: #6B1C6B;
}

    .btn.fwd {
        padding-right: 3em;
    }

        .btn.fwd:after {
            position: absolute;
            right: 1.5em;
            top: 50%;
            font-size: 0.6em;
            transform: translateY(-50%);
            content: "\e901";
        }

    .btn.back {
        padding-left: 3em;
    }

        .btn.back:before {
            position: absolute;
            left: 1.5em;
            top: 50%;
            font-size: 0.6em;
            transform: translateY(-50%) rotate(180deg);
            content: "\e901";
        }

    .btn.disabled {
        background-color: transparent;
        color: #C5CFD6;
        border-color: transparent;
        pointer-events: none;
    }

    .btn.primary {
        background-color: #6B1C6B;
        color: #fff;
        border-color: #6B1C6B;
    }

header {
    background: #fff;
    border-bottom: 1px solid #C5CFD6;
    padding: 1.25em 0;
}

    header > .contain {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

@media (min-width: 769px) {
    header > .contain {
        flex-wrap: nowrap;
    }
}

header .logo {
    display: block;
    height: 60px;
    width: 95px;
    background: url(../images/logo.jpg) no-repeat center;
    background-size: contain;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

header .form-steps {
    flex: 1 1 100%;
    margin-top: 1em;
}

@media (min-width: 769px) {
    header .form-steps {
        margin-top: 0;
        padding-left: 6.125em;
    }
}

header .form-steps ul {
    margin: -.3em;
    padding: 0;
    list-style: none;
    display: flex;
}

@media (min-width: 769px) {
    header .form-steps ul {
        margin: -.75em;
    }
}

header .form-steps ul li {
    flex: 1 1 14.28%;
    padding: .3em;
}

@media (min-width: 769px) {
    header .form-steps ul li {
        padding: .75em;
    }
}

header .form-steps ul li a {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #C5CFD6;
}

    header .form-steps ul li a span {
        position: relative;
        display: block;
    }

        header .form-steps ul li a span.count {
            padding-bottom: .75em;
            margin-bottom: .25em;
        }

            header .form-steps ul li a span.count:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 0.375em;
                background: #C5CFD6;
                border-radius: 3em;
            }

        header .form-steps ul li a span.title {
            display: none;
            font-size: 0.75em;
            line-height: 110%;
        }

@media (min-width: 769px) {
    header .form-steps ul li a span.title {
        display: block;
    }
}

header .form-steps ul li.active a {
    color: #6B1C6B;
}

    header .form-steps ul li.active a span.count:after {
        background: #6B1C6B;
    }

header .form-steps ul li:not(.active) a {
    pointer-events: none;
}

main {
    padding-top: 1.25em;
}

@media (min-width: 769px) {
    main {
        padding-top: 0;
    }
}

main .help {
    text-align: center;
}

main section.white {
    background: #fff;
    box-shadow: 0px 0.25em 0.5em rgba(0, 60, 102, 0.12);
    border-radius: 0.75em;
    padding: 1.75em 1.25em;
    margin: 1em;
}

    main section.white:not(:first-child) {
        margin-top: 1.75em;
    }

@media (min-width: 769px) {
    main section.white {
        padding: 2.5em 2.5em 3.75em;
    }
}

main section.white .quote-final-step {
    margin-top: 3.5em;
    text-align: center;
}

    main section.white .quote-final-step a {
        display: inline-block;
        margin: 0.625em;
    }

main section.form-control {
    border-top: 1px solid #C5CFD6;
    border-bottom: 1px solid #C5CFD6;
    padding: 2em 0;
    margin-top: 1.5em;
}

main section.documents-available {
    max-width: 47.125em;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

main .page {
    display: none;
}

    main .page.active {
        display: block;
    }

.section-title {
    padding-bottom: 0.75em;
    border-bottom: 1px solid #C5CFD6;
}

    .section-title span {
        display: block;
        text-transform: uppercase;
        color: #697781;
        margin-bottom: 1.25rem;
        font-size: 0.875em;
    }

    .section-title h1, .section-title h2 {
        margin-top: 0;
    }

    .section-title p {
        margin: 1em 0;
    }

        .section-title p:last-child {
            margin-bottom: 0;
        }

    .section-title.centered {
        text-align: center;
        border-bottom: none;
    }

        .section-title.centered p {
            max-width: 30em;
            margin-left: auto;
            margin-right: auto;
        }

.quote-reference {
    border: 1px solid #C5CFD6;
    border-radius: .5em;
    padding: 1em .75em;
    max-width: 15em;
    margin: 2.5em auto 0;
    text-align: center;
}

    .quote-reference p {
        margin: 0;
    }

.input-container span.message, .button-group span.message {
    display: block;
    font-size: 0.875em;
    margin-top: .5em;
}

.input-container.sub-container, .button-group.sub-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .input-container.sub-container label, .button-group.sub-container label {
        flex: 1 1 60%;
        margin-bottom: .5em;
    }

@media (min-width: 769px) {
    .input-container.sub-container .tooltip-message.active, .button-group.sub-container .tooltip-message.active {
        margin-top: 0.875em;
    }
}

.input-container.sub-container .message, .button-group.sub-container .message {
    order: 4;
}

.input-container.success input:not([type=range]):not([type=checkbox]):not([type=radio]), .button-group.success input:not([type=range]):not([type=checkbox]):not([type=radio]) {
    padding-right: 2.5em;
    border-color: #80BC98;
    background: url(../images/tick-green.png) no-repeat right 0.5em center #E1FAEB;
}

.input-container.success input[type=radio]:checked + label, .input-container.success input[type=checkbox]:checked + label, .button-group.success input[type=radio]:checked + label, .button-group.success input[type=checkbox]:checked + label {
    padding-right: 2.5em;
    border-color: #80BC98;
    background: url(../images/tick-green.png) no-repeat right 0.5em center #E1FAEB;
}

.input-container.success select, .button-group.success select {
    border-color: #80BC98;
    background: #E1FAEB;
}

.input-container.error input, .input-container.error select, .button-group.error input, .button-group.error select {
    border-color: #ED4C40;
}

.input-container.error span.message, .button-group.error span.message {
    color: #ED4C40;
}

.input-container input, .input-container .styled-select, .input-container .inner-input-wrap, .button-group input, .button-group .styled-select, .button-group .inner-input-wrap {
    flex: 1 1 100%;
}

@media (min-width: 769px) {
    .input-container input, .input-container .styled-select, .input-container .inner-input-wrap, .button-group input, .button-group .styled-select, .button-group .inner-input-wrap {
        flex: 1 1 50%;
    }
}

.input-wrapper > .input-container:not(:first-child) {
    margin-top: 0.75em;
}

.input-wrapper.dob .input-container, .input-wrapper.dob .button-group {
    display: flex;
    margin: -.375em;
}

    .input-wrapper.dob .input-container input, .input-wrapper.dob .input-container .styled-select, .input-wrapper.dob .input-container .inner-input-wrap, .input-wrapper.dob .button-group input, .input-wrapper.dob .button-group .styled-select, .input-wrapper.dob .button-group .inner-input-wrap {
        flex: 1 1 20%;
        margin: .375em;
    }

.input-wrapper.dob .message {
    display: block;
    font-size: 0.875em;
    margin-top: .5em;
}

    .input-wrapper.dob .message.error {
        color: #ED4C40;
    }

.button-group .inner-input-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: -.375em;
}

    .button-group .inner-input-wrap .input-container {
        display: flex;
        padding: .375em;
        flex: 0 0 100%;
    }

@media (min-width: 769px) {
    .button-group .inner-input-wrap .input-container {
        flex: 0 0 50%;
    }
}

.button-group.error .input-container input:not([type=range]), .button-group.error .input-container input[type=radio] + label, .button-group.error .input-container input[type=checkbox] + label, .button-group.error .input-container select {
    border-color: #ED4C40;
}

.button-group.error .message {
    color: #ED4C40;
}

.question-block {
    display: flex;
    flex-wrap: wrap;
    padding: 1.75em 0 0 0;
}

    .question-block:not(:last-child) {
        border-bottom: 1px solid #80A4BD;
    }

    .question-block .questionRow {
        flex: 1 1 100%;
    }

@media (min-width: 769px) {
    .question-block .question {
        flex: 0 0 40%;
        padding: 0 3em 0 0;
    }

    .question-block .questionRow {
        flex: 1 1 100%;
    }
}

.question-block .question p {
    font-size: 0.875em;
    margin: 0.5em 0;
}

    .question-block .question p:first-child {
        margin-top: 0;
    }

    .question-block .question p:last-child {
        margin-bottom: 0;
    }

.question-block .tooltip {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 34px;
}

@media (min-width: 769px) {
    .question-block .tooltip {
        order: 3;
    }
}

.question-block .tooltip a.tooltip-link {
    display: block;
    height: 40px;
    flex: 0 0 30px;
    background: url(../images/info.png) no-repeat center;
    margin-top: -9px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 1em;
}

@media (min-width: 769px) {
    .question-block .tooltip a.tooltip-link {
        height: 48px;
        margin-top: 0;
    }
}

.question-block .tooltip-message {
    flex: 0 0 100%;
    background: #DDE5EB;
    flex: 0 0 100%;
    border-radius: .25em;
    max-height: 0;
    overflow: hidden;
}

@media (min-width: 769px) {
    .question-block .tooltip-message {
        order: 4;
    }
}

.question-block .tooltip-message.active {
    margin: 0 0 1.75em 0;
    padding: 1em;
    max-height: max-content;
}

.question-block .tooltip-message .tooltip-header {
    display: flex;
}

    .question-block .tooltip-message .tooltip-header .title {
        padding-right: 1em;
        font-weight: 400;
    }

    .question-block .tooltip-message .tooltip-header a.close {
        display: block;
        margin-left: auto;
        margin-top: -.5em;
        margin-right: -.5em;
        height: 30px;
        width: 30px;
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
        color: #6B1C6B;
    }

        .question-block .tooltip-message .tooltip-header a.close:before {
            float: left;
            width: 30px;
            text-align: center;
            line-height: 30px;
            content: "\e902";
            text-indent: 0;
        }

.question-block .tooltip-message .title {
    font-weight: 400;
}

.question-block .tooltip-message p {
    margin: .5em 0;
    font-size: 0.9em;
}

.question-block .input-wrapper {
    flex: 1 1 100%;
    margin: 0 0 1.75em 0;
}

@media (min-width: 769px) {
    .question-block .input-wrapper {
        flex: 1 1 60%;
    }
}

@media (min-width: 769px) {
    .question-block:last-child .question {
        margin-bottom: 0;
    }
}

.question-block:last-child .input-wrapper {
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .question-block:last-child .tooltip-message.active {
        margin-top: 0.875em;
        margin-bottom: 0;
    }
}

.form-control {
    margin-bottom: 4em;
}

.form-controls {
    display: flex;
    justify-content: space-between;
}

    .form-controls a.inactive {
        display: none;
    }

#colophon {
    padding: 2.5em 0;
    background: #FFF;
}

    #colophon > .contain {
        display: flex;
        justify-content: center;
    }

    #colophon .footer-logo {
        display: block;
        height: 60px;
        width: 95px;
        background: url(../images/logo.jpg) no-repeat center;
        background-size: contain;
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

.quote-panels, .payment-panels {
    display: flex;
    list-style: none;
    padding: 0;
    margin: -0.625em;
    flex-wrap: wrap;
    justify-content: center;
}

    .quote-panels > li, .payment-panels > li {
        display: flex;
        flex: 0 0 100%;
        padding: 0.625em;
    }

@media (min-width: 561px) {
    .quote-panels > li, .payment-panels > li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 769px) {
    .quote-panels > li, .payment-panels > li {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

.quote-panels > li > a, .payment-panels > li > a {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    color: #6B1C6B;
    border: 2px solid #C5CFD6;
    padding: 2.5em 1.75em 1.75em;
    border-radius: 0.75em;
}

    .quote-panels > li > a > *, .payment-panels > li > a > * {
        width: 100%;
    }

    .quote-panels > li > a img, .payment-panels > li > a img {
        flex-basis: auto;
        display: block;
        width: auto;
        margin: 0 auto;
    }

    .quote-panels > li > a h3.payment-title, .quote-panels > li > a .payment-title.subheading, .quote-panels > li > a .consent .payment-title.confirm-message, .consent .quote-panels > li > a .payment-title.confirm-message, .payment-panels > li > a h3.payment-title, .payment-panels > li > a .payment-title.subheading, .payment-panels > li > a .consent .payment-title.confirm-message, .consent .payment-panels > li > a .payment-title.confirm-message {
        margin-top: 0;
        text-align: center;
        padding-bottom: 1.25em;
        border-bottom: 1px solid #80A4BD;
    }

    .quote-panels > li > a ul.payment-options, .payment-panels > li > a ul.payment-options {
        margin: 0;
        padding: 0;
        width: 100%;
        padding-bottom: 2.5em;
    }

        .quote-panels > li > a ul.payment-options li, .payment-panels > li > a ul.payment-options li {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: none;
        }

            .quote-panels > li > a ul.payment-options li span:first-child, .payment-panels > li > a ul.payment-options li span:first-child {
                font-size: 0.875em;
                padding-right: 1em;
            }

            .quote-panels > li > a ul.payment-options li span:last-child, .payment-panels > li > a ul.payment-options li span:last-child {
                font-weight: 400;
            }

    .quote-panels > li > a .insurer-name, .quote-panels > li > a .price, .payment-panels > li > a .insurer-name, .payment-panels > li > a .price {
        text-align: center;
    }

    .quote-panels > li > a .insurer-name, .payment-panels > li > a .insurer-name {
        margin-top: 1.25em;
        font-size: 1.125em;
    }

    .quote-panels > li > a .price, .payment-panels > li > a .price {
        font-size: 2.625em;
        line-height: 122%;
        font-weight: 400;
        border-bottom: 1px solid #80A4BD;
        padding-bottom: 1rem;
    }

    .quote-panels > li > a .payment-total, .payment-panels > li > a .payment-total {
        margin-top: auto;
        border-top: 1px solid #80A4BD;
        text-align: center;
    }

        .quote-panels > li > a .payment-total p, .payment-panels > li > a .payment-total p {
            font-size: 1em;
            margin: .75em;
        }

        .quote-panels > li > a .payment-total .total-price, .payment-panels > li > a .payment-total .total-price {
            font-size: 1.75em;
            line-height: 122%;
            font-weight: 400;
            padding-bottom: .75em;
        }

    .quote-panels > li > a .covers, .payment-panels > li > a .covers {
        padding-bottom: 3.75em;
    }

        .quote-panels > li > a .covers .item, .payment-panels > li > a .covers .item {
            margin-top: 1.75em;
        }

    .quote-panels > li > a .select, .payment-panels > li > a .select {
        text-align: center;
        margin-top: auto;
        font-weight: 400;
    }

    .quote-panels > li > a.payment-panel .select, .payment-panels > li > a.payment-panel .select {
        margin-top: 0;
    }

.quote-panels > li.selected a, .payment-panels > li.selected a {
    border-color: #80BC98;
    border-width: 4px;
}

    .quote-panels > li.selected a .select, .payment-panels > li.selected a .select {
        border-color: #80BC98;
        padding-right: 3em;
        background: url(../images/tick-green.png) no-repeat right 2em center #E1FAEB;
    }

.quote-panels.error li a.panel, .payment-panels.error li a.panel {
    border-color: #ED4C40;
}

.quote-panels.error .message, .payment-panels.error .message {
    display: block;
    font-size: 0.875em;
    margin-top: .5em;
    color: #ED4C40;
}

.payment-panels {
    margin-top: 2.5em;
}

    .payment-panels li {
        display: flex;
        flex: 0 0 100%;
    }

@media (min-width: 561px) {
    .payment-panels li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 769px) {
    .payment-panels li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.key-features, .excess {
    padding-top: 2.5em;
}

    .key-features:not(:last-child), .excess:not(:last-child) {
        padding-bottom: 1.25em;
    }

    .key-features ul, .excess ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .key-features ul li, .excess ul li {
            border-bottom: 1px solid #C5CFD6;
            padding: 1em 0;
        }

.key-features {
    display: none;
    margin-top: 2.5em;
    border-top: 1px solid #C5CFD6;
}

    .key-features.active {
        display: block;
    }

    .key-features ul li {
        position: relative;
        padding-left: 2.5em;
        background: url(../images/tick-feature.png) no-repeat left center;
    }

    .key-features .key_features_panels .panel {
        display: none;
    }

        .key-features .key_features_panels .panel.active {
            display: block;
        }

.excess {
    display: none;
}

    .excess.active {
        display: block;
    }

    .excess ul li {
        display: flex;
        justify-content: space-between;
    }

        .excess ul li span:first-child {
            padding-right: 2em;
        }

    .excess .excess_panels .panel {
        display: none;
    }

        .excess .excess_panels .panel.active {
            display: block;
        }

h2.optional-extras {
    margin-top: 4.875em;
}

ul.document-list {
    margin: 2em 0 1em 0;
    padding: 0;
    list-style: none;
}

    ul.document-list li {
        margin: 0.75em 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        box-shadow: 0px 0.25em 0.5em rgba(0, 60, 102, 0.12);
        padding: 1em 1.5em;
        border-radius: .75em;
    }

        ul.document-list li span {
            padding-right: 1.5em;
        }

.why-choose-us {
    text-align: center;
    margin-bottom: 1.75em;
}

    .why-choose-us ul {
        list-style: none;
        justify-content: center;
        margin: -.5em 0;
        padding: 0 1em;
        display: flex;
        flex-wrap: wrap;
    }

        .why-choose-us ul li {
            padding: .5em 1.25em;
            background: url(../images/tick-feature.png) no-repeat left center;
            padding-left: 2.3em;
        }

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}