.grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -4px;
    margin-left: -4px;
    margin-bottom: -8px
}

@media only screen and (min-width: 1000px) {
    .grid {
        margin-right: -12px;
        margin-left: -12px;
        margin-bottom: -24px
    }
}

.grid--no-gutter {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0
}

.grid--no-horizontal-gutter {
    margin-right: 0;
    margin-left: 0
}

.grid--no-vertical-gutter {
    margin-bottom: 0
}

.grid--medium-vertical-gutter {
    margin-bottom: -16px
}

.grid--no-wrap {
    flex-wrap: nowrap
}

.grid__col {
    flex: 0 0 auto;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 8px;
    padding-right: 4px;
    padding-left: 4px
}

@media only screen and (min-width: 1000px) {
    .grid__col {
        padding-right: 12px;
        padding-left: 12px;
        margin-bottom: 24px
    }
}

.grid--equalheight > .grid__col {
    display: flex
}

.grid--no-gutter > .grid__col {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0
}

.grid--no-horizontal-gutter > .grid__col {
    padding-left: 0;
    padding-right: 0
}

.grid--no-vertical-gutter > .grid__col {
    margin-bottom: 0
}

.grid--medium-vertical-gutter > .grid__col {
    margin-bottom: 16px
}

.grid__col--min {
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    max-width: 100%
}

.grid__col--max {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto
}

.grid__col--no-vertical-gutter {
    margin-bottom: 0
}

.grid__col--xs-1 {
    order: 0;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%
}

.grid__col--offset-xs-1 {
    margin-left: 16.6666666667%
}

.grid__col--xs-2 {
    order: 0;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%
}

.grid__col--offset-xs-2 {
    margin-left: 33.3333333333%
}

.grid__col--xs-3 {
    order: 0;
    flex-basis: 50%;
    max-width: 50%
}

.grid__col--offset-xs-3 {
    margin-left: 50%
}

.grid__col--xs-4 {
    order: 0;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%
}

.grid__col--offset-xs-4 {
    margin-left: 66.6666666667%
}

.grid__col--xs-5 {
    order: 0;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%
}

.grid__col--offset-xs-5 {
    margin-left: 83.3333333333%
}

.grid__col--xs-6 {
    order: 0;
    flex-basis: 100%;
    max-width: 100%
}

.grid__col--offset-xs-6 {
    margin-left: 100%
}

.grid__col--xs {
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    max-width: 100%
}

.grid__col--min-xs {
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    max-width: 100%
}

.grid__col--max-xs {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto
}

.grid__col--top-xs {
    align-self: flex-start
}

.grid__col--middle-xs {
    align-self: center
}

.grid__col--bottom-xs {
    align-self: flex-end
}

.grid__col--original-xs {
    order: 0
}

.grid__col--first-xs {
    order: -1
}

.grid__col--last-xs {
    order: 1
}

.grid--reverse-xs {
    flex-direction: row-reverse
}

.grid--start-xs {
    justify-content: flex-start
}

.grid--center-xs {
    justify-content: center
}

.grid--end-xs {
    justify-content: flex-end
}

.grid--top-xs {
    align-items: flex-start
}

.grid--middle-xs {
    align-items: center
}

.grid--bottom-xs {
    align-items: flex-end
}

.grid--around-xs {
    justify-content: space-around
}

.grid--between-xs {
    justify-content: space-between
}

.grid--no-wrap-xs {
    flex-wrap: nowrap
}

@media only screen and (max-width: 319px) {
    .grid__col--xxs-1 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-xxs-1 {
        margin-left: 16.6666666667%
    }

    .grid__col--xxs-2 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-xxs-2 {
        margin-left: 33.3333333333%
    }

    .grid__col--xxs-3 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-xxs-3 {
        margin-left: 50%
    }

    .grid__col--xxs-4 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-xxs-4 {
        margin-left: 66.6666666667%
    }

    .grid__col--xxs-5 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-xxs-5 {
        margin-left: 83.3333333333%
    }

    .grid__col--xxs-6 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-xxs-6 {
        margin-left: 100%
    }

    .grid__col--xxs {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-xxs {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-xxs {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-xxs {
        align-self: flex-start
    }

    .grid__col--middle-xxs {
        align-self: center
    }

    .grid__col--bottom-xxs {
        align-self: flex-end
    }

    .grid__col--original-xxs {
        order: 0
    }

    .grid__col--first-xxs {
        order: -1
    }

    .grid__col--last-xxs {
        order: 1
    }

    .grid--reverse-xxs {
        flex-direction: row-reverse
    }

    .grid--start-xxs {
        justify-content: flex-start
    }

    .grid--center-xxs {
        justify-content: center
    }

    .grid--end-xxs {
        justify-content: flex-end
    }

    .grid--top-xxs {
        align-items: flex-start
    }

    .grid--middle-xxs {
        align-items: center
    }

    .grid--bottom-xxs {
        align-items: flex-end
    }

    .grid--around-xxs {
        justify-content: space-around
    }

    .grid--between-xxs {
        justify-content: space-between
    }

    .grid--no-wrap-xxs {
        flex-wrap: nowrap
    }
}

@media only screen and (min-width: 768px) {
    .grid__col--sm-1 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-sm-1 {
        margin-left: 16.6666666667%
    }

    .grid__col--sm-2 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-sm-2 {
        margin-left: 33.3333333333%
    }

    .grid__col--sm-3 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-sm-3 {
        margin-left: 50%
    }

    .grid__col--sm-4 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-sm-4 {
        margin-left: 66.6666666667%
    }

    .grid__col--sm-5 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-sm-5 {
        margin-left: 83.3333333333%
    }

    .grid__col--sm-6 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-sm-6 {
        margin-left: 100%
    }

    .grid__col--sm {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-sm {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-sm {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-sm {
        align-self: flex-start
    }

    .grid__col--middle-sm {
        align-self: center
    }

    .grid__col--bottom-sm {
        align-self: flex-end
    }

    .grid__col--original-sm {
        order: 0
    }

    .grid__col--first-sm {
        order: -1
    }

    .grid__col--last-sm {
        order: 1
    }

    .grid--reverse-sm {
        flex-direction: row-reverse
    }

    .grid--start-sm {
        justify-content: flex-start
    }

    .grid--center-sm {
        justify-content: center
    }

    .grid--end-sm {
        justify-content: flex-end
    }

    .grid--top-sm {
        align-items: flex-start
    }

    .grid--middle-sm {
        align-items: center
    }

    .grid--bottom-sm {
        align-items: flex-end
    }

    .grid--around-sm {
        justify-content: space-around
    }

    .grid--between-sm {
        justify-content: space-between
    }

    .grid--no-wrap-sm {
        flex-wrap: nowrap
    }
}

@media only screen and (min-width: 1000px) {
    .grid__col--md-1 {
        order: 0;
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .grid__col--offset-md-1 {
        margin-left: 8.3333333333%
    }

    .grid__col--md-2 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-md-2 {
        margin-left: 16.6666666667%
    }

    .grid__col--md-3 {
        order: 0;
        flex-basis: 25%;
        max-width: 25%
    }

    .grid__col--offset-md-3 {
        margin-left: 25%
    }

    .grid__col--md-4 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-md-4 {
        margin-left: 33.3333333333%
    }

    .grid__col--md-5 {
        order: 0;
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .grid__col--offset-md-5 {
        margin-left: 41.6666666667%
    }

    .grid__col--md-6 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-md-6 {
        margin-left: 50%
    }

    .grid__col--md-7 {
        order: 0;
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .grid__col--offset-md-7 {
        margin-left: 58.3333333333%
    }

    .grid__col--md-8 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-md-8 {
        margin-left: 66.6666666667%
    }

    .grid__col--md-9 {
        order: 0;
        flex-basis: 75%;
        max-width: 75%
    }

    .grid__col--offset-md-9 {
        margin-left: 75%
    }

    .grid__col--md-10 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-md-10 {
        margin-left: 83.3333333333%
    }

    .grid__col--md-11 {
        order: 0;
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .grid__col--offset-md-11 {
        margin-left: 91.6666666667%
    }

    .grid__col--md-12 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-md-12 {
        margin-left: 100%
    }

    .grid__col--md {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-md {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-md {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-md {
        align-self: flex-start
    }

    .grid__col--middle-md {
        align-self: center
    }

    .grid__col--bottom-md {
        align-self: flex-end
    }

    .grid__col--original-md {
        order: 0
    }

    .grid__col--first-md {
        order: -1
    }

    .grid__col--last-md {
        order: 1
    }

    .grid--reverse-md {
        flex-direction: row-reverse
    }

    .grid--start-md {
        justify-content: flex-start
    }

    .grid--center-md {
        justify-content: center
    }

    .grid--end-md {
        justify-content: flex-end
    }

    .grid--top-md {
        align-items: flex-start
    }

    .grid--middle-md {
        align-items: center
    }

    .grid--bottom-md {
        align-items: flex-end
    }

    .grid--around-md {
        justify-content: space-around
    }

    .grid--between-md {
        justify-content: space-between
    }

    .grid--no-wrap-md {
        flex-wrap: nowrap
    }
}

@media only screen and (min-width: 1200px) {
    .grid__col--lg-1 {
        order: 0;
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .grid__col--offset-lg-1 {
        margin-left: 8.3333333333%
    }

    .grid__col--lg-2 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-lg-2 {
        margin-left: 16.6666666667%
    }

    .grid__col--lg-3 {
        order: 0;
        flex-basis: 25%;
        max-width: 25%
    }

    .grid__col--offset-lg-3 {
        margin-left: 25%
    }

    .grid__col--lg-4 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-lg-4 {
        margin-left: 33.3333333333%
    }

    .grid__col--lg-5 {
        order: 0;
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .grid__col--offset-lg-5 {
        margin-left: 41.6666666667%
    }

    .grid__col--lg-6 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-lg-6 {
        margin-left: 50%
    }

    .grid__col--lg-7 {
        order: 0;
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .grid__col--offset-lg-7 {
        margin-left: 58.3333333333%
    }

    .grid__col--lg-8 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-lg-8 {
        margin-left: 66.6666666667%
    }

    .grid__col--lg-9 {
        order: 0;
        flex-basis: 75%;
        max-width: 75%
    }

    .grid__col--offset-lg-9 {
        margin-left: 75%
    }

    .grid__col--lg-10 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-lg-10 {
        margin-left: 83.3333333333%
    }

    .grid__col--lg-11 {
        order: 0;
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .grid__col--offset-lg-11 {
        margin-left: 91.6666666667%
    }

    .grid__col--lg-12 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-lg-12 {
        margin-left: 100%
    }

    .grid__col--lg {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-lg {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-lg {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-lg {
        align-self: flex-start
    }

    .grid__col--middle-lg {
        align-self: center
    }

    .grid__col--bottom-lg {
        align-self: flex-end
    }

    .grid__col--original-lg {
        order: 0
    }

    .grid__col--first-lg {
        order: -1
    }

    .grid__col--last-lg {
        order: 1
    }

    .grid--reverse-lg {
        flex-direction: row-reverse
    }

    .grid--start-lg {
        justify-content: flex-start
    }

    .grid--center-lg {
        justify-content: center
    }

    .grid--end-lg {
        justify-content: flex-end
    }

    .grid--top-lg {
        align-items: flex-start
    }

    .grid--middle-lg {
        align-items: center
    }

    .grid--bottom-lg {
        align-items: flex-end
    }

    .grid--around-lg {
        justify-content: space-around
    }

    .grid--between-lg {
        justify-content: space-between
    }

    .grid--no-wrap-lg {
        flex-wrap: nowrap
    }
}

@media only screen and (min-width: 1400px) {
    .grid__col--xl-1 {
        order: 0;
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .grid__col--offset-xl-1 {
        margin-left: 8.3333333333%
    }

    .grid__col--xl-2 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-xl-2 {
        margin-left: 16.6666666667%
    }

    .grid__col--xl-3 {
        order: 0;
        flex-basis: 25%;
        max-width: 25%
    }

    .grid__col--offset-xl-3 {
        margin-left: 25%
    }

    .grid__col--xl-4 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-xl-4 {
        margin-left: 33.3333333333%
    }

    .grid__col--xl-5 {
        order: 0;
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .grid__col--offset-xl-5 {
        margin-left: 41.6666666667%
    }

    .grid__col--xl-6 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-xl-6 {
        margin-left: 50%
    }

    .grid__col--xl-7 {
        order: 0;
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .grid__col--offset-xl-7 {
        margin-left: 58.3333333333%
    }

    .grid__col--xl-8 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-xl-8 {
        margin-left: 66.6666666667%
    }

    .grid__col--xl-9 {
        order: 0;
        flex-basis: 75%;
        max-width: 75%
    }

    .grid__col--offset-xl-9 {
        margin-left: 75%
    }

    .grid__col--xl-10 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-xl-10 {
        margin-left: 83.3333333333%
    }

    .grid__col--xl-11 {
        order: 0;
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .grid__col--offset-xl-11 {
        margin-left: 91.6666666667%
    }

    .grid__col--xl-12 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-xl-12 {
        margin-left: 100%
    }

    .grid__col--xl {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-xl {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-xl {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-xl {
        align-self: flex-start
    }

    .grid__col--middle-xl {
        align-self: center
    }

    .grid__col--bottom-xl {
        align-self: flex-end
    }

    .grid__col--original-xl {
        order: 0
    }

    .grid__col--first-xl {
        order: -1
    }

    .grid__col--last-xl {
        order: 1
    }

    .grid--reverse-xl {
        flex-direction: row-reverse
    }

    .grid--start-xl {
        justify-content: flex-start
    }

    .grid--center-xl {
        justify-content: center
    }

    .grid--end-xl {
        justify-content: flex-end
    }

    .grid--top-xl {
        align-items: flex-start
    }

    .grid--middle-xl {
        align-items: center
    }

    .grid--bottom-xl {
        align-items: flex-end
    }

    .grid--around-xl {
        justify-content: space-around
    }

    .grid--between-xl {
        justify-content: space-between
    }

    .grid--no-wrap-xl {
        flex-wrap: nowrap
    }
}

@media only screen and (min-width: 1800px) {
    .grid__col--xxl-1 {
        order: 0;
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .grid__col--offset-xxl-1 {
        margin-left: 8.3333333333%
    }

    .grid__col--xxl-2 {
        order: 0;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .grid__col--offset-xxl-2 {
        margin-left: 16.6666666667%
    }

    .grid__col--xxl-3 {
        order: 0;
        flex-basis: 25%;
        max-width: 25%
    }

    .grid__col--offset-xxl-3 {
        margin-left: 25%
    }

    .grid__col--xxl-4 {
        order: 0;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .grid__col--offset-xxl-4 {
        margin-left: 33.3333333333%
    }

    .grid__col--xxl-5 {
        order: 0;
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .grid__col--offset-xxl-5 {
        margin-left: 41.6666666667%
    }

    .grid__col--xxl-6 {
        order: 0;
        flex-basis: 50%;
        max-width: 50%
    }

    .grid__col--offset-xxl-6 {
        margin-left: 50%
    }

    .grid__col--xxl-7 {
        order: 0;
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .grid__col--offset-xxl-7 {
        margin-left: 58.3333333333%
    }

    .grid__col--xxl-8 {
        order: 0;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .grid__col--offset-xxl-8 {
        margin-left: 66.6666666667%
    }

    .grid__col--xxl-9 {
        order: 0;
        flex-basis: 75%;
        max-width: 75%
    }

    .grid__col--offset-xxl-9 {
        margin-left: 75%
    }

    .grid__col--xxl-10 {
        order: 0;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .grid__col--offset-xxl-10 {
        margin-left: 83.3333333333%
    }

    .grid__col--xxl-11 {
        order: 0;
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .grid__col--offset-xxl-11 {
        margin-left: 91.6666666667%
    }

    .grid__col--xxl-12 {
        order: 0;
        flex-basis: 100%;
        max-width: 100%
    }

    .grid__col--offset-xxl-12 {
        margin-left: 100%
    }

    .grid__col--xxl {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--min-xxl {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        max-width: 100%
    }

    .grid__col--max-xxl {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto
    }

    .grid__col--top-xxl {
        align-self: flex-start
    }

    .grid__col--middle-xxl {
        align-self: center
    }

    .grid__col--bottom-xxl {
        align-self: flex-end
    }

    .grid__col--original-xxl {
        order: 0
    }

    .grid__col--first-xxl {
        order: -1
    }

    .grid__col--last-xxl {
        order: 1
    }

    .grid--reverse-xxl {
        flex-direction: row-reverse
    }

    .grid--start-xxl {
        justify-content: flex-start
    }

    .grid--center-xxl {
        justify-content: center
    }

    .grid--end-xxl {
        justify-content: flex-end
    }

    .grid--top-xxl {
        align-items: flex-start
    }

    .grid--middle-xxl {
        align-items: center
    }

    .grid--bottom-xxl {
        align-items: flex-end
    }

    .grid--around-xxl {
        justify-content: space-around
    }

    .grid--between-xxl {
        justify-content: space-between
    }

    .grid--no-wrap-xxl {
        flex-wrap: nowrap
    }
}

.calculator-page {
    position: relative;
    height: 100%
}

@media only screen and (min-width: 1000px) {
    .calculator-page {
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
}

.calculator-page__timeline {
    padding: 32px 0;
    margin: 0 -24px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__timeline {
        padding: 0 0 32px;
        margin: 0 -90px
    }
}

.calculator-page__icon {
    margin-bottom: 16px;
    font-size: 30px;
    color: #89cdb8
}

@media only screen and (min-width: 1000px) {
    .calculator-page__icon {
        margin-bottom: 24px
    }
}

.calculator-page__description {
    margin-top: 24px
}

.calculator-page__body {
    display: block;
    width: 100%
}

.calculator-page__fields {
    width: 100%;
    max-width: 680px;
    margin: 0 auto
}

@media only screen and (min-width: 1000px) {
    .calculator-page__field {
        display: flex;
        flex-direction: row
    }
}

.calculator-page__field + .calculator-page__field {
    margin-top: 48px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__field + .calculator-page__field {
        margin-top: 34px
    }
}

.calculator-page__field .fieldset__label, .calculator-page__field .choice-group__label {
    width: 100%
}

@media only screen and (min-width: 1000px) {
    .calculator-page__field .fieldset__label, .calculator-page__field .choice-group__label {
        flex-shrink: 0;
        width: 45%;
        padding-right: 76px
    }
}

.calculator-page__results-empty {
    text-align: center
}

.calculator-page__results-col {
    margin-bottom: 36px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__results-col {
        margin-bottom: 36px
    }
}

.calculator-page__footer {
    padding: 24px 0;
    pointer-events: auto;
    z-index: 1;
    position: sticky;
    bottom: 0;
    background-color: #fff
}

@media only screen and (min-width: 1000px) {
    .calculator-page__footer {
        display: flex;
        align-items: center;
        padding: 24px 0;
        border-top: 1px solid #154c54;
        background-color: #fff
    }
}

.calculator-page__buttons {
    padding-top: 8px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__buttons {
        display: flex;
        padding-top: 0;
        padding-left: 24px
    }
}

@media only screen and (min-width: 1000px) {
    .calculator__page--results .calculator-page__buttons {
        margin-left: auto
    }
}

.calculator-page__button + .calculator-page__button {
    margin-top: 8px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__button + .calculator-page__button {
        margin-top: 0;
        margin-left: 24px
    }
}

.calculator-page__image {
    margin-top: 48px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__image {
        display: none
    }
}

.calculator {
    position: relative;
    padding-right: 0;
    padding-left: 0
}

.calculator.is-loading .calculator__page {
    opacity: .2;
    pointer-events: none
}

.calculator__overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(255, 255, 255, .2);
    transition-property: opacity, z-index;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.calculator.is-loading .calculator__overlay {
    z-index: 2;
    opacity: 1
}

.calculator__overlay-spinner {
    font-size: 40px
}

.h-hidden {
    display: none;
}

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

.spinner {
    width: 1em;
    height: 1em
}

.spinner__circle {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: center center;
    -webkit-animation: spinnerRotate 2000ms linear infinite;
    animation: spinnerRotate 2000ms linear infinite
}

.spinner__path {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 5px;
    stroke-miterlimit: 10;
    stroke: currentColor;
    -webkit-animation: spinnerDash 1500ms ease-in-out infinite;
    animation: spinnerDash 1500ms ease-in-out infinite
}


.choice-group__label {
    margin-bottom: 8px
}

@media only screen and (min-width: 1000px) {
    .choice-group__label {
        display: inline-flex;
        align-items: center
    }
}

.choice-group__label-text {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    color: #154c54
}

.choice-group.is-invalid .choice-group__label-text {
    color: #ca4e69
}

.choice-group__label-tooltip {
    margin-left: 5px
}

@media only screen and (min-width: 1000px) {
    .choice-group__label-tooltip {
        margin-left: 10px
    }
}

@media only screen and (min-width: 1000px) {
    .choice-group--horizontal .choice-group__inner {
        display: flex;
        align-items: center
    }
}

.choice-group:not(.choice-group--horizontal) .choice-group__item + .choice-group__item {
    margin-top: 16px
}

.choice-group--horizontal .choice-group__item + .choice-group__item {
    margin-top: 16px
}

@media only screen and (min-width: 1000px) {
    .choice-group--horizontal .choice-group__item + .choice-group__item {
        margin-top: 0;
        margin-left: 16px
    }
}

.choice-group__error {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #ca4e69;
    font-size: 12px;
    line-height: 1.2
}

.choice-group__description {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #154c54;
    font-size: 12px;
    line-height: 1.2
}

.fieldset__label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px
}

.fieldset.is-invalid .fieldset__label {
    color: #ca4e69
}

.fieldset__label-text {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    color: #154c54
}

.fieldset.is-invalid .fieldset__label-text {
    color: #ca4e69
}

.fieldset__label-modal-button, .fieldset__label-tooltip {
    margin-left: 5px;
    font-size: 22px;
    color: #83878f
}

@media only screen and (min-width: 1000px) {
    .fieldset__label-modal-button, .fieldset__label-tooltip {
        margin-left: 10px
    }
}

.fieldset__label-modal-button {
    display: inline-flex;
    vertical-align: sub
}

.fieldset__fields {
    width: 100%
}

@media only screen and (min-width: 1000px) {
    .fieldset--horizontal .fieldset__fields {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }
}

@media only screen and (min-width: 1000px) {
    .fieldset__field {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }
}

.fieldset__field + .fieldset__field {
    margin-top: 8px
}

@media only screen and (min-width: 1000px) {
    .fieldset--horizontal .fieldset__field + .fieldset__field {
        margin-top: 0;
        margin-left: 16px
    }
}

@media only screen and (min-width: 1000px) {
    .fieldset__input {
        max-width: 190px
    }
}

.fieldset__input + .fieldset__input {
    margin-top: 8px
}

@media only screen and (min-width: 1000px) {
    .fieldset__input + .fieldset__input {
        margin-top: 0;
        margin-left: 16px
    }
}

.fieldset__error {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #ca4e69;
    font-size: 12px;
    line-height: 1.2
}

.fieldset__description {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #154c54;
    font-size: 12px;
    line-height: 1.2
}

.fieldset__modal-trigger {
    margin-left: 8px;
    height: 24px
}

.fieldset__modal-trigger-icon {
    color: #154c54;
    font-size: 24px
}

.radio {
    position: relative
}

.radio__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.radio__label {
    display: inline-block;
    padding-left: 28px
}

.radio__input:disabled ~ .radio__label {
    opacity: .2;
    cursor: not-allowed
}

.radio__text {
    font-weight: 700;
    color: #154c54
}

.radio__indicator {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid #83878f;
    border-radius: 50%;
    background-color: #eff1f6;
    transition-property: border-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

@media only screen and (min-width: 1000px) {
    .radio__indicator {
        top: 4px
    }
}

.radio__indicator:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #83878f;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition-property: background-color, opacity;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

html[data-whatinput=keyboard] .radio__input:not(:disabled):not(:checked):focus + .radio__label .radio__indicator, .radio__input:not(:disabled):not(:checked) + .radio__label:hover .radio__indicator {
    border-color: #89cdb8
}

html[data-whatinput=keyboard] .radio__input:not(:disabled):not(:checked):focus + .radio__label .radio__indicator:before, .radio__input:not(:disabled):not(:checked) + .radio__label:hover .radio__indicator:before {
    background: #83878f;
    opacity: 1
}

.radio__input:checked + .radio__label .radio__indicator {
    border-color: #83878f
}

.radio__input:checked + .radio__label .radio__indicator:before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    opacity: 1;
    background-color: #154c54
}


.textfield {
    position: relative;
    width: 100%
}

.textfield.is-disabled {
    opacity: .2
}

.textfield__inner {
    position: relative
}

.textfield__label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    text-align: center
}

@media only screen and (min-width: 1000px) {
    .textfield__label {
        font-size: 18px;
        line-height: 1.8;
        text-align: left
    }
}

.textfield__input {
    display: block;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    color: #154c54;
    border: 2px solid #e2e9f2;
    border-radius: 8px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 300ms ease
}

@media only screen and (min-width: 1000px) {
    .textfield__input {
        text-align: left
    }
}

.textfield__input::-webkit-outer-spin-button, .textfield__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.textfield__input[type=number] {
    -moz-appearance: textfield
}

.textfield__input::-ms-clear {
    display: none
}

.textfield__input::-moz-placeholder {
    color: #83878f;
    font-weight: 700
}

.textfield__input:-ms-input-placeholder {
    color: #83878f;
    font-weight: 700
}

.textfield__input::placeholder {
    color: #83878f;
    font-weight: 700
}

.textfield.is-invalid .textfield__input::-moz-placeholder {
    color: #ca4e69
}

.textfield.is-invalid .textfield__input:-ms-input-placeholder {
    color: #ca4e69
}

.textfield.is-invalid .textfield__input::placeholder {
    color: #ca4e69
}

.textfield__input:hover, .textfield__input:focus {
    outline: none;
    border-color: #89cdb8
}

.textfield__input:active {
    border-color: #154c54
}

.textfield.is-invalid .textfield__input {
    color: #ca4e69;
    border-color: #ca4e69
}

.textfield.is-disabled .textfield__input {
    background-color: transparent;
    outline: none;
    border-color: #e2e9f2
}

.textfield--large .textfield__input {
    height: 64px;
    padding: 0 24px
}

.textfield--icon-left .textfield__input {
    text-align: left;
    padding-left: 40px;
    padding-right: 16px
}

.textfield--icon-right .textfield__input {
    text-align: left;
    padding-left: 16px;
    padding-right: 40px
}

.textfield--large.textfield--icon-left .textfield__input {
    padding-left: 60px;
    padding-right: 24px
}

.textfield--large.textfield--icon-right .textfield__input {
    padding-left: 24px;
    padding-right: 60px
}

.textfield__icon {
    position: absolute;
    top: 13px;
    font-size: 24px;
    pointer-events: none
}

.textfield.is-invalid .textfield__icon {
    color: #ca4e69
}

.textfield--large .textfield__icon {
    top: 20px
}

.textfield--icon-left .textfield__icon {
    left: 8px
}

.textfield--icon-right .textfield__icon {
    right: 8px
}

.textfield--large.textfield--icon-left .textfield__icon {
    left: 24px
}

.textfield--large.textfield--icon-right .textfield__icon {
    right: 24px
}

.textfield__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: #ca4e69
}

.textfield__description {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.33;
    color: #154c54
}

.textarea__input {
    display: block;
    padding: 16px;
    height: 112px;
    text-align: left;
    resize: vertical;
    overflow: auto
}

@media only screen and (min-width: 1000px) {
    .textarea__input {
        height: 166px
    }
}

.timeline {
    position: relative;
    color: #154c54;
    display: flex;
    margin-bottom: 0;
    z-index: 1;
}

.timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1;
    min-height: 38px;
    height: auto;
    margin-bottom: 0;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.timeline__item.timeline__item--todo {
    color: #154c54
}

.timeline__item + .timeline__item:before {
    content: "";
    position: absolute;
    background-color: #89cdb8;
    top: 12.5px;
    right: 50%;
    left: auto;
    bottom: auto;
    width: calc(100% - 4px);
    height: 2px;
    z-index: -1
}

.timeline__item.timeline__item--finished + .timeline__item:before {
    background-color: #154c54
}

.timeline__item-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.timeline__item-title {
    color: #154c54;
    font-size: 16px;
    line-heighT: 21px;
    margin-top: auto;
    display: none
}

.timeline__item--todo .timeline__item-title {
    color: #154c54
}

@media only screen and (min-width: 1000px) {
    .timeline__item-title {
        display: block;
        text-align: center
    }
}

.timeline__item-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #89cdb8;
    border: 2px solid #fff;
    position: relative;
    left: auto;
    transition-property: margin, width, height;
    transition-duration: 1000ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

@media only screen and (min-width: 1000px) {
    .timeline__item-indicator {
        margin-bottom: 2px
    }
}

.timeline__item-indicator:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border: 1px solid transparent;
    border-radius: 50%
}

.timeline__item--todo .timeline__item-indicator:after {
    border-color: currentColor
}

.timeline__item--finished .timeline__item-indicator {
    background-color: #154c54
}

.timeline__item--todo .timeline__item-indicator {
    background-color: #fff
}

.timeline__item-icon {
    position: absolute;
    left: 2px;
    top: 2px;
    font-size: 20px;
    opacity: 0;
    color: #89cdb8;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.timeline__item--finished .timeline__item-icon {
    opacity: 1
}

.timeline__item-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    line-height: 24px;
    opacity: 0;
    color: #154c54;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.timeline__item--todo .timeline__item-number, .timeline__item--started .timeline__item-number {
    opacity: 1
}

.timeline__item-button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1
}

.timeline__item-button:disabled {
    cursor: not-allowed
}

.text p {
    margin-bottom: 1em;
}


.calculator-button {
    display: inline-block
}

.calculator-layout-results__main-title-wrapper {
    margin-bottom: 32px
}

.calculator-layout-results__content {
    margin-bottom: 40px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-results__content {
        margin-bottom: 80px
    }
}

.calculator-page__results-grid {
    margin-bottom: 32px
}

@media only screen and (min-width: 1000px) {
    .calculator-page__results-grid {
        margin-bottom: 48px
    }
}

.calculator-layout-results__summary {
    margin-bottom: 32px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-results__summary {
        margin-bottom: 48px
    }
}

.calculator-layout-results__title-wrapper {
    margin-bottom: 16px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-results__title-wrapper {
        margin-bottom: 48px
    }
}

.calculator-layout-results__disclaimer {
    color: #ca4e69;
    margin-top: 8px
}

.calculator-layout-start__title {
    margin-bottom: 32px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-start__title {
        margin-bottom: 40px
    }
}

.calculator-layout-start__buttons {
    margin: 24px 0
}

.calculator-layout-start__image {
    margin-top: 56px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-start__image {
        margin-top: 0
    }
}

.calculator-layout-step__left {
    margin-bottom: 32px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-step__left {
        margin-bottom: 64px
    }
}

.calculator-layout-step__title-wrapper {
    margin-bottom: 32px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-step__title-wrapper {
        margin-bottom: 48px
    }
}

.calculator-layout-step__description {
    margin: 8px 0
}

.calculator-layout-step__fields {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media only screen and (min-width: 1000px) {
    .calculator-layout-step__image {
        margin-bottom: 84px
    }
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor
}


.button__icon {
    font-size: 24px
}

.button--icon .button__icon {
    display: block;
    color: #154c54
}

.button--icon-left .button__icon, .button--icon-right .button__icon {
    display: inline-block;
    flex: 0 0 24px;
    font-size: 24px;
    color: #89cdb8
}

.button--loading.is-loading .button__icon {
    opacity: 0
}

.button--icon .button__text {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}

.button--icon-left .button__text {
    margin-left: 8px
}

.button--icon-right .button__text {
    margin-right: 8px
}

.button--loading.is-loading .button__text {
    opacity: 0
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center
}

.button--icon-right .button__inner {
    flex-direction: row-reverse
}

.button__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    margin-top: -0.5em;
    margin-left: -0.5em
}

.button--loading.is-loading .button__spinner {
    display: block
}


.results-summary {
    background-color: #f0f1f3;
    padding: 16px 8px
}

@media only screen and (min-width: 1000px) {
    .results-summary {
        padding: 16px
    }
}

.results-summary__title {
    margin-bottom: 16px
}

@media only screen and (min-width: 1000px) {
    .results-summary__title {
        margin-bottom: 24px
    }
}

.results-summary__section + .results-summary__section {
    margin-top: 32px
}

@media only screen and (min-width: 1000px) {
    .results-summary__section + .results-summary__section {
        margin-top: 48px
    }
}

@media only screen and (min-width: 1000px) {
    .results-summary__cols {
        display: flex;
        gap: 24px
    }
}

.results-summary__col {
    flex: 1 1 33.3%
}

.results-summary__col + .results-summary__col {
    margin-top: 8px
}

@media only screen and (min-width: 1000px) {
    .results-summary__col + .results-summary__col {
        margin-top: 0
    }
}

.results-summary__item {
    display: flex
}

.results-summary__item + .results-summary__item {
    margin-top: 8px
}

@media only screen and (min-width: 1000px) {
    .results-summary__item + .results-summary__item {
        margin-top: 0
    }
}

.results-summary__item-icon {
    color: #89cdb8;
    font-size: 24px;
    padding: 4px;
    flex-shrink: 0
}

@media only screen and (min-width: 1000px) {
    .results-summary__item-icon {
        margin-top: 3px
    }
}

.results-summary__item-value {
    white-space: nowrap
}

.results-summary__item-tooltip {
    display: inline-flex;
    vertical-align: sub;
    margin-left: 5px;
    font-size: 22px;
    line-height: 1;
    color: #83878f
}

@media only screen and (min-width: 1000px) {
    .results-summary__item-tooltip {
        margin-left: 10px
    }
}

.product {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    text-decoration: none
}

.product__inner {
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #eff1f6;
    transition-property: background-color;
    transition-duration: 500ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.product__hover-area:hover .product__inner {
    background-color: #e2e9f2
}

.product--small .product__inner {
    padding-top: 18px;
    padding-bottom: 18px
}

.product__image {
    transition-property: transform;
    transition-duration: 500ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    position: relative
}

.product__image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%
}

.product__image > .image__img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.product__hover-area:hover .product__image {
    transform: translateY(-8px)
}

.product__tag {
    position: absolute;
    top: 20px;
    right: 24px;
    padding: 4px 16px;
    font-weight: 700;
    border-radius: 40px;
    color: #fff;
    background-color: #89cdb8;
    z-index: 1
}

.product__button {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: none;
    opacity: 0;
    transform: translateY(4px);
    z-index: 3;
    transition: color 300ms, border-color 300ms, background-color 300ms, opacity 500ms, transform 500ms
}

@media only screen and (min-width: 1000px) {
    .product__button {
        display: block;
        opacity: 1
    }
}

@media only screen and (min-width: 1000px) {
    .product__hover-area:hover .product__button {
        transform: translateY(0)
    }
}

.product--small .product__button {
    top: 16px;
    right: 16px;
    bottom: auto;
    left: auto;
    display: block;
    opacity: 1;
    transform: none
}

.product__variations {
    z-index: 3
}

.product__variations:hover .variations__image {
    transform: none
}

.product__hover-area:hover .product__variations .variations__image {
    transform: translateY(-8px)
}

.product__awards {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    z-index: 3
}

.product--center .product__awards {
    justify-content: center
}

@media only screen and (min-width: 1000px) {
    .product--center .product__awards {
        justify-content: flex-start
    }
}

.product__link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2
}

.product__secondary-link {
    position: relative;
    display: inline-block;
    z-index: 2;
    transition-property: transform;
    transition-duration: 500ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.product__hover-area:hover ~ .product__secondary-link {
    transform: translateY(6px)
}

.product__title {
    display: flex;
    align-items: center;
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    transition-property: transform;
    transition-duration: 500ms;
    transition-timing-function: ease;
    transition-delay: 0ms
}

.product--center .product__title {
    justify-content: center
}

@media only screen and (min-width: 1000px) {
    .product__title {
        font-size: 20px
    }

    .product--center .product__title {
        justify-content: flex-start
    }
}

.product__hover-area:hover .product__title {
    transform: translateY(6px)
}

.product__title-icon {
    margin-left: 8px;
    font-size: 24px;
    color: #89cdb8
}

.product__resources {
    padding: 24px 16px;
    background-color: #fff
}

@media only screen and (min-width: 1000px) {
    .product__resources {
        padding: 32px 24px
    }
}

.product__scales {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.product--center .product__scales {
    align-items: center
}

@media only screen and (min-width: 1000px) {
    .product--center .product__scales {
        align-items: flex-start
    }
}

.calculator h1:not([class]),
.calculator .h1 {
    font-size: 28px;
    line-height: 1.2;
}

@media only screen and (min-width: 1000px) {
    .calculator h1:not([class]),
    .calculator .h1 {
        font-size: 44px
    }
}

.calculator h2:not([class]),
.calculator .h2 {
    font-size: 22px;
    line-height: 1.2
}

@media only screen and (min-width: 1000px) {
    .calculator h2:not([class]),
    .calculator .h2 {
        font-size: 36px
    }
}

.calculator h3:not([class]),
.calculator .h3 {
    font-size: 20px;
    line-height: 1.4;
}

@media only screen and (min-width: 1000px) {
    .calculator h3:not([class]),
    .calculator .h3 {
        font-size: 28px
    }
}

.calculator h4:not([class]),
.calculator .h4 {
    font-size: 18px;
    line-height: 1.4;
}

@media only screen and (min-width: 1000px) {
    .calculator h4:not([class]),
    .calculator .h4 {
        font-size: 22px
    }
}

.calculator .bold {
    font-weight: 700;
}

.calculator .text-extra-small {
    font-size: 10px;
    line-height: 1.3
}

@media only screen and (min-width: 1000px) {
    .calculator .text-extra-small {
        font-size:14px;
        line-height: 1.3
    }
}

.calculator small,
.calculator .text-small {
    font-size: 12px;
    line-height: 1.3
}

@media only screen and (min-width: 1000px) {
    .calculator small,
    .calculator .text-small {
        font-size:16px;
        line-height: 1.3
    }
}

.calculator .text-medium {
    font-size: 16px;
    line-height: 1.8
}

@media only screen and (min-width: 1000px) {
    .calculator .text-medium {
        font-size:20px;
        line-height: 1.8
    }
}

.calculator .text-large {
    font-size: 20px;
    line-height: 1.3
}

@media only screen and (min-width: 1000px) {
    .calculator .text-large {
        font-size:22px;
        line-height: 1.3
    }
}

.calculator .text-extra-large {
    font-size: 20px;
    line-height: 1.3
}

@media only screen and (min-width: 1000px) {
    .calculator .text-extra-large {
        font-size:36px;
        line-height: 1.3
    }
}

.product-pdf__scale-bar,
.scale__bar {
    position: relative;
}

.product-pdf__scale-text,
.scale__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    height: 16px;
    border-radius: 100px;
    background: #f0f1f3;
    color: #154c54;
    white-space: nowrap;
    border: 1px solid #154c54;
    padding: 0 4px;
}

.product-pdf__scale-text {
    margin-top: -1px;
    margin-left: -5px;
}

.scale__upper-text {
    font-weight: 700;
    text-align: center;
}

.product__scale .scale__upper-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.product-detail__scale .scale__wrapper {
    position: relative;
}

.scale__side {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 500px) {
    .product-detail__scale .scale__side {
        position: absolute;
        bottom: 0;
        left: 100%;
        margin-left: 10px;
        line-height: 30px;
    }
}

.choice-group__modal-trigger {
    margin-left: 8px;
    height: 24px
}

.choice-group__modal-trigger-icon {
    color: #154c54;
    font-size: 24px
}

.calculator-layout-results__message {
    margin-top: 8px;
}

.tooltip__trigger {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent
}

.tooltip__icon {
    display: block;
    font-size: 24px;
    color: #83878f
}