:root {
    --base-font-stack: Roboto, Arial, sans-serif;
    --heading-font-stack: var(--base-font-stack);
    --input-font-stack: var(--base-font-stack);

    --base-font-size: 100%;
    --base-font-weight-normal: 400;
    --base-font-weight-bold: 700;
    --heading-font-weight-normal: var(--base-font-weight-normal);
    --heading-font-weight-bold: var(--base-font-weight-bold);
    --input-font-weight-normal: var(--base-font-weight-normal);
    --input-font-weight-bold: var(--base-font-weight-bold);

    --text-color: #212529;
    --background-color: #EDEDED;
    --accent-color: var(--text-color);
    --accent-color-rgb: 33, 37, 41;

    --success-color: #009900;
    --warning-color: #FF9900;
    --alert-color: #FF0000;

    --modal-bg-color: rgba(0, 0, 0, .25);
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background-color: var(--background-color);
    font-family: var(--base-font-stack);
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight-normal);
    color: var(--text-color);
    line-height: 1.4;
}

body.framed {
    height: auto;
    background: transparent;
    overflow: hidden;
}

body.modal {
    background-color: var(--modal-bg-color);
    overflow: hidden;
}

.body-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    min-height: 100%;
}

body.framed .body-wrap {
    display: block;
    height: auto;
}

body.modal .body-wrap {
    height: 100%;
    -webkit-justify-content: center;
    justify-content: center;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.15em;
    margin: 1.3em auto .65em;
    font-family: var(--heading-font-stack);
    font-weight: var(--heading-font-weight-normal);
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0;
}

p, div.form {
    margin: 1em auto;
}

body.framed p:first-child, body.framed div.form:first-child,
body.modal p:first-child, body.modal div.form:first-child {
    margin-top: 0;
}

body.framed p:last-child, body.framed div.form:last-child,
body.modal p:last-child, body.modal div.form:last-child {
    margin-bottom: 0;
}

div.form {
    text-align: left;
}

div.form label {
    display: block;
    line-height: 1;
    padding-bottom: .15em;
    font-size: .9em;
    font-weight: var(--base-font-weight-bold);
}

div.form input + label {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0;
    font-size: 1em;
}

div.form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.form ul li {
    list-style: none;
    margin: 0 0 .65em;
    padding: 0;
}

div.form ul li:last-child {
    margin-bottom: 0;
}

input, select, textarea {
    font-family: var(--input-font-stack);
}

a {
    transition: color 350ms;
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

strong {
    font-weight: var(--base-font-weight-bold);
}

h1.strong, h2.strong, h3.strong, h4.strong, h5.strong, h6.strong,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-weight: var(--heading-font-weight-bold);
}

small {
    font-size: .8em;
}

.container {
    max-width: 84em;
    margin: 0 auto;
}

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

.relative {
    position: relative;
}

.shake {
    -webkit-animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.shake-v {
    -webkit-animation: shake-v 0.82s cubic-bezier(.36, .07, .19, .97) both;
    animation: shake-v 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.error label {
    color: var(--alert-color) !important;
}

.error input {
    border-color: var(--alert-color) !important;
}

.hide, .hide-logged-in, .hide-subscribed {
    display: none;
}

.disabled {
    opacity: .35 !important;
    cursor: default !important;
    pointer-events: auto !important;
}

.no-pointer-events {
    pointer-events: none !important;
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.expand {
    box-sizing: border-box;
    width: 100%;
}

.response {
    display: none;
    line-height: 1.25;
    padding: .5em;
    font-size: .9em;
    color: #FFFFFF;
    text-align: left;
}

.response.show {
    display: block;
}

.response.faded {
    opacity: .15;
}

.response.success {
    background-color: var(--success-color);
}

.response.warning {
    background-color: var(--warning-color);
}

.response.alert {
    background-color: var(--alert-color);
}

.text-response {
    display: none;
}

.text-response.show {
    display: block;
}

.text-response.faded {
    opacity: .25;
}

.text-response.success {
    color: var(--success-color);
}

.text-response.warning {
    color: var(--warning-color);
}

.text-response.alert {
    color: var(--alert-color);
}

.fancy-checkbox {
    position: relative;
}

.fancy-checkbox input {
    position: absolute;
    top: 2px;
    left: 0;
}

.fancy-checkbox label {
    margin: 0;
    padding: 0 0 0 1.35em;
    font-size: 1em;
}

@supports (transform: scale(0, 0) rotate(45deg)) {
    .fancy-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .fancy-checkbox label {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0 0 0 1.65em;
    }

    .fancy-checkbox label::before {
        content: "";
        transition: background-color 160ms;
        position: absolute;
        top: 1px;
        left: 0;
        height: 1em;
        width: 1em;
        border: 1px solid;
        background: #FFFFFF;
        cursor: pointer;
        color: #BBBBBB;
    }

    .fancy-checkbox label::after {
        content: "";
        transition: transform 160ms ease-out;
        transform: scale(0, 0) rotate(45deg);
        display: inline-block;
        position: absolute;
        top: .28em;
        left: .15em;
        height: .35em;
        width: .75em;
        border-left: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
    }

    .fancy-checkbox input:checked + label::before {
        background-color: currentColor;
        color: var(--accent-color);
    }

    .fancy-checkbox input:checked + label::after {
        transform: scale(1, 1) rotate(-45deg);
        color: var(--accent-color);
    }

    .fancy-checkbox input:focus + label::before {
        outline: 1px dotted currentColor;
    }
}

input[type=text], input[type=email], input[type=password] {
    transition: border-color 350ms;
    box-sizing: border-box;
    display: inline-block;
    height: 3em;
    padding: 0 .65em;
    border: 1px solid #BBBBBB;
    background: #FFFFFF;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
    border-color: var(--accent-color);
}

button, .button {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    height: 3em;
    width: auto;
    padding: 0 1em;
    border: none;
    background: none;
    text-align: center;
}

.button {
    line-height: 3em;
}

button:hover, .button:hover {
    cursor: pointer;
    text-decoration: none;
}

button:before, .button:before {
    transition: opacity 180ms;
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    opacity: 0;
}

button.primary, .button.primary {
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
    color: #FFFFFF;
}

button.secondary, .button.secondary {
    border: 1px solid var(--accent-color);
    background-color: #FFFFFF;
    color: var(--accent-color);
}

button.primary:hover:before, .button.primary:hover:before {
    opacity: .2;
}

button.secondary:hover:before, .button.secondary:hover:before {
    opacity: .1;
}

button[disabled]:before, button.disabled:before, .button.disabled:before {
    content: none;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.75);
    z-index: 2;
}

.main__loader,
.inline-loader {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .65em;
    border-bottom: 1px solid var(--accent-color);
    z-index: 3;
}

.header .main__loader {
    top: 100%;
}

.main__loader.visible,
.inline-loader.visible {
    display: block;
}

@supports (transform: scale(1, 0)) and (transition: transform .25s) {
    .main__loader,
    .inline-loader {
        transition: transform .1s;
        display: block;
        transform: scale(1, 0);
        transform-origin: bottom;
    }

    .main__loader,
    .inline-loader {
        transform-origin: top;
    }

    .main__loader.visible,
    .inline-loader.visible {
        transition: transform .25s ease-out;
        transform: scale(1, 1);
    }
}

.main__loader::before,
.inline-loader::before {
    content: " ";
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 40px 40px
}

.header__inner {
    padding: .5em;
}

.header__logo {
    display: inline-block;
}

.header__logo img {
    height: auto;
    width: auto;
    max-height: 3em;
    max-width: 13.5em;
    vertical-align: bottom;
}

.header__menu {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 3em;
    z-index: 5;
}

.header__menu-hamburger {
    position: absolute;
    top: .25em;
    right: .5em;
    height: 2em;
    width: 2em;
    color: #AAAAAA;
    cursor: pointer;
}

.header__menu-hamburger svg {
    transition: fill 180ms;
    height: 2em;
    width: 2em;
    fill: currentColor;
}

.header__menu > ul {
    display: none;
    position: absolute;
    top: 2.25em;
    right: .5em;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 0.75);
}

.header__menu a {
    color: #111111;
}

.header__menu-hamburger:hover,
html.js .header__menu.opened .header__menu-hamburger {
    color: var(--accent-color);
}

html.no-js .header__menu-hamburger:hover + ul,
html.no-js .header__menu > ul:hover,
html.js .header__menu.opened ul {
    display: block;
}

@supports (transform: scale(1, 0)) and (transition: transform .75s) {
    .header__menu > ul {
        transition: transform .175s;
        display: block;
        transform: scale(1, 0);
        transform-origin: top;
    }

    html.no-js .header__menu-hamburger:hover + ul,
    html.no-js .header__menu > ul:hover,
    html.js .header__menu.opened ul {
        transition: transform .350s ease-out;
        transform: scale(1, 1);
    }
}

.header__menu > ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__menu a {
    position: relative;
    display: block;
    height: 2.75em;
    line-height: 2.75em;
    padding: 0 1em;
    white-space: nowrap;
}

.header__menu a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

@supports (transition: opacity 180ms) and (background-color: currentColor) {
    .header__menu a:before {
        transition: opacity 150ms;
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: currentColor;
        opacity: 0;
    }

    .header__menu a:hover:before {
        opacity: .1;
    }
}

.header__buttons {
    overflow: hidden;
    margin-top: 1em;
}

.header__buttons .button {
    width: 100%;
}

.header__buttons .button.primary.half {
    float: left;
    width: 49%;
}

.header__buttons .button.secondary.half {
    float: right;
    width: 49%;
}

main {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 7.5em .5em 1em .5em;
    text-align: center;
}

body.modal main {
    height: auto;
    max-width: 22em;
    margin: 0 auto;
    padding: 0;
    background: #FFFFFF;
    border-radius: 3px;
    overflow: auto;
    -webkit-box-flex: initial;
    -webkit-flex: initial;
    -ms-flex: initial;
    flex: initial;
}

body.framed main {
    height: auto;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 768px) {
    main {
        padding-top: 5em;
    }

    body.modal main {
        padding: 0;
    }

    body.framed main {
        padding: 0;
    }
}

.main__inner {
    position: relative;
}

.main__response {
    position: fixed;
    top: 8em;
    right: 0;
    left: 0;
    height: 0;
    text-align: center;
    overflow: visible;
    z-index: 2;
}

body.framed .main__response {
    top: 0;
}

body.modal .main__response {
    position: absolute;
    top: 0;
    height: auto;
}

@media (min-width: 768px) {
    .main__response {
        top: 5.5em;
    }

    body.framed .main__response {
        top: 0;
    }

    body.modal .main__response {
        top: 0;
    }
}

.main__response .response {
    transition: opacity .75s;
    max-width: 35em;
    padding: .5em 1em;
}

.main__response .response.show {
    display: inline-block;
}

@supports (transform: scale(1, 0)) and (transition: transform .25s) {
    .main__response .response {
        transition: opacity .25s, transform .25s;
        display: inline-block;
        transform: scale(1, 0);
        transform-origin: top;
    }

    .main__response .response.show {
        transform: scale(1, 1);
    }
}

footer {
    padding: 0 .5em;
    text-align: center;
}

.footer__inner {
    border-top: thin solid #999999;
    padding: .65em 0;
}

.footer__menu {
    margin: .65em auto;
}

.footer__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__menu ul li {
    display: inline-block;
    list-style: none;
    margin: 0 1.5em 0 0;
    padding: 0;
}

.footer__menu ul li:last-child {
    margin-right: 0;
}

.footer__menu a {
    font-size: .85em;
    color: #333333;
}

.footer__copyright {
    font-size: .85em;
    color: #666666;
}

@media (min-width: 768px) {
    .header__left {
        float: left;
        white-space: nowrap;
    }

    .header__logo {
        line-height: 3em;
    }

    .header__logo img {
        position: relative;
        top: -1px;
        vertical-align: middle;
    }

    .header__menu {
        position: static;
        display: inline-block;
        margin-left: 7vw;
        vertical-align: bottom;
    }

    .header__menu-hamburger {
        display: none;
    }

    .header__menu > ul {
        transform: scale(1, 1);
        display: block;
        position: static;
        background-color: transparent;
        box-shadow: none;
    }

    .header__menu > ul li {
        display: inline-block;
    }

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

    .header__menu a:before {
        content: "";
        background-color: transparent;
    }

    .header__buttons {
        float: right;
        margin-top: 0;
    }

    .header__buttons .button,
    .header__buttons .button.primary.half,
    .header__buttons .button.secondary.half {
        float: none;
        width: auto;
    }

    footer {
        text-align: left;
    }

    .footer__menu {
        float: right;
        margin: 0;
    }
}

@-webkit-keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes shake-v {
    10%, 90% {
        transform: translate3d(0, -1px, 0);
    }

    20%, 80% {
        transform: translate3d(0, 2px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(0, -3px, 0);
    }

    40%, 60% {
        transform: translate3d(0, 3px, 0);
    }
}

@keyframes shake-v {
    10%, 90% {
        transform: translate3d(0, -1px, 0);
    }

    20%, 80% {
        transform: translate3d(0, 2px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(0, -3px, 0);
    }

    40%, 60% {
        transform: translate3d(0, 3px, 0);
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }
    to {
        background-position: 0 0
    }
}