.error-page {
    /*color*/
    --color-primary: #609;
    --color-primary-hover: #934cb7;
    --color-primary-pressed: #47006a;

    --color-grey-darkness: #000;
    --color-grey-dark: #595959;
    --color-grey-shining: #fff;

    /*font family*/
    --font-family-digital-regular: 'robotoregular';
    --font-family-digital-light: 'robotolight';
    --font-family-digital-medium: 'robotomedium';

    /*font size*/
    --font-size-xxxs: calc(14 / var(--font-size-base) * 1rem);
    --font-size-xxs: calc(16 / var(--font-size-base) * 1rem);
    --font-size-xs: calc(18 / var(--font-size-base) * 1rem);
    --font-size-sm: calc(20 / var(--font-size-base) * 1rem);
    --font-size-md: calc(24 / var(--font-size-base) * 1rem);
    --font-size-lg: calc(28 / var(--font-size-base) * 1rem);
    --font-size-xl: calc(32 / var(--font-size-base) * 1rem);
    --font-size-xxl: calc(36 / var(--font-size-base) * 1rem);
    --font-size-xxxl: calc(48 / var(--font-size-base) * 1rem);

    /*letter-spacing*/
    --font-letter-spacing-xs: calc(-1 / var(--font-size-base) * 1rem);
    --font-letter-spacing-xxxs: calc(-1.5 / var(--font-size-base) * 1rem);
    --font-letter-spacing-sm: calc(-.75 / var(--font-size-base) * 1rem);
    --font-letter-spacing-md: calc(.2 / var(--font-size-base) * 1rem);
    --font-letter-spacing-lg: calc(.5 / var(--font-size-base) * 1rem);

    /*line-height*/
    --font-line-height-sm: 1.25;
    --font-line-height-lg: 1.5;

    /*spaces*/
    --space-stack-xs: calc(8 / var(--font-size-base) * 1rem);
    --space-stack-sm: calc(16 / var(--font-size-base) * 1rem);
    --space-stack-md: calc(32 / var(--font-size-base) * 1rem);
    --space-stack-lg: calc(48 / var(--font-size-base) * 1rem);
    --space-stack-xl: calc(64 / var(--font-size-base) * 1rem);
    --space-stack-xxl: calc(76 / var(--font-size-base) * 1rem);
    --space-stack-xxxl: calc(96 / var(--font-size-base) * 1rem);
}

/*<--typography*/
.overline {
    color: var(--color-grey-dark);
    font-family: var(--font-family-digital-medium);
    font-size: var(--font-size-xxxs);
    letter-spacing: var(--font-letter-spacing-lg);
    line-height: var(--font-line-height-lg);
    text-transform: uppercase;
    margin-bottom: var(--space-stack-xs);
}

h1 {
    color: var(--color-grey-darkness);
    font-family: var(--font-family-digital-light);
    font-size: var(--font-size-xl);
    font-stretch: var(--font-stretch-default);
    font-style: var(--font-style-default);
    font-weight: var(--font-weight-default);
    letter-spacing: var(--font-letter-spacing-xxxs);
    line-height: var(--font-line-height-sm);

    margin-bottom: 0;
}

h2 {
    color: var(--color-grey-darkness);
    font-family: var(--font-family-digital-light);
    font-size: var(--font-size-lg);
    font-stretch: var(--font-stretch-default);
    font-style: var(--font-style-default);
    font-weight: var(--font-weight-default);
    letter-spacing: var(--font-letter-spacing-sm);
    line-height: var(--font-line-height-lg);

    margin-bottom: 0;
}

.body-1 {
    color: var(--color-grey-darkness);
    font-family: var(--font-family-digital-light);
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-letter-spacing-md);
    line-height: var(--font-line-height-lg);
}

/*typography-->*/

.logo {
    background: url('../images/icons/logo.svg') no-repeat center;
    background-size: calc(195 / var(--font-size-base) * 1rem);
    display: block;
    height: calc(32 / var(--font-size-base) * 1rem);
    width: calc(166 / var(--font-size-base) * 1rem);
}

.icon-custom {
    background: url('../images/icons/warning-light.svg') no-repeat center;
    height: calc(48 / var(--font-size-base) * 1rem);
    width: calc(48 / var(--font-size-base) * 1rem);
}

.image-wrapper {
    height: calc(48 / var(--font-size-base) * 1rem);
}

.image {
    height: auto;
    max-width: 100%;
}

.mve-button.primary {
    align-items: center;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-family: var(--font-family-digital-regular);
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1.5;
    outline: 0;
    padding: calc(12 / var(--font-size-base) * 1rem) calc(24 / var(--font-size-base) * 1rem);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    background-color: var(--color-primary);
    color: var(--color-grey-shining);
    margin-top: var(--space-stack-xxxl);

    width: 100%;
}

@media (hover: hover) {
    .mve-button.primary:hover:not(:disabled) {
        background-color: var(--color-primary-hover);
    }
}

.mve-button.primary:active:not(:disabled),
.mve-button.primary:focus:not(:disabled) {
    background-color: var(--color-primary-pressed);
    outline: 0;
}

.mve-button.primary:hover,
.mve-button.primary:active,
.mve-button.primary:focus {
    text-decoration: none;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .message-wrapper {
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .message-wrapper {
        margin-top: var(--space-stack-xxxl);
    }
}

@media (min-width: 768px /*--grid-breakpoint-md*/
) {
    /*<--typography*/
    .overline {
        font-size: var(--font-size-xxs);
    }

    h1 {
        font-size: var(--font-size-xxxl);
    }

    h2 {
        font-size: var(--font-size-xxl);
        letter-spacing: var(--font-letter-spacing-xs);
    }

    .image-wrapper {
        margin-bottom: 0;
        padding: 0;
        margin-left: var(--space-stack-md);;
    }

    .mve-button.primary {
        margin-top: 0;
        width: auto;
    }
}