@import url('fonts/Rooster-v3.css');
@import url('fonts/Howdens.css');



/* For links with PDF download - not required in CSS, just for reference

a[href*=".pdf"]::before {
    content: "\f019";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    background: #5CA41E;
    padding: .5rem;
    margin-right: 5px;
    color: #fff;
}
*/

a[href*="webcasting"]::before {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    background: #5CA41E;
    padding: .5rem;
    margin-right: 5px;
    color: #fff;
}

.grid-container {
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
    max-width: 94.25rem;
    margin: 0 auto
}

@media print, screen and (min-width: 30.0625em) {
    .grid-container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

.grid-container.fluid {
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
    max-width: 100%;
    margin: 0 auto
}

@media print, screen and (min-width: 30.0625em) {
    .grid-container.fluid {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-container.fluid {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-container.fluid {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

.grid-container.full {
    padding-right: 0;
    padding-left: 0;
    max-width: 100%;
    margin: 0 auto
}

.grid-x {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.cell {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: 100%
}

    .cell.auto {
        -ms-flex: 1 1 0px;
        flex: 1 1 0px
    }

    .cell.shrink {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

.grid-x > .auto {
    width: auto
}

.grid-x > .shrink {
    width: auto
}

.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
    -ms-flex-preferred-size: auto;
    flex-basis: auto
}

@media print, screen and (min-width: 48em) {
    .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }
}

@media print, screen and (min-width: 64em) {
    .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }
}

.grid-x > .small-1 {
    width: 8.3333333333%
}

.grid-x > .small-2 {
    width: 16.6666666667%
}

.grid-x > .small-3 {
    width: 25%
}

.grid-x > .small-4 {
    width: 33.3333333333%
}

.grid-x > .small-5 {
    width: 41.6666666667%
}

.grid-x > .small-6 {
    width: 50%
}

.grid-x > .small-7 {
    width: 58.3333333333%
}

.grid-x > .small-8 {
    width: 66.6666666667%
}

.grid-x > .small-9 {
    width: 75%
}

.grid-x > .small-10 {
    width: 83.3333333333%
}

.grid-x > .small-11 {
    width: 91.6666666667%
}

.grid-x > .small-12 {
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .grid-x > .medium-auto {
        -ms-flex: 1 1 0px;
        flex: 1 1 0px;
        width: auto
    }

    .grid-x > .medium-shrink {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .grid-x > .medium-1 {
        width: 8.3333333333%
    }

    .grid-x > .medium-2 {
        width: 16.6666666667%
    }

    .grid-x > .medium-3 {
        width: 25%
    }

    .grid-x > .medium-4 {
        width: 33.3333333333%
    }

    .grid-x > .medium-5 {
        width: 41.6666666667%
    }

    .grid-x > .medium-6 {
        width: 50%
    }

    .grid-x > .medium-7 {
        width: 58.3333333333%
    }

    .grid-x > .medium-8 {
        width: 66.6666666667%
    }

    .grid-x > .medium-9 {
        width: 75%
    }

    .grid-x > .medium-10 {
        width: 83.3333333333%
    }

    .grid-x > .medium-11 {
        width: 91.6666666667%
    }

    .grid-x > .medium-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .grid-x > .large-auto {
        -ms-flex: 1 1 0px;
        flex: 1 1 0px;
        width: auto
    }

    .grid-x > .large-shrink {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .grid-x > .large-1 {
        width: 8.3333333333%
    }

    .grid-x > .large-2 {
        width: 16.6666666667%
    }

    .grid-x > .large-3 {
        width: 25%
    }

    .grid-x > .large-4 {
        width: 33.3333333333%
    }

    .grid-x > .large-5 {
        width: 41.6666666667%
    }

    .grid-x > .large-6 {
        width: 50%
    }

    .grid-x > .large-7 {
        width: 58.3333333333%
    }

    .grid-x > .large-8 {
        width: 66.6666666667%
    }

    .grid-x > .large-9 {
        width: 75%
    }

    .grid-x > .large-10 {
        width: 83.3333333333%
    }

    .grid-x > .large-11 {
        width: 91.6666666667%
    }

    .grid-x > .large-12 {
        width: 100%
    }
}

.grid-margin-x:not(.grid-x) > .cell {
    width: auto
}

.grid-margin-y:not(.grid-y) > .cell {
    height: auto
}

.grid-margin-x {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-margin-x {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-x {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.grid-margin-x > .cell {
    width: calc(100% - 1.4375rem);
    margin-left: .71875rem;
    margin-right: .71875rem
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x > .cell {
        width: calc(100% - 1.5rem);
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-x > .cell {
        width: calc(100% - 1.75rem);
        margin-left: .875rem;
        margin-right: .875rem
    }
}

.grid-margin-x > .auto {
    width: auto
}

.grid-margin-x > .shrink {
    width: auto
}

.grid-margin-x > .small-1 {
    width: calc(8.3333333333% - 1.4375rem)
}

.grid-margin-x > .small-2 {
    width: calc(16.6666666667% - 1.4375rem)
}

.grid-margin-x > .small-3 {
    width: calc(25% - 1.4375rem)
}

.grid-margin-x > .small-4 {
    width: calc(33.3333333333% - 1.4375rem)
}

.grid-margin-x > .small-5 {
    width: calc(41.6666666667% - 1.4375rem)
}

.grid-margin-x > .small-6 {
    width: calc(50% - 1.4375rem)
}

.grid-margin-x > .small-7 {
    width: calc(58.3333333333% - 1.4375rem)
}

.grid-margin-x > .small-8 {
    width: calc(66.6666666667% - 1.4375rem)
}

.grid-margin-x > .small-9 {
    width: calc(75% - 1.4375rem)
}

.grid-margin-x > .small-10 {
    width: calc(83.3333333333% - 1.4375rem)
}

.grid-margin-x > .small-11 {
    width: calc(91.6666666667% - 1.4375rem)
}

.grid-margin-x > .small-12 {
    width: calc(100% - 1.4375rem)
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x > .auto {
        width: auto
    }

    .grid-margin-x > .shrink {
        width: auto
    }

    .grid-margin-x > .small-1 {
        width: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-x > .small-2 {
        width: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-x > .small-3 {
        width: calc(25% - 1.5rem)
    }

    .grid-margin-x > .small-4 {
        width: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-x > .small-5 {
        width: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-x > .small-6 {
        width: calc(50% - 1.5rem)
    }

    .grid-margin-x > .small-7 {
        width: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-x > .small-8 {
        width: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-x > .small-9 {
        width: calc(75% - 1.5rem)
    }

    .grid-margin-x > .small-10 {
        width: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-x > .small-11 {
        width: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-x > .small-12 {
        width: calc(100% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-auto {
        width: auto
    }

    .grid-margin-x > .smalllandscape-shrink {
        width: auto
    }

    .grid-margin-x > .smalllandscape-1 {
        width: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-2 {
        width: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-3 {
        width: calc(25% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-4 {
        width: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-5 {
        width: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-6 {
        width: calc(50% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-7 {
        width: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-8 {
        width: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-9 {
        width: calc(75% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-10 {
        width: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-11 {
        width: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-x > .smalllandscape-12 {
        width: calc(100% - 1.5rem)
    }

    .grid-margin-x > .medium-auto {
        width: auto
    }

    .grid-margin-x > .medium-shrink {
        width: auto
    }

    .grid-margin-x > .medium-1 {
        width: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-x > .medium-2 {
        width: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-x > .medium-3 {
        width: calc(25% - 1.5rem)
    }

    .grid-margin-x > .medium-4 {
        width: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-x > .medium-5 {
        width: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-x > .medium-6 {
        width: calc(50% - 1.5rem)
    }

    .grid-margin-x > .medium-7 {
        width: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-x > .medium-8 {
        width: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-x > .medium-9 {
        width: calc(75% - 1.5rem)
    }

    .grid-margin-x > .medium-10 {
        width: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-x > .medium-11 {
        width: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-x > .medium-12 {
        width: calc(100% - 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-x > .auto {
        width: auto
    }

    .grid-margin-x > .shrink {
        width: auto
    }

    .grid-margin-x > .small-1 {
        width: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-x > .small-2 {
        width: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-x > .small-3 {
        width: calc(25% - 1.75rem)
    }

    .grid-margin-x > .small-4 {
        width: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-x > .small-5 {
        width: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-x > .small-6 {
        width: calc(50% - 1.75rem)
    }

    .grid-margin-x > .small-7 {
        width: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-x > .small-8 {
        width: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-x > .small-9 {
        width: calc(75% - 1.75rem)
    }

    .grid-margin-x > .small-10 {
        width: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-x > .small-11 {
        width: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-x > .small-12 {
        width: calc(100% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-auto {
        width: auto
    }

    .grid-margin-x > .smalllandscape-shrink {
        width: auto
    }

    .grid-margin-x > .smalllandscape-1 {
        width: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-2 {
        width: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-3 {
        width: calc(25% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-4 {
        width: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-5 {
        width: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-6 {
        width: calc(50% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-7 {
        width: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-8 {
        width: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-9 {
        width: calc(75% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-10 {
        width: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-11 {
        width: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-x > .smalllandscape-12 {
        width: calc(100% - 1.75rem)
    }

    .grid-margin-x > .medium-auto {
        width: auto
    }

    .grid-margin-x > .medium-shrink {
        width: auto
    }

    .grid-margin-x > .medium-1 {
        width: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-x > .medium-2 {
        width: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-x > .medium-3 {
        width: calc(25% - 1.75rem)
    }

    .grid-margin-x > .medium-4 {
        width: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-x > .medium-5 {
        width: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-x > .medium-6 {
        width: calc(50% - 1.75rem)
    }

    .grid-margin-x > .medium-7 {
        width: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-x > .medium-8 {
        width: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-x > .medium-9 {
        width: calc(75% - 1.75rem)
    }

    .grid-margin-x > .medium-10 {
        width: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-x > .medium-11 {
        width: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-x > .medium-12 {
        width: calc(100% - 1.75rem)
    }

    .grid-margin-x > .large-auto {
        width: auto
    }

    .grid-margin-x > .large-shrink {
        width: auto
    }

    .grid-margin-x > .large-1 {
        width: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-x > .large-2 {
        width: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-x > .large-3 {
        width: calc(25% - 1.75rem)
    }

    .grid-margin-x > .large-4 {
        width: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-x > .large-5 {
        width: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-x > .large-6 {
        width: calc(50% - 1.75rem)
    }

    .grid-margin-x > .large-7 {
        width: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-x > .large-8 {
        width: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-x > .large-9 {
        width: calc(75% - 1.75rem)
    }

    .grid-margin-x > .large-10 {
        width: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-x > .large-11 {
        width: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-x > .large-12 {
        width: calc(100% - 1.75rem)
    }
}

.grid-padding-x .grid-padding-x {
    margin-right: -.71875rem;
    margin-left: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-padding-x .grid-padding-x {
        margin-right: -.71875rem;
        margin-left: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-padding-x .grid-padding-x {
        margin-right: -.75rem;
        margin-left: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-padding-x .grid-padding-x {
        margin-right: -.875rem;
        margin-left: -.875rem
    }
}

.grid-container:not(.full) > .grid-padding-x {
    margin-right: -.71875rem;
    margin-left: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-container:not(.full) > .grid-padding-x {
        margin-right: -.71875rem;
        margin-left: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-container:not(.full) > .grid-padding-x {
        margin-right: -.75rem;
        margin-left: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-container:not(.full) > .grid-padding-x {
        margin-right: -.875rem;
        margin-left: -.875rem
    }
}

.grid-padding-x > .cell {
    padding-right: .71875rem;
    padding-left: .71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-padding-x > .cell {
        padding-right: .71875rem;
        padding-left: .71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-padding-x > .cell {
        padding-right: .75rem;
        padding-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-padding-x > .cell {
        padding-right: .875rem;
        padding-left: .875rem
    }
}

.small-up-1 > .cell {
    width: 100%
}

.small-up-2 > .cell {
    width: 50%
}

.small-up-3 > .cell {
    width: 33.3333333333%
}

.small-up-4 > .cell {
    width: 25%
}

.small-up-5 > .cell {
    width: 20%
}

.small-up-6 > .cell {
    width: 16.6666666667%
}

.small-up-7 > .cell {
    width: 14.2857142857%
}

.small-up-8 > .cell {
    width: 12.5%
}

@media print, screen and (min-width: 48em) {
    .medium-up-1 > .cell {
        width: 100%
    }

    .medium-up-2 > .cell {
        width: 50%
    }

    .medium-up-3 > .cell {
        width: 33.3333333333%
    }

    .medium-up-4 > .cell {
        width: 25%
    }

    .medium-up-5 > .cell {
        width: 20%
    }

    .medium-up-6 > .cell {
        width: 16.6666666667%
    }

    .medium-up-7 > .cell {
        width: 14.2857142857%
    }

    .medium-up-8 > .cell {
        width: 12.5%
    }
}

@media print, screen and (min-width: 64em) {
    .large-up-1 > .cell {
        width: 100%
    }

    .large-up-2 > .cell {
        width: 50%
    }

    .large-up-3 > .cell {
        width: 33.3333333333%
    }

    .large-up-4 > .cell {
        width: 25%
    }

    .large-up-5 > .cell {
        width: 20%
    }

    .large-up-6 > .cell {
        width: 16.6666666667%
    }

    .large-up-7 > .cell {
        width: 14.2857142857%
    }

    .large-up-8 > .cell {
        width: 12.5%
    }
}

.grid-margin-x.small-up-1 > .cell {
    width: calc(100% - 1.4375rem)
}

.grid-margin-x.small-up-2 > .cell {
    width: calc(50% - 1.4375rem)
}

.grid-margin-x.small-up-3 > .cell {
    width: calc(33.3333333333% - 1.4375rem)
}

.grid-margin-x.small-up-4 > .cell {
    width: calc(25% - 1.4375rem)
}

.grid-margin-x.small-up-5 > .cell {
    width: calc(20% - 1.4375rem)
}

.grid-margin-x.small-up-6 > .cell {
    width: calc(16.6666666667% - 1.4375rem)
}

.grid-margin-x.small-up-7 > .cell {
    width: calc(14.2857142857% - 1.4375rem)
}

.grid-margin-x.small-up-8 > .cell {
    width: calc(12.5% - 1.4375rem)
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x.small-up-1 > .cell {
        width: calc(100% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-1 > .cell {
        width: calc(100% - 1.4375rem)
    }

    .grid-margin-x.small-up-2 > .cell {
        width: calc(50% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-2 > .cell {
        width: calc(50% - 1.4375rem)
    }

    .grid-margin-x.small-up-3 > .cell {
        width: calc(33.3333333333% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-3 > .cell {
        width: calc(33.3333333333% - 1.4375rem)
    }

    .grid-margin-x.small-up-4 > .cell {
        width: calc(25% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-4 > .cell {
        width: calc(25% - 1.4375rem)
    }

    .grid-margin-x.small-up-5 > .cell {
        width: calc(20% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-5 > .cell {
        width: calc(20% - 1.4375rem)
    }

    .grid-margin-x.small-up-6 > .cell {
        width: calc(16.6666666667% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-6 > .cell {
        width: calc(16.6666666667% - 1.4375rem)
    }

    .grid-margin-x.small-up-7 > .cell {
        width: calc(14.2857142857% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-7 > .cell {
        width: calc(14.2857142857% - 1.4375rem)
    }

    .grid-margin-x.small-up-8 > .cell {
        width: calc(12.5% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-8 > .cell {
        width: calc(12.5% - 1.4375rem)
    }

    .grid-margin-x.medium-up-1 > .cell {
        width: calc(100% - 1.5rem)
    }

    .grid-margin-x.medium-up-2 > .cell {
        width: calc(50% - 1.5rem)
    }

    .grid-margin-x.medium-up-3 > .cell {
        width: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-x.medium-up-4 > .cell {
        width: calc(25% - 1.5rem)
    }

    .grid-margin-x.medium-up-5 > .cell {
        width: calc(20% - 1.5rem)
    }

    .grid-margin-x.medium-up-6 > .cell {
        width: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-x.medium-up-7 > .cell {
        width: calc(14.2857142857% - 1.5rem)
    }

    .grid-margin-x.medium-up-8 > .cell {
        width: calc(12.5% - 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-x.small-up-1 > .cell {
        width: calc(100% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-1 > .cell {
        width: calc(100% - 1.4375rem)
    }

    .grid-margin-x.medium-up-1 > .cell {
        width: calc(100% - 1.5rem)
    }

    .grid-margin-x.small-up-2 > .cell {
        width: calc(50% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-2 > .cell {
        width: calc(50% - 1.4375rem)
    }

    .grid-margin-x.medium-up-2 > .cell {
        width: calc(50% - 1.5rem)
    }

    .grid-margin-x.small-up-3 > .cell {
        width: calc(33.3333333333% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-3 > .cell {
        width: calc(33.3333333333% - 1.4375rem)
    }

    .grid-margin-x.medium-up-3 > .cell {
        width: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-x.small-up-4 > .cell {
        width: calc(25% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-4 > .cell {
        width: calc(25% - 1.4375rem)
    }

    .grid-margin-x.medium-up-4 > .cell {
        width: calc(25% - 1.5rem)
    }

    .grid-margin-x.small-up-5 > .cell {
        width: calc(20% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-5 > .cell {
        width: calc(20% - 1.4375rem)
    }

    .grid-margin-x.medium-up-5 > .cell {
        width: calc(20% - 1.5rem)
    }

    .grid-margin-x.small-up-6 > .cell {
        width: calc(16.6666666667% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-6 > .cell {
        width: calc(16.6666666667% - 1.4375rem)
    }

    .grid-margin-x.medium-up-6 > .cell {
        width: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-x.small-up-7 > .cell {
        width: calc(14.2857142857% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-7 > .cell {
        width: calc(14.2857142857% - 1.4375rem)
    }

    .grid-margin-x.medium-up-7 > .cell {
        width: calc(14.2857142857% - 1.5rem)
    }

    .grid-margin-x.small-up-8 > .cell {
        width: calc(12.5% - 1.4375rem)
    }

    .grid-margin-x.smalllandscape-up-8 > .cell {
        width: calc(12.5% - 1.4375rem)
    }

    .grid-margin-x.medium-up-8 > .cell {
        width: calc(12.5% - 1.5rem)
    }

    .grid-margin-x.large-up-1 > .cell {
        width: calc(100% - 1.75rem)
    }

    .grid-margin-x.large-up-2 > .cell {
        width: calc(50% - 1.75rem)
    }

    .grid-margin-x.large-up-3 > .cell {
        width: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-x.large-up-4 > .cell {
        width: calc(25% - 1.75rem)
    }

    .grid-margin-x.large-up-5 > .cell {
        width: calc(20% - 1.75rem)
    }

    .grid-margin-x.large-up-6 > .cell {
        width: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-x.large-up-7 > .cell {
        width: calc(14.2857142857% - 1.75rem)
    }

    .grid-margin-x.large-up-8 > .cell {
        width: calc(12.5% - 1.75rem)
    }
}

.small-margin-collapse {
    margin-right: 0;
    margin-left: 0
}

    .small-margin-collapse > .cell {
        margin-right: 0;
        margin-left: 0
    }

    .small-margin-collapse > .small-1 {
        width: 8.3333333333%
    }

    .small-margin-collapse > .small-2 {
        width: 16.6666666667%
    }

    .small-margin-collapse > .small-3 {
        width: 25%
    }

    .small-margin-collapse > .small-4 {
        width: 33.3333333333%
    }

    .small-margin-collapse > .small-5 {
        width: 41.6666666667%
    }

    .small-margin-collapse > .small-6 {
        width: 50%
    }

    .small-margin-collapse > .small-7 {
        width: 58.3333333333%
    }

    .small-margin-collapse > .small-8 {
        width: 66.6666666667%
    }

    .small-margin-collapse > .small-9 {
        width: 75%
    }

    .small-margin-collapse > .small-10 {
        width: 83.3333333333%
    }

    .small-margin-collapse > .small-11 {
        width: 91.6666666667%
    }

    .small-margin-collapse > .small-12 {
        width: 100%
    }

@media print, screen and (min-width: 48em) {
    .small-margin-collapse > .medium-1 {
        width: 8.3333333333%
    }

    .small-margin-collapse > .medium-2 {
        width: 16.6666666667%
    }

    .small-margin-collapse > .medium-3 {
        width: 25%
    }

    .small-margin-collapse > .medium-4 {
        width: 33.3333333333%
    }

    .small-margin-collapse > .medium-5 {
        width: 41.6666666667%
    }

    .small-margin-collapse > .medium-6 {
        width: 50%
    }

    .small-margin-collapse > .medium-7 {
        width: 58.3333333333%
    }

    .small-margin-collapse > .medium-8 {
        width: 66.6666666667%
    }

    .small-margin-collapse > .medium-9 {
        width: 75%
    }

    .small-margin-collapse > .medium-10 {
        width: 83.3333333333%
    }

    .small-margin-collapse > .medium-11 {
        width: 91.6666666667%
    }

    .small-margin-collapse > .medium-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .small-margin-collapse > .large-1 {
        width: 8.3333333333%
    }

    .small-margin-collapse > .large-2 {
        width: 16.6666666667%
    }

    .small-margin-collapse > .large-3 {
        width: 25%
    }

    .small-margin-collapse > .large-4 {
        width: 33.3333333333%
    }

    .small-margin-collapse > .large-5 {
        width: 41.6666666667%
    }

    .small-margin-collapse > .large-6 {
        width: 50%
    }

    .small-margin-collapse > .large-7 {
        width: 58.3333333333%
    }

    .small-margin-collapse > .large-8 {
        width: 66.6666666667%
    }

    .small-margin-collapse > .large-9 {
        width: 75%
    }

    .small-margin-collapse > .large-10 {
        width: 83.3333333333%
    }

    .small-margin-collapse > .large-11 {
        width: 91.6666666667%
    }

    .small-margin-collapse > .large-12 {
        width: 100%
    }
}

.small-padding-collapse {
    margin-right: 0;
    margin-left: 0
}

    .small-padding-collapse > .cell {
        padding-right: 0;
        padding-left: 0
    }

@media print, screen and (min-width: 48em) {
    .medium-margin-collapse {
        margin-right: 0;
        margin-left: 0
    }

        .medium-margin-collapse > .cell {
            margin-right: 0;
            margin-left: 0
        }
}

@media print, screen and (min-width: 48em) {
    .medium-margin-collapse > .small-1 {
        width: 8.3333333333%
    }

    .medium-margin-collapse > .small-2 {
        width: 16.6666666667%
    }

    .medium-margin-collapse > .small-3 {
        width: 25%
    }

    .medium-margin-collapse > .small-4 {
        width: 33.3333333333%
    }

    .medium-margin-collapse > .small-5 {
        width: 41.6666666667%
    }

    .medium-margin-collapse > .small-6 {
        width: 50%
    }

    .medium-margin-collapse > .small-7 {
        width: 58.3333333333%
    }

    .medium-margin-collapse > .small-8 {
        width: 66.6666666667%
    }

    .medium-margin-collapse > .small-9 {
        width: 75%
    }

    .medium-margin-collapse > .small-10 {
        width: 83.3333333333%
    }

    .medium-margin-collapse > .small-11 {
        width: 91.6666666667%
    }

    .medium-margin-collapse > .small-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 48em) {
    .medium-margin-collapse > .medium-1 {
        width: 8.3333333333%
    }

    .medium-margin-collapse > .medium-2 {
        width: 16.6666666667%
    }

    .medium-margin-collapse > .medium-3 {
        width: 25%
    }

    .medium-margin-collapse > .medium-4 {
        width: 33.3333333333%
    }

    .medium-margin-collapse > .medium-5 {
        width: 41.6666666667%
    }

    .medium-margin-collapse > .medium-6 {
        width: 50%
    }

    .medium-margin-collapse > .medium-7 {
        width: 58.3333333333%
    }

    .medium-margin-collapse > .medium-8 {
        width: 66.6666666667%
    }

    .medium-margin-collapse > .medium-9 {
        width: 75%
    }

    .medium-margin-collapse > .medium-10 {
        width: 83.3333333333%
    }

    .medium-margin-collapse > .medium-11 {
        width: 91.6666666667%
    }

    .medium-margin-collapse > .medium-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .medium-margin-collapse > .large-1 {
        width: 8.3333333333%
    }

    .medium-margin-collapse > .large-2 {
        width: 16.6666666667%
    }

    .medium-margin-collapse > .large-3 {
        width: 25%
    }

    .medium-margin-collapse > .large-4 {
        width: 33.3333333333%
    }

    .medium-margin-collapse > .large-5 {
        width: 41.6666666667%
    }

    .medium-margin-collapse > .large-6 {
        width: 50%
    }

    .medium-margin-collapse > .large-7 {
        width: 58.3333333333%
    }

    .medium-margin-collapse > .large-8 {
        width: 66.6666666667%
    }

    .medium-margin-collapse > .large-9 {
        width: 75%
    }

    .medium-margin-collapse > .large-10 {
        width: 83.3333333333%
    }

    .medium-margin-collapse > .large-11 {
        width: 91.6666666667%
    }

    .medium-margin-collapse > .large-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 48em) {
    .medium-padding-collapse {
        margin-right: 0;
        margin-left: 0
    }

        .medium-padding-collapse > .cell {
            padding-right: 0;
            padding-left: 0
        }
}

@media print, screen and (min-width: 64em) {
    .large-margin-collapse {
        margin-right: 0;
        margin-left: 0
    }

        .large-margin-collapse > .cell {
            margin-right: 0;
            margin-left: 0
        }
}

@media print, screen and (min-width: 64em) {
    .large-margin-collapse > .small-1 {
        width: 8.3333333333%
    }

    .large-margin-collapse > .small-2 {
        width: 16.6666666667%
    }

    .large-margin-collapse > .small-3 {
        width: 25%
    }

    .large-margin-collapse > .small-4 {
        width: 33.3333333333%
    }

    .large-margin-collapse > .small-5 {
        width: 41.6666666667%
    }

    .large-margin-collapse > .small-6 {
        width: 50%
    }

    .large-margin-collapse > .small-7 {
        width: 58.3333333333%
    }

    .large-margin-collapse > .small-8 {
        width: 66.6666666667%
    }

    .large-margin-collapse > .small-9 {
        width: 75%
    }

    .large-margin-collapse > .small-10 {
        width: 83.3333333333%
    }

    .large-margin-collapse > .small-11 {
        width: 91.6666666667%
    }

    .large-margin-collapse > .small-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .large-margin-collapse > .medium-1 {
        width: 8.3333333333%
    }

    .large-margin-collapse > .medium-2 {
        width: 16.6666666667%
    }

    .large-margin-collapse > .medium-3 {
        width: 25%
    }

    .large-margin-collapse > .medium-4 {
        width: 33.3333333333%
    }

    .large-margin-collapse > .medium-5 {
        width: 41.6666666667%
    }

    .large-margin-collapse > .medium-6 {
        width: 50%
    }

    .large-margin-collapse > .medium-7 {
        width: 58.3333333333%
    }

    .large-margin-collapse > .medium-8 {
        width: 66.6666666667%
    }

    .large-margin-collapse > .medium-9 {
        width: 75%
    }

    .large-margin-collapse > .medium-10 {
        width: 83.3333333333%
    }

    .large-margin-collapse > .medium-11 {
        width: 91.6666666667%
    }

    .large-margin-collapse > .medium-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .large-margin-collapse > .large-1 {
        width: 8.3333333333%
    }

    .large-margin-collapse > .large-2 {
        width: 16.6666666667%
    }

    .large-margin-collapse > .large-3 {
        width: 25%
    }

    .large-margin-collapse > .large-4 {
        width: 33.3333333333%
    }

    .large-margin-collapse > .large-5 {
        width: 41.6666666667%
    }

    .large-margin-collapse > .large-6 {
        width: 50%
    }

    .large-margin-collapse > .large-7 {
        width: 58.3333333333%
    }

    .large-margin-collapse > .large-8 {
        width: 66.6666666667%
    }

    .large-margin-collapse > .large-9 {
        width: 75%
    }

    .large-margin-collapse > .large-10 {
        width: 83.3333333333%
    }

    .large-margin-collapse > .large-11 {
        width: 91.6666666667%
    }

    .large-margin-collapse > .large-12 {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .large-padding-collapse {
        margin-right: 0;
        margin-left: 0
    }

        .large-padding-collapse > .cell {
            padding-right: 0;
            padding-left: 0
        }
}

.small-offset-0 {
    margin-left: 0%
}

.grid-margin-x > .small-offset-0 {
    margin-left: calc(0% + .71875rem)
}

.small-offset-1 {
    margin-left: 8.3333333333%
}

.grid-margin-x > .small-offset-1 {
    margin-left: calc(8.3333333333% + .71875rem)
}

.small-offset-2 {
    margin-left: 16.6666666667%
}

.grid-margin-x > .small-offset-2 {
    margin-left: calc(16.6666666667% + .71875rem)
}

.small-offset-3 {
    margin-left: 25%
}

.grid-margin-x > .small-offset-3 {
    margin-left: calc(25% + .71875rem)
}

.small-offset-4 {
    margin-left: 33.3333333333%
}

.grid-margin-x > .small-offset-4 {
    margin-left: calc(33.3333333333% + .71875rem)
}

.small-offset-5 {
    margin-left: 41.6666666667%
}

.grid-margin-x > .small-offset-5 {
    margin-left: calc(41.6666666667% + .71875rem)
}

.small-offset-6 {
    margin-left: 50%
}

.grid-margin-x > .small-offset-6 {
    margin-left: calc(50% + .71875rem)
}

.small-offset-7 {
    margin-left: 58.3333333333%
}

.grid-margin-x > .small-offset-7 {
    margin-left: calc(58.3333333333% + .71875rem)
}

.small-offset-8 {
    margin-left: 66.6666666667%
}

.grid-margin-x > .small-offset-8 {
    margin-left: calc(66.6666666667% + .71875rem)
}

.small-offset-9 {
    margin-left: 75%
}

.grid-margin-x > .small-offset-9 {
    margin-left: calc(75% + .71875rem)
}

.small-offset-10 {
    margin-left: 83.3333333333%
}

.grid-margin-x > .small-offset-10 {
    margin-left: calc(83.3333333333% + .71875rem)
}

.small-offset-11 {
    margin-left: 91.6666666667%
}

.grid-margin-x > .small-offset-11 {
    margin-left: calc(91.6666666667% + .71875rem)
}

@media print, screen and (min-width: 48em) {
    .medium-offset-0 {
        margin-left: 0%
    }

    .grid-margin-x > .medium-offset-0 {
        margin-left: calc(0% + .75rem)
    }

    .medium-offset-1 {
        margin-left: 8.3333333333%
    }

    .grid-margin-x > .medium-offset-1 {
        margin-left: calc(8.3333333333% + .75rem)
    }

    .medium-offset-2 {
        margin-left: 16.6666666667%
    }

    .grid-margin-x > .medium-offset-2 {
        margin-left: calc(16.6666666667% + .75rem)
    }

    .medium-offset-3 {
        margin-left: 25%
    }

    .grid-margin-x > .medium-offset-3 {
        margin-left: calc(25% + .75rem)
    }

    .medium-offset-4 {
        margin-left: 33.3333333333%
    }

    .grid-margin-x > .medium-offset-4 {
        margin-left: calc(33.3333333333% + .75rem)
    }

    .medium-offset-5 {
        margin-left: 41.6666666667%
    }

    .grid-margin-x > .medium-offset-5 {
        margin-left: calc(41.6666666667% + .75rem)
    }

    .medium-offset-6 {
        margin-left: 50%
    }

    .grid-margin-x > .medium-offset-6 {
        margin-left: calc(50% + .75rem)
    }

    .medium-offset-7 {
        margin-left: 58.3333333333%
    }

    .grid-margin-x > .medium-offset-7 {
        margin-left: calc(58.3333333333% + .75rem)
    }

    .medium-offset-8 {
        margin-left: 66.6666666667%
    }

    .grid-margin-x > .medium-offset-8 {
        margin-left: calc(66.6666666667% + .75rem)
    }

    .medium-offset-9 {
        margin-left: 75%
    }

    .grid-margin-x > .medium-offset-9 {
        margin-left: calc(75% + .75rem)
    }

    .medium-offset-10 {
        margin-left: 83.3333333333%
    }

    .grid-margin-x > .medium-offset-10 {
        margin-left: calc(83.3333333333% + .75rem)
    }

    .medium-offset-11 {
        margin-left: 91.6666666667%
    }

    .grid-margin-x > .medium-offset-11 {
        margin-left: calc(91.6666666667% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .large-offset-0 {
        margin-left: 0%
    }

    .grid-margin-x > .large-offset-0 {
        margin-left: calc(0% + .875rem)
    }

    .large-offset-1 {
        margin-left: 8.3333333333%
    }

    .grid-margin-x > .large-offset-1 {
        margin-left: calc(8.3333333333% + .875rem)
    }

    .large-offset-2 {
        margin-left: 16.6666666667%
    }

    .grid-margin-x > .large-offset-2 {
        margin-left: calc(16.6666666667% + .875rem)
    }

    .large-offset-3 {
        margin-left: 25%
    }

    .grid-margin-x > .large-offset-3 {
        margin-left: calc(25% + .875rem)
    }

    .large-offset-4 {
        margin-left: 33.3333333333%
    }

    .grid-margin-x > .large-offset-4 {
        margin-left: calc(33.3333333333% + .875rem)
    }

    .large-offset-5 {
        margin-left: 41.6666666667%
    }

    .grid-margin-x > .large-offset-5 {
        margin-left: calc(41.6666666667% + .875rem)
    }

    .large-offset-6 {
        margin-left: 50%
    }

    .grid-margin-x > .large-offset-6 {
        margin-left: calc(50% + .875rem)
    }

    .large-offset-7 {
        margin-left: 58.3333333333%
    }

    .grid-margin-x > .large-offset-7 {
        margin-left: calc(58.3333333333% + .875rem)
    }

    .large-offset-8 {
        margin-left: 66.6666666667%
    }

    .grid-margin-x > .large-offset-8 {
        margin-left: calc(66.6666666667% + .875rem)
    }

    .large-offset-9 {
        margin-left: 75%
    }

    .grid-margin-x > .large-offset-9 {
        margin-left: calc(75% + .875rem)
    }

    .large-offset-10 {
        margin-left: 83.3333333333%
    }

    .grid-margin-x > .large-offset-10 {
        margin-left: calc(83.3333333333% + .875rem)
    }

    .large-offset-11 {
        margin-left: 91.6666666667%
    }

    .grid-margin-x > .large-offset-11 {
        margin-left: calc(91.6666666667% + .875rem)
    }
}

.grid-y {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap
}

    .grid-y > .cell {
        width: auto
    }

    .grid-y > .auto {
        height: auto
    }

    .grid-y > .shrink {
        height: auto
    }

    .grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

@media print, screen and (min-width: 48em) {
    .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }
}

@media print, screen and (min-width: 64em) {
    .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }
}

.grid-y > .small-1 {
    height: 8.3333333333%
}

.grid-y > .small-2 {
    height: 16.6666666667%
}

.grid-y > .small-3 {
    height: 25%
}

.grid-y > .small-4 {
    height: 33.3333333333%
}

.grid-y > .small-5 {
    height: 41.6666666667%
}

.grid-y > .small-6 {
    height: 50%
}

.grid-y > .small-7 {
    height: 58.3333333333%
}

.grid-y > .small-8 {
    height: 66.6666666667%
}

.grid-y > .small-9 {
    height: 75%
}

.grid-y > .small-10 {
    height: 83.3333333333%
}

.grid-y > .small-11 {
    height: 91.6666666667%
}

.grid-y > .small-12 {
    height: 100%
}

@media print, screen and (min-width: 48em) {
    .grid-y > .medium-auto {
        -ms-flex: 1 1 0px;
        flex: 1 1 0px;
        height: auto
    }

    .grid-y > .medium-shrink {
        height: auto
    }

    .grid-y > .medium-1 {
        height: 8.3333333333%
    }

    .grid-y > .medium-2 {
        height: 16.6666666667%
    }

    .grid-y > .medium-3 {
        height: 25%
    }

    .grid-y > .medium-4 {
        height: 33.3333333333%
    }

    .grid-y > .medium-5 {
        height: 41.6666666667%
    }

    .grid-y > .medium-6 {
        height: 50%
    }

    .grid-y > .medium-7 {
        height: 58.3333333333%
    }

    .grid-y > .medium-8 {
        height: 66.6666666667%
    }

    .grid-y > .medium-9 {
        height: 75%
    }

    .grid-y > .medium-10 {
        height: 83.3333333333%
    }

    .grid-y > .medium-11 {
        height: 91.6666666667%
    }

    .grid-y > .medium-12 {
        height: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .grid-y > .large-auto {
        -ms-flex: 1 1 0px;
        flex: 1 1 0px;
        height: auto
    }

    .grid-y > .large-shrink {
        height: auto
    }

    .grid-y > .large-1 {
        height: 8.3333333333%
    }

    .grid-y > .large-2 {
        height: 16.6666666667%
    }

    .grid-y > .large-3 {
        height: 25%
    }

    .grid-y > .large-4 {
        height: 33.3333333333%
    }

    .grid-y > .large-5 {
        height: 41.6666666667%
    }

    .grid-y > .large-6 {
        height: 50%
    }

    .grid-y > .large-7 {
        height: 58.3333333333%
    }

    .grid-y > .large-8 {
        height: 66.6666666667%
    }

    .grid-y > .large-9 {
        height: 75%
    }

    .grid-y > .large-10 {
        height: 83.3333333333%
    }

    .grid-y > .large-11 {
        height: 91.6666666667%
    }

    .grid-y > .large-12 {
        height: 100%
    }
}

.grid-padding-y .grid-padding-y {
    margin-top: -.71875rem;
    margin-bottom: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-padding-y .grid-padding-y {
        margin-top: -.71875rem;
        margin-bottom: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-padding-y .grid-padding-y {
        margin-top: -.75rem;
        margin-bottom: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-padding-y .grid-padding-y {
        margin-top: -.875rem;
        margin-bottom: -.875rem
    }
}

.grid-padding-y > .cell {
    padding-top: .71875rem;
    padding-bottom: .71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-padding-y > .cell {
        padding-top: .71875rem;
        padding-bottom: .71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-padding-y > .cell {
        padding-top: .75rem;
        padding-bottom: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-padding-y > .cell {
        padding-top: .875rem;
        padding-bottom: .875rem
    }
}

.grid-margin-y {
    margin-top: -.71875rem;
    margin-bottom: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-margin-y {
        margin-top: -.71875rem;
        margin-bottom: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y {
        margin-top: -.75rem;
        margin-bottom: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y {
        margin-top: -.875rem;
        margin-bottom: -.875rem
    }
}

.grid-margin-y > .cell {
    height: calc(100% - 1.4375rem);
    margin-top: .71875rem;
    margin-bottom: .71875rem
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y > .cell {
        height: calc(100% - 1.5rem);
        margin-top: .75rem;
        margin-bottom: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y > .cell {
        height: calc(100% - 1.75rem);
        margin-top: .875rem;
        margin-bottom: .875rem
    }
}

.grid-margin-y > .auto {
    height: auto
}

.grid-margin-y > .shrink {
    height: auto
}

.grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-3 {
    height: calc(25% - 1.4375rem)
}

.grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-6 {
    height: calc(50% - 1.4375rem)
}

.grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-9 {
    height: calc(75% - 1.4375rem)
}

.grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-12 {
    height: calc(100% - 1.4375rem)
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y > .auto {
        height: auto
    }

    .grid-margin-y > .shrink {
        height: auto
    }

    .grid-margin-y > .small-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .small-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .small-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .small-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-12 {
        height: calc(100% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-auto {
        height: auto
    }

    .grid-margin-y > .smalllandscape-shrink {
        height: auto
    }

    .grid-margin-y > .smalllandscape-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-12 {
        height: calc(100% - 1.5rem)
    }

    .grid-margin-y > .medium-auto {
        height: auto
    }

    .grid-margin-y > .medium-shrink {
        height: auto
    }

    .grid-margin-y > .medium-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .medium-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .medium-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .medium-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-12 {
        height: calc(100% - 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y > .auto {
        height: auto
    }

    .grid-margin-y > .shrink {
        height: auto
    }

    .grid-margin-y > .small-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .small-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .small-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .small-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-auto {
        height: auto
    }

    .grid-margin-y > .smalllandscape-shrink {
        height: auto
    }

    .grid-margin-y > .smalllandscape-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .medium-auto {
        height: auto
    }

    .grid-margin-y > .medium-shrink {
        height: auto
    }

    .grid-margin-y > .medium-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .medium-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .medium-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .medium-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .large-auto {
        height: auto
    }

    .grid-margin-y > .large-shrink {
        height: auto
    }

    .grid-margin-y > .large-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .large-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .large-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .large-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-12 {
        height: calc(100% - 1.75rem)
    }
}

.grid-frame {
    overflow: hidden;
    position: relative;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100vw
}

.cell .grid-frame {
    width: 100%
}

.cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-stype: -ms-autohiding-scrollbar
}

.cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-stype: -ms-autohiding-scrollbar
}

.cell-block-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 100%
}

    .cell-block-container > .grid-x {
        max-height: 100%;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

@media print, screen and (min-width: 48em) {
    .medium-grid-frame {
        overflow: hidden;
        position: relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100vw
    }

    .cell .medium-grid-frame {
        width: 100%
    }

    .medium-cell-block {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-stype: -ms-autohiding-scrollbar
    }

    .medium-cell-block-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        max-height: 100%
    }

        .medium-cell-block-container > .grid-x {
            max-height: 100%;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
        }

    .medium-cell-block-y {
        overflow-y: auto;
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-stype: -ms-autohiding-scrollbar
    }
}

@media print, screen and (min-width: 64em) {
    .large-grid-frame {
        overflow: hidden;
        position: relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100vw
    }

    .cell .large-grid-frame {
        width: 100%
    }

    .large-cell-block {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-stype: -ms-autohiding-scrollbar
    }

    .large-cell-block-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        max-height: 100%
    }

        .large-cell-block-container > .grid-x {
            max-height: 100%;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
        }

    .large-cell-block-y {
        overflow-y: auto;
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-stype: -ms-autohiding-scrollbar
    }
}

.grid-y.grid-frame {
    width: auto;
    overflow: hidden;
    position: relative;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 100vh
}

@media print, screen and (min-width: 48em) {
    .grid-y.medium-grid-frame {
        width: auto;
        overflow: hidden;
        position: relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        height: 100vh
    }
}

@media print, screen and (min-width: 64em) {
    .grid-y.large-grid-frame {
        width: auto;
        overflow: hidden;
        position: relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        height: 100vh
    }
}

.cell .grid-y.grid-frame {
    height: 100%
}

@media print, screen and (min-width: 48em) {
    .cell .grid-y.medium-grid-frame {
        height: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .cell .grid-y.large-grid-frame {
        height: 100%
    }
}

.grid-margin-y {
    margin-top: -.71875rem;
    margin-bottom: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .grid-margin-y {
        margin-top: -.71875rem;
        margin-bottom: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y {
        margin-top: -.75rem;
        margin-bottom: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y {
        margin-top: -.875rem;
        margin-bottom: -.875rem
    }
}

.grid-margin-y > .cell {
    height: calc(100% - 1.4375rem);
    margin-top: .71875rem;
    margin-bottom: .71875rem
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y > .cell {
        height: calc(100% - 1.5rem);
        margin-top: .75rem;
        margin-bottom: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y > .cell {
        height: calc(100% - 1.75rem);
        margin-top: .875rem;
        margin-bottom: .875rem
    }
}

.grid-margin-y > .auto {
    height: auto
}

.grid-margin-y > .shrink {
    height: auto
}

.grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-3 {
    height: calc(25% - 1.4375rem)
}

.grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-6 {
    height: calc(50% - 1.4375rem)
}

.grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-9 {
    height: calc(75% - 1.4375rem)
}

.grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.4375rem)
}

.grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.4375rem)
}

.grid-margin-y > .small-12 {
    height: calc(100% - 1.4375rem)
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y > .auto {
        height: auto
    }

    .grid-margin-y > .shrink {
        height: auto
    }

    .grid-margin-y > .small-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .small-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .small-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .small-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .small-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .small-12 {
        height: calc(100% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-auto {
        height: auto
    }

    .grid-margin-y > .smalllandscape-shrink {
        height: auto
    }

    .grid-margin-y > .smalllandscape-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .smalllandscape-12 {
        height: calc(100% - 1.5rem)
    }

    .grid-margin-y > .medium-auto {
        height: auto
    }

    .grid-margin-y > .medium-shrink {
        height: auto
    }

    .grid-margin-y > .medium-1 {
        height: calc(8.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-2 {
        height: calc(16.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-3 {
        height: calc(25% - 1.5rem)
    }

    .grid-margin-y > .medium-4 {
        height: calc(33.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-5 {
        height: calc(41.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-6 {
        height: calc(50% - 1.5rem)
    }

    .grid-margin-y > .medium-7 {
        height: calc(58.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-8 {
        height: calc(66.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-9 {
        height: calc(75% - 1.5rem)
    }

    .grid-margin-y > .medium-10 {
        height: calc(83.3333333333% - 1.5rem)
    }

    .grid-margin-y > .medium-11 {
        height: calc(91.6666666667% - 1.5rem)
    }

    .grid-margin-y > .medium-12 {
        height: calc(100% - 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y > .auto {
        height: auto
    }

    .grid-margin-y > .shrink {
        height: auto
    }

    .grid-margin-y > .small-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .small-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .small-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .small-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .small-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .small-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-auto {
        height: auto
    }

    .grid-margin-y > .smalllandscape-shrink {
        height: auto
    }

    .grid-margin-y > .smalllandscape-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .smalllandscape-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .medium-auto {
        height: auto
    }

    .grid-margin-y > .medium-shrink {
        height: auto
    }

    .grid-margin-y > .medium-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .medium-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .medium-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .medium-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .medium-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .medium-12 {
        height: calc(100% - 1.75rem)
    }

    .grid-margin-y > .large-auto {
        height: auto
    }

    .grid-margin-y > .large-shrink {
        height: auto
    }

    .grid-margin-y > .large-1 {
        height: calc(8.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-2 {
        height: calc(16.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-3 {
        height: calc(25% - 1.75rem)
    }

    .grid-margin-y > .large-4 {
        height: calc(33.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-5 {
        height: calc(41.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-6 {
        height: calc(50% - 1.75rem)
    }

    .grid-margin-y > .large-7 {
        height: calc(58.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-8 {
        height: calc(66.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-9 {
        height: calc(75% - 1.75rem)
    }

    .grid-margin-y > .large-10 {
        height: calc(83.3333333333% - 1.75rem)
    }

    .grid-margin-y > .large-11 {
        height: calc(91.6666666667% - 1.75rem)
    }

    .grid-margin-y > .large-12 {
        height: calc(100% - 1.75rem)
    }
}

.grid-frame.grid-margin-y {
    height: calc(100vh + 1.4375rem)
}

@media print, screen and (min-width: 48em) {
    .grid-frame.grid-margin-y {
        height: calc(100vh + 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-frame.grid-margin-y {
        height: calc(100vh + 1.75rem)
    }
}

@media print, screen and (min-width: 48em) {
    .grid-margin-y.medium-grid-frame {
        height: calc(100vh + 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .grid-margin-y.large-grid-frame {
        height: calc(100vh + 1.75rem)
    }
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0
}

p {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.6;
    text-rendering: optimizeLegibility
}

em, i {
    font-style: italic;
    line-height: inherit
}

strong, b {
    font-weight: bold;
    line-height: inherit
}

small {
    font-size: 80%;
    line-height: inherit
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    color: inherit;
    text-rendering: optimizeLegibility
}

    h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small {
        line-height: 0;
        color: #c8c8c8
    }

h1, .h1 {
    font-size: 1.875rem;
    line-height: 1.33;
    margin-top: 0;
    margin-bottom: .6rem
}

h2, .h2 {
    font-size: 1.5625rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .6rem
}

h3, .h3 {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: .6rem
}

h4, .h4 {
    font-size: 1.125rem;
    line-height: 1.39;
    margin-top: 0;
    margin-bottom: .6rem
}

h5, .h5 {
    font-size: 1rem;
    line-height: 1.67;
    margin-top: 0;
    margin-bottom: .6rem
}

h6, .h6 {
    font-size: 1rem;
    line-height: 1.67;
    margin-top: 0;
    margin-bottom: .6rem
}

p, .p {
    font-size: 1rem;
    line-height: 1.67;
    margin-top: 0;
    margin-bottom: .6rem
}

@media print, screen and (min-width: 64em) {
    h1, .h1 {
        font-size: 3.125rem;
        line-height: 1.2
    }

    h2, .h2 {
        font-size: 2.5rem;
        line-height: 1.25
    }

    h3, .h3 {
        font-size: 1.875rem;
        line-height: 1.33
    }

    h4, .h4 {
        font-size: 1.25rem;
        line-height: 1.5
    }

    h5, .h5 {
        font-size: 1rem;
        line-height: 1.67
    }

    h6, .h6 {
        font-size: 1rem;
        line-height: 1.67
    }

    p, .p {
        font-size: 1rem;
        line-height: 1.67
    }
}

a {
    line-height: inherit;
    color: #28343d;
    text-decoration: none;
    cursor: pointer
}

    a:hover, a:focus {
        color: #222d34
    }

    a img {
        border: 0
    }

hr {
    clear: both;
    max-width: 94.25rem;
    height: 0;
    margin: 1.25rem auto;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #c8c8c8;
    border-left: 0
}

ul, ol, dl {
    margin-bottom: 1rem;
    list-style-position: outside;
    line-height: 1.6
}

li {
    font-size: inherit
}

ul {
    margin-left: 1.25rem;
    list-style-type: disc
}

ol {
    margin-left: 1.25rem
}

    ul ul, ol ul, ul ol, ol ol {
        margin-left: 1.25rem;
        margin-bottom: 0
    }

dl {
    margin-bottom: 1rem
}

    dl dt {
        margin-bottom: .3rem;
        font-weight: bold
    }

blockquote {
    margin: 0 0 1rem;
    padding: .5625rem 1.25rem 0 1.1875rem;
    border-left: 1px solid #c8c8c8
}

    blockquote, blockquote p {
        line-height: 1.6;
        color: #3f454e
    }

cite {
    display: block;
    font-size: .8125rem;
    color: #3f454e
}

    cite:before {
        content: "— "
    }

abbr, abbr[title] {
    border-bottom: 1px dotted #0a0a0a;
    cursor: help;
    text-decoration: none
}

figure {
    margin: 0
}

code {
    padding: .125rem .3125rem .0625rem;
    border: 1px solid #c8c8c8;
    background-color: #d8d8d8;
    font-family: Consolas,"Liberation Mono",Courier,monospace;
    font-weight: normal;
    color: #0a0a0a
}

kbd {
    margin: 0;
    padding: .125rem .25rem 0;
    background-color: #d8d8d8;
    font-family: Consolas,"Liberation Mono",Courier,monospace;
    color: #0a0a0a
}

.subheader {
    margin-top: .2rem;
    margin-bottom: .5rem;
    font-weight: normal;
    line-height: 1.4;
    color: #3f454e
}

.lead {
    font-size: 125%;
    line-height: 1.6
}

.stat {
    font-size: 2.5rem;
    line-height: 1
}

p + .stat {
    margin-top: -1rem
}

ul.no-bullet, ol.no-bullet {
    margin-left: 0;
    list-style: none
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

@media print, screen and (min-width: 48em) {
    .medium-text-left {
        text-align: left
    }

    .medium-text-right {
        text-align: right
    }

    .medium-text-center {
        text-align: center
    }

    .medium-text-justify {
        text-align: justify
    }
}

@media print, screen and (min-width: 64em) {
    .large-text-left {
        text-align: left
    }

    .large-text-right {
        text-align: right
    }

    .large-text-center {
        text-align: center
    }

    .large-text-justify {
        text-align: justify
    }
}

.show-for-print {
    display: none !important
}

@media print {
    * {
        box-shadow: none !important;
        color: black !important;
        text-shadow: none !important
    }

    .show-for-print {
        display: block !important
    }

    .hide-for-print {
        display: none !important
    }

    table.show-for-print {
        display: table !important
    }

    thead.show-for-print {
        display: table-header-group !important
    }

    tbody.show-for-print {
        display: table-row-group !important
    }

    tr.show-for-print {
        display: table-row !important
    }

    td.show-for-print {
        display: table-cell !important
    }

    th.show-for-print {
        display: table-cell !important
    }

    a, a:visited {
        text-decoration: underline
    }

        a[href]:after {
            content: " (" attr(href) ")"
        }

        .ir a:after, a[href^='javascript:']:after, a[href^='#']:after {
            content: ''
        }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    pre, blockquote {
        border: 1px solid #3f454e;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr, img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: 0.5cm
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3
    }

    h2, h3 {
        page-break-after: avoid
    }

    .print-break-inside {
        page-break-inside: auto
    }
}

.responsive-embed, .flex-video {
    position: relative;
    height: 0;
    margin-bottom: 1rem;
    padding-bottom: 75%;
    overflow: hidden
}

    .responsive-embed iframe, .responsive-embed object, .responsive-embed embed, .responsive-embed video, .flex-video iframe, .flex-video object, .flex-video embed, .flex-video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .responsive-embed.widescreen, .flex-video.widescreen {
        padding-bottom: 56.25%
    }

.hide {
    display: none !important
}

.invisible {
    visibility: hidden
}

@media screen and (max-width: 19.9375em) {
    .hide-for-small-only {
        display: none !important
    }
}

@media screen and (max-width: 0em), screen and (min-width: 20em) {
    .show-for-small-only {
        display: none !important
    }
}

@media print, screen and (min-width: 48em) {
    .hide-for-medium {
        display: none !important
    }
}

@media screen and (max-width: 47.9375em) {
    .show-for-medium {
        display: none !important
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hide-for-medium-only {
        display: none !important
    }
}

@media screen and (max-width: 47.9375em), screen and (min-width: 64em) {
    .show-for-medium-only {
        display: none !important
    }
}

@media print, screen and (min-width: 64em) {
    .hide-for-large {
        display: none !important
    }
}

@media screen and (max-width: 63.9375em) {
    .show-for-large {
        display: none !important
    }
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .hide-for-large-only {
        display: none !important
    }
}

@media screen and (max-width: 63.9375em), screen and (min-width: 81.25em) {
    .show-for-large-only {
        display: none !important
    }
}

.show-for-sr, .show-on-focus {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0
}

    .show-on-focus:active, .show-on-focus:focus {
        position: static !important;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        -webkit-clip-path: none;
        clip-path: none
    }

.show-for-landscape, .hide-for-portrait {
    display: block !important
}

@media screen and (orientation: landscape) {
    .show-for-landscape, .hide-for-portrait {
        display: block !important
    }
}

@media screen and (orientation: portrait) {
    .show-for-landscape, .hide-for-portrait {
        display: none !important
    }
}

.hide-for-landscape, .show-for-portrait {
    display: none !important
}

@media screen and (orientation: landscape) {
    .hide-for-landscape, .show-for-portrait {
        display: none !important
    }
}

@media screen and (orientation: portrait) {
    .hide-for-landscape, .show-for-portrait {
        display: block !important
    }
}

.align-right {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.align-center {
    -ms-flex-pack: center;
    justify-content: center
}

.align-justify {
    -ms-flex-pack: justify;
    justify-content: space-between
}

.align-spaced {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.align-right.vertical.menu > li > a {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.align-center.vertical.menu > li > a {
    -ms-flex-pack: center;
    justify-content: center
}

.align-top {
    -ms-flex-align: start;
    align-items: flex-start
}

.align-self-top {
    -ms-flex-item-align: start;
    align-self: flex-start
}

.align-bottom {
    -ms-flex-align: end;
    align-items: flex-end
}

.align-self-bottom {
    -ms-flex-item-align: end;
    align-self: flex-end
}

.align-middle {
    -ms-flex-align: center;
    align-items: center
}

.align-self-middle {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

.align-stretch {
    -ms-flex-align: stretch;
    align-items: stretch
}

.align-self-stretch {
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

.align-center-middle {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center
}

.small-order-1 {
    -ms-flex-order: 1;
    order: 1
}

.small-order-2 {
    -ms-flex-order: 2;
    order: 2
}

.small-order-3 {
    -ms-flex-order: 3;
    order: 3
}

.small-order-4 {
    -ms-flex-order: 4;
    order: 4
}

.small-order-5 {
    -ms-flex-order: 5;
    order: 5
}

.small-order-6 {
    -ms-flex-order: 6;
    order: 6
}

@media print, screen and (min-width: 48em) {
    .medium-order-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .medium-order-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .medium-order-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .medium-order-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .medium-order-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .medium-order-6 {
        -ms-flex-order: 6;
        order: 6
    }
}

@media print, screen and (min-width: 64em) {
    .large-order-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .large-order-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .large-order-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .large-order-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .large-order-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .large-order-6 {
        -ms-flex-order: 6;
        order: 6
    }
}

.flex-container {
    display: -ms-flexbox;
    display: flex
}

.flex-child-auto {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.flex-child-grow {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.flex-child-shrink {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto
}

.flex-dir-row {
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-dir-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.flex-dir-column {
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-dir-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

@media print, screen and (min-width: 48em) {
    .medium-flex-container {
        display: -ms-flexbox;
        display: flex
    }

    .medium-flex-child-auto {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    .medium-flex-child-grow {
        -ms-flex: 1 0 auto;
        flex: 1 0 auto
    }

    .medium-flex-child-shrink {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto
    }

    .medium-flex-dir-row {
        -ms-flex-direction: row;
        flex-direction: row
    }

    .medium-flex-dir-row-reverse {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .medium-flex-dir-column {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .medium-flex-dir-column-reverse {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@media print, screen and (min-width: 64em) {
    .large-flex-container {
        display: -ms-flexbox;
        display: flex
    }

    .large-flex-child-auto {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    .large-flex-child-grow {
        -ms-flex: 1 0 auto;
        flex: 1 0 auto
    }

    .large-flex-child-shrink {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto
    }

    .large-flex-dir-row {
        -ms-flex-direction: row;
        flex-direction: row
    }

    .large-flex-dir-row-reverse {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .large-flex-dir-column {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .large-flex-dir-column-reverse {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@keyframes heroTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobile {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobileClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }
}

@keyframes heroContentBeforeOnDesktop {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 72px
    }
}

@keyframes heroContentBeforeOnTablet {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 37px
    }
}

@keyframes heroContentBeforeOnMobile {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 15px
    }
}

@keyframes loading-keyframes {
    0%,70% {
        transform: scale(1, 1)
    }

    35%,50% {
        background: #c20016;
        transform: scale(2.2, 2.2)
    }
}

h5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.rooster-toggle h5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.body-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .body-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .body-1 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.body-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .body-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .body-2 {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.caption {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .caption {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .caption {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.smallcaps {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    letter-spacing: 2px;
    line-height: 3;
    text-transform: uppercase
}

.rooster-toggle .smallcaps {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .smallcaps {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.row.full-height {
    height: 100%;
}

.light-font,
.light-font * {
    font-weight: 300 !important;
}

h1, .heading-1,
.heading-1 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1.33
}

@media print, screen and (min-width: 64em) {
    h1, .heading-1,
    .heading-1 * {
        font-size: 3.125rem;
        line-height: 1.2
    }
}

@media screen and (min-width: 100.0625em) {
    h1, .heading-1,
    .heading-1 * {
        font-size: 5rem;
        line-height: 1.09
    }
}

.rooster-toggle h1, .rooster-toggle .heading-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h2, .heading-2,
.heading-2 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 1.4
}

@media print, screen and (min-width: 64em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.rooster-toggle h2, .rooster-toggle .heading-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h3, .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5
}

@media print, screen and (min-width: 64em) {
    h3, .heading-3 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 100.0625em) {
    h3, .heading-3 {
        font-size: 2.1875rem;
        line-height: 1.14
    }
}

.rooster-toggle h3, .rooster-toggle .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h4, .heading-4,
.heading-4 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39
}

@media print, screen and (min-width: 64em) {
    h4, .heading-4,
    .heading-4 * {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    h4, .heading-4,
    .heading-4 * {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle h4, .rooster-toggle .heading-4 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h5, .heading-5,
.heading-5 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle h5, .rooster-toggle .heading-5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    h5, .heading-5,
    .heading-5 * {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.cta {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-right: 21px;
    position: relative;
    transition: all 0.2s ease-in-out
}

.rooster-toggle .cta {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .cta {
        font-size: .75rem;
        line-height: 1
    }
}

.cta::after {
    border-bottom: 1px solid #c20016;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    transition: all 0.2s ease-in-out;
    width: 0
}

.cta::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    line-height: inherit;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate3d(0, -50%, 0) rotate(0deg)
}

.cta.primary {
    background: #fff;
    border: 1px solid #c8c8c8;
    cursor: pointer;
    display: inline-block;
    padding: 20px 50px 19px 30px
}

@media screen and (max-width: 19.9375em) {
    .cta.primary {
        display: block;
        margin-right: 0
    }
}

@media print, screen and (min-width: 64em) {
    .cta.primary {
        padding: 24px 50px 23px 30px
    }
}

.cta.primary::before {
    right: 30px
}

.no-touch .cta.primary:hover::before {
    animation-duration: 0.5s;
    animation-name: cta-arrow;
    animation-timing-function: ease-in-out
}

.cta.primary:active {
    background-color: #f1f1f1
}

.cta.primary.navy {
    background: #28343d;
    border: 0;
    color: #fff
}

    .cta.primary.navy:active {
        background-color: #191f23
    }

    .cta.primary.navy::before {
        color: #fff
    }

.cta.primary.grey {
    background: #e4e9ec;
    border: 0;
    color: #28343d
}

    .cta.primary.grey:active {
        background-color: #dee3e6
    }

.cta.secondary {
    margin-bottom: 3px
}

    .cta.secondary:after {
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

.no-touch .cta.secondary:hover:after {
    transform: scaleX(1);
    visibility: visible
}

.cta.secondary:hover {
    color: #c20016
}

.cta.title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    text-transform: none
}

.rooster-toggle .cta.title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .cta.title {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.cta.title::before {
    height: 11px;
    line-height: unset
}

.cta.quickview {
    margin-bottom: 3px;
    padding-left: 20px
}

    .cta.quickview::before {
        background-color: #c20016;
        border-radius: 50%;
        content: '';
        height: 12px;
        left: 0;
        width: 12px
    }

    .cta.quickview::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e905';
        border: 0;
        color: #fff;
        font-size: .3125rem;
        left: 0.21rem;
        top: 3px
    }

.cta.on-image {
    background: rgba(0,0,0,0.4);
    color: #fff
}

    .cta.on-image::before {
        color: #fff
    }

    .cta.on-image:active {
        background-color: #0a0a0a
    }

.cta.on-navy {
    background: none;
    color: #fff
}

    .cta.on-navy::before {
        color: #fff
    }

.cta.with-icon {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    background: none;
    color: #fff;
    text-transform: none
}

.rooster-toggle .cta.with-icon {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .cta.with-icon {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.cta.with-icon::before {
    color: #fff
}

@media screen and (min-width: 64em) {
    .cta.with-icon::before {
        right: -16px
    }
}

.cta .icon {
    display: inline-block;
    min-width: 30px
}

    .cta .icon::after {
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%)
    }

.cta.disabled {
    background: #fff;
    color: #c8c8c8;
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .cta.disabled .icon {
        color: #c8c8c8
    }

    .cta.disabled::before {
        color: #c8c8c8
    }

.label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background: none
}

.rooster-toggle .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .label {
        font-size: .75rem;
        line-height: 1
    }
}

@keyframes cta-arrow {
    0% {
        transform: translate3d(0, -50%, 0) rotate(0deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(100%, -50%, 0) rotate(0deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(200%, -50%, 0) rotate(0deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(-100%, -50%, 0) rotate(0deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(0deg)
    }

    100% {
        transform: translate3d(0, -50%, 0) rotate(0deg)
    }
}

@keyframes cta-arrow-inline {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(100%, 0, 0) rotate(0deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(200%, 0, 0) rotate(0deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(0deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) rotate(0deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg)
    }
}

@keyframes cta-arrow-back {
    0% {
        transform: translate3d(0, -50%, 0) rotate(180deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(-100%, -50%, 0) rotate(180deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(-200%, -50%, 0) rotate(180deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(100%, -50%, 0) rotate(180deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(50%, -50%, 0) rotate(180deg)
    }

    100% {
        transform: translate3d(0, -50%, 0) rotate(180deg)
    }
}

@keyframes cta-arrow-back-inline {
    0% {
        transform: translate3d(0, 0, 0) rotate(180deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(-100%, 0, 0) rotate(180deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(-200%, 0, 0) rotate(180deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(180deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(50%, 0, 0) rotate(180deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(180deg)
    }
}

.touch .cta.secondary:hover::after {
    width: 0
}

.no-touch .cta.secondary {
    display: inline-block
}

.flatpickr-calendar {
    animation: none;
    background: #f9f9f9;
    border: 1px solid #c8c8c8;
    direction: ltr;
    font-size: .875rem;
    line-height: 24px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 30px;
    position: absolute;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    visibility: hidden;
    width: 220px
}

@media print, screen and (min-width: 64em) {
    .flatpickr-calendar {
        padding: 12px
    }
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
    max-height: 640px;
    opacity: 1;
    overflow: visible;
    visibility: visible
}

.flatpickr-calendar.open {
    display: inline-block;
    z-index: 99999
}

.flatpickr-calendar.animate.open {
    animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)
}

.flatpickr-calendar.inline {
    display: block;
    position: relative;
    top: 2px
}

.flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 2px)
}

    .flatpickr-calendar.static.open {
        display: block;
        right: 0;
        top: 58px;
        z-index: 999
    }

.flatpickr-calendar.hasWeeks {
    width: auto
}

    .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .flatpickr-calendar .hasWeeks .dayContainer {
        border-left: 0
    }

.flatpickr-calendar::before, .flatpickr-calendar::after {
    border: solid transparent;
    content: '';
    display: block;
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 11px;
    width: 0
}

.flatpickr-calendar.rightMost::before, .flatpickr-calendar.rightMost::after {
    left: auto;
    right: 20px
}

.flatpickr-calendar::before {
    border-width: 21px;
    margin: 0 -5px
}

.flatpickr-calendar::after {
    border-width: 20px;
    margin: 0 -4px
}

.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after {
    bottom: 100%
}

.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowBottom::before {
    border-bottom-color: #c8c8c8
}

.flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::after {
    border-bottom-color: #f9f9f9
}

.flatpickr-calendar:focus {
    outline: 0
}

.flatpickr-calendar .today-btn {
    font-size: .625rem;
    letter-spacing: 2px;
    padding-top: 10px;
    text-transform: uppercase
}

    .flatpickr-calendar .today-btn a {
        background-color: #fff;
        border: 1px solid #c8c8c8;
        display: block;
        margin: 0 auto;
        padding: 15px;
        text-align: center
    }

.flatpickr-calendar.animate .dayContainer.slideLeft {
    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1)
}

.flatpickr-calendar.animate .dayContainer.slideLeft, .flatpickr-calendar.animate .dayContainer.slideLeftNew {
    transform: translate3d(-100%, 0, 0)
}

.flatpickr-calendar.animate .dayContainer.slideLeftNew {
    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1)
}

.flatpickr-calendar.animate .dayContainer.slideRight {
    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate3d(100%, 0, 0)
}

.flatpickr-calendar.animate .dayContainer.slideRightNew {
    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1)
}

.flatpickr-month {
    background: transparent;
    color: #000;
    fill: #000;
    height: 28px;
    line-height: 1;
    overflow: hidden;
    padding-bottom: 10px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flatpickr-prev-month, .flatpickr-next-month {
    cursor: pointer;
    height: 28px;
    line-height: 16px;
    padding: 10px calc(3.57% - 1.5px);
    position: absolute;
    text-decoration: none;
    top: 5px;
    z-index: 3
}

.register-appliance .flatpickr-next-month {
    background: #f9f9f9
}

.register-appliance .flatpickr-prev-month {
    background: #f9f9f9
}

.flatpickr-prev-month::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    display: inline-block;
    font-size: 8px;
    transform: rotate(180deg)
}

.flatpickr-next-month::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    font-size: 8px
}

.flatpickr-prev-month i, .flatpickr-next-month i {
    position: relative
}

.flatpickr-prev-month.flatpickr-prev-month, .flatpickr-next-month.flatpickr-prev-month {
    left: 0
}

.flatpickr-prev-month.flatpickr-next-month, .flatpickr-next-month.flatpickr-next-month {
    right: 0
}

.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    color: #868d91
}

    .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg {
        fill: #c20016
    }

.flatpickr-prev-month svg, .flatpickr-next-month svg {
    display: none;
    fill: #c20016;
    width: 14px
}

    .flatpickr-prev-month svg path, .flatpickr-next-month svg path {
        fill: inherit;
        transition: fill 0.1s
    }

.numInputWrapper {
    height: auto;
    position: relative
}

    .numInputWrapper input, .numInputWrapper span {
        display: inline-block
    }

    .numInputWrapper input {
        width: 100%
    }

    .numInputWrapper span {
        border: 1px solid #3f454e;
        box-sizing: border-box;
        cursor: pointer;
        height: 50%;
        line-height: 50%;
        opacity: 0;
        padding: 0 4px 0 2px;
        position: absolute;
        right: 0;
        width: 14px
    }

        .numInputWrapper span:hover {
            background: rgba(0,0,0,0)
        }

        .numInputWrapper span:after {
            content: '';
            display: block;
            position: absolute;
            top: 33%
        }

        .numInputWrapper span.arrowUp {
            border-bottom: 0;
            top: 0
        }

            .numInputWrapper span.arrowUp:after {
                border-bottom: 4px solid #3f454e;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent
            }

        .numInputWrapper span.arrowDown {
            top: 50%
        }

            .numInputWrapper span.arrowDown:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid #3f454e
            }

        .numInputWrapper span svg {
            height: auto;
            width: inherit
        }

            .numInputWrapper span svg path {
                fill: #000
            }

    .numInputWrapper:hover {
        background: rgba(0,0,0,0)
    }

        .numInputWrapper:hover span {
            opacity: 1
        }

.flatpickr-current-month {
    color: inherit;
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 300;
    height: 28px;
    left: 12.5%;
    line-height: 1;
    padding: 0;
    padding-top: 6.16px;
    position: absolute;
    text-align: center;
    transform: translate3d(0, 0, 0);
    width: 75%
}

    .flatpickr-current-month.slideLeft {
        animation: fpFadeOut 400ms ease,fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transform: translate3d(-100%, 0, 0)
    }

    .flatpickr-current-month.slideLeftNew {
        animation: fpFadeIn 400ms ease,fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transform: translate3d(100%, 0, 0)
    }

    .flatpickr-current-month.slideRight {
        animation: fpFadeOut 400ms ease,fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transform: translate3d(100%, 0, 0)
    }

    .flatpickr-current-month.slideRightNew {
        animation: fpFadeIn 400ms ease,fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transform: translate3d(0, 0, 0)
    }

    .flatpickr-current-month span.cur-month {
        color: inherit;
        display: inline-block;
        font-family: inherit;
        font-weight: 700;
        margin-left: 0.5ch;
        padding: 0
    }

        .flatpickr-current-month span.cur-month:hover {
            background: rgba(0,0,0,0)
        }

    .flatpickr-current-month .numInputWrapper {
        display: inline-block;
        width: 7ch
    }

        .flatpickr-current-month .numInputWrapper span.arrowUp:after {
            border-bottom-color: #000
        }

        .flatpickr-current-month .numInputWrapper span.arrowDown:after {
            border-top-color: #000
        }

    .flatpickr-current-month input.cur-year {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
        color: inherit;
        cursor: default;
        display: inline-block;
        font-family: inherit;
        font-size: .875rem;
        font-weight: bold;
        height: initial;
        line-height: inherit;
        margin: 0;
        padding: 0 0 0 0.5ch;
        vertical-align: initial
    }

        .flatpickr-current-month input.cur-year:focus {
            outline: 0
        }

        .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
            background: transparent;
            color: #000;
            font-size: 1.125rem;
            pointer-events: none
        }

.flatpickr-weekdays, .flatpickr-weekdaycontainer {
    -ms-flex-align: center;
    align-items: center;
    background: transparent;
    display: -ms-flexbox;
    display: flex;
    height: 28px;
    overflow: hidden;
    text-align: center;
    width: 100%
}

span.flatpickr-weekday {
    background: transparent;
    color: #000;
    cursor: default;
    display: block;
    -ms-flex: 1;
    flex: 1;
    font-size: .75rem;
    font-weight: bolder;
    line-height: 1;
    margin: 0;
    text-align: center
}

.dayContainer, .flatpickr-weeks {
    padding: 1px 0 0
}

.flatpickr-days {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    position: relative;
    width: 220px
}

    .flatpickr-days:focus {
        outline: 0
    }

.dayContainer {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    max-width: 220px;
    min-width: 220px;
    opacity: 1;
    outline: 0;
    padding: 0;
    text-align: left;
    transform: translate3d(0, 0, 0);
    width: 220px
}

.flatpickr-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 150px;
    box-sizing: border-box;
    color: #3f454e;
    cursor: pointer;
    display: inline-block;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    font-weight: 400;
    height: 32px;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 32px;
    margin: 0;
    max-width: 32px;
    position: relative;
    text-align: center;
    width: 14.2857143%
}

    .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
        background: #d8d8d8;
        border-color: #d8d8d8;
        cursor: pointer;
        outline: 0
    }

    .flatpickr-day.today, .flatpickr-day.today.nextMonthDay, .flatpickr-day.today:hover, .flatpickr-day.today:focus {
        background: #fff;
        border-color: #262626;
        color: #262626
    }

    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: #262626;
        border-color: #262626;
        box-shadow: none;
        color: #fff
    }

        .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
            border-radius: 50px 0 0 50px
        }

        .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
            border-radius: 0 50px 50px 0
        }

        .flatpickr-day.selected.startRange + .endRange, .flatpickr-day.startRange.startRange + .endRange, .flatpickr-day.endRange.startRange + .endRange {
            box-shadow: -10px 0 0 #262626
        }

        .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
            border-radius: 50px
        }

    .flatpickr-day.inRange {
        border-radius: 0;
        box-shadow: -5px 0 0 #d8d8d8,5px 0 0 #d8d8d8
    }

    .flatpickr-day.disabled, .flatpickr-day.disabled:hover {
        opacity: 0.5;
        pointer-events: none
    }

        .flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
            background: transparent;
            border-color: transparent;
            color: #3f454e;
            cursor: default
        }

    .flatpickr-day.week.selected {
        border-radius: 0;
        box-shadow: -5px 0 0 #262626,5px 0 0 #262626
    }

.rangeMode .flatpickr-day {
    margin-top: 1px
}

.flatpickr-weekwrapper {
    display: inline-block;
}

    .flatpickr-weekwrapper .flatpickr-weeks {
        box-shadow: 1px 0 0 #d8d8d8;
        padding: 0 12px
    }

    .flatpickr-weekwrapper .flatpickr-weekday {
        float: none;
        line-height: 28px;
        width: 100%
    }

    .flatpickr-weekwrapper span.flatpickr-day {
        display: block;
        max-width: none;
        width: 100%
    }

.flatpickr-innerContainer {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.flatpickr-rContainer {
    box-sizing: border-box;
    display: inline-block;
    padding: 0
}

.flatpickr-input[readonly] {
    cursor: pointer
}

.flatpickr-time {
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    line-height: 40px;
    padding-top: 10px
}

    .flatpickr-time .numInputWrapper {
        height: 40px;
        width: 40%
    }

        .flatpickr-time .numInputWrapper:hover {
            background: #f1f1f1
        }

        .flatpickr-time .numInputWrapper span {
            border-color: #c8c8c8
        }

    .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
        display: inline-block;
        height: inherit;
        line-height: inherit;
        width: 2%
    }

    .flatpickr-time .flatpickr-time-separator {
        font-weight: bold
    }

    .flatpickr-time .flatpickr-am-pm {
        cursor: pointer;
        text-align: center;
        width: 18%
    }

    .flatpickr-time input {
        background: rgba(0,0,0,0);
        border: 0;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 14px;
        height: inherit;
        line-height: inherit;
        margin: 0;
        padding: 0;
        text-align: center
    }

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fpSlideLeft {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fpSlideLeftNew {
    from {
        transform: translate3d(100%, 0, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fpSlideRight {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fpSlideRightNew {
    from {
        transform: translate3d(-100%, 0, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fpFadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fpFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes heroTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobile {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobileClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }
}

@keyframes heroContentBeforeOnDesktop {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 72px
    }
}

@keyframes heroContentBeforeOnTablet {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 37px
    }
}

@keyframes heroContentBeforeOnMobile {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 15px
    }
}

@keyframes loading-keyframes {
    0%,70% {
        transform: scale(1, 1)
    }

    35%,50% {
        background: #c20016;
        transform: scale(2.2, 2.2)
    }
}


@keyframes heroTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslation {
    0% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobile {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes siteSwitchContainerTranslationClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -50px, 0)
    }
}

@keyframes siteSwitchContainerTranslationInMobileClose {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0)
    }
}

@keyframes heroContentBeforeOnDesktop {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 72px
    }
}

@keyframes heroContentBeforeOnTablet {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 37px
    }
}

@keyframes heroContentBeforeOnMobile {
    0% {
        opacity: 0;
        width: 0
    }

    100% {
        opacity: 1;
        width: 15px
    }
}

@keyframes loading-keyframes {
    0%,70% {
        transform: scale(1, 1)
    }

    35%,50% {
        background: #c20016;
        transform: scale(2.2, 2.2)
    }
}

h5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.rooster-toggle h5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.body-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .body-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .body-1 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.body-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .body-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .body-2 {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.caption {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .caption {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .caption {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.smallcaps {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    letter-spacing: 2px;
    line-height: 3;
    text-transform: uppercase
}

.rooster-toggle .smallcaps {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .smallcaps {
        font-size: .9375rem;
        line-height: 1.33
    }
}

h1, .heading-1,
.heading-1 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1.33
}

@media print, screen and (min-width: 64em) {
    h1, .heading-1,
    .heading-1 * {
        font-size: 3.125rem;
        line-height: 1.2
    }
}

@media screen and (min-width: 100.0625em) {
    h1, .heading-1,
    .heading-1 * {
        font-size: 5rem;
        line-height: 1.09
    }
}

.rooster-toggle h1, .rooster-toggle .heading-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h2, .heading-2,
.heading-2 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 1.4
}

@media print, screen and (min-width: 64em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    h2, .heading-2,
    .heading-2 * {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.rooster-toggle h2, .rooster-toggle .heading-2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h3, .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5
}

@media print, screen and (min-width: 64em) {
    h3, .heading-3 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 100.0625em) {
    h3, .heading-3 {
        font-size: 2.1875rem;
        line-height: 1.14
    }
}

.rooster-toggle h3, .rooster-toggle .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h4, .heading-4,
.heading-4 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39
}

@media print, screen and (min-width: 64em) {
    h4, .heading-4,
    .heading-4 * {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    h4, .heading-4,
    .heading-4 * {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle h4, .rooster-toggle .heading-4 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

h5, .heading-5,
.heading-5 * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle h5, .rooster-toggle .heading-5 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    h5, .heading-5,
    .heading-5 * {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.cta {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-right: 21px;
    position: relative;
    transition: all 0.2s ease-in-out
}

.rooster-toggle .cta {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .cta {
        font-size: .75rem;
        line-height: 1
    }
}

.cta::after {
    border-bottom: 1px solid #c20016;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    transition: all 0.2s ease-in-out;
    width: 0
}

.cta::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    line-height: inherit;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate3d(0, -50%, 0) rotate(0deg)
}

.cta.primary {
    background: #fff;
    border: 1px solid #c8c8c8;
    cursor: pointer;
    display: inline-block;
    padding: 20px 50px 19px 30px
}

@media screen and (max-width: 19.9375em) {
    .cta.primary {
        display: block;
        margin-right: 0
    }
}

@media print, screen and (min-width: 64em) {
    .cta.primary {
        padding: 24px 50px 23px 30px
    }
}

.cta.primary::before {
    right: 30px
}

.no-touch .cta.primary:hover::before {
    animation-duration: 0.5s;
    animation-name: cta-arrow;
    animation-timing-function: ease-in-out
}

.cta.primary:active {
    background-color: #f1f1f1
}

.cta.primary.navy {
    background: #28343d;
    border: 0;
    color: #fff
}

    .cta.primary.navy:active {
        background-color: #191f23
    }

    .cta.primary.navy::before {
        color: #fff
    }

.cta.primary.grey {
    background: #e4e9ec;
    border: 0;
    color: #28343d
}

    .cta.primary.grey:active {
        background-color: #dee3e6
    }

.cta.secondary {
    margin-bottom: 3px
}

    .cta.secondary:after {
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

.no-touch .cta.secondary:hover:after {
    transform: scaleX(1);
    visibility: visible
}

.cta.secondary:hover {
    color: #c20016
}

.cta.title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    text-transform: none
}

.rooster-toggle .cta.title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .cta.title {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.cta.title::before {
    height: 11px;
    line-height: unset
}

.cta.quickview {
    margin-bottom: 3px;
    padding-left: 20px
}

    .cta.quickview::before {
        background-color: #c20016;
        border-radius: 50%;
        content: '';
        height: 12px;
        left: 0;
        width: 12px
    }

    .cta.quickview::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e905';
        border: 0;
        color: #fff;
        font-size: .3125rem;
        left: 0.21rem;
        top: 3px
    }

.cta.on-image {
    background: rgba(0,0,0,0.4);
    color: #fff
}

    .cta.on-image::before {
        color: #fff
    }

    .cta.on-image:active {
        background-color: #000
    }

.cta.on-navy {
    background: none;
    color: #fff
}

    .cta.on-navy::before {
        color: #fff
    }

.cta.with-icon {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    background: none;
    color: #fff;
    text-transform: none
}

.rooster-toggle .cta.with-icon {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .cta.with-icon {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.cta.with-icon::before {
    color: #fff
}

@media screen and (min-width: 64em) {
    .cta.with-icon::before {
        right: -16px
    }
}

.cta .icon {
    display: inline-block;
    min-width: 30px
}

    .cta .icon::after {
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%)
    }

.cta.disabled {
    background: #fff;
    color: #c8c8c8;
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .cta.disabled .icon {
        color: #c8c8c8
    }

    .cta.disabled::before {
        color: #c8c8c8
    }

.label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background: none
}

.rooster-toggle .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .label {
        font-size: .75rem;
        line-height: 1
    }
}

@keyframes cta-arrow {
    0% {
        transform: translate3d(0, -50%, 0) rotate(0deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(100%, -50%, 0) rotate(0deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(200%, -50%, 0) rotate(0deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(-100%, -50%, 0) rotate(0deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(0deg)
    }

    100% {
        transform: translate3d(0, -50%, 0) rotate(0deg)
    }
}

@keyframes cta-arrow-inline {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(100%, 0, 0) rotate(0deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(200%, 0, 0) rotate(0deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(0deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) rotate(0deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg)
    }
}

@keyframes cta-arrow-back {
    0% {
        transform: translate3d(0, -50%, 0) rotate(180deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(-100%, -50%, 0) rotate(180deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(-200%, -50%, 0) rotate(180deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(100%, -50%, 0) rotate(180deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(50%, -50%, 0) rotate(180deg)
    }

    100% {
        transform: translate3d(0, -50%, 0) rotate(180deg)
    }
}

@keyframes cta-arrow-back-inline {
    0% {
        transform: translate3d(0, 0, 0) rotate(180deg)
    }

    25% {
        opacity: 1;
        transform: translate3d(-100%, 0, 0) rotate(180deg)
    }

    50% {
        opacity: 0;
        transform: translate3d(-200%, 0, 0) rotate(180deg)
    }

    51% {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(180deg)
    }

    75% {
        opacity: 1;
        transform: translate3d(50%, 0, 0) rotate(180deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(180deg)
    }
}

.touch .cta.secondary:hover::after {
    width: 0
}

.no-touch .cta.secondary {
    display: inline-block
}

* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

html.iphone.js-nav-open, html.iphone.js-modal-active, html.iphone.js-filtering-sidebar-active, html.iphone.js-account-switcher-active, html.ipad.js-nav-open, html.ipad.js-modal-active, html.ipad.js-filtering-sidebar-active, html.ipad.js-account-switcher-active {
    overflow: hidden;
    height: 100%;
    position: fixed;
    transform: translate3d(0, 0, 0);
    max-width: 100vw;
    width: 100%
}

    html.iphone.js-nav-open body.js-nav-open, html.iphone.js-nav-open body.js-modal-active, html.iphone.js-nav-open body.js-filtering-sidebar-active, html.iphone.js-nav-open body.js-account-switcher-active, html.iphone.js-modal-active body.js-nav-open, html.iphone.js-modal-active body.js-modal-active, html.iphone.js-modal-active body.js-filtering-sidebar-active, html.iphone.js-modal-active body.js-account-switcher-active, html.iphone.js-filtering-sidebar-active body.js-nav-open, html.iphone.js-filtering-sidebar-active body.js-modal-active, html.iphone.js-filtering-sidebar-active body.js-filtering-sidebar-active, html.iphone.js-filtering-sidebar-active body.js-account-switcher-active, html.iphone.js-account-switcher-active body.js-nav-open, html.iphone.js-account-switcher-active body.js-modal-active, html.iphone.js-account-switcher-active body.js-filtering-sidebar-active, html.iphone.js-account-switcher-active body.js-account-switcher-active, html.ipad.js-nav-open body.js-nav-open, html.ipad.js-nav-open body.js-modal-active, html.ipad.js-nav-open body.js-filtering-sidebar-active, html.ipad.js-nav-open body.js-account-switcher-active, html.ipad.js-modal-active body.js-nav-open, html.ipad.js-modal-active body.js-modal-active, html.ipad.js-modal-active body.js-filtering-sidebar-active, html.ipad.js-modal-active body.js-account-switcher-active, html.ipad.js-filtering-sidebar-active body.js-nav-open, html.ipad.js-filtering-sidebar-active body.js-modal-active, html.ipad.js-filtering-sidebar-active body.js-filtering-sidebar-active, html.ipad.js-filtering-sidebar-active body.js-account-switcher-active, html.ipad.js-account-switcher-active body.js-nav-open, html.ipad.js-account-switcher-active body.js-modal-active, html.ipad.js-account-switcher-active body.js-filtering-sidebar-active, html.ipad.js-account-switcher-active body.js-account-switcher-active {
        height: 100%;
        position: relative
    }

html.iphone {
    height: auto
}

body {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #28343d;
    margin: 0;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

    body.theme-online-account {
        background-color: #f1f1f1
    }

    body.rooster-toggle, body.rooster-toggle * {
        font-family: "Rooster",sans-serif
    }

    body.loading {
        overflow: hidden
    }

        body.loading .nav__backdrop {
            background-color: rgba(0,0,0,0.4);
            display: block
        }

    body .form-disabled-overlay {
        background-color: rgba(255,255,255,0.5);
        bottom: auto;
        height: 100%;
        opacity: 0;
        left: 0;
        position: absolute;
        right: auto;
        top: 0;
        transition: 0.3s ease-in-out 0s;
        visibility: hidden;
        width: 100%
    }

    body.js-modal-active, body.js-filtering-sidebar-active, body.js-account-switcher-active {
        overflow: hidden;
        -webkit-overflow-scrolling: auto
    }

    body.js-nav-open {
        overflow: hidden;
        -webkit-overflow-scrolling: auto
    }

        body.js-nav-open .header__blur-mask {
            display: block
        }

@media screen and (max-width: 47.9375em) {
    body.js-nav-open .header__blur-mask {
        height: 100%;
        left: auto;
        width: 16.8vw;
        z-index: 4
    }
}

body.header__blur-mask--active .header__blur-mask {
    display: block
}

@media screen and (max-width: 47.9375em) {
    body.header__blur-mask--active.js-login-open .header__blur-mask {
        display: none
    }
}

body .header__blur-mask {
    content: "";
    position: fixed;
    display: none;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2)
}

.hidden-accessible {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden
}

a {
    color: #28343d
}

    a [data-component=lazy] {
        display: inline-block;
        margin: 50px 0
    }

    a:hover {
        color: #28343d
    }

@media screen and (max-width: 63.9375em) {
    iframe {
        width: 100%;
        max-width: 100%
    }
}

.align-middle {
    margin: 0 auto
}

.alt-anchor {
    border-bottom: 1px solid #c20016;
    display: inline-block
}

.w-body-popup {
    background: #fff;
    display: none
}

    .w-body-popup .body-popup {
        padding: 75px 0 30px;
        position: relative
    }

@media print, screen and (min-width: 64em) {
    .w-body-popup .body-popup {
        padding: 45px 0 90px
    }
}

.w-text a {
    border-bottom: none;
    color: #4a90e2;
    text-decoration: underline
}

    .w-text a:hover, .w-text a:focus {
        color: #28343d
    }

.overlay-bg {
    background: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.6;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 4
}

.w-overlay-popup {
    left: 0;
    position: fixed;
    right: 0;
    top: 5%;
    width: 100%;
    z-index: 5
}

@media screen and (max-width: 63.9375em) {
    .w-overlay-popup {
        margin: 0;
        width: 100%
    }
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .w-overlay-popup {
        margin: 0 auto;
        max-width: 75rem
    }
}

.w-overlay-popup .container {
    padding: 0
}

.w-overlay-popup .w-body-popup {
    display: block
}

.w-overlay-popup .description {
    width: 100%
}

.w-overlay-popup .close-overlay {
    background-color: #fff;
    border: solid 1px #c8c8c8;
    border-radius: 50%;
    cursor: pointer;
    height: 35px;
    margin: 5% 2%;
    position: absolute;
    right: 0;
    top: 0;
    width: 35px
}

    .w-overlay-popup .close-overlay::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        color: #c20016;
        font-size: .625rem;
        height: 11px;
        left: 12px;
        position: relative;
        top: 7px;
        width: 11px
    }

.w-overlay-popup .w-register-appliance-popup {
    height: 93vh;
    margin: auto;
    overflow-y: auto
}

    .w-overlay-popup .w-register-appliance-popup .register-appliance-popup {
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: auto;
        overflow: auto
    }

.w-overlay-popup .subsection {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    font-size: .9375rem;
    margin: 0 auto 26px
}

.w-overlay-popup .w-appliance-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

.w-overlay-popup .w-appliance {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 26px 13px 0
}

@media screen and (max-width: 63.9375em) {
    .w-overlay-popup .w-appliance {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

.w-overlay-popup .w-appliance .w-media {
    width: calc(33.3333333333% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width: 63.9375em) {
    .w-overlay-popup .w-appliance .media {
        max-width: 95%
    }
}

.w-overlay-popup .w-appliance .w-text {
    width: calc(66.6666666667% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    border-left: 1px solid #c8c8c8;
    box-sizing: border-box;
    margin-left: 0;
    padding: 26px 15px
}

@media screen and (max-width: 63.9375em) {
    .w-overlay-popup .w-appliance .w-text {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: 0
    }
}

.w-overlay-popup .w-appliance .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem;
    font-weight: 700
}

textarea {
    resize: none
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.img-wrapper {
    height: 0;
    position: relative;
    width: 100%
}

    .img-wrapper.box {
        background: #28343d
    }

    .img-wrapper img {
        left: 0;
        position: absolute;
        width: 100%
    }

    .img-wrapper.aspect-16-9 {
        padding-bottom: 56.25%
    }

    .img-wrapper.aspect-1-1 {
        padding-bottom: 100%
    }

    .img-wrapper.aspect-hero {
        padding-bottom: 35.5%
    }

    .img-wrapper.resize {
        height: 0;
        overflow: hidden;
        position: relative
    }

        .img-wrapper.resize img {
            left: 50%;
            max-height: 100%;
            max-width: 100%;
            position: absolute;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            width: auto
        }

.lazyload, .lazyloading {
    display: block;
    opacity: 0;
    visibility: hidden
}

    .lazyload:not([src]) {
        visibility: hidden
    }

.lazyloaded {
    opacity: 1;
    transition: opacity 800ms cubic-bezier(0.2, 0, 0.2, 1),visibility 800ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: visible
}

.iphone.old-iphone .lazyloaded {
    transition: none
}

.img-fluid {
    height: auto;
    width: 100%
}

.iphone.old-iphone .img-fluid {
    height: 100%;
    max-height: none;
    object-fit: contain;
    width: 100%
}

.not-visible {
    display: none
}

.no-js .lazyload, .no-js .lazyloading {
    opacity: 1
}

.no-js .lazyload {
    display: none
}

.no-js .load-more-section.not-visible {
    display: block
}

.no-js picture img {
    display: none
}

.no-js .img-no-script {
    width: 100%
}

.container {
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
    max-width: 94.25rem;
    margin: 0 auto
}

@media print, screen and (min-width: 30.0625em) {
    .container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}



.container .grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

@media print, screen and (min-width: 48em) {
    .container .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 30.0625em) {
    .container .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 48em) {
    .container .grid {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 64em) {
    .container .grid {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.container .grid .column {
    position: relative
}

.grid-narrow {
    max-width: 586px;
    margin: 0 auto
}

@media screen and (max-width: 63.9375em) {
    .grid-narrow {
        max-width: 472px
    }
}

@media screen and (max-width: 47.9375em) {
    .grid-narrow {
        max-width: 100%;
        padding: 0 8px
    }
}

.grid-mid {
    max-width: 760px;
    margin: 0 auto
}

@media screen and (max-width: 63.9375em) {
    .grid-mid {
        max-width: 687px
    }
}

@media screen and (max-width: 47.9375em) {
    .grid-mid {
        max-width: 100%;
        padding: 0 16px
    }
}

.grid-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

@media screen and (max-width: 63.9375em) {
    .grid-wide {
        max-width: 100%
    }
}

@media screen and (max-width: 47.9375em) {
    .grid-wide {
        padding: 0 8px
    }
}

.icon {
    background: #fff
}

    .icon .icon-type {
        color: #c20016
    }

    .icon:hover {
        background-color: #c20016
    }

        .icon:hover .icon-type {
            color: #fff
        }

    .icon.arrow {
        border: 1px solid #c8c8c8;
        border-radius: 50%;
        cursor: pointer;
        height: 45px;
        width: 45px
    }

        .icon.arrow::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e900';
            border: 0;
            color: #c20016;
            font-size: .6875rem;
            left: 0.21rem;
            top: 3px
        }

        .icon.arrow:hover {
            background-color: #f1f1f1
        }

        .icon.arrow.left {
            transform: rotate(-180deg)
        }

        .icon.arrow.disabled {
            background: #fff;
            color: #c8c8c8;
            cursor: default;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-color: #c8c8c8
        }

            .icon.arrow.disabled .icon {
                color: #c8c8c8
            }

            .icon.arrow.disabled::after {
                color: #c8c8c8
            }

        .icon.arrow:not(.disabled) {
            background: #fff;
            border-color: #c8c8c8;
            overflow: hidden
        }

            .icon.arrow:not(.disabled)::after {
                color: #c20016
            }

            .icon.arrow:not(.disabled):hover::after {
                color: #c20016
            }

.no-touch .icon.arrow:not(.disabled):hover::after {
    color: #fff
}

.no-touch .icon.arrow:not(.disabled):hover {
    background-color: #c20016;
    border-color: #c20016
}

.no-scroll {
    overflow: hidden;
    width: 100%
}

.iphone .no-scroll, .ipad .no-scroll {
    position: fixed
}

.skip-to-content {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    top: 0;
    left: 0;
    height: 1px;
    padding: 2px 10px;
    width: 1px;
    overflow: hidden;
    background-color: #28343d;
    border: none
}

    .skip-to-content:focus {
        height: auto;
        width: auto;
        z-index: 4;
        clip: auto;
        color: #fff
    }

.main {
    overflow: hidden;
    position: relative;
    margin-top: 114px;
}

.safari .main {
    overflow: visible
}

@media print, screen and (min-width: 64em) {
    .main {
        position: relative;
        z-index: 1
    }
}

@media print, screen and (min-width: 64em) {
    main:not(.full-screen), .header-bar, .header__bar-bottom {
        display: block;
        margin: 0 auto;
        max-width: 1600px
    }
}

main, .footer {
    transition: filter 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

body .header__blur-mask, .js-nav-open .main, .js-filtering-sidebar-active .main, .js-modal-overlay-active .main, .js-account-switcher-active .main, .header__blur-mask--active .main, .js-nav-open .footer, .js-filtering-sidebar-active .footer, .js-modal-overlay-active .footer, .js-account-switcher-active .footer, .header__blur-mask--active .footer {
    filter: blur(5px)
}

/*trying to blur*/
.header__blur-mask {
    filter: blur(5px)
}

.js-nav-open footer .container, .js-account-switcher-active footer .container {
    filter: blur(5px)
}

.js-modal-overlay-active .header, .js-account-switcher-active .header {
    filter: blur(5px)
}

.read-more {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .read-more__body--desktop {
        display: none
    }
}

.read-more__body--tablet {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .read-more__body--tablet {
        display: block
    }
}

@media screen and (max-width: 47.9375em) {
    .read-more__body--tablet {
        display: none
    }
}

.read-more__body--mobile {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .read-more__body--mobile {
        display: block
    }
}

.read-more .label {
    display: inline-block;
    position: relative
}

    .read-more .label a::after {
        content: '';
        height: 12px;
        position: absolute;
        width: 16px;
        z-index: 1
    }

.read-more .remaining, .read-more .show {
    margin: 0 0 10px
}

.read-more .see-more {
    cursor: pointer;
    font-size: .75rem;
    margin: 10px 0
}

.read-more.default-state .label::before {
    background-color: #c20016;
    content: '';
    height: 8px;
    position: absolute;
    right: -12px;
    transition: all 0.5s ease;
    transform: rotate(0deg);
    width: 2px;
    top: 1px
}

@media screen and (min-width: 100.0625em) {
    .read-more.default-state .label::before {
        top: 3px
    }
}

.read-more.default-state .label::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: -15px;
    transition: all 0.5s ease;
    transform: rotate(180deg);
    width: 8px;
    top: 4px
}

@media screen and (min-width: 100.0625em) {
    .read-more.default-state .label::after {
        top: 6px
    }
}

.read-more.default-state .less, .read-more.default-state .remaining {
    display: none
}

.no-js .read-more.default-state .less, .no-js .read-more.default-state .remaining {
    display: inline
}

.read-more.full-state .label::before {
    background-color: #c20016;
    content: '';
    height: 8px;
    position: absolute;
    right: -12px;
    transition: all 0.5s ease;
    transform: rotate(90deg);
    width: 2px;
    top: 2px
}

@media screen and (min-width: 100.0625em) {
    .read-more.full-state .label::before {
        top: 4px
    }
}

.read-more.full-state .label::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: -15px;
    transition: all 0.5s ease;
    transform: rotate(360deg);
    width: 8px;
    top: 5px
}

@media screen and (min-width: 100.0625em) {
    .read-more.full-state .label::after {
        top: 7px
    }
}

.read-more.full-state .less, .read-more.full-state .remaining {
    display: inline
}

.read-more.full-state .more {
    display: none
}

.read-more.full-state.list-variant .remaining {
    display: block;
    margin: 10px 0
}

.read-more.list-variant {
    font-size: .9375rem
}

    .read-more.list-variant .list {
        margin-top: 16px
    }

.sort-container {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .sort-container {
        border: 1px solid #c8c8c8;
        bottom: 10px;
        left: calc(50% + 0.6rem);
        padding: 18px 20px;
        position: absolute;
        width: calc(50% - (42px + 0.625rem))
    }
}

@media print, screen and (min-width: 64em) {
    .sort-container {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        text-align: right
    }

        .sort-container .sortitems-selected-value.label {
            font-size: .9375rem;
            font-style: normal;
            font-weight: 300;
            letter-spacing: 0;
            text-transform: none
        }
}

.sort-container .sort-by-text {
    color: #868d91
}

@media screen and (max-width: 63.9375em) {
    .sort-container .sort-by-text {
        color: #28343d;
        display: block
    }

        .sort-container .sort-by-text::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: 7px;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #c20016;
            margin-top: -5px;
            position: absolute;
            right: 18px;
            top: 50%;
            transform: rotate(90deg)
        }
}

@media screen and (min-width: 64em) {
    .sort-container .sort-by-text::after {
        content: ':'
    }
}



@media screen and (min-width: 64em) {
    .sort-container .sort-select {
        display: none;
        padding-left: 10px;
        padding-right: 20px
    }
}

@media screen and (max-width: 63.9375em) {
    .sort-container .sort-select {
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%
    }
}

.sort-container .sortitems-selected-value {
    background: #f9f9f9;
    box-sizing: border-box;
    display: inline-block;
    min-width: 207px;
    padding: 0 10px;
    text-align: left
}

@media screen and (min-width: 64em) {
    .sort-container .sortitems-selected-value {
        border: 1px solid #dedede;
        padding: 10px 30px 10px 10px
    }

        .sort-container .sortitems-selected-value::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: 7px;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #28343d;
            margin-top: -4px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: rotate(90deg);
            transition: all 675ms ease
        }

        .sort-container .sortitems-selected-value.collapse::after {
            transform: rotate(270deg);
            transition: all 675ms ease
        }
}

@media screen and (max-width: 63.9375em) {
    .sort-container .sortitems-selected-value {
        display: none
    }
}

.sort-container .select-dropdown {
    background: #fff;
    border: 1px solid #dedede;
    border-top: 0;
    box-sizing: border-box;
    display: none;
    float: right;
    font-size: .875rem;
    max-height: 200px;
    min-width: 207px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 37px;
    transition: all 675ms ease;
    z-index: 3
}

@media screen and (max-width: 63.9375em) {
    .sort-container .select-dropdown {
        display: none
    }
}

.sort-container .select-dropdown ul {
    font-weight: 300;
    margin: 0
}

.sort-container .select-dropdown li {
    list-style: none;
    text-align: left
}

    .sort-container .select-dropdown li a {
        display: block;
        padding: 7px 10px
    }

        .sort-container .select-dropdown li a:focus, .sort-container .select-dropdown li a:hover {
            background: #f5f5f5;
            border-bottom: 0
        }

    .sort-container .select-dropdown li.selected {
        font-weight: 700
    }

.sort-container .select-dropdown .selected a {
    pointer-events: none
}

.sort-container .select-dropdown a {
    color: #28343d
}

.sort-container .select-dropdown li:hover a, .sort-container .select-dropdown li a:focus {
    color: #000;
    cursor: pointer
}

.selected-filter {
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 15px;
    margin-top: 10px;
    padding-bottom: 0
}

@media print, screen and (min-width: 64em) {
    .selected-filter {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }
}

.selected-filter > * {
    width: 100%
}

.selected-filter > div {
    padding-bottom: 20px
}

.selected-filter .selected-text {
    font-size: .8125rem;
    padding-right: 10px
}

.selected-filter .filter-title {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 1.4;
    margin-bottom: 20px
}

@media print, screen and (min-width: 64em) {
    .selected-filter .filter-title {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .selected-filter .filter-title {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .selected-filter .filter-title {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.rooster-toggle .selected-filter .filter-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.selected-filter .clear-all {
    border-left: 1px solid #c8c8c8;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 5px;
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .selected-filter .clear-all {
        border: 0;
        float: right
    }
}

.selected-filter .clear-all::after {
    background-color: #c20016;
    content: '';
    height: 9px;
    position: absolute;
    right: 2px;
    transition: all 0.5s ease;
    transform: rotate(135deg);
    width: 2px;
    top: 7px
}

.selected-filter .clear-all::before {
    background-color: #c20016;
    content: '';
    height: 9px;
    position: absolute;
    right: 2px;
    transition: all 0.5s ease;
    transform: rotate(225deg);
    width: 2px;
    top: 7px
}

.selected-filter .clear-all:hover::after {
    background-color: #c20016;
    content: '';
    height: 9px;
    position: absolute;
    right: 2px;
    transition: all 0.5s ease;
    transform: rotate(315deg);
    width: 2px
}

.selected-filter .clear-all:hover::before {
    background-color: #c20016;
    content: '';
    height: 9px;
    position: absolute;
    right: 2px;
    transition: all 0.5s ease;
    transform: rotate(405deg);
    width: 2px
}

.selected-filter .filter {
    background-color: #f1f1f1;
    border-radius: 3px;
    display: inline-block;
    font-size: .8125rem;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 3px 25px 3px 10px;
    position: relative
}

    .selected-filter .filter::after {
        background-color: #c20016;
        content: '';
        height: 9px;
        position: absolute;
        right: 12px;
        transition: all 0.5s ease;
        transform: rotate(135deg);
        width: 1px;
        background-color: #28343d;
        top: 7px
    }

    .selected-filter .filter::before {
        background-color: #c20016;
        content: '';
        height: 9px;
        position: absolute;
        right: 12px;
        transition: all 0.5s ease;
        transform: rotate(225deg);
        width: 1px;
        background-color: #28343d;
        top: 7px
    }

    .selected-filter .filter:hover::after {
        background-color: #c20016;
        content: '';
        height: 9px;
        position: absolute;
        right: 12px;
        transition: all 0.5s ease;
        transform: rotate(315deg);
        width: 1px;
        background-color: #28343d
    }

    .selected-filter .filter:hover::before {
        background-color: #c20016;
        content: '';
        height: 9px;
        position: absolute;
        right: 12px;
        transition: all 0.5s ease;
        transform: rotate(405deg);
        width: 1px;
        background-color: #28343d
    }

    .selected-filter .filter.disabled {
        cursor: default;
        opacity: 0.5;
        pointer-events: none
    }


input::-ms-clear {
    height: 0;
    width: 0
}



.w-count-sort {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding: 10px 0
}

@media print, screen and (min-width: 64em) {
    .w-count-sort .title-container {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.w-count-sort .title-container .title {
    color: #71777b
}

.w-count-sort .title-container .dark {
    color: #28343d
}

@media screen and (max-width: 63.9375em) {
    .w-count-sort .sort-container {
        display: none
    }
}

.tooltip {
    position: relative
}

    .tooltip .tooltip-text {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .625rem;
        line-height: 1.1;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #28343d;
        background-color: #fff;
        border: 1px solid #c8c8c8;
        bottom: 27px;
        font-weight: 400;
        left: 50%;
        margin-left: -2px;
        min-width: 40px;
        padding: 7px 5px;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        visibility: hidden;
        white-space: nowrap;
        z-index: 1
    }

.rooster-toggle .tooltip .tooltip-text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .tooltip .tooltip-text {
        font-size: .75rem;
        line-height: 1
    }
}

.tooltip .tooltip-text::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #c8c8c8;
    bottom: -7px;
    content: '';
    left: 50%;
    line-height: 0;
    margin-left: -5px;
    position: absolute;
    width: 0
}

.tooltip .tooltip-text::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    bottom: -5px;
    content: '';
    left: 50%;
    line-height: 0;
    margin-left: -4px;
    position: absolute;
    width: 0
}

.no-touch .tooltip:hover .tooltip-text {
    visibility: visible
}

.w-rte {
    max-width: 100%
}

    .w-rte h2, .w-rte h3, .w-rte h4, .w-rte h5, .w-rte p {
        margin: 0 0 20px
    }

    .w-rte ol {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: .9375rem;
        line-height: 1.67;
        font-weight: 400;
        margin-left: 1.5rem
    }

.rooster-toggle .w-rte ol {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .w-rte ol {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 48em) {
    .w-rte ol {
        margin-left: 2rem
    }
}

.w-rte ul {
    margin-left: 1.6rem
}

@media print, screen and (min-width: 48em) {
    .w-rte ul {
        margin-left: 2.3rem
    }
}

.w-rte li {
    margin-bottom: 20px;
    padding-left: 10px
}

.w-rte img {
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .w-rte img {
        display: block;
        height: auto !important;
        margin: 0 auto !important;
        max-width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .w-rte .table-container {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative
    }

        .w-rte .table-container .overflow-indicator {
            background-color: #868d91;
            display: block;
            height: 100%;
            opacity: 1;
            position: absolute;
            right: 0;
            top: 0;
            transition: 0.4s ease;
            width: 20px
        }

            .w-rte .table-container .overflow-indicator::before, .w-rte .table-container .overflow-indicator::after {
                font-family: "icon-howdens";
                line-height: 1;
                            text-transform: none;
                content: '\e901';
                font-size: .625rem;
                transition: transform 675ms ease;
                transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                display: block;
                color: #fff;
                margin: 0;
                position: absolute;
                right: 5px;
                top: 20px;
                transform: rotate(0deg)
            }

            .w-rte .table-container .overflow-indicator::after {
                bottom: 20px;
                top: auto
            }

            .w-rte .table-container .overflow-indicator.scrolling {
                opacity: 0
            }

                .w-rte .table-container .overflow-indicator.scrolling.at-end {
                    left: 100%;
                    opacity: 1;
                    right: auto
                }

                    .w-rte .table-container .overflow-indicator.scrolling.at-end::before, .w-rte .table-container .overflow-indicator.scrolling.at-end::after {
                        transform: rotate(180deg)
                    }
}

.w-rte table {
    border: 2px solid #868d91;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .w-rte table {
        table-layout: auto;
        width: 300%
    }
}

.w-rte table th {
    background-color: #c8c8c8
}

.w-rte table td {
    border: 2px solid #868d91;
    padding: 10px;
    word-break: break-word
}

.load-more-section {
    padding-bottom: 30px;
    padding-top: 23px;
    text-align: center;
    width: 100%
}

    .load-more-section .cta.primary::before {
        content: '...';
        font-size: .75rem;
        right: 25px;
        top: 44%
    }

    .load-more-section .btn {
        min-width: 514px
    }

        .load-more-section .btn.not-visible {
            display: none
        }

@media screen and (max-width: 63.9375em) {
    .load-more-section .btn {
        min-width: 343px
    }
}

@media screen and (max-width: 47.9375em) {
    .load-more-section .btn {
        display: block;
        min-width: 0
    }
}

.load-more-section .btn:hover:after {
    animation: none
}

.load-more-section__pagination {
    margin-bottom: 20px
}



        .load-more-section__pagination progress::-webkit-progress-bar {
            background: #d8d8d8;
            border-radius: 2px;
            box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2)
        }

        .load-more-section__pagination progress::-webkit-progress-value {
            background: #70c624;
            border-radius: 2px
        }

        .load-more-section__pagination progress::-moz-progress-bar {
            background-color: #70c624;
            border-radius: 2px
        }

        .load-more-section__pagination progress:before {
            background: #70c624;
            border-radius: 2px
        }

.available-colors {
    margin-top: 20px
}

    .available-colors .label {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .625rem;
        line-height: 1.1;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #28343d;
        display: block;
        margin-bottom: 10px
    }

.rooster-toggle .available-colors .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .available-colors .label {
        font-size: .75rem;
        line-height: 1
    }
}

.available-colors ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

.available-colors li {
    border: 1px solid rgba(0,0,0,0);
    border-radius: 50%;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle
}

    .available-colors li a {
        border: 1px solid #aeaeae;
        border-radius: 50%;
        display: block;
        height: 30px;
        width: 30px
    }

    .available-colors li img {
        border-radius: 50%;
        height: 30px;
        width: 30px
    }

.available-colors .selected {
    border-color: #c20016
}

    .available-colors .selected a {
        border: 1px solid rgba(0,0,0,0);
        border-color: #fff
    }

.custom-selectbox-wrap {
    position: relative
}

.custom-selectbox {
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 2
}

    .custom-selectbox .selectbox-label {
        background: #f9f9f9;
        display: block;
        overflow: hidden;
        padding: 15px 30px 15px 10px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

        .custom-selectbox .selectbox-label::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: .625rem;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #28343d;
            float: right;
            position: absolute;
            right: 10px;
            top: 19px;
            transform: rotate(270deg);
            transition: all 0.6s ease
        }

    .custom-selectbox .options-wrap {
        display: none;
        margin: 0;
        overflow-y: auto
    }

        .custom-selectbox .options-wrap .select-option a {
            color: #28343d;
            display: block;
            list-style: none;
            padding: 10px
        }

            .custom-selectbox .options-wrap .select-option a:focus, .custom-selectbox .options-wrap .select-option a:hover {
                background: #f5f5f5;
                color: #000
            }

        .custom-selectbox .options-wrap .selected a {
            cursor: default;
            pointer-events: none
        }

    .custom-selectbox.default-state .selectbox-label::after {
        transform: rotate(90deg)
    }

    .custom-selectbox.disabled .selectbox-label {
        color: #c8c8c8
    }

        .custom-selectbox.disabled .selectbox-label::after {
            color: #c8c8c8
        }

input[type='search']::-webkit-search-cancel-button {
    display: none
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield
}



.product-detail .selected, .form .selected {
    font-weight: bold
}

.showoption {
    display: block
}

.loading__dots {
    display: none;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 4
}

.loading__dots--dot {
    animation: loading-keyframes 1.5s infinite cubic-bezier(0.42, 0, 0.58, 1);
    animation-delay: 2s;
    background-color: #000;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    margin: 0 10px;
    width: 10px
}

    .loading__dots--dot:nth-child(1) {
        animation-delay: 0.3s
    }

    .loading__dots--dot:nth-child(2) {
        animation-delay: 0.45s
    }

    .loading__dots--dot:nth-child(3) {
        animation-delay: 0.65s
    }

    .loading__dots--dot:nth-child(4) {
        animation-delay: 0.85s
    }

.loading .loading__dots {
    display: block
}

.features .key {
    font-weight: bold
}

.rounded-button {
    background: #4a90e2;
    border: none;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    font-size: .6875rem;
    letter-spacing: 0.02em;
    padding: 2px 15px;
    text-align: center;
    text-transform: uppercase
}

body:not(.sfPageEditor) .btn {
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 24px;
    color: #28343d;
    cursor: pointer;
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    line-height: normal;
    min-width: 278px;
    padding: 16px 20px 15px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1)
}


    body:not(.sfPageEditor) .btn:hover,
    body:not(.sfPageEditor) .btn:focus {
        background-color: #f6f6f6
    }


body:not(.sfPageEditor) .btn--disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #c8c8c8;
    border-color: #c8c8c8
}


body:not(.sfPageEditor) .btn + .btn {
    margin-left: 25px
}

.btn--primary {
    background-color: #28343d;
    border-color: #28343d;
    color: #fff;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase
}

    .btn--primary.btn--disabled {
        background-color: #c8c8c8;
        border-color: #c8c8c8
    }

    .btn--primary:hover, .btn--primary:focus {
        background-color: #1f242f;
        color: #fff
    }

    .btn--primary.btn--chevron-red::after {
        color: #c20016
    }

    .btn--primary.btn--chevron-right::after {
        color: #fff
    }

    .btn--primary.btn--chevron-left::before {
        color: #fff
    }

.btn--primary-alt {
    background-color: #70c624;
    border-color: #70c624;
    color: #fff;
    letter-spacing: 2.4px;
    text-transform: uppercase
}

    .btn--primary-alt.btn--disabled {
        background-color: #c8c8c8;
        border-color: #c8c8c8
    }

    .btn--primary-alt:hover, .btn--primary-alt:focus {
        background-color: #5ca41e
    }

    .btn--primary-alt.btn--chevron-right::after {
        color: #fff
    }

    .btn--primary-alt.btn--chevron-left::before {
        color: #fff
    }

.btn--chevron-right::after {
    position: relative;
    top: -1px;
    display: inline-block;
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    font-size: .5625rem;
    line-height: .5625rem;
    color: #28343d;
    pointer-events: none;
    width: 24px;
    height: 10px;
    margin-left: 4px
}

.rooster-toggle .btn--chevron-right::after {
    top: 1px
}

.btn--chevron-right.btn--chevron-red::after {
    color: #c20016
}

.btn--chevron-right:hover::after {
    animation-duration: 0.5s;
    animation-name: cta-arrow-inline;
    animation-timing-function: ease-in-out
}

.btn--chevron-left::before {
    position: relative;
    top: -1px;
    display: inline-block;
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    font-size: .5625rem;
    line-height: .5625rem;
    color: #28343d;
    pointer-events: none;
    width: 24px;
    height: 8px;
    margin-right: 4px;
    transform: rotate(-180deg)
}

.rooster-toggle .btn--chevron-left::before {
    top: 1px
}

.btn--chevron-left.btn--chevron-red::before {
    color: #c20016
}

.btn--chevron-left:hover::before {
    animation-duration: 0.5s;
    animation-name: cta-arrow-back-inline;
    animation-timing-function: ease-in-out
}

.btn--loading {
    font-size: 0;
    position: relative;
    text-indent: -999rem
}

    .btn--loading:disabled {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .btn--loading:disabled:hover {
            background-color: #70c624
        }

    .btn--loading:hover {
        animation: 0
    }

    .btn--loading::before {
        background: url("/Media/loader.svg") no-repeat center center transparent;
        background-size: contain;
        content: "";
        display: block;
        height: 24px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 24px
    }

.btn--text-link {
    background: none;
    border: none;
    border-radius: 0;
    color: #4a90e2;
    cursor: pointer;
    display: inline-block;
    font-size: .8125rem;
    font-weight: 400;
    font-style: normal;
    padding: 0;
    letter-spacing: 0;
    line-height: 1.92;
    min-width: 0;
    text-align: left;
    text-decoration: underline;
    text-transform: none;
    vertical-align: middle
}

    .btn--text-link::after {
        display: none
    }

    .btn--text-link:hover, .btn--text-link:focus {
        color: #3c7ece;
        background: none
    }

.btn--full-width {
    width: 100%;
    min-width: auto
}

.btn--icon-left {
    margin-right: 10px
}

@media screen and (max-width: 63.9375em) {
    .btn--cancel:not(.btn--cancel-mobile-normal) {
        border-color: transparent;
        color: #4a90e2;
        text-decoration: underline;
        text-transform: capitalize;
        font-weight: normal
    }

        .btn--cancel:not(.btn--cancel-mobile-normal):hover {
            background-color: #fff
        }
}

.rooster-toggle a.btn--chevron-right::after, .rooster-toggle a.btn--chevron-left::after {
    top: -1px
}

.cf {
    zoom: 1
}

    .cf::before, .cf::after {
        content: "";
        display: table;
        clear: both
    }

.component--secondary-bg {
    background-color: #f1f1f1
}

.component--tertiary-bg {
    background-color: #ebebeb
}

.component__wrapper {
    max-width: 1248px;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 0 auto
}

@media screen and (max-width: 47.9375em) {
    .component__wrapper {
        max-width: 1168px;
        padding: 0 16px
    }
}

.component__wrapper-grid {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1200px
}

@media screen and (max-width: 81.1875em) {
    .component__wrapper-grid {
        max-width: 981px
    }
}

@media screen and (max-width: 63.9375em) {
    .component__wrapper-grid {
        max-width: 690px
    }
}

@media screen and (max-width: 47.9375em) {
    .component__wrapper-grid {
        max-width: 100%;
        padding: 0 16px
    }
}

[data-accordion-section="true"] {
    position: relative;
    padding-right: 40px;
    cursor: pointer
}

    [data-accordion-section="true"]::after, [data-accordion-section="true"]::before {
        content: "";
        font-family: Arial, Helvetica, sans-serif;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 10px;
        right: 20px;
        font-weight: bold;
        color: #28343d;
        margin: auto;
        transform-origin: center;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    [data-accordion-section="true"]::after {
        content: "+";
        font-size: .9375rem;
        line-height: 10px
    }

    [data-accordion-section="true"]::before {
        content: "-";
        font-size: 1.375rem;
        line-height: 0.5rem
    }

    [data-accordion-section="true"].accordion-section--active::after {
        transform: scale(0) rotate(0)
    }

    [data-accordion-section="true"].accordion-section--active::before {
        transform: scale(1) rotate(-180deg)
    }

    [data-accordion-section="true"]:not(.accordion-section--active)::after {
        transform: scale(1) rotate(360deg)
    }

    [data-accordion-section="true"]:not(.accordion-section--active)::before {
        transform: scale(0) rotate(0)
    }

.filtering-sort {
    position: relative;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    margin-top: 89px;
    padding-bottom: 95px
}

    .filtering-sort * {
        box-sizing: border-box
    }

    .filtering-sort + .invoices-listing__bottom-anchor {
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0
    }

.filtering-sort__container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 760px;
    margin: auto
}

.js-filtering-sort-sticky .filtering-sort__container {
    position: fixed;
    z-index: 1;
    transform-origin: 0 0;
    transition: all 300ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .js-filtering-sort-sticky .filtering-sort__container::before {
        content: "";
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100vh;
        background: linear-gradient(to bottom, #fff calc(100% - 80px), rgba(255,255,255,0) 100%)
    }

@media screen and (max-width: 63.9375em) {
    .filtering-sort__container {
        max-width: 690px
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__container {
        right: 35px;
        width: auto;
        left: 16px;
        right: 16px;
        max-width: 100%
    }
}

.filtering-sort .grid-narrow {
    position: relative;
    max-width: 760px
}

@media screen and (max-width: 63.9375em) {
    .filtering-sort .grid-narrow {
        max-width: 690px
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort .grid-narrow {
        max-width: 100%;
        padding: 0 16px
    }
}

.filtering-sort__form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.filtering-sort__form-field {
    position: relative;
    width: 50%;
    outline: none
}

.filtering-sort__form-field-label {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.56rem;
    color: #28343d
}

.filtering-sort__form-field-select:hover .custom-selectbox {
    outline: none
}

.filtering-sort__form-field-select select {
    display: none
}

.filtering-sort__form-field-select .custom-selectbox {
    position: relative;
    zoom: 1;
    background: #fff;
    border: 1px solid #c8c8c8;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 8px 0px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .filtering-sort__form-field-select .custom-selectbox.default-state {
        box-shadow: none;
        outline: none
    }

        .filtering-sort__form-field-select .custom-selectbox.default-state .selectbox-label::after {
            transform: translateY(-50%) rotate(0)
        }

@media screen and (max-width: 47.9375em) {
    .filtering-sort__form-field-select .custom-selectbox.default-state .selectbox-label {
        font-size: 0
    }
}

.filtering-sort__form-field-select .custom-selectbox.default-state .options-wrap {
    box-shadow: none
}

.filtering-sort__form-field-select .custom-selectbox .options-wrap {
    position: absolute;
    z-index: 2;
    left: -1px;
    right: -1px;
    width: auto;
    padding: 8px 17px 17px;
    border: solid 1px #c8c8c8;
    background-color: #eaeaea;
    box-shadow: rgba(0,0,0,0.2) 0px 6px 8px 0px
}

    .filtering-sort__form-field-select .custom-selectbox .options-wrap ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

        .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option {
            margin: 12px 0
        }

            .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option:hover a, .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option:focus a {
                background-color: #f6f6f6;
                border: 1px solid #767572
            }

            .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option a {
                position: relative;
                padding: 5px 40px 5px 40px;
                text-align: center;
                position: relative;
                width: 100%;
                font-size: .9375rem;
                line-height: 1.5rem;
                color: #28343d;
                border: solid 1px #c8c8c8;
                background: #fff;
                border-radius: 24px;
                overflow: hidden;
                transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
            }

                .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option a::after {
                    content: "";
                    position: absolute;
                    right: 8px;
                    z-index: 1;
                    top: 0;
                    bottom: 0;
                    width: 18px;
                    height: 18px;
                    margin: auto;
                    background-color: #fff;
                    border: 1px solid #28343d;
                    border-radius: 50%
                }

            .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option.selected a {
                background: #28343d;
                border: solid 1px #28343d;
                color: #fff
            }

                .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option.selected a::after {
                    background: url("/Media/check-dark.svg") no-repeat center center transparent;
                    content: '';
                    display: block;
                    height: 100%;
                    width: 100%;
                    width: 18px;
                    height: 18px;
                    background-color: #fff;
                    background-size: 13px;
                    background-position: 2px center
                }

.filtering-sort__form-field-select .custom-selectbox .selectbox-label {
    position: relative;
    width: 100%;
    z-index: 2;
    padding: 14px 50px 12px 10px;
    font-size: .9375rem;
    background: transparent;
    border: none;
    line-height: 1.4rem;
    color: #28343d
}

.filtering-sort__form-field-select .custom-selectbox .selectbox-label-container {
    position: relative;
    z-index: 2;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px
}

    .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container .filtering-sort__form-field-label {
        -ms-flex: 0;
        flex: 0;
        white-space: nowrap
    }

.rooster-toggle .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container .filtering-sort__form-field-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    margin-top: 0
}

.ie .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container .filtering-sort__form-field-label {
    -ms-flex: auto;
    flex: auto
}

.filtering-sort__form-field-select .custom-selectbox .selectbox-label-container .options-wrap {
    -ms-flex: 1;
    flex: 1
}

.filtering-sort__form-field-select .custom-selectbox .selectbox-label::after {
    background: url("/Media/arrow-down-thin.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 13px;
    top: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    transform: translateY(-50%) rotate(-180deg);
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 0.6s ease;
    pointer-events: none
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__form-field-select .custom-selectbox .selectbox-label {
        color: #fff
    }

    .filtering-sort--online-account .filtering-sort__form-field-select .custom-selectbox .selectbox-label {
        color: #28343d
    }

    .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container {
        padding-left: 18px
    }

    .filtering-sort__form-field-select .custom-selectbox .selectbox-label::after {
        right: 9px
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__form-field-select select {
        font-size: 1rem;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: block;
        opacity: 0
    }
}

.filtering-sort__btn {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-right: 1px solid #fff;
    padding: 12px 45px 12px 53px;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.56rem;
    color: #28343d;
    cursor: pointer;
    text-align: left;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.filtering-sort__btn-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold;
    white-space: nowrap
}

.filtering-sort__btn-label-mobile {
    display: none
}

.rooster-toggle .filtering-sort__btn-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.filtering-sort__btn::before {
    background: url("/Media/filter-controls.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 19px;
    width: 24px;
    transform: translate3d(0, -50%, 0)
}

.filtering-sort__btn::after {
    background: url("/Media/arrow-down-thin.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    font-size: 1.125rem;
    position: absolute;
    right: 13px;
    top: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 0.6s ease;
    pointer-events: none
}

.filtering-sort__btn-filters-count {
    position: relative;
    top: -1px;
    height: 16px;
    width: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: .5625rem;
    font-weight: bold;
    line-height: 0.75rem;
    border-radius: 8px;
    margin-left: 27px;
    background-color: #c20016;
    color: #fff;
    padding: 0 7px
}

.rooster-toggle .filtering-sort__btn-filters-count {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.03rem
}

.filtering-sort__btn-filters-count-text {
    position: relative;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__btn {
        padding-right: 60px;
        padding-left: 46px
    }

        .filtering-sort__btn::before {
            left: 15px
        }

    .filtering-sort__btn-label {
        display: none;
        white-space: nowrap
    }

    .filtering-sort__btn-label-mobile {
        display: block
    }

    .filtering-sort__btn-filters-count {
        width: auto;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        margin-left: 14px
    }

    .filtering-sort__btn-filters-count-label {
        display: block;
        margin-top: 1px
    }

        .filtering-sort__btn-filters-count-label:not(.js-filters-count-nr) {
            display: none
        }
}

.filtering-sort__results-count {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.56rem;
    color: #28343d;
    background-color: #f1f1f1;
    padding: 12px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .filtering-sort__results-count {
        font-size: .8125rem;
        line-height: 1.25rem;
        padding: 9px
    }
}

.js-filtering-sort-sticky .filtering-sort__btn {
    background: #28343d;
    border-color: #fff;
    border-right: none;
    color: #fff
}

    .js-filtering-sort-sticky .filtering-sort__btn::before {
        background: url("/Media/filter-controls-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 19px;
        width: 24px;
        transform: translate3d(0, -50%, 0)
    }

    .js-filtering-sort-sticky .filtering-sort__btn::after {
        background: url("/Media/arrow-down-thin-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        right: 13px;
        top: 50%;
        display: inline-block;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transition: all 0.6s ease;
        pointer-events: none
    }

@media screen and (max-width: 47.9375em) {
    .js-filtering-sort-sticky .filtering-sort__btn::before {
        left: 15px
    }
}

.js-filtering-sort-sticky .filtering-sort__form-field-select .custom-selectbox {
    background: #28343d;
    border-color: #fff
}

    .js-filtering-sort-sticky .filtering-sort__form-field-select .custom-selectbox .selectbox-label {
        color: #fff
    }

        .js-filtering-sort-sticky .filtering-sort__form-field-select .custom-selectbox .selectbox-label::after {
            background: url("/Media/arrow-down-thin-white.svg") no-repeat center center transparent;
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            right: 13px;
            top: 50%;
            display: inline-block;
            width: 24px;
            height: 24px;
            transform: translateY(-50%) rotate(-180deg);
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            transition: all 0.6s ease;
            pointer-events: none
        }

    .js-filtering-sort-sticky .filtering-sort__form-field-select .custom-selectbox.default-state .selectbox-label::after {
        transform: translateY(-50%) rotate(0)
    }

.js-filtering-sort-sticky .filtering-sort__form-field-label {
    color: #fff
}

.account-switch-container {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin-bottom: 40px
}

@media screen and (max-width: 63.9375em) {
    .account-switch-container {
        margin-bottom: 32px;
        -ms-flex-flow: column;
        flex-flow: column;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media screen and (max-width: 47.9375em) {
    .account-switch-container {
        top: 0;
        margin-bottom: 16px
    }
}

.account-switch .header__account-panel-dropdown {
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-item-align: start;
    -ms-grid-row-align: start;
    align-self: start;
    position: relative;
    border: thin solid #c8c8c8;
    min-width: 483px;
    max-width: 483px
}

.account-switch .header__account-panel-dropdown-overlay {
    display: none
}

.account-switch .header__account-panel-dropdown-list-hidden::before {
    display: none
}

.account-switch .header__account-panel-dropdown-cta {
    z-index: 0;
    border: none;
    border-top: none;
    left: -1px;
    right: -1px;
    width: auto;
    transition: none
}

.account-switch .header__account-panel-dropdown-cta-btn {
    transform: translateY(-20px);
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.account-switch .header__account-panel-dropdown-cta-on .header__account-panel-dropdown-cta {
    border: thin solid #c8c8c8;
    border-top: none
}

    .account-switch .header__account-panel-dropdown-cta-on .header__account-panel-dropdown-cta.no-border-top {
        border-top: none
    }

.account-switch .header__account-panel-dropdown-item.active.single-item {
    border-bottom: none
}

.account-switch .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
    background: #fff
}

.account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-item.single-item {
    border-bottom: none
}

.account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-cta-btn {
    transform: translateY(0)
}

.account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list::before {
    display: none
}

.account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list-group {
    left: -1px;
    right: -1px;
    width: auto;
    max-height: 328px;
    overflow-y: auto;
    border: thin solid #c8c8c8;
    border-top: none;
    margin-top: -1px;
    background-color: #fafafa;
    box-sizing: border-box
}

    .account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list-group.header__account-panel-dropdown-select-list-group-with-cta {
        max-height: 192px
    }

@media screen and (max-width: 63.9375em) {
    .account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list-group.header__account-panel-dropdown-select-list-group-with-cta {
        max-height: 248px
    }
}

.account-switch .header__account-panel-dropdown-select-list-group {
    position: absolute;
    transition: none
}

.account-switch .header__account-panel-dropdown::before {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .account-switch .header__account-panel-dropdown {
        margin-top: 13px;
        min-width: 425px;
        max-width: 425px;
        -ms-flex-positive: 1;
        flex-grow: 1
    }
}

@media screen and (max-width: 47.9375em) {
    .account-switch {
        margin-top: 13px;
        background-color: #f1f1f1
    }

        .account-switch .header__account-panel-dropdown {
            top: 0;
            -ms-flex-item-align: auto;
            -ms-grid-row-align: auto;
            align-self: auto;
            min-width: inherit;
            max-width: none;
            margin: 0 -16px 0 -16px;
            border-left: none;
            border-right: none
        }

        .account-switch .header__account-panel-dropdown-list-hidden::before {
            display: block
        }

        .account-switch .header__account-panel-dropdown-overlay {
            top: 0;
            z-index: 0;
            display: block;
            background-color: transparent
        }

        .account-switch .header__account-panel-dropdown-select-list-group {
            position: relative;
            transition: max-height 400ms cubic-bezier(0.2, 0, 0.2, 1),height 400ms cubic-bezier(0.2, 0, 0.2, 1)
        }

    .js-account-switcher-active .account-switch {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 86%;
        min-width: 314px;
        height: 100%;
        margin-top: 0;
        z-index: 4;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.5)
    }

        .js-account-switcher-active .account-switch .header__account-panel-dropdown.active {
            top: 72px;
            width: 100%;
            margin: 0;
            border: none
        }

            .js-account-switcher-active .account-switch .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list-group {
                left: 0;
                border: none
            }

        .js-account-switcher-active .account-switch .header__account-panel-dropdown-controls {
            visibility: visible;
            opacity: 1;
            pointer-events: auto
        }

        .js-account-switcher-active .account-switch .header__account-panel-dropdown-cta {
            left: 0;
            right: 0;
            width: 86%;
            min-width: 314px;
            border: none
        }

        .js-account-switcher-active .account-switch .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow {
            display: none
        }
}

.calendar-icon {
    position: relative;
    width: 100px;
    min-width: 100px;
    height: 100px;
    min-height: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    background-color: #b5b5b5;
    border-radius: 8px
}

    .calendar-icon * {
        box-sizing: border-box
    }

    .calendar-icon::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        top: 4px;
        bottom: 1px;
        width: 100%;
        height: auto;
        border-radius: 6px;
        background-image: radial-gradient(circle at 50% 60%, #fff, #f1f1f1 75%, #f2f2f2)
    }

.calendar-icon__header, .calendar-icon__body {
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center
}

.calendar-icon__header {
    position: relative;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.76rem;
    color: #fff;
    background: linear-gradient(to bottom, #f56000 0%, #f03000 2%, #f03000 100%);
    margin-bottom: 3px;
    padding: 2px
}

    .calendar-icon__header::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 1px;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(to bottom, #a4000b 0%, #c10015 100%)
    }

    .calendar-icon__header::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 3px;
        background: linear-gradient(to bottom, #828282 0%, rgba(130,130,130,0) 100%)
    }

.calendar-icon__body {
    position: relative;
    bottom: 1px;
    -ms-flex: 1;
    flex: 1;
    font-size: 3.125rem;
    font-weight: normal;
    line-height: 2.5rem;
    color: #28343d;
    padding-bottom: 3px
}

.rooster-toggle .calendar-icon__body {
    padding-bottom: 2px
}

@media screen and (max-width: 63.9375em) {
    .calendar-icon {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
        border-radius: 6px
    }

    .calendar-icon__header {
        font-size: .8125rem;
        line-height: 1.26rem
    }

    .calendar-icon__body {
        font-size: 2.25rem;
        line-height: 1.8rem;
        padding-bottom: 5px
    }

    .rooster-toggle .calendar-icon__body {
        padding-bottom: 2px
    }
}

.calendar-icon--month .calendar-icon__body {
    font-size: 2.1875rem;
    line-height: 1.88rem
}

@media screen and (max-width: 63.9375em) {
    .calendar-icon--month .calendar-icon__body {
        font-size: 1.75rem;
        line-height: 1.75rem
    }
}

.calendar-icon--m {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border-radius: 6px
}

    .calendar-icon--m .calendar-icon__header {
        font-size: .8125rem;
        line-height: 1.235rem
    }

    .calendar-icon--m .calendar-icon__body {
        font-size: 2.25rem;
        font-weight: normal;
        line-height: 1.755rem;
        padding-bottom: 5px
    }

.rooster-toggle .calendar-icon--m .calendar-icon__body {
    padding-bottom: 2px
}

@media screen and (max-width: 63.9375em) {
    .calendar-icon--m {
        width: 60px;
        height: 60px;
        min-width: 60px;
        min-height: 60px
    }

        .calendar-icon--m .calendar-icon__header {
            font-size: .6875rem;
            font-weight: normal;
            line-height: 1.058rem
        }

        .calendar-icon--m .calendar-icon__body {
            font-size: 1.875rem;
            line-height: 1.518rem;
            padding-bottom: 3px
        }
}

.calendar-icon--s {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 6px
}

    .calendar-icon--s .calendar-icon__header {
        font-size: .6875rem;
        line-height: 1.05rem
    }

    .calendar-icon--s .calendar-icon__body {
        font-size: 1.625rem;
        font-weight: normal;
        line-height: 1.316rem;
        padding-bottom: 5px
    }

.rooster-toggle .calendar-icon--s .calendar-icon__body {
    padding-bottom: 2px
}

@media screen and (max-width: 63.9375em) {
    .calendar-icon--s {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px
    }

        .calendar-icon--s .calendar-icon__header {
            font-size: .625rem;
            font-weight: normal;
            line-height: 0.987rem
        }

        .calendar-icon--s .calendar-icon__body {
            font-size: 1.75rem;
            font-weight: normal;
            line-height: 1.4rem;
            padding-bottom: 3px
        }
}

.calendar-icon--xs {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 6px
}

    .calendar-icon--xs .calendar-icon__header {
        font-size: .5625rem;
        line-height: .5625rem;
        font-weight: normal
    }

    .calendar-icon--xs .calendar-icon__body {
        font-size: 1.625rem;
        font-weight: normal;
        line-height: 1.868rem;
        padding-bottom: 5px
    }

.rooster-toggle .calendar-icon--xs .calendar-icon__body {
    padding-bottom: 2px
}

@media screen and (max-width: 63.9375em) {
    .calendar-icon--xs {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        padding-bottom: 3px
    }
}

.modal-overlay {
    height: 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: transparent;
    background-color: rgba(0,0,0,0.2);
    transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1),visibility 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

body:not(.js-modal-active) .modal-overlay, body:not(.js-modal-active) .modal-overlay * {
    pointer-events: none
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible
}

.modal-overlay__content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    box-sizing: border-box;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    outline: none
}

    .modal-overlay__content[data-modal-state] {
        display: none
    }

        .modal-overlay__content[data-modal-state].active {
            display: -ms-flexbox;
            display: flex
        }

.modal-overlay__content--center {
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.modal-overlay__content-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;
    font-weight: bold
}

.rooster-toggle .modal-overlay__content-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.modal-overlay__content, .modal-overlay__content p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem
}

.rooster-toggle .modal-overlay__content, .rooster-toggle .modal-overlay__content p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.modal-overlay__close {
    position: absolute;
    z-index: 1;
    background-color: transparent;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px
}

.modal-overlay__close-hidden {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    visibility: hidden;
    opacity: 0
}

.modal-overlay__close::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90b'
}

.modal-overlay__close:hover {
    cursor: pointer
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay--mobile-expanded {
        background-color: transparent;
        right: 0;
        bottom: 0;
        left: 0
    }

        .modal-overlay--mobile-expanded .modal-overlay__content {
            max-width: 100% !important;
            height: 100%
        }

        .modal-overlay--mobile-expanded .modal-overlay__button-container:not(.modal-overlay__button-container--normal) {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0
        }
}

.cookie-message {
    transition: filter 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.js-nav-open .cookie-message, .js-modal-overlay-active .cookie-message, .js-filtering-sidebar-active .cookie-message, .js-account-switcher-active .cookie-message {
    filter: blur(5px);
    z-index: 0
}

.js:not(.exp-mode) body:not(.theme-depot) main section:not(.product-listing.component):not(.kitchen-visualiser):not(.kitchen-visualiser-form-pdf):not(.kitchen-visualiser-form):not(.search-header):not(.w-overlay-popup):not(.popup):not(.utility-navigation):not(.utility-navigation-guide):not(.hero-editorial):not(.hero-homepage):not(.inpage-search):not(.cookie-message):not(.breadcrumb) {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    transition: all 600ms ease-in-out
}

    .js:not(.exp-mode) body:not(.theme-depot) main section:not(.product-listing.component):not(.kitchen-visualiser):not(.kitchen-visualiser-form-pdf):not(.kitchen-visualiser-form):not(.search-header):not(.w-overlay-popup):not(.popup):not(.utility-navigation):not(.utility-navigation-guide):not(.hero-editorial):not(.hero-homepage):not(.inpage-search):not(.cookie-message):not(.breadcrumb).inview {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

main, footer {
    transition: filter 200ms ease-in;
    transition-delay: 100ms
}

.item-tag {
    background: #417505;
    color: #fff;
    font-size: .75rem;
    letter-spacing: 2px;
    line-height: 1.1;
    padding: 5px 10px;
    position: absolute;
    right: -1px;
    text-transform: uppercase;
    top: 0;
    z-index: 1
}

.intext-link1 {
    border-bottom: 1px solid #28343d
}

.no-touch .intext-link1:hover {
    border-bottom-color: #c20016
}

.intext-link2 {
    text-decoration: underline;
    -webkit-text-decoration-color: #28343d;
    text-decoration-color: #28343d
}

.no-touch .intext-link2:hover {
    color: #c20016;
    -webkit-text-decoration-color: #c20016;
    text-decoration-color: #c20016
}

.cookie-message {
    background: #28343d;
    border-top: 1px solid rgba(255,255,255,0.3);
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    display: none;
    left: 0;
    position: fixed;
    position: -ms-device-fixed;
    right: 0;
    transition: transform 0.25s ease-in-out;
    width: 100%;
    z-index: 999
}

    .cookie-message.show {
        display: block;
        transform: translate3d(0, 0, 0)
    }

    .cookie-message.hidden {
        display: block;
        transform: translate3d(0, 100%, 0)
    }

    .cookie-message .grid {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

@media screen and (max-width: 63.9375em) {
    .cookie-message .grid {
        display: block
    }
}

.cookie-message .column.button {
    -ms-flex: 2 0 200px;
    flex: 2 0 200px;
    text-align: right
}

@media screen and (max-width: 63.9375em) {
    .cookie-message .column.button {
        -ms-flex: 0 0 0px;
        flex: 0 0 0;
        text-align: center
    }
}

.cookie-message .column.button .cta {
    color: #fff;
    margin-right: 0;
    padding: 14px 50px 15px 30px
}

@media screen and (max-width: 63.9375em) {
    .cookie-message .column.button .cta {
        display: inline-block;
        margin-bottom: 30px
    }
}

.cookie-message .rte {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    padding: 25px 0 15px;
    text-align: center
}

.rooster-toggle .cookie-message .rte {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .cookie-message .rte {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .cookie-message .rte {
        padding: 25px 0;
        text-align: left
    }
}

.rooster-toggle .cookie-message .rte {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.cookie-message .rte.disabled {
    display: none
}

.cookie-message .rte a {
    color: #fff;
    text-decoration: underline
}

.preview-mode .cookie-message {
    display: none
}

.exp-mode .cookie-message {
    margin-bottom: 40px;
    margin-top: 20px;
    position: relative
}

header:not(.header) {
    background-color: #fff;
    opacity: 1;
    width: 100%;
    z-index: 3
}

.scrolled:not(.switch-open):not(.search-opened) header:not(.header) {
    opacity: 0.97
}

    .scrolled:not(.switch-open):not(.search-opened) header:not(.header):hover {
        opacity: 1
    }

@media screen and (min-width: 64em) {
    header:not(.header) li {
        display: inline-block
    }
}

header:not(.header) li a:not(.primary) {
    color: #c8c8c8;
    font-size: .625rem;
    line-height: 1.5
}

@media screen and (max-width: 81.1875em) {
    header:not(.header) li a:not(.primary) {
        font-size: 1rem;
        line-height: 1rem
    }
}

header:not(.header) .logo {
    margin-left: 17px;
    max-width: 118px
}

    header:not(.header) .logo.view-hide {
        padding: 0
    }

@media print, screen and (min-width: 64em) {
    header:not(.header) .logo.view-hide {
        padding: 0
    }
}

header:not(.header) .logo .logo-image {
    display: inline-block;
    vertical-align: middle;
    width: 118px
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .logo .logo-image {
        -ms-flex-line-pack: center;
        align-content: center;
        margin-right: 7px;
        margin-top: -6px;
        width: 152px
    }
}

header:not(.header) .logo img {
    display: block
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .logo {
        max-width: 152px
    }
}

header:not(.header) .switch {
    border-left: 1px solid #d8d8d8;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.25;
    padding: 0 1%;
    vertical-align: middle
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .switch {
        padding: 0 15px 0 10px
    }
}

@media screen and (min-width: 100.0625em) {
    header:not(.header) .switch {
        font-size: 1.0625rem;
        line-height: 1.47;
        padding: 0 30px 0 10px
    }
}

header:not(.header) .switch.view-hide {
    display: none
}

header:not(.header) .header-bar {
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #d8d8d8;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .header-bar {
        height: 80px
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .header-bar {
        transition: height 366ms cubic-bezier(0.42, 0, 0.58, 1)
    }

    .scrolled header:not(.header) .header-bar {
        height: 60px
    }
}

header:not(.header) .nav-links ul {
    list-style: none;
    margin-bottom: 0;
    margin-left: 0
}

header:not(.header) .nav-links li {
    padding: 22px 0
}

    header:not(.header) .nav-links li a:not(.primary) {
        color: #28343d;
        font-size: .8125rem;
        line-height: 1.54
    }

@media screen and (min-width: 81.25em) {
    header:not(.header) .nav-links li a:not(.primary) {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 100.0625em) {
    header:not(.header) .nav-links li a:not(.primary) {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

header:not(.header) .nav-links li .close {
    font-size: .625rem
}

header:not(.header) .nav-links .l0 {
    padding: 33px 15px 31px
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .nav-links .l0 {
        padding: 12px 0 12px 37px
    }
}

.scrolled header:not(.header) .nav-links .l0 {
    padding: 23px 15px 22px
}

.switch-open header:not(.header) .nav-links .l0 {
    pointer-events: none
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .nav-links .l0 > a:not(.primary), header:not(.header) .nav-links .explore > a:not(.primary) {
        display: block
    }
}

@media screen and (min-width: 81.25em) {
    header:not(.header) .locate {
        width: 170px
    }
}

header:not(.header) .locate .icon::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e903'
}

header:not(.header) .search {
    cursor: pointer;
    display: inline-block
}

    header:not(.header) .search .icon::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e906'
    }

header:not(.header) .primary-nav {
    background: #fff;
    display: block;
    left: 0;
    position: absolute;
    top: 80px;
    width: 100%
}

.scrolled header:not(.header) .primary-nav {
    top: 60px
}

header:not(.header) .primary-nav .l1 {
    display: block
}

header:not(.header) .nav-menu {
    background: #fff;
    width: 100%;
    z-index: 998
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .nav-menu {
        display: none
    }
}

header:not(.header) .links-container {
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: .8125rem;
    text-align: center;
    vertical-align: middle
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links-container {
        font-size: .6875rem
    }
}

@media screen and (min-width: 81.25em) {
    header:not(.header) .links-container {
        font-size: .8125rem
    }
}

header:not(.header) .links-container::before {
    font-size: 1.125rem
}

.no-touch header:not(.header) .links-container:hover {
    color: #c20016
}

header:not(.header) .links-container .text {
    padding-left: 8px
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .links-container .text {
        display: none
    }
}

@media screen and (min-width: 81.25em) {
    header:not(.header) .links-container .text {
        display: inline-block;
        letter-spacing: 1px
    }
}

header:not(.header) .links .location::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e915'
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .location::before {
        line-height: 38px
    }
}

header:not(.header) .links .brochure::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e919'
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .brochure::before {
        line-height: 38px
    }
}

header:not(.header) .links .account::before {
    background: url("/Media/user.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .account::before {
        line-height: 38px
    }
}

.nav-mob-open header:not(.header) .links .search:not(.show) {
    opacity: 1
}

header:not(.header) .links .search {
    display: none;
    transition: all 200ms ease-in
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .search {
        transform: translate3d(100%, 0, 0)
    }

        header:not(.header) .links .search.show.display {
            transform: translate3d(0, 0, 0)
        }
}

header:not(.header) .links .search.show {
    display: inline-block
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .search.show {
        display: -ms-flexbox;
        display: flex
    }
}

header:not(.header) .links .search.display {
    opacity: 1;
    width: auto
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .links .search.display {
        transition: none
    }
}

header:not(.header) .links .search::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e91b'
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .search::before {
        line-height: 38px
    }
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .links .hidden {
        visibility: visible
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .hidden {
        opacity: 0;
        transition: all 500ms ease-in;
        width: 0
    }

        header:not(.header) .links .hidden.display {
            opacity: 1
        }
}

header:not(.header) .trade.links-container, header:not(.header) .inspire.links-container {
    -ms-flex-align: center;
    align-items: center;
    background: #c20016;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    font-weight: 700;
    padding: 0 15px;
    text-transform: uppercase
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .trade.links-container, header:not(.header) .inspire.links-container {
        height: 36px;
        margin: -2px 10px -2px 18px;
        padding: 0 15px;
        width: auto
    }
}

@media screen and (min-width: 81.25em) {
    header:not(.header) .trade.links-container, header:not(.header) .inspire.links-container {
        padding: 0 28px
    }
}

.no-touch header:not(.header) .trade.links-container:hover, .no-touch header:not(.header) .inspire.links-container:hover {
    background: #ad0014;
    color: #fff
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .trade.links-container .text, header:not(.header) .inspire.links-container .text {
        display: block
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .l1-extended {
        width: 80%
    }
}

header:not(.header) .l1-extended .heading-3 {
    font-family: "Rooster",sans-serif;
    font-size: 1.5625rem;
    line-height: 1;
    margin-bottom: 20px
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .l1-extended .heading-3 {
        display: none
    }
}

header:not(.header) .l1-extended .copy {
    font-size: 1.125rem;
    margin-bottom: 15px
}

@media print, screen and (min-width: 48em) {
    header:not(.header) .l1-extended .copy {
        font-size: .9375rem;
        margin-bottom: 20px
    }
}

header:not(.header) .l1-extended .cta.color-red {
    background-color: #c20016;
    color: #fff
}

header:not(.header) .l1-extended .cta.color-white {
    background-color: #fff;
    color: #28343d
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) {
        position: relative
    }

        header:not(.header) .hidden {
            position: relative;
            visibility: hidden
        }

            header:not(.header) .hidden .close-mob {
                top: 30px;
                visibility: visible
            }

        header:not(.header) .nav-links, header:not(.header) .promo-section, header:not(.header) .explore-all {
            display: none
        }

        header:not(.header) .close-mob {
            cursor: pointer;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
            width: 20px
        }

            header:not(.header) .close-mob::after, header:not(.header) .close-mob::before {
                background-color: #c20016;
                content: "";
                display: block;
                height: 20px;
                position: absolute;
                right: 9px;
                top: 0;
                transform: rotate(45deg);
                width: 2px
            }

            header:not(.header) .close-mob::after {
                transform: rotate(-45deg)
            }

        header:not(.header) .explore .primary-nav.selected .secondary-nav {
            display: block;
            opacity: 1;
            transform: translate3d(0, 0, 0)
        }

        header:not(.header) .explore .primary-nav .advice-content {
            display: none
        }

        header:not(.header) .nav-links {
            transform: translateX(100%);
            transition: all 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
        }

            header:not(.header) .nav-links::before {
                opacity: 0;
                transition: opacity 400ms ease-in
            }

            header:not(.header) .nav-links.show {
                display: block
            }

    body:not(.nav-mob-open) header:not(.header) .nav-links.show {
        position: absolute;
        right: -200px;
        top: 0
    }

    .nav-mob-open header:not(.header) .nav-links.show .l0 {
        transform: translateX(0)
    }

    .nav-mob-open header:not(.header) .nav-links.fade-in::before {
        opacity: 1
    }

    header:not(.header) .nav-links .l0 {
        transform: translateX(20%);
        transition: transform 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
    }

        header:not(.header) .nav-links .l0:nth-child(1) {
            transition-delay: 100ms
        }

        header:not(.header) .nav-links .l0:nth-child(2) {
            transition-delay: 110ms
        }

        header:not(.header) .nav-links .l0:nth-child(3) {
            transition-delay: 120ms
        }

        header:not(.header) .nav-links .l0:nth-child(4) {
            transition-delay: 130ms
        }

        header:not(.header) .nav-links .l0:nth-child(5) {
            transition-delay: 140ms
        }

        header:not(.header) .nav-links .l0:nth-child(6) {
            transition-delay: 150ms
        }

        header:not(.header) .nav-links .l0:nth-child(7) {
            transition-delay: 160ms
        }

        header:not(.header) .nav-links .l0:nth-child(8) {
            transition-delay: 170ms
        }

        header:not(.header) .nav-links .l0:nth-child(9) {
            transition-delay: 180ms
        }

        header:not(.header) .nav-links .l0:nth-child(10) {
            transition-delay: 190ms
        }

        header:not(.header) .nav-links .l0:nth-child(11) {
            transition-delay: 200ms
        }

        header:not(.header) .nav-links .l0:nth-child(12) {
            transition-delay: 210ms
        }

        header:not(.header) .nav-links .l0:nth-child(13) {
            transition-delay: 220ms
        }

        header:not(.header) .nav-links .l0:nth-child(14) {
            transition-delay: 230ms
        }

        header:not(.header) .nav-links .l0:nth-child(15) {
            transition-delay: 240ms
        }

        header:not(.header) .nav-links .l0:nth-child(16) {
            transition-delay: 250ms
        }

        header:not(.header) .nav-links .l0:nth-child(17) {
            transition-delay: 260ms
        }

        header:not(.header) .nav-links .l0:nth-child(18) {
            transition-delay: 270ms
        }

        header:not(.header) .nav-links .l0:nth-child(19) {
            transition-delay: 280ms
        }

        header:not(.header) .nav-links .l0:nth-child(20) {
            transition-delay: 290ms
        }

    header:not(.header) .nav-links li {
        font-size: 1.25rem;
        margin-left: 0;
        padding: 12px 0 12px 37px
    }

        header:not(.header) .nav-links li.select {
            display: inline
        }

            header:not(.header) .nav-links li.select.l0.has-sub::after {
                margin-top: 25px
            }

            header:not(.header) .nav-links li.select .l0-anchor {
                display: inline-block;
                height: 56px;
                line-height: 56px
            }

        header:not(.header) .nav-links li:last-child {
            margin-bottom: 20px
        }

        header:not(.header) .nav-links li a:not(.primary) {
            font-size: 1.25rem
        }

        header:not(.header) .nav-links li.has-sub::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: 7px;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #c20016;
            float: right;
            font-size: .625rem;
            margin-top: 10px;
            transform: rotate(0deg)
        }

        header:not(.header) .nav-links li.has-sub.select::after {
            margin-top: 22px
        }

        header:not(.header) .nav-links li.l0.has-sub::after {
            margin-top: 13px
        }

        header:not(.header) .nav-links li .back {
            font-family: "Rooster",sans-serif;
            font-size: 1.125rem;
            margin-bottom: 15px;
            margin-top: 30px;
            padding-left: 20px;
            position: relative
        }

            header:not(.header) .nav-links li .back::before {
                font-family: "icon-howdens";
                line-height: 1;
                            text-transform: none;
                content: '\e901';
                font-size: 7px;
                transition: transform 675ms ease;
                transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                color: #c20016;
                display: inline-block;
                font-size: .5rem;
                left: 0;
                margin-top: -4px;
                position: absolute;
                top: 50%;
                transform: rotate(180deg)
            }

    header:not(.header) .nav-links .primary-nav-list li {
        font-family: "Rooster",sans-serif;
        font-size: .9375rem
    }

        header:not(.header) .nav-links .primary-nav-list li .l1-label, header:not(.header) .nav-links .primary-nav-list li a:not(.primary) {
            font-family: "Rooster",sans-serif;
            font-size: 1.125rem
        }

    header:not(.header) .nav-links .view-all {
        display: inline-block;
        font-family: "Rooster",sans-serif;
        font-size: .9375rem;
        font-weight: bold;
        padding: 15px 0 15px 37px
    }

    header:not(.header) .nav-links .selected-cat {
        font-size: 1.25rem;
        line-height: 1.5;
        font-size: 1.125rem;
        font-weight: bold;
        margin: 20px 0 15px;
        padding-left: 37px;
        position: relative
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 64em) {
    header:not(.header) .nav-links .selected-cat {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 100.0625em) {
    header:not(.header) .nav-links .selected-cat {
        font-size: 2.1875rem;
        line-height: 1.14
    }
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .nav-links .selected-cat::before {
        background-color: #c20016;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        top: 14px;
        width: 25px
    }

    header:not(.header) .container .grid {
        display: block;
        margin: 0
    }

    header:not(.header) .container-wrapper {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        max-width: 94.25rem;
        margin: 0 auto
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 30.0625em) {
    header:not(.header) .container-wrapper {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 48em) {
    header:not(.header) .container-wrapper {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 64em) {
    header:not(.header) .container-wrapper {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media screen and (max-width: 63.9375em) {
    header:not(.header) .grid-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        display: block
    }

    header:not(.header) .links {
        margin-right: 10px
    }

    .nav-mob-open:not(.search-opened) header:not(.header) .links {
        text-align: center
    }

        .nav-mob-open:not(.search-opened) header:not(.header) .links.show {
            border-top: 1px solid #f1f1f1;
            bottom: 0;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            left: 0;
            opacity: 0;
            position: fixed;
            transform: translate3d(0, 0, 0);
            width: 100vw;
            z-index: 1
        }

            .nav-mob-open:not(.search-opened) header:not(.header) .links.show .links-container {
                -ms-flex-align: center;
                align-items: center;
                border-right: 1px solid #f1f1f1;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-positive: 1;
                flex-grow: 1;
                -ms-flex-pack: center;
                justify-content: center;
                padding: 21px 0;
                width: 25%
            }

                .nav-mob-open:not(.search-opened) header:not(.header) .links.show .links-container.inspire, .nav-mob-open:not(.search-opened) header:not(.header) .links.show .links-container.trade {
                    -ms-flex-align: center;
                    align-items: center;
                    border-right: 0;
                    box-sizing: border-box;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-pack: center;
                    justify-content: center;
                    min-height: 63px;
                    padding: 0 10px
                }

            .nav-mob-open:not(.search-opened) header:not(.header) .links.show .text {
                display: inline-block
            }

            .nav-mob-open:not(.search-opened) header:not(.header) .links.show .nav-icon {
                display: none
            }

        .nav-mob-open:not(.search-opened) header:not(.header) .links.fade-in {
            opacity: 1;
            transition: opacity 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986),transform 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
        }

            .nav-mob-open:not(.search-opened) header:not(.header) .links.fade-in .links {
                width: 100vw
            }

    .search-opened.nav-mob-open header:not(.header) .links {
        background: rgba(0,0,0,0);
        height: 100vh
    }

    header:not(.header) .links-container:not(.search) {
        display: none
    }

    .nav-mob-open header:not(.header) .links-container.trade, .nav-mob-open header:not(.header) .links-container.inspire {
        border-right: 0
    }

    header:not(.header) .links-container.search {
        padding: 20px 10px
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 48em) {
    header:not(.header) .links-container.search {
        padding: 30px 10px
    }
}

@media screen and (max-width: 63.9375em) {
    .nav-mob-open.search-opened header:not(.header) .links-container.search {
        display: none
    }

    header:not(.header) .links-container .text {
        display: none
    }

    header:not(.header) .links-container:nth-last-of-type(1) {
        border-right: 0
    }

    header:not(.header) .logo {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-positive: 1;
        flex-grow: 1;
        height: 40px
    }

    .nav-mob-open header:not(.header) .logo {
        margin-bottom: 10px;
        margin-top: 10px
    }

    header:not(.header) .logo .logo-image {
        margin-right: 0
    }

        header:not(.header) .logo .logo-image img {
            display: block
        }

    header:not(.header) .switch {
        padding: 0 18px 0 15px
    }

    header:not(.header) .nav-icon {
        float: right;
        font-size: 1.5625rem
    }

    header:not(.header) .nav-menu {
        opacity: 0;
        transform: translateX(100%);
        transition: transform 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986),opacity 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
        height: 100vh;
        left: 0;
        position: absolute;
        position: -ms-device-fixed;
        top: 0
    }

        header:not(.header) .nav-menu.selected {
            opacity: 1;
            transform: translateX(0)
        }

    .iphone header:not(.header) .nav-menu {
        height: calc(100vh - 69px)
    }

    .ipad header:not(.header) .nav-menu {
        height: calc(100vh - 31px)
    }

    header:not(.header) .nav-menu.show {
        display: block
    }

        header:not(.header) .nav-menu.show:not(.no-scroll) {
            overflow-y: scroll
        }

    header:not(.header) .nav-menu li {
        transform: translateX(20%);
        transition: transform 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
    }

        header:not(.header) .nav-menu li:nth-child(1) {
            transition-delay: 100ms
        }

        header:not(.header) .nav-menu li:nth-child(2) {
            transition-delay: 110ms
        }

        header:not(.header) .nav-menu li:nth-child(3) {
            transition-delay: 120ms
        }

        header:not(.header) .nav-menu li:nth-child(4) {
            transition-delay: 130ms
        }

        header:not(.header) .nav-menu li:nth-child(5) {
            transition-delay: 140ms
        }

        header:not(.header) .nav-menu li:nth-child(6) {
            transition-delay: 150ms
        }

        header:not(.header) .nav-menu li:nth-child(7) {
            transition-delay: 160ms
        }

        header:not(.header) .nav-menu li:nth-child(8) {
            transition-delay: 170ms
        }

        header:not(.header) .nav-menu li:nth-child(9) {
            transition-delay: 180ms
        }

        header:not(.header) .nav-menu li:nth-child(10) {
            transition-delay: 190ms
        }

        header:not(.header) .nav-menu li:nth-child(11) {
            transition-delay: 200ms
        }

        header:not(.header) .nav-menu li:nth-child(12) {
            transition-delay: 210ms
        }

        header:not(.header) .nav-menu li:nth-child(13) {
            transition-delay: 220ms
        }

        header:not(.header) .nav-menu li:nth-child(14) {
            transition-delay: 230ms
        }

        header:not(.header) .nav-menu li:nth-child(15) {
            transition-delay: 240ms
        }

        header:not(.header) .nav-menu li:nth-child(16) {
            transition-delay: 250ms
        }

        header:not(.header) .nav-menu li:nth-child(17) {
            transition-delay: 260ms
        }

        header:not(.header) .nav-menu li:nth-child(18) {
            transition-delay: 270ms
        }

        header:not(.header) .nav-menu li:nth-child(19) {
            transition-delay: 280ms
        }

        header:not(.header) .nav-menu li:nth-child(20) {
            transition-delay: 290ms
        }

        header:not(.header) .nav-menu li.select > a {
            display: inline-block;
            height: 51px;
            line-height: 51px
        }

    header:not(.header) .primary-nav.selected .l1 {
        transform: translateX(0)
    }

    header:not(.header) .secondary-nav.selected .l2 {
        transform: translateX(0)
    }

    header:not(.header) .tertiary-nav.selected .l3 {
        transform: translateX(0)
    }
}

header:not(.header) .home {
    font-weight: bold;
    position: relative
}

    header:not(.header) .home::before {
        background-color: #c20016;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        top: 30px;
        width: 25px
    }

header:not(.header) .mob-links {
    bottom: 65px;
    position: fixed;
    width: 100%
}

    header:not(.header) .mob-links div {
        padding: 20px 0
    }

header:not(.header) .nav-icon {
    display: inline-block;
    margin: 10px 0;
    padding: 3px 14px 7px
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    header:not(.header) .nav-icon {
        margin: 20px 0
    }
}

header:not(.header) .nav-icon::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e909';
    font-size: 1.125rem
}

header:not(.header) .locate {
    display: none
}

@media print, screen and (min-width: 64em) {
    header:not(.header) {
        position: fixed;
        top: 0
    }

    .preview-mode header:not(.header) {
        top: 139px
    }

    .exp-mode header:not(.header) {
        position: static
    }

    header:not(.header) .selected-cat, header:not(.header) .hidden, header:not(.header) .nav-icon, header:not(.header) .home, header:not(.header) .mob-links, header:not(.header) .back, header:not(.header) .view-all, header:not(.header) .depot, header:not(.header) .close-mob {
        display: none
    }

    header:not(.header) .l0.open.has-sub .primary-nav, header:not(.header) .explore.open.has-sub .primary-nav {
        height: auto;
        top: 80px
    }

    .scrolled header:not(.header) .l0.open.has-sub .primary-nav, .scrolled header:not(.header) .explore.open.has-sub .primary-nav {
        top: 60px
    }

    header:not(.header) .logo {
        margin-right: 23px
    }

    header:not(.header) .primary-nav {
        opacity: 0;
        transform: translateY(40px);
        transition: transform 725ms cubic-bezier(1, 0, 0, 1),opacity 725ms cubic-bezier(1, 0, 0, 1);
        display: none;
        opacity: 0
    }

        header:not(.header) .primary-nav.visible {
            opacity: 1;
            transform: translateY(0)
        }

        header:not(.header) .primary-nav.show {
            display: block;
            min-height: 415px
        }
}

@media screen and (min-width: 64em) and (min-width: 81.25em) {
    header:not(.header) .primary-nav.show {
        min-height: 497px
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .primary-nav.open {
        opacity: 1
    }

    header:not(.header) .links {
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        margin: 0 10px 0 0;
        padding: 0
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) .links {
        margin: 3px 10px 0 0
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .links .links-container {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        padding-left: 10px;
        padding-right: 10px
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) .links .links-container {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media print, screen and (min-width: 64em) {
    .scrolled header:not(.header) .links {
        margin-top: 1px
    }

    header:not(.header) .l1.open .nav-menu {
        opacity: 1
    }

    header:not(.header) .l1.open .secondary-nav.nav-menu {
        display: block
    }

    header:not(.header) .l1.open > a:not(.primary) {
        position: relative
    }

        header:not(.header) .l1.open > a:not(.primary)::before {
            background-color: #c20016;
            content: '';
            height: 2px;
            left: -54px;
            position: absolute;
            top: 11px;
            width: 30px
        }

    header:not(.header) .l1.has-sub::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #868d91;
        float: right;
        margin-top: 11px;
        transform: rotate(0deg)
    }

    header:not(.header) .l0 {
        float: left
    }

        header:not(.header) .l0.has-sub > a:not(.primary)::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: .625rem;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #c20016;
            display: inline-block;
            margin-left: 5px;
            transform: rotate(90deg)
        }

        header:not(.header) .l0 > a:not(.primary) {
            position: relative
        }

            header:not(.header) .l0 > a:not(.primary)::before {
                background-color: #c20016;
                content: '';
                height: 2px;
                left: 50%;
                position: absolute;
                top: 48px;
                transform: scaleX(2);
                transition: 675ms linear;
                width: 0
            }

    .scrolled header:not(.header) .l0 > a:not(.primary)::before {
        top: 38px
    }

    header:not(.header) .l0.open > a:not(.primary)::before, .no-touch header:not(.header) .l0:hover:not(.has-sub) > a:not(.primary)::before {
        left: 0;
        transform: scaleX(1);
        width: 100%
    }

    header:not(.header) .l0.open > a:not(.primary)::after, .no-touch header:not(.header) .l0:hover:not(.has-sub) > a:not(.primary)::after {
        transform: rotate(270deg)
    }

    header:not(.header) li.l1 {
        font-size: 1.125rem;
        line-height: 1.67;
        margin-left: 0;
        padding: 0 0 7.5px;
        padding-right: 5%
    }

        header:not(.header) li.l1.open > a:not(.primary) {
            color: #c20016
        }

        header:not(.header) li.l1.open::after {
            color: #c20016
        }

        header:not(.header) li.l1 a:not(.primary) {
            font-size: 1.125rem;
            line-height: 1.67
        }

            header:not(.header) li.l1 a:not(.primary).explore-all {
                display: inline-block;
                font-size: .625rem;
                letter-spacing: 1.8px;
                line-height: 1.5
            }

    .theme-depot header:not(.header) li .explore-all.cta:hover {
        color: #fff
    }

    header:not(.header) li.l2 {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .9375rem;
        line-height: 1.67;
        line-height: 1;
        margin-bottom: 25px;
        padding: 0
    }

    .rooster-toggle header:not(.header) li.l2 {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) li.l2 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) li.l2.has-sub {
        width: 100%
    }

    header:not(.header) li.l2 a:not(.primary) {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .9375rem;
        line-height: 1.67;
        line-height: 1
    }

    .rooster-toggle header:not(.header) li.l2 a:not(.primary) {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) li.l2 a:not(.primary) {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) li.l2 .l2-anchor {
        display: inline;
        margin-bottom: 10px
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) li.l2 .l2-anchor {
        line-height: 1
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) li.l2:last-child {
        margin-bottom: 0
    }

    header:not(.header) li.l3 {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: .8125rem;
        line-height: 1.54;
        line-height: 2.15;
        padding: 0
    }

    .rooster-toggle header:not(.header) li.l3 {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) li.l3 {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) li.l3 a:not(.primary) {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: .8125rem;
        line-height: 1.54;
        line-height: 1.2
    }

    .rooster-toggle header:not(.header) li.l3 a:not(.primary) {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) li.l3 a:not(.primary) {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .l2 a:not(.primary) {
        position: relative
    }

        header:not(.header) .l2 a:not(.primary):before {
            transform: scaleX(0);
            transition-duration: 250ms;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            visibility: hidden;
            width: 100%
        }

    .no-touch header:not(.header) .l2 a:not(.primary):hover:before {
        transform: scaleX(1);
        visibility: visible
    }

    header:not(.header) .l2 a:not(.primary)::before {
        background-color: #c20016;
        bottom: 0;
        content: '';
        height: 1px;
        left: 0;
        position: absolute
    }

    .no-touch :not(.theme-depot) header:not(.header) .l2 a:not(.primary):hover {
        color: #c20016
    }

    header:not(.header) .l3 a:not(.primary) {
        display: inline
    }

        header:not(.header) .l3 a:not(.primary)::before {
            background-color: #c20016;
            bottom: 0
        }

    .no-touch header:not(.header) .l0-anchor:hover {
        color: #c20016
    }

    header:not(.header) .locate {
        display: inline-block
    }

    header:not(.header) .nav-links {
        display: block;
        -ms-flex-positive: 2;
        flex-grow: 2;
        padding-left: 13px
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    header:not(.header) .nav-links li a:not(.primary) {
        font-size: 1rem;
        line-height: 1rem
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) .primary-nav {
        height: auto;
        width: 100%;
        z-index: -1
    }

        header:not(.header) .primary-nav .grid {
            background: #fff
        }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    header:not(.header) .primary-nav .grid {
        margin: 0
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) ul.primary-nav-list {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-bottom: 50px;
        margin-top: 66px;
        min-height: 380px;
        position: relative
    }

    header:not(.header) ul .secondary-nav-list {
        margin-left: 0
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    header:not(.header) ul .secondary-nav-list {
        max-height: 400px;
        overflow: hidden
    }
}

@media print, screen and (min-width: 64em) {
    header:not(.header) ul .secondary-nav-list li {
        line-height: 1.2;
        margin-bottom: 15px;
        margin-left: 0;
        padding-top: 0
    }

        header:not(.header) ul .secondary-nav-list li .l1-anchor {
            display: inline-block
        }

    header:not(.header) ul .secondary-nav-list ul {
        background: rgba(0,0,0,0);
        margin-left: 0;
        margin-top: 10px
    }

    header:not(.header) ul .secondary-nav-list.column-3 {
        column-count: 3
    }

    header:not(.header) ul .secondary-nav-list.column-2 {
        column-count: 2
    }

    header:not(.header) ul .secondary-nav-list .tertiary-nav li:last-child {
        margin-bottom: 0
    }

    header:not(.header) .tertiary-nav {
        background: rgba(0,0,0,0)
    }

    header:not(.header) .secondary-nav {
        background: rgba(0,0,0,0);
        height: 100%;
        left: 100%;
        margin-left: 0;
        position: absolute;
        top: 0;
        width: calc(300% + 5.625rem)
    }

        header:not(.header) .secondary-nav.nav-menu {
            display: none
        }

        header:not(.header) .secondary-nav li {
            display: block
        }

            header:not(.header) .secondary-nav li.l2 {
                display: inline-table;
                width: 100%
            }

    header:not(.header) .close {
        cursor: pointer;
        position: absolute;
        right: 25px;
        top: 25px
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    header:not(.header) .close::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        color: #c20016;
        font-size: .9375rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) and (min-width: 48em) {
    header:not(.header) .close::before {
        font-size: 1rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    header:not(.header) .close {
        height: 20px;
        width: 20px
    }

        header:not(.header) .close::after, header:not(.header) .close::before {
            background-color: #c20016;
            content: "";
            display: block;
            height: 20px;
            position: absolute;
            right: 9px;
            top: 0;
            transform: rotate(45deg);
            width: 2px
        }

        header:not(.header) .close::after {
            transform: rotate(-45deg)
        }
}

header:not(.header) .desktop-container {
    border-left: 1px solid #d8d8d8;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin-bottom: 60px;
    padding-left: 1.875rem
}

header:not(.header) .desktop-grid {
    width: calc(68.25% - 0.625rem)
}

header:not(.header) .promo-section {
    margin-left: 1.875rem;
    width: calc(31.75% - 1.25rem)
}

header:not(.header) .promo-content {
    color: #28343d;
    padding: 20px 0 0;
    text-align: center;
    width: calc(100% - 8px);
    z-index: 2
}

    header:not(.header) .promo-content .heading-3 {
        font-family: "Rooster",sans-serif;
    
        font-size: 1.25rem;
        line-height: 1.5
    }

    header:not(.header) .promo-content p {
        font-size: .625rem;
        letter-spacing: 2px;
        line-height: 1.4;
        text-transform: uppercase
    }

header:not(.header) .promo-img {
    position: relative;
    width: 100%
}

    header:not(.header) .promo-img img {
        display: block;
        max-height: 370px;
        max-width: 100%;
        position: relative;
        width: auto
    }

header:not(.header) .advice-content {
    width: calc(33.3333333333% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin-top: 66px;
    position: relative
}

    header:not(.header) .advice-content .cta.primary {
        font-size: .625rem;
        line-height: 1.4;
        margin-top: 20px
    }

    header:not(.header) .advice-content .heading-3 {
        font-family: "Rooster",sans-serif;
        font-size: 1.5625rem;
        line-height: 1
    }

    header:not(.header) .advice-content p {
        margin-top: 20px
    }

header:not(.header) .explore .secondary-nav {
    border: 0;
    display: block;
    left: 1.875rem;
    margin-left: 0.9375rem;
    margin-top: 66px;
    padding-left: 0;
    position: static;
    width: calc(66.67% - 1.875rem)
}

header:not(.header) .explore .container-wrapper {
    display: -ms-flexbox;
    display: flex
}

header:not(.header) .explore .grid-wrapper {
    width: calc(63.5% - 1.17375rem)
}

header:not(.header) .explore .secondary-nav-list {
    column-count: 1;
    padding-left: 10%
}

    header:not(.header) .explore .secondary-nav-list .l1-anchor {
        font-size: .9375rem
    }

header:not(.header) .explore .promo-section {
    width: calc(36.5% - 0.703125rem)
}

header:not(.header) .explore .l1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    line-height: 1;
    margin-bottom: 15px;
    padding-bottom: 0
}

.rooster-toggle header:not(.header) .explore .l1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    header:not(.header) .explore .l1 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close) {
    position: relative
}

    header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close):before {
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

.no-touch header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close):hover:before {
    transform: scaleX(1);
    visibility: visible
}

header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close)::before {
    background-color: #c20016;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 24px
}

.no-touch header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close):hover {
    color: #c20016
}

.no-touch .theme-depot header:not(.header) .explore a:not(.l0-anchor):not(.cta):not(.close):hover {
    color: #fff
}

header:not(.header) .explore .l2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    line-height: 1;
    margin-bottom: 25px;
    padding: 0
}

.rooster-toggle header:not(.header) .explore .l2 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    header:not(.header) .explore .l2 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

header:not(.header) .explore .l2.has-sub {
    display: inline-block;
    width: 100%
}

header:not(.header) .explore .l2 a:not(.primary) {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    line-height: 1
}

.rooster-toggle header:not(.header) .explore .l2 a:not(.primary) {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    header:not(.header) .explore .l2 a:not(.primary) {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

header:not(.header) .explore .l2 a:not(.primary):hover {
    color: #c20016;
    text-decoration: underline
}

@media screen and (min-width: 81.25em) {
    header:not(.header) li.l1 {
        padding-right: 10%
    }
}

@media screen and (min-width: 81.25em) {
    header:not(.header) .icon::before {
        margin-right: 10px
    }
}

header:not(.header) .icon:hover {
    background: #fff
}

@media screen and (max-width: 63.9375em) {
    .nav-mob-open {
        height: 100vh;
        overflow: hidden;
        position: fixed;
        width: 100%
    }

        .nav-mob-open:not(.search-opened) .nav-links {
            z-index: 1
        }

        .nav-mob-open .nav-links {
            background: #fff;
            height: 100vh;
            left: 0;
            overflow-y: scroll;
            position: absolute;
            top: 0;
            width: 100%
        }

            .nav-mob-open .nav-links.fade-in {
                transform: translate3d(0, 0, 0)
            }

        .nav-mob-open .links {
            background: #fff
        }
}

.switch-open .nav__backdrop, .search-opened .nav__backdrop, .nav-desk-open .nav__backdrop {
    display: block
}

.search-header-container .close-search {
    padding: 13px;
    position: absolute;
    right: 12px;
    top: -60px
}

@media print, screen and (min-width: 48em) {
    .search-header-container .close-search {
        right: 34px;
        top: -60px
    }
}

@media print, screen and (min-width: 64em) {
    .search-header-container .close-search {
        right: 34px;
        top: -115px
    }
}

.search-header-container .close-search::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90b';
    color: #c20016;
    font-size: 1.125rem;
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .search-header-container .close-search::before {
        font-size: .9375rem
    }
}

.nav__backdrop {
    background: rgba(0,0,0,0.4);
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.5s ease-in;
    z-index: 2
}

    .nav__backdrop.show {
        opacity: 1
    }

.loading .nav__backdrop {
    z-index: 6
}

.header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 56px;
    z-index: 3
}

.no-js .header {
    position: relative
}

.js-filtering-sidebar-active .header, .js-modal-overlay-active .header {
    filter: blur(5px)
}

.header .header__custom-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: end;
    align-items: flex-end;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .header .header__custom-link {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        margin-right: 0
    }
}

@media screen and (max-width: 47.9375em) {
    .header .header__custom-link {
        right: 44px
    }

    .js-mega-menu-open .header .header__custom-link {
        left: 0;
        background-color: #28343d
    }

    .header .header__custom-link.custom-mobile-open {
        right: 0;
        left: 0;
        background-color: #28343d;
        padding: 0 16px;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: start;
        align-items: flex-start;
        z-index: 2
    }

        .header .header__custom-link.custom-mobile-open .custom-link-menu__nav-actions-close-button {
            display: block
        }
}

@media screen and (max-width: 47.9375em) {
    .header .header__custom-link--right {
        right: 0
    }
}

.header .custom-link-menu__trigger {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    background-color: #28343d;
    border: none;
    padding: 15px;
    cursor: pointer;
    -ms-flex-align: center;
    align-items: center
}

    .header .custom-link-menu__trigger:focus {
        outline: none
    }

@media screen and (max-width: 47.9375em) {
    .header .custom-link-menu__trigger {
        padding: 17px 10px 16px 8px
    }

    .iphone .header .custom-link-menu__trigger {
        padding: 15px 10px 15px 8px;
        margin: 0
    }

    .js-mega-menu-open .header .custom-link-menu__trigger {
        display: none
    }

    .header .custom-link-menu__trigger.active {
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        padding: 15px 30px 17px 25px
    }
}

.header .custom-link-menu__trigger .custom-link-menu__trigger-icon-img {
    display: -ms-flexbox;
    display: flex;
    width: 24px;
    height: 24px;
    margin-top: -2px;
    pointer-events: none
}

    .header .custom-link-menu__trigger .custom-link-menu__trigger-icon-img path {
        fill: #fff
    }

.header .custom-link-menu__trigger .custom-link-menu__trigger-text {
    font-family: "Rooster",sans-serif;
    font-size: 1.375rem;
    line-height: 0.91;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    padding: 1px 0 0 14px
}

@media screen and (max-width: 47.9375em) {
    .header .custom-link-menu__trigger .custom-link-menu__trigger-text {
        display: none;
        padding-left: 7px;
        padding-bottom: 2px;
        font-size: .9375rem
    }

    .js-mega-menu-open .header .custom-link-menu__trigger .custom-link-menu__trigger-text {
        display: inline-block;
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff
    }
}

.header .custom-link-menu__trigger.active {
    border-top: 2px solid #c20016;
    background-color: #fff;
    color: #28343d
}

    .header .custom-link-menu__trigger.active .custom-link-menu__trigger-icon-img path {
        fill: #28343d
    }

    .header .custom-link-menu__trigger.active .custom-link-menu__trigger-text {
        color: #28343d
    }

@media screen and (max-width: 47.9375em) {
    .header .custom-link-menu__trigger.active {
        position: relative;
        padding: 15px 0 17px;
        background-color: #28343d;
        border-top: 2px solid #28343d
    }

        .header .custom-link-menu__trigger.active .custom-link-menu__trigger-text {
            display: block;
            color: #fff
        }

        .header .custom-link-menu__trigger.active .custom-link-menu__trigger-icon-img path {
            fill: #fff
        }
}

.header .custom-link-menu__nav-actions-close-button {
    background: none;
    border: none;
    display: none;
    height: 20px;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
    width: 24px;
    position: relative;
    width: 16px;
    z-index: 1;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

    .header .custom-link-menu__nav-actions-close-button::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        font-size: 1rem;
        font-weight: 400;
        color: #fff
    }

@media screen and (max-width: 47.9375em) {
    .js-mega-menu-open .header .custom-link-menu__nav-actions-close-button {
        margin: 0 16px 0 auto;
        color: #fff;
        display: none
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-link-menu__nav-actions-close-button {
        display: none
    }

    .custom-mobile-open .header .custom-link-menu__nav-actions-close-button {
        display: block
    }
}

.header .custom-links-menu__level-two-parent {
    background-image: linear-gradient(to bottom, #fff, #f1f1f1 35%, #f1f1f1);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.5);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden;
    width: 100%;
    z-index: -1;
    overflow-y: auto
}

    .header .custom-links-menu__level-two-parent.active {
        opacity: 1;
        visibility: visible
    }

@media screen and (max-width: 63.9375em) {
    .header .custom-links-menu__level-two-parent {
        box-shadow: 0 8px 8px 0 rgba(0,0,0,0.5);
        z-index: 4;
        width: 100vw;
        position: fixed;
        top: 56px
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-links-menu__level-two-parent {
        height: 100%
    }
}

.header .custom-links-menu__level-two {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: auto !important;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    margin: 0;
    box-sizing: border-box;
    padding: 43px calc((100% - 1355px)/2) 0
}

@media screen and (max-width: 81.1875em) {
    .header .custom-links-menu__level-two {
        padding: 43px calc((100% - 1024px)/2) 0
    }
}

@media screen and (max-width: 63.9375em) {
    .header .custom-links-menu__level-two {
        padding: 43px calc((100% - 768px)/2) 0;
        -ms-flex-line-pack: baseline;
        align-content: baseline
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-links-menu__level-two {
        padding: 43px calc((100% - 314px)/2);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }
}

.header .custom-links-menu__level-two-item {
    margin: 0 55px 50px;
    list-style-type: none;
    position: relative;
    width: 160px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (max-width: 47.9375em) {
    .header .custom-links-menu__level-two-item:nth-child(odd) {
        margin-left: 0
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-links-menu__level-two-item:nth-child(even) {
        margin-right: 0
    }
}

@media screen and (max-width: 81.1875em) {
    .header .custom-links-menu__level-two-item {
        margin: 0 48px 48px
    }
}

@media screen and (max-width: 63.9375em) {
    .header .custom-links-menu__level-two-item {
        width: 144px;
        margin: 0 24px 35px
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-links-menu__level-two-item {
        width: 136px;
        margin: 0 20px 24px
    }
}

.header .custom-link-menu__level-two-link {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1.125rem;
    line-height: 20px
}

.header .custom-link-menu__level-two-thumb {
    width: 100%;
    height: 160px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #979797;
    box-sizing: border-box
}

@media screen and (max-width: 63.9375em) {
    .header .custom-link-menu__level-two-thumb {
        height: 144px
    }
}

@media screen and (max-width: 47.9375em) {
    .header .custom-link-menu__level-two-thumb {
        height: 136px
    }
}

.header .custom-link-menu__level-two-thumb .custom-link-menu__level-two-img {
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.header .custom-link-menu__level-two-title {
    font-size: 1.125rem;
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 11px;
    font-weight: bold;
    line-height: 20px
}

.header .custom-link-menu__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.header__bleed-mask {
    background-color: #28343d
}

.header__bar {
    background: #28343d;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    transform-origin: 0 0
}

    .header__bar .header__bar-inner {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
        justify-content: flex-start;
        max-width: 1540px;
        margin: 0 auto;
        padding: 10px 30px 6px
    }

@media screen and (max-width: 63.9375em) {
    .header__bar .header__bar-inner {
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 8px 16px 4px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar .header__bar-inner {
        padding: 0
    }
}

@media print, screen and (min-width: 64em) {
    .has-scrolled .header__bar {
        transform: translateY(-50%)
    }

    .scrolled-more .header__bar {
        transform: translateY(-100%)
    }
}

@media screen and (max-width: 63.9375em) {
    .header__bar {
        background: transparent
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar {
        height: 96px
    }

    .scrolled-more .header__bar {
        height: 56px
    }
}

.header__bar-top, .header__bar-bottom {
    background: #28343d;
    -ms-flex-line-pack: center;
    align-content: center;
    margin-top: 0;
    padding: 0;
    transition: filter 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 47.9375em) {
    .header__bar-top, .header__bar-bottom {
        background: transparent
    }
}

.header__bar-bottom .header__bar-inner {
    padding-bottom: 0;
    padding-top: 0
}

@media screen and (max-width: 63.9375em) {
    .header__bar-bottom .header__bar-inner {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding: 0
    }
}

.header__bar-bottom .header__bar-bottom-nav {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        -ms-flex: auto;
        flex: auto
    }

@media screen and (max-width: 63.9375em) {
    .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        padding: 0 16px
    }

    .has-scrolled .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        margin-top: -40px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        padding: 0 8px;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .has-scrolled .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        margin-top: 0
    }

    .js-nav-open .header__bar-bottom .header__bar-bottom-nav:first-of-type {
        filter: blur(5px)
    }
}

.header__bar-bottom .header__bar-bottom-nav.empty:first-of-type {
    height: 0;
    margin-top: 0
}

.has-scrolled .header__bar-bottom .header__bar-bottom-nav.empty:first-of-type {
    margin-top: 0
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--short-arrow {
        padding: 10px 0 !important;
        white-space: nowrap
    }

        .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button .header__button-text, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--short-arrow .header__button-text {
            display: inline-block;
            max-width: 100%
        }

        .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--no-arrow .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--no-arrow .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--short-arrow .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__button--short-arrow .header__button-text-content {
            display: block !important;
            color: #fff
        }
}

.header__bar-bottom .header__bar-bottom-nav.login-mobile-open .header__account-panel-close--mobile {
    opacity: 1;
    visibility: visible;
    transition-delay: 400ms
}

.header__bar-bottom .header__bar-bottom-nav span {
    display: block;
    font-family: "Rooster",sans-serif
}

.header__bar-bottom .header__bar-bottom-nav .calendar-icon .calendar-icon__header, .header__bar-bottom .header__bar-bottom-nav .calendar-icon .calendar-icon__body {
    display: -ms-flexbox;
    display: flex
}

.header__bar-bottom .header__bar-bottom-nav .header__button, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right {
    -ms-flex-line-pack: center;
    align-content: center;
    background: none;
    border: none;
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: 10px 90px 10px 10px;
    height: 60px;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right {
        height: 56px
    }
}

.header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text {
    display: inline-block;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem;
    padding-left: 12px;
    text-align: left;
    vertical-align: middle;
    max-width: 120px;
    white-space: nowrap;
    word-wrap: normal
}

    .header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text > .header__button-text-header {
        display: block;
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 3px;
        text-transform: uppercase
    }

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text > .header__button-text-header, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text > .header__button-text-header {
        display: none
    }
}

.header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text > .header__button-text-content {
    text-overflow: ellipsis;
    overflow: hidden;
    width: auto
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text > .header__button-text-content, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text > .header__button-text-content {
        display: none
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right .header__button-text {
        display: none
    }
}

.header__bar-bottom .header__bar-bottom-nav .header__button.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__find-a-depot .header__button-text {
    max-width: 140px
}

.header__bar-bottom .header__bar-bottom-nav .header__button:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right:not(.header__button--no-arrow)::before {
    background: #fff;
    border-top: 2px solid #c20016;
    content: "";
    display: block;
    height: calc(100% - 2px);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden;
    width: 100%
}

.header__bar-bottom .header__bar-bottom-nav .header__button:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right:not(.header__button--no-arrow)::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    right: 15px;
    transform: translateY(-50%) rotate(90deg) rotateY(0deg);
    top: 50%;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right:not(.header__button--no-arrow)::after {
        display: none
    }
}

.header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow-right {
    padding-right: 44px
}

@media screen and (max-width: 63.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow-right {
        padding-bottom: 12px;
        padding-top: 12px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow-right, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow-right {
        padding: 15px 10px 16px
    }
}

.header__bar-bottom .header__bar-bottom-nav .header__button.header__button--short-arrow-right::after, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--short-arrow-right::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--short-arrow-right::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--short-arrow-right::after {
    transform: translateY(-50%) rotate(0) rotateY(0)
}

.header__bar-bottom .header__bar-bottom-nav .header__button.header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--no-arrow {
    margin-left: 13px;
    padding-left: 15px;
    padding-right: 0
}

    .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--no-arrow .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--no-arrow .header__button-text {
        font-size: 1.375rem;
        font-weight: 700
    }

    .header__bar-bottom .header__bar-bottom-nav .header__button.header__button--no-arrow::before, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__button--no-arrow::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__button--no-arrow::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__button--no-arrow::before {
        background: #979797;
        content: "";
        height: 40px;
        left: 0;
        position: absolute;
        top: 4px;
        width: 1px
    }

.header__bar-bottom .header__bar-bottom-nav .header__button.active, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active {
    color: #28343d
}

    .header__bar-bottom .header__bar-bottom-nav .header__button.active .header__button-icon, .header__bar-bottom .header__bar-bottom-nav .header__button.active .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active .header__button-icon, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active .header__button-icon, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active .header__button-icon, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active .header__button-text {
        position: relative
    }

    .header__bar-bottom .header__bar-bottom-nav .header__button.active .icon-user::before, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active .icon-user::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active .icon-user::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active .icon-user::before {
        background: url("/Media/user-dark.svg") no-repeat center center transparent
    }

    .header__bar-bottom .header__bar-bottom-nav .header__button.active:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active:not(.header__button--no-arrow)::before, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active:not(.header__button--no-arrow)::before {
        opacity: 1;
        visibility: visible
    }

    .header__bar-bottom .header__bar-bottom-nav .header__button.active:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.active:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.active:not(.header__button--no-arrow)::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.active:not(.header__button--no-arrow)::after {
        transform: translateY(-50%) rotate(90deg) rotateY(180deg)
    }

.header__bar-bottom .header__bar-bottom-nav .header__button:hover, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow:hover, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow:hover, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right:hover {
    cursor: pointer
}

@media screen and (max-width: 81.1875em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right {
        padding-right: 44px
    }
}

@media screen and (max-width: 63.9375em) {
    .header__bar-bottom .header__bar-bottom-nav .header__button.header__find-a-depot, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__find-a-depot, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__find-a-depot, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__find-a-depot {
        padding: 8px 0
    }

        .header__bar-bottom .header__bar-bottom-nav .header__button.header__find-a-depot::after, .header__bar-bottom .header__bar-bottom-nav .header__button.header__find-a-depot .header__button-text > span, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__find-a-depot::after, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__find-a-depot .header__button-text > span, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__find-a-depot::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__find-a-depot .header__button-text > span, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__find-a-depot::after, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__find-a-depot .header__button-text > span {
            display: none
        }

        .header__bar-bottom .header__bar-bottom-nav .header__button.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--no-arrow.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow.header__find-a-depot .header__button-text, .header__bar-bottom .header__bar-bottom-nav .header__button--short-arrow-right.header__find-a-depot .header__button-text {
            display: inline-block;
            font-size: .8125rem;
            padding-left: 2px;
            text-decoration: underline
        }
}

.header__bar-bottom .header__bar-bottom-nav .header__button-icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: middle;
    position: relative
}

.header__bar-bottom .header__bar-bottom-nav .header__button-icon-notification {
    display: block;
    width: 16px;
    height: 16px;
    background-color: #c20016;
    color: #fff;
    position: absolute;
    top: calc(-16px / 2);
    right: calc(-16px / 2);
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    font-size: .5625rem
}

.header__bar-bottom .header__bar-bottom-nav .header__button-icon.icon-location::before {
    background: url("/Media/location-pin.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.header__bar-bottom .header__bar-bottom-nav .header__button-icon.icon-user::before {
    background: url("/Media/user.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.header__bar-bottom .header__bar-bottom-nav .header__button-icon.icon-cart::before {
    background: url("/Media/cart.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav {
        position: absolute;
        right: 16px;
        top: 0;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
        z-index: 1
    }

    .login-panel-on .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav--visitor-links {
        right: 210px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav {
        left: calc(100% - 45px);
        right: auto
    }

    .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav--visitor-links {
        left: calc(100% - 45px);
        right: auto
    }

    .login-panel-on .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav--visitor-links {
        left: calc((100% - 45px) - 45px)
    }

    .js-nav-open .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav {
        filter: blur(5px)
    }

    .header__bar-bottom .header__bar-bottom-nav ~ .header__bar-bottom-nav.login-mobile-open {
        right: 0;
        left: 0;
        background-color: #28343d;
        padding: 0 16px
    }

    .header__bar-bottom .header__bar-bottom-nav .header__bar-bottom-nav:not(:first-of-type) {
        filter: blur(0)
    }

    .js-nav-open .header__bar-bottom .header__bar-bottom-nav .header__bar-bottom-nav:not(:first-of-type) {
        background: #28343d;
        left: 0;
        position: absolute;
        right: auto;
        width: 83.2vw
    }

    .header__bar-bottom .header__bar-bottom-nav .header__bar-bottom-nav:not(:first-of-type) .header__button--short-arrow {
        padding: 16px 17px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom {
        transition: margin 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .has-scrolled .header__bar-bottom {
        margin-top: -96px
    }

    .scrolled-more .header__bar-bottom {
        margin-top: -112px
    }
}

.header .header__logo {
    margin-bottom: 4px;
    margin-top: 5px;
    max-width: 150px;
    width: 100%
}

    .header .header__logo.header__logo-image {
        display: block;
        margin-left: 0;
        position: relative
    }

        .header .header__logo.header__logo-image .img__fluid {
            height: auto;
            width: 100%;
            max-width: 150px;
            display: inline-block;
            vertical-align: bottom
        }

@media screen and (max-width: 320px) {
    .theme-depot .header .header__logo.header__logo-image .img__fluid {
        max-width: 140px;
        margin-bottom: -3px
    }
}

.theme-depot .header .header__logo.header__logo-image::after {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #ffffff;
    content: "Depotview";
    display: inline-block;
    font-size: .625rem;
    line-height: .625rem;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0;
    margin-left: 3px;
    vertical-align: bottom
}

.rooster-toggle .header .header__logo.header__logo-image::after {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 9px
}

@media screen and (max-width: 80em) {
    .header .header__logo.header__logo-image {
        margin-left: 0;
        padding-left: 20px;
    }
}

@media screen and (max-width: 64em) {
    .header .header__logo.header__logo-image {
        margin-left: 0;
        padding-left: 30px;
    }
}

@media screen and (max-width: 47.5em) {
    .header .header__logo.header__logo-image {
        margin-left: 0;
        padding-left: 50px;
    }
}

@media screen and (max-width: 320px) {
    .header .header__nav-icon {
        top: 10px !important;
    }
}

.theme-depot .header .header__logo {
    max-width: 240px
}

@media screen and (max-width: 80em) {
    .header .header__logo {
        background: #28343d;
        margin-bottom: 0;
        margin-top: 0;
        max-width: 100%;
        padding: 2px 8px 0 11px;
        position: relative;
        width: auto;
        z-index: 1;
        height: 46px;
        box-sizing: border-box
    }

    .theme-depot .header .header__logo {
        max-width: 100%
    }

    .scrolled-more .header .header__logo {
        padding-bottom: 15px
    }
}

@media screen and (max-width: 47em) {
    .header .header__logo {
        padding: 5px 8px 0 11px;
    }

    .header .header__nav-icon {
        top: 10px !important;
    }
}

.header .header__search {
    margin: auto;
    max-width: 800px;
    padding-right: 150px;
    width: 100%
}

    .header .header__search .header__search-header {
        margin: 0 auto;
        padding: 0
    }

@media screen and (max-width: 81.1875em) {
    .header .header__search {
        max-width: 600px
    }
}

@media screen and (max-width: 63.9375em) {
    .header .header__search {
        max-width: 100%;
        padding-right: 0;
        padding-top: 4px
    }
}

@media screen and (max-width: 47.9375em) {
    .header .header__search {
        background: #28343d;
        padding: 0 8px 8px;
        transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
        width: calc(100% - 16px)
    }

    .scrolled-more .header .header__search {
        transform: translateY(-100%)
    }
}

.header .header__nav-icon {
    display: none
}

@media screen and (max-width: 80em) {
    .main {
        margin-top: 62px;
    }

    .header .header__nav-icon {
        background: none;
        border: none;
        display: block;
        height: 24px;
        left: 18px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 15px;
        width: 20px;
        z-index: 2;
        transform: translateX(100vw);
    }

        .header .header__nav-icon > span {
            display: block;
            height: 100%;
            width: 100%
        }

            .header .header__nav-icon > span > span, .header .header__nav-icon > span::before, .header .header__nav-icon > span::after {
                background-color: #fff;
                content: "";
                display: block;
                height: 3px;
                margin: 4px 0
            }
}

@media print, screen and (min-width: 64em) {
    .has-scrolled .header {
        height: 60px;
        min-height: 60px
    }

    .scrolled-more .header {
        height: 0;
        min-height: 0
    }
}

@media screen and (max-width: 80em) {
    .header .header__bar-top {
        position: relative;
        z-index: 1
    }
}

@media screen and (max-width: 47.9375em) {
    .js-nav-open .header .header__bar-top {
        filter: blur(5px)
    }

    .header .header__bar-top .header__bar-inner {
        min-height: 0
    }
}

.primary__nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 2;
    flex-grow: 2;
    /*width changed from 62% to autochanged from */
    width: auto;
}

    .primary__nav * {
        box-sizing: border-box
    }

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

    .primary__nav > ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: auto;
        flex: auto;
        margin: 0;
        justify-content: center;
        width: 100%;
    }

.ie .primary__nav > ul {
    padding-right: 15px
}

.primary__nav > ul > li {
    display: -ms-flexbox;
    display: flex;
    font-size: .9375rem;
    height: 100%;
    list-style: none;
    padding-left: 25px
}

@media screen and (max-width: 81.1875em) {
    .primary__nav > ul > li {
        padding-left: 16px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li {
        max-height: 71px;
        font-size: 1.125rem;
        border-bottom: 1px solid #c8c8c8;
        padding-left: 0
    }
}

.primary__nav > ul > li.primary__nav-level-one-merch {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .primary__nav > ul > li.primary__nav-level-one-merch {
        display: block;
        padding: 24px;
        height: auto;
        max-height: inherit;
        margin-top: auto
    }

        .primary__nav > ul > li.primary__nav-level-one-merch a {
            display: block;
            height: 100%;
            padding: 0;
            width: 100%
        }

        .primary__nav > ul > li.primary__nav-level-one-merch img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
}

.primary__nav > ul > li:first-child {
    padding-left: 0
}

.primary__nav > ul > li > a {
    color: #fff;
    font-weight: 400;
    padding: 18px 19px;
    text-decoration: none !important;
}


@media screen and (max-width: 80em) {
    .primary__nav > ul > li > a {
        background: #fff;
        color: #28343d;
        display: block;
        font-weight: 700;
        padding: 21px 25px;
        width: 100%
    }
}

.ie .primary__nav > ul > li .primary__nav-level-one-title {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding-right: 46px;
    position: relative;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    z-index: 1
}

.ie .primary__nav > ul > li.primary__nav-level-one--has-children > a {
    display: block
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows {
    display: inline-block;
    height: 24px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px
}

    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::after, .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #c20016;
        display: inline-block;
        font-size: 1rem;
        font-weight: 700;
        height: 16px;
        position: absolute;
        right: 6px;
        top: 1px;
        transform: translateY(0) rotate(90deg);
        transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
        width: 10px
    }

@media screen and (max-width: 81.1875em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::after, .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::before {
        right: 8px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::after, .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: 7px;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #c8c8c8;
        font-size: 1rem;
        font-weight: 400;
        top: 50%;
        transform: translateY(-50%) rotate(0deg)
    }
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::before {
    opacity: 0;
    top: 7px;
    transform: translateY(0) rotate(-90deg);
    transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows::before {
        display: none
    }
}

@media screen and (max-width: 81.1875em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows {
        right: 10px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a .primary__nav-level-one-arrows {
        right: 20px
    }
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a::before {
    background: #fff;
    border-top: 2px solid #c20016;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden;
    width: 100%;
    z-index: -1
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a::before {
        display: none
    }
}

@media screen and (max-width: 81.1875em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a {
        padding-right: 36px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a {
        padding-right: 42px
    }
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a.active {
    color: #28343d;
    z-index: 2
}

    .primary__nav > ul > li.primary__nav-level-one--has-children > a.active .primary__nav-level-one-arrows::after {
        opacity: 0;
        visibility: hidden
    }

@media screen and (max-width: 47.9375em) {
    .primary__nav > ul > li.primary__nav-level-one--has-children > a.active .primary__nav-level-one-arrows::after {
        opacity: 1;
        visibility: visible
    }
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a.active .primary__nav-level-one-arrows::before {
    opacity: 1;
    visibility: visible
}

.primary__nav > ul > li.primary__nav-level-one--has-children > a.active::before {
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 63.9375em) {
    .primary__nav > ul {
        padding-left: 0
    }
}

@media screen and (max-width: 80em) {
    .primary__nav > ul {
        display: none;
        background: transparent;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex: 100%;
        flex: 100%;
        width: 100%;
        height: calc(100% - 56px);
        justify-content: flex-start;
    }
}

@media screen and (max-width: 63.9375em) {
    .primary__nav {
        padding: 0 16px
    }
}

.primary__nav .primary__nav-actions {
    display: none
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-actions {
        background: #28343d;
        box-sizing: border-box;
        display: -ms-flexbox;
        display: flex;
        left: 0;
        opacity: 1;
        padding: 18px 17px;
        position: relative;
        top: 0;
        width: 100%;
        visibility: visible;
        z-index: 3
    }
}

.primary__nav .primary__nav-actions button.primary__nav-actions-close-button {
    margin-left: auto;
    margin-right: 0;
    position: relative;
    width: 16px;
    z-index: 1
}

    .primary__nav .primary__nav-actions button.primary__nav-actions-close-button::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        font-size: 1rem;
        font-weight: 400;
        margin-right: 0
    }

.primary__nav .primary__nav-actions button.primary__nav-actions-back-button {
    font-size: .6875rem;
    letter-spacing: 0.02em;
    margin-right: 0;
    text-transform: uppercase;
    width: auto;
}

.js-mega-menu-open .primary__nav .primary__nav-actions button.primary__nav-actions-back-button {
    display: -ms-flexbox;
    display: flex
}

.primary__nav .primary__nav-actions button.primary__nav-actions-back-button.active-button {
    display: block
}

    .primary__nav .primary__nav-actions button.primary__nav-actions-back-button.active-button:focus {
        outline: none
    }

.primary__nav button.primary__nav-back-button, .primary__nav button.primary__nav-actions-back-button, .primary__nav button.primary__nav-actions-close-button {
    background: none;
    border: none;
    display: none;
    height: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    padding: 0;
    width: 24px
}

    .primary__nav button.primary__nav-back-button::before, .primary__nav button.primary__nav-actions-back-button::before, .primary__nav button.primary__nav-actions-close-button::before {
        font-family: "icon-howdens";
        line-height: 19px;
            text-transform: none;
        content: '\e900';
        display: inline-block;
        transform: rotate(-180deg)
    }

@media screen and (max-width: 80em) {
    .primary__nav button.primary__nav-back-button::before, .primary__nav button.primary__nav-actions-back-button::before, .primary__nav button.primary__nav-actions-close-button::before {
        margin-right: 14px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav button.primary__nav-back-button, .primary__nav button.primary__nav-actions-back-button, .primary__nav button.primary__nav-actions-close-button {
        display: inline-block;
        vertical-align: middle
    }
}

@media screen and (max-width: 80em) {
    .primary__nav button.primary__nav-back-button, .primary__nav button.primary__nav-actions-back-button, .primary__nav button.primary__nav-actions-close-button {
        -ms-flex-line-pack: center;
        align-content: center;
        color: #fff;
        display: -ms-flexbox;
        display: flex
    }
}

.primary__nav .primary__nav-mega-menu {
    background-image: linear-gradient(to bottom, #fff, #f1f1f1 35%, #f1f1f1);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.5);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100vh;
    max-height: 600px;
    left: 0;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    overflow: hidden;
    transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1),visibility 400ms cubic-bezier(0.2, 0, 0.2, 1);
    z-index: -1
}

@media (max-width: 1600px) {
    .primary__nav .primary__nav-mega-menu {
        max-width: 95vw;
    }
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        background: #fff;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        max-width: 300px;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
        width: 100%;
        z-index: -1
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
            background: #fff;
            border-right: 1px solid #c8c8c8;
            height: 100%;
            margin: 0;
            max-height: calc(100% - 71px);
            overflow-x: hidden;
            overflow-y: auto;
            padding-top: 20px;
            -webkit-overflow-scrolling: touch
        }

.ipad .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul, .ipad .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
    overflow: visible
}

@media print, screen and (min-width: 64em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        padding-bottom: 20px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        padding-top: 0
    }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        display: none;
        -ms-flex-direction: column;
        flex-direction: column;
        background: transparent
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul.has-merchandise-spots .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul.has-merchandise-spots .primary__nav-lower-level {
            max-height: calc(100% - 180px)
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul.has-merchandise-spots .primary__nav-lower-level .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul.has-merchandise-spots .primary__nav-lower-level .primary__nav-lower-level {
                max-height: 100%
            }

    .iphone .primary__nav .primary__nav-mega-menu .primary__nav-level-two ul.active, .iphone .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul.active {
        max-height: 100%
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two a:not(.rounded-button):not(.merchandise__spots--spot-link), .primary__nav .primary__nav-mega-menu .primary__nav-lower-level a:not(.rounded-button):not(.merchandise__spots--spot-link) {
    display: block;
    font-size: 0.88rem;
    padding: 8px 40px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two a:not(.rounded-button):not(.merchandise__spots--spot-link), .primary__nav .primary__nav-mega-menu .primary__nav-lower-level a:not(.rounded-button):not(.merchandise__spots--spot-link) {
        border-bottom: 1px solid #c8c8c8;
        padding-bottom: 15px;
        padding-top: 16px
    }


    .primary__nav .primary__nav-mega-menu .primary__nav-level-two a:not(.rounded-button):not(.merchandise__spots--spot-link), .primary__nav .primary__nav-mega-menu .primary__nav-lower-level a:not(.rounded-button):not(.merchandise__spots--spot-link) {
        background: #fff;
        font-weight: 400;
        padding-left: 32px;
        padding-right: 32px
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two a:not(.rounded-button):not(.merchandise__spots--spot-link).active, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level a:not(.rounded-button):not(.merchandise__spots--spot-link).active {
    font-weight: 700
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two a:not(.rounded-button):not(.merchandise__spots--spot-link).active::after, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level a:not(.rounded-button):not(.merchandise__spots--spot-link).active::after {
        font-weight: 400
    }

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise {
        box-shadow: none;
        max-height: calc(100% - 180px)
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise.merch-overlap, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise.merch-overlap {
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.2)
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise.merch-overlap ul::after, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise.merch-overlap ul::after {
                display: none
            }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise .primary__nav-lower-level {
            max-height: calc(100% - 180px)
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise .primary__nav-lower-level.js-level-four-toggle, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise .primary__nav-lower-level.js-level-four-toggle {
                max-height: 100%
            }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise .primary__nav-lower-level .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise .primary__nav-lower-level .primary__nav-lower-level {
                max-height: 100%
            }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise {
        box-shadow: none;
        max-height: calc(100% - 180px)
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise.merch-overlap, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise.merch-overlap {
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.2)
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise.merch-overlap ul::after, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise.merch-overlap ul::after {
                display: none
            }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise .primary__nav-lower-level {
            max-height: calc(100% - 180px)
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-level-two.has-merchandise .primary__nav-lower-level .primary__nav-lower-level, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.has-merchandise .primary__nav-lower-level .primary__nav-lower-level {
                max-height: 100%
            }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
        max-height: 825px;
        max-width: 392px;
        z-index: 1;
        width: 51vw
    }

    .ipad .primary__nav .primary__nav-mega-menu .primary__nav-level-two, .ipad .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        max-height: 100%
    }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        background: #f1f1f1;
        box-shadow: none;
        opacity: 1;
        max-height: 100%;
        max-width: 100%;
        visibility: visible;
        width: 100%
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
    left: 0;
    position: absolute;
    top: 0;
    transform: translateX(0);
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-level-title, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        box-shadow: inset 10px 0px 30px -25px rgba(0,0,0,0.5);
    }

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-level-title, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        max-width: 100%
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-level-title, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level ul {
        box-shadow: none;
        -webkit-overflow-scrolling: touch
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level-item--has-children > a::before {
    background: #c20016;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level-item--has-children > a::before {
        display: none
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level-item--has-children > a:hover::before {
    width: 21px
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level-item--has-children > a.js-mega-menu-trigger--link:before {
    display: none
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level {
    max-width: none;
    overflow: hidden;
    transition: all 700ms cubic-bezier(0.2, 0, 0.2, 1);
    transform: translateX(-100%)
}

    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul {
        max-width: 100%;
        transition: all 1400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title > li > a, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul > li > a {
            display: inline-block;
            padding-bottom: 11px;
            padding-top: 11px
        }

            .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title > li > a::after, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul > li > a::after {
                background: #28343d;
                content: "";
                display: block;
                height: 1px;
                margin-bottom: 6px;
                margin-top: -5px;
                position: relative;
                width: auto
            }

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title > li > a, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul > li > a {
        display: block;
        padding-bottom: 16px;
        padding-top: 15px;
        text-decoration: underline
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title > li > a::after, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul > li > a::after {
            display: none
        }
}

.ipad .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title, .ipad .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul {
    overflow: auto
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level .primary__nav-level-title, .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level ul {
        box-shadow: none;
        max-width: 100%;
        -webkit-overflow-scrolling: touch
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level.active img {
    display: block
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level img.lazyloaded {
    display: block
}

@media print, screen and (min-width: 64em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level {
        max-width: none;
        width: calc(100vw - 600px)
    }
}

@media screen and (min-width: 100.0625em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level {
        width: calc(1000px)
    }
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level {
        box-shadow: none;
        max-width: 100%;
        overflow: visible
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .primary__nav-lower-level.active {
            width: 100%
        }
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .merchandise__spots {
        transform: translateX(151vw)
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level .merchandise__spots {
        transform: translateX(200vw)
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active {
    transform: translateX(300px);
    will-change: transform
}

    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active + .merchandise__spots {
        opacity: 1;
        visibility: visible;
        transform: translateX(600px);
        z-index: 0
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active + .merchandise__spots.moved .merchandise__spots--spot > a {
            pointer-events: auto
        }

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active + .merchandise__spots {
        transform: translateX(51vw)
    }
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active + .merchandise__spots + .merchandise__spots {
        opacity: 1;
        visibility: visible;
        transform: translateX(51vw)
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active + .merchandise__spots + .merchandise__spots.moved .merchandise__spots--spot > a {
            pointer-events: auto
        }
}

.primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active .merchandise__spots {
    transform: translateX(300px)
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active .merchandise__spots {
        transform: translateX(51vw)
    }
}

@media print, screen and (min-width: 80.1em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active {
        max-width: 300px
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active.js-level-four-toggle {
            max-width: none
        }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active {
        box-shadow: none;
        transform: translateX(0);
        transition-duration: 400ms
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-lower-level.active > ul {
            display: -ms-flexbox;
            display: flex
        }
}

@media print, screen and (min-width: 80.1em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        background: transparent
    }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        overflow: visible;
        transform: translateX(-100vw);
        transition-duration: 800ms
    }

    .primary__nav .primary__nav-mega-menu .primary__nav-lower-level {
        padding-top: 56px;
        transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two {
    z-index: 1
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a {
        position: relative
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a::after {
            background: #c20016;
            content: "";
            display: block;
            height: 2px;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
            width: 0
        }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a::after {
            background: transparent;
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: .625rem;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #c8c8c8;
            font-size: .875rem;
            font-weight: 400;
            height: 14px;
            left: auto;
            right: 14px;
            width: 14px
        }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a.active::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a:focus::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a:hover::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a.active::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a:focus::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a:hover::before {
            width: 21px
        }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a.active::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a:focus::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a:hover::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a.active::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a:focus::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a:hover::after {
            color: #c20016
        }

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a::before, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item--has-children > a::before {
        display: none
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-item > a::after {
    display: none
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 23px calc((100% - 836px)/2) 0
}

.ipad .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four {
    padding-bottom: 23px
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links {
    width: 100%;
    display: block;
    overflow-y: auto;
    padding-top: 19px
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item {
        -ms-flex: none;
        flex: none;
        margin: 0;
        width: 100%;
        max-width: none
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
            text-align: left;
            padding: 9px 40px
        }

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
        background: #ffffff
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item .primary__nav-lower-level-four-link-text {
    width: 100%;
    min-height: 0;
    padding-top: 0
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item {
        border-bottom: 1px solid #c8c8c8
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
            padding: 16px 40px
        }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links .primary__nav-lower-level-four-img-container {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four--text-links {
        padding-top: 0;
        padding-bottom: 23px
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four::after {
    display: none
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item {
    -ms-flex: 1 0 15%;
    flex: 1 0 15%;
    max-width: 160px;
    margin: 0 22px;
    overflow: hidden;
    min-width: 160px
}

@media screen and (max-width: 81.1875em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item {
        -ms-flex: 1 0 40%;
        flex: 1 0 40%;
        width: 50%;
        margin: 0 17px
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item {
        margin: 0 2%;
        max-width: 45.5%;
        min-width: 45.5%;
        width: 45.5%
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
    display: block;
    padding: 8px 0;
    text-align: center;
    border: none;
    text-decoration: none
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
        background: transparent
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link::after, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-item > .primary__nav-lower-level-four-link:not(.rounded-button)::after {
    display: none
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-link-text {
    display: table;
    vertical-align: middle;
    min-height: 40px;
    padding-top: 9px;
    margin: 0 auto
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-link-text > span {
        display: table-cell;
        vertical-align: middle
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-link-text > span > span {
            display: inline;
            border-bottom: solid 1px #28343d
        }

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-img-container {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 50%;
    border: 1px solid #9c9da3;
    overflow: hidden
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-img-container::before {
        content: "";
        display: block;
        padding-bottom: 100%
    }

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-img-container::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        border: 10px solid #ffffff;
        border-radius: 50%;
        overflow: hidden
    }

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
    border-radius: 50%
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four .primary__nav-lower-level-four--text-links-item {
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    max-width: 100%;
    margin: 0;
    width: 100%
}

    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four .primary__nav-lower-level-four--text-links-item > .primary__nav-lower-level-four-link, .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four .primary__nav-lower-level-four--text-links-item > .primary__nav-lower-level-four-link:not(.rounded-button) {
        background: transparent;
        padding: 0
    }

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four {
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 16px 0 6px
    }

        .primary__nav .primary__nav-mega-menu .primary__nav-level-two .primary__nav-lower-level-four.has-merchandise-spots {
            max-height: calc(55vh - 127px)
        }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-title {
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    display: -ms-flexbox;
    display: flex;
    max-height: 71px;
    padding: 24px 20px;
    max-height: 71px
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-title  
{
    color: #28343D;
}
    .primary__nav .primary__nav-mega-menu .primary__nav-level-title h5 {
        line-height: 1.3;
        margin-bottom: 0
    }

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-title h5 {
        font-size: 1.125rem
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-title h5 .primary__nav-back-button {
        display: none
    }
}

.primary__nav .primary__nav-mega-menu .primary__nav-level-title a {
    color: #fff;
    margin-left: auto;
    max-height: 20px
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .primary__nav-level-title {
        padding: 20px 25px 21px
    }
}

.iphone .primary__nav .primary__nav-mega-menu .primary__nav-level-title--ios-hidden {
    display: none
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu {
        max-height: 825px
    }
}

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu {
        background-image: linear-gradient(to bottom, #fff, #f1f1f1 35%, #f1f1f1);
        transform: translateX(-100vw);
        max-height: 100%;
        opacity: 1;
        padding-top: 56px;
        top: 0;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
        visibility: visible;
        will-change: transform;
        z-index: 2;
        -ms-flex-direction: column;
        flex-direction: column
    }

        .primary__nav .primary__nav-mega-menu button.primary__nav-back-button {
            display: inline-block;
            vertical-align: middle
        }
}

.primary__nav .primary__nav-mega-menu.active {
    opacity: 1;
    visibility: visible;
    z-index: 1
}

    .primary__nav .primary__nav-mega-menu.active ~ .merchandise__spots, .primary__nav .primary__nav-mega-menu.active > .merchandise__spots {
        opacity: 1;
        visibility: visible
    }

        .primary__nav .primary__nav-mega-menu.active ~ .merchandise__spots .merchandise__spots--spot > a, .primary__nav .primary__nav-mega-menu.active > .merchandise__spots .merchandise__spots--spot > a {
            pointer-events: auto
        }

        .primary__nav .primary__nav-mega-menu.active ~ .merchandise__spots.moved .merchandise__spots--spot > a, .primary__nav .primary__nav-mega-menu.active > .merchandise__spots.moved .merchandise__spots--spot > a {
            pointer-events: none
        }

        .primary__nav .primary__nav-mega-menu.active ~ .merchandise__spots img, .primary__nav .primary__nav-mega-menu.active > .merchandise__spots img {
            display: block
        }

    .primary__nav .primary__nav-mega-menu.active .mobile__view img {
        display: block
    }

@media screen and (max-width: 80em) {
    .primary__nav .primary__nav-mega-menu.active {
        top: 0;
        transform: translateX(0);
        z-index: 2;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

        .primary__nav .primary__nav-mega-menu.active .primary__nav-level-two > ul {
            display: -ms-flexbox;
            display: flex
        }

        .primary__nav .primary__nav-mega-menu.active > .merchandise__spots.mobile__view {
            display: -ms-flexbox;
            display: flex
        }

        .primary__nav .primary__nav-mega-menu.active .primary__nav-lower-level .merchandise__spots {
            margin-top: auto;
            transform: translateX(0);
            transform-origin: bottom center
        }

        .primary__nav .primary__nav-mega-menu.active img {
            display: block
        }

        .primary__nav .primary__nav-mega-menu.active .merchandise__spots {
            transform: translateX(0)
        }

            .primary__nav .primary__nav-mega-menu.active .merchandise__spots img {
                display: block
            }
}

.primary__nav .primary__nav-mega-menu .merchandise__spots {
    box-shadow: inset 10px 0px 30px -25px rgba(0,0,0,0.5);
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    max-width: 388px;
    min-width: 388px;
    opacity: 0;
    padding: 30px;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1) translateX(300px);
    transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1),opacity 700ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden;
    width: 100%;
    will-change: transform, scale;
    z-index: -2;
    background-image: linear-gradient(to bottom, #fff, #f1f1f1 35%, #f1f1f1)
}

.primary__nav .primary__nav-mega-menu .merchandise__spots--spot {
    max-width: 100%;
    transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform
}

    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot:nth-child(n+3) {
        display: none
    }

    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot > a {
        display: block;
        height: 100%;
        padding: 0;
        width: 100%;
        max-height: 319px;
        pointer-events: none
    }

    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot:nth-child(n+2) > a {
        max-height: 199px
    }

    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: left;
        width: auto
    }

@media print, screen and (min-width: 48em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot img {
        width: 100%;
        max-height: 319px;
        object-fit: cover
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot img {
        max-height: 179px
    }
}

.primary__nav .primary__nav-mega-menu .merchandise__spots--spot + .merchandise__spots--spot {
    padding-top: 22px
}

@media print, screen and (min-width: 48em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot + .merchandise__spots--spot {
        max-height: 221px
    }
}

@media print, screen and (min-width: 48em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot + .merchandise__spots--spot img {
        max-height: 199px
    }
}

@media print, screen and (min-width: 48em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot {
        max-height: 319px
    }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots--spot:nth-child(n+2) {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots.desktop__view {
        display: block
    }

    .primary__nav .primary__nav-mega-menu .merchandise__spots.tablet__view, .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view {
        display: none
    }

    .primary__nav .primary__nav-mega-menu .merchandise__spots.moved {
        transform: translateX(600px)
    }

        .primary__nav .primary__nav-mega-menu .merchandise__spots.moved.move-away {
            transform: scale(0) translateX(600px)
        }

            .primary__nav .primary__nav-mega-menu .merchandise__spots.moved.move-away .merchandise__spots--spot {
                transform: scale(0)
            }
}

@media screen and (max-width: 63.9375em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots {
        box-shadow: none;
        max-width: 49vw;
        min-width: 0;
        padding: 24px;
        transform: scale(1) translateX(51vw)
    }

        .primary__nav .primary__nav-mega-menu .merchandise__spots.desktop__view, .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view {
            display: none
        }

        .primary__nav .primary__nav-mega-menu .merchandise__spots.tablet__view {
            display: -ms-flexbox;
            display: flex
        }
}

@media screen and (max-width: 47.9375em) {
    .primary__nav .primary__nav-mega-menu .merchandise__spots {
        bottom: 0;
        height: auto;
        transform: scale(1) translateX(100vw);
        transform-origin: bottom center;
        max-width: 100%;
        top: auto
    }

        .primary__nav .primary__nav-mega-menu .merchandise__spots.tablet__view {
            display: none
        }

        .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view {
            display: block;
            padding: 15px;
            margin-top: auto;
            background: none;
            transition: none;
            position: relative;
            opacity: 1;
            visibility: visible;
            z-index: auto
        }

            .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view .merchandise__spots--spot {
                height: 100%;
                max-width: 280px;
                margin: 0 auto
            }

                .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view .merchandise__spots--spot > a {
                    pointer-events: auto
                }

                .primary__nav .primary__nav-mega-menu .merchandise__spots.mobile__view .merchandise__spots--spot img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover
                }
}



@media screen and (max-width: 80em) {
    .primary__nav {
        background: #28343d;
        position: relative;
        width: auto;
        z-index: 1
    }
}

@media screen and (max-width: 80em) {
    .main {
        margin-top: 71px !important;
    }

    .primary__nav {
        background-color: #f1f1f1;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
        display: block;
        height: 100vh;
        left: 0;
        opacity: 1;
        padding: 0;
        position: absolute;
        top: 0;
        transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
        transform: translateX(-100vw);
        visibility: visible;
        width: 83.2vw;
        will-change: transform;
        z-index: 2
    }

        .primary__nav.mobile-active {
            transform: translateX(0)
        }

            .primary__nav.mobile-active > ul {
                display: -ms-flexbox;
                display: flex
            }

    .iphone .primary__nav {
        height: calc(100vh - 69px)
    }

    .new-iphone .primary__nav {
        height: calc(100vh - 111px)
    }

    .old-iphone .primary__nav {
        height: calc(100vh - 69px)
    }

    .new-iphone .has-scrolled .primary__nav, .old-iphone .has-scrolled .primary__nav {
        height: 100vh
    }
}

.header__search-header {
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
    max-width: 94.25rem;
    margin: 0 auto;
    margin: 40px auto
}

@media print, screen and (min-width: 30.0625em) {
    .header__search-header {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) {
    .header__search-header {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .header__search-header {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

.header__search-header.manual-search {
    margin: auto;
    padding: 0;
    width: 50%
}

.header__search-header .header__search-form {
    position: relative
}

    .header__search-header .header__search-form input {
        background: #fff;
        border: 1px solid #c8c8c8;
        box-sizing: border-box;
        color: #28343d;
        font-size: .9375rem;
        margin: 0;
        max-height: 40px;
        padding: 11px 50px 12px 20px;
        width: 100%
    }

        .header__search-header .header__search-form input:-ms-input-placeholder {
            color: #c8c8c8
        }

        .header__search-header .header__search-form input::placeholder {
            color: #c8c8c8
        }

        .header__search-header .header__search-form input:-ms-input-placeholder {
            color: #c8c8c8
        }

        .header__search-header .header__search-form input:focus {
            border-color: #28343d
        }

            .header__search-header .header__search-form input:focus + .header__search-close {
                opacity: 1;
                visibility: visible
            }

@media screen and (max-width: 63.9375em) {
    .header__search-header .header__search-form input {
        font-size: 1rem;
        max-height: 32px;
        padding: 8px 48px 8px 15px
    }
}

.header__search-header .header__search-form .header__search-close {
    background: none;
    border: none;
    height: 36px;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 50px;
    top: 2px;
    transition: all 0.25s ease-out;
    visibility: hidden;
    width: 36px
}

    .header__search-header .header__search-form .header__search-close::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        color: #71777b;
        font-size: .6875rem
    }

@media screen and (max-width: 63.9375em) {
    .header__search-header .header__search-form .header__search-close {
        height: 28px;
        right: 41px;
        width: 30px
    }
}

.header__search-header .header__search-form .header__search-submit {
    background: #f1f1f1;
    border: none;
    font-size: 0;
    height: 36px;
    padding: 0;
    position: absolute;
    right: 2px;
    top: 2px;
    transition: background-color 0.25s ease-out,color 0.25s ease-out;
    width: 38px
}

    .header__search-header .header__search-form .header__search-submit::before {
        background: url("/Media/search.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        color: #28343d;
        font-size: .9375rem
    }

@media screen and (max-width: 63.9375em) {
    .header__search-header .header__search-form .header__search-submit::before {
        font-size: .75rem
    }
}

@media screen and (max-width: 63.9375em) {
    .header__search-header .header__search-form .header__search-submit {
        height: 28px;
        width: 30px
    }
}

.header__search-header .header__search-form .header__search-submit.active--over-three {
    background: #70c624
}

    .header__search-header .header__search-form .header__search-submit.active--over-three::before {
        background: url("/Media/search-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        background-color: #70c624
    }

.header__search-header .header__search-form.active input {
    border-color: #28343d
}

.header__search-header .header__search-form.active .header__search-close {
    opacity: 1;
    visibility: visible
}

.header__search-header .header__search-error {
    display: none
}

.showcase {
    padding: 70px 0;
    background: #f1f1f1
}

.rooster-toggle .showcase {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.showcase__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    list-style-type: none
}

.showcase__item {
    width: calc(33% - 17px);
    max-width: 380px;
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    margin: 0 30px 30px 0
}

@media screen and (max-width: 63.9375em) {
    .showcase__item {
        width: calc(50% - 12px);
        max-width: inherit;
        margin: 0 23px 23px 0
    }
}

@media screen and (max-width: 47.9375em) {
    .showcase__item {
        width: 100%;
        margin: 0 0 16px 0
    }
}

.showcase__item:nth-child(3n+3) {
    margin-right: 0
}

@media screen and (max-width: 63.9375em) {
    .showcase__item:nth-child(3n+3) {
        margin-right: 23px
    }
}

@media screen and (max-width: 47.9375em) {
    .showcase__item:nth-child(3n+3) {
        margin-right: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .showcase__item:nth-child(2n+2) {
        margin-right: 0
    }
}

.showcase img {
    max-width: 100%;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1)
}

.ie .showcase img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: top left
}

.showcase__img-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 240px;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .showcase__img-container {
        height: 216px
    }
}

.showcase__img-container:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    mix-blend-mode: multiply;
    background-image: linear-gradient(to top, #f2f2f2, #fff)
}

.ie .showcase__img-container:after {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .showcase__img-container:after {
        height: 27px
    }
}

.ie .showcase__img-container {
    display: block
}

.showcase__link {
    display: block;
    width: 100%;
    height: 100%
}

    .showcase__link:hover img, .showcase__link:focus img {
        transform: scale(1.05)
    }

.ie .showcase__link:hover img, .ie .showcase__link:focus img {
    transform: scale(1.05) translate(-50%, -50%)
}

.showcase__title {
    font-size: 1.75rem;
    margin-bottom: 2px
}

@media screen and (max-width: 63.9375em) {
    .showcase__title {
        margin-bottom: 0;
        font-size: 1.4375rem;
        line-height: 1.9rem
    }
}

.showcase__body {
    padding: 20px 30px;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .showcase__body {
        padding: 25px
    }
}

.showcase__copy {
    color: #71777b;
    margin: 3px 0 14px
}

@media screen and (max-width: 63.9375em) {
    .showcase__copy {
        font-size: .8125rem;
        margin: 0 0 9px
    }
}

@media screen and (max-width: 47.9375em) {
    .showcase__copy {
        margin: 1px 0 9px
    }
}

.showcase .component__wrapper {
    padding: 0 22px
}

@media screen and (max-width: 63.9375em) {
    .showcase .component__wrapper {
        padding: 0 24px
    }
}

@media screen and (max-width: 47.9375em) {
    .showcase .component__wrapper {
        padding: 0 16px
    }
}

.external-reviews {
    margin-bottom: 50px;
    padding-top: 50px;
    text-align: left
}

@media print, screen and (min-width: 48em) {
    .external-reviews {
        margin-bottom: 100px;
        padding-top: 100px
    }
}

.external-reviews:not(:first-child) {
    margin: 50px 0;
    padding: 0
}

@media print, screen and (min-width: 48em) {
    .external-reviews:not(:first-child) {
        margin: 100px 0
    }
}

.external-reviews .content-container {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem
}

@media print, screen and (min-width: 48em) {
    .external-reviews .content-container {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem)
    }
}

@media screen and (min-width: 100.0625em) {
    .external-reviews .content-container {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.external-reviews .content-container h2 {
    font-size: 1.875rem;
    line-height: 1.33;
    margin-bottom: 40px
}

@media print, screen and (min-width: 48em) {
    .external-reviews .content-container h2 {
        line-height: 1.67;
        margin-bottom: 20px
    }
}

@media screen and (min-width: 64em) {
    .external-reviews .content-container h2 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

.external-reviews .trustpilot-widget {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem
}

@media print, screen and (min-width: 48em) {
    .external-reviews .trustpilot-widget {
        width: calc(41.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media screen and (min-width: 100.0625em) {
    .external-reviews .trustpilot-widget {
        width: calc(16.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.external-reviews .trustpilot-widget svg {
    height: 26px;
    width: 180px
}

@media screen and (min-width: 81.25em) {
    .external-reviews .trustpilot-widget svg {
        width: 220px
    }
}

.external-reviews .trustpilot-widget .stars {
    display: block;
    height: 36px;
    margin: 10px auto 14px;
    width: 180px
}

@media screen and (min-width: 81.25em) {
    .external-reviews .trustpilot-widget .stars {
        height: 42px;
        width: 220px
    }
}

.external-reviews .trustpilot-widget .stars.five {
    background: url("../Media/trustpilot-stars/5_stars.svg") no-repeat
}

.external-reviews .trustpilot-widget .stars.four {
    background: url("../Media/trustpilot-stars/3_stars.svg") no-repeat
}

.external-reviews .trustpilot-widget .stars.two {
    background: url("../Media/trustpilot-stars/2_stars.svg") no-repeat
}

.external-reviews .trustpilot-widget .stars.one {
    background: url("../Media/trustpilot-stars/1_stars.svg") no-repeat
}

.external-reviews .trustpilot-widget p {
    color: #262626;
    font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3
}

@media screen and (min-width: 81.25em) {
    .external-reviews .trustpilot-widget p {
        font-size: 1.375rem
    }
}

.external-reviews .trustpilot-widget p .trustscore, .external-reviews .trustpilot-widget p .reviews {
    color: #71777b;
    font-weight: bold
}

.rooster-toggle .external-reviews .trustpilot-widget p {
    font-family: "Rooster",sans-serif
}

.header__account-panel {
    background-color: #fff;
    color: #28343d;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.5);
    height: auto;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden;
    max-width: 1080px;
    max-height: 600px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    z-index: -1
}

body:not(.js-nav-open) .header__account-panel * {
    pointer-events: none !important
}

.header__account-panel-avatar-holder {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    visibility: hidden;
    opacity: 0
}

.header__account-panel-avatar-text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .875rem;
    line-height: .875rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    fill: #fff
}

@media screen and (max-width: 63.9375em) {
    .header__account-panel-avatar-holder {
        left: 17px
    }
}

.rooster-toggle .header__account-panel {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.header__account-panel-mobile-overflow-fix {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.header__account-panel-sidebar {
    width: 410px;
    position: relative;
    border-right: thin solid #c8c8c8;
    box-sizing: border-box
}

.header__account-panel-login {
    width: 410px;
    padding: 30px;
    box-sizing: border-box
}

.header__account-panel-credits {
    padding: 19px;
    width: calc(100% - 410px);
    min-height: 100%;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, #fff, #f1f1f1 35%, #f1f1f1)
}

@media screen and (max-width: 63.9375em) {
    .header__account-panel-credits {
        min-height: auto
    }
}

.header__account-panel-credit {
    width: 100%;
    max-height: calc(100% - 100px);
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.header__account-panel-credit--full {
    min-height: 100%
}

.header__account-panel-credit-details {
    width: 245px;
    height: 120px;
    padding: 0 65px 0 40px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    .header__account-panel-credit-details::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -1px;
        border-left: 1px dashed #7f95a6;
        border-right: 1px dashed #000
    }

.header__account-panel-credit-description {
    font-size: .9375rem;
    font-weight: bold;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: center;
    justify-content: center
}

    .header__account-panel-credit-description span {
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

.header__account-panel-credit-info-trigger {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    position: relative;
    top: -1px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: white;
    background-color: #4a90e2;
    background-image: url("/Media/credit-info.svg");
    background-size: 9px 13px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: none;
    transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .header__account-panel-credit-info-trigger:hover {
        background-color: #3c7ece;
        cursor: pointer
    }

.header__account-panel-credit-info {
    position: absolute;
    background-color: #28343d;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8, 0.8);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-credit-info-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 15px
}

.header__account-panel-credit-info-copy {
    font-size: .9375rem;
    margin-bottom: 30px
}

.header__account-panel-credit-info-title, .header__account-panel-credit-info-copy {
    max-width: 390px;
    margin-right: auto;
    margin-left: auto
}

.header__account-panel-credit-info .header__account-panel-button {
    width: 238px;
    margin: 0 auto !important
}

.no-touch .header__account-panel-credit-info .header__account-panel-button:hover::before {
    animation-name: cta-arrow-back
}

.header__account-panel-credit-info .header__account-panel-button::before {
    left: 30px;
    right: auto;
    transform: translate3d(0, -50%, 0) rotate(180deg)
}

.header__account-panel-credit-info.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1, 1);
    z-index: 1
}

.header__account-panel-credit-amount {
    font-size: 1.875rem
}

.header__account-panel-available .header__account-panel-credit-amount {
    font-size: 2.5rem;
    font-weight: bold
}

.header__account-panel-credit-available {
    width: 355px;
    padding: 30px 35px 30px 70px;
    box-sizing: border-box;
    text-align: center
}

    .header__account-panel-credit-available .header__account-panel-credit-amount {
        font-size: 2.5rem;
        font-weight: bold
    }

@media screen and (max-width: 63.9375em) {
    .header__account-panel-credit {
        min-height: initial;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: initial;
        align-items: initial
    }

    .header__account-panel-credit-details {
        width: 100%;
        height: 100px;
        padding: 20px 0;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

        .header__account-panel-credit-details::before {
            top: auto;
            bottom: -1px;
            right: 0;
            left: 0;
            border-left: none;
            border-bottom: 1px dashed #7f95a6;
            border-right: none;
            border-top: 1px dashed #000
        }

    .header__account-panel-credit-detail {
        width: 135px
    }

    .header__account-panel-credit-available {
        width: 100%;
        height: 90px;
        padding: 25px 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-align: center;
        align-items: center
    }
}

.header__account-panel-payment {
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.header__account-panel-payment-due {
    text-align: center
}

    .header__account-panel-payment-due .header__account-panel-credit-amount {
        font-size: 1.5625rem
    }

.header__account-panel-payment--overdue {
    background-color: #980001;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

    .header__account-panel-payment--overdue .calendar {
        display: none
    }

.header__account-panel-payment .header__account-panel-button {
    border: none;
    width: 310px
}

.header__account-panel-payment .calendar-icon {
    z-index: 0
}

@media screen and (max-width: 63.9375em) {
    .header__account-panel-payment {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: auto;
        -ms-flex-pack: center;
        justify-content: center
    }

    .header__account-panel-payment--overdue {
        background-color: #980001;
        -ms-flex-pack: center;
        justify-content: center
    }

        .header__account-panel-payment--overdue .calendar {
            display: block;
            margin-right: 20px
        }

    .header__account-panel-payment .header__account-panel-button {
        margin-top: 20px;
        width: 100%
    }
}

.header__account-panel-dashboard {
    padding: 30px;
    width: 630px;
    height: 100%;
    box-sizing: border-box;
    background-color: #28343d;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap
}

.header__account-panel-dropdown {
    box-sizing: border-box
}

.header__account-panel-account-nav {
    box-sizing: border-box;
    padding: 21px 30px
}

.header__account-panel-close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: url("/Media/close-info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 0;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-close--mobile {
    top: 16px;
    right: 16px;
    opacity: 0;
    visibility: hidden
}

.header__account-panel-close:hover {
    cursor: pointer
}

.header__account-panel-label {
    display: block;
    font-size: .9375rem;
    margin-bottom: 10px
}

.header__account-panel-label--email {
    font-weight: bold;
    margin: 15px 0
}

.header__account-panel-input {
    width: 100%;
    height: 40px;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: thin solid #c8c8c8;
    font-size: .9375rem;
    transition: border 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-input--error {
    border-left: 2px solid #c20016 !important
}

.header__account-panel-input#login-email {
    margin-bottom: 25px
}

.header__account-panel-input:-ms-input-placeholder {
    color: #c8c8c8
}

.header__account-panel-input::placeholder {
    color: #c8c8c8
}

.header__account-panel-input:focus {
    outline: none;
    border: thin solid #000
}

.header__account-panel-input[type=password] {
    letter-spacing: 0.2em
}

.header__account-panel-link {
    display: block;
    font-size: .8125rem;
    color: #4a90e2;
    text-decoration: underline;
    margin-bottom: 25px
}

.header__account-panel-password {
    position: relative
}

.header__account-panel-password-visibility {
    background-image: url("/Media/password-visibility.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 20px;
    padding: 0;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .header__account-panel-password-visibility::after {
        content: "";
        width: 100%;
        height: 2px;
        border-top: 2px solid #000;
        transform: rotate(35deg);
        background-color: #f9f9f9;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
        position: absolute;
        top: calc(50% - 2px / 2);
        left: calc(50% - 110% / 2)
    }

    .header__account-panel-password-visibility:hover {
        cursor: pointer
    }

    .header__account-panel-password-visibility.active::after {
        background-color: transparent;
        width: 0%;
        left: calc(50% - 10% / 2)
    }

.header__account-panel-button {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 24px
}

.header__account-panel-button--dark.cta.on-image {
    background-color: #28343d
}

.header__account-panel-button--verified.cta.on-image {
    background-color: #70c624
}

.header__account-panel-button.cta.primary {
    padding: 18px 0;
    margin-right: 0
}

.header__account-panel-separator {
    font-size: .9375rem;
    color: #9b9b9b;
    width: 100%;
    margin: 15px 0;
    position: relative;
    text-align: center;
    text-transform: uppercase
}

    .header__account-panel-separator::before, .header__account-panel-separator::after {
        content: "";
        width: calc((100% - 30px - (20px * 2)) / 2);
        height: 1px;
        display: block;
        background-color: #9b9b9b;
        position: absolute;
        top: calc(50% - 1px)
    }

    .header__account-panel-separator::before {
        left: 20px
    }

    .header__account-panel-separator::after {
        right: 20px
    }

.header__account-panel-error {
    font-size: .9375rem;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

.header__account-panel-error-warning {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto 10px
}

.header__account-panel-error-info strong {
    margin-top: 5px;
    display: block
}

.header__account-panel-error-message {
    color: #c20016;
    font-size: .9375rem;
    margin-bottom: 5px;
    display: block
}

.header__account-panel-error-message--panel {
    background-color: #f1f1f1;
    display: block;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-top: 4px solid #c20016;
    color: #c20016;
    font-size: .9375rem
}

.header__account-panel-dropdown {
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    background-color: #f1f1f1;
    height: auto;
    z-index: 1;
    border-bottom: thin solid #c8c8c8
}

    .header__account-panel-dropdown::before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        opacity: 0;
        background-image: linear-gradient(to top, rgba(242,242,242,0), rgba(0,0,0,0.05) 98%)
    }

.header__account-panel .header__account-panel-dropdown::before {
    opacity: 1
}

.header__account-panel-dropdown-controls {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 86%;
    min-width: 314px;
    height: 72px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: #28343d
}

.header__account-panel-dropdown-controls-label {
    font-size: .9375rem;
    line-height: 1.56rem;
    color: #fff;
    font-weight: bold
}

.rooster-toggle .header__account-panel-dropdown-controls-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold
}

.header__account-panel-dropdown-controls-close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 17px;
    background-image: url("/Media/close-info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    border: none;
    padding: 0;
    transform: translateY(-50%);
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-dropdown-button {
    background-color: transparent;
    border: none;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    position: relative;
    font-size: .8125rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #28343d;
    overflow: visible
}

    .header__account-panel-dropdown-button::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        display: block;
        position: absolute;
        top: 50%;
        right: -15px;
        transform: translateY(-60%) rotate(90deg) rotateY(0deg);
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .header__account-panel-dropdown-button:hover {
        cursor: pointer
    }

    .header__account-panel-dropdown-button:focus {
        outline: none
    }

.header__account-panel-dropdown-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: #f1f1f1;
    opacity: 0;
    visibility: hidden;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 47.9375em) {
    .header__account-panel-dropdown-overlay {
        position: fixed;
        top: 57px
    }
}

.header__account-panel-dropdown-overlay.active {
    opacity: 1;
    visibility: visible
}

.header__account-panel-dropdown-select-list {
    margin: 0;
    padding: 0
}

.header__account-panel-dropdown-select-list-group {
    position: relative;
    max-height: 0;
    background-color: #fafafa;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    transition: max-height 400ms cubic-bezier(0.2, 0, 0.2, 1),height 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-dropdown-select-list .header__account-panel-dropdown-item {
    top: -20px
}

.header__account-panel-dropdown-list {
    position: relative;
    margin: 0;
    list-style-type: none
}

    .header__account-panel-dropdown-list::before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        opacity: 0;
        background-image: linear-gradient(to top, rgba(242,242,242,0), #e4e4e4 98%)
    }

.header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name {
    font-size: 1.125rem
}

.header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-id {
    display: none
}

.header__account-panel-dropdown-item {
    position: relative;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
    border: 0 solid transparent;
    background-color: #fafafa;
    box-sizing: border-box;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1),height 400ms cubic-bezier(0.2, 0, 0.2, 1),top 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .header__account-panel-dropdown-item.active {
        opacity: 1;
        max-height: 100vh;
        background-color: #fff
    }

        .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap
        }

.header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow, .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active::before, .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active::after {
    display: none
}

.header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
    pointer-events: none;
    padding-right: 30px
}

.header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
    padding: 12px 71px 14px 88px;
    min-height: 79px
}

    .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar .header__account-panel-dropdown-account-name {
        overflow: auto;
        white-space: normal;
        word-break: break-word
    }

.header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    bottom: 0;
    right: 34px;
    pointer-events: none;
    margin: auto
}

    .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow::before {
        content: "";
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        position: absolute;
        top: 0;
        left: 0;
        color: #28343d;
        font-size: 16px;
        font-weight: 700;
        transform: rotate(90deg);
        transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1)
    }

.header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow::before {
    transform: rotate(-90deg)
}

.header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
    opacity: 1;
    max-height: 100vh;
    padding: 21px 71px 21px 30px;
    transition: none
}

.header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
    padding: 10px 71px 10px 88px;
    min-height: 80px
}

    .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar .header__account-panel-avatar-holder {
        visibility: visible;
        opacity: 1
    }

@media screen and (max-width: 63.9375em) {
    .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
        min-height: 64px
    }
}

.header__account-panel-dropdown-link {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-weight: bold;
    text-align: left;
    opacity: 0;
    max-height: 0;
    background: none;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-dropdown-cta {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    z-index: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    box-sizing: border-box;
    transform: translateY(0);
    transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.header__account-panel-dropdown-cta-on .header__account-panel-dropdown-cta {
    height: 80px
}

.header__account-panel-dropdown-cta-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    width: 100%;
    min-width: 0;
    font-size: .6875rem;
    line-height: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #28343d;
    padding: 4px 20px 4px;
    margin: 0 27px;
    box-sizing: border-box
}

.js-dropdown-scroll-active .header__account-panel-dropdown-cta::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to bottom, rgba(242,242,242,0), rgba(0,0,0,0.075) 100%)
}

.js-bottom-reached .header__account-panel-dropdown-cta::before {
    display: none
}

.header__account-panel-dropdown.active .header__account-panel-dropdown-cta {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

    .header__account-panel-dropdown.active .header__account-panel-dropdown-cta.no-border-top {
        transform: translateY(-1px)
    }

@media screen and (max-width: 63.9375em) {
    .header__account-panel-dropdown-cta-on .header__account-panel-dropdown-cta {
        height: 72px
    }

    .header__account-panel-dropdown-cta-btn {
        margin: 0 17px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__account-panel-dropdown-cta {
        position: fixed
    }

    body:not(.js-login-open) .header__account-panel-dropdown-cta {
        pointer-events: none;
        opacity: 0;
        visibility: hidden
    }
}

.header__account-panel-dropdown-account-details {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.header__account-panel-dropdown-account-name {
    width: 100%;
    font-size: 1.125rem;
    font-weight: bold;
    letter-spacing: 0.05rem
}

.header__account-panel-dropdown-account-id {
    width: 100%;
    font-size: .75rem;
    font-weight: normal;
    letter-spacing: 0.1rem;
    margin-top: 4px;
    color: #767572
}

    .header__account-panel-dropdown-account-id span {
        display: inline !important;
        color: #767572
    }

.header__account-panel-dropdown.active {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: none
}

    .header__account-panel-dropdown.active::before {
        opacity: 1;
        transition-delay: 200ms;
        transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .header__account-panel-dropdown.active.header__account-panel-dropdown-cta-on .header__account-panel-dropdown-list::before {
        bottom: -100px
    }

    .header__account-panel-dropdown.active.js-dropdown-scroll-active .header__account-panel-dropdown-item.active::before {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -11px;
        left: 0;
        width: 100%;
        height: 10px;
        background-image: linear-gradient(to top, rgba(242,242,242,0), rgba(0,0,0,0.075) 100%)
    }

    .header__account-panel-dropdown.active.js-dropdown-scroll-active .header__account-panel-dropdown-item.active.single-item + .header__account-panel-dropdown-select-list-group {
        border: none
    }

    .header__account-panel-dropdown.active.js-dropdown-scroll-active .header__account-panel-dropdown-item.active.single-item::before {
        display: none
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-overlay {
        opacity: 1;
        visibility: visible
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-button::after {
        transform: translateY(-60%) rotate(90deg) rotateY(180deg)
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-select-list-group {
        visibility: visible
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-link {
        opacity: 1;
        max-height: 100vh;
        min-height: 79px;
        padding: 10px 30px 10px
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-link-with-avatar {
        padding-left: 90px
    }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-link-with-avatar .header__account-panel-avatar-holder {
            visibility: visible;
            opacity: 1
        }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-link:hover, .header__account-panel-dropdown.active .header__account-panel-dropdown-link:focus {
        background: #f1f1f1
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-account-name {
        font-size: .9375rem;
        line-height: 1.125rem
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item {
        top: 0;
        opacity: 1;
        max-height: 100vh;
        margin-bottom: 1px;
        overflow: visible
    }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 27px;
            right: 30px;
            height: 0;
            border-bottom: thin solid #c8c8c8;
            width: auto
        }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item-current::after {
        display: none
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item:last-child {
        border-bottom: none
    }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item:last-child::after {
            display: none
        }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active {
        padding: 0;
        border-bottom: thin solid #c8c8c8
    }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active::after {
            display: none
        }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active.single-item {
            border: none
        }

            .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active.single-item + .header__account-panel-dropdown-select-list-group {
                border: none
            }

            .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active.single-item::before {
                display: none
            }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
            padding-top: 12px;
            padding-right: 71px;
            padding-bottom: 14px
        }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
            padding-left: 90px
        }

            .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar .header__account-panel-avatar-holder {
                visibility: visible;
                opacity: 1
            }

        .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name {
            font-size: .9375rem;
            line-height: 1.125rem;
            overflow: auto;
            white-space: normal;
            word-break: break-word
        }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item:last-of-type {
        margin-bottom: 0
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
        background: #fff
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list::before {
        opacity: 1;
        transition-delay: 200ms;
        transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single::before {
        display: none
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-link-with-avatar {
        min-height: 79px
    }

@media screen and (max-width: 63.9375em) {
    .header__account-panel-dropdown.active.header__account-panel-dropdown-cta-on .header__account-panel-dropdown-list::before {
        bottom: -92px
    }
}

@media screen and (max-width: 47.9375em) {
    .header__account-panel-dropdown {
        position: fixed;
        top: 57px;
        margin-bottom: 0 !important
    }

        .header__account-panel-dropdown.active {
            bottom: 0
        }
}

.header__account-panel-account-nav {
    position: relative;
    margin: 0;
    padding-top: 25px;
    padding-bottom: 26px;
    list-style-type: none
}

.header__account-panel-account-nav-items {
    display: block;
    padding: 12px 25px 12px 40px;
    border-bottom: thin solid #c8c8c8;
    position: relative
}

    .header__account-panel-account-nav-items:hover::after, .header__account-panel-account-nav-items:focus::after, .header__account-panel-account-nav-items.js-account-nav-item-focused::after {
        color: #c20016
    }

    .header__account-panel-account-nav-items:last-of-type {
        border-bottom: none
    }

    .header__account-panel-account-nav-items .header__account-panel-icon {
        width: 24px;
        height: 24px;
        position: absolute;
        top: calc(50% - 24px / 2);
        left: 0
    }

        .header__account-panel-account-nav-items .header__account-panel-icon * {
            transition: background 0.1s ease-in
        }

    .header__account-panel-account-nav-items::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        font-size: 14px;
        width: 10px;
        height: 10px;
        position: absolute;
        top: calc(50% - 10px / 2);
        right: 9px;
        color: #c8c8c8
    }

.header__account-panel-account-nav-items--transactions:hover .header__account-panel-icon g, .header__account-panel-account-nav-items--transactions:focus .header__account-panel-icon g, .header__account-panel-account-nav-items--transactions.js-account-nav-item-focused .header__account-panel-icon g {
    fill: #c20016
}

.header__account-panel-account-nav-items--statements:hover .header__account-panel-icon path, .header__account-panel-account-nav-items--statements:focus .header__account-panel-icon path, .header__account-panel-account-nav-items--statements.js-account-nav-item-focused .header__account-panel-icon path {
    fill: #c20016
}

.header__account-panel-account-nav-items--help-and-support:hover .header__account-panel-icon path:first-child, .header__account-panel-account-nav-items--help-and-support:focus .header__account-panel-icon path:first-child, .header__account-panel-account-nav-items--help-and-support.js-account-nav-item-focused .header__account-panel-icon path:first-child {
    stroke: #c20016
}

.header__account-panel-account-nav-items--help-and-support:hover .header__account-panel-icon path:last-child, .header__account-panel-account-nav-items--help-and-support:focus .header__account-panel-icon path:last-child, .header__account-panel-account-nav-items--help-and-support.js-account-nav-item-focused .header__account-panel-icon path:last-child {
    fill: #c20016
}

.header__account-panel-account-nav-items--account-settings:hover .header__account-panel-icon path, .header__account-panel-account-nav-items--account-settings:focus .header__account-panel-icon path, .header__account-panel-account-nav-items--account-settings.js-account-nav-item-focused .header__account-panel-icon path {
    fill: #c20016
}

.header__account-panel-account-nav-items--sign-out:hover .header__account-panel-icon circle, .header__account-panel-account-nav-items--sign-out:hover .header__account-panel-icon path, .header__account-panel-account-nav-items--sign-out:focus .header__account-panel-icon circle, .header__account-panel-account-nav-items--sign-out:focus .header__account-panel-icon path, .header__account-panel-account-nav-items--sign-out.js-account-nav-item-focused .header__account-panel-icon circle, .header__account-panel-account-nav-items--sign-out.js-account-nav-item-focused .header__account-panel-icon path {
    stroke: #c20016
}

.header__account-panel-account-nav-links {
    display: inline-block;
    position: relative;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
    font-size: .9375rem
}

.rooster-toggle .header__account-panel-account-nav-links {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.header__account-panel:not(.active) * {
    pointer-events: none
}

.header__account-panel.active {
    opacity: 1;
    visibility: visible
}

@media screen and (min-width: 1024px) and (max-width: 1075px) {
    .header__account-panel {
        width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .header__account-panel {
        max-width: 430px;
        max-height: calc(100vh - 60px);
        overflow-x: hidden
    }

    .header__account-panel-mobile-overflow-fix {
        -ms-flex-flow: column-reverse nowrap;
        flex-flow: column-reverse nowrap
    }

    .header__account-panel-dashboard {
        width: 100%;
        padding: 15px
    }

    .header__account-panel-sidebar {
        border-right: none;
        position: static
    }

    .header__account-panel-sidebar, .header__account-panel-login, .header__account-panel-credits {
        width: 430px
    }

    .header__account-panel-credits {
        padding: 17px;
        width: 100%;
        background-image: none;
        background-color: #fff;
        padding-bottom: 0
    }

    .header__account-panel-dropdown-account-name {
        font-size: .9375rem;
        line-height: 1.125rem
    }

    .js-account-switcher-active .header__account-panel-dropdown {
        width: 86%
    }

    .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow, .header__account-panel-dropdown .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow, .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow, .header__account-panel-dropdown .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-item-arrow {
        right: 20px
    }

    .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .header__account-panel-dropdown .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .header__account-panel-dropdown .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
        padding-right: 50px
    }

    .js-account-switcher-active .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .js-account-switcher-active .header__account-panel-dropdown .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .js-account-switcher-active .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .js-account-switcher-active .header__account-panel-dropdown .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
        padding-right: 20px
    }

    .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar, .header__account-panel-dropdown .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar, .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar, .header__account-panel-dropdown .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
        padding-left: 71px
    }

    .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name, .header__account-panel-dropdown .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name, .header__account-panel-dropdown:not(.active) .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name, .header__account-panel-dropdown .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-account-name {
        font-size: .9375rem;
        line-height: 1.125rem;
        letter-spacing: 0.035rem
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-link, .header__account-panel-dropdown.active .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-link {
        padding: 19px 17px 20px
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-link-with-avatar, .header__account-panel-dropdown.active .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-link-with-avatar {
        padding-left: 71px
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item::after, .header__account-panel-dropdown.active .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item::after {
        left: 17px;
        right: 17px
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link, .header__account-panel-dropdown.active .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link {
        padding-top: 16px;
        padding-bottom: 18px;
        padding-left: 17px
    }

    .header__account-panel-dropdown.active .header__account-panel-dropdown-list-single .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar, .header__account-panel-dropdown.active .header__account-panel-dropdown-list-multiple .header__account-panel-dropdown-item.active .header__account-panel-dropdown-link-with-avatar {
        padding-left: 71px
    }

    .header__account-panel-account-nav {
        padding: 11px 25px 19px
    }

        .header__account-panel-account-nav::before {
            display: none
        }
}

@media screen and (max-width: 47.9375em) {
    .header__account-panel {
        max-width: initial;
        left: 0;
        max-height: 0vh;
        width: 100%;
        position: fixed;
        top: 57px;
        bottom: 0;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .header__account-panel-credits {
        background-image: none
    }

    .header__account-panel-sidebar {
        min-height: 0
    }

    .header__account-panel-mobile-overflow-fix > * {
        opacity: 0;
        visibility: hidden;
        width: 100%;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .header__account-panel.active {
        max-height: calc(100vh - 57px);
        opacity: 1;
        visibility: visible;
        transition-delay: 400ms
    }

        .header__account-panel.active .header__account-panel-mobile-overflow-fix > * {
            opacity: 1;
            visibility: visible;
            transition-delay: 600ms
        }
}

@media screen and (max-width: 47.9375em) {
    .header__account-user.active::before {
        opacity: 0 !important;
        visibility: hidden !important
    }

    .header__account-user .icon-user::before {
        background: url(/Media/user.svg) no-repeat center center transparent !important
    }
}

.header__bar-bottom-nav-login-panel {
    visibility: hidden
}

.login-panel-on .header__bar-bottom-nav-login-panel {
    visibility: visible
}

@media screen and (max-width: 47.9375em) {
    .header__bar-bottom-nav-login-panel input {
        font-size: 1rem !important
    }
}

.header .header__bar-bottom .header__bar-bottom-nav .header__account-panel-credit-description span {
    display: inline-block
}

.account-quicklinks {
    position: relative;
    padding: 50px 0 60px
}

    .account-quicklinks::after {
        content: '';
        background: url("/Media/r2-section-gradient-20px.png") no-repeat center center transparent;
        background-size: contain;
        content: '';
        display: block;
        height: 30px;
        width: 1600px;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        transform: translateX(-50%)
    }

.account-quicklinks-list {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.account-quicklinks-item {
    width: calc((100% - 40px * 2) / 3);
    max-width: 320px;
    margin-right: 40px
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-item {
        width: calc((100% - 24px * 2) / 3);
        margin-right: 24px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-quicklinks-item {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 16px
    }

        .account-quicklinks-item:last-of-type {
            margin-right: 0;
            margin-bottom: 0
        }
}

.account-quicklinks-item:last-of-type {
    margin-right: 0
}

.account-quicklinks-link {
    background-color: #fff;
    padding: 40px 40px 50px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
    display: block;
    text-align: center;
    border: 1px solid transparent;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-link {
        padding: 32px 0 40px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-quicklinks-link {
        padding: 24px 32px 24px
    }
}

.account-quicklinks-link.disabled {
    background-color: #f1f1f1;
    color: #71777b;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .account-quicklinks-link.disabled:hover {
        border: 1px solid transparent;
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
        cursor: not-allowed
    }

        .account-quicklinks-link.disabled:hover .account-quicklinks-thumbnail {
            background-color: #f1f1f1;
            border: 1px solid #979797
        }

        .account-quicklinks-link.disabled:hover .account-quicklinks-thumbnail-normal {
            opacity: 1;
            visibility: visible
        }

        .account-quicklinks-link.disabled:hover .account-quicklinks-thumbnail-hover {
            opacity: 0;
            visibility: hidden
        }

.account-quicklinks-link:hover {
    border: 1px solid #28343d;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.04)
}

    .account-quicklinks-link:hover .account-quicklinks-thumbnail {
        background-color: #28343d;
        border: 1px solid #28343d
    }

    .account-quicklinks-link:hover .account-quicklinks-thumbnail-normal {
        opacity: 0;
        visibility: hidden
    }

    .account-quicklinks-link:hover .account-quicklinks-thumbnail-hover {
        opacity: 1;
        visibility: visible
    }

.account-quicklinks-thumbnail {
    background-color: #f1f1f1;
    border: 1px solid #979797;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto 20px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-thumbnail {
        width: 96px;
        height: 96px
    }
}

.account-quicklinks-thumbnail img {
    width: 80px;
    height: 80px;
    position: absolute;
    top: calc(50% - 80px / 2);
    left: calc(50% - 80px / 2);
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-thumbnail img {
        width: 50px;
        height: 50px;
        top: calc(50% - 50px / 2);
        left: calc(50% - 50px / 2)
    }
}

.account-quicklinks-thumbnail-normal {
    opacity: 1;
    visibility: visible
}

.account-quicklinks-thumbnail-hover {
    opacity: 0;
    visibility: hidden
}

.account-quicklinks-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.875rem
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-title {
        font-size: 1.5625rem
    }
}

.account-quicklinks-description {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem
}

@media screen and (max-width: 63.9375em) {
    .account-quicklinks-description {
        font-size: .8125rem;
        padding: 0 25px
    }
}

.account-settings {
    position: relative;
    padding: 50px 0 60px
}

    .account-settings::after {
        content: '';
        background: url("/Media/r2-section-gradient-20px.png") no-repeat center center transparent;
        background-size: contain;
        content: '';
        display: block;
        height: 30px;
        width: 1600px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%)
    }

.account-settings-list {
    margin: 0 auto 30px;
    padding: 0;
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

    .account-settings-list:last-of-type {
        margin-bottom: 0
    }

@media screen and (max-width: 47.9375em) {
    .account-settings-list {
        margin: 0;
        margin-bottom: 16px;
        width: 100%;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap
    }
}

.account-settings-item {
    max-width: 380px;
    margin-right: 30px
}

.account-settings-list-three .account-settings-item {
    width: calc((100% - 30px * 2) / 3)
}

.account-settings-list-two .account-settings-item {
    width: calc((100% - 30px) / 2)
}

.account-settings-list-one .account-settings-item {
    width: 100%
}

.account-settings-item:last-of-type {
    margin-right: 0
}

@media screen and (max-width: 47.9375em) {
    .account-settings-item {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 16px
    }

        .account-settings-item:last-of-type {
            margin-bottom: 0
        }

    .account-settings-list-three .account-settings-item, .account-settings-list-two .account-settings-item, .account-settings-list-one .account-settings-item {
        width: 100%
    }
}

.account-settings-link {
    background-color: #fff;
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    border: 1px solid transparent;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .account-settings-link {
        padding: 20px 32px
    }
}

.account-settings-link.disabled {
    background-color: #f1f1f1;
    color: #71777b;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .account-settings-link.disabled:hover {
        border: 1px solid transparent;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
        cursor: not-allowed
    }

.account-settings-link:hover {
    border: 1px solid #28343d;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.04)
}

.account-settings-thumbnail {
    width: 50px;
    height: 50px;
    margin-right: 20px
}

.account-settings-main-title, .account-settings-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.account-settings-main-title {
    font-size: 1.875rem;
    text-align: center;
    width: 100%;
    margin-bottom: 35px
}

.account-settings-content {
    width: calc(100% - 70px)
}

.account-settings-title {
    font-size: 1.375rem
}

@media screen and (max-width: 63.9375em) {
    .account-settings-title {
        font-size: 1.125rem;
        margin-bottom: 4px
    }
}

.account-settings-description {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem
}

@media screen and (max-width: 63.9375em) {
    .account-settings-description {
        font-size: .8125rem
    }
}

.filtering-sidebar {
    position: fixed;
    z-index: 4;
    left: -314px;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 314px;
    padding: 70px 0 60px;
    background-color: #f1f1f1;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.5);
    box-sizing: border-box;
    transition: left 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.rooster-toggle .filtering-sidebar {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar * {
    box-sizing: border-box
}

.js-filtering-sidebar-active .filtering-sidebar {
    left: 0
}

.filtering-sidebar-overlay {
    position: fixed;
    display: none;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    overflow: hidden
}

.js-filtering-sidebar-active .filtering-sidebar-overlay {
    display: block
}

.filtering-sidebar__controls {
    position: absolute;
    top: 0;
    width: 100%;
    height: 70px;
    background: #28343d;
    box-sizing: border-box;
    padding: 23px 45px 23px 18px
}

.filtering-sidebar__clear {
    position: relative;
    z-index: 1;
    font-size: .6875rem;
    letter-spacing: 0.07rem;
    line-height: 1.4rem;
    font-weight: bold;
    text-decoration: underline;
    color: #ffffff;
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer
}

.rooster-toggle .filtering-sidebar__clear {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar__controls-label {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 22px;
    width: 100%;
    font-size: .9375rem;
    font-weight: bold;
    line-height: 1.5rem;
    text-align: center;
    color: #ffffff;
    padding: 0 110px
}

.filtering-sidebar__close {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: auto;
    margin-right: 0;
    width: 56px;
    height: 100%;
    padding: 0;
    z-index: 1;
    color: #ffffff;
    background: none;
    border: none;
    cursor: pointer
}

    .filtering-sidebar__close:before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        line-height: 1;
            text-transform: none;
        font-size: 1rem;
        font-weight: 400;
        margin-right: 0
    }

.filtering-sidebar__form-scroll-area {
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    box-sizing: border-box
}

.filtering-sidebar__form-section-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    background-color: #ffffff;
    font-size: .9375rem;
    font-weight: bold;
    line-height: 1.5rem;
    padding: 13px 20px;
    margin-bottom: 3px
}

.disabled .filtering-sidebar__form-section-title {
    color: #c8c8c8
}

.filtering-sidebar__form-section--transactions {
    position: relative;
    z-index: 1
}

.filtering-sidebar__form-section--doc-types {
    position: relative;
    z-index: 0;
    margin-top: 10px
}

.filtering-sidebar__form-field {
    position: relative
}

.filtering-sidebar__form-field-group {
    padding-top: 13px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff
}

.filtering-sidebar__form-field-group--doc-types {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-top: 21px;
    padding-bottom: 23px
}

.filtering-sidebar__form-field--search {
    margin-bottom: 16px
}

.filtering-sidebar__form-section--error .filtering-sidebar__form-field--search {
    margin-bottom: 7px
}

.filtering-sidebar__form-field-label--inline {
    position: absolute;
    z-index: 0;
    top: 2px;
    left: 8px;
    right: 40px;
    width: auto;
    font-size: .75rem;
    font-weight: normal;
    line-height: 1.5rem
}

.filtering-sidebar__date--set .filtering-sidebar__form-field-label--inline {
    font-weight: bold
}

.rooster-toggle .filtering-sidebar__date--set .filtering-sidebar__form-field-label--inline {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold
}

.filtering-sidebar__form-field-label--inline::after {
    content: "----";
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 17px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #d4d4d4;
    white-space: nowrap
}

.filtering-sidebar__date--set .filtering-sidebar__form-field-label--inline::after {
    display: none
}

.filtering-sidebar__form-field-info {
    font-size: .8125rem;
    line-height: 1.25rem;
    color: #71777b;
    padding: 0 14px 0 15px;
    margin-bottom: 14px
}

    .filtering-sidebar__form-field-info p {
        font-size: .8125rem;
        line-height: 1.25rem
    }

.filtering-sidebar__form-field--date {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.filtering-sidebar__form-textfield {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    min-height: 40px;
    font-size: .9375rem;
    font-weight: normal;
    line-height: 1.5rem;
    border: 1px solid #c8c8c8;
    padding: 5px 40px 4px 9px;
    background-color: #f9f9f9
}

.iphone .filtering-sidebar__form-textfield {
    font-size: 16px
}

.rooster-toggle .filtering-sidebar__form-textfield--search {
    padding-top: 1px
}

.filtering-sidebar__form-textfield:focus {
    outline: none;
    border: 1px solid #28343d
}

.filtering-sidebar__form-textfield::-webkit-input-placeholder {
    color: #d4d4d4;
    font-style: normal
}

.filtering-sidebar__form-textfield:-moz-placeholder {
    color: #d4d4d4;
    font-style: normal
}

.filtering-sidebar__form-textfield::-moz-placeholder {
    color: #d4d4d4;
    font-style: normal
}

.filtering-sidebar__form-textfield:-ms-input-placeholder {
    color: #d4d4d4;
    font-style: normal
}

.filtering-sidebar__form-textfield--datepicker {
    position: relative;
    z-index: 1;
    height: 50px;
    font-weight: bold;
    padding-top: 20px;
    text-transform: uppercase;
    background-color: transparent;
    font-size: .875rem;
    line-height: 1.4rem;
    text-indent: -999px;
    white-space: nowrap
}

    .filtering-sidebar__form-textfield--datepicker:focus, .filtering-sidebar__date--active .filtering-sidebar__form-textfield--datepicker {
        border: 1px solid #c8c8c8
    }

.filtering-sidebar__date--set .filtering-sidebar__form-textfield--datepicker {
    text-indent: 0;
    font-weight: bold
}

.rooster-toggle .filtering-sidebar__date--set .filtering-sidebar__form-textfield--datepicker {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold
}

.rooster-toggle .filtering-sidebar__form-textfield {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar__form-submit {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    font-size: .8125rem;
    line-height: 2rem;
    letter-spacing: 0.17rem;
    color: #ffffff;
    background-color: #28343d;
    border: none;
    box-shadow: 0 -10px 15px rgba(0,0,0,0.3);
    text-align: center;
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .filtering-sidebar__form-submit:hover {
        background-color: #1f242f
    }

        .filtering-sidebar__form-submit:hover .filtering-sidebar__form-submit-ico::after {
            top: 0;
            animation-duration: 0.5s;
            animation-name: cta-arrow-inline;
            animation-timing-function: ease-in-out
        }

.filtering-sidebar__form-submit-ico {
    position: relative;
    top: 8px;
    display: inline-block;
    height: 24px;
    pointer-events: none;
    width: 24px;
    right: 15px;
    margin-left: 17px
}

    .filtering-sidebar__form-submit-ico::after {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 10px;
        width: 10px;
        display: inline-block;
        background: url("/Media/button-arrow-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
        margin: auto
    }

.rooster-toggle .filtering-sidebar__form-submit {
    font-family: "Rooster",sans-serif
}

.filtering-sidebar__date-container {
    position: absolute;
    z-index: 2;
    top: 44px;
    left: -10px;
    right: -10px;
    width: auto;
    display: block;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    transition: top 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .filtering-sidebar__date-container .flatpickr-calendar {
        width: 100%;
        top: 0;
        border: none;
        background: none
    }

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__date-container {
        position: fixed;
        z-index: 4;
        top: 70px;
        bottom: 60px;
        left: 0;
        right: 0;
        max-width: 322px;
        padding: 0 16px;
        height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        background-color: #f1f1f1;
        transition: opacity 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }
}

.filtering-sidebar__date--active .filtering-sidebar__date-container {
    top: 44px;
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__date--active .filtering-sidebar__date-container {
        top: 70px;
        height: calc(100% - 130px);
        opacity: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }
}

.filtering-sidebar__date--active .filtering-sidebar__form-textfield--datepicker {
    border: 1px solid #28343d
}

.filtering-sidebar__date--active .filtering-sidebar__date-from::before, .filtering-sidebar__date--active .filtering-sidebar__date-to::before {
    top: 34px;
    opacity: 1;
    visibility: visible
}

.filtering-sidebar__date-error {
    display: none;
    width: 100%;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem;
    font-weight: normal;
    line-height: 1.5rem;
    color: #c20016;
    margin-bottom: 2px
}

.filtering-sidebar__date-error--show {
    display: inline-block
}

.rooster-toggle .filtering-sidebar__date-error {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar__date-input-holder {
    position: relative
}

.filtering-sidebar__date-input-holder--error::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #c20016
}

.filtering-sidebar__date-back-btn {
    position: relative;
    background: none;
    border: none;
    display: none;
    height: 20px;
    font-size: .9375rem;
    font-weight: bold;
    line-height: 1.5rem;
    color: #28343d;
    margin-right: 10px;
    width: 100%;
    text-align: left;
    padding: 17px 10px 41px 33px;
    cursor: pointer
}

    .filtering-sidebar__date-back-btn::before {
        position: absolute;
        background: url("/Media/arrow-left.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        display: inline-block;
        margin: auto
    }

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__date-back-btn {
        display: block
    }
}

.filtering-sidebar__search-btn, .filtering-sidebar__search-btn-clear, .filtering-sidebar__date-btn {
    position: absolute;
    background: transparent;
    border: none;
    font-size: 0;
    padding: 0;
    right: 0;
    top: 0;
    transition: background-color 0.25s ease-out,color 0.25s ease-out;
    width: 40px;
    height: 100%;
    cursor: pointer
}

.filtering-sidebar__date-btn {
    z-index: 3;
    width: 100%;
    outline: none;
    color: #28343d
}

    .filtering-sidebar__date-btn:focus {
        border: 1px solid #28343d
    }

.filtering-sidebar__date--set .filtering-sidebar__date-btn {
    font-weight: bold
}

.rooster-toggle .filtering-sidebar__date--set .filtering-sidebar__date-btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold
}

.filtering-sidebar__date-btn::before {
    background: url("/Media/calendar.svg") no-repeat center center transparent;
    content: '';
    display: block;
    background-size: 23px;
    width: 100%;
    height: 100%;
    display: block;
    background-position-x: 90%
}

.filtering-sidebar__date-from, .filtering-sidebar__date-to {
    position: relative;
    background-color: #f9f9f9
}

    .filtering-sidebar__date-from::before, .filtering-sidebar__date-to::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 44px;
        right: 11.5%;
        width: 0;
        height: 0;
        border-style: inset;
        border-width: 0 7.5px 10px 7.5px;
        border-color: transparent transparent #28343d transparent;
        visibility: hidden;
        opacity: 0;
        transform: rotate(360deg);
        transition: top 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__date-from::before, .filtering-sidebar__date-to::before {
        display: none
    }
}

.filtering-sidebar__date-from {
    margin-right: 4px
}

.filtering-sidebar__date-to {
    margin-left: 4px
}

.filtering-sidebar__search-btn::before {
    background: url("/Media/search.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    color: #28343d;
    position: relative;
    top: 0;
    background-size: 38px;
    background-position: 0 3px
}

.filtering-sidebar__search-btn-clear {
    right: 0;
    display: none;
    cursor: pointer;
    outline: none
}

    .filtering-sidebar__search-btn-clear::before {
        background: url("/Media/close.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        position: relative;
        top: 0;
        background-size: 16px
    }

.filtering-sidebar__doc-type {
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    position: relative;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 55px 2px 0 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: none;
    cursor: pointer;
    border: none
}

.filtering-sidebar__doc-type-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #767572;
    margin: auto;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .filtering-sidebar__doc-type-icon::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 50%;
        background-color: #28343d;
        margin: auto;
        opacity: 0;
        visibility: hidden;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .filtering-sidebar__doc-type-icon::before {
        content: "";
        position: absolute;
        z-index: 2;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        background: url("/Media/check-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        background-size: 20px;
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

.filtering-sidebar__doc-type--active .filtering-sidebar__doc-type-icon::after, .filtering-sidebar__doc-type--active .filtering-sidebar__doc-type-icon::before {
    opacity: 1;
    visibility: visible
}

.filtering-sidebar__doc-type-icon:hover, .filtering-sidebar__doc-type-icon:focus {
    background-color: #f0f0f0
}

.filtering-sidebar__doc-type-icon img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.filtering-sidebar__doc-type-label {
    font-size: .9375rem;
    font-weight: normal;
    line-height: 1rem;
    color: #767572
}

.rooster-toggle .filtering-sidebar__doc-type-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar__toggle {
    -ms-flex: 1;
    flex: 1;
    box-shadow: inset 0 -2px 10px 0 rgba(0,0,0,0.2);
    background-color: #7e94a4;
    font-weight: bold;
    font-size: .875rem;
    color: #ffffff;
    border: none;
    padding: 8px 5px;
    border-radius: 4px 4px 0 0;
    margin-right: 1px;
    margin-bottom: 0
}

    .filtering-sidebar__toggle:hover {
        cursor: pointer
    }

.filtering-sidebar__toggle--active {
    color: #28343d;
    background: #ffffff;
    box-shadow: none;
    font-weight: bold
}

.rooster-toggle .filtering-sidebar__toggle--active {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.filtering-sidebar__toggle-group {
    display: -ms-flexbox;
    display: flex;
    padding: 5px 6px 0 6px;
    background: #28343d;
    box-shadow: none
}

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__toggle {
        margin: 0;
        border-radius: 4px 0 0 0
    }

        .filtering-sidebar__toggle:not(.filtering-sidebar__toggle--active) {
            box-shadow: inset 0 -4px 10px 0 rgba(0,0,0,0.2)
        }

        .filtering-sidebar__toggle + .filtering-sidebar__toggle {
            border-radius: 0 4px 0 0
        }

    .filtering-sidebar__toggle-group {
        border-radius: 4px 4px 0 0;
        background: #f1f1f1;
        padding: 0;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)
    }
}

.filtering-sidebar__datepicker-clear, .filtering-sidebar__clear-month {
    display: table;
    background: none;
    border: none;
    font-size: .8125rem;
    margin: 12px auto 28px;
    line-height: 1.56rem;
    text-align: center;
    text-decoration: underline;
    color: #4a90e2;
    cursor: pointer
}

.rooster-toggle .filtering-sidebar__datepicker-clear, .rooster-toggle .filtering-sidebar__clear-month {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.filtering-sidebar__clear-month {
    margin-top: -3px
}

.filtering-sidebar__picker {
    border: 1px solid #28343d;
    border-top: none;
    background: #ffffff;
    overflow: hidden
}

@media screen and (max-width: 47.9375em) {
    .filtering-sidebar__picker {
        border: none;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
        margin-bottom: 25px
    }
}

.filtering-sidebar__picker.filtering-sidebar__picker--hidden {
    display: none
}

.filtering-sidebar__picker .online-account-banner {
    display: none;
    width: auto;
    margin: 0 11px 38px 11px;
    padding: 27px 22px 26px 69px
}

    .filtering-sidebar__picker .online-account-banner::after {
        left: 23px
    }

.filtering-sidebar__picker .online-account-banner__title {
    font-size: 1.0625rem;
    line-height: 1.11rem
}

.filtering-sidebar__picker .online-account-banner__content {
    font-size: .8125rem;
    line-height: 1.26rem
}

.filtering-sidebar__month {
    width: 100%;
    background: none;
    border: 1px solid #c8c8c8;
    border-radius: 34px;
    font-size: .6875rem;
    letter-spacing: 2px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.rooster-toggle .filtering-sidebar__month {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.filtering-sidebar__month-picker {
    column-count: 2;
    column-gap: 8px;
    padding: 37px 12px 0
}

.filtering-sidebar__month--active {
    background-color: #28343d;
    color: #ffffff
}

    .filtering-sidebar__month--active:hover {
        background-color: #1f242f
    }

.filtering-sidebar__month:not(.filtering-sidebar__month--active):hover {
    background-color: #f6f6f6
}

.filtering-sidebar__apply {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    width: calc(100% - 22px);
    margin: -6px 11px 0 11px;
    padding: 16px;
    background: none;
    border-radius: 24px;
    letter-spacing: 2.4px;
    border: 1px solid #c8c8c8;
    font-size: .8125rem;
    font-weight: bold;
    color: #28343d;
    text-transform: uppercase;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.filtering-sidebar__apply--month {
    margin-top: 27px;
    margin-bottom: 20px
}

.filtering-sidebar__apply:not([disabled]) {
    background-color: #70c624;
    border: 1px solid #70c624;
    color: #ffffff
}

    .filtering-sidebar__apply:not([disabled]):hover {
        background-color: #5ca41e;
        cursor: pointer
    }

.rooster-toggle .filtering-sidebar__apply {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.filtering-sidebar--online-account .filtering-sidebar__form-submit {
    background-color: #28343d
}

    .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-active {
        background-color: #70c624
    }

        .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-active:hover {
            background-color: #5ca41e
        }

    .filtering-sidebar--online-account .filtering-sidebar__form-submit:not(.js-submit-active):hover {
        background-color: #1f242f
    }

    .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-loading {
        font-size: 0;
        color: transparent;
        text-indent: -999rem
    }

        .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-loading:disabled {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-loading:disabled:hover {
                background-color: #70c624
            }

        .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-loading:hover {
            animation: 0
        }

        .filtering-sidebar--online-account .filtering-sidebar__form-submit.js-submit-loading::before {
            background: url("/Media/loader.svg") no-repeat center center transparent;
            background-size: contain;
            content: "";
            display: block;
            height: 24px;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 24px
        }

.filtering-sidebar--online-account .filtering-sort__results-count {
    background-color: transparent
}

.filtering-sidebar .flatpickr-prev-month, .filtering-sidebar .flatpickr-next-month {
    top: 28px
}

    .filtering-sidebar .flatpickr-prev-month::before, .filtering-sidebar .flatpickr-next-month::before {
        color: #28343d;
        font-size: 10px
    }

    .filtering-sidebar .flatpickr-prev-month.flatpickr-next-month, .filtering-sidebar .flatpickr-next-month.flatpickr-next-month {
        right: 30px
    }

    .filtering-sidebar .flatpickr-prev-month.flatpickr-prev-month, .filtering-sidebar .flatpickr-next-month.flatpickr-prev-month {
        left: 30px
    }

.filtering-sidebar .flatpickr-current-month, .filtering-sidebar .flatpickr-current-month input.cur-year {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.56rem
}

.filtering-sidebar .flatpickr-weekdays {
    margin-bottom: 8px
}

.filtering-sidebar .flatpickr-weekdays, .filtering-sidebar .flatpickr-weekdaycontainer {
    height: 26px
}

.filtering-sidebar .flatpickr-month {
    height: 48px;
    margin-top: 16px
}

.filtering-sidebar .flatpickr-calendar {
    padding: 12px 9px
}

.filtering-sidebar .flatpickr-day {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 33px;
    color: #28343d;
    margin-bottom: 12px
}

    .filtering-sidebar .flatpickr-day.selected {
        color: #ffffff
    }

        .filtering-sidebar .flatpickr-day.selected:focus, .filtering-sidebar .flatpickr-day.selected:hover {
            background: #28343d;
            border-color: #28343d
        }

.filtering-sidebar .flatpickr-days, .filtering-sidebar .flatpickr-days .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%
}

.filtering-sidebar .flatpickr-day.inRange, .filtering-sidebar .flatpickr-day.prevMonthDay.inRange, .filtering-sidebar .flatpickr-day.nextMonthDay.inRange, .filtering-sidebar .flatpickr-day.today.inRange, .filtering-sidebar .flatpickr-day.prevMonthDay.today.inRange, .filtering-sidebar .flatpickr-day.nextMonthDay.today.inRange, .filtering-sidebar .flatpickr-day:hover, .filtering-sidebar .flatpickr-day.prevMonthDay:hover, .filtering-sidebar .flatpickr-day.nextMonthDay:hover, .filtering-sidebar .flatpickr-day:focus, .filtering-sidebar .flatpickr-day.prevMonthDay:focus, .filtering-sidebar .flatpickr-day.nextMonthDay:focus {
    background: #f6f6f6;
    border-color: #f6f6f6
}

.filtering-sidebar .flatpickr-day.disabled, .filtering-sidebar .flatpickr-day.disabled:hover, .filtering-sidebar .flatpickr-day.notAllowed, .filtering-sidebar .flatpickr-day.notAllowed.prevMonthDay, .filtering-sidebar .flatpickr-day.notAllowed.nextMonthDay {
    color: #f1f1f1
}

.filtering-sidebar .flatpickr-day.prevMonthDay, .filtering-sidebar .flatpickr-day.nextMonthDay {
    color: #c8c8c8
}

.filtering-sidebar .flatpickr-day.today:hover, .filtering-sidebar .flatpickr-day.today:focus {
    border-color: #262626
}

.filtering-sidebar .flatpickr-current-month .numInputWrapper {
    width: 60px
}

    .filtering-sidebar .flatpickr-current-month .numInputWrapper span.arrowUp, .filtering-sidebar .flatpickr-current-month .numInputWrapper span.arrowDown {
        display: none
    }

.filtering-sidebar .flatpickr-day {
    max-width: 35px;
    height: 35px;
    line-height: 35px
}

.rooster-toggle .filtering-sidebar .flatpickr-day {
    line-height: 33px
}

@media screen and (max-width: 47.9375em) {
    .js-filtering-sidebar-date-active .filtering-sidebar__form-section--doc-types {
        visibility: hidden
    }
}

.filtering-sort--online-account {
    margin-bottom: 25px
}

    .filtering-sort--online-account.filtering-sort {
        padding-bottom: 118px;
        margin-top: 0
    }

.js-filtering-sort-sticky .filtering-sort--online-account.filtering-sort .filtering-sort__container {
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.filtering-sort--online-account.filtering-sort .filtering-sort__btn {
    line-height: 1.8rem
}

.filtering-sort--online-account.filtering-sort .filtering-sort__btn-label {
    vertical-align: middle
}

.filtering-sort--online-account.filtering-sort .filtering-sort__btn-label-mobile {
    display: none
}

.filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .options-wrap ul .select-option a {
    padding: 5px 33px 5px 33px
}

.filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .selectbox-label {
    right: 2px;
    height: 46px;
    line-height: 1.2rem
}

.filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container {
    background-color: transparent;
    height: 48px;
    border: none;
    margin: 0
}

    .filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container .filtering-sort__form-field-label {
        margin-top: 0
    }

.filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox-wrap {
    display: block;
    width: 100%;
    height: 100%
}

.filtering-sort--online-account.filtering-sort .filtering-sort__results-count {
    position: absolute;
    left: 0;
    bottom: -135px;
    background-color: transparent
}

.js-filtering-sort-sticky .filtering-sort--online-account.filtering-sort .filtering-sort__results-count {
    opacity: 0
}

.filtering-sort--online-account.filtering-sort .js-filters-count:not(.active) {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .filtering-sort--online-account.filtering-sort .filtering-sort__results-count {
        bottom: -114px;
        font-size: .8125rem
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__container {
        left: 39px;
        right: 39px;
        max-width: none;
        width: auto
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort .filtering-sort__btn {
        right: 0;
        padding-right: 180px
    }

    .filtering-sort--online-account.filtering-sort .grid-narrow {
        max-width: none
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort--online-account.filtering-sort .filtering-sort__results-count {
        bottom: -103px;
        font-size: 1.125rem
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__container {
        left: 8px;
        right: 8px
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__btn-label {
        display: none
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__btn-label-mobile {
        margin-top: -2px;
        display: block
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .filtering-sort__form-field-label {
        display: none
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .selectbox-label {
        font-size: 1.125rem;
        line-height: 1.125rem;
        font-weight: bold
    }

    .filtering-sort--online-account.filtering-sort .filtering-sort__form-field-select .custom-selectbox .selectbox-label-container {
        padding-left: 4px
    }
}

.account-overview {
    position: relative;
    z-index: 1
}

.account-overview__title {
    font-size: 1.875rem;
    line-height: 2.49rem;
    margin: 0;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .account-overview__title {
        font-size: 1.5625rem;
        width: auto
    }
}

@media screen and (max-width: 47.9375em) {
    .account-overview__title {
        width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .account-overview .container {
        padding-left: 0;
        padding-right: 0
    }
}

.account-overview .account-summary {
    margin-bottom: 50px
}

@media screen and (max-width: 63.9375em) {
    .account-overview .account-summary {
        margin-bottom: 40px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-overview .account-summary {
        margin-bottom: 35px
    }
}

.account-overview__dropdown-select-list {
    margin: 0;
    margin-top: 24px;
    margin-bottom: 30px;
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

@media screen and (max-width: 63.9375em) {
    .account-overview__dropdown-select-list {
        width: auto;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-top: 0;
        margin-bottom: 24px;
        margin-left: 30px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-overview__dropdown-select-list {
        margin: 0;
        margin-top: 16px;
        margin-bottom: 24px;
        width: 100%
    }
}

.account-overview__dropdown-select-list > * {
    display: none
}

.account-overview__dropdown-select-list::after {
    content: "Account Switch Placeholder";
    width: 375px;
    height: 70px;
    box-sizing: border-box;
    border: 1px solid #28343d;
    color: #28343d;
    background-color: #f9f9f9;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold
}

@media screen and (max-width: 63.9375em) {
    .account-overview__dropdown-select-list::after {
        width: 100%
    }
}

.rooster-toggle .account-overview__dropdown-select-list::after {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .account-overview .header__account-panel-dropdown-item {
        background: #f9f9f9
    }
}

.marketing-prefs {
    display: table;
    width: 100%
}

.marketing-prefs__opts {
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    background-color: #ffffff;
    padding: 30px 39px 59px;
    margin-bottom: 124px
}

@media screen and (max-width: 63.9375em) {
    .marketing-prefs__opts {
        padding: 18px 32px 46px;
        margin-bottom: 144px
    }
}

.marketing-prefs__list-readonly {
    list-style: none;
    margin: 0;
    padding: 0
}

.marketing-opt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px dashed #c8c8c8;
    padding-top: 22px;
    padding-bottom: 22px
}

@media screen and (max-width: 63.9375em) {
    .marketing-opt {
        padding-top: 24px;
        padding-bottom: 24px
    }
}

.marketing-opt:last-child {
    border-bottom: 1px solid #c8c8c8
}

.marketing-opt__label {
    font-family: "Rooster",sans-serif;
    font-weight: normal;
    font-size: .9375rem;
    line-height: 1.56rem
}

@media screen and (max-width: 63.9375em) {
    .marketing-opt__label {
        font-size: .8125rem;
        line-height: 1.25rem
    }
}

.rooster-toggle .marketing-opt__label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.marketing-opt__value {
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    line-height: 1.5rem;
    letter-spacing: 0.12rem;
    padding-left: 15px
}

.rooster-toggle .marketing-opt__value {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.account-page-title {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px;
    margin-top: 12px
}

@media screen and (max-width: 47.9375em) {
    .account-page-title {
        margin-bottom: 24px
    }
}

.account-page-title--back-to {
    padding-right: 0
}

    .account-page-title--back-to .back-to-page {
        margin-right: 0
    }

    .account-page-title--back-to .back-to-page__txt {
        padding-left: 0
    }

@media screen and (max-width: 63.9375em) {
    .account-page-title--back-to .back-to-page__ico {
        margin-right: 0
    }

    .account-page-title--back-to .back-to-page__txt {
        padding-left: 0
    }
}

@media screen and (max-width: 47.9375em) {
    .account-page-title--back-to .back-to-page__txt {
        padding-left: 10px
    }
}

.account-page-title--large .back-to-page__txt {
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 4rem
}

.rooster-toggle .account-page-title--large .back-to-page__txt {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.account-page-title--large .back-to-page__ico {
    top: 2px
}

@media screen and (max-width: 63.9375em) {
    .account-page-title--large .back-to-page__txt {
        font-size: 1.5625rem;
        line-height: 2.18rem
    }

    .account-page-title--large .back-to-page__ico {
        top: 3px
    }
}

.account-page-title--with-text {
    padding: 0 90px
}

    .account-page-title--with-text .back-to-page {
        position: absolute;
        left: 0
    }

    .account-page-title--with-text .account-page-title__txt {
        position: relative;
        top: -3px;
        width: 100%
    }

@media screen and (max-width: 47.9375em) {
    .account-page-title--with-text {
        padding: 0 40px
    }
}

.account-page-title__txt {
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 2.49rem;
    text-transform: none;
    margin-bottom: 0;
    text-align: center;
    color: #28343d
}

@media screen and (max-width: 63.9375em) {
    .account-page-title__txt {
        font-size: 1.5625rem;
        line-height: 2.18rem
    }
}

.rooster-toggle .account-page-title__txt {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.back-to-page {
    margin-right: 68px
}

@media screen and (max-width: 63.9375em) {
    .back-to-page {
        margin-right: 37px
    }
}

@media screen and (max-width: 47.9375em) {
    .back-to-page {
        margin-right: 18px
    }
}

.back-to-page__txt {
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 2.5rem
}

@media screen and (max-width: 47.9375em) {
    .back-to-page__txt:not(.back-to-page__txt-always-visible) {
        display: none
    }
}

.rooster-toggle .back-to-page__txt {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.back-to-page__ico {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 700
}

    .back-to-page__ico::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e900';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 15px;
        height: 15px;
        display: inline-block;
        font-family: "icon-howdens";
        font-size: 16px;
        line-height: 14px;
            text-transform: none;
        margin: auto;
        transform: rotate(-180deg)
    }

@media screen and (max-width: 47.9375em) {
    .back-to-page__ico {
        top: 2px
    }
}

.account-details {
    padding: 31px 0 35px;
    position: relative
}

    .account-details .container {
        box-sizing: border-box;
        width: 586px;
        margin: 0 auto;
        padding: 0
    }

        .account-details .container .grid {
            margin: 0 auto
        }

        .account-details .container .grid-narrow {
            padding: 0
        }

@media screen and (max-width: 63.9375em) {
    .account-details .container {
        width: 472px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-details .container {
        padding: 0 8px;
        width: auto
    }
}

.account-details__buttons-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 50px
}

@media screen and (max-width: 63.9375em) {
    .account-details__buttons-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
        background-color: white;
        z-index: 2
    }

        .account-details__buttons-container .btn {
            min-width: 0
        }
}

.account-details__button {
    width: calc(50% - 30px / 2);
    min-width: 0;
    margin: 0;
    border-radius: 99px;
    font-size: .8125rem;
    font-weight: bold
}

    .account-details__button.cta.primary {
        border: 1px solid #c8c8c8;
        padding: 15px
    }

@media screen and (max-width: 63.9375em) {
    .account-details__button {
        width: 50%;
        border-radius: 0;
        height: 100%
    }

        .account-details__button.btn {
            border: none;
            margin-left: 0
        }
}

.account-details__button--submit {
    color: #fff
}

    .account-details__button--submit:disabled {
        cursor: default;
        border-color: #c8c8c8;
        background-color: #c8c8c8
    }

        .account-details__button--submit:disabled:hover::after {
            animation: none;
            transition: none
        }

    .account-details__button--submit.cta.primary {
        border: 1px solid #70c624;
        background-color: #70c624
    }

        .account-details__button--submit.cta.primary::before {
            display: block;
            height: 9px
        }

    .account-details__button--submit::before {
        color: #fff
    }

.account-details__button::before {
    display: none
}

.account-details-state {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .account-details-state.active {
        opacity: 1;
        visibility: visible;
        transition-delay: 400ms
    }

.account-details__header {
    position: relative;
    width: 100%;
    margin-bottom: 35px
}

.account-details__title {
    position: absolute;
    top: -8px;
    right: 0;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    text-align: center;
    font-family: "Rooster",sans-serif;
    font-weight: bold;
    font-size: 1.875rem;
    line-height: 2.5rem
}

.rooster-toggle .account-details__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.account-details__back {
    z-index: 1;
    position: relative;
    top: -2px;
    background-color: transparent;
    border: none;
    padding: 0;
    color: #28343d;
    font-size: 1.125rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

    .account-details__back:hover {
        cursor: pointer
    }

    .account-details__back::before {
        background: url("/Media/arrow-left.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px;
        display: inline-block;
        position: relative;
        top: 6px;
        margin-right: 12px;
        background-size: contain;
        background-position: -4px center;
        background-repeat: no-repeat
    }

@media screen and (max-width: 63.9375em) {
    .account-details__back {
        top: 0
    }
}

@media screen and (max-width: 47.9375em) {
    .account-details__back {
        visibility: hidden
    }

        .account-details__back::before {
            visibility: visible;
            margin-right: 0
        }
}

.account-details--edit .account-details__panel {
    padding-top: 55px;
    padding-bottom: 60px
}

@media screen and (max-width: 63.9375em) {
    .account-details--edit .account-details__panel {
        padding-top: 33px;
        padding-bottom: 20px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-details--edit .account-details__panel {
        padding-top: 24px;
        padding-bottom: 12px
    }
}

.account-details__panel {
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    padding: 24px 40px;
    margin-bottom: 20px;
    width: 100%;
    position: relative
}

.account-details__panel-separator {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: #f1f1f1;
    margin: 20px 0
}

.account-details__panel-separator--full {
    margin: 40px 0;
    width: calc(100% + 40px * 2);
    position: relative;
    left: -40px
}

.account-details__panel-title {
    font-size: 1.25rem;
    padding-bottom: 17px;
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 25px
}

.account-details__panel h3 {
    font-weight: normal
}

.account-details__panel .online-account-banner {
    display: none
}

    .account-details__panel .online-account-banner.active {
        display: block
    }

@media screen and (max-width: 63.9375em) {
    .account-details__panel {
        padding: 16px 32px
    }

    .account-details__panel-separator--full {
        width: calc(100% + 32px * 2);
        left: -32px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-details__panel {
        padding: 16px 24px
    }

    .account-details__panel-separator--full {
        width: calc(100% + 24px * 2);
        left: -24px
    }
}

.account-details__panel--big {
    padding: 30px 40px
}

@media screen and (max-width: 63.9375em) {
    .account-details__panel--big {
        padding: 24px 32px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-details__panel--big {
        padding: 24px 24px
    }
}

.account-details__edit-button {
    position: absolute;
    right: 40px;
    width: 120px;
    height: 20px;
    background-color: #28343d;
    color: #fff;
    border-radius: 10px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .6875rem;
    letter-spacing: 2px;
    cursor: pointer
}

    .account-details__edit-button:disabled {
        cursor: default;
        background-color: #c8c8c8
    }

@media screen and (max-width: 47.9375em) {
    .account-details__edit-button {
        right: 24px
    }
}

.account-details__label {
    font-size: .9375rem
}

.account-details__label--strong {
    position: relative;
    font-weight: bold
}

    .account-details__label--strong > * {
        font-weight: initial
    }

.account-details__label--inline {
    display: inline-block
}

.account-details__label-group {
    margin-bottom: 30px
}

    .account-details__label-group:last-of-type {
        margin-bottom: 0
    }

.account-details__label:first-of-type:not(.account-details__label--strong) {
    margin-bottom: 8px
}

.account-details__info {
    position: absolute;
    top: 0;
    left: calc(100% + 5px)
}

.account-details__info-button {
    margin: -16px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background-color: transparent
}

    .account-details__info-button::after {
        content: "";
        width: 20px;
        height: 20px;
        margin: auto;
        color: white;
        background-image: url("/Media/credit-info.svg");
        background-size: 9px 13px;
        background-position: 6px;
        background-repeat: no-repeat;
        border-radius: 50%;
        background-color: #4a90e2;
        display: block;
        transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .account-details__info-button:hover {
        cursor: pointer
    }

        .account-details__info-button:hover::after {
            background-color: #3c7ece
        }

.account-details__info-close {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: none
}

    .account-details__info-close:before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        font-size: 11px
    }

.account-details__info-panel {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 320px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .account-details__info-panel.position-right, .account-details__info-panel.position-left {
        top: -10px
    }

        .account-details__info-panel.position-right .account-details__info-panel-arrow, .account-details__info-panel.position-left .account-details__info-panel-arrow {
            top: 10px
        }

        .account-details__info-panel.position-right.active, .account-details__info-panel.position-left.active {
            opacity: 1;
            visibility: visible
        }

    .account-details__info-panel.position-right {
        left: 15px
    }

        .account-details__info-panel.position-right .account-details__info-panel-card {
            float: right;
            padding: 10px 40px 10px 30px
        }

        .account-details__info-panel.position-right .account-details__info-panel-arrow {
            left: 5px;
            box-shadow: -2px -2px 3px 0 rgba(0,0,0,0.05)
        }

    .account-details__info-panel.position-left {
        right: 15px
    }

        .account-details__info-panel.position-left .account-details__info-panel-card {
            float: left;
            padding: 10px 30px 10px 40px
        }

        .account-details__info-panel.position-left .account-details__info-panel-arrow {
            right: 5px;
            box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.05)
        }

    .account-details__info-panel.position-top .account-details__info-panel-card, .account-details__info-panel.position-bottom .account-details__info-panel-card {
        float: none;
        padding: 10px 40px 10px 40px;
        width: 320px;
        margin: 0 auto
    }

    .account-details__info-panel.position-top.active, .account-details__info-panel.position-bottom.active {
        opacity: 1;
        visibility: visible
    }

    .account-details__info-panel.position-top {
        bottom: calc(100% + 15px)
    }

        .account-details__info-panel.position-top .account-details__info-panel-arrow {
            bottom: calc(-15px / 2);
            box-shadow: -2px 2px 3px 0 rgba(0,0,0,0.05)
        }

    .account-details__info-panel.position-bottom {
        top: calc(100% - 5px)
    }

        .account-details__info-panel.position-bottom .account-details__info-panel-arrow {
            top: calc(-15px / 2);
            box-shadow: 2px -2px 3px 0 rgba(0,0,0,0.05)
        }

.account-details__info-panel-card {
    float: right;
    width: calc(100% - 10px);
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)
}

.account-details__info-panel-arrow {
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: #fff;
    transform: rotate(-45deg)
}

.account-details__info-content {
    font-weight: normal
}

.account-details--submit .svg-icon {
    display: block;
    margin: 0 auto 20px;
    height: 60px;
    width: 60px
}

    .account-details--submit .svg-icon svg {
        display: block;
        height: 100%;
        width: 100%
    }

.account-details--submit.modal-overlay {
    position: fixed;
    padding: 0;
    background-color: transparent;
    background-color: rgba(0,0,0,0.2)
}

@media screen and (max-width: 63.9375em) {
    .account-details__title {
        top: -2px;
        font-size: 1.5625rem;
        line-height: 2.18rem
    }

    .account-details__back::before {
        margin-right: 5px
    }
}

.account-form__input-field {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border: 1px solid #c8c8c8;
    background-color: #f9f9f9;
    font-size: .9375rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    padding: 15px 10px;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .account-form__input-field::-webkit-input-placeholder {
        color: #c8c8c8
    }

    .account-form__input-field::-moz-placeholder {
        color: #c8c8c8
    }

    .account-form__input-field:-ms-input-placeholder {
        color: #c8c8c8
    }

    .account-form__input-field:-moz-placeholder {
        color: #c8c8c8
    }

.account-form__input-field-label {
    color: #28343d;
    font-size: .9375rem;
    margin-bottom: 5px
}

.account-form__input-field:focus {
    outline: none;
    border: 1px solid #28343d
}

.account-form__input-field--error {
    border-left: 2px solid #c20016
}

    .account-form__input-field--error:focus {
        border-left: 2px solid #c20016
    }

.account-form__input-field-error-message {
    display: none;
    margin: 5px 0;
    font-size: .8125rem;
    color: #c20016
}

    .account-form__input-field-error-message.active {
        display: block
    }

@media screen and (max-width: 47.9375em) {
    .account-form__input-field {
        font-size: 1rem
    }
}



.account-form__field-button {
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: .6875rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase
}

    .account-form__field-button:focus {
        outline: none
    }

.account-form__field-button-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: auto 0;
    margin-right: 7px;
    margin-left: 15px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

    .account-form__field-button-icon:focus {
        outline: none
    }

.account-form__field-button-icon--add {
    background-image: url(/Media/add-telephone.svg)
}

.account-form__field-button-icon--remove {
    background-image: url(/Media/remove-telephone.svg)
}

.account-form__field-button--add {
    color: #70c624
}

.account-form__field-button--remove {
    color: #c20016
}

.account-form__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 27px
}

.account-form__row--additional {
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-align: start;
    align-items: flex-start
}

    .account-form__row--additional > .account-form__column {
        margin-top: 20px
    }

@media screen and (max-width: 63.9375em) {
    .account-form__row--additional > .account-form__column {
        margin-top: 16px
    }
}

.account-form__row--additional > .account-form__column:first-child {
    margin-top: 0
}

@media screen and (max-width: 47.9375em) {
    .account-form__row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .account-form__row > .account-form__column.column-mobile-house-number.column-one {
            width: 120px
        }

        .account-form__row > .account-form__column.column-mobile-full.column-two, .account-form__row > .account-form__column.column-mobile-full.column-three {
            width: 100%;
            margin-top: 20px
        }

        .account-form__row > .account-form__column.column-mobile-postcode.column-two {
            width: 200px
        }
}

.account-form__row > .account-form__column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.account-form__row > .account-form__column--hidden {
    display: none
}

.account-form__row > .account-form__column--button {
    -ms-flex-flow: row-reverse nowrap;
    flex-flow: row-reverse nowrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
    transition: all 0ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .account-form__row > .account-form__column--button.animate {
        opacity: 0;
        visibility: hidden
    }

    .account-form__row > .account-form__column--button.animate--remove {
        opacity: 1;
        visibility: visible
    }

    .account-form__row > .account-form__column--button.animated {
        opacity: 1;
        visibility: visible
    }

    .account-form__row > .account-form__column--button.animated--remove {
        opacity: 0;
        visibility: hidden
    }

.account-form__row > .account-form__column--phone {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

    .account-form__row > .account-form__column--phone .account-form__column {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

        .account-form__row > .account-form__column--phone .account-form__column .custom-selectbox-wrap {
            width: 100%
        }

@media screen and (max-width: 47.9375em) {
    .account-form__row > .account-form__column--phone {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .account-form__row > .account-form__column--phone .column-mobile-full {
            margin-top: 10px
        }

            .account-form__row > .account-form__column--phone .column-mobile-full:first-of-type {
                margin-top: 0
            }
}

.account-form__row > .account-form__column.column-one {
    width: calc((100% / 4) * 1 - 20px / 2)
}

.account-form__row > .account-form__column.column-two {
    width: calc((100% / 4) * 2 - 20px / 2)
}

.account-form__row > .account-form__column.column-three {
    width: calc((100% / 4) * 3 - 20px / 2)
}

.account-form__row > .account-form__column.column-four {
    width: calc((100% / 4) * 4)
}

.account-form__row--thirds {
    padding-bottom: 20px;
    border-bottom: 1px dashed #c8c8c8
}

    .account-form__row--thirds.animate {
        padding-bottom: 0
    }

    .account-form__row--thirds.animate--remove {
        padding-bottom: 20px
    }

    .account-form__row--thirds.animated {
        padding-bottom: 20px
    }

    .account-form__row--thirds.animated--remove {
        padding-bottom: 0
    }

    .account-form__row--thirds:last-of-type {
        border-bottom: 1px solid #c8c8c8
    }

    .account-form__row--thirds .account-form__row {
        margin: 0
    }

    .account-form__row--thirds > .account-form__column.column-one {
        width: calc((100% / 3) * 1 - 16px / 2)
    }

    .account-form__row--thirds > .account-form__column.column-two {
        width: calc((100% / 3) * 2 - 16px / 2)
    }

    .account-form__row--thirds > .account-form__column.column-three {
        width: calc((100% / 3) * 3)
    }

.account-form__row--has-error .account-form__column--button {
    padding-top: 25px
}

@media screen and (max-width: 47.9375em) {
    .account-form__row--has-error .account-form__column--button {
        padding-top: 0
    }
}

.account-form__row.animate {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    transition: all 300ms cubic-bezier(0.2, 0, 0.2, 1)
}

.account-form__row.animate--remove {
    opacity: 1;
    max-height: 100vh;
    margin-bottom: 27px;
    overflow: hidden;
    transition: all 300ms cubic-bezier(0.2, 0, 0.2, 1)
}

.account-form__row.animated {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    margin-bottom: 27px
}

.account-form__row.animated--remove {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0
}

.account-form__add {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    text-decoration: underline;
    font-size: .8125rem;
    color: #4a90e2
}

@media screen and (max-width: 63.9375em) {
    .account-form__add {
        margin-top: 6px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-form__add {
        margin-top: 14px
    }
}

.account-form__add:hover {
    cursor: pointer
}

.account-form__add--hidden {
    display: none
}

.account-form__add:before {
    background: url("/Media/plus.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px;
    display: inline-block
}



    .account-form .account-form__column .account-form__select-field[data-native-select="true"] {
        display: none
    }

@media screen and (max-width: 47.9375em) {
    .account-form .account-form__column .account-form__select-field[data-native-select="true"] {
        position: absolute;
        width: 100%;
        z-index: 3;
        display: block;
        opacity: 0;
        font-size: 1rem
    }
}

.account-form .account-form__column .account-form__select-field::-ms-expand {
    display: none
}

.account-form .account-form__column .account-form__select-field.changed {
    color: #28343d
}

.account-form .account-form__column .account-form__select-field option {
    color: #28343d
}

    .account-form .account-form__column .account-form__select-field option:disabled {
        display: none
    }

.account-form .account-form__column .custom-selectbox .selectbox-label {
    width: 100%;
    height: 40px;
    padding: 10px;
    background-color: #f9f9f9;
    color: #28343d;
    font-size: .9375rem;
    border: 1px solid #c8c8c8;
    border-bottom: none;
    box-sizing: border-box;
    background-image: url(/Media/arrow-up-select.svg),linear-gradient(to right, #f9f9f9, #f9f9f9);
    background-position: calc(100% - 10px),100%;
    background-size: 30px 70%, contain;
    background-repeat: no-repeat
}

    .account-form .account-form__column .custom-selectbox .selectbox-label::after {
        content: none
    }

@media screen and (max-width: 47.9375em) {
    .account-form .account-form__column .custom-selectbox .selectbox-label {
        font-size: 1rem
    }
}

.account-form .account-form__column .custom-selectbox.default-state .selectbox-label {
    border-bottom: 1px solid #c8c8c8;
    background-image: url(/Media/arrow-down-select.svg),linear-gradient(to right, #f9f9f9, #f9f9f9)
}

.account-form .account-form__column .custom-selectbox .options-wrap {
    position: absolute;
    border: 1px solid #c8c8c8;
    border-top: none;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 4
}

    .account-form .account-form__column .custom-selectbox .options-wrap ul {
        list-style-type: none;
        margin: 0
    }

.account-form .account-form__column--error .custom-selectbox .selectbox-label {
    border-left: 2px solid #c20016
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content {
    -ms-flex-align: center;
    align-items: center;
    max-width: 790px;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 36px 102px;
    text-align: center
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content-title {
    line-height: 1.56rem;
    margin-bottom: 7px
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content-text {
    width: 100%
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content, .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content p {
    font-weight: normal;
    line-height: 1.56rem
}

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content {
        max-width: 472px;
        padding: 32px 32px 14px
    }

    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content-title {
        font-size: 1.125rem;
        line-height: 1.25rem
    }

    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content, .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content p {
        font-size: .8125rem;
        line-height: 1.25rem
    }
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__content {
        max-width: calc(100% - 32px);
        padding: 32px 32px 12px
    }
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__icon {
    display: block;
    height: 60px;
    margin-bottom: 19px;
    width: 60px
}

    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__icon svg {
        height: 100%;
        width: 100%
    }

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__icon {
        height: 40px;
        width: 40px;
        margin-bottom: 13px
    }
}

.modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 16px
}

    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container .btn {
        min-width: auto;
        width: 100%;
        margin: 0 16px
    }

        .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container .btn:first-child {
            margin-left: 0
        }

        .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container .btn:last-child {
            margin-right: 0
        }

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin: 17px auto 0;
        max-width: 100%;
        width: 100%
    }

        .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container .btn {
            max-width: 100%;
            min-width: 0;
            width: 100%
        }

            .modal-overlay[data-modal-id="account-details-modal"] .modal-overlay__button-container .btn + .btn {
                margin-bottom: 4px;
                margin-left: 0
            }
}

.statements-listing {
    margin: 50px 0
}

.statements-listing__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.statements-listing__results {
    margin-bottom: 31px;
    padding: 0 20px;
    text-align: center;
    font-size: 20px
}

.statements-listing__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 27px
}

@media screen and (max-width: 47.9375em) {
    .statements-listing__list {
        margin-bottom: 40px
    }
}

.statements-listing__item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 38px 40px 35px;
    margin: 0 28px 28px 0;
    width: calc(25% - 21px);
    max-width: 278px;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    box-sizing: border-box
}

    .statements-listing__item:nth-child(4n+4) {
        margin-right: 0
    }

.statements-listing__item--unavailable {
    padding: 30px 27px
}

    .statements-listing__item--unavailable .statements-listing__issued {
        margin: 20px 0 30px;
        max-width: 100%
    }

.statements-listing__item--checked .statements-listing__download-btn {
    background-color: #1f242f
}

    .statements-listing__item--checked .statements-listing__download-btn.btn {
        min-width: 0
    }

    .statements-listing__item--checked .statements-listing__download-btn:after {
        content: '';
        background: url("/Media/check-dark.svg") no-repeat center center #fff;
        background-size: 15px;
        display: inline-block;
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 50%;
        margin-left: auto
    }

@media screen and (max-width: 63.9375em) {
    .statements-listing__item {
        width: calc(25% - 10px);
        padding: 23px 11px;
        margin: 0 13px 13px 0
    }
}

@media screen and (max-width: 47.9375em) {
    .statements-listing__item {
        width: calc(50% - 7px);
        max-width: initial
    }

        .statements-listing__item:nth-child(4n+4) {
            margin-right: 13px
        }

        .statements-listing__item:nth-child(even) {
            margin-right: 0
        }
}

.statements-listing__amount {
    font-family: "Rooster",sans-serif;
    font-size: 1.875rem;
    font-weight: 700
}

.rooster-toggle .statements-listing__amount {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__amount {
        font-size: 1.5625rem
    }
}

.statements-listing__issued {
    margin-bottom: auto;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__issued {
        font-size: .8125rem
    }
}

.statements-listing__view {
    margin: auto 0 23px 0;
    font-size: .8125rem;
    color: #4a90e2;
    text-decoration: underline
}

.statements-listing__download-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
    min-height: 34px;
    padding: 8px;
    border: none;
    border-radius: 24px;
    color: #fff;
    background: #28343d;
    cursor: pointer;
    font-family: "Rooster",sans-serif;
    font-size: .6875rem;
    line-height: 0.996rem;
    letter-spacing: 2px;
    text-transform: uppercase
}

.rooster-toggle .statements-listing__download-btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.statements-listing__btn-text {
    margin: auto;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.statements-listing__download {
    width: 100%;
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    background: #28343d;
    transition: transform 400ms
}

.statements-listing__btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 110px;
    margin-left: 18px;
    border-radius: 50px;
    background: #70c624;
    border: none;
    font-size: .8125rem;
    text-transform: uppercase;
    color: #fff;
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2.4px
}

.statements-listing__btn--disabled {
    background: #c8c8c8
}

.rooster-toggle .statements-listing__btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.statements-listing__btn svg {
    margin-right: 10px
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__btn {
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        margin: 0;
        min-height: 60px;
        border-radius: 0;
        padding: 13px 0
    }
}

.statements-listing__deselect {
    padding: 13px 70px;
    color: #28343d;
    background: #fff
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__deselect {
        padding: 13px 0
    }
}

.statements-listing__label--hidden {
    display: none
}

.statements-listing__actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 26px 20px;
    box-sizing: content-box
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__actions {
        max-width: 100%;
        padding: 0;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)
    }
}

.statements-listing__counter {
    display: none;
    margin-left: 5px
}

.statements-listing__limit {
    max-width: 585px;
    text-align: center
}

.statements-listing__limit-title {
    margin-bottom: 3px;
    font-size: 1.5rem;
    font-family: "Rooster",sans-serif
}

.rooster-toggle .statements-listing__limit-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__limit-title {
        font-size: 1.25rem
    }
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__limit {
        max-width: 348px
    }
}

@media screen and (max-width: 47.9375em) {
    .statements-listing__limit {
        max-width: 312px
    }
}

.statements-listing__info {
    margin-bottom: 32px
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__info {
        margin-bottom: 21px;
        font-size: .8125rem
    }
}

.statements-listing__contact {
    font-family: "Rooster",sans-serif;
    font-weight: 700
}

.rooster-toggle .statements-listing__contact {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.statements-listing__contact svg {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__contact {
        font-size: .8125rem
    }
}

@media screen and (max-width: 47.9375em) {
    .statements-listing__contact {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        max-width: 318px;
        border-radius: 24px;
        padding: 6px;
        margin: 12px auto 16px;
        text-align: center;
        border: solid 1px #c8c8c8;
        font-size: .6875rem;
        text-transform: uppercase;
        letter-spacing: 2px
    }

        .statements-listing__contact svg {
            display: inline-block;
            margin-right: 9px
        }
}

.statements-listing__mail {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 318px;
    border-radius: 24px;
    padding: 6px;
    margin: 12px auto;
    text-align: center;
    border: solid 1px #c8c8c8;
    font-size: .6875rem;
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px
}

.rooster-toggle .statements-listing__mail {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.statements-listing__mail svg {
    margin-right: 9px
}

.statements-listing .calendar-icon {
    margin-bottom: 15px
}

@media screen and (max-width: 63.9375em) {
    .statements-listing__download-form {
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%
    }

        .statements-listing__download-form .statements-listing__btn {
            width: 100%
        }
}

.account-contacts {
    display: -ms-flexbox;
    display: flex;
    margin: 100px 0;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "Rooster",sans-serif;
    font-size: .9375rem
}

.account-contacts__header {
    width: 100%;
    max-width: 586px;
    margin-bottom: 26px;
    padding: 0 90px;
    position: relative;
    text-align: center;
    box-sizing: border-box
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__header {
        max-width: 472px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__header {
        padding: 0 30px;
        margin-bottom: 14px
    }
}

.account-contacts__back {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 11px;
    left: 0;
    font-size: 1.125rem;
    font-weight: bold
}

    .account-contacts__back:before {
        background: url("/Media/arrow-left.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px;
        margin-right: 13px
    }

@media screen and (max-width: 47.9375em) {
    .account-contacts__back-text {
        display: none
    }
}

.account-contacts__inner {
    width: 100%;
    max-width: 586px;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    background: #fff;
    box-sizing: border-box
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__inner {
        max-width: 472px;
        padding: 34px 32px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__inner {
        padding: 27px 25px
    }
}

.account-contacts__title {
    font-family: "Rooster",sans-serif;
    font-size: 1.875rem
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__title {
        font-size: 1.5625rem
    }
}

.account-contacts__lines {
    margin-bottom: 10px
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__lines {
        max-width: 270px;
        font-size: .8125rem
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__lines {
        max-width: 100%
    }
}

.account-contacts__section-title {
    padding-bottom: 17px;
    margin-bottom: 21px;
    border-bottom: 1px solid #c8c8c8;
    font-size: 1.25rem
}

.rooster-toggle .account-contacts__section-title {
    font-weight: normal
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__section-title {
        padding-bottom: 9px;
        margin-bottom: 12px
    }
}

.account-contacts__info {
    margin-bottom: 23px
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__info {
        margin-bottom: 19px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__info {
        margin-bottom: 16px
    }
}

.account-contacts__link {
    font-size: .8125rem;
    color: #4a90e2;
    text-decoration: underline
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__link {
        margin-bottom: 5px
    }
}

.account-contacts__list {
    margin: 5px 0 0 0;
    list-style-type: none;
    font-weight: bold
}

.account-contacts__item {
    display: -ms-flexbox;
    display: flex
}

.account-contacts__item-info {
    -ms-flex-preferred-size: 135px;
    flex-basis: 135px;
    margin-right: auto
}

    .account-contacts__item-info:last-child {
        margin-right: 0;
        min-width: 135px
    }

@media screen and (max-width: 63.9375em) {
    .account-contacts__item-info {
        line-height: 19px
    }
}

.account-contacts__ctas {
    margin: 24px 0 37px
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__ctas {
        margin: 19px 0 29px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__ctas {
        margin: 16px 0 22px
    }
}

.account-contacts__hours {
    padding-top: 32px;
    border-top: solid 1px #c8c8c8
}

@media screen and (max-width: 63.9375em) {
    .account-contacts__hours {
        padding-top: 20px
    }
}

.account-contacts__btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 318px;
    border-radius: 24px;
    padding: 6px;
    margin-bottom: 17px;
    text-align: center;
    border: solid 1px #c8c8c8;
    font-size: .6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px
}

    .account-contacts__btn svg {
        margin-right: 9px
    }

@media screen and (max-width: 63.9375em) {
    .account-contacts__btn {
        margin-bottom: 25px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-contacts__btn {
        margin-bottom: 14px
    }
}

.account-contacts__icon {
    height: 20px
}

.account-contacts__el--bold {
    font-weight: bold
}

@media screen and (max-width: 47.9375em) {
    .account-contacts {
        margin: 100px 10px
    }
}

.account-summary {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    background-color: #28343d;
    color: #fff
}

.account-summary--transactions-banner {
    padding: 30px;
    height: 180px;
    min-height: 180px;
    border-radius: 5px;
    overflow: hidden
}

@media screen and (max-width: 63.9375em) {
    .account-summary--transactions-banner {
        height: 240px
    }
}

.account-summary--account-overview {
    padding: 20px 40px;
    min-height: 230px
}

    .account-summary--account-overview .account-summary__credit-panel {
        padding: 30px 0 40px
    }

@media screen and (max-width: 63.9375em) {
    .account-summary--account-overview {
        height: 208px;
        min-height: 208px;
        padding: 20px 16px 20px 26px
    }
}

.account-summary--login-panel {
    width: 630px;
    height: 100%;
    padding: 30px;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center
}

    .account-summary--login-panel .account-summary__credit-panel {
        -ms-flex-positive: initial;
        flex-grow: initial;
        -ms-flex-preferred-size: 134px;
        flex-basis: 134px
    }

@media screen and (min-width: 1024px) and (max-width: 1075px) {
    .account-summary--login-panel {
        width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .account-summary--login-panel {
        width: 100%;
        padding: 15px
    }
}

@media screen and (max-width: 63.9375em) {
    .account-summary--account-overview .account-summary__notification-panel .btn {
        margin-top: 14px
    }

    .account-summary--account-overview .account-summary__credit-panel {
        padding: 10px 0;
        min-height: 140px
    }

    .account-summary--account-overview .account-summary__credit-column {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap
    }
}

@media screen and (max-width: 63.9375em) and (max-width: 63.9375em) {
    .account-summary--account-overview .account-summary__credit-column:first-of-type {
        padding-bottom: 5px;
        -ms-flex: none;
        flex: none;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media screen and (max-width: 63.9375em) and (max-width: 47.9375em) {
    .account-summary--account-overview .account-summary__credit-column:first-of-type {
        -ms-flex: 1;
        flex: 1;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

@media screen and (max-width: 63.9375em) {
    .account-summary--account-overview .account-summary__credit-column:last-of-type {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

@media screen and (max-width: 63.9375em) and (max-width: 63.9375em) {
    .account-summary--account-overview .account-summary__notification-panel--overdue .account-summary__credit-amount {
        margin-top: 5px;
        font-weight: normal;
        font-size: 1.5625rem
    }
}

@media screen and (max-width: 63.9375em) {
    .account-summary--account-overview .account-summary__credit-amount {
        margin-top: 3px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-summary {
        padding: 8px
    }

    .account-summary--account-overview {
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        height: auto;
        min-height: 0
    }

        .account-summary--account-overview .account-summary__credit-panel {
            padding: 13px 5px;
            min-height: 130px
        }

        .account-summary--account-overview .account-summary__notification-panel {
            padding: 20px 8px 8px
        }

            .account-summary--account-overview .account-summary__notification-panel .btn {
                margin-top: 20px
            }

        .account-summary--account-overview .account-summary__credit-group--main .account-summary__credit-amount {
            margin-top: 0
        }
}

.account-summary__credit-panel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media screen and (max-width: 63.9375em) {
    .account-summary__credit-panel {
        min-height: 180px
    }
}

.account-summary__credit-column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
}

    .account-summary__credit-column:first-of-type {
        border-right: 1px dashed #7f95a6
    }

    .account-summary__credit-column:last-of-type {
        border-left: 1px dashed #000
    }

.account-summary__credit-group {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap
}

.account-summary__credit-group-wrap-text {
    white-space: normal
}

.account-summary__credit-title {
    font-size: .9375rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.account-summary__credit-title--has-info {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.account-summary__credit-button {
    margin: -28px;
    margin-left: -7px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background-color: transparent
}

    .account-summary__credit-button::after {
        content: "";
        width: 20px;
        height: 20px;
        margin: auto;
        color: white;
        background-image: url("/Media/credit-info.svg");
        background-size: 9px 13px;
        background-position: 6px;
        background-repeat: no-repeat;
        border-radius: 50%;
        background-color: #4a90e2;
        display: block;
        transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .account-summary__credit-button:hover {
        cursor: pointer
    }

        .account-summary__credit-button:hover::after {
            background-color: #3c7ece
        }

.account-summary__credit-amount {
    font-size: 1.875rem;
    font-weight: normal
}

.account-summary__credit-group--main .account-summary__credit-amount {
    font-size: 2.5rem;
    font-weight: bold
}

.account-summary__credit-info-panel {
    position: absolute;
    background-color: #28343d;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9, 0.9);
    transition: opacity 200ms cubic-bezier(0.2, 0, 0.2, 1),visibility 200ms cubic-bezier(0.2, 0, 0.2, 1),transform 0ms cubic-bezier(0.2, 0, 0.2, 1) 200ms
}

    .account-summary__credit-info-panel .btn {
        width: 238px;
        margin: 0 auto
    }

    .account-summary__credit-info-panel.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1, 1);
        transition: opacity 300ms cubic-bezier(0.2, 0, 0.2, 1),visibility 300ms cubic-bezier(0.2, 0, 0.2, 1),transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
        z-index: 1
    }

.account-summary__credit-info-content {
    display: none
}

    .account-summary__credit-info-content.active {
        display: block
    }

.account-summary__credit-info-close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: url("/Media/close-info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 0;
    transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .account-summary__credit-info-close:hover {
        cursor: pointer
    }

.account-summary__credit-info-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 15px
}

.account-summary__credit-info-copy {
    font-size: .9375rem;
    margin-bottom: 30px
}

.account-summary__credit-info-title, .account-summary__credit-info-copy {
    max-width: calc(100% - 30px * 2);
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 63.9375em) {
    .account-summary__credit-panel {
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap
    }

    .account-summary__credit-column {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap
    }

        .account-summary__credit-column:first-of-type {
            border-right: none;
            border-bottom: 1px dashed #000
        }

        .account-summary__credit-column:last-of-type {
            border-left: none;
            border-top: 1px dashed #7f95a6
        }

    .account-summary--login-panel .account-summary__credit-group--main {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-align: center;
        align-items: center
    }
}

@media screen and (max-width: 47.9375em) {
    .account-summary__credit-group--main {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-align: center;
        align-items: center
    }

    .account-summary__credit-title {
        font-size: .8125rem;
        margin-bottom: 5px
    }

    .account-summary__credit-group--main .account-summary__credit-title {
        font-size: .9375rem;
        margin-bottom: 0
    }

    .account-summary__credit-amount {
        font-size: 1.5625rem
    }

    .account-summary__credit-group--main .account-summary__credit-amount {
        font-size: 2.1875rem
    }
}

.account-summary__notification-panel {
    padding: 0 50px;
    background-color: #000;
    width: 50%;
    max-width: 480px;
    box-sizing: border-box;
    text-align: center;
    font-size: .9375rem;
    font-weight: bold;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center
}

    .account-summary__notification-panel .btn {
        width: 100%;
        margin-top: 30px;
        box-sizing: border-box
    }

@media screen and (max-width: 47.9375em) {
    .account-summary__notification-panel .btn {
        margin-top: 15px
    }
}

.account-summary__notification-panel--overdue {
    background-color: #980001
}

    .account-summary__notification-panel--overdue .account-summary__credit-amount {
        font-weight: bold
    }

.account-summary--login-panel .account-summary__notification-panel {
    margin-left: 0;
    margin-top: auto;
    padding: 24px;
    width: 100%;
    max-width: 100%;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center
}

    .account-summary--login-panel .account-summary__notification-panel .btn {
        margin-top: 0;
        width: auto;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 310px;
        min-width: 240px
    }

    .account-summary--login-panel .account-summary__notification-panel .account-summary__credit-amount {
        font-weight: normal
    }

.account-summary--login-panel .account-summary__notification-panel--overdue .calendar-icon {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .account-summary--login-panel .account-summary__notification-panel {
        margin-top: 10px;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap
    }

        .account-summary--login-panel .account-summary__notification-panel .btn {
            margin-top: 20px;
            max-width: 100%
        }

        .account-summary--login-panel .account-summary__notification-panel .calendar-icon {
            display: -ms-flexbox;
            display: flex
        }
}

@media screen and (max-width: 63.9375em) {
    .account-summary__notification-panel {
        margin-left: 30px;
        padding: 0 24px
    }
}

@media screen and (max-width: 47.9375em) {
    .account-summary__notification-panel {
        margin-left: 0;
        padding: 8px;
        width: 100%;
        max-width: 100%
    }
}

.account-summary__notification-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.account-summary--login-panel .account-summary__notification-container {
    -ms-flex-positive: 1;
    flex-grow: 1
}

.account-summary--login-panel .account-summary__notification-container--margined {
    margin-right: 25px
}

@media screen and (max-width: 63.9375em) {
    .account-summary--login-panel .account-summary__notification-container--margined {
        margin-right: 0
    }
}

.account-summary__notification-container .calendar-icon {
    margin-right: 25px;
    z-index: 0
}

.account-summary__account-unavailable-panel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    background-color: #28343d;
    padding: 40px;
    width: 100%;
    box-sizing: border-box
}

@media screen and (max-width: 47.9375em) {
    .account-summary__account-unavailable-panel {
        padding: 24px 16px;
        width: auto
    }
}

.account-summary__account-unavailable-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 17px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.account-summary__account-unavailable-title, .account-summary__account-unavailable-info {
    font-size: .9375rem;
    max-width: 600px
}

@media screen and (max-width: 47.9375em) {
    .account-summary__account-unavailable-title, .account-summary__account-unavailable-info {
        font-size: .8125rem;
        width: 100%;
        max-width: 100%
    }
}

.account-summary__account-unavailable-info .account-summary__account-unavailable-telephone-link {
    display: block;
    font-size: 1.125rem;
    font-weight: bold;
    color: #fff;
    margin-top: 3px
}

@media screen and (max-width: 47.9375em) {
    .account-summary__account-unavailable-info .account-summary__account-unavailable-telephone-link {
        font-size: .8125rem;
        color: #28343d;
        padding: 15px 0 17px;
        margin-top: 20px;
        background-color: white;
        width: 100%;
        white-space: nowrap;
        border-radius: 99px
    }
}

.account-summary .btn {
    min-width: 0;
    white-space: nowrap
}

    .account-summary .btn:disabled {
        background-color: #c8c8c8;
        border-color: #c8c8c8
    }

        .account-summary .btn:disabled:hover {
            background-color: #c8c8c8;
            border-color: #c8c8c8
        }

.transactions-pagination {
    display: -ms-flexbox;
    display: flex;
    margin: 50px 0;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    font-family: "Rooster",sans-serif;
    text-align: center
}

.transactions-pagination__items {
    margin: auto;
    font-size: .9375rem
}

@media screen and (max-width: 63.9375em) {
    .transactions-pagination__items {
        font-size: .8125rem
    }
}

.transactions-pagination__progress-bar {
    width: 100%;
    max-width: 230px;
    height: 5px;
    margin: 14px auto 26px;
    background: #d8d8d8;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2);
    border-radius: 2px
}

@media screen and (max-width: 63.9375em) {
    .transactions-pagination__progress-bar {
        margin: 11px auto 30px
    }
}

.transactions-pagination__bar-inner {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #7ed321;
    transition: all 0.3s linear
}

.transactions-pagination__more {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 17px;
    border-radius: 24px;
    color: #fff;
    background: #28343d;
    font-size: .8125rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

    .transactions-pagination__more:hover {
        background-color: #1f242f
    }

        .transactions-pagination__more:hover::after {
            animation-duration: 0.5s;
            animation-name: cta-arrow-inline;
            animation-timing-function: ease-in-out
        }

    .transactions-pagination__more:after {
        background: url("/Media/button-arrow-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        display: inline-block;
        height: 10px;
        width: 10px;
        margin-left: 14px
    }

    .transactions-pagination__more.js-more-loading {
        font-size: 0;
        color: transparent;
        text-indent: -999rem
    }

        .transactions-pagination__more.js-more-loading:disabled {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .transactions-pagination__more.js-more-loading:disabled:hover {
                background-color: #70c624
            }

        .transactions-pagination__more.js-more-loading:hover {
            animation: 0
        }

        .transactions-pagination__more.js-more-loading::before {
            background: url("/Media/loader.svg") no-repeat center center transparent;
            background-size: contain;
            content: "";
            display: block;
            height: 24px;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 24px
        }

@media screen and (max-width: 63.9375em) {
    .transactions-pagination__more {
        max-width: 343px
    }
}

@media screen and (max-width: 63.9375em) {
    .transactions-pagination {
        padding: 0 8px
    }
}

.submit-confirmation {
    padding-bottom: 100px
}

.submit-confirmation__btn-container {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 40px;
    margin-top: 1px;
    box-sizing: border-box
}

.submit-confirmation__btn {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: auto
}

.online-account-banner {
    position: relative;
    width: 100%;
    background-color: #fffdd2;
    border-top: 4px solid #fbb10f;
    padding: 27px 45px 39px 90px;
    margin-bottom: 19px
}

    .online-account-banner *, .online-account-banner {
        box-sizing: border-box
    }

        .online-account-banner::after {
            content: "";
            position: absolute;
            top: 26px;
            left: 31px;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat
        }

.online-account-banner--warning {
    background-color: #fffdd2;
    border-top: 4px solid #fbb10f
}

    .online-account-banner--warning::after {
        background-image: url("/Media/warning-yellow.svg")
    }

.online-account-banner--success {
    background-color: #ecfddc;
    border-top: 4px solid #7fcb05
}

    .online-account-banner--success::after {
        background-image: url("/Media/success.svg")
    }

.online-account-banner--error {
    display: -ms-flexbox;
    display: flex;
    background-color: #fcf2f3;
    border-top: 4px solid #c20016
}

    .online-account-banner--error::after {
        background-image: url("/Media/error.svg")
    }

.online-account-banner__inner {
    width: 100%;
    display: -ms-flexbox;
    display: flex
}

.online-account-banner__dismiss {
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: .6875rem;
    text-transform: uppercase
}

.rooster-toggle .online-account-banner__dismiss {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .online-account-banner {
        padding: 27px 13px 30px 72px
    }

        .online-account-banner::after {
            left: 24px
        }
}

@media screen and (max-width: 47.9375em) {
    .online-account-banner {
        padding: 27px 35px 26px 72px
    }
}

.online-account-banner__title {
    font-family: "Rooster",sans-serif;
    font-weight: 700;
    font-size: 1.25rem
}

.rooster-toggle .online-account-banner__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .online-account-banner__title {
        font-size: 1.125rem;
        line-height: 1.23rem
    }
}

.online-account-banner__content {
    font-family: "Rooster",sans-serif;
    font-weight: normal;
    font-size: .9375rem;
    line-height: 1.56rem
}

    .online-account-banner__content > p {
        margin-top: 25px
    }

        .online-account-banner__content > p:first-child {
            margin-top: 0
        }

@media screen and (max-width: 47.9375em) {
    .online-account-banner__content > p {
        margin-top: 17px
    }
}

.rooster-toggle .online-account-banner__content {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

@media screen and (max-width: 63.9375em) {
    .online-account-banner__content {
        font-size: .8125rem;
        line-height: 1.26rem
    }
}

.flex-table * {
    box-sizing: border-box
}

.flex-table__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: baseline;
    align-items: baseline;
    position: relative
}

.flex-table__col {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 20px 25px 22px 0
}

.flex-table__col-three {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    .flex-table__col-three .flex-table__cell:last-child {
        padding-right: 0;
        text-align: right;
        -ms-flex-item-align: end;
        align-self: flex-end
    }

.flex-table__col-lead {
    -ms-flex-preferred-size: 57%;
    flex-basis: 57%;
    padding-right: 10px;
    padding-left: 36px
}

    .flex-table__col-lead + .flex-table__col {
        -ms-flex-preferred-size: 43%;
        flex-basis: 43%;
        padding-right: 16px;
        max-width: 43%
    }

.flex-table__cell {
    word-break: break-word
}

    .flex-table__cell.nowrap {
        white-space: nowrap
    }

        .flex-table__cell.nowrap .flex-table__cell-label {
            display: inline-block
        }

.flex-table__cell-first {
    text-align: left;
    padding-left: 24px
}

.flex-table__cell-second {
    -ms-flex-preferred-size: 23.33%;
    flex-basis: 23.33%;
    text-align: center
}

.flex-table__cell-third {
    -ms-flex-preferred-size: 41.33%;
    flex-basis: 41.33%;
    text-align: right;
    white-space: nowrap
}

.flex-table__cell-label {
    font-size: 1.25rem;
    line-height: 2.187rem
}

    .flex-table__cell-label.nowrap {
        white-space: nowrap
    }

.flex-table__cell-label-bold {
    font-weight: bold
}

.rooster-toggle .flex-table__cell-label-bold {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.flex-table__cell-label.green {
    color: #7ed321
}

.flex-table__cell-label-sm {
    font-size: .9375rem;
    line-height: 1.4rem;
    white-space: nowrap
}

.flex-table__cell-error-msg {
    display: none;
    width: 100%;
    font-size: .8125rem;
    line-height: 1rem;
    font-weight: normal;
    color: #c20016;
    white-space: normal;
    text-align: left;
    padding-left: 14px;
    padding-bottom: 6px
}

@media screen and (max-width: 63.9375em) {
    .flex-table__col {
        padding: 9px 25px 10px 0
    }

    .flex-table__col-lead {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        padding-left: 25px;
        padding-right: 5px
    }

        .flex-table__col-lead + .flex-table__col {
            -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
            padding-right: 0px;
            max-width: 100%
        }

    .flex-table__cell-label {
        font-size: .9375rem;
        line-height: 1.56rem
    }

    .flex-table__cell-label-sm {
        font-size: .6875rem;
        line-height: 1.25rem
    }
}

@media screen and (max-width: 47.9375em) {
    .flex-table__row {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

    .flex-table__col-lead {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }

        .flex-table__col-lead + .flex-table__col {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
            padding-top: 0
        }
}

@media screen and (max-width: 340px) {
    .flex-table__col-lead + .flex-table__col {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .flex-table__col-lead + .flex-table__col.transaction-summary__totals-sum, .flex-table__col-lead + .flex-table__col.transaction-summary__totals-vat, .flex-table__col-lead + .flex-table__col.transaction-summary__totals-pay {
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
        }
}

.transaction-summary {
    position: relative;
    width: 100%;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    background-color: #fff;
    color: #28343d;
    padding: 40px 30px;
    margin-top: 3px;
    margin-bottom: 30px;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.rooster-toggle .transaction-summary {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.transaction-summary *, .transaction-summary {
    box-sizing: border-box
}

.transaction-summary-container {
    margin-bottom: 30px
}

.transaction-summary__header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.transaction-summary__ref {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: auto;
    flex: auto;
    padding-left: 32px;
    padding-top: 0;
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.75rem;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden
}

.transaction-summary__ref-list-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    line-height: 1.85rem;
    width: 100%;
    overflow: hidden
}

.transaction-summary__ref-icon {
    position: relative;
    width: 36px;
    min-width: 36px;
    padding-right: 14px
}

.transaction-summary__ref-icon-out::after {
    background: url("/Media/payment-out.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transaction-summary__ref-icon-in::after {
    background: url("/Media/payment-in.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transaction-summary__ref-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px
}

.transaction-summary__ref-id {
    position: relative;
    font-size: 1.375rem;
    line-height: 1.746rem;
    margin-bottom: 12px
}

.transaction-summary__ref-label {
    display: inline-block;
    font-weight: bold;
    min-width: 104px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.rooster-toggle .transaction-summary__ref-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.transaction-summary__ref-status-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    -ms-flex-line-pack: center;
    align-content: center;
    height: 28px;
    padding-left: 16px
}

    .transaction-summary__ref-status-icon > svg {
        height: 20px;
        margin-top: 3px
    }

        .transaction-summary__ref-status-icon > svg.refund-txt-icon {
            max-width: 92px
        }

        .transaction-summary__ref-status-icon > svg.allocating-txt-icon {
            max-width: 137px
        }

        .transaction-summary__ref-status-icon > svg.payment-txt-icon {
            max-width: 106px
        }

    .transaction-summary__ref-status-icon .payment-txt-icon {
        margin-left: 5px
    }

.transaction-summary__ref-list {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none
}

.transaction-summary__ref-location {
    font-style: italic;
    padding-left: 6px
}

.transaction-summary__ref-status {
    font-weight: bold;
    padding-left: 7px
}

.transaction-summary__ref-val {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

    .transaction-summary__ref-val.transaction-summary__ref-location {
        overflow: hidden;
        -ms-flex-positive: 1;
        flex-grow: 1;
        text-overflow: ellipsis;
        width: 100%;
        white-space: nowrap;
        -ms-flex-negative: 1;
        flex-shrink: 1
    }

    .transaction-summary__ref-val a {
        color: inherit
    }

@media screen and (max-width: 63.9375em) {
    .transaction-summary__ref {
        padding-left: 15px
    }

    .transaction-summary__ref-id, .transaction-summary__ref {
        font-size: .9375rem;
        line-height: 1.15rem;
        margin-bottom: 0
    }

    .transaction-summary__ref-label {
        min-width: 77px
    }

    .transaction-summary__ref-status {
        display: none
    }

    .transaction-summary__ref-list-item {
        line-height: 1.5rem
    }

    .transaction-summary__ref-status-icon {
        padding-left: 9px
    }

        .transaction-summary__ref-status-icon > svg {
            height: 14px;
            margin-top: 5px
        }

            .transaction-summary__ref-status-icon > svg.refund-txt-icon {
                max-width: 64px
            }

            .transaction-summary__ref-status-icon > svg.allocating-txt-icon {
                max-width: 96px
            }

            .transaction-summary__ref-status-icon > svg.payment-txt-icon {
                max-width: 74px
            }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary__ref-status-icon > svg.payment-txt-icon {
        display: none
    }

    .transaction-summary__ref-status-icon > svg.allocating-txt-icon {
        max-width: 88px;
        margin-top: 8px
    }
}

.transaction-summary__controls {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-right: 19px
}

.transaction-summary__edit-btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    float: right;
    margin-right: 42px;
    min-height: 20px;
    letter-spacing: 0.1rem;
    padding: 2px 23px
}

    .transaction-summary__edit-btn:hover {
        background-color: #3c7ece
    }

    .transaction-summary__edit-btn[disabled] {
        background-color: #c8c8c8;
        color: #fff;
        cursor: default
    }

.rooster-toggle .transaction-summary__edit-btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.transaction-summary__list {
    background-color: #f1f1f1;
    padding-bottom: 2px;
    margin-bottom: 20px;
    margin-top: 39px
}

    .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first, .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-second, .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-third {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        padding-left: 38px;
        white-space: nowrap
    }

    .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first {
        text-align: left;
        padding-left: 38px
    }

.ie .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first {
    padding-left: 4px
}

.transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-second {
    text-align: center
}

.transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-third {
    text-align: right
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first, .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-second, .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-third {
        width: auto;
        padding-left: 24px
    }

    .ie .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first, .transaction-summary__list .flex-table__col.flex-table__col-three .flex-table__cell-first {
        padding-left: 24px
    }
}

.transaction-summary__list .flex-table__row {
    position: relative;
    padding: 9px 25px 11px 0;
    overflow: hidden
}

    .transaction-summary__list .flex-table__row::after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 20px;
        right: 24px;
        bottom: 2px;
        width: auto;
        border-bottom: 2px dashed #c8c8c8
    }

    .transaction-summary__list .flex-table__row:last-child::after {
        display: none
    }

.transaction-summary__totals-info {
    position: relative;
    top: 23px;
    padding-right: 80px;
    padding-left: 39px
}

.transaction-summary__totals-label {
    font-size: 1.375rem;
    line-height: 1.75rem;
    white-space: nowrap
}

.transaction-summary__totals-pay-label {
    display: block;
    font-size: 1.875rem;
    line-height: 2.5rem;
    white-space: nowrap
}

    .transaction-summary__totals-pay-label + .transaction-summary__totals-pay-label {
        padding-top: 20px
    }

.transaction-summary__totals-pay-label-m {
    font-size: 1.5rem;
    line-height: 2.2rem
}

.transaction-summary__totals-pay-label-sm {
    font-size: 1.375rem;
    line-height: 2.5rem
}

.transaction-summary__totals .flex-table__row .flex-table__col {
    padding: 15px 0 15px 0
}

.transaction-summary__totals .flex-table__row .flex-table__cell-second {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.transaction-summary__totals .flex-table__row .flex-table__col-three {
    position: relative;
    padding: 19px 41px 15px 0;
    overflow: hidden
}

    .transaction-summary__totals .flex-table__row .flex-table__col-three:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: 2px;
        left: 0;
        right: 0
    }

.transaction-summary__totals .flex-table__col-lead + .flex-table__col > .flex-table__cell:last-child {
    white-space: normal
}

.transaction-summary__totals-breakdown .flex-table__row .flex-table__col-three {
    padding: 15px 41px 15px 0
}

    .transaction-summary__totals-breakdown .flex-table__row .flex-table__col-three:after {
        border-bottom: 2px dashed #c8c8c8
    }

.transaction-summary__totals-breakdown .flex-table__row:last-child .flex-table__col-three:after {
    border-bottom: 2px solid #c8c8c8
}

.transaction-summary__status-label {
    position: absolute;
    bottom: 52px;
    left: 30px;
    width: 250px;
    height: 171px
}

    .transaction-summary__status-label:empty {
        display: none
    }

    .transaction-summary__status-label img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: auto
    }

@media screen and (max-width: 63.9375em) {
    .transaction-summary__status-label {
        left: 39px;
        width: 141px;
        height: 95px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary__status-label {
        position: relative;
        bottom: 0;
        left: auto;
        right: 7px;
        float: right;
        width: 106px;
        height: 72px;
        margin-top: -5px
    }
}

.transaction-summary .calendar-icon--m {
    margin-left: 15px
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary .calendar-icon--m {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        margin-left: 0
    }
}

.transaction-summary .flex-table__cell-err {
    display: none
}

.transaction-summary .js-field-error .edit-payment__label {
    color: #c20016
}

.transaction-summary .js-field-error__field::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 2px;
    height: auto;
    background-color: #c20016
}

.transaction-summary .js-field-error--exceed .flex-table__cell-err--exceed {
    display: block
}

.transaction-summary .js-field-error--insufficient .flex-table__cell-err--insufficient {
    display: block
}

.transaction-summary .js-field-error input {
    color: #c20016
}

.transaction-summary .js-field-error .flex-table__cell-error-msg {
    display: inline-block
}

.transaction-summary--red {
    background-color: #980001;
    color: #fff
}

    .transaction-summary--red .transaction-summary__list {
        background-color: #740001
    }

        .transaction-summary--red .transaction-summary__list .flex-table__row::after {
            border-bottom: 2px dashed #fff
        }

    .transaction-summary--red .transaction-summary__totals-breakdown .flex-table__row .flex-table__col-three:after {
        border-bottom: 2px dashed #fff
    }

    .transaction-summary--red .transaction-summary__totals-breakdown .flex-table__row:last-child .flex-table__col-three:after {
        border-bottom: 2px solid #fff
    }

.transaction-summary--dark {
    padding: 30px;
    background-color: #28343d;
    color: #fff
}

    .transaction-summary--dark .transaction-summary__ref {
        padding-top: 10px
    }

    .transaction-summary--dark .transaction-summary__ref-id {
        margin-bottom: 3px;
        font-size: 1.25rem;
        line-height: 1.746rem
    }

    .transaction-summary--dark .transaction-summary__ref-icon:after {
        top: 2px
    }

    .transaction-summary--dark .transaction-summary__list {
        margin-top: 30px;
        background-color: #394c5a
    }

        .transaction-summary--dark .transaction-summary__list .flex-table__row::after {
            border-bottom: 2px dashed #fff
        }

    .transaction-summary--dark .transaction-summary__totals-breakdown .flex-table__row .flex-table__col-three:after {
        border-bottom: 2px dashed #fff
    }

    .transaction-summary--dark .transaction-summary__totals-breakdown .flex-table__row:last-child .flex-table__col-three:after {
        border-bottom: 2px solid #fff
    }

@media screen and (max-width: 63.9375em) {
    .transaction-summary--dark .transaction-summary__ref-id, .transaction-summary--dark .transaction-summary__ref {
        font-size: .9375rem;
        margin-bottom: 0
    }

        .transaction-summary--dark .transaction-summary__ref-id ~ .transaction-summary__ref-list-item {
            line-height: 1.15rem
        }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary--dark.transaction-summary {
        padding: 15px 8px 29px 8px
    }
}

.transaction-summary--incoming {
    padding: 16px 48px 16px 16px
}

    .transaction-summary--incoming .flex-table__col {
        padding: 0 0 0 15px;
        -ms-flex-preferred-size: 0;
        flex-basis: 0
    }

    .transaction-summary--incoming .flex-table__cell {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        text-align: right
    }

    .transaction-summary--incoming .flex-table__cell-label {
        font-size: 2.5rem;
        line-height: 2.5rem;
        white-space: nowrap
    }

    .transaction-summary--incoming .transaction-summary__ref-list-item:not(.transaction-summary__ref-id) {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: justify;
        align-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .transaction-summary--incoming .transaction-summary__ref-list-item:not(.transaction-summary__ref-id) .flex-table__cell-label {
            margin-top: -25px
        }

.transaction-summary.transaction-summary--clearing {
    padding-bottom: 18px
}

    .transaction-summary.transaction-summary--clearing .flex-table__cell-third {
        margin-left: auto
    }

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__totals .flex-table__row .flex-table__col {
        padding-top: 18px
    }
}

.transaction-summary.transaction-summary--clearing .transaction-summary__totals-pay {
    max-width: 440px;
    margin-left: auto;
    padding: 19px 41px 15px 14px;
    border-top: 2px solid #c8c8c8
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__totals-pay {
        max-width: 100%
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__totals-pay {
        padding-top: 18px
    }
}

.transaction-summary.transaction-summary--clearing .transaction-summary__list {
    margin-bottom: 30px
}

    .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__row {
        padding: 0 25px 0 0
    }

    .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col {
        padding: 20px 25px 20px 36px
    }

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col-lead {
        padding-bottom: 4px
    }
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col {
        padding: 9px 25px 10px 25px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col {
        padding-right: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__list {
        margin-bottom: 23px
    }

        .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col {
            -ms-flex: 0 auto;
            flex: 0 auto
        }

        .transaction-summary.transaction-summary--clearing .transaction-summary__list .flex-table__col-three {
            margin-left: auto
        }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing .transaction-summary__list {
        margin: 24px 0 17px
    }
}

.transaction-summary.transaction-summary--clearing .transaction-summary__ref-val {
    padding-left: 5px
}

.transaction-summary.transaction-summary--clearing .transaction-summary__status-label {
    display: none
}

.transaction-summary.transaction-summary--clearing.transaction-summary--paid {
    padding-bottom: 40px
}

    .transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__status-label {
        display: block
    }

    .transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__totals {
        margin-bottom: 85px
    }

@media screen and (max-width: 63.9375em) {
    .transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__totals {
        margin-bottom: 60px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__totals {
        margin-bottom: 0
    }
}

.transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__status-label {
    bottom: 28px
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing.transaction-summary--paid .transaction-summary__status-label {
        bottom: 11px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing.transaction-summary--paid {
        padding-bottom: 10px
    }
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary.transaction-summary--clearing {
        padding-bottom: 20px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary.transaction-summary--clearing {
        padding-bottom: 0
    }
}

.transaction-summary--used .transaction-summary__totals-info, .transaction-summary--paid .transaction-summary__totals-info {
    display: none
}

.transaction-summary--used .transaction-summary__controls, .transaction-summary--paid .transaction-summary__controls {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.transaction-summary--used .invoice-ctrl-btn, .transaction-summary--paid .invoice-ctrl-btn {
    margin-right: 15px
}

.transaction-summary--used .invoice-ctrl-btn--query, .transaction-summary--paid .invoice-ctrl-btn--query {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary--used .invoice-ctrl-btn, .transaction-summary--paid .invoice-ctrl-btn {
        margin-right: 11px
    }
}

.rooster-toggle .transaction-summary {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

@media screen and (max-width: 63.9375em) {
    .transaction-summary {
        padding: 23px 16px 20px 16px;
        margin-bottom: 24px
    }

    .transaction-summary__header {
        padding-left: 8px
    }

    .transaction-summary-container {
        margin-bottom: 21px
    }

    .transaction-summary__list {
        margin-top: 23px;
        margin-bottom: 4px
    }

        .transaction-summary__list .flex-table__row {
            padding-bottom: 0
        }

            .transaction-summary__list .flex-table__row:after {
                left: 16px;
                right: 16px
            }

    .transaction-summary__totals-breakdown {
        margin-bottom: 10px
    }

    .transaction-summary__totals-pay-label {
        font-size: 1.25rem;
        line-height: normal
    }

    .transaction-summary__totals-label, .transaction-summary__totals-pay-label-sm {
        font-size: .9375rem;
        line-height: normal
    }

    .transaction-summary__totals .flex-table__row .flex-table__col {
        padding: 10px 25px 15px 0
    }

    .transaction-summary__totals-info {
        top: 16px;
        padding-left: 14px
    }

    .transaction-summary__edit-btn {
        margin-top: 9px;
        margin-right: 24px
    }

    .transaction-summary--incoming {
        padding: 18px 31px 17px 16px
    }

        .transaction-summary--incoming .flex-table__cell-label {
            font-size: 1.875rem;
            line-height: 1.875rem
        }

        .transaction-summary--incoming .transaction-summary__ref-list-item:not(.transaction-summary__ref-id) .flex-table__cell-label {
            margin-top: -18px
        }

    .transaction-summary__ref-icon {
        width: 33px;
        min-width: 33px
    }

        .transaction-summary__ref-icon::after {
            top: 2px
        }

    .transaction-summary__controls {
        padding-right: 11px
    }
}

@media screen and (max-width: 47.9375em) {
    .transaction-summary {
        padding: 15px 8px 37px 8px
    }

    .transaction-summary__header {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 8px
    }

    .transaction-summary__list {
        margin-top: 14px
    }

        .transaction-summary__list .flex-table__row {
            padding-top: 4px
        }

    .transaction-summary__ref {
        -ms-flex: calc(100% - 72px);
        flex: calc(100% - 72px)
    }

    .transaction-summary__controls {
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin-top: 3px;
        padding-right: 0
    }

    .transaction-summary__controls--right {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .transaction-summary__totals {
        width: 100%
    }

        .transaction-summary__totals:not(.transaction-summary__totals-breakdown) .flex-table__col-lead {
            padding-bottom: 0
        }

        .transaction-summary__totals:not(.transaction-summary__totals-breakdown) .flex-table__row {
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse
        }

            .transaction-summary__totals:not(.transaction-summary__totals-breakdown) .flex-table__row .flex-table__col-three {
                width: 100%
            }

        .transaction-summary__totals .flex-table__row .flex-table__col {
            padding-top: 0;
            padding-right: 23px
        }

        .transaction-summary__totals .flex-table__row .flex-table__col-lead-info {
            padding-right: 0
        }

        .transaction-summary__totals .flex-table__row .flex-table__col-three::after {
            left: 8px;
            right: 8px
        }

    .transaction-summary__totals-breakdown {
        margin-bottom: 14px
    }

    .transaction-summary__totals-pay-label + .transaction-summary__totals-pay-label {
        padding-top: 26px
    }

    .transaction-summary__totals-info {
        top: 0;
        font-size: .8125rem;
        line-height: 1.25rem;
        margin-bottom: 0;
        padding-left: 24px;
        padding-right: 24px
    }

    .transaction-summary__edit-btn {
        margin-top: 5px
    }

    .transaction-summary--incoming {
        padding-bottom: 16px
    }

        .transaction-summary--incoming .transaction-summary__ref {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            padding-left: 6px
        }

        .transaction-summary--incoming .transaction-summary__ref-list-item:not(.transaction-summary__ref-id) .flex-table__cell-label {
            margin-top: 1px
        }

        .transaction-summary--incoming .transaction-summary__header {
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
        }

        .transaction-summary--incoming .flex-table__cell-label {
            font-size: 1.25rem;
            line-height: 1.25rem
        }

    .transaction-summary__total-incoming {
        padding-left: 0
    }

        .transaction-summary__total-incoming .flex-table__cell {
            padding-left: 15px;
            padding-top: 18px
        }
}

.account-page-title--transaction-summary .account-page-title--back-to {
    padding-right: 0
}

.account-page-title--transaction-summary .back-to-page {
    position: relative;
    width: 100%;
    padding-left: 2px
}

.account-page-title--transaction-summary .back-to-page__ico {
    position: absolute;
    left: -28px;
    top: 19px
}

.account-page-title--transaction-summary .back-to-page__txt {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    display: block;
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 4rem;
    text-transform: none;
    margin-bottom: 0;
    text-align: left;
    color: #28343d
}

.account-page-title--transaction-summary .account-page-title {
    margin-bottom: 18px;
    margin-top: 5px;
    padding-left: 30px
}

    .account-page-title--transaction-summary .account-page-title .account-page-title__txt {
        display: none
    }

@media screen and (max-width: 63.9375em) {
    .account-page-title--transaction-summary .back-to-page {
        padding-left: 3px
    }

    .account-page-title--transaction-summary .back-to-page__ico {
        top: 5px;
        left: -25px
    }

    .rooster-toggle .account-page-title--transaction-summary .back-to-page__ico {
        left: -25px;
        top: 6px
    }

    .rooster-toggle .account-page-title--transaction-summary .back-to-page {
        padding-left: 18px
    }

    .account-page-title--transaction-summary .back-to-page__txt {
        font-size: 1.5625rem;
        line-height: 2.1875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .account-page-title--transaction-summary .account-page-title {
        margin-bottom: 24px;
        padding: 0 20px
    }

    .account-page-title--transaction-summary .account-page-title--back-to {
        padding-right: 0
    }

    .account-page-title--transaction-summary .account-page-title .back-to-page {
        padding-left: 20px
    }

    .account-page-title--transaction-summary .account-page-title .back-to-page__txt {
        padding-left: 0
    }

    .account-page-title--transaction-summary .account-page-title .back-to-page__ico {
        left: -18px
    }
}

.js-edit-active .edit-payment {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    white-space: nowrap
}

.js-edit-active .edit-payment-update-btn {
    display: block
}

.js-edit-active .js-transaction-edit-trigger {
    display: none
}

.js-edit-active .js-total-pay {
    display: none;
    float: right
}

.js-edit-active .flex-table__cell-error-msg {
    width: 100%
}

.js-edit-active .transaction-summary__totals-pay {
    padding-bottom: 33px
}

    .js-edit-active .transaction-summary__totals-pay .flex-table__cell-first {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        -ms-flex-item-align: end;
        align-self: flex-end
    }

        .js-edit-active .transaction-summary__totals-pay .flex-table__cell-first .transaction-summary__totals-pay-label {
            padding-bottom: 4px
        }

@media screen and (max-width: 63.9375em) {
    .js-edit-active .transaction-summary__totals-pay .flex-table__cell-first .transaction-summary__totals-pay-label {
        padding-bottom: 10px
    }
}

.js-edit-active .transaction-summary__totals-pay .flex-table__cell-edit-payment {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    padding-right: 0
}

    .js-edit-active .transaction-summary__totals-pay .flex-table__cell-edit-payment .edit-payment__label {
        position: relative;
        top: 0;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        text-align: right
    }

    .js-edit-active .transaction-summary__totals-pay .flex-table__cell-edit-payment .edit-payment__label__input {
        -ms-flex: 1;
        flex: 1
    }

.js-edit-active .transaction-summary__totals-pay .flex-table__cell-total-pay {
    -ms-flex-preferred-size: 0;
    flex-basis: 0
}

.edit-payment {
    position: relative;
    display: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 2.4rem;
    color: #28343d
}

.edit-payment__field {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% - 98px);
    height: 40px;
    margin-left: 14px;
    margin-right: 12px;
    padding-left: 10px;
    border: solid 1px #c8c8c8;
    background-color: #f9f9f9;
    text-align: right;
    overflow: hidden
}

    .edit-payment__field :focus {
        border: solid 1px #28343d
    }

.edit-payment-update-btn {
    display: none;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    width: 72px;
    min-width: 72px;
    height: 40px
}

    .edit-payment-update-btn:hover {
        background-color: #3c7ece
    }

    .edit-payment-update-btn[disabled] {
        background-color: #c8c8c8;
        color: #fff;
        cursor: default
    }

.rooster-toggle .edit-payment-update-btn {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.transaction-summary--red .edit-payment, .transaction-summary--dark .edit-payment {
    color: #28343d
}

    .transaction-summary--red .edit-payment .flex-table__cell-error-msg, .transaction-summary--dark .edit-payment .flex-table__cell-error-msg {
        color: #fff
    }

.edit-payment__input {
    position: relative;
    width: auto;
    height: auto;
    max-height: 38px;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 1;
    color: #28343d;
    background: none;
    border: none;
    padding: 0 5px 0 0;
    margin-left: 7px;
    border: none
}

    .edit-payment__input:focus {
        border: none
    }

.rooster-toggle .edit-payment__input {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

@media screen and (max-width: 63.9375em) {
    .edit-payment {
        font-size: 16px;
        line-height: 16px
    }

    .edit-payment__input {
        font-size: 16px;
        line-height: 16px
    }
}

.invoice-ctrl-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: #4a90e2;
    padding: 10px 5px 10px 34px;
    margin-right: 25px;
    white-space: nowrap
}

    .invoice-ctrl-btn:last-child {
        margin-right: 0
    }

    .invoice-ctrl-btn::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px
    }

.invoice-ctrl-btn__text {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: .8125rem;
    line-height: .8125rem;
    font-weight: normal;
    padding-bottom: 1px
}

.rooster-toggle .invoice-ctrl-btn__text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.invoice-ctrl-btn__text::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    bottom: -1px
}

.invoice-ctrl-btn--light {
    color: #fff
}

    .invoice-ctrl-btn--light.invoice-ctrl-btn--download::before {
        background: url("/Media/download-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px
    }

    .invoice-ctrl-btn--light.invoice-ctrl-btn--query::before {
        background: url("/Media/query-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px
    }

.invoice-ctrl-btn--default {
    color: #4a90e2
}

.transaction-summary--red .invoice-ctrl-btn--default, .transaction-summary--dark .invoice-ctrl-btn--default {
    color: #fff
}

.invoice-ctrl-btn--default.invoice-ctrl-btn--download::before {
    background: url("/Media/download-grey.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px
}

.transaction-summary--red .invoice-ctrl-btn--default.invoice-ctrl-btn--download::before, .transaction-summary--dark .invoice-ctrl-btn--default.invoice-ctrl-btn--download::before {
    background: url("/Media/download-white.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px
}

.invoice-ctrl-btn--default.invoice-ctrl-btn--query::before {
    background: url("/Media/query-grey.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px
}

.transaction-summary--red .invoice-ctrl-btn--default.invoice-ctrl-btn--query::before, .transaction-summary--dark .invoice-ctrl-btn--default.invoice-ctrl-btn--query::before {
    background: url("/Media/query-white.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px
}

.invoice-ctrl-btn--default .invoice-ctrl-btn__text::after {
    background-color: #4a90e2
}

.transaction-summary--red .invoice-ctrl-btn--default .invoice-ctrl-btn__text::after, .transaction-summary--dark .invoice-ctrl-btn--default .invoice-ctrl-btn__text::after {
    background-color: #fff
}

@media screen and (max-width: 63.9375em) {
    .invoice-ctrl-btn {
        margin-right: 20px
    }
}

.transactions-basket {
    font-family: "Rooster",sans-serif
}

.transactions-basket__header {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: #28343d;
    padding: 17px 26px 17px;
    min-height: 71px;
    color: #fff;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: end;
    align-items: flex-end
}

.transactions-basket__inner {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: #fff
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__inner {
        -ms-flex-positive: 1;
        flex-grow: 1
    }
}

.transactions-basket__format {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: left;
    padding: 20px 30px 32px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    z-index: 1
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__format {
        padding: 20px 20px 25px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__format {
        margin-top: auto;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding: 20px 17px 24px
    }
}

.transactions-basket__title {
    margin: 0 0 0 15px;
    font-family: "Rooster",sans-serif;
    font-weight: normal;
    font-size: 1.875rem
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__title {
        font-size: 1.375rem
    }
}

.transactions-basket__list {
    height: 100%;
    max-height: 400px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow-y: auto;
    margin: 0;
    list-style-type: none;
    background: #f1f1f1
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__list {
        max-height: initial
    }
}

.transactions-basket__img {
    max-width: 28px;
    max-height: 34px
}

.transactions-basket__item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    padding: 17px 28px 17px 30px;
    border-bottom: 1px solid #c8c8c8;
    background: #fff
}

    .transactions-basket__item:last-child {
        padding-bottom: 17px;
        border: none
    }

    .transactions-basket__item:first-child {
        padding-top: 17px
    }

@media screen and (max-width: 63.9375em) {
    .transactions-basket__item {
        padding: 15px 0 15px 15px
    }

        .transactions-basket__item:last-child {
            padding-bottom: 15px
        }

        .transactions-basket__item:first-child {
            padding-top: 15px
        }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__item {
        padding: 15px 0 15px 9px
    }
}

.transactions-basket__date {
    -ms-flex: 1;
    flex: 1;
    width: 50px;
    height: 50px;
    max-width: 50px;
    margin-right: 30px;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__date {
        margin-right: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__date {
        margin-right: 8px
    }
}

.transactions-basket__doc {
    display: none
}

.transactions-basket__amount {
    -ms-flex: 1;
    flex: 1;
    text-align: right;
    font-weight: 800;
    font-size: 1.375rem;
    font-family: "Rooster",sans-serif
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__amount {
        font-size: 1.125rem
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__amount {
        text-align: left;
        line-height: 1.1rem
    }
}

.transactions-basket__remove {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1;
    flex: 1;
    max-width: 80px;
    margin-left: 58px;
    padding: 0;
    background: none;
    border: none;
    color: #c20016;
    text-transform: uppercase;
    font-size: .6875rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__remove {
        margin-left: 23px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__remove {
        width: 46px;
        height: 40px;
        -ms-flex: inherit;
        flex: inherit;
        -ms-flex-pack: center;
        justify-content: center;
        border-left: 1px solid rgba(0,0,0,0.15)
    }
}

.transactions-basket__remove-icon {
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-right: 5px;
    background: #c20016;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center
}

.ie .transactions-basket__remove-icon {
    position: relative
}

.transactions-basket__remove-icon:after {
    content: '';
    display: block;
    height: 2px;
    width: 8px;
    margin: auto;
    background: #fff
}

.ie .transactions-basket__remove-icon:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__remove-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin-right: 0
    }

        .transactions-basket__remove-icon:after {
            width: 12px
        }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__remove-label {
        display: none
    }
}

.transactions-basket__close {
    position: absolute;
    top: 14px;
    right: 11px;
    border: none;
    background: none;
    cursor: pointer
}

    .transactions-basket__close::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90b';
        color: #fff;
        font-size: .9375rem
    }

.transactions-basket__more {
    display: -ms-flexbox;
    display: flex;
    margin-top: 15px;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__more {
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.transactions-basket__btn {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1;
    flex: 1;
    padding: 11px;
    border-radius: 24px;
    background: #70c624;
    border: none;
    font-size: .8125rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    letter-spacing: 2.4px
}

.transactions-basket__btn--disabled {
    background: #c8c8c8
}

    .transactions-basket__btn--disabled:hover, .transactions-basket__btn--disabled:focus {
        background: #c8c8c8
    }

.transactions-basket__btn svg {
    margin-right: 10px
}

.transactions-basket__add {
    margin-right: 10px;
    border: solid 1px #c8c8c8;
    background: #fff;
    color: #28343d
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__add {
        margin-right: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__add {
        margin: 0 0 10px 0
    }
}

.transactions-basket__icon--hidden {
    display: none
}

.transactions-basket__id-amount {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__id-amount {
        padding-left: 0;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.transactions-basket__counter {
    margin-left: 5px
}

.transactions-basket__id {
    position: relative;
    -ms-flex: 1;
    flex: 1;
    margin-right: 10px;
    font-size: 1.125rem;
    text-align: left
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__id {
        font-size: .875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__id {
        font-size: .8125rem;
        margin-right: 0
    }
}

.transactions-basket__loc {
    font-style: italic
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__loc {
        display: none
    }
}

.transactions-basket__format-label {
    display: block;
    margin-bottom: 7px;
    font-size: .9375rem
}

.transactions-basket__options-wrap {
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #fff;
    border: solid 1px #c8c8c8;
    border-bottom: none;
    box-sizing: border-box;
    z-index: 1
}

    .transactions-basket__options-wrap a {
        padding: 7px 10px
    }

.transactions-basket__options-list {
    margin: 0;
    list-style-type: none
}

.transactions-basket__selectbox-wrap {
    font-size: .9375rem;
    text-transform: uppercase
}

.transactions-basket__download-form {
    display: none
}

.transactions-basket .transactions-basket__selectbox-label {
    padding: 10px 15px;
    border: solid 1px #c8c8c8;
    color: #c8c8c8
}

    .transactions-basket .transactions-basket__selectbox-label:after {
        top: 14px
    }

.transactions-basket .default-state .transactions-basket__selectbox-label {
    color: #28343d
}

.transactions-basket__error {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 20px;
    -ms-flex-align: center;
    align-items: center;
    border-top: 4px solid #c20016;
    background: #fcf2f3
}

.ie .transactions-basket__error {
    padding: 20px
}

.transactions-basket__error--hidden {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket__error {
        padding: 10px;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }
}

.transactions-basket__error .transactions-basket__err-msg {
    margin: 0 20px;
    text-align: left
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket__error .transactions-basket__err-msg {
        font-size: .8125rem
    }
}

.transactions-basket__warning {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px
}

    .transactions-basket__warning svg {
        width: 100%;
        height: 100%
    }

@media screen and (max-width: 63.9375em) {
    .transactions-basket__warning {
        width: 16px;
        height: 16px
    }
}

.transactions-basket__dismiss {
    font-size: .6875rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: bold
}

.ie .transactions-basket__dismiss {
    -ms-flex-preferred-size: 110px;
    flex-basis: 110px
}

.transactions-basket .modal-overlay__content {
    max-width: 585px;
    max-height: 80vh;
    height: 100%;
    max-height: 610px;
    padding: 0;
    background: none;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket .modal-overlay__content {
        max-width: 472px;
        max-height: 512px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket .modal-overlay__content {
        max-width: initial;
        max-height: initial;
        height: 100%;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

.transactions-basket .calendar-icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px
}

.transactions-basket .calendar-icon__header {
    font-size: .5625rem;
    line-height: 13px
}

.transactions-basket .calendar-icon__body {
    font-size: 1.625rem;
    line-height: 29px
}

.transactions-basket--single .modal-overlay__content {
    height: auto
}

.transactions-basket--single .transactions-basket__format {
    box-shadow: none;
    padding-bottom: 43px
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--single .transactions-basket__format {
        padding-bottom: 24px
    }
}

.transactions-basket--single .transactions-basket__more {
    margin-top: 30px
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--single .transactions-basket__more {
        margin-top: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--single .transactions-basket__add {
        display: none
    }
}

.transactions-basket--single .transactions-basket__header {
    padding: 26px 26px 20px
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--single .transactions-basket__header {
        padding: 17px 26px 11px
    }
}

.transactions-basket--single .transactions-basket__options-wrap {
    bottom: auto;
    border: solid 1px #c8c8c8;
    border-top: none
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--single .modal-overlay__content {
        max-width: calc(100% - 20px)
    }
}

.transactions-basket--payment .transactions-basket__total-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5625rem
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__total-container {
        font-size: 1.375rem
    }
}

.transactions-basket--payment .transactions-basket__total {
    margin-left: 50px;
    font-size: 1.875rem
}

.transactions-basket--payment .transactions-basket__total--error {
    color: #c20016
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__total {
        margin-left: auto;
        font-size: 1.375rem
    }
}

.transactions-basket--payment .transactions-basket__info {
    margin-top: 11px;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__info {
        font-size: .75rem
    }
}

.transactions-basket--payment .transactions-basket__counter {
    font-size: 1.125rem
}

.transactions-basket--payment .transactions-basket__title {
    margin-left: 11px
}

.transactions-basket--payment .transactions-basket__counter {
    margin-left: 0
}

.transactions-basket--payment .transactions-basket__remove {
    margin-left: 30px
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__remove {
        margin-left: 17px;
        margin-right: 14px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__remove {
        margin-left: 8px;
        margin-right: 0
    }
}

.transactions-basket--payment .transactions-basket__type {
    display: block;
    position: relative;
    font-size: 1.125rem;
    font-weight: bold
}

    .transactions-basket--payment .transactions-basket__type:after {
        content: ":"
    }

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__type {
        position: initial;
        font-size: .9375rem
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__type {
        margin-top: 8px;
        line-height: 1rem;
        word-break: break-word
    }
}

.transactions-basket--payment .transactions-basket__id-amount {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center
}

.transactions-basket--payment .transactions-basket__amount {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__amount {
        padding-left: 8px;
        font-size: 1rem
    }
}

.transactions-basket--payment .transactions-basket__add {
    padding: 9px 20px 9px
}

.transactions-basket--payment .btn {
    -ms-flex: 1;
    flex: 1;
    min-width: inherit
}

.transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id {
    -ms-flex: 2;
    flex: 2;
    padding-left: 32px
}

    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id:before, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id:before {
        background: url("/Media/payment-out.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px;
        position: absolute;
        left: 0;
        top: 2px
    }

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id:before, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id:before {
        top: 50%;
        transform: translateY(-50%)
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id:before, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id:before {
        display: none
    }
}

@media screen and (max-width: 63.9375em) {
    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id {
        position: relative
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__id, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__id {
        padding-left: 0;
        word-break: break-all
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__type, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__type {
        display: block
    }
}

.transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__amount, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__amount {
    color: #70c624
}

    .transactions-basket--payment .transactions-basket__item--credit-note .transactions-basket__amount:before, .transactions-basket--payment .transactions-basket__item--incoming .transactions-basket__amount:before {
        content: '-'
    }

.transactions-basket--payment .transactions-basket__btn {
    padding: 9px 20px 9px
}

    .transactions-basket--payment .transactions-basket__btn:after {
        top: 0
    }

.rooster-toggle .transactions-basket--payment .transactions-basket__btn {
    top: 1px
}

@media screen and (max-width: 47.9375em) {
    .transactions-basket--payment .transactions-basket__btn {
        min-height: 26px
    }
}

.payment-options {
    padding: 75px 0
}

@media screen and (max-width: 63.9375em) {
    .payment-options {
        padding: 65px 0
    }
}

.payment-options__title {
    margin-top: 5px;
    margin-bottom: 30px;
    font-family: "Rooster",sans-serif;
    font-weight: bold;
    font-size: 1.875rem
}

@media screen and (max-width: 63.9375em) {
    .payment-options__title {
        font-size: 1.5625rem;
        margin-bottom: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__title {
        text-align: center;
        width: 100%;
        margin-bottom: 16px
    }
}

.payment-options__cards {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    .payment-options__cards li {
        width: calc((100% - (30px * 3)) / 4)
    }

@media screen and (max-width: 63.9375em) {
    .payment-options__cards li {
        width: calc((100% - 24px) / 2);
        margin-bottom: 26px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__cards li {
        width: 100%;
        margin-bottom: 16px
    }
}

.payment-options__card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    min-height: 340px;
    height: 100%
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card {
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
        min-height: 300px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card {
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        min-height: 88px;
        position: relative
    }
}

.payment-options__card-header {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: #28343d;
    color: #fff;
    font-family: "Rooster",sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    padding: 18px 0 24px;
    max-height: 71px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 0
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card-header {
        max-height: 64px;
        padding: 17px 0 22px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-header {
        background-color: transparent;
        padding: 0;
        max-height: none;
        text-align: initial;
        position: absolute;
        top: 8px;
        left: 17px
    }

    .payment-options__card--balance .payment-options__card-header {
        top: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card--all .payment-options__card-header {
        color: #28343d
    }
}

.payment-options__card--overdue .payment-options__card-header {
    color: #fff
}

.rooster-toggle .payment-options__card-header {
    font-weight: normal
}

.payment-options__card-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 30px 30px 40px
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card-body {
        padding: 30px 25px 25px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-body {
        background-color: #28343d;
        color: #fff;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        text-align: initial;
        padding: 14px 17px
    }
}

.payment-options__card--all .payment-options__card-body {
    background-color: #fff;
    color: #28343d
}

.payment-options__card--overdue .payment-options__card-body {
    background-color: #980001;
    color: #fff
}

.payment-options__card-body .btn {
    min-width: auto;
    width: 100%;
    height: 48px;
    max-width: 200px;
    margin-top: 8px;
    margin-bottom: 2px;
    box-sizing: border-box
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card-body .btn {
        margin-top: 20px;
        margin-bottom: -4px;
        max-width: 100%
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-body .btn {
        width: 50%;
        min-width: 50%;
        margin: 0 0 0 5px;
        height: 34px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: .6875rem
    }
}

.payment-options__card-icon {
    width: 56px;
    height: 56px
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-icon {
        display: none
    }
}

.payment-options__card-amount, .payment-options__card-description {
    font-family: "Rooster",sans-serif;
    line-height: 25px
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-amount, .payment-options__card-description {
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin: 0;
        padding-top: 33px;
        line-height: 1.54em
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-description {
        margin: auto 0
    }

    .payment-options__card--all .payment-options__card-description {
        padding-top: 0
    }
}

.payment-options__card-amount {
    font-size: 1.875rem;
    font-weight: bold
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card-amount {
        font-size: 1.5625rem;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-amount {
        font-size: .9375rem
    }

    .payment-options__card--balance .payment-options__card-amount {
        margin-bottom: 3px
    }
}

.payment-options__card-description {
    width: 100%;
    font-size: 1.25rem;
    margin-top: -11px
}

.payment-options__card--balance .payment-options__card-description {
    margin-top: 0;
    margin-bottom: 6px
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card--balance .payment-options__card-description {
        margin-top: 17px;
        margin-bottom: -3px
    }
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card--balance .payment-options__card-description {
        margin-top: 0;
        margin-bottom: 8px
    }
}

@media screen and (max-width: 63.9375em) {
    .payment-options__card-description {
        margin-top: -5px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options__card-description {
        font-size: .8125rem;
        max-width: 50%
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options .container {
        padding: 0 17px
    }
}

.payment-options .grid {
    max-width: 1200px;
    margin: 0 auto
}

@media screen and (max-width: 63.9375em) {
    .payment-options .grid {
        max-width: 600px
    }
}

.payment-options .btn.btn--cancel {
    width: 400px;
    margin: 50px auto 0;
    letter-spacing: 0.175em
}

@media screen and (max-width: 63.9375em) {
    .payment-options .btn.btn--cancel {
        width: 75%;
        margin: 32px auto 0
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-options .btn.btn--cancel {
        width: 100%;
        min-width: inherit;
        margin: 16px auto 0
    }
}

body:not(.js-modal-active) .modal-overlay[data-modal-id="payment-frame-modal"] iframe {
    display: none
}

.modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content {
    max-width: 586px;
    padding: 52px 0 0
}

    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content[data-modal-state="success"], .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content[data-modal-state="fail"] {
        padding: 121px 0 0
    }

.modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content-title {
    font-size: 1.25rem;
    font-weight: normal
}

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content {
        max-width: 472px;
        width: 472px;
        height: auto
    }
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content {
        overflow: hidden
    }
}

@media (max-width: 471px) {
    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content {
        padding: 30px 0 0;
        width: 100%;
        height: 100%
    }
}

.modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__content[data-modal-state] {
    display: -ms-flexbox;
    display: flex
}

.modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__close {
    top: 20px;
    right: 20px;
    font-size: 17px
}

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay__close {
        top: 17px;
        right: 17px
    }
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="payment-frame-modal"] .modal-overlay {
        background-color: rgba(0,0,0,0.2)
    }
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="payment-frame-modal"] {
        top: 0 !important;
        height: 100% !important
    }
}

@media (max-width: 471px) {
    body.js-modal-active .modal-overlay[data-modal-id="payment-frame-modal"] ~ .header, body.js-modal-active .modal-overlay[data-modal-id="payment-frame-modal"] ~ #main, body.js-modal-active .modal-overlay[data-modal-id="payment-frame-modal"] ~ .footer {
        display: none
    }
}

@media (max-width: 471px) {
    .transaction-payment__container {
        position: relative;
        width: 100%;
        height: 100%
    }
}

.payment-zone {
    overflow: hidden
}

.rooster-toggle .payment-zone {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.payment-zone__frame {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.payment-zone__frame-container {
    position: relative;
    height: 0;
    padding-top: 526px;
    overflow: hidden
}

.modal-overlay__content[data-modal-state="success"] .payment-zone__frame-container, .modal-overlay__content[data-modal-state="fail"] .payment-zone__frame-container {
    padding-top: 458px
}

@media screen and (max-width: 63.9375em) {
    .payment-zone__frame-container {
        padding-top: 500px
    }

    .modal-overlay__content[data-modal-state="success"] .payment-zone__frame-container, .modal-overlay__content[data-modal-state="fail"] .payment-zone__frame-container {
        padding-top: 430px
    }
}

@media (max-width: 471px) {
    .payment-zone__frame-container {
        position: absolute;
        width: 100%;
        height: 100%;
        padding-top: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll
    }
}

.payment-zone__title {
    height: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0
}

@media (max-width: 471px) {
    .payment-zone {
        position: absolute;
        width: 100%;
        height: 100%
    }
}

.payment-result {
    text-align: center;
    padding: 0 33px
}

.rooster-toggle .payment-result {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.payment-result__icon {
    width: 80px;
    height: 80px;
    margin-bottom: 21px
}

.payment-result__title {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 30px
}

.rooster-toggle .payment-result__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

.payment-result__text {
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-bottom: 43px
}

.payment-result__text-ref {
    font-weight: bold;
    margin-bottom: 4px
}

.rooster-toggle .payment-result__text-ref {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.payment-result__text-ref + .btn {
    margin-top: 74px
}

.payment-result__text-subtitle {
    margin-top: 14px;
    margin-bottom: 49px
}

.payment-result .btn {
    width: 100%;
    max-width: 426px;
    box-sizing: border-box
}

.payment-result .btn--chevron-right::after {
    top: -0.04rem
}

@media only screen and (max-width: 472px) and (min-width: 472px) {
    .payment-result__title {
        margin-bottom: 21px
    }

    .payment-result__text-ref + .btn {
        margin-top: 58px
    }

    .payment-result__text-subtitle {
        font-size: .8125rem;
        line-height: 1.3rem;
        margin-top: 11px;
        margin-bottom: 38px
    }
}

@media only screen and (max-width: 471px) {
    .payment-result {
        padding: 0 32px
    }
}

.invoices-listing__title, .invoices-listing__group-title {
    position: relative;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 2.49rem;
    margin-bottom: 19px;
    padding-top: 22px
}

    .invoices-listing__title:empty, .invoices-listing__group-title:empty {
        display: none
    }

    .invoices-listing__title:not(.invoices-listing__group-title), .invoices-listing__group-title:not(.invoices-listing__group-title) {
        padding-top: 0
    }

.rooster-toggle .invoices-listing__title, .rooster-toggle .invoices-listing__group-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-weight: bold
}

.invoices-listing__group-title {
    opacity: 0
}

    .invoices-listing__group-title.js-invoice-animating {
        transform: scale3d(0.9, 0.9, 0.9)
    }

    .invoices-listing__group-title.js-invoice-in-view {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .invoices-listing__group-title:first-child {
        padding-top: 0
    }

        .invoices-listing__group-title:first-child::after {
            display: none
        }

    .invoices-listing__group-title::after {
        content: '';
        background: url("/Media/r2-section-gradient-20px.png") no-repeat center center transparent;
        background-size: contain;
        content: '';
        display: block;
        height: 30px;
        width: 1600px;
        position: absolute;
        top: -3px;
        left: 50%;
        transform: translateX(-50%)
    }

.invoices-listing__container {
    max-height: 0;
    transition: all 100ms cubic-bezier(0.2, 0, 0.2, 1);
    outline: none
}

@media screen and (max-width: 63.9375em) {
    .invoices-listing__title, .invoices-listing__group-title {
        padding-top: 16px;
        margin-bottom: 16px;
        font-size: 1.5625rem;
        line-height: 2.1875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .invoices-listing__title, .invoices-listing__group-title {
        text-align: center
    }
}

.transactions-card {
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    padding: 20px 30px 17px 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    opacity: 0
}

    .transactions-card.js-invoice-animating {
        transform: scale3d(0.9, 0.9, 0.9)
    }

    .transactions-card.js-invoice-in-view {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1)
    }

    .transactions-card .calendar-icon--m {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
        border-radius: 6px
    }

        .transactions-card .calendar-icon--m .calendar-icon__header {
            font-size: 1.125rem;
            line-height: 1.56rem
        }

        .transactions-card .calendar-icon--m .calendar-icon__body {
            font-size: 3.125rem;
            font-weight: normal;
            line-height: 2.5rem;
            padding-bottom: 2px
        }

.rooster-toggle .transactions-card .calendar-icon--m .calendar-icon__body {
    padding-bottom: 4px
}

.transactions-card__details {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0
}

.transactions-card__details-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 10px
}

.transactions-card__details-content-summary {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden
}

.transactions-card__details-content-summary-details {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-left: 30px;
    list-style-type: none
}

.transactions-card__details-content-summary-details-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: start;
    align-items: flex-start
}

.transactions-card__details-content-summary-details-item-mobile-paid {
    display: none
}

    .transactions-card__details-content-summary-details-item-mobile-paid .transactions-card__details-content-summary-details-item-title {
        font-weight: normal
    }

        .transactions-card__details-content-summary-details-item-mobile-paid .transactions-card__details-content-summary-details-item-title:after {
            display: none
        }

    .transactions-card__details-content-summary-details-item-mobile-paid .transactions-card__details-content-summary-details-item-description {
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 2.5rem
    }

.transactions-card__details-content-summary-details-item > p {
    font-size: 1.25rem;
    line-height: 1.9rem
}

.transactions-card__details-content-summary-details-item--with-image {
    -ms-flex-align: center;
    align-items: center
}

.transactions-card__details-content-summary-details-item--main {
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-top: -3px;
    margin-bottom: 6px
}

    .transactions-card__details-content-summary-details-item--main > p {
        font-size: 1.375rem
    }

.transactions-card__details-content-summary-details-item-title {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-weight: bold
}

    .transactions-card__details-content-summary-details-item-title::after {
        content: ":"
    }

.transactions-card__details-content-summary-details-item-description {
    margin-left: 10px;
    white-space: nowrap
}

.transactions-card__details-content-summary-details-item-description-with-image {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    line-height: 0
}

.transactions-card__details-content-summary-details-item-description-overdue {
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 10px
}

.transactions-card__details-content-summary-details-item-description-image {
    padding-top: 1px
}

.transactions-card__details-content-summary-details-item-status {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.95rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal
}

.transactions-card__details-content-summary-details-item-extra {
    margin-left: 10px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-style: italic;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

.transactions-card__details-content-summary-details-item-extra-content {
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    max-width: 100%
}

.transactions-card__details-content-numbers {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: center;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    margin-left: 20px
}

.transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item {
    margin-right: 0;
    text-align: right;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-right: 20px
}

.transactions-card__details-content-numbers-has-stamp {
    padding-right: 43px
}

.transactions-card__details-content-numbers-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    width: 155px
}

.transactions-card__details-content-numbers-item--stamped {
    width: 240px
}

.transactions-card__details-content-numbers-item--paid {
    color: #70c624
}

    .transactions-card__details-content-numbers-item--paid .transactions-card__details-content-numbers-title {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .transactions-card__details-content-numbers-item--paid .transactions-card__details-content-numbers-title::before {
            background: url("/Media/payment-in.svg") no-repeat center center transparent;
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            margin-right: 7px;
            width: 24px;
            height: 24px
        }

.transactions-card__details-content-numbers-title {
    font-size: 1.25rem;
    white-space: nowrap
}

.transactions-card__details-content-numbers-amount {
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 1.33
}

.transactions-card__details-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.transactions-card__details-actions-links, .transactions-card__details-actions-buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style-type: none;
    margin: 0
}

.transactions-card__details-actions-links-item {
    margin-right: 40px
}

    .transactions-card__details-actions-links-item:last-of-type {
        margin-right: 0
    }

.transactions-card__details-actions-links-link {
    font-size: .8125rem;
    line-height: 24px;
    color: #4a90e2;
    text-decoration: underline;
    padding-left: calc(24px + 10px);
    position: relative;
    background-color: transparent;
    border: none;
    min-height: 24px;
    display: block;
    overflow: visible
}

.transactions-card__details-actions-links-link--query::before {
    background: url("/Media/query.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transactions-card__details-actions-links-link--view::before {
    background: url("/Media/view-invoice.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transactions-card__details-actions-links-link:hover {
    cursor: pointer
}

.transactions-card__details-actions-links-link::before {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: calc(100% - 24px);
    margin: auto
}

.transactions-card__details-actions-buttons-item {
    margin-right: 30px
}

    .transactions-card__details-actions-buttons-item:last-of-type {
        margin-right: 0
    }

.transactions-card__details-actions-buttons-button {
    width: 240px;
    height: 34px;
    border-radius: 99px
}

    .transactions-card__details-actions-buttons-button.transactions-card__download span:last-child {
        display: none
    }

    .transactions-card__details-actions-buttons-button.transactions-card__download.added-to-basket {
        background: #f6f6f6
    }

        .transactions-card__details-actions-buttons-button.transactions-card__download.added-to-basket span {
            display: none
        }

            .transactions-card__details-actions-buttons-button.transactions-card__download.added-to-basket span:last-child {
                display: block
            }

    .transactions-card__details-actions-buttons-button.cta.primary::after {
        opacity: 0;
        visibility: hidden;
        background: url("/Media/check-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 18px;
        height: 18px;
        background-color: #28343d;
        background-size: 12px;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 18px / 2);
        right: 8px;
        border: 0;
        left: auto;
        bottom: auto
    }

    .transactions-card__details-actions-buttons-button.added-to-basket.cta.primary::after {
        opacity: 1;
        visibility: visible
    }

.transactions-card__details-actions-buttons-button--pay.cta.primary {
    color: white;
    background-color: #70c624;
    border: 1px solid #70c624 !important
}

    .transactions-card__details-actions-buttons-button--pay.cta.primary::after {
        opacity: 0;
        visibility: hidden;
        background: url("/Media/check-green.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 18px;
        height: 18px;
        background-color: #fff;
        background-size: 12px;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 18px / 2);
        right: 8px;
        border: 0;
        left: auto;
        bottom: auto
    }

    .transactions-card__details-actions-buttons-button--pay.cta.primary.added-to-basket::after {
        opacity: 1;
        visibility: visible
    }

    .transactions-card__details-actions-buttons-button--pay.cta.primary:hover, .transactions-card__details-actions-buttons-button--pay.cta.primary:active {
        background-color: #5ca41e;
        border: 1px solid #5ca41e
    }

.transactions-card__details-actions-buttons-button.cta.primary {
    padding: 10px 0;
    margin: 0;
    font-size: .6875rem;
    border: 1px solid #c8c8c8
}

    .transactions-card__details-actions-buttons-button.cta.primary::before {
        display: none
    }

.transactions-card__stamp {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 267px
}

.transactions-card__stamp-image {
    width: 180px;
    margin-left: 80px
}

.transactions-card--overdue {
    background-color: #980001;
    color: #fff
}

    .transactions-card--overdue .transactions-card__details-content-numbers-item--paid {
        color: #fff
    }

        .transactions-card--overdue .transactions-card__details-content-numbers-item--paid .transactions-card__details-content-numbers-title::before {
            background: url("/Media/payment-in-white.svg") no-repeat center center transparent;
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            width: 24px;
            height: 24px;
            display: inline-block
        }

    .transactions-card--overdue .transactions-card__details-actions-links-link {
        color: #fff
    }

    .transactions-card--overdue .transactions-card__details-actions-links-link--query::before {
        background: url("/Media/query-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%
    }

    .transactions-card--overdue .transactions-card__details-actions-links-link--view::before {
        background: url("/Media/view-invoice-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%
    }

    .transactions-card--overdue .transactions-card__details-actions-links-link::before {
        width: 24px;
        height: 24px;
        display: inline-block
    }

@media screen and (max-width: 47.9375em) {
    .transactions-card--overdue .transactions-card__details-content-summary-details-item-description {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        max-width: none;
        min-width: 0
    }
}

.transactions-card--outgoing .transactions-card__details-content {
    padding-bottom: 0;
    border: none
}

.transactions-card--outgoing .transactions-card__details-content-summary-details-item:not(:first-child) .transactions-card__details-content-summary-details-item-description {
    margin-left: 0
}

.transactions-card--credit-note, .transactions-card--outgoing {
    background-color: #28343d;
    color: #fff
}

    .transactions-card--credit-note .calendar-icon--m, .transactions-card--outgoing .calendar-icon--m {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px
    }

        .transactions-card--credit-note .calendar-icon--m .calendar-icon__header, .transactions-card--outgoing .calendar-icon--m .calendar-icon__header {
            font-size: .8125rem;
            line-height: 1.235rem
        }

        .transactions-card--credit-note .calendar-icon--m .calendar-icon__body, .transactions-card--outgoing .calendar-icon--m .calendar-icon__body {
            font-size: 2.25rem;
            font-weight: normal;
            line-height: 1.755rem;
            padding-bottom: 2px
        }

.rooster-toggle .transactions-card--credit-note .calendar-icon--m .calendar-icon__body, .rooster-toggle .transactions-card--outgoing .calendar-icon--m .calendar-icon__body {
    padding-bottom: 3px
}

.transactions-card--credit-note:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before, .transactions-card--outgoing:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before {
    background: url("/Media/payment-out.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(-24px - 10px);
    top: 3px
}

.rooster-toggle .transactions-card--credit-note:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before, .rooster-toggle .transactions-card--outgoing:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before {
    top: 6px
}

@media screen and (max-width: 47.9375em) {
    .transactions-card--credit-note:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before, .transactions-card--outgoing:not(.transactions-card--allocate-payment) .transactions-card__details-content-summary-details-item-title::before {
        left: calc(-24px - 6px)
    }
}

.transactions-card--credit-note .transactions-card__details-content, .transactions-card--outgoing .transactions-card__details-content {
    -ms-flex-align: center;
    align-items: center
}

.transactions-card--credit-note .transactions-card__details-content--single, .transactions-card--outgoing .transactions-card__details-content--single {
    padding-bottom: 0;
    border: none;
    margin-bottom: 0;
    -ms-flex-align: center;
    align-items: center
}

.transactions-card--credit-note .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single, .transactions-card--outgoing .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single {
    -ms-flex-align: center;
    align-items: center
}

    .transactions-card--credit-note .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item {
        text-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .transactions-card--credit-note .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--outgoing .transactions-card__details-content--single-has-stamp .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item:last-of-type {
            margin-right: 0;
            padding-right: 0
        }

.transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers {
    -ms-flex-align: center;
    align-items: center
}

.transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item {
    margin-right: 30px;
    text-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box
}

    .transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item + .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item + .transactions-card__details-content-numbers-item:last-of-type {
        padding-right: 0
    }

    .transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item:last-of-type {
        margin-right: 0;
        text-align: right;
        -ms-flex-align: end;
        align-items: flex-end;
        padding-right: 20px
    }

@media screen and (max-width: 63.9375em) {
    .transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item {
        margin-right: 14px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--credit-note .transactions-card__details-content--single .transactions-card__details-content-numbers-item + .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item:last-of-type, .transactions-card--outgoing .transactions-card__details-content--single .transactions-card__details-content-numbers-item + .transactions-card__details-content-numbers-item:last-of-type {
        padding-right: 0
    }
}

.transactions-card--credit-note .transactions-card__details-content-summary .calendar-container, .transactions-card--outgoing .transactions-card__details-content-summary .calendar-container {
    padding-left: 20px
}

.transactions-card--credit-note .transactions-card__details-content-summary-details, .transactions-card--outgoing .transactions-card__details-content-summary-details {
    margin-left: 70px;
    overflow: visible;
    margin-top: 4px
}

.transactions-card--credit-note .transactions-card__details-content-summary-details-item-title, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title {
    position: relative
}

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-title::before, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title::before {
        background: url("/Media/payment-in.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        width: 24px;
        height: 24px;
        position: absolute;
        left: calc(-24px - 10px);
        top: 3px
    }

.rooster-toggle .transactions-card--credit-note .transactions-card__details-content-summary-details-item-title::before, .rooster-toggle .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title::before {
    top: 6px
}

.transactions-card--credit-note .transactions-card__details-content-summary-details-item-description-image, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-description-image {
    display: inline-block;
    height: 15px;
    vertical-align: middle
}

.transactions-card--credit-note .transactions-card__details-content-summary-details-item-description--single, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-description--single {
    margin-left: 0
}

.transactions-card--credit-note .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content-numbers-item {
    width: 240px
}

.transactions-card--credit-note .transactions-card__details-content-numbers-amount--single, .transactions-card--outgoing .transactions-card__details-content-numbers-amount--single {
    font-size: 2.5rem
}

.transactions-card--credit-note .transactions-card__details-actions-links-link, .transactions-card--outgoing .transactions-card__details-actions-links-link {
    color: #fff
}

.transactions-card--credit-note .transactions-card__details-actions-links-link--query::before, .transactions-card--outgoing .transactions-card__details-actions-links-link--query::before {
    background: url("/Media/query-white.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transactions-card--credit-note .transactions-card__details-actions-links-link--view::before, .transactions-card--outgoing .transactions-card__details-actions-links-link--view::before {
    background: url("/Media/view-invoice-white.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.transactions-card--credit-note .transactions-card__details-actions-links-link::before, .transactions-card--outgoing .transactions-card__details-actions-links-link::before {
    width: 24px;
    height: 24px;
    display: inline-block
}

@media screen and (max-width: 63.9375em) {
    .transactions-card {
        padding: 16px;
        margin-bottom: 24px
    }

    .transactions-card__details-content {
        padding-bottom: 15px
    }

    .transactions-card__details-content-summary-details-item--main {
        margin-top: 0;
        margin-bottom: 0
    }

    .transactions-card__details-content-summary-details-item-extra {
        position: absolute;
        width: 1px;
        visibility: hidden
    }

    .transactions-card__details-content-summary-details-item > p {
        font-size: .9375rem;
        line-height: 1.6rem
    }

    .transactions-card__details-content-summary-details-item-description-image {
        margin-top: -3px;
        padding-top: 0;
        height: 12px;
        margin-left: 1px
    }

    .transactions-card__details-content-summary-details-item-status {
        font-size: .9375rem;
        line-height: 1.57rem;
        margin-left: 11px
    }

    .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item {
        padding-right: 15px
    }

    .transactions-card__details-content-numbers-item {
        width: 115px
    }

    .transactions-card__details-content-numbers-item--stamped {
        width: 184px
    }

    .transactions-card__details-content-numbers-title {
        font-size: .9375rem;
        margin-bottom: 5px
    }

    .transactions-card__details-content-numbers-amount {
        font-size: 1.25rem
    }

    .transactions-card__details-actions-buttons-item {
        margin-right: 10px
    }

        .transactions-card__details-actions-buttons-item:last-of-type {
            margin-right: 0
        }

    .transactions-card__details-actions-buttons-button {
        width: 184px
    }

    .transactions-card__details-actions-links-item {
        margin-right: 25px
    }

        .transactions-card__details-actions-links-item:last-of-type {
            margin-right: 0
        }

    .transactions-card__stamp {
        width: calc(184px + 10px)
    }

    .transactions-card__stamp-image {
        width: 140px;
        margin-left: 40px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details, .transactions-card--outgoing .transactions-card__details-content-summary-details {
        margin-left: 50px;
        margin-top: 0
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-title::before, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title::before {
        top: 1px
    }

    .rooster-toggle .transactions-card--credit-note .transactions-card__details-content-summary-details-item-title::before, .rooster-toggle .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title::before {
        top: 5px;
        margin-top: -4px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-description-image, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-description-image {
        height: 12px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary .calendar-container, .transactions-card--outgoing .transactions-card__details-content-summary .calendar-container {
        padding-left: 0
    }

    .transactions-card--credit-note .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content-numbers-item {
        width: 184px
    }

    .transactions-card--credit-note .transactions-card__details-content-numbers-amount, .transactions-card--outgoing .transactions-card__details-content-numbers-amount {
        font-size: 1.875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-card {
        padding: 16px;
        position: relative
    }

    .transactions-card__details-content {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-bottom: 0;
        border-bottom: none
    }

    .transactions-card__details-content-has-stamp {
        padding-bottom: 3px
    }

        .transactions-card__details-content-has-stamp .transactions-card__details-content-numbers-has-stamp {
            display: none
        }

    .transactions-card__details-content-summary {
        width: 100%
    }

    .transactions-card__details-content-summary-details {
        margin-left: 15px
    }

    .transactions-card__details-content-summary-details-item-mobile-paid {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 6px
    }

    .transactions-card__details-content-summary-details-item > p {
        max-width: 75px;
        min-width: 75px
    }

    .transactions-card__details-content-summary-details-item-status {
        margin-left: 12px
    }

    .transactions-card__details-content-summary-details-item-description {
        margin-left: 7px
    }

    .transactions-card__details-content-numbers {
        margin: 0;
        margin-top: 15px;
        width: 100%
    }

    .transactions-card__details-content-numbers-single .transactions-card__details-content-numbers-item {
        padding-right: 0
    }

    .transactions-card__details-content-numbers-has-stamp {
        margin-top: 14px;
        padding-right: 0
    }

        .transactions-card__details-content-numbers-has-stamp .transactions-card__details-content-numbers-item {
            display: none
        }

    .transactions-card__details-content-numbers-item {
        width: calc(100% / 3)
    }

    .transactions-card__details-content-numbers-item--stamped {
        width: 100%;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }

        .transactions-card__details-content-numbers-item--stamped .transactions-card__details-content-numbers-title {
            margin-right: 50px
        }

    .transactions-card__details-content-numbers-title {
        font-size: .9375rem;
        margin-bottom: 0
    }

    .transactions-card__details-content-numbers-amount {
        font-size: 1.25rem
    }

    .transactions-card__details-actions {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        border-top: 1px solid #c8c8c8
    }

    .transactions-card__details-actions--has-stamp {
        width: calc(100% - 100px - 15px);
        min-height: 80px
    }

        .transactions-card__details-actions--has-stamp .transactions-card__details-actions-buttons-item {
            width: 100%
        }

        .transactions-card__details-actions--has-stamp .transactions-card__details-actions-links {
            padding-bottom: 0;
            border-bottom: none
        }

    .transactions-card__details-actions-buttons {
        width: 100%
    }

    .transactions-card__details-actions-buttons-item {
        width: calc(100% / 2 - 8px / 2);
        margin-right: 8px
    }

    .transactions-card__details-actions-buttons-button {
        width: 100%
    }

    .transactions-card__details-actions-links {
        width: 100%;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 8px 0;
        border-bottom: 1px solid #c8c8c8;
        margin-bottom: 14px
    }

    .transactions-card__details-actions-links-item {
        margin-right: 25px
    }

        .transactions-card__details-actions-links-item:last-of-type {
            margin-right: 0
        }

    .transactions-card__stamp {
        width: calc(120px - 15px);
        height: 80px;
        position: absolute;
        bottom: 16px;
        right: 16px;
        padding-left: 15px
    }

    .transactions-card__stamp-image {
        width: 104px;
        height: 71px;
        margin-left: 0
    }

    .transactions-card--credit-note .transactions-card__details-content, .transactions-card--outgoing .transactions-card__details-content {
        position: relative
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details, .transactions-card--outgoing .transactions-card__details-content-summary-details {
        margin-left: 47px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-title::before, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-title::before {
        left: calc(-24px - 6px);
        margin-top: -2px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item > p, .transactions-card--outgoing .transactions-card__details-content-summary-details-item > p {
        max-width: none
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-description, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-description {
        -ms-flex-positive: 1;
        flex-grow: 1
    }

    .transactions-card--credit-note .transactions-card__details-content-summary-details-item-description-image, .transactions-card--outgoing .transactions-card__details-content-summary-details-item-description-image {
        max-width: 100%;
        height: 12px;
        float: right;
        padding-top: 1px
    }

    .transactions-card--credit-note .transactions-card__details-content-summary .calendar-container, .transactions-card--outgoing .transactions-card__details-content-summary .calendar-container {
        padding-left: 0
    }

    .transactions-card--credit-note .transactions-card__details-content-numbers, .transactions-card--outgoing .transactions-card__details-content-numbers {
        position: absolute;
        top: 25px;
        right: 0;
        width: auto;
        margin: 0
    }

    .transactions-card--credit-note .transactions-card__details-content-numbers-item, .transactions-card--outgoing .transactions-card__details-content-numbers-item {
        width: auto
    }

    .transactions-card--credit-note .transactions-card__details-content-numbers-amount, .transactions-card--outgoing .transactions-card__details-content-numbers-amount {
        font-size: 1.25rem
    }

    .transactions-card--credit-memo .transactions-card__details-content-summary {
        padding-bottom: 15px
    }

    .transactions-card--allocate-payment .transactions-card__details-content-summary {
        padding-bottom: 15px;
        border-bottom: 1px solid #c8c8c8
    }

    .transactions-card--allocate-payment .transactions-card__details-content-summary-details-item-description--single {
        width: calc(100% - 100px);
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-flex-positive: 0;
        flex-grow: 0
    }

    .transactions-card--allocate-payment .transactions-card__details-content--single .transactions-card__details-content-numbers-item {
        margin-right: 0
    }

    .transactions-card--allocate-payment .transactions-card__details-content--single .transactions-card__details-content-numbers-item--single:last-of-type {
        margin-right: auto
    }

    .transactions-card--allocate-payment .transactions-card__details-content-numbers {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 15px
    }

    .transactions-card--allocate-payment .transactions-card__details-content-numbers-item--single {
        width: 180px;
        margin: 0 auto
    }

    .transactions-card--allocate-payment .transactions-card__details-content-numbers-amount {
        position: absolute;
        top: 23px;
        right: 0
    }
}

@media screen and (max-width: 47.9375em) and (max-width: 47.9375em) {
    .transactions-card--allocated .transactions-card__details-content-summary {
        padding-bottom: 0;
        border-bottom: none
    }

    .transactions-card--allocated .transactions-card__details-content-numbers {
        margin: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .transactions-card .calendar-icon--m {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px
    }

        .transactions-card .calendar-icon--m .calendar-icon__header {
            font-size: .8125rem;
            line-height: 1.26rem
        }

        .transactions-card .calendar-icon--m .calendar-icon__body {
            font-size: 2.25rem;
            line-height: 1.8rem;
            padding-bottom: 2px;
            padding-top: 2px
        }

    .rooster-toggle .transactions-card .calendar-icon--m .calendar-icon__body {
        padding-top: 1px
    }

    .transactions-card--credit-note .calendar-icon--m, .transactions-card--outgoing .calendar-icon--m {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px
    }

        .transactions-card--credit-note .calendar-icon--m .calendar-icon__header, .transactions-card--outgoing .calendar-icon--m .calendar-icon__header {
            font-size: .6875rem;
            font-weight: normal;
            line-height: 0.987rem
        }

        .transactions-card--credit-note .calendar-icon--m .calendar-icon__body, .transactions-card--outgoing .calendar-icon--m .calendar-icon__body {
            font-size: 1.75rem;
            font-weight: normal;
            line-height: 1.4rem;
            padding-bottom: 2px;
            padding-top: 2px
        }

    .rooster-toggle .transactions-card--credit-note .calendar-icon--m .calendar-icon__body, .rooster-toggle .transactions-card--outgoing .calendar-icon--m .calendar-icon__body {
        padding-bottom: 3px
    }
}

.transactions-banner {
    padding: 15px 0 50px
}

    .transactions-banner .grid-wide {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

    .transactions-banner .grid, .transactions-banner .grid-wide {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

.transactions-banner__nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 420px
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner__nav {
        width: 320px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner__nav {
        width: 100%
    }
}

.transactions-banner__nav-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner__nav-container {
        width: 100%;
        margin-bottom: 15px
    }
}

.transactions-banner__nav-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin: 0
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner__nav-title {
        margin-bottom: 15px
    }
}

.transactions-banner__nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    height: 120px
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner__nav-link {
        height: 90px
    }
}

.transactions-banner__nav-link-icon {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto auto;
    transition: filter 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner__nav-link-icon {
        width: 58px;
        height: 58px
    }
}

.transactions-banner__nav-link-icon.hover {
    display: none
}

.transactions-banner__nav-link-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #c8c8c8
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner__nav-link-icon-container {
        width: 64px;
        height: 64px
    }
}

.transactions-banner__nav-link-icon-container:hover {
    border: 1px solid #28343d
}

    .transactions-banner__nav-link-icon-container:hover .transactions-banner__nav-link-icon {
        display: none;
        background-color: #28343d
    }

        .transactions-banner__nav-link-icon-container:hover .transactions-banner__nav-link-icon.hover {
            display: block
        }

.transactions-banner__nav-link-title {
    font-size: 1.25rem;
    font-weight: bold
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner__nav-link-title {
        font-size: 1rem
    }
}

.transactions-banner .account-summary__container {
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 50%
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner .account-summary__container {
        max-width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .transactions-banner .account-summary {
        height: auto;
        min-height: auto;
        padding: 0 30px
    }

    .transactions-banner .account-summary__credit-title, .transactions-banner .account-summary__credit-amount {
        font-size: .9375rem
    }

    .transactions-banner .account-summary__credit-group--main .account-summary__credit-amount {
        font-size: 1.5625rem
    }

    .transactions-banner .account-summary__credit-panel {
        min-height: 150px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner .account-summary {
        padding: 0 15px
    }

    .transactions-banner .account-summary__credit-panel {
        min-height: 170px
    }
}

@media screen and (max-width: 47.9375em) {
    .transactions-banner {
        padding: 15px 0 25px
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content {
    max-width: 586px;
    padding: 50px 40px;
    display: none
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content {
        overflow-y: scroll;
        overflow-x: hidden
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content--default {
    display: -ms-flexbox;
    display: flex
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content-title {
    font-weight: normal;
    margin-bottom: 14px
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content-title .query-invoice-modal-type::after {
        content: ":"
    }

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content--success {
    padding: 40px 40px 52px
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content--success .modal-overlay__content-title {
        font-size: 1.375rem;
        font-weight: bold
    }

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content-description {
    max-width: 368px
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__content-description {
        font-size: .8125rem
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__close {
    top: 20px;
    right: 20px
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 40px
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container .btn {
        min-width: 248px
    }

        .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container .btn + .btn {
            margin-left: 10px
        }

@media screen and (max-width: 63.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container .btn--cancel {
        border-color: #c8c8c8;
        color: #28343d;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700
    }

        .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container .btn--cancel:hover {
            background-color: #f6f6f6
        }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container--center {
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container:not(.modal-overlay__button-container--normal) {
        margin-top: 0;
        bottom: 0;
        height: 60px;
        box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
        background-color: #fff
    }

        .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container:not(.modal-overlay__button-container--normal) .btn {
            min-width: 50%;
            border: none;
            border-radius: 0;
            height: 100%
        }

            .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container:not(.modal-overlay__button-container--normal) .btn + .btn {
                margin-left: 0
            }

    .modal-overlay[data-modal-id="query-invoice-modal"] .modal-overlay__button-container.overflown {
        position: static;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin: 40px -40px -50px
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__form-field {
    margin-bottom: 25px;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__form-field label {
        display: block;
        margin-bottom: 5px
    }

    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__form-field:last-of-type {
        margin-bottom: 0
    }

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__textarea {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #c8c8c8;
    font-size: .9375rem;
    font-family: inherit;
    color: #28343d;
    overflow: auto
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__textarea:-moz-placeholder {
        color: #c8c8c8
    }

    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__textarea:-ms-input-placeholder {
        color: #c8c8c8
    }

    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__textarea::placeholder {
        color: #c8c8c8
    }

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__textarea {
        font-size: 1rem
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice-textarea-counter {
    display: block;
    width: 100%;
    margin-top: 6px;
    text-align: right;
    color: #c8c8c8;
    font-size: .8125rem
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__form-error {
    display: block;
    display: none;
    font-size: .8125rem;
    color: #c20016;
    margin-bottom: 5px
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__field-error {
    border-left: 2px solid #c20016
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__confirmation-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    min-height: 330px;
    position: relative
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__confirmation-icon {
    display: block;
    margin: 0 auto 30px
}

.modal-overlay[data-modal-id="query-invoice-modal"] .query-invoice__confirmation-image {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    transform: translateX(-50%);
    width: 508px;
    z-index: -1
}

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox {
    position: relative
}

   

        .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select[data-native-select="true"] {
            display: none
        }

@media screen and (max-width: 47.9375em) {
    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select[data-native-select="true"] {
        position: absolute;
        width: 100%;
        z-index: 3;
        display: block;
        opacity: 0;
        font-size: 1rem
    }
}

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select::-ms-expand {
    display: none
}

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select.changed {
    color: #28343d
}

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select option {
    color: #28343d
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .query-invoice__select option:disabled {
        display: none
    }

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .selectbox-label {
    width: 100%;
    height: 40px;
    padding: 10px;
    background-color: #f9f9f9;
    color: #28343d;
    font-size: .9375rem;
    border: 1px solid #c8c8c8;
    border-bottom: none;
    box-sizing: border-box;
    background-image: url(/Media/arrow-up-select.svg),linear-gradient(to right, #f9f9f9, #f9f9f9);
    background-position: calc(100% - 10px),100%;
    background-size: 24px;
    background-repeat: no-repeat
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .selectbox-label[data-value=""] {
        color: #c8c8c8
    }

    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .selectbox-label.query-invoice__field-error {
        border-left: 2px solid #c20016
    }

    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .selectbox-label::after {
        content: none
    }

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox.default-state .selectbox-label {
    border-bottom: 1px solid #c8c8c8;
    background-image: url(/Media/arrow-down-select.svg),linear-gradient(to right, #f9f9f9, #f9f9f9)
}

.modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .options-wrap {
    position: absolute;
    border: 1px solid #c8c8c8;
    border-top: none;
    left: 0;
    right: 0;
    background-color: #fff
}

    .modal-overlay[data-modal-id="query-invoice-modal"] .form-selectbox .custom-selectbox .options-wrap ul {
        list-style-type: none;
        margin: 0
    }

.js-mobile-keyboard-on .modal-overlay__button-container {
    top: 150%
}

.flat-payment {
    display: -ms-flexbox;
    display: flex;
    margin: 50px 0;
    padding: 0 24px;
    -ms-flex-pack: center;
    justify-content: center
}

.flat-payment__back {
    display: inline-block;
    margin-bottom: 33px;
    font-size: 1.125rem;
    font-weight: bold;
    color: #28343d
}

    .flat-payment__back:before {
        background: url("/Media/arrow-left.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        margin: 2px 17px 0 0;
        display: inline-block;
        width: 16px;
        height: 16px
    }

.flat-payment__back-ico:before {
    background: url("/Media/arrow-left.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%
}

.flat-payment__form {
    width: 100%;
    max-width: 586px
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__form {
        max-width: 472px
    }
}

@media screen and (max-width: 47.9375em) {
    .flat-payment__form {
        max-width: 359px
    }
}

.flat-payment__inner {
    padding: 52px 40px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2)
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__inner {
        padding: 40px
    }
}

.flat-payment__title {
    display: block;
    padding-bottom: 17px;
    margin-bottom: 32px;
    border-bottom: 1px solid #c8c8c8;
    font-size: 1.25rem
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__title {
        padding-bottom: 11px;
        margin-bottom: 23px;
        font-size: 1.125rem
    }
}

.flat-payment__info {
    margin-bottom: 10px;
    color: #71777b
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__info {
        font-size: .8125rem
    }
}

.flat-payment__actions {
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__actions {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 1
    }
}

.flat-payment__label {
    display: inline-block;
    margin-bottom: 4px;
    font-size: .9375rem
}

@media screen and (max-width: 47.9375em) {
    .flat-payment__label {
        margin-bottom: 0
    }
}

.flat-payment--error .flat-payment__label {
    margin-bottom: 3px
}

@media screen and (max-width: 47.9375em) {
    .flat-payment--error .flat-payment__label {
        margin-bottom: 0
    }
}

.flat-payment__input-container {
    margin: 4px 0 50px;
    position: relative
}

    .flat-payment__input-container input {
        height: 40px;
        min-width: 180px;
        padding-left: 16px;
        border: solid 1px #c8c8c8;
        background-color: #f9f9f9;
        color: #28343d;
        font-size: .9375rem;
        box-shadow: none
    }

    .flat-payment__input-container:before {
        content: '\00a3';
        display: block;
        position: absolute;
        top: 14px;
        left: 9px;
        font-size: .9375rem
    }

@media screen and (max-width: 63.9375em) {
    .ipad .flat-payment__input-container:before, .iphone .flat-payment__input-container:before {
        top: 15.5px;
        left: 10px
    }
}

.ie .flat-payment__input-container:before {
    top: 13px
}

@media screen and (max-width: 63.9375em) {
    .flat-payment__input-container {
        margin: 7px 0 5px
    }
}

.flat-payment__submit--valid {
    border-color: #70c624;
    background: #70c624
}

    .flat-payment__submit--valid:hover {
        background: #70c624
    }

    .flat-payment__submit--valid:focus {
        background: #70c624
    }

.flat-payment__error {
    display: none;
    color: #c20016;
    font-size: .8125rem;
    line-height: 17px
}

.flat-payment--error .flat-payment__error {
    display: block;
    margin-bottom: 10px
}

.flat-payment--error .flat-payment__input {
    border-left: 2px solid #c20016
}

.flat-payment .btn {
    -ms-flex: 1;
    flex: 1;
    min-width: inherit
}

@media screen and (max-width: 63.9375em) {
    .flat-payment .btn {
        margin: 0;
        border-radius: 0
    }
}

.flat-payment .btn.flat-payment__submit {
    margin-left: 10px
}

@media screen and (max-width: 63.9375em) {
    .flat-payment .btn.flat-payment__submit {
        margin-left: 0
    }
}

.no-results {
    display: none;
    margin-top: 20px;
    margin-bottom: 80px
}

.no-results__panel {
    margin: 0 auto 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center
}

.no-results__title {
    font-size: 1.875rem;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-weight: bold
}

.rooster-toggle .no-results__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .no-results__title {
        font-size: 1.5625rem
    }
}

.no-results__subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .no-results__subtitle {
        font-size: 1.25rem
    }
}

.no-results h3.no-results__subtitle {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-weight: 300
}

.rooster-toggle .no-results h3.no-results__subtitle {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

.no-results__links {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.no-results__links-item, .no-results__links-item-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center
}

.no-results__links-item {
    margin-bottom: 10px
}

    .no-results__links-item:last-of-type {
        margin-bottom: 0
    }

.no-results__links-item-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px
}

.no-results__links-item-content {
    font-size: .9375rem
}

@media screen and (max-width: 63.9375em) {
    .no-results__links-item-content {
        font-size: .8125rem
    }
}

.no-results__links-item-content-link {
    margin-left: 5px;
    color: #4a90e2;
    text-decoration: underline;
    font-size: .8125rem;
    background-color: transparent;
    border: none;
    padding: 0
}

    .no-results__links-item-content-link:hover {
        cursor: pointer
    }

.no-results__remove-filters {
    margin: 0 auto;
    width: 426px
}

@media screen and (max-width: 47.9375em) {
    .no-results .container {
        padding: 0 10px
    }
}

.no-transactions {
    display: none;
    margin-top: 40px;
    margin-bottom: 80px
}

.no-transactions__panel {
    margin: 0 auto 30px;
    max-width: 426px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center
}

.no-transactions__content {
    text-align: center
}

.no-transactions__back {
    margin: 0 auto;
    width: 426px
}

@media screen and (max-width: 47.9375em) {
    .no-transactions .container {
        padding: 0 10px
    }
}

.no-statements {
    margin-top: 40px;
    margin-bottom: 80px
}

.no-statements__panel {
    margin: 0 auto 40px;
    max-width: 426px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center
}

.no-statements__title {
    font-size: 1.875rem;
    margin-bottom: 15px;
    text-align: center;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-weight: bold
}

.rooster-toggle .no-statements__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 63.9375em) {
    .no-statements__title {
        font-size: 1.5625rem
    }
}

.no-statements__content {
    text-align: center
}

.no-statements__link {
    margin: 0 auto;
    width: 426px
}

@media screen and (max-width: 47.9375em) {
    .no-statements .container {
        padding: 0 10px
    }
}

.payment-summary__title {
    margin: 55px 0 25px;
    font-family: "Rooster",sans-serif;
    font-size: 1.875rem
}

@media screen and (max-width: 63.9375em) {
    .payment-summary__title {
        margin: 35px 0 16px;
        font-size: 1.5625rem
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-summary__title {
        text-align: center
    }
}

.payment-summary .btn.btn--cancel {
    width: 400px;
    margin: 21px auto 122px
}

@media screen and (max-width: 63.9375em) {
    .payment-summary .btn.btn--cancel {
        width: 75%;
        margin: 21px auto 60px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-summary .btn.btn--cancel {
        width: 100%;
        margin: 16px auto 40px
    }
}

.payment-summary .online-account-banner {
    margin: 38px 0
}

@media screen and (max-width: 63.9375em) {
    .payment-summary .online-account-banner {
        margin: 12px 0 35px
    }
}

.payment-summary .online-account-banner--error {
    margin: 0;
    padding: 14px 0 14px 34px
}

@media screen and (max-width: 47.9375em) {
    .payment-summary .online-account-banner--error {
        padding: 14px
    }
}

.payment-summary .online-account-banner--error::after {
    display: none
}

.payment-summary .online-account-banner__inner {
    position: relative;
    padding-left: 34px
}

    .payment-summary .online-account-banner__inner::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        width: 30px;
        height: 30px;
        background-image: url("/Media/error.svg");
        background-repeat: no-repeat
    }

@media screen and (max-width: 63.9375em) {
    .payment-summary .online-account-banner__inner::after {
        top: -1px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-summary .online-account-banner__inner::after {
        top: 50%;
        transform: translateY(-50%)
    }
}

.payment-summary .online-account-banner__inner .online-account-banner__content {
    padding-right: 30px
}

@media screen and (max-width: 63.9375em) {
    .payment-summary .account-page-title {
        margin-bottom: 12px
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-summary .account-page-title {
        margin-bottom: 19px
    }
}

.payment-summary .transactions-card--incoming .transactions-card__details-content-summary-details-item-title::before {
    background: url("/Media/payment-in.svg") no-repeat center center transparent;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    margin-right: 7px;
    width: 24px;
    height: 24px
}

.payment-summary-bar {
    width: 100%;
    position: fixed;
    margin-top: 30px;
    bottom: 0;
    left: 0;
    font-family: "Rooster",sans-serif;
    z-index: 1
}

    .payment-summary-bar::after {
        content: '';
        position: absolute;
        height: 20px;
        width: 100vw;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
        top: -20px;
        left: 50%;
        transform: translateX(-50%)
    }

.payment-summary-bar__inner {
    background: #28343d;
    position: relative;
    z-index: 1
}

.payment-summary-bar__payment {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    padding: 25px 24px
}

@media screen and (max-width: 63.9375em) {
    .payment-summary-bar__payment {
        padding: 0
    }
}

.payment-summary-bar__total {
    font-size: 1.25rem;
    color: #fff
}

@media screen and (max-width: 63.9375em) {
    .payment-summary-bar__total {
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        padding: 0 10px;
        min-width: 50%;
        box-sizing: border-box
    }
}

@media screen and (max-width: 47.9375em) {
    .payment-summary-bar__total {
        font-size: .9375rem
    }
}

.payment-summary-bar__amount {
    margin-left: 10px;
    font-size: 1.875rem;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (max-width: 47.9375em) {
    .payment-summary-bar__amount {
        display: block;
        margin: 0;
        font-size: 1.375rem
    }
}

.payment-summary-bar__pay {
    position: relative;
    margin-left: 84px;
    min-height: 48px
}

    .payment-summary-bar__pay.btn--chevron-right::after {
        top: -0.05rem
    }

    .payment-summary-bar__pay.btn--chevron-left::after {
        top: 0
    }

    .payment-summary-bar__pay.js-pay-modal-loading {
        font-size: 0;
        color: transparent;
        text-indent: -999rem;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        min-height: 48px
    }

        .payment-summary-bar__pay.js-pay-modal-loading:disabled {
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .payment-summary-bar__pay.js-pay-modal-loading:disabled:hover {
                border-color: #c8c8c8;
                background: #c8c8c8
            }

        .payment-summary-bar__pay.js-pay-modal-loading:hover {
            animation: 0
        }

        .payment-summary-bar__pay.js-pay-modal-loading::before {
            background: url("/Media/loader.svg") no-repeat center center transparent;
            background-size: contain;
            content: "";
            display: block;
            height: 24px;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 24px
        }

    .payment-summary-bar__pay--disabled, .payment-summary-bar__pay:disabled {
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-color: #c8c8c8;
        background: #c8c8c8;
        pointer-events: none
    }

        .payment-summary-bar__pay--disabled:hover, .payment-summary-bar__pay--disabled:focus, .payment-summary-bar__pay:disabled:hover, .payment-summary-bar__pay:disabled:focus {
            border-color: #c8c8c8;
            background: #c8c8c8
        }

@media screen and (max-width: 63.9375em) {
    .payment-summary-bar__pay {
        -ms-flex: 1;
        flex: 1;
        margin: 0;
        padding: 20px;
        border-radius: 0;
        min-width: 50%
    }
}

.payment-summary-bar__error {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 0;
    transform: translateY(100%);
    transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1)
}

.payment-summary-bar__error--show {
    transform: translateY(0)
}

.call-to-action {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .call-to-action .column {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(25% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .call-to-action .column {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.call-to-action a {
    display: inline-block;
    margin: 20px 0 0
}

.call-to-action.type-primary {
    background: #f1f1f1;
    padding: 50px 0
}

@media print, screen and (min-width: 64em) {
    .call-to-action.type-primary {
        padding: 100px 0
    }
}

.call-to-action .cta {
    background: transparent
}

.call-to-action.type-secondary {
    margin: 50px 0
}

.call-to-action.type-tertiary {
    padding: 50px 0
}

.call-to-action .cta {
    background: transparent
}

.hero-homepage {
    position: relative
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .hero-homepage {
        min-height: 115px
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-homepage {
        min-height: 160px
    }
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .hero-homepage {
        min-height: 230px
    }
}

.hero-homepage .image-container {
    background-color: #28343d;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .image-container {
        width: 100%
    }
}

.hero-homepage .body-1:empty {
    display: none
}

.hero-homepage.hero-depot {
    background-color: #28343d
}

    .hero-homepage.hero-depot .img-wrapper {
        position: relative
    }

        .hero-homepage.hero-depot .img-wrapper::after {
            background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.4));
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1
        }

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .img-wrapper::after {
        width: 60%
    }
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .img-wrapper {
        padding-bottom: 0
    }
}

.hero-homepage.hero-depot .content-container {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    z-index: 2
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .content-container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        max-width: 94.25rem;
        margin: 0 auto;
        left: 50%;
        max-width: 94.25rem;
        transform: translate3d(-50%, -50%, 0);
        width: 100%
    }
}

@media print, screen and (min-width: 48em) and (min-width: 30.0625em) {
    .hero-homepage.hero-depot .content-container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 48em) {
    .hero-homepage.hero-depot .content-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 64em) {
    .hero-homepage.hero-depot .content-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

.hero-homepage.hero-depot .content-container .suggestions-container {
    background: #fff;
    border: 1px solid #c8c8c8;
    border-top: 0;
    box-sizing: border-box;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    top: 100%;
    width: 100%
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-homepage.hero-depot .content-container .suggestions-container {
        border: 1px solid #c8c8c8;
        border-top: 0;
        height: auto;
        margin: 0;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage.hero-depot .content-container .suggestions-container {
        padding-left: 12px;
        padding-right: 12px
    }
}

.hero-homepage.hero-depot .content-container .search-error {
    background: #fff;
    border: 1px solid #c8c8c8;
    border-top: 0;
    box-sizing: border-box;
    margin: 0;
    padding-left: 20px;
    width: 100%
}

.hero-homepage.hero-depot .content-container h1 {
    font-size: 1.875rem
}

@media print, screen and (min-width: 30.0625em) {
    .hero-homepage.hero-depot .content-container h1 {
        margin-bottom: 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage.hero-depot .content-container h1 {
        font-size: 2.5rem;
        margin-bottom: 10px
    }
}

.hero-homepage.hero-depot .search-header {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 10px;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .search-header {
        padding-top: 20px
    }
}

.hero-homepage.hero-depot .search-header .wrapper {
    background: #fff
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .search-header .wrapper {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage.hero-depot .search-header .wrapper {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.hero-homepage.hero-depot .search-header .container {
    margin: 0 1.5625rem;
    padding: 0
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .search-header .container {
        margin: 0
    }
}

.hero-homepage.hero-depot .search-header .search-form {
    margin-top: 0
}

.hero-homepage.hero-depot .content {
    color: #fff;
    padding: 0 25px;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .content {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem);
        padding: 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage.hero-depot .content {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media screen and (min-width: 81.25em) {
    .hero-homepage.hero-depot .content {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.hero-homepage.hero-depot .content::before {
    background-color: #fff;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 21px;
    width: 15px
}

@media print, screen and (min-width: 48em) {
    .hero-homepage.hero-depot .content::before {
        left: -57px;
        top: 21px;
        width: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage.hero-depot .content::before {
        left: -79px;
        top: 25px;
        width: 59px
    }
}

@media screen and (min-width: 81.25em) {
    .hero-homepage.hero-depot .content::before {
        left: -113px;
        top: 25px;
        width: 84px
    }
}

.hero-homepage:not(.hero-depot) {
    overflow: hidden
}

    .hero-homepage:not(.hero-depot) .content {
        background-color: #28343d;
        padding: 25px 25px 35px;
        width: 100%
    }

@media print, screen and (min-width: 48em) {
    .hero-homepage:not(.hero-depot) .content {
        width: calc(75% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        padding: 50px 30px 50px calc(16.66%)
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage:not(.hero-depot) .content {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.hero-homepage:not(.hero-depot) .content::before {
    left: 0;
    top: 40px;
    width: 15px
}

@media print, screen and (min-width: 48em) {
    .hero-homepage:not(.hero-depot) .content::before {
        left: 8%;
        top: 67px;
        width: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage:not(.hero-depot) .content::before {
        left: 11%;
        top: 75px;
        width: 59px
    }
}

@media screen and (min-width: 81.25em) {
    .hero-homepage:not(.hero-depot) .content::before {
        left: 113px;
        width: 84px
    }
}

.hero-homepage .img-wrapper {
    height: auto;
    overflow: hidden;
    padding-bottom: 0
}

    .hero-homepage .img-wrapper img {
        position: relative
    }

.hero-homepage .content-container {
    box-sizing: border-box;
    position: relative;
    transform: translate3d(0, 0, 0);
    z-index: 2
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content-container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        max-width: 94.25rem;
        margin: 0 auto;
        margin: -110px 0 0
    }
}

@media print, screen and (min-width: 48em) and (min-width: 30.0625em) {
    .hero-homepage .content-container {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 48em) {
    .hero-homepage .content-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 64em) {
    .hero-homepage .content-container {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage .content-container {
        margin: -140px 0 0
    }
}

.hero-homepage .content-container .content {
    box-sizing: border-box;
    position: relative
}

    .hero-homepage .content-container .content .label {
        animation: heroTranslation ease-in .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .hero-homepage .content-container .content h1 {
        animation: heroTranslation ease-in .45s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .hero-homepage .content-container .content .body-1 {
        animation: heroTranslation ease-in .5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .hero-homepage .content-container .content .cta {
        animation: heroTranslation ease-in .55s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

@media screen and (min-width: 64em) {
    .hero-homepage .content-container .content::before {
        animation: heroContentBeforeOnDesktop linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-homepage .content-container .content::before {
        animation: heroContentBeforeOnTablet linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s
    }
}

@media screen and (max-width: 19.9375em) {
    .hero-homepage .content-container .content::before {
        animation: heroContentBeforeOnMobile linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s
    }
}

.hero-homepage .content-container .author {
    animation: heroTranslation ease-in .55s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s
}

.hero-homepage .content-container .grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content-container .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 30.0625em) {
    .hero-homepage .content-container .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 48em) {
    .hero-homepage .content-container .grid {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 64em) {
    .hero-homepage .content-container .grid {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.hero-homepage h1 {
    font-size: 1.5625rem;
    line-height: 1.4
}

@media print, screen and (min-width: 64em) {
    .hero-homepage h1 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .hero-homepage h1 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .hero-homepage h1 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.hero-homepage .content {
    color: #fff;
    padding: 0 25px;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem);
        padding: 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage .content {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.hero-homepage .content::before {
    background-color: #fff;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 19px;
    width: 15px
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content::before {
        left: -57px;
        top: 19px;
        width: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-homepage .content::before {
        left: -79px;
        top: 25px;
        width: 59px
    }
}

@media screen and (min-width: 81.25em) {
    .hero-homepage .content::before {
        left: -113px;
        top: 25px;
        width: 84px
    }
}

.hero-homepage .content p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    margin-bottom: 20px
}

.rooster-toggle .hero-homepage .content p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .hero-homepage .content p {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.hero-homepage .content a {
    display: block
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content a {
        display: inline-block
    }
}

.hero-homepage .content a.cta {
    background: rgba(0,0,0,0)
}

@media screen and (max-width: 19.9375em) {
    .hero-homepage .content a.cta {
        margin-right: 0
    }
}

.hero-homepage .content .icon {
    float: right
}

@media print, screen and (min-width: 48em) {
    .hero-homepage .content .icon {
        float: none
    }
}

.js .hero-homepage .img-fluid {
    display: block
}

.hero-editorial {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    overflow: hidden;
    position: relative
}

    .hero-editorial .container {
        display: inline-block;
        vertical-align: top
    }

    .hero-editorial .content-container {
        background-color: #28343d;
        color: #fff;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-flow: column;
        flex-flow: column;
        -ms-flex-pack: center;
        justify-content: center;
        left: auto;
        margin: 0;
        padding: 50px 0;
        position: relative;
        top: auto;
        transform: translate3d(0, 0, 0);
        width: 100%
    }

@media print, screen and (min-width: 48em) {
    .hero-editorial .content-container {
        padding: 0;
        width: 50%
    }
}

.hero-editorial .content-container .content .label {
    animation: heroTranslation ease-in .4s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s
}

.hero-editorial .content-container .content h1 {
    animation: heroTranslation ease-in .45s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .hero-editorial .content-container .content h1 {
        font-size: 1.875rem
    }
}

.hero-editorial .content-container .content .body-1 {
    animation: heroTranslation ease-in .5s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s
}

.hero-editorial .content-container .content .cta {
    animation: heroTranslation ease-in .55s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s
}

@media print, screen and (min-width: 64em) {
    .hero-editorial .content-container .content::before {
        animation: heroContentBeforeOnDesktop linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s;
        left: 15px
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-editorial .content-container .content::before {
        animation: heroContentBeforeOnTablet linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s
    }
}

@media screen and (max-width: 19.9375em) {
    .hero-editorial .content-container .content::before {
        animation: heroContentBeforeOnMobile linear .4s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode: backwards;
        animation-delay: .6s
    }
}

.hero-editorial .content-container p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    margin-bottom: 20px
}

.rooster-toggle .hero-editorial .content-container p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .hero-editorial .content-container p {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.hero-editorial .content-container .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff
}

.rooster-toggle .hero-editorial .content-container .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .hero-editorial .content-container .label {
        font-size: .75rem;
        line-height: 1
    }
}

.hero-editorial .content-container .cta {
    display: block
}

@media print, screen and (min-width: 48em) {
    .hero-editorial .content-container .cta {
        display: inline-block
    }
}

.hero-editorial .content-container .author {
    animation: heroTranslation ease-in .55s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    bottom: auto;
    display: block;
    height: 40px;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .hero-editorial .content-container .author {
        bottom: 50px;
        position: absolute
    }
}

.hero-editorial .content-container .author .img-wrapper {
    display: inline-block;
    height: 40px;
    margin-right: 5px;
    vertical-align: middle;
    width: 40px
}

.hero-editorial .content-container .author img {
    border-radius: 50%;
    max-height: 40px;
    vertical-align: middle;
    width: 40px
}

.hero-editorial .content {
    margin: 0;
    position: relative;
    width: auto
}

@media screen and (min-width: 81.25em) {
    .hero-editorial .content {
        max-width: 484px
    }
}

.hero-editorial .content.no-label .label {
    display: none
}

.hero-editorial .content.no-label::before {
    top: 18px
}

@media screen and (min-width: 81.25em) {
    .hero-editorial .content.no-label::before {
        top: 28px
    }
}

.hero-editorial .content::before {
    background-color: #fff;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 15px
}

@media print, screen and (min-width: 48em) {
    .hero-editorial .content::before {
        left: 0;
        width: 37px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-editorial .content::before {
        left: 15px;
        width: 49px
    }
}

@media screen and (min-width: 81.25em) {
    .hero-editorial .content::before {
        left: 15px;
        width: 72px
    }
}

.hero-editorial .column {
    padding: 0 25px
}

@media print, screen and (min-width: 48em) {
    .hero-editorial .column {
        padding: 0 50px
    }
}

@media print, screen and (min-width: 64em) {
    .hero-editorial .column {
        padding: 0 96px
    }
}

@media screen and (min-width: 81.25em) {
    .hero-editorial .column {
        padding: 0 118px
    }
}

.hero-editorial .image-container {
    background-color: #28343d;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .hero-editorial .image-container {
        text-align: right;
        width: 50%
    }
}

.hero-editorial .image-container .img-wrapper {
    height: 100%;
    overflow: hidden
}

    .hero-editorial .image-container .img-wrapper img {
        display: block;
        position: relative
    }

.hero-banner .image-container {
    overflow: hidden
}

@media screen and (max-width: 19.9375em) {
    .hero-banner .image-container .img-wrapper.aspect-hero {
        padding-bottom: 100%
    }
}

.hero-banner .container h2 {
    font-size: 1.125rem;
    line-height: 1.39
}

@media print, screen and (min-width: 64em) {
    .hero-banner .container h2 {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .hero-banner .container h2 {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.hero-banner .container .subsection {
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 0 32px;
    position: relative;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .hero-banner .container .subsection {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: -50px 0 0;
        padding: 30px 40px 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-banner .container .subsection {
        padding: 32px 40px 0
    }
}

@media screen and (min-width: 81.25em) {
    .hero-banner .container .subsection {
        padding: 44px 87px 0
    }
}

.hero-banner .container .subsection .body-1 {
    margin-bottom: 20px
}

.hero-banner .container .subsection p:last-child {
    margin-bottom: 0
}

.hero-banner .container .subsection .w-heading, .hero-banner .container .subsection .w-text {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    float: left;
    margin-left: 0
}

@media print, screen and (min-width: 48em) {
    .hero-banner .container .subsection .w-heading, .hero-banner .container .subsection .w-text {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

.hero-banner .container .subsection .mobile-optional-heading-logo {
    display: none;
    float: left;
    margin: 30px 0 0
}

@media screen and (max-width: 19.9375em) {
    .hero-banner .container .subsection .mobile-optional-heading-logo {
        display: block
    }
}

.hero-banner .container .w-heading .heading-2 {
    font-size: 1.5625rem;
    line-height: 1.4
}

@media print, screen and (min-width: 64em) {
    .hero-banner .container .w-heading .heading-2 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .hero-banner .container .w-heading .heading-2 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .hero-banner .container .w-heading .heading-2 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.hero-banner .container .w-heading .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    margin-top: -10px
}

.rooster-toggle .hero-banner .container .w-heading .heading-3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .hero-banner .container .w-heading .heading-3 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.hero-banner .container .w-heading .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: static;
    right: initial;
    z-index: 1
}

.rooster-toggle .hero-banner .container .w-heading .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .hero-banner .container .w-heading .status {
        font-size: .75rem;
        line-height: 1
    }
}

@media screen and (max-width: 47.9375em) {
    .hero-banner .container .w-heading .status {
        margin-bottom: 10px
    }
}

.hero-banner .container .w-heading .title-img {
    margin: 54px 0 0
}

@media screen and (max-width: 63.9375em) {
    .hero-banner .container .w-heading .title-img {
        display: none
    }
}

.hero-banner .container .grid {
    margin: 0
}

.hero-banner .container .label {
    margin-top: 13px
}

@media screen and (max-width: 63.9375em) {
    .hero-banner .container .label {
        margin-top: 6px
    }
}

@media screen and (max-width: 47.9375em) {
    .hero-banner .container .label {
        margin-top: 4px
    }
}

.hero-banner .container .label::before, .hero-banner .container .label::after {
    display: none
}

.hero-banner .container .btn + .btn {
    margin-left: 0
}

.hero-banner .container .btn:hover {
    background: none
}

.hero-banner.single-column .container {
    max-width: 100%;
    padding: 0
}

    .hero-banner.single-column .container .subsection {
        width: 100%;
        margin: 0;
        padding: 10px 0 32px
    }

        .hero-banner.single-column .container .subsection .w-heading, .hero-banner.single-column .container .subsection .w-text {
            width: 100%;
            margin: 0;
            float: none
        }

        .hero-banner.single-column .container .subsection .body-1, .hero-banner.single-column .container .subsection p {
            margin: 0;
            color: #71777b;
            font-size: .9375rem;
            line-height: 1.5625rem;
            font-weight: normal
        }

@media screen and (max-width: 63.9375em) {
    .hero-banner.single-column .container .subsection .body-1, .hero-banner.single-column .container .subsection p {
        font-size: .8125rem;
        line-height: 20px
    }
}

.hero-banner.single-column .container .subsection .w-text a {
    font-size: .9375rem
}

.hero-banner.single-column .container .subsection .w-heading .heading-2 {
    font-size: 1.875rem;
    line-height: 2.5rem;
    margin-bottom: 4px;
    color: #28343d
}

@media screen and (max-width: 63.9375em) {
    .hero-banner.single-column .container .subsection .w-heading .heading-2 {
        font-size: 1.5625rem;
        line-height: 2.1875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .hero-banner.single-column .container .subsection .w-heading .heading-2 {
        margin-bottom: 0
    }
}

.hero-banner.register-appliance {
    margin-top: 45px
}

@media screen and (max-width: 63.9375em) {
    .hero-banner.register-appliance .container .subsection {
        padding: 20px 20px 0 30px
    }
}

.hero-banner .w-attributes {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    clear: both;
    display: inline-block;
    margin: 50px 0 0;
    overflow: hidden;
    padding: 22px 0 15px
}

    .hero-banner .w-attributes dl {
        color: #8c8c8c;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        font-size: .8125rem;
        margin-left: 0
    }

@media print, screen and (min-width: 48em) {
    .hero-banner .w-attributes dl {
        margin-left: 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-banner .w-attributes dl {
        font-size: .9375rem;
        margin-left: -.875rem
    }
}

.hero-banner .w-attributes .type {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin: 0;
    padding: 5px 0;
    width: 50%
}

@media print, screen and (min-width: 48em) {
    .hero-banner .w-attributes .type {
        width: calc(41.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .hero-banner .w-attributes .type {
        width: calc(16.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding: 10px 0;
        width: calc(18% - 1.75rem)
    }
}

.hero-banner .w-attributes .value {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin-right: 0;
    padding: 5px 0;
    width: calc(50% - 0.9375rem)
}

@media print, screen and (min-width: 48em) {
    .hero-banner .w-attributes .value {
        width: calc(58.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0
    }
}

@media print, screen and (min-width: 64em) {
    .hero-banner .w-attributes .value {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding: 10px 0;
        width: calc(32% - 1.75rem)
    }
}

.hero-banner .body-1:empty {
    display: none
}

.inpage-search {
    margin-bottom: 25px;
    margin-top: -40px;
    position: relative;
    z-index: 1
}

@media screen and (min-width: 64em) {
    .inpage-search {
        margin-bottom: 50px;
        margin-top: -40px
    }
}

.inpage-search .search-form {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%
}

.inpage-search .search-text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    border: 1px solid #c8c8c8;
    font-size: 1.25rem;
    padding: 25px 50px 26px 20px;
    width: 100%
}

.rooster-toggle .inpage-search .search-text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 48em) {
    .inpage-search .search-text {
        padding: 20px 70px 21px 25px
    }
}

@media screen and (min-width: 64em) {
    .inpage-search .search-text {
        font-size: 1.875rem;
        padding: 20px 75px 21px 25px
    }
}

.inpage-search .search-submit {
    background: none;
    border: 0;
    color: #c20016;
    font-size: 0;
    height: 22px;
    margin-top: -11px;
    position: absolute;
    right: 22px;
    top: 50%
}

@media screen and (min-width: 48em) {
    .inpage-search .search-submit {
        right: 34px
    }
}

@media screen and (min-width: 64em) {
    .inpage-search .search-submit {
        right: 44px
    }
}

.inpage-search .search-submit::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    content: '\e906';
    font-size: 1.375rem
}

.video-component {
    background-color: #fff;
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .video-component {
        margin: 100px 0
    }
}

@media screen and (max-width: 63.9375em) {
    .video-component .container {
        padding: 0;
        width: auto
    }

        .video-component .container .grid {
            margin: 0
        }
}

.video-component .column {
    background-color: #28343d;
    margin: 0;
    position: relative;
    width: 100%
}

@media print, screen and (min-width: 64em) {
    .video-component .column {
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (min-width: 81.25em) {
    .video-component .column {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.video-component .video-button {
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 60px;
    left: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 60px;
    z-index: 1
}

@media print, screen and (min-width: 48em) {
    .video-component .video-button {
        height: 80px;
        width: 80px
    }
}

.video-component .icon {
    background: none
}

    .video-component .icon .play::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e918';
        color: #000;
        font-size: 80px;
        left: 50%;
        opacity: 0.5;
        position: absolute;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        vertical-align: middle
    }

    .video-component .icon .play::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e904';
        color: #fff;
        font-size: 1.5625rem;
        left: 50%;
        margin-left: 2px;
        position: absolute;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        vertical-align: middle
    }

    .video-component .icon .play:hover::before {
        color: red;
        opacity: 1
    }

.video-component .content {
    bottom: 0;
    color: #fff;
    padding: 15px 25px;
    position: absolute
}

@media print, screen and (min-width: 48em) {
    .video-component .content {
        padding: 20px 50px;
        width: 50%
    }
}

@media screen and (min-width: 64em) {
    .video-component .content {
        padding: 20px
    }
}

.video-component .content h2 {
    margin-bottom: 3px
}

@media screen and (max-width: 19.9375em) {
    .video-component .content h2 {
        font-size: 1.25rem
    }
}

@media screen and (min-width: 48em) {
    .video-component .content h2 {
        margin-bottom: 5px
    }
}

.video-component .content p {
    margin-bottom: 0
}

@media screen and (max-width: 19.9375em) {
    .video-component .content p {
        line-height: 1
    }
}

.video-component .video-img {
    background-color: #28343d;
    margin: 0;
    position: relative
}

    .video-component .video-img::after {
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
        bottom: 0;
        content: '';
        height: 70%;
        left: 0;
        position: absolute;
        width: 100%
    }

    .video-component .video-img img {
        max-width: 100%;
        width: 100%
    }

@media screen and (max-width: 19.9375em) {
    .video-component.with-copy .video-button {
        top: 35%
    }
}

.video-component.video-added .video-img::after {
    content: none
}

.content-teaser {
    margin-bottom: 50px;
    margin-top: 50px;
    word-wrap: break-word
}

@media print, screen and (min-width: 48em) {
    .content-teaser {
        margin-bottom: 100px;
        margin-top: 100px
    }
}

.content-teaser .content-teaser-img a {
    display: block;
    overflow: hidden
}

    .content-teaser .content-teaser-img a img {
        transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
        vertical-align: bottom
    }

.content-teaser h2, .content-teaser .body-1 {
    margin-bottom: 20px
}

.content-teaser .secondary {
    display: inline-block;
    line-height: 1.3;
    margin-bottom: 0
}

@media screen and (max-width: 47.9375em) {
    .content-teaser .content-teaser-block:not(:last-child) {
        margin-bottom: 50px
    }
}

.content-teaser .grid {
    position: relative
}

.content-teaser .content {
    -ms-flex-positive: 1;
    flex-grow: 1
}

    .content-teaser .content .smallcaps, .content-teaser .content .cta-wrapper {
        clear: both
    }

@media print, screen and (min-width: 48em) {
    .content-teaser .content .smallcaps, .content-teaser .content .cta-wrapper {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser .content .smallcaps, .content-teaser .content .cta-wrapper {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

@media print, screen and (min-width: 48em) {
    .content-teaser .content h2, .content-teaser .content .body-1 {
        width: calc(66.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem);
        float: left
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser .content h2, .content-teaser .content .body-1 {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

.content-teaser .content .body-1 {
    padding-top: 3px
}

.content-teaser .content .cta-wrapper {
    margin-bottom: 30px
}

.content-teaser.one-col {
    position: relative
}

    .content-teaser.one-col .content-teaser-block {
        -ms-flex: 1;
        flex: 1;
        margin-top: 0
    }

    .content-teaser.one-col .content-teaser-img {
        margin-left: -1.5625rem;
        margin-right: -1.5625rem;
        overflow: hidden;
        padding-bottom: 133.33%;
        position: relative
    }

@media print, screen and (min-width: 30.0625em) {
    .content-teaser.one-col .content-teaser-img {
        margin-left: -1.5625rem;
        margin-right: -1.5625rem
    }
}

@media print, screen and (min-width: 48em) {
    .content-teaser.one-col .content-teaser-img {
        margin-left: -2.875rem;
        margin-right: -2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.one-col .content-teaser-img {
        margin-left: -2.875rem;
        margin-right: -2.875rem
    }
}

@media print, screen and (min-width: 48em) {
    .content-teaser.one-col .content-teaser-img {
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        padding-bottom: calc(56.25% - 1.5rem)
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.one-col .content-teaser-img {
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .content-teaser.one-col .content-teaser-img {
        padding-bottom: 65%
    }
}

.content-teaser.one-col .content-teaser-img img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .content-teaser.one-col .content-teaser-img img {
        max-width: 100%;
        object-fit: contain;
        width: auto
    }
}

@media screen and (max-width: 19.9375em) {
    .content-teaser.one-col .content-teaser-img img {
        max-width: none
    }
}

.content-teaser.one-col .content-block {
    background: #fff;
    color: #262626;
    margin-top: -125px;
    padding-left: 8.3333333333%;
    padding-right: 8.3333333333%;
    position: relative;
    z-index: 1
}

@media screen and (max-width: 19.9375em) {
    .content-teaser.one-col .content-block {
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
        top: initial;
        transform: translate3d(0, 0, 0)
    }

        .content-teaser.one-col .content-block .cta {
            display: block;
            margin-right: 0
        }
}

@media print, screen and (min-width: 30.0625em) {
    .content-teaser.one-col .content-block {
        width: calc(66.6666666667% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        margin-left: calc(8.3333333333% + .75rem);
        margin-top: -55px
    }

        .content-teaser.one-col .content-block .cta {
            display: inline-block
        }
}

@media print, screen and (min-width: 48em) {
    .content-teaser.one-col .content-block {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem)
    }

        .content-teaser.one-col .content-block .cta {
            display: inline-block
        }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.one-col .content-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem);
        min-height: 130px
    }
}

@media screen and (min-width: 81.25em) {
    .content-teaser.one-col .content-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.content-teaser.one-col .content-block .on-image {
    background: #fff;
    color: #28343d
}

    .content-teaser.one-col .content-block .on-image::before {
        color: #c20016
    }

.content-teaser.one-col .content-block h3 {
    font-size: 1.5625rem;
    padding-top: 20px
}

@media print, screen and (min-width: 64em) {
    .content-teaser.one-col .content-block h3 {
        padding-top: 30px
    }
}

@media screen and (min-width: 81.25em) {
    .content-teaser.one-col .content-block h3 {
        font-size: 2.5rem
    }
}

.content-teaser.one-col .content-block .heading-4 {
    font-size: 1.5625rem;
    line-height: 1.4;
    margin-bottom: 20px
}

@media print, screen and (min-width: 64em) {
    .content-teaser.one-col .content-block .heading-4 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .content-teaser.one-col .content-block .heading-4 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .content-teaser.one-col .content-block .heading-4 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

@media screen and (max-width: 47.9375em) {
    .content-teaser.two-col .content-teaser-block {
        margin-left: -1.5625rem;
        margin-right: -1.5625rem;
        width: calc(100% + 3.125rem)
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 30.0625em) {
    .content-teaser.two-col .content-teaser-block {
        margin-left: -1.5625rem;
        margin-right: -1.5625rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 48em) {
    .content-teaser.two-col .content-teaser-block {
        margin-left: -2.875rem;
        margin-right: -2.875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 64em) {
    .content-teaser.two-col .content-teaser-block {
        margin-left: -2.875rem;
        margin-right: -2.875rem
    }
}

@media print, screen and (min-width: 48em) {
    .content-teaser.two-col .content-teaser-block {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem);
        overflow: hidden
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.two-col .content-teaser-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

@media screen and (max-width: 47.9375em) {
    .content-teaser.two-col .content-teaser-block .content-teaser-img img {
        width: 100%
    }
}

.content-teaser.two-col .content-teaser-block .content-block {
    background: #fff;
    margin-left: 8.3333333333%;
    margin-top: -35px;
    min-height: 31px;
    padding-left: 8.3333333333%;
    position: relative
}

@media screen and (max-width: 47.9375em) {
    .content-teaser.two-col .content-teaser-block .content-block {
        padding-right: 25px
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.two-col .content-teaser-block .content-block {
        margin-top: -60px;
        min-height: 56px
    }
}

.content-teaser.two-col .content-teaser-block .content-block h3 {
    padding-top: 17px
}

@media print, screen and (min-width: 64em) {
    .content-teaser.two-col .content-teaser-block .content-block h3 {
        padding-top: 30px
    }
}

.no-touch .content-teaser.two-col .content-teaser-img a img:hover {
    transform: scale(1.05) translate3d(0, 0, 0)
}

@media print, screen and (min-width: 64em) {
    .content-teaser.two-col .content .body-1 {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

@media screen and (min-width: 81.25em) {
    .content-teaser.two-col .content .body-1 {
        margin-left: calc(0% + .875rem)
    }
}

.content-teaser .js .content-teaser-img .img-fluid {
    display: block
}

.content-teaser.three-col .content-teaser-img {
    margin-bottom: 20px
}

.no-touch .content-teaser.three-col .content-teaser-img a img:hover {
    transform: scale(1.05) translate3d(0, 0, 0)
}

@media print, screen and (min-width: 30.0625em) {
    .content-teaser.three-col .grid:last-child {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 30.0625em) and (min-width: 30.0625em) {
    .content-teaser.three-col .grid:last-child {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 30.0625em) and (min-width: 48em) {
    .content-teaser.three-col .grid:last-child {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 30.0625em) and (min-width: 64em) {
    .content-teaser.three-col .grid:last-child {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.content-teaser.three-col .content-teaser-block {
    width: 100%
}

@media print, screen and (min-width: 30.0625em) {
    .content-teaser.three-col .content-teaser-block {
        width: calc(33.3333333333% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        margin-left: calc(0% + .71875rem);
        overflow: hidden
    }
}

@media print, screen and (min-width: 48em) {
    .content-teaser.three-col .content-teaser-block {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .content-teaser.three-col .content-teaser-block {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

.content-teaser.three-col .content-teaser-block .content-block {
    background: #fff
}

.long-form-copy {
    margin: 50px 0 30px;
    padding: 0
}

@media print, screen and (min-width: 64em) {
    .long-form-copy {
        margin: 100px 0 80px
    }
}

.long-form-copy:first-child {
    margin: 0;
    padding: 50px 0 30px
}

@media print, screen and (min-width: 64em) {
    .long-form-copy:first-child {
        padding: 100px 0 80px
    }
}

.long-form-copy h2 {
    margin: 0 0 10px
}

@media print, screen and (min-width: 64em) {
    .long-form-copy h2 {
        margin: 0 0 20px
    }
}

.long-form-copy h2:empty {
    display: none
}

@media print, screen and (min-width: 30.0625em) {
    .long-form-copy .column {
        width: calc(83.3333333333% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        margin-left: calc(8.3333333333% + .71875rem)
    }
}

@media print, screen and (min-width: 48em) {
    .long-form-copy .column {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .long-form-copy .column {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media screen and (min-width: 81.25em) {
    .long-form-copy .column {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(16.6666666667% + .875rem)
    }
}

.long-form-copy .w-rte {
    font-size: .9375rem;
    font-weight: normal;
    line-height: 1.67
}

    .long-form-copy .w-rte a {
        border-bottom: 1px solid #28343d
    }

.no-touch .long-form-copy .w-rte a:hover {
    border-bottom-color: #c20016
}

.long-form-copy .quote {
    margin: 20px 0 0
}

@media print, screen and (min-width: 48em) {
    .long-form-copy .quote {
        padding-left: 0
    }
}

.long-form-copy .quote * {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39;
    margin: 0
}

@media print, screen and (min-width: 64em) {
    .long-form-copy .quote * {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .long-form-copy .quote * {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle .long-form-copy .quote * {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.long-form-copy .quote p {
    font-size: 1.25rem
}

    .long-form-copy .quote p:first-child::after {
        content: close-quote
    }

    .long-form-copy .quote p:first-child::before {
        content: open-quote
    }

.long-form-copy .quote .author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    margin-top: 20px
}

.rooster-toggle .long-form-copy .quote .author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .long-form-copy .quote .author {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.long-form-copy p.quote {
    font-size: 1.25rem;
    font-weight: 700
}

body:not(.theme-depot) .long-form-copy p.quote {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600
}

.rooster-toggle .long-form-copy p.quote {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.long-form-copy p.quote::after {
    content: close-quote
}

.long-form-copy p.quote::before {
    content: open-quote
}

.long-form-copy p.author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    margin-top: 20px
}

.rooster-toggle .long-form-copy p.author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .long-form-copy p.author {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.image-gallery {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .image-gallery {
        margin: 100px 0
    }
}

.image-gallery .content {
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .image-gallery .content {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery .content {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(16.6666666667% + .875rem);
        margin-bottom: 30px
    }
}

.image-gallery .content .copy {
    margin-top: 20px
}

.image-gallery .content .title, .image-gallery .content .label {
    margin-bottom: 0
}

    .image-gallery .content .label::before, .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .content-block::before, .editorial-quote .image-gallery .content .content-block::before {
        background-color: #c20016;
        content: '';
        height: 2px;
        margin-top: 5px;
        position: absolute;
        width: 15px
    }

@media screen and (max-width: 47.9375em) {
    .image-gallery .content .label::before, .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .content-block::before, .editorial-quote .image-gallery .content .content-block::before {
        left: 0
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .image-gallery .content .label::before, .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .content-block::before, .editorial-quote .image-gallery .content .content-block::before {
        left: 0;
        width: 37px
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery .content .label::before, .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .content-block::before, .editorial-quote .image-gallery .content .content-block::before {
        margin-left: -68px;
        width: 49px
    }
}

@media screen and (min-width: 81.25em) {
    .image-gallery .content .label::before, .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .content-block::before, .editorial-quote .image-gallery .content .content-block::before {
        margin-left: -102px;
        width: 72px
    }
}

.image-gallery .content .stroke::before {
    margin-top: 17px
}

@media screen and (min-width: 81.25em) {
    .image-gallery .content .stroke::before {
        margin-top: 25px
    }
}

.image-gallery .image-label {
    border-left: 2px solid #c8c8c8;
    margin-top: 15px;
    padding-left: 20px
}

@media print, screen and (min-width: 64em) {
    .image-gallery .image-label {
        margin-top: 20px
    }
}

.image-gallery .image-label .copy {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    color: #28343d;
    margin-bottom: 10px
}

.rooster-toggle .image-gallery .image-label .copy {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .image-gallery .image-label .copy {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.image-gallery .image-label .cta {
    display: inline-block
}

.image-gallery .image-label .label {
    color: #71777b;
    margin-bottom: 10px
}

.image-gallery.one-image .gallery-img {
    margin-top: 31px;
    position: relative;
    width: auto
}

@media print, screen and (min-width: 48em) {
    .image-gallery.one-image .gallery-img {
        margin-top: 34px
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.one-image .gallery-img {
        margin-top: 0
    }
}

.image-gallery.one-image .column {
    width: 100%
}

@media print, screen and (min-width: 64em) {
    .image-gallery.one-image .column {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.image-gallery.two-image {
    position: relative
}

    .image-gallery.two-image .gallery-block {
        margin-top: 30px
    }

@media print, screen and (min-width: 64em) {
    .image-gallery.two-image .gallery-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-top: 0;
        overflow: hidden
    }
}

.image-gallery.two-image .gallery-block.column {
    width: 75%;
    margin-right: 0;
    margin-left: 0
}

@media screen and (max-width: 47.9375em) {
    .image-gallery.two-image .gallery-block.column:nth-child(odd) {
        margin-left: calc(25% + .71875rem)
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .image-gallery.two-image .gallery-block.column:nth-child(odd) {
        margin-left: calc(25% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.two-image .gallery-block.column:nth-child(odd) {
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.two-image .gallery-block.column {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.image-gallery.two-image .gallery-img {
    position: relative
}

.image-gallery.three-image {
    position: relative
}

@media print, screen and (min-width: 64em) {
    .image-gallery.three-image .content {
        margin-bottom: 50px
    }
}

.image-gallery.three-image .gallery-block {
    margin-top: 30px
}

@media print, screen and (min-width: 64em) {
    .image-gallery.three-image .gallery-block {
        margin-top: 0;
        overflow: hidden
    }
}

@media screen and (max-width: 47.9375em) {
    .image-gallery.three-image .gallery-block.column:nth-child(1) {
        width: 75%;
        margin-right: 0;
        margin-left: 0;
        margin-left: calc(25% + .75rem)
    }
}

@media print, screen and (min-width: 48em) {
    .image-gallery.three-image .gallery-block.column:nth-child(1) {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-top: 250px
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.three-image .gallery-block.column:nth-child(1) {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem);
        margin-top: 250px
    }
}

.image-gallery.three-image .gallery-block.column:nth-child(2) {
    width: 75%;
    margin-right: 0;
    margin-left: 0
}

@media print, screen and (min-width: 48em) {
    .image-gallery.three-image .gallery-block.column:nth-child(2) {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.three-image .gallery-block.column:nth-child(2) {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (max-width: 47.9375em) {
    .image-gallery.three-image .gallery-block.column:nth-child(3) {
        width: 75%;
        margin-right: 0;
        margin-left: 0;
        margin-left: calc(25% + .71875rem)
    }
}

@media print, screen and (min-width: 48em) {
    .image-gallery.three-image .gallery-block.column:nth-child(3) {
        width: calc(41.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(50% + .875rem);
        margin-top: -170px
    }
}

@media print, screen and (min-width: 64em) {
    .image-gallery.three-image .gallery-block.column:nth-child(3) {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(50% + .875rem);
        margin-top: -190px
    }
}

.image-gallery.three-image .gallery-img {
    position: relative
}

.editorial-key-messages {
    margin: 50px 0
}

@media screen and (min-width: 48em) {
    .editorial-key-messages {
        margin: 100px 0
    }
}

@media screen and (min-width: 48em) {
    .editorial-key-messages .content {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem)
    }
}

@media screen and (min-width: 64em) {
    .editorial-key-messages .content {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

@media screen and (max-width: 19.9375em) {
    .editorial-key-messages .content-copy {
        margin-top: 10px
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .editorial-key-messages .content-copy {
        margin-top: 20px
    }
}

@media screen and (min-width: 48em) {
    .editorial-key-messages .content-copy {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(0% + .75rem)
    }
}

@media screen and (min-width: 64em) {
    .editorial-key-messages .content-copy {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.editorial-key-messages .w-cta {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin-top: 20px
}

@media screen and (max-width: 47.9375em) {
    .editorial-key-messages .w-cta {
        margin-bottom: 10px;
        margin-left: 0
    }
}

.editorial-key-messages .elements-block {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin-left: calc(0% + .71875rem);
    margin-top: 20px
}

@media screen and (min-width: 48em) {
    .editorial-key-messages .elements-block {
        margin-left: calc(0% + .75rem)
    }
}

@media screen and (min-width: 64em) {
    .editorial-key-messages .elements-block {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(0% + .875rem)
    }
}

@media screen and (min-width: 81.25em) {
    .editorial-key-messages .elements-block {
        margin-top: 35px
    }
}

.editorial-key-messages .grid:nth-child(even) {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .editorial-key-messages .grid:nth-child(even) {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .editorial-key-messages .grid:nth-child(even) {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-key-messages .grid:nth-child(even) {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.editorial-key-messages h2 {
    margin-bottom: 0
}

.editorial-key-messages .img-label {
    margin-top: 10px
}

@media screen and (min-width: 64em) {
    .editorial-key-messages .img-label {
        margin-top: 15px
    }
}

.editorial-key-messages .img-label h3 {
    margin-bottom: 5px
}

.editorial-key-messages .img-label p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    margin-bottom: 5px
}

.rooster-toggle .editorial-key-messages .img-label p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .editorial-key-messages .img-label p {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 64em) {
    .editorial-key-messages .img-label p {
        margin-bottom: 10px
    }
}

.editorial-key-messages.dos-donts .img-fluid {
    width: 114px
}

@media print, screen and (min-width: 48em) {
    .editorial-key-messages.dos-donts .img-fluid {
        width: 120px
    }
}

.exp-mode .editorial-key-messages .elements-block.column img {
    max-height: 208px;
    max-width: 278px
}

.carousel {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .carousel {
        margin: 100px 0
    }
}

.carousel .heading h2 {
    margin-bottom: 20px
}

.carousel .heading .cta.secondary {
    display: inline-block;
    position: relative
}

    .carousel .heading .cta.secondary:after {
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

.no-touch .carousel .heading .cta.secondary:hover:after {
    transform: scaleX(1);
    visibility: visible
}

.carousel .heading .cta.secondary::after {
    background-color: #c20016;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 12px
}

.no-touch .carousel .heading .cta.secondary:hover {
    color: #c20016
}

.carousel .cta {
    display: inline-block;
    margin-bottom: 32px
}

    .carousel .cta::after {
        border-bottom: 0
    }

.carousel .grid {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .carousel .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .carousel .grid {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .carousel .grid {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.carousel .column {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.4375rem);
    margin-right: .71875rem;
    margin-left: .71875rem
}

@media print, screen and (min-width: 48em) {
    .carousel .column {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }

        .carousel .column h2 {
            margin-left: 0;
            margin-right: 0
        }

        .carousel .column .product-desc {
            margin-left: 0;
            margin-right: 0
        }
}

@media print, screen and (min-width: 64em) {
    .carousel .column {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

        .carousel .column .product-desc {
            width: calc(66.6666666667% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem;
            margin-left: 0;
            margin-right: 0
        }
}

@media screen and (min-width: 81.25em) {
    .carousel .column h2 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: 0;
        margin-right: 0
    }

    .carousel .column .product-desc {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: 0;
        margin-right: 0
    }
}

.carousel .column .product-desc {
    margin-bottom: 20px
}

.carousel .item-container {
    margin: 0;
    width: 100%
}

    .carousel .item-container .item-block {
        float: left;
        position: relative;
        width: calc(75% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        max-width: 240px
    }

@media print, screen and (min-width: 30.0625em) {
    .carousel .item-container .item-block {
        max-width: 212px
    }
}

@media print, screen and (min-width: 48em) {
    .carousel .item-container .item-block {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        max-width: none
    }
}

@media print, screen and (min-width: 64em) {
    .carousel .item-container .item-block {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.carousel .item-container .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: absolute;
    right: -1px;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.rooster-toggle .carousel .item-container .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .carousel .item-container .status {
        font-size: .75rem;
        line-height: 1
    }
}

.carousel.multi-carousel img {
    transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72)
}

.no-touch .carousel.multi-carousel img:hover {
    transform: scale(1.05)
}

.carousel .slider {
    overflow: hidden;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .carousel .slider {
        overflow: hidden
    }
}

.carousel .slider::-webkit-scrollbar-track {
    border-radius: 0;
    box-shadow: inset 0 0 3px #c8c8c8
}

.carousel .slider::-webkit-scrollbar {
    height: 2px
}

.carousel .slider::-webkit-scrollbar-thumb {
    background-color: #c20016;
    border-radius: 0
}

.carousel .slider.no-scroll {
    overflow: hidden
}

    .carousel .slider.no-scroll .list {
        transform: translate3d(0, 0, 0) !important
    }

.carousel .slider .list {
    display: block;
    height: 100%
}

@media screen and (max-width: 63.9375em) {
    .carousel .slider .list {
        overflow: hidden
    }
}

@media print, screen and (min-width: 64em) {
    .carousel .slider .list {
        transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72)
    }
}

.carousel .dots {
    bottom: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0
}

@media print, screen and (min-width: 64em) {
    .carousel .dots {
        bottom: 30px
    }
}

.carousel .dots .dot {
    background-color: #c8c8c8;
    border-radius: 50%;
    display: inline-block;
    height: 0.625rem;
    margin: 0 0.625rem;
    width: 0.625rem
}

    .carousel .dots .dot.active {
        background-color: #c20016
    }

.carousel .scrollbar-container {
    background: #c8c8c8;
    height: 2px;
    margin: 0.975rem 15px 0;
    width: 100%
}

@media print, screen and (min-width: 64em) {
    .carousel .scrollbar-container {
        display: block;
        margin-top: 1.875rem
    }
}

.carousel .scrollbar-container .scrollbar {
    background-color: #c20016;
    height: 100%;
    transition: transform 0.5s ease-in-out
}

.carousel .arrow {
    display: none;
    float: right;
    transition: all 0.5s ease-in-out;
    z-index: 1
}

@media print, screen and (min-width: 64em) {
    .carousel .arrow {
        -ms-flex-align: center;
        align-items: center;
        bottom: 30px;
        display: -ms-inline-flexbox;
        display: inline-flex;
        position: absolute
    }
}

.carousel .arrow.left {
    margin-right: 10px;
    right: 50px
}

.carousel .arrow.right {
    right: 0
}

.carousel .arrow::after {
    margin: 17px
}

.carousel .last {
    position: relative
}

    .carousel .last .img-wrapper {
        background-color: #c20016
    }

    .carousel .last .cta {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #c20016;
        border-color: #fff;
        border-width: 1px;
        color: #fff;
        margin: 0;
        min-width: 65px;
        z-index: 1
    }

        .carousel .last .cta.primary {
            border: 1px solid #c8c8c8
        }

        .carousel .last .cta::before {
            color: #fff
        }

.carousel .content-teaser-img {
    border: 1px solid #c8c8c8;
    margin-bottom: 20px;
    overflow: hidden
}

    .carousel .content-teaser-img img {
        transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1)
    }

.no-touch .carousel .content-teaser-img:hover img {
    transform: scale(1.05) translate3d(-47.5%, -47.5%, 0)
}

.carousel .title {
    display: block;
    margin-bottom: 3px;
    margin-right: 0;
    padding-right: 15px;
    position: relative
}

    .carousel .title::after {
        display: none
    }

    .carousel .title::before {
        right: 0;
        top: 13px
    }

.no-touch .carousel .title:hover {
    color: #c20016;
    transition: 0.7s
}

.carousel .sku, .carousel .caption {
    margin-bottom: 3px
}

.carousel.single {
    margin: 0;
    padding: 30px 0 45px;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .carousel.single {
        padding: 10px 0 60px
    }
}

.carousel.single .slider {
    overflow: hidden;
    padding-bottom: 0
}

.carousel.single .item-block {
    margin: 0;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .carousel.single .item-block {
        width: 100vw !important
    }
}

.carousel.single .arrow {
    display: -ms-inline-flexbox;
    display: inline-flex
}

@keyframes cta-nextprev-arrow {
    0% {
        transform: translate3d(0, 0, 0)
    }

    25% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    50% {
        opacity: 0;
        transform: translate3d(25px, 0, 0)
    }

    51% {
        opacity: 0;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    100% {
        transform: translate3d(100, 0, 0)
    }
}

.hero-depot + .carousel {
    margin-top: 30px
}

@media print, screen and (min-width: 48em) {
    .hero-depot + .carousel {
        margin-top: 70px
    }
}

.back-to-top {
    bottom: 120px;
    display: none;
    height: 0;
    position: fixed;
    width: 100%;
    z-index: 10
}

    .back-to-top.show {
        display: block
    }

@media screen and (min-width: 100.0625em) {
    .back-to-top .container {
        margin: 0
    }
}

.back-to-top span {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background: #fff;
    cursor: pointer;
    float: right;
    padding: 24px 30px
}

.rooster-toggle .back-to-top span {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .back-to-top span {
        font-size: .75rem;
        line-height: 1
    }
}

.back-to-top span::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e900';
    color: #c20016;
    display: inline-block;
    margin-left: 5px;
    transform: rotate(-90deg)
}

.editorial-text-media {
    margin: 50px 0
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media {
        margin: 100px 0
    }
}

.editorial-text-media .section-container {
    margin: 50px 0 0
}

    .editorial-text-media .section-container .media-wrapper {
        margin-bottom: 30px;
        width: 100%
    }

@media print, screen and (min-width: 48em) {
    .editorial-text-media .section-container .media-wrapper {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-bottom: 0
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media .section-container .media-wrapper {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-bottom: 0
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .editorial-text-media .section-container .content-block {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        box-sizing: border-box;
        padding-right: 40px
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media .section-container .content-block {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.editorial-text-media .section-container .content-block .body-1, .editorial-text-media .section-container .content-block .cta-wrapper {
    margin-bottom: 15px
}

.editorial-text-media .section-container .cta {
    background-color: transparent
}

.editorial-text-media.variant-a .section-container .content-block {
    padding-top: 0
}

@media screen and (max-width: 19.9375em) {
    .editorial-text-media.variant-a .section-container .content-block {
        width: 100%
    }
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-a .section-container .grid {
        -ms-flex-align: center;
        align-items: center
    }
}

.editorial-text-media.variant-a .section-container:nth-child(odd) .grid {
    -ms-flex-pack: center;
    justify-content: center
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-a .section-container:nth-child(odd) .grid {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.editorial-text-media.variant-a .section-container:nth-child(even) {
    background-color: #f1f1f1;
    padding: 50px 0
}

@media screen and (max-width: 19.9375em) {
    .editorial-text-media.variant-a .section-container:nth-child(even) .media-wrapper {
        margin-bottom: 0;
        padding-bottom: 30px;
        width: 100%
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .editorial-text-media.variant-a .section-container:nth-child(even) .content-block {
        padding-left: 40px;
        padding-right: 0
    }
}

.editorial-text-media.variant-b {
    margin-top: 80px
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-b {
        margin-top: 110px
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media.variant-b {
        margin-top: 130px
    }
}

.editorial-text-media.variant-b:last-child {
    margin-bottom: 0
}

.editorial-text-media.variant-b .grid {
    -ms-flex-pack: center;
    justify-content: center
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-b .grid {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.editorial-text-media.variant-b .content-block {
    padding-bottom: 50px;
    padding-top: 0
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-b .content-block {
        padding-bottom: 30px;
        padding-top: 30px
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media.variant-b .content-block {
        margin-left: calc(8.3333333333% + .875rem);
        -ms-flex-item-align: center;
        align-self: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-flow: column;
        flex-flow: column;
        padding-bottom: 50px;
        padding-top: 50px
    }
}

@media screen and (max-width: 19.9375em) {
    .editorial-text-media.variant-b .content-block {
        width: 100%
    }
}

.editorial-text-media.variant-b .section-container {
    background: #28343d;
    color: #fff
}

.editorial-text-media.variant-b .media-wrapper {
    margin-bottom: 30px;
    margin-top: -25px
}

@media screen and (max-width: 19.9375em) {
    .editorial-text-media.variant-b .media-wrapper {
        width: 100%
    }
}

@media print, screen and (min-width: 48em) {
    .editorial-text-media.variant-b .media-wrapper {
        margin-top: -40px
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-text-media.variant-b .media-wrapper {
        margin-top: -50px
    }
}

.editorial-text-media.variant-b .cta {
    color: #fff
}

    .editorial-text-media.variant-b .cta::before {
        color: #fff
    }

.editorial-quote {
    background: #f1f1f1;
    margin: 50px 0;
    padding: 50px 0
}

@media print, screen and (min-width: 64em) {
    .editorial-quote {
        padding: 100px 0
    }
}

.editorial-quote .media-wrapper {
    -ms-flex-item-align: baseline;
    align-self: baseline;
    position: relative;
    width: 100%
}

    .editorial-quote .media-wrapper .design-wrap {
        bottom: 0;
        margin: 0 30px 30px;
        overflow: hidden;
        position: relative;
        text-align: center;
        z-index: 1
    }

    .editorial-quote .media-wrapper::after {
        background-color: #28343d;
        bottom: 0;
        content: '';
        height: 50%;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 0
    }

.editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
    background-color: #c20016;
    content: '';
    height: 2px;
    margin-top: 5px;
    position: absolute
}

@media screen and (max-width: 19.9375em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        margin-left: -1.5625rem;
        left: 0;
        width: 15px
    }
}

@media screen and (max-width: 19.9375em) and (min-width: 30.0625em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        margin-left: -1.5625rem
    }
}

@media screen and (max-width: 19.9375em) and (min-width: 48em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        margin-left: -2.875rem
    }
}

@media screen and (max-width: 19.9375em) and (min-width: 64em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        margin-left: -2.875rem
    }
}

@media screen and (min-width: 48em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        left: -20px;
        margin-left: -52px;
        width: 52px
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote .image-gallery .content .label::before, .image-gallery .content .editorial-quote .label::before, .editorial-quote .image-gallery .content .stroke::before, .image-gallery .content .editorial-quote .stroke::before, .editorial-quote .content-block::before {
        left: -30px;
        margin-left: -72px;
        width: 72px
    }
}

.editorial-quote .content-block {
    position: relative
}

    .editorial-quote .content-block .label {
        margin-bottom: 15px
    }

    .editorial-quote .content-block .body-1 {
        font-family: "Rooster",sans-serif;
    
        font-style: normal;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.5;
        margin-bottom: 25px
    }

@media print, screen and (min-width: 64em) {
    .editorial-quote .content-block .body-1 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 100.0625em) {
    .editorial-quote .content-block .body-1 {
        font-size: 2.1875rem;
        line-height: 1.14
    }
}

.rooster-toggle .editorial-quote .content-block .body-1 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.editorial-quote .content-block .name {
    font-weight: bold
}

.editorial-quote .content-block .location {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d
}

.rooster-toggle .editorial-quote .content-block .location {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .editorial-quote .content-block .location {
        font-size: .75rem;
        line-height: 1
    }
}

.editorial-quote.variant-a .grid {
    -ms-flex-pack: center;
    justify-content: center
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-a .content-block {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote.variant-a .content-block {
        width: calc(91.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.editorial-quote.variant-b-left .grid {
    -ms-flex-pack: center;
    justify-content: center
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-b-left .grid {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.editorial-quote.variant-b-left .media-wrapper {
    margin-bottom: 30px
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-b-left .media-wrapper {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem);
        margin-bottom: 0
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote.variant-b-left .media-wrapper {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-b-left .content-block {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote.variant-b-left .content-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.editorial-quote.variant-b-right .grid {
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (min-width: 48em) {
    .editorial-quote.variant-b-right .grid {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.editorial-quote.variant-b-right .media-wrapper {
    margin-bottom: 30px
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-b-right .media-wrapper {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote.variant-b-right .media-wrapper {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media print, screen and (min-width: 48em) {
    .editorial-quote.variant-b-right .content-block {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(8.3333333333% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .editorial-quote.variant-b-right .content-block {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

.utility-navigation {
    height: 100vh;
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: all 0.2s ease-in
}

@media print, screen and (min-width: 64em) {
    .utility-navigation {
        height: initial
    }
}

.utility-navigation.open {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.utility-navigation.inspire {
    background: #000;
    color: #fff
}

    .utility-navigation.inspire .secondary {
        color: #fff
    }

.utility-navigation.trade {
    color: #000
}

    .utility-navigation.trade .secondary {
        color: #000;
        font-size: .9375rem;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none
    }

@media screen and (max-width: 63.9375em) {
    .utility-navigation .container .grid {
        margin: 0 15px
    }
}

.utility-navigation .container .grid:nth-child(even) {
    border-top: 1px solid #d8d8d8;
    margin-top: 30px
}

.utility-navigation .cancel-link {
    padding: 20px 0
}

.utility-navigation .close {
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    position: absolute;
    right: 29px;
    top: 34px;
    width: auto
}

@media print, screen and (min-width: 64em) {
    .utility-navigation .close {
        display: none
    }
}

.utility-navigation .close::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90b';
    color: #c20016;
    font-size: .9375rem;
    height: 11px;
    position: absolute;
    right: 0;
    width: 11px
}

.utility-navigation .close:hover {
    background: 0
}

.utility-navigation .info .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    padding-top: 65px;
    text-transform: uppercase
}

@media print, screen and (min-width: 64em) {
    .utility-navigation .info .title {
        margin-top: 30px;
        padding-top: 0
    }
}

.no-js .utility-navigation {
    display: none
}

.listing-product-categories {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .listing-product-categories {
        margin: 100px 0
    }
}

.listing-product-categories .container {
    margin-bottom: -24px
}

@media print, screen and (min-width: 64em) {
    .listing-product-categories .container {
        margin-bottom: -12px
    }
}

.listing-product-categories .common {
    padding-bottom: 10px
}

@media print, screen and (min-width: 48em) {
    .listing-product-categories .common {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .listing-product-categories .common {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.listing-product-categories .common .body-1 {
    padding-bottom: 10px
}

@media print, screen and (min-width: 64em) {
    .listing-product-categories h2 {
        margin-bottom: 10px
    }
}

.listing-product-categories .list-tiles {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

@media screen and (max-width: 47.9375em) {
    .listing-product-categories .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 30.0625em) {
    .listing-product-categories .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 48em) {
    .listing-product-categories .list-tiles {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 64em) {
    .listing-product-categories .list-tiles {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media print, screen and (min-width: 48em) {
    .listing-product-categories .list-tiles {
        margin-bottom: -35px
    }
}

@media print, screen and (min-width: 64em) {
    .listing-product-categories .list-tiles {
        margin-bottom: -26px
    }
}

.listing-product-categories .list-tiles .img-fluid {
    width: 100%
}

.iphone.old-iphone .listing-product-categories .list-tiles .img-fluid {
    height: 100%;
    max-height: none;
    object-fit: contain
}

.listing-product-categories .list-tiles .tile {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    background: #f1f1f1;
    list-style: none;
    margin-bottom: 24px;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .listing-product-categories .list-tiles .tile {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .listing-product-categories .list-tiles .tile {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-bottom: 38px
    }
}

.listing-product-categories .list-tiles .w-cta {
    background-color: #fff;
    bottom: -1px;
    box-sizing: border-box;
    min-height: 30px;
    padding: 10px 10px 0;
    position: absolute;
    right: 0;
    width: calc(100% - 15px)
}

@media print, screen and (min-width: 48em) {
    .listing-product-categories .list-tiles .w-cta {
        min-height: 40px;
        padding: 15px 20px 0;
        width: calc(100% - 30px)
    }
}

.listing-product-categories .list-tiles .cta {
    display: block;
    line-height: 1.3
}

    .listing-product-categories .list-tiles .cta::after {
        border: 0
    }

    .listing-product-categories .list-tiles .cta::before {
        right: -24px;
        top: 6px
    }

.listing-product-categories .list-tiles .w-media {
    height: 0;
    overflow: hidden;
    padding-bottom: 100%
}

    .listing-product-categories .list-tiles .w-media img {
        display: block;
        transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1)
    }

    .listing-product-categories .list-tiles .w-media:hover img {
        transform: scale(1.05)
    }


@media screen and (max-width: 47.9375em) {
    .banner-text-box p {
        display: none;
    }

    .breadcrumb {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .breadcrumb {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        /* max-width: 94.25rem; */
        margin: 0 auto
    }
}

@media print, screen and (min-width: 64em) and (min-width: 30.0625em) {
    .breadcrumb {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    .breadcrumb {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    .breadcrumb {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

.breadcrumb ol {
    list-style: none;
    margin-bottom: 0;
    margin-left: 0
}

    .breadcrumb ol li {
        display: inline-block
    }

    .breadcrumb ol a {
        color: #868d91;
        margin-right: 20px;
        position: relative
    }

        .breadcrumb ol a::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: 7px;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #868d91;
            margin: 0 8px;
            position: absolute;
            top: 3px
        }

        .breadcrumb ol a:hover {
            border-bottom: 1px solid #c20016;
            color: #c20016
        }

.facet {
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media print, screen and (min-width: 64em) {
    .facet {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        -ms-flex-positive: 0;
        flex-grow: 0;
        margin-bottom: 50px;
        padding-top: 50px
    }
}

.facet form {
    height: 100%
}

@media print, screen and (min-width: 64em) {
    .facet .w-facet {
        width: calc(66.6% + 1.3rem)
    }

        .facet .w-facet .filters .panel {
            position: relative
        }
}

.facet .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .facet .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .facet .title {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.facet ul {
    margin-left: 0
}

.facet li {
    display: block
}

@media screen and (max-width: 63.9375em) {
    .facet .read-more {
        display: none
    }
}

.facet .checkbox {
    opacity: 0;
    position: absolute
}

    .facet .checkbox + label {
        box-sizing: border-box
    }

@media print, screen and (min-width: 64em) {
    .facet .checkbox + label::before {
        top: 1px
    }

    .facet .checkbox + label::after {
        top: 5px
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .checkbox + label::before {
        border: 0
    }

    .facet .checkbox + label::after {
        background: 0
    }
}

.facet .checkbox + label a {
    pointer-events: none
}

@media print, screen and (min-width: 64em) {
    .facet .checkbox:checked + label::after, .no-touch .facet .checkbox:hover + label::after {
        background: #c20016
    }
}

.facet .checkbox:disabled + label {
    color: #28343d;
    cursor: auto;
    opacity: 0.5
}

    .facet .checkbox:disabled + label::before {
        background: #c8c8c8
    }

.facet .checkbox:disabled:hover + label {
    text-decoration: none
}

@media print, screen and (min-width: 64em) {
    .facet .checkbox:disabled:hover + label a {
        color: #28343d
    }
}

@media print, screen and (min-width: 64em) {
    .facet .more-options {
        display: none
    }
}

.facet .less {
    display: none
}

.facet .show-all .less {
    display: block
}

.facet .show-all .more {
    display: none
}

.facet .show-all .more-options {
    display: block
}

@media print, screen and (min-width: 64em) {
    .facet .panel {
        border-bottom: 1px solid #c8c8c8;
        padding: 20px 0
    }
}

.facet .panel.collapse .title::after {
    transform: rotate(0deg)
}

@media print, screen and (min-width: 64em) {
    .facet .panel.collapse .title::after {
        transform: rotate(90deg)
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .panel.collapse .options {
        display: block
    }
}

@media print, screen and (min-width: 64em) {
    .facet .panel.collapse .options {
        display: none
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .panel li {
        transition: all 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
        transition-delay: 0.5s;
        opacity: 0
    }

        .facet .panel li:nth-child(1) {
            transform: translateX(0%);
            transition-delay: 300ms
        }

        .facet .panel li:nth-child(2) {
            transform: translateX(5%);
            transition-delay: 305ms
        }

        .facet .panel li:nth-child(3) {
            transform: translateX(10%);
            transition-delay: 310ms
        }

        .facet .panel li:nth-child(4) {
            transform: translateX(15%);
            transition-delay: 315ms
        }

        .facet .panel li:nth-child(5) {
            transform: translateX(20%);
            transition-delay: 320ms
        }

        .facet .panel li:nth-child(6) {
            transform: translateX(25%);
            transition-delay: 325ms
        }

        .facet .panel li:nth-child(7) {
            transform: translateX(30%);
            transition-delay: 330ms
        }

        .facet .panel li:nth-child(8) {
            transform: translateX(35%);
            transition-delay: 335ms
        }

        .facet .panel li:nth-child(9) {
            transform: translateX(40%);
            transition-delay: 340ms
        }

        .facet .panel li:nth-child(10) {
            transform: translateX(45%);
            transition-delay: 345ms
        }

        .facet .panel li:nth-child(11) {
            transform: translateX(50%);
            transition-delay: 350ms
        }

        .facet .panel li:nth-child(12) {
            transform: translateX(55%);
            transition-delay: 355ms
        }
}

@media screen and (max-width: 63.9375em) {
    .facet .panel.open .options {
        max-height: none;
        transform: translate3d(0, 0, 0)
    }

    .facet .panel.open li {
        opacity: 1;
        transform: translateX(0)
    }

    .facet .panel.open fieldset, .facet .panel.open ul {
        margin-bottom: 0;
        max-height: calc(100% - 7.1875rem);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch
    }

        .facet .panel.open fieldset ul.more-options, .facet .panel.open ul ul.more-options {
            overflow-y: hidden
        }

    .facet .panel.open .more, .facet .panel.open .less {
        display: none
    }

    .facet .panel.open .button-back {
        display: block;
        transform: translate3d(0, 0, 0)
    }

    .facet .panel.open .button-done {
        opacity: 1
    }

    .facet .panel.open .checkbox:checked + label {
        background-color: #f1f1f1
    }

        .facet .panel.open .checkbox:checked + label::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e907';
            color: #28343d;
            font-size: .875rem;
            left: initial;
            margin-top: -7px;
            position: absolute;
            right: 25px;
            top: 50%
        }

    .facet .panel.open .selected-filter {
        display: none
    }

    .facet .panel.open .header-mobile {
        transform: translate3d(0, 0, 0)
    }
}

.facet .panel .options {
    overflow: hidden
}

@media screen and (max-width: 63.9375em) {
    .facet .panel .options {
        background-color: #fff;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.3s ease;
        width: 100%;
        z-index: 2
    }
}

@media print, screen and (min-width: 64em) {
    .facet .panel .options ul:not(.more-options) {
        margin-top: 10px;
        max-height: 28.45rem;
        overflow: hidden;
        overflow-y: auto
    }
}

@media print, screen and (min-width: 64em) {
    .facet .panel .options li {
        list-style: none;
        margin-left: 20px;
        transition: opacity 0.3s ease
    }
}

.facet .panel .more-options li {
    margin-left: 0
}

.facet .panel .title {
    cursor: pointer;
    margin-bottom: 0;
    padding: 15px 25px;
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .facet .panel .title {
        border-bottom: 1px solid #c8c8c8
    }
}

@media print, screen and (min-width: 64em) {
    .facet .panel .title {
        padding: 0
    }

        .facet .panel .title::after {
            transform: rotate(270deg)
        }
}

.facet .panel .title::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    font-weight: normal;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

@media print, screen and (min-width: 64em) {
    .facet .panel .title::after {
        right: 0;
        top: 8px;
        transform: rotate(270deg);
        transition: all 0.5s ease
    }
}

@media print, screen and (min-width: 64em) {
    .facet .panel .name:hover a, .facet .panel .name a:focus {
        color: #c20016
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .panel-group {
        max-height: calc(100% - 7.1875rem);
        overflow-x: hidden;
        overflow-y: scroll
    }

        .facet .panel-group.open .button-done {
            display: block
        }
}

.facet .header-mobile {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    border-bottom: 1px solid #c8c8c8;
    font-size: .9375rem;
    padding: 16px 0;
    text-align: center;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease;
    transition-delay: 0.1s
}

.rooster-toggle .facet .header-mobile {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .facet .header-mobile {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .facet .header-mobile {
        display: none
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .filters {
        background-color: #fff;
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.3s ease-in;
        width: 100vw;
        z-index: 13
    }

        .facet .filters .panel {
            transition: all 750ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
            transition-delay: 0.5s;
            opacity: 0
        }

            .facet .filters .panel:nth-child(1) {
                transform: translateX(0%);
                transition-delay: 300ms
            }

            .facet .filters .panel:nth-child(2) {
                transform: translateX(5%);
                transition-delay: 305ms
            }

            .facet .filters .panel:nth-child(3) {
                transform: translateX(10%);
                transition-delay: 310ms
            }

            .facet .filters .panel:nth-child(4) {
                transform: translateX(15%);
                transition-delay: 315ms
            }

            .facet .filters .panel:nth-child(5) {
                transform: translateX(20%);
                transition-delay: 320ms
            }

            .facet .filters .panel:nth-child(6) {
                transform: translateX(25%);
                transition-delay: 325ms
            }

            .facet .filters .panel:nth-child(7) {
                transform: translateX(30%);
                transition-delay: 330ms
            }

            .facet .filters .panel:nth-child(8) {
                transform: translateX(35%);
                transition-delay: 335ms
            }

            .facet .filters .panel:nth-child(9) {
                transform: translateX(40%);
                transition-delay: 340ms
            }

            .facet .filters .panel:nth-child(10) {
                transform: translateX(45%);
                transition-delay: 345ms
            }

            .facet .filters .panel:nth-child(11) {
                transform: translateX(50%);
                transition-delay: 350ms
            }

            .facet .filters .panel:nth-child(12) {
                transform: translateX(55%);
                transition-delay: 355ms
            }

            .facet .filters .panel.inline {
                display: inline
            }
}

@media screen and (max-width: 63.9375em) {
    .facet .filters.show {
        display: block
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .filters .filter-label {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .9375rem;
        line-height: 1.67;
        border: 0;
        border-bottom: 1px solid #c8c8c8;
        display: block;
        letter-spacing: normal;
        margin-bottom: 0;
        padding: 15px 0;
        text-align: center;
        text-transform: none;
        transform: translate3d(100%, 0, 0);
        transition: all 0.5s linear;
        width: 100%
    }

    .rooster-toggle .facet .filters .filter-label {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 100.0625em) {
    .facet .filters .filter-label {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .filters .button-cancel {
        transform: translate3d(calc(100% + 25px), 0, 0);
        transition: all 0.2s linear;
        transition-delay: 0.4s
    }
}

@media print, screen and (min-width: 64em) {
    .facet .filters .button-cancel {
        display: none
    }
}

@media screen and (max-width: 63.9375em) {
    .facet .filters.open {
        background: #fff;
        display: block;
        transform: translate3d(0, 0, 0)
    }

        .facet .filters.open .panel {
            opacity: 1;
            transform: translateX(0)
        }

        .facet .filters.open .panel-group {
            display: block
        }

        .facet .filters.open .filter-label::after {
            display: none
        }

        .facet .filters.open .button-cancel {
            display: block;
            font-size: .9375rem;
            position: fixed;
            right: 25px;
            top: 18px;
            z-index: 3
        }

        .facet .filters.open .options {
            background: #fff;
            padding-top: 0
        }

        .facet .filters.open .option-label {
            border-bottom: 1px solid #c8c8c8;
            display: block;
            font-size: .8125rem;
            padding: 15px 25px
        }

        .facet .filters.open .button-clear, .facet .filters.open .button-apply {
            display: block;
            opacity: 1
        }

        .facet .filters.open .filter-label {
            transform: translate3d(0, 0, 0)
        }

        .facet .filters.open .button-cancel {
            transform: translate3d(0, 0, 0)
        }
}

.facet .filters .button-back {
    display: none;
    font-size: .9375rem;
    left: 25px;
    padding: 19px 0 19px 15px;
    position: fixed;
    top: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.6s ease;
    transition-delay: 0.2s;
    z-index: 3
}

    .facet .filters .button-back::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: 7px;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #c20016;
        left: 0;
        margin-top: -3px;
        position: absolute;
        top: 50%;
        transform: rotate(180deg)
    }

.facet .selected-filter {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    border: 0;
    display: block;
    margin: 0;
    padding-right: 20px
}

.rooster-toggle .facet .selected-filter {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .facet .selected-filter {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .facet .selected-filter {
        display: none
    }
}

.facet .button-done, .facet .button-clear, .facet .button-apply {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 24px 0;
    position: absolute;
    text-align: center;
    transition: all 0.5s ease-in;
    transition-delay: 0.7s;
    width: calc(50% - 0.05rem);
    z-index: 2
}

.rooster-toggle .facet .button-done, .rooster-toggle .facet .button-clear, .rooster-toggle .facet .button-apply {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .facet .button-done, .facet .button-clear, .facet .button-apply {
        font-size: .75rem;
        line-height: 1
    }
}

@media print, screen and (min-width: 64em) {
    .facet .button-done, .facet .button-clear, .facet .button-apply {
        display: none
    }
}

.facet .button-done[disabled], .facet .button-clear[disabled], .facet .button-apply[disabled] {
    background-color: #dedede;
    color: #fff
}

.facet .button-clear {
    background-color: #f1f1f1
}

.facet .button-apply {
    background-color: #28343d;
    color: #fff;
    left: initial;
    right: 0
}

.facet .button-done {
    background-color: #28343d;
    color: #fff;
    width: 100%
}

.facet .with-clear .button-done {
    left: initial;
    right: 0;
    width: calc(50% - 0.05rem)
}

.category {
    border: 1px solid #c8c8c8;
    display: none;
    margin-bottom: 20px;
    padding: 0;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .category {
        border: 0;
        border-bottom: 1px solid #c8c8c8;
        display: block;
        margin-bottom: 30px;
        padding: 0 0 25px
    }
}

.category ul {
    display: none;
    margin: -10px 0 0;
    padding: 0 1.25rem 0.9375rem
}

@media print, screen and (min-width: 64em) {
    .category ul {
        display: block;
        margin: 5px 0 0;
        padding: 0
    }
}

.category ul.more-options {
    display: none;
    margin: 0;
    padding: 0
}

@media print, screen and (min-width: 64em) {
    .category ul.more-options li {
        margin: 0 0 10px;
        overflow: hidden;
        padding: 0
    }
}

.category li {
    display: block
}

@media print, screen and (min-width: 64em) {
    .category li {
        line-height: 1;
        margin-bottom: 10px
    }
}

.category .sub-categories a {
    font-size: .8125rem
}

@media print, screen and (min-width: 64em) {
    .category .sub-categories li {
        list-style: none;
        margin-left: 20px
    }
}

.category .selected a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.rooster-toggle .category .selected a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400
}

.category .title {
    cursor: pointer;
    margin: 0;
    padding: 0.9375rem 1.25rem
}

@media print, screen and (min-width: 64em) {
    .category .title {
        cursor: default;
        font-size: .9375rem;
        padding: 0
    }
}

.category .title::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    margin-top: -7px;
    position: absolute;
    right: 1.25rem;
    top: 1.875rem;
    transform: rotate(90deg)
}

@media print, screen and (min-width: 64em) {
    .category .title::after {
        display: none
    }
}

.no-touch .category a:hover {
    color: #c20016;
    text-decoration: underline
}

.category.collapse .title::after {
    transform: rotate(270deg)
}

@media print, screen and (min-width: 64em) {
    .category.collapse .title::after {
        transform: rotate(90deg)
    }
}

.category.collapse ul {
    display: block
}

.category .back-to {
    display: none
}

.category .read-more {
    display: none;
    margin-top: 10px
}

@media print, screen and (min-width: 64em) {
    .category .read-more {
        display: block;
        margin-left: 20px
    }
}

@media screen and (max-width: 63.9375em) {
    .category.cat-selected {
        border: 0;
        border-bottom: 1px solid #c8c8c8;
        display: block;
        margin: 0 -25px
    }

        .category.cat-selected .sub-categories {
            display: none
        }

        .category.cat-selected .title {
            font-size: .9375rem;
            font-weight: normal
        }

            .category.cat-selected .title::after {
                display: none
            }

        .category.cat-selected .back-to {
            display: inline-block;
            font-weight: normal;
            margin-right: 5px;
            padding-left: 20px
        }

            .category.cat-selected .back-to::before {
                font-family: "icon-howdens";
                line-height: 1;
                            text-transform: none;
                content: '\e901';
                font-size: 7px;
                transition: transform 675ms ease;
                transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                color: #c20016;
                left: 22px;
                margin-top: -4px;
                position: absolute;
                top: 50%;
                transform: rotate(180deg)
            }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .category.cat-selected {
        margin: 0 -34px
    }
}

.ipad .sort-select, .iphone .sort-select {
    font-size: 1rem
}

.button-filter {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background: none;
    border: 1px solid #c8c8c8;
    border-radius: 0;
    display: inline-block;
    margin-bottom: 10px;
    padding: 18px 20px;
    position: relative;
    text-align: left;
    width: calc(50% - .84375rem)
}

.rooster-toggle .button-filter {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .button-filter {
        font-size: .75rem;
        line-height: 1
    }
}

@media print, screen and (min-width: 48em) {
    .button-filter {
        width: calc(50% - .875rem)
    }
}

@media print, screen and (min-width: 64em) {
    .button-filter {
        display: none
    }
}

.button-filter::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #c20016;
    margin-top: -4px;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: rotate(0deg)
}

.w-mobile-facet {
    position: relative
}

@media print, screen and (min-width: 64em) {
    .w-mobile-facet {
        display: none
    }

        .w-mobile-facet .sort-container {
            display: none
        }
}

.w-mobile-facet .category {
    display: block
}



@media screen and (max-width: 63.9375em) {
    .w-mobile-facet .sort-select {
        height: 100%;
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%
    }
}

.listing-products {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .listing-products {
        margin-top: -1px;
        width: 100%
    }
}

@media screen and (min-width: 64em) {
    .listing-products {
        width: calc(75% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding-top: 20px
    }
}

@media screen and (max-width: 63.9375em) {
    .listing-products > .container {
        padding: 0
    }
}

@media print, screen and (min-width: 64em) {
    .listing-products .product-listing-container {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 30.0625em) {
    .listing-products .product-listing-container {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    .listing-products .product-listing-container {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    .listing-products .product-listing-container {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .listing-products .subsection.common {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

.listing-products .common {
    display: -ms-flexbox;
    display: flex;
    padding: 10px 0
}

@media print, screen and (min-width: 48em) {
    .listing-products .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem;
        padding: 10px 0 50px
    }
}

@media print, screen and (min-width: 48em) and (min-width: 30.0625em) {
    .listing-products .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 48em) {
    .listing-products .common {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 48em) and (min-width: 64em) {
    .listing-products .common {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .listing-products .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem;
        padding: 10px 0 50px
    }
}

@media print, screen and (min-width: 64em) and (min-width: 30.0625em) {
    .listing-products .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    .listing-products .common {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    .listing-products .common {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .listing-products .common .title-container {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.listing-products .common .title-container .title {
    color: #71777b
}

@media screen and (max-width: 63.9375em) {
    .listing-products .common .sort-container {
        display: none
    }
}

.listing-products .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .listing-products .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .listing-products .title {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.listing-products .list-tiles {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

@media screen and (max-width: 47.9375em) {
    .listing-products .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 30.0625em) {
    .listing-products .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 48em) {
    .listing-products .list-tiles {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 64em) {
    .listing-products .list-tiles {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.listing-products .list-tiles .group {
    width: 100%;
    list-style-type: none
}

    .listing-products .list-tiles .group ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        transition: padding-bottom 0.3s ease
    }

        .listing-products .list-tiles .group ul ul {
            padding-left: 15px
        }

            .listing-products .list-tiles .group ul ul li {
                width: 100%
            }

.listing-products .list-tiles .w-media {
    height: 0;
    margin: 30px auto 10px;
    overflow: hidden;
    padding-bottom: 86%;
    width: 86%
}

@media print, screen and (min-width: 48em) {
    .listing-products .list-tiles .w-media {
        margin-top: 35px
    }
}

.listing-products .list-tiles .w-media a {
    display: block
}

.listing-products .list-tiles .w-media img {
    display: block;
    transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72)
}

.listing-products .list-tiles .img-fluid {
    max-width: 100%;
    width: auto
}

.iphone.old-iphone .listing-products .list-tiles .img-fluid {
    height: 100%;
    max-height: none;
    object-fit: contain;
    width: 100%
}

.listing-products .list-tiles .tile {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    box-shadow: 0 0 0 1px #c8c8c8;
    box-sizing: border-box;
    display: block;
    list-style: none;
    margin-bottom: 30px;
    outline: 1px solid #c8c8c8;
    padding: 0 10px 10px;
    position: relative;
    text-align: center
}

@media print, screen and (min-width: 30.0625em) {
    .listing-products .list-tiles .tile {
        width: calc(50% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        padding: 0 15px 15px
    }
}

@media print, screen and (min-width: 48em) {
    .listing-products .list-tiles .tile {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        padding: 0 15px 15px
    }
}

@media print, screen and (min-width: 64em) {
    .listing-products .list-tiles .tile {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.listing-products .list-tiles .tile:hover {
    box-shadow: 0 0 20px #c8c8c8
}

    .listing-products .list-tiles .tile:hover .title {
        color: #c20016
    }

.listing-products .list-tiles .w-desc {
    word-wrap: break-word
}

.listing-products .list-tiles .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: absolute;
    right: 0;
    z-index: 1
}

.rooster-toggle .listing-products .list-tiles .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .listing-products .list-tiles .status {
        font-size: .75rem;
        line-height: 1
    }
}

.listing-products .list-tiles .title:hover {
    color: #c20016
}

.listing-products .quick-view {
    background-color: #fff;
    border-top: 0;
    box-shadow: 0 12px 20px 0 #c8c8c8;
    display: none;
    left: 0;
    margin-top: 15px;
    max-width: 95%;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    z-index: 100
}

    .listing-products .quick-view > * {
        display: block;
        font-size: .8125rem;
        padding-bottom: 10px
    }

        .listing-products .quick-view > *:empty {
            padding-bottom: 0
        }

    .listing-products .quick-view .product-id {
        font-size: .9375rem
    }

    .listing-products .quick-view .related-docs {
        padding-bottom: 0;
        padding-left: 20px;
        position: relative;
        word-break: break-word
    }

        .listing-products .quick-view .related-docs::before {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e90d';
            left: 2px;
            position: absolute;
            top: 4px
        }

        .listing-products .quick-view .related-docs:hover {
            color: #c20016
        }

            .listing-products .quick-view .related-docs:hover::before {
                color: #28343d
            }

    .listing-products .quick-view .key-text, .listing-products .quick-view .related-text {
        margin-bottom: 0;
        padding-bottom: 2px
    }

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .listing-products .w-mobile-facet {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .listing-products .selected-filter {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .listing-products .selected-filter {
        margin-left: 0;
        margin-right: 0
    }
}

.touch .listing-products .list-tiles .tile {
    box-shadow: none
}

    .touch .listing-products .list-tiles .tile .title {
        color: #28343d
    }

.product-listing, .search-listing {
    margin-bottom: 70px
}

@media screen and (max-width: 63.9375em) {
    .product-listing, .search-listing {
        display: initial
    }

        .product-listing .container, .search-listing .container {
            padding-bottom: 20px
        }
}

@media screen and (max-width: 47.9375em) {
    .product-listing .filtering-sort__btn-label {
        display: inline-block;
        vertical-align: middle
    }
}

.product-listing .filtering-sort {
    margin-top: 0
}

.product-listing .filtering-sort__container {
    padding-top: 30px
}

@media print, screen and (min-width: 64em) {
    .product-listing .facet {
        padding-top: 20px
    }
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .product-listing .w-facet {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem
    }
}

.product-listing.component {
    opacity: 1;
    margin-bottom: 0;
    transform: none
}

    .product-listing.component .listing__heading {
        font-size: 1.875rem;
        line-height: 2.5rem;
        margin-bottom: 4px;
        color: #28343d
    }

@media screen and (max-width: 63.9375em) {
    .product-listing.component .listing__heading {
        font-size: 1.5625rem;
        line-height: 2.1875rem
    }
}

.product-listing.component .listing__text {
    color: #71777b;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5625rem
}

    .product-listing.component .listing__text .inline {
        display: inline
    }

.product-listing.component .listing__introduction {
    padding: 10px 0 32px
}

@media screen and (max-width: 63.9375em) {
    .product-listing.component .listing__introduction {
        padding: 4px 0 30px
    }
}

.no-js .product-listing.component .listing__introduction .hide {
    display: block !important
}

.product-listing.component .listing__introduction a {
    color: #4a90e2;
    text-decoration: underline
}

    .product-listing.component .listing__introduction a:hover, .product-listing.component .listing__introduction a:focus {
        color: #28343d
    }

.product-listing.component .listing__introduction .read-more .label {
    margin-top: 13px
}

    .product-listing.component .listing__introduction .read-more .label .btn {
        padding: 0
    }

        .product-listing.component .listing__introduction .read-more .label .btn + .btn {
            margin-left: 0
        }

        .product-listing.component .listing__introduction .read-more .label .btn:hover {
            background: none
        }

    .product-listing.component .listing__introduction .read-more .label::before, .product-listing.component .listing__introduction .read-more .label::after {
        display: none
    }

.no-js .product-listing.component .listing__introduction .read-more .label .product-listing.component .listing__introduction .read-more .label {
    display: none
}

.product-listing .listing__back-to-page {
    padding-bottom: 17px;
    padding-top: 10px
}

    .product-listing .listing__back-to-page.mobile-only {
        display: none
    }

@media screen and (max-width: 47.9375em) {
    .product-listing .listing__back-to-page.mobile-only {
        display: block
    }
}

.product-listing .listing__back-to-page a {
    color: #71777b;
    font-size: .6875rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 0;
    text-transform: uppercase
}

    .product-listing .listing__back-to-page a span {
        border-bottom: 1px solid #71777b
    }

    .product-listing .listing__back-to-page a::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #71777b;
        display: inline-block;
        font-size: .5rem;
        transform: rotate(-180deg);
        vertical-align: middle
    }

.product-listing__container {
    margin-top: 44px;
    width: 100%
}

    .product-listing__container ul, .product-listing__container li {
        margin: 0;
        list-style: none
    }

@media screen and (max-width: 63.9375em) {
    .product-listing__container ul, .product-listing__container li {
        margin: 0 auto
    }
}

@media screen and (max-width: 81.1875em) {
    .product-listing__container {
        max-width: 980px
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__container {
        margin-top: 28px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__container {
        margin-top: 6px
    }
}

.product-listing__tiles {
    list-style: none;
    margin: 0
}

    .product-listing__tiles .group {
        list-style: none
    }

        .product-listing__tiles .group > ul {
            -ms-flex-align: center;
            align-items: center;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-pack: start;
            justify-content: flex-start;
            list-style: none;
            margin: 0
        }

        .product-listing__tiles .group .tile {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-item-align: stretch;
            align-self: stretch;
            background: #fff;
            box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
            -ms-flex: 1 0 21%;
            flex: 1 0 21%;
            margin: 0 26px 30px 0;
            min-height: 610px;
            max-width: 280px;
            position: relative
        }

            .product-listing__tiles .group .tile:nth-child(4n) {
                margin-right: 0
            }

@media screen and (max-width: 81.1875em) {
    .product-listing__tiles .group .tile {
        max-width: 213px
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .tile {
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        max-width: 292px;
        min-height: 592px
    }

        .product-listing__tiles .group .tile:nth-child(2n) {
            margin-right: 0
        }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile {
        -ms-flex: 100%;
        flex: 100%;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto 16px;
        max-width: 100%;
        min-height: 0;
        padding-bottom: 20px
    }

        .product-listing__tiles .group .tile:nth-child(1n) {
            margin-right: 0
        }
}

.product-listing__tiles .group .tile .status {
    background: #27642c;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0.092em;
    line-height: 1;
    padding: 9px 15px;
    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;
    z-index: 1
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .status + .title {
        padding-top: 40px
    }
}

.product-listing__tiles .group .tile .w-media {
    -ms-flex-order: 0;
    order: 0;
    position: relative
}

    .product-listing__tiles .group .tile .w-media::before {
        background-image: linear-gradient(to top, #f2f2f2, rgba(255,255,255,0));
        bottom: 0;
        content: "";
        display: block;
        height: 30px;
        left: 0;
        position: absolute;
        width: 100%
    }

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-media::before {
        display: none
    }
}

.product-listing__tiles .group .tile .w-media img {
    max-height: 230px;
    max-width: 230px;
    width: 100%
}

@media screen and (max-width: 81.1875em) {
    .product-listing__tiles .group .tile .w-media img {
        max-height: 180px;
        max-width: 180px
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .tile .w-media img {
        max-height: 240px;
        max-width: 240px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-media img {
        -ms-flex-order: 1;
        order: 1;
        max-height: 144px;
        max-width: 144px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-media {
        margin-left: 15px;
        margin-top: 20px;
        min-height: 144px;
        width: 144px
    }

        .product-listing__tiles .group .tile .w-media::after {
            display: none
        }
}

.product-listing__tiles .group .tile .title {
    -ms-flex-order: 1;
    order: 1;
    padding: 25px 30px 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.28
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .title {
        -ms-flex-order: 0;
        order: 0;
        padding: 22px 15px 0;
        width: 100%
    }
}

.product-listing__tiles .group .tile .w-desc {
    -ms-flex-order: 1;
    order: 1;
    padding: 0 30px 25px
}

    .product-listing__tiles .group .tile .w-desc * {
        box-sizing: border-box
    }

.theme-depot .product-listing__tiles .group .tile .w-desc .product-listing__tiles .group .tile .w-desc {
    position: relative;
    z-index: 1
}

.product-listing__tiles .group .tile .w-desc p {
    font-size: .75rem;
    font-weight: 700;
    margin-top: 11px
}

    .product-listing__tiles .group .tile .w-desc p .product-id {
        font-weight: 400
    }

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-desc p {
        margin: 0 0 22px
    }
}

.product-listing__tiles .group .tile .w-desc ul {
    margin-top: 22px
}

    .product-listing__tiles .group .tile .w-desc ul li {
        font-size: .8125rem;
        line-height: 1.54;
        padding-left: 16px;
        position: relative
    }

        .product-listing__tiles .group .tile .w-desc ul li::before {
            background: #28343d;
            border-radius: 100%;
            content: "";
            display: block;
            height: 5px;
            left: 0;
            position: absolute;
            top: 8px;
            width: 5px
        }

        .product-listing__tiles .group .tile .w-desc ul li + li {
            padding-top: 3px
        }

            .product-listing__tiles .group .tile .w-desc ul li + li::before {
                top: 10px
            }

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-desc ul {
        margin: 0
    }
}

.product-listing__tiles .group .tile .w-desc a.related-docs {
    display: inline-block;
    font-size: .8125rem;
    margin-top: 10px;
    padding-left: 18px;
    position: relative;
    text-decoration: underline;
    word-break: break-word;
    width: 100%
}

    .product-listing__tiles .group .tile .w-desc a.related-docs:first-of-type, .product-listing__tiles .group .tile .w-desc a.related-docs:first-child {
        margin-top: 20px
    }

    .product-listing__tiles .group .tile .w-desc a.related-docs::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90d';
        left: 0;
        position: absolute;
        top: 5px
    }

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .tile .w-desc {
        width: calc(100% - 159px);
        box-sizing: border-box;
        padding: 20px 10px 20px 14px
    }
}

.product-listing__tiles .group .tile .tile-link {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles {
        margin: 0 auto;
        max-width: 610px
    }
}

.product-listing__navigation {
    padding-bottom: 18px;
    padding-top: 30px;
    position: relative
}

    .product-listing__navigation::before, .product-listing__navigation::after {
        background-image: linear-gradient(to top, #ebebeb, #dbdbdb);
        content: "";
        display: block;
        height: 30px;
        left: 0;
        position: absolute;
        top: 0;
        transition: all 700ms cubic-bezier(0.2, 0, 0.2, 1);
        width: 100%;
        z-index: 1
    }

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation::before, .product-listing__navigation::after {
        height: 16px
    }
}

.product-listing__navigation::after {
    background-image: linear-gradient(to bottom, #ebebeb, #dbdbdb);
    bottom: 0;
    top: auto
}

.product-listing__navigation.carousel {
    margin: 0 auto;
    width: 100%
}

    .product-listing__navigation.carousel .slider {
        overflow: visible
    }

        .product-listing__navigation.carousel .slider .list {
            height: 0;
            opacity: 0;
            transition: none;
            visibility: visible
        }

    .product-listing__navigation.carousel .component__wrapper-grid {
        position: relative
    }

        .product-listing__navigation.carousel .component__wrapper-grid::after, .product-listing__navigation.carousel .component__wrapper-grid::before {
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ebebeb 100%);
            content: "";
            display: block;
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ebebeb',GradientType=1 );
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            width: 85px;
            transition: all 400ms cubic-bezier(0.2, 0, 0.2, 1);
            visibility: hidden;
            z-index: 1
        }

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation.carousel .component__wrapper-grid::after, .product-listing__navigation.carousel .component__wrapper-grid::before {
        width: 32px
    }
}

.product-listing__navigation.carousel .component__wrapper-grid::after {
    right: 12px
}

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation.carousel .component__wrapper-grid::after {
        right: -39px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation.carousel .component__wrapper-grid::after {
        right: 0px
    }
}

.product-listing__navigation.carousel .component__wrapper-grid::before {
    background: linear-gradient(to right, #ebebeb 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#00ffffff',GradientType=1 );
    left: -14px
}

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation.carousel .component__wrapper-grid::before {
        left: -39px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation.carousel .component__wrapper-grid::before {
        left: 0
    }
}

.product-listing__navigation.carousel .component__wrapper-grid.left-shadow-active::before {
    opacity: 1;
    visibility: visible
}

.product-listing__navigation.carousel .component__wrapper-grid.right-shadow-active::after {
    opacity: 1;
    visibility: visible
}

.product-listing__navigation.carousel .item-container {
    height: 262px;
    margin-left: -14px;
    margin-right: -13px;
    overflow: hidden
}

    .product-listing__navigation.carousel .item-container.items-loaded {
        height: auto
    }

        .product-listing__navigation.carousel .item-container.items-loaded .list {
            opacity: 1;
            transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72);
            visibility: visible
        }

    .product-listing__navigation.carousel .item-container .item-block {
        display: inline-block;
        margin-left: 14px;
        margin-right: 13px;
        max-width: calc(100% / 6);
        min-width: 200px;
        width: 100%
    }

        .product-listing__navigation.carousel .item-container .item-block a {
            display: block;
            height: 100%;
            position: relative;
            width: 100%
        }

        .product-listing__navigation.carousel .item-container .item-block .roundel {
            background: #fff;
            border: none;
            border-radius: 100%;
            margin-bottom: 7px;
            overflow: hidden
        }

        .product-listing__navigation.carousel .item-container .item-block .link-title {
            -ms-flex-align: center;
            align-items: center;
            display: -ms-flexbox;
            display: flex;
            font-size: .9375rem;
            -ms-flex-pack: center;
            justify-content: center;
            line-height: 1.25rem;
            min-height: 40px;
            text-align: center;
            text-decoration: underline
        }

    .product-listing__navigation.carousel .item-container .item-block--active .roundel {
        background-color: #28343d
    }

    .product-listing__navigation.carousel .item-container .item-block--active .link-title {
        font-weight: 700
    }

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation.carousel .item-container .item-block {
        margin-left: 12px;
        margin-right: 12px;
        max-width: calc(100% / 4);
        min-width: 192px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation.carousel .item-container .item-block {
        margin-left: 9px;
        margin-right: 9px;
        max-width: calc(100% / 3);
        min-width: 136px
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation.carousel .item-container {
        margin-left: -12px;
        margin-right: -12px;
        overflow: visible
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation.carousel .item-container {
        margin-left: -9px;
        margin-right: -9px
    }
}

.product-listing__navigation.carousel .carousel-arrows {
    height: 100%;
    position: absolute;
    right: -50px;
    top: -20px;
    width: 110px;
    z-index: 2
}

    .product-listing__navigation.carousel .carousel-arrows .arrow {
        background: #fff;
        border: none;
        border-radius: 0;
        bottom: 50%;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
        color: #28343d;
        height: 48px;
        margin-bottom: -24px;
        margin-right: 4px;
        width: 48px
    }

        .product-listing__navigation.carousel .carousel-arrows .arrow.left {
            margin-right: 4px;
            right: 48px
        }

        .product-listing__navigation.carousel .carousel-arrows .arrow::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: .625rem;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #28343d;
            display: inline-block;
            font-size: .875rem;
            font-weight: 700;
            height: 14px;
            transition: color 400ms cubic-bezier(0.2, 0, 0.2, 1);
            vertical-align: middle
        }

        .product-listing__navigation.carousel .carousel-arrows .arrow:not(.disabled):hover {
            background: #28343d
        }

            .product-listing__navigation.carousel .carousel-arrows .arrow:not(.disabled):hover::after {
                color: #fff
            }

        .product-listing__navigation.carousel .carousel-arrows .arrow.disabled {
            background-color: #fff
        }

            .product-listing__navigation.carousel .carousel-arrows .arrow.disabled::after {
                color: #c8c8c8
            }

@media screen and (max-width: 81.1875em) {
    .product-listing__navigation.carousel .carousel-arrows {
        right: -25px
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation.carousel .carousel-arrows {
        display: none
    }
}

.product-listing__navigation.carousel .scrollbar-container {
    display: none
}

.no-js .product-listing__navigation.carousel .item-container {
    height: auto
}

    .no-js .product-listing__navigation.carousel .item-container .list {
        opacity: 1;
        visibility: visible
    }

@media screen and (max-width: 63.9375em) {
    .product-listing__navigation {
        padding-bottom: 20px;
        padding-top: 32px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__navigation {
        padding-bottom: 12px;
        padding-top: 16px
    }
}

@media screen and (max-width: 81.1875em) {
    .js:not(.iphone):not(.ipad):not(.whatinput-types-touch):not(.touch) .product-listing .product-listing__navigation.carousel .slider {
        overflow: hidden
    }

    .js:not(.iphone):not(.ipad):not(.whatinput-types-touch):not(.touch) .product-listing .product-listing__navigation.carousel .component__wrapper-grid::before {
        left: 0
    }

    .js:not(.iphone):not(.ipad):not(.whatinput-types-touch):not(.touch) .product-listing .product-listing__navigation.carousel .component__wrapper-grid::after {
        right: 0
    }

    .js:not(.iphone):not(.ipad):not(.whatinput-types-touch):not(.touch) .product-listing .product-listing__navigation.carousel .carousel-arrows {
        display: block;
        right: -12px
    }

        .js:not(.iphone):not(.ipad):not(.whatinput-types-touch):not(.touch) .product-listing .product-listing__navigation.carousel .carousel-arrows .arrow {
            -ms-flex-align: center;
            align-items: center;
            display: -ms-inline-flexbox;
            display: inline-flex;
            position: absolute
        }
}

.hero-listing-products {
    margin-bottom: 40px
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-listing-products .subsection {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .hero-listing-products .subsection {
        width: 100%
    }
}

.hero-listing-products .subsection h1 {
    font-size: 1.5625rem;
    line-height: 1.4;
    background: #fff;
    color: #262626;
    margin: 0;
    padding: 20px 25px 0 0;
    z-index: 1
}

@media print, screen and (min-width: 64em) {
    .hero-listing-products .subsection h1 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .hero-listing-products .subsection h1 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .hero-listing-products .subsection h1 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

@media print, screen and (min-width: 64em) {
    .hero-listing-products .subsection h1 {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding: 21px 0 0
    }
}

@media screen and (min-width: 81.25em) {
    .hero-listing-products .subsection h1 {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.hero-listing-products .subsection h1.title-only {
    color: #28343d;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    position: initial;
    transform: initial
}

@media screen and (max-width: 47.9375em) {
    .hero-listing-products .subsection h1.title-only {
        margin-top: 1px;
        padding-top: 20px
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-listing-products .subsection h1.title-only {
        margin-left: 0;
        margin-top: 1px;
        padding-top: 20px
    }
}

.hero-listing-products .subsection .w-text {
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 25px
}

@media print, screen and (min-width: 48em) {
    .hero-listing-products .subsection .read-more {
        box-sizing: border-box;
        padding-right: 30px;
        width: calc(84% - 0.3rem)
    }
}

@media print, screen and (min-width: 64em) {
    .hero-listing-products .subsection .read-more {
        width: calc(76% - 0.3rem)
    }
}

@media screen and (min-width: 81.25em) {
    .hero-listing-products .subsection .read-more {
        width: calc(66.67% - 0.3rem)
    }
}

.hero-listing-products .subsection.common {
    margin-bottom: 10px
}

@media screen and (max-width: 47.9375em) {
    .hero-listing-products .subsection.common {
        margin: 0;
        width: 100%
    }
}

@media screen and (max-width: 63.9375em) {
    .hero-listing-products .w-text {
        margin-left: 25px;
        margin-right: 25px
    }
}

.hero-listing-products .w-media {
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media screen and (max-width: 47.9375em) {
    .hero-listing-products .w-media {
        margin-left: -1.5625rem;
        margin-right: -1.5625rem
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-listing-products .w-media {
        margin-left: -2.875rem;
        margin-right: -2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .hero-listing-products .w-media {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.hero-listing-products .w-media .aspect-hero {
    overflow: hidden;
    padding-bottom: 42.85%
}

.hero-listing-products .w-media .img-wrapper {
    background-color: #f1f1f1
}

.hero-listing-products .body-1 {
    margin-bottom: 10px
}

.hero-listing-products .common {
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 30px;
    padding: 0;
    position: relative
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .hero-listing-products .common {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

.search-items {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .search-items {
        width: 100%
    }
}

@media screen and (min-width: 64em) {
    .search-items {
        width: calc(75% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding-top: 50px
    }
}

@media screen and (max-width: 63.9375em) {
    .search-items > .container {
        padding: 0
    }
}

.search-items .search-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

    .search-items .search-list .group {
        list-style: none;
        width: 100%
    }

        .search-items .search-list .group .item {
            border-top: 1px solid #c8c8c8;
            border-bottom: none;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: wrap;
            flex-flow: wrap;
            list-style-type: none;
            margin-top: 30px;
            padding-top: 30px;
            width: 100%
        }

            .search-items .search-list .group .item .w-media {
                width: calc(100% - 1.75rem);
                margin-right: .875rem;
                margin-left: .875rem;
                margin: 0 0 15px;
                position: relative;
                width: 100%
            }

@media print, screen and (min-width: 30.0625em) {
    .search-items .search-list .group .item .w-media {
        width: calc(33.3333333333% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        margin: 0
    }
}

.search-items .search-list .group .item .img-wrapper {
    box-shadow: 0 0 0 1px #c8c8c8
}

.search-items .search-list .group .item .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: absolute;
    right: 0;
    z-index: 1
}

.rooster-toggle .search-items .search-list .group .item .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .search-items .search-list .group .item .status {
        font-size: .75rem;
        line-height: 1
    }
}

.search-items .search-list .group .item .w-desc {
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    width: 100%
}

@media print, screen and (min-width: 30.0625em) {
    .search-items .search-list .group .item .w-desc {
        width: calc(66.6666666667% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        padding-left: 12px
    }
}

@media print, screen and (min-width: 64em) {
    .search-items .search-list .group .item .w-desc {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.search-items .search-list .group .item .img-fluid {
    width: auto
}

.iphone.old-iphone .search-items .search-list .group .item .img-fluid {
    height: 100%;
    max-height: none;
    object-fit: contain;
    width: 100%
}

.search-items .search-list .group .item .date {
    color: #71777b;
    font-size: .625rem;
    letter-spacing: 2px;
    text-transform: uppercase
}

.search-items .search-list .group .item .title {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39;
    font-size: 1.25rem;
    margin-bottom: 0;
    width: 100%;
    word-break: break-word
}

@media print, screen and (min-width: 64em) {
    .search-items .search-list .group .item .title {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .search-items .search-list .group .item .title {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle .search-items .search-list .group .item .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.search-items .search-list .group .item a:hover {
    color: #c20016
}

.search-items .search-list .group .item .sales-code {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    display: block;
    margin-bottom: 14px
}

.rooster-toggle .search-items .search-list .group .item .sales-code {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .search-items .search-list .group .item .sales-code {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.search-items .search-list .group .item .features {
    font-size: .8125rem;
    margin: 3px 20px 21px
}

.search-items .search-list .group .item .view-spec, .search-items .search-list .group .item .size {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    display: table;
    padding-left: 12px;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word
}

.rooster-toggle .search-items .search-list .group .item .view-spec, .rooster-toggle .search-items .search-list .group .item .size {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .search-items .search-list .group .item .view-spec, .search-items .search-list .group .item .size {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.search-items .search-list .group .item .view-spec:hover {
    color: #c20016
}

.search-items .search-list .group .item .size {
    color: #71777b;
    font-weight: normal
}

.search-items .search-list .group .item .product-desc {
    color: #747474;
    margin-bottom: 7px;
    word-break: break-word
}

.search-items .search-list .group .item .author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    color: #28343d;
    font-size: .8125rem;
    margin-bottom: 0
}

.rooster-toggle .search-items .search-list .group .item .author {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.search-items .search-list .group:first-child .item:first-child {
    border-top: none
}

.search-items .search-list .tech-spec {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative
}

    .search-items .search-list .tech-spec:last-child {
        margin-bottom: 0
    }

    .search-items .search-list .tech-spec::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e90d';
        display: block;
        font-size: 1.125rem;
        left: 0;
        position: absolute;
        top: 5px
    }

.search-items .search-list .title:hover {
    color: #c20016
}

.search-items .search-list .label {
    color: #71777b
}

.search-items .search-list .heading-5 {
    color: #747474;
    font-weight: 300;
    width: 100%
}

    .search-items .search-list .heading-5 span {
        text-transform: uppercase
    }

@media print, screen and (min-width: 64em) {
    .search-items .search-list .doc-desc-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-positive: 1;
        flex-grow: 1
    }
}

@media print, screen and (min-width: 64em) {
    .search-items .search-list .doc-desc-container .product-desc {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: 0;
        margin-right: calc(8.33%)
    }
}

.search-items .search-list .doc-desc-container .tech-spec {
    margin: 20px 0 0
}

.search-items .search-top {
    margin-bottom: 20px
}

@media print, screen and (min-width: 64em) {
    .search-items .search-top {
        margin-bottom: 55px
    }
}

.search-items .search-top .search-header {
    border-bottom: 1px solid #c8c8c8;
    margin: 0
}

.search-items .search-top .selected-filter {
    border-bottom: 0;
    margin-bottom: 0
}

@media screen and (max-width: 63.9375em) {
    .search-items .searchtxt-desk {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .search-items .results-text {
        color: #71777b;
        font-size: 2.5rem;
        margin-bottom: 50px
    }
}

.search-items .results-text span {
    color: #28343d;
    word-wrap: break-word
}

.search-items .suggessions {
    color: #71777b;
    font-size: .9375rem;
    margin-bottom: 20px
}

    .search-items .suggessions span {
        color: #28343d;
        text-decoration: underline
    }

.search-items .documents-content .item {
    border-bottom: 1px solid #c8c8c8;
    padding-bottom: 27px
}

.search-items .w-mobile-facet {
    margin-bottom: 20px;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .search-items .w-mobile-facet {
        display: none
    }

        .search-items .w-mobile-facet .sort-container {
            display: none
        }
}

.search-items .w-mobile-facet .category {
    display: block
}

.search-items .common {
    display: -ms-flexbox;
    display: flex;
    margin-top: 15px;
    padding: 10px 0 0
}

@media print, screen and (min-width: 64em) {
    .search-items .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 30.0625em) {
    .search-items .common {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    .search-items .common {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    .search-items .common {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .search-items .common .title-container {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.search-items .common .title-container .title {
    color: #71777b
}

@media screen and (max-width: 63.9375em) {
    .search-items .common .sort-container {
        display: none
    }
}

.no-results-found {
    margin-bottom: 30px;
    margin-top: 0
}

@media print, screen and (min-width: 48em) {
    .no-results-found {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .no-results-found {
        margin-bottom: 0;
        margin-top: 60px
    }
}

.no-results-found .no-results {
    margin: 10px 0 0
}

    .no-results-found .no-results li {
        color: #71777b;
        font-family: "Rooster",sans-serif;
        font-size: .9375rem;
        list-style-type: none;
        padding: 0 0 0 10px;
        position: relative
    }

        .no-results-found .no-results li::before {
            content: '-';
            left: 0;
            position: absolute
        }

.no-results-found .results-text {
    color: #868d91;
    font-size: .9375rem;
    margin-bottom: 3px
}

@media print, screen and (min-width: 64em) {
    .no-results-found .results-text {
        font-size: 2.5rem
    }
}

.no-results-found .results-text span {
    color: #28343d
}

.search-listing {
    border-top: 0
}

    .search-listing .category {
        display: block
    }

@media screen and (max-width: 63.9375em) {
    .search-listing .category {
        border: 0
    }
}

.search-listing .category .title {
    margin-bottom: 10px;
    padding: 0
}

    .search-listing .category .title::after {
        content: ''
    }

.search-listing .category .sub-categories {
    display: block;
    margin: 0;
    padding: 0
}

.searchtxt-mob {
    color: #71777b;
    font-size: .9375rem;
    margin-top: 20px
}

@media screen and (min-width: 64em) {
    .searchtxt-mob {
        display: none
    }
}

.searchtxt-mob span:nth-child(1) {
    color: #28343d
}

.searchtxt-mob span:nth-child(2) {
    text-decoration: underline
}

.form .g-recaptcha {
    margin-top: 30px
}

.form .common, .form form {
    width: 100%
}

@media print, screen and (min-width: 64em) {
    .form .common, .form form {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(16.6666666667% + .875rem)
    }
}

.form input, .form textarea {
    border-radius: 0
}

    .form input:focus, .form textarea:focus {
        border: 1px solid #71777b;
        outline: none
    }

    .form input::-ms-clear {
        display: none
    }

.form.request-brochure .field-row {
    margin: 0 0 40px
}

    .form.request-brochure .field-row.terms-conditions {
        margin: 0 0 15px
    }

.form.request-brochure .form-checkbox-image {
    margin: 0
}

.form.request-brochure .form-radio {
    margin: 20px 0
}

    .form.request-brochure .form-radio .field-set {
        display: inline;
        margin: 0 30px 0 0
    }

@media print, screen and (min-width: 64em) {
    .form.request-brochure .form-radio .field-set {
        display: inline-block;
        margin: 0 0 8px
    }
}

@media screen and (max-width: 63.9375em) {
    .form.request-brochure .w-conditional .field-set {
        display: block
    }
}

@media screen and (max-width: 63.9375em) {
    .form.request-brochure .email-radio {
        margin: 10px 0
    }
}

.form.request-brochure-thankyou .w-rte a {
    border-bottom: 1px solid #c20016;
    display: inline-block
}

.form.request-brochure-thankyou .w-rte .text {
    margin-bottom: 20px
}

.form .terms-conditions {
    border-top: 1px solid #c8c8c8;
    margin: 50px 0 0
}

    .form .terms-conditions ~ .terms-conditions {
        border: 0;
        margin: 25px 0 0;
        padding: 0
    }

    .form .terms-conditions .checkbox-label {
        color: #28343d;
        font-size: .9375rem;
        font-weight: 100
    }

.form .postcode-hidden-elements {
    display: none
}

.form .cta.postcode-finder {
    cursor: pointer;
    padding: 18px 50px 16px 30px
}

.form .heading-2 {
    font-size: 1.875rem;
    margin: 50px 0 30px
}

@media screen and (max-width: 63.9375em) {
    .form .heading-2 {
        line-height: 1
    }
}

@media print, screen and (min-width: 64em) {
    .form .heading-2 {
        font-size: 2.5rem;
        margin: 100px 0 30px
    }
}

.form .heading-3 {
    font-size: 1.25rem;
    margin-top: 50px;
    word-wrap: break-word
}

@media print, screen and (min-width: 64em) {
    .form .heading-3 {
        font-size: 1.875rem;
        margin-top: 90px
    }
}

.form .heading-3:first-child {
    margin-top: 50px
}

.form .heading-4 {
    font-size: 1.5rem
}

.form.register-appliance .heading-2 {
    margin: 50px 0 0
}

.form .w-cta {
    margin-bottom: 50px
}

.form .field-row {
    margin: 40px 0 0
}

    .form .field-row.phone-field {
        display: none
    }

    .form .field-row .field-set {
        margin: 0 0 8px;
        padding: 0
    }

        .form .field-row .field-set.title {
            display: inline-block
        }

    .form .field-row .second-line-text {
        color: #28343d;
        cursor: pointer;
        display: table;
        font-size: .625rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin: 10px 0;
        text-transform: uppercase
    }

        .form .field-row .second-line-text::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e901';
            font-size: 7px;
            transition: transform 675ms ease;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            color: #c20016;
            margin: 3px 0 0 10px;
            position: absolute
        }

.form .form-button {
    clear: both;
    margin: 40px 0 50px
}

    .form .form-button.secondary-button {
        margin: 40px 0 10px
    }

.form .appliance-count-text {
    color: #71777b;
    font-size: .8125rem
}

.form .form-text, .form .gigya-input-text, .form .gigya-input-password, .form .form-text-small, .form select, .form textarea {
    background: #f9f9f9;
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    font-size: .9375rem;
    overflow: hidden;
    padding: 15px 0;
    text-indent: 10px
}

.form .field-set, .form .form-text, .form .gigya-input-text, .form .gigya-input-password, .form label, .form select, .form textarea {
    width: 100%
}

.form select {
    display: none
}

.form .select-wrap {
    position: relative
}

.form .select-drop-icon::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: #28343d;
    position: absolute;
    right: 15px;
    top: 16px;
    transform: rotate(90deg)
}

.form textarea {
    height: 150px;
    padding: 5px;
    text-indent: 1px
}

.form .count-txt.medium {
    color: #262626
}

.form .count-txt.extreme {
    color: #000;
    font-weight: 700
}

.form .checkbox-label {
    display: inline-block;
    width: auto
}

    .form .checkbox-label a {
        border-bottom: 1px solid #28343d
    }

.no-touch .form .checkbox-label a:hover {
    border-bottom-color: #c20016
}

.form .form-text-small {
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .form .form-text-small {
        margin-right: 10px;
        width: 40%
    }
}

.form .calendar-text {
    margin-right: 10px;
    width: 100%
}

.form .title {
    color: #28343d;
    font-size: 1rem
}

.form .description {
    color: #868d91;
    font-size: .8125rem;
    margin: 8px 0 2px
}

    .form .description .popup-link {
        border-bottom: 1px solid #868d91;
        cursor: pointer;
        padding: 0 0 2px
    }

.form .remove-label {
    cursor: pointer;
    display: inline-block;
    font-size: .625rem;
    padding: 33px 0 0;
    text-transform: uppercase
}

    .form .remove-label.hide {
        display: none
    }

    .form .remove-label::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e902';
        color: #c20016;
        font-size: .5rem;
        margin: 0 5px
    }

.form .characters-count {
    color: #868d91;
    font-size: .8125rem;
    text-align: right
}

.form .keyline {
    background: #c8c8c8;
    height: 1px;
    margin: 50px 0
}

@media screen and (max-width: 19.9375em) {
    .form .submit {
        box-sizing: border-box;
        width: 100%
    }
}

.form .submit:not(.disabled) {
    background: #28343d;
    border: 0;
    color: #fff;
    border: 1px solid #28343d
}

    .form .submit:not(.disabled):active {
        background-color: #191f23
    }

    .form .submit:not(.disabled)::before {
        color: #fff
    }

    .form .submit:not(.disabled):active {
        border: 1px solid #191f23
    }

.form .custom-selectbox {
    background: #fff;
    padding: 0;
    text-indent: 0
}

.form .error-description-wrap {
    border: 2px solid #c20016;
    margin-top: 50px
}

    .form .error-description-wrap .error-text {
        display: inline-block;
        font-size: .9375rem
    }

    .form .error-description-wrap a, .form .error-description-wrap .error-element {
        color: #c20016;
        display: inline-block;
        font-size: .9375rem;
        text-decoration: underline
    }

    .form .error-description-wrap .error-title {
        font-weight: bold;
        padding: 25px 25px 0
    }

    .form .error-description-wrap .custom-error {
        padding: 25px
    }

.form hr {
    margin: 50px 0
}

.form .register-appliance-wrap {
    border-top: 1px solid #c8c8c8;
    margin: 40px 0
}

@media screen and (max-width: 19.9375em) {
    .form .add-appliance-btn {
        width: 100%
    }
}

@media screen and (max-width: 19.9375em) {
    .form .postcode-sec {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .form .postcode-sec input {
            margin-bottom: 10px;
            -ms-flex-order: 1;
            order: 1
        }

        .form .postcode-sec .postcode-finder {
            -ms-flex-order: 3;
            order: 3;
            width: 100%
        }

        .form .postcode-sec .second-line-text {
            margin-bottom: 40px;
            -ms-flex-order: 2;
            order: 2
        }
}

.form .flatpickr-wrapper {
    display: inline-block;
    position: relative;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .form .flatpickr-wrapper {
        width: 40%
    }
}

.form .flatpickr-wrapper::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e917';
    pointer-events: none;
    position: absolute;
    right: 20px;
    top: 17px
}

@media print, screen and (min-width: 48em) {
    .form .form-time {
        float: left;
        margin-bottom: 40px;
        margin-right: 10%;
        width: 40%
    }

        .form .form-time .flatpickr-wrapper {
            width: 100%
        }
}

.form .w-brochures {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    margin: 0 -.9583333333rem
}

@media print, screen and (min-width: 64em) {
    .form .w-brochures {
        margin: 0 -.875rem
    }
}

.form .w-brochures .brochure-checkbox {
    display: none
}

.form .w-brochures .brochure {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    cursor: pointer;
    list-style: none;
    margin-top: 30px
}

@media print, screen and (min-width: 48em) {
    .form .w-brochures .brochure {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: 0.725rem;
        margin-right: 0.725rem
    }
}

.form .w-brochures label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    position: relative
}

@media screen and (min-width: 81.25em) {
    .form .w-brochures label:hover {
        box-shadow: 0 0 20px #9b9b9b
    }
}

.form .w-brochures label::before {
    background: rgba(0,0,0,0);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.form .w-brochures .body-1 {
    font-size: .8125rem
}

@media print, screen and (min-width: 64em) {
    .form .w-brochures .body-1 {
        font-size: .9375rem
    }
}

.form .w-brochures .w-text {
    padding: 15px
}

@media print, screen and (min-width: 64em) {
    .form .w-brochures .w-text {
        padding: 20px
    }
}

.form .w-brochures .heading-3 {
    font-size: 1.125rem;
    margin-top: 0
}

@media screen and (max-width: 19.9375em) {
    .form .w-brochures .heading-3 {
        margin-bottom: 0
    }
}

@media print, screen and (min-width: 64em) {
    .form .w-brochures .heading-3 {
        font-size: 1.875rem
    }
}

.form .w-brochures .w-media {
    position: relative
}

    .form .w-brochures .w-media .status {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: .625rem;
        line-height: 1.1;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #28343d;
        background-color: #417505;
        color: #fff;
        display: inline-block;
        font-size: .625rem;
        letter-spacing: 1px;
        padding: 7px 14px;
        position: absolute;
        right: 0;
        z-index: 1
    }

.rooster-toggle .form .w-brochures .w-media .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .form .w-brochures .w-media .status {
        font-size: .75rem;
        line-height: 1
    }
}

.form .w-brochures .w-media .media {
    overflow: hidden;
    position: relative
}

    .form .w-brochures .w-media .media > div {
        padding-bottom: 75%
    }

.form .w-brochures .w-media img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0
}

.form .form-contact-local-depot {
    background: #dedede;
    padding: 10px
}

@media print, screen and (min-width: 64em) {
    .form .form-contact-local-depot {
        padding: 40px
    }
}

.form .form-contact-local-depot .w-child-form-elements {
    background: #fff;
    margin: 0;
    padding: 20px
}

    .form .form-contact-local-depot .w-child-form-elements .w-conditional {
        display: none
    }

@media print, screen and (min-width: 64em) {
    .form .form-contact-local-depot .w-child-form-elements .w-conditional {
        margin: 0 0 0 25px
    }
}

.form .form-contact-local-depot .w-description {
    font-size: .9375rem;
    font-weight: 100;
    margin-bottom: 20px
}

    .form .form-contact-local-depot .w-description a {
        border-bottom: 1px solid #c20016;
        display: inline-block
    }

.form .form-contact-local-depot ul {
    list-style-type: none;
    margin-left: 3px
}

    .form .form-contact-local-depot ul li::before {
        content: '-';
        margin-right: 5px
    }

.form .brochure-checkbox:checked + label {
    box-shadow: 0 0 20px #9b9b9b
}

    .form .brochure-checkbox:checked + label .media::before {
        background-color: #28343d;
        border: 0
    }

    .form .brochure-checkbox:checked + label .media::after {
        color: #fff;
        display: block
    }

.form .brochure-checkbox + label .media::before {
    border-radius: 50%;
    content: '';
    height: 60px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 60px;
    z-index: 2
}

@media print, screen and (min-width: 48em) {
    .form .brochure-checkbox + label .media::before {
        height: 100px;
        width: 100px
    }
}

.form .brochure-checkbox + label .media::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e907';
    color: #fff;
    display: none;
    font-size: 1.25rem;
    left: 50%;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 2
}

.terms-conditions, .w-tick-checkbox {
    margin: 50px 0 0;
    padding: 50px 0 0
}

@media screen and (max-width: 63.9375em) {
    .terms-conditions, .w-tick-checkbox {
        padding: 35px 0 0
    }
}

.terms-conditions .checkbox + label::after, .w-tick-checkbox .checkbox + label::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e907';
    display: none;
    font-size: .5rem;
    height: 7px;
    left: 3px;
    line-height: inherit;
    padding: 3px 2px;
    top: 4px;
    width: 7px
}

.terms-conditions .checkbox + label::before, .w-tick-checkbox .checkbox + label::before {
    top: 2px
}

.terms-conditions .checkbox:checked + label::after, .w-tick-checkbox .checkbox:checked + label::after {
    background: #f9f9f9;
    display: block
}

.form-success:first-child {
    position: relative
}

@media print, screen and (min-width: 64em) {
    .form-success:first-child {
        padding-bottom: 210px
    }
}

.feed-summary .heading-2 {
    margin-bottom: 0
}

@media print, screen and (min-width: 64em) {
    .feed-summary .heading-2 {
        margin-top: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .feed-summary .common, .feed-summary form {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media print, screen and (min-width: 64em) {
    .feed-summary .form-selectbox, .feed-summary .form-time {
        float: left;
        margin-bottom: 40px;
        margin-right: 40px;
        width: calc(33% - 40px)
    }
}

.feed-summary.form-success {
    margin-bottom: 50px;
    position: relative;
    z-index: -1
}

    .feed-summary.form-success table {
        border-collapse: collapse;
        width: 100%
    }

    .feed-summary.form-success td, .feed-summary.form-success th {
        border: 1px solid #d8d8d8;
        padding: 8px;
        text-align: left
    }

    .feed-summary.form-success th {
        background: #f1f1f1
    }

    .feed-summary.form-success .export-excel {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-bottom: 20px;
        width: 100%
    }

        .feed-summary.form-success .export-excel .cta {
            margin-right: 0
        }

    .feed-summary.form-success .disclaimer {
        font-size: .625rem;
        font-weight: 100;
        margin-top: 20px
    }

.feed-reports .link {
    margin-bottom: 20px
}

.filtering-sidebar__clear {
    text-transform: uppercase
}

.filtering-sidebar__form-section > div + div {
    margin-top: 10px
}

.filtering-sidebar__form-section--filters .accordion-section--active + .accordion-section-content {
    display: block
}

.filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group {
    padding: 7px 0;
    display: none
}

    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--text-only li li {
        padding-left: 0
    }

    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--text-only li .more-options li:first-child {
        padding-top: 0
    }

    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li {
            width: 33.33%;
            padding: 10px 5px 15px;
            text-align: center
        }

            .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label {
                padding: 0
            }

                .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label .filtering-sidebar__facet-colour {
                    display: block;
                    border-radius: 50%;
                    width: 48px;
                    height: 48px;
                    margin: 0 auto;
                    position: relative
                }

                .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label.active .filtering-sidebar__facet-colour {
                    border: 4px solid #fff
                }

                    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label.active .filtering-sidebar__facet-colour::before {
                        border: 1px solid #aeaeae;
                        position: absolute;
                        top: -4px;
                        left: -4px;
                        width: calc(100% + 6px);
                        height: calc(100% + 6px);
                        border-radius: 50%;
                        content: ''
                    }

                    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label.active .filtering-sidebar__facet-colour::after {
                        background: url("/Media/check-white.svg") no-repeat center center transparent;
                        content: '';
                        display: block;
                        height: 100%;
                        width: 100%;
                        color: #fff;
                        height: 18px;
                        text-align: center;
                        position: absolute;
                        left: calc(50% - 9px);
                        top: calc(50% - 9px);
                        width: 20px
                    }

                .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label a {
                    margin-top: 4px;
                    display: inline-block
                }

            .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li.filtering-sidebar__more, .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li.filtering-sidebar__less {
                width: 100%;
                padding: 0
            }

            .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--image-only li .filtering-sidebar__facets-option-label::before {
                display: none
            }

    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group ul {
        list-style: none;
        margin: 0
    }

        .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group ul li {
            padding: 7px 40px 8px 20px;
            position: relative
        }

            .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group ul li ul.more-options {
                display: none
            }

                .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group ul li ul.more-options li {
                    float: left
                }

            .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group ul li.filtering-sidebar__less ul.more-options {
                display: block;
                overflow: hidden
            }

    .filtering-sidebar__form-section--filters .filtering-sidebar__form-field-group .filtering-sidebar__facets--view {
        margin-top: -8px;
        padding: 0 20px 11px;
        position: relative
    }

.filtering-sidebar__facets-checkbox {
    opacity: 0;
    position: absolute
}

.filtering-sidebar__facets-option-label {
    color: #767572;
    cursor: pointer;
    display: inline-block;
    font-size: .9375rem;
    padding-left: 30px;
    position: relative;
    width: auto
}

    .filtering-sidebar__facets-option-label::before {
        background: transparent;
        border: 1px solid #747474;
        box-sizing: border-box;
        content: "";
        display: inline-block;
        height: 16px;
        left: 0;
        position: absolute;
        top: 3px;
        transition: background-color 400ms cubic-bezier(0.2, 0, 0.2, 1),border-color 400ms cubic-bezier(0.2, 0, 0.2, 1);
        vertical-align: text-top;
        width: 16px
    }

    .filtering-sidebar__facets-option-label a {
        pointer-events: none;
        color: #767572
    }

.disabled .filtering-sidebar__facets-option-label a {
    color: #c8c8c8
}

.filtering-sidebar__facets-option-label a + span {
    font-weight: 400
}

.filtering-sidebar__facets-option-label.active {
    font-weight: 700
}

    .filtering-sidebar__facets-option-label.active::before {
        background: url("/Media/check-white.svg") no-repeat center center transparent;
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        background-color: #70c624;
        border-color: #70c624;
        color: #fff;
        height: 16px;
        line-height: 16px;
        text-align: center;
        width: 16px
    }

    .filtering-sidebar__facets-option-label.active a + span {
        font-weight: 700
    }

.filtering-sidebar__facets--view-label .btn {
    margin: 0;
    padding: 0
}

.filtering-sidebar__form-submit {
    background-color: #70c624;
    border-radius: 0;
    font-weight: 700
}

    .filtering-sidebar__form-submit:hover {
        background-color: #5ca41e
    }

        .filtering-sidebar__form-submit:hover:after {
            animation: none
        }

.filtering-sort {
    z-index: 2
}

.filtering-sort__container {
    opacity: 1;
    padding-top: 29px;
    transition: opacity 100ms cubic-bezier(0.2, 0, 0.2, 1),visibility 100ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: visible
}

@media print, screen and (min-width: 64em) {
    .js-filtering-sort-sticky .filtering-sort__container {
        top: 116px
    }

    .js-filtering-sort-sticky.has-scrolled .filtering-sort__container {
        top: 58px
    }

    .js-filtering-sort-sticky.has-scrolled.scrolled-more .filtering-sort__container {
        top: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .filtering-sort__container {
        padding-top: 24px
    }

    .js-filtering-sort-sticky .filtering-sort__container, .js-filtering-sort-sticky.has-scrolled .filtering-sort__container {
        top: 184px
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__container {
        padding-top: 15px
    }

    .js-filtering-sort-sticky .filtering-sort__container, .js-filtering-sort-sticky.has-scrolled .filtering-sort__container {
        top: 96px
    }

    .js-filtering-sort-sticky.has-scrolled.scrolled-more .filtering-sort__container {
        top: 56px
    }
}

.filtering-sort__container.js-filtering-sort-fadeout {
    opacity: 0;
    visibility: hidden
}

.no-js .filtering-sort__form {
    display: none
}

.filtering-sort__form-field-select .custom-selectbox .selectbox-label {
    color: #28343d;
    text-align: left
}

.filtering-sort__btn-label {
    display: inline-block;
    margin-top: -2px;
    vertical-align: middle
}

.filtering-sort__results-count {
    font-size: 1.125rem;
    font-weight: 300
}

.js-filtering-sort-sticky .filtering-sort__results-count {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort__results-count {
        padding: 8px 9px 0
    }
}

@media screen and (max-width: 47.9375em) {
    .filtering-sort {
        padding-bottom: 115px
    }
}

.footer {
    background: none;
    padding-bottom: 25px;
    padding-top: 25px
}

@media print, screen and (min-width: 64em) {
    .footer {
        padding-bottom: 50px;
        padding-top: 50px
    }
}

.footer .grid {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .footer .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .footer .grid {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .footer .grid {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.footer .logo-grid {
    -ms-flex-pack: center;
    justify-content: center
}

    .footer .logo-grid .column {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

@media print, screen and (min-width: 64em) {
    .footer .logo-grid .column {
        width: calc(16.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.footer .logo-grid .footer-logo {
    text-align: center
}

    .footer .logo-grid .footer-logo img {
        max-width: 100px;
        width: auto;
        height: 100%
    }

@media print, screen and (min-width: 64em) {
    .footer .logo-grid .footer-logo img {
        max-width: 120px
    }
}

.footer .logo-grid .footer-logo svg {
    width: 130px
}

.footer .footer-links {
    margin-top: 50px
}

@media print, screen and (min-width: 64em) {
    .footer .footer-links {
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media screen and (max-width: 19.9375em) {
    .footer .footer-links {
        -ms-flex-flow: column;
        flex-flow: column
    }

        .footer .footer-links .column:first-child {
            padding-top: 0
        }

        .footer .footer-links .column.social-icons {
            text-align: center
        }

        .footer .footer-links .social-icons h3 {
            margin-bottom: 10px
        }

        .footer .footer-links .social-icons ul {
            margin-bottom: 0
        }

        .footer .footer-links .social-icons button.mobile-accordion-trigger {
            text-align: center
        }
}

.footer .footer-links .column {
    width: calc(50% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem
}

@media screen and (max-width: 19.9375em) {
    .footer .footer-links .column {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem;
        border-bottom: 1px solid #d8d8d8;
        padding: 30px 0
    }

    .footer .footer-links h3 {
        margin-bottom: 0;
        position: relative
    }

    .footer .footer-links .collapsed h3::before {
        background-color: #c20016;
        content: '';
        height: 10px;
        position: absolute;
        right: 4px;
        transition: all 0.5s ease;
        transform: rotate(0deg);
        width: 2px;
        top: 7px
    }

    .footer .footer-links .collapsed h3::after {
        background-color: #c20016;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        transition: all 0.5s ease;
        transform: rotate(180deg);
        width: 10px;
        top: 11px
    }

    .footer .footer-links .column:not(.collapsed):not(.social-icons) h3::before {
        background-color: #c20016;
        content: '';
        height: 10px;
        position: absolute;
        right: 4px;
        transition: all 0.5s ease;
        transform: rotate(90deg);
        width: 2px;
        top: 6px
    }

    .footer .footer-links .column:not(.collapsed):not(.social-icons) h3::after {
        background-color: #c20016;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        transition: all 0.5s ease;
        transform: rotate(360deg);
        width: 10px;
        top: 10px
    }

    .footer .footer-links .column.subsection .content {
        box-sizing: border-box;
        display: none;
        margin: 0 -2%;
        padding-top: 20px
    }

        .footer .footer-links .column.subsection .content li {
            box-sizing: border-box;
            float: left;
            padding: 0 2%;
            width: 50%
        }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .footer .footer-links .column {
        width: calc(25% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .footer .footer-links .column {
        width: calc(20% - 1.75rem)
    }
}

.footer .footer-links button.mobile-accordion-trigger {
    background: none;
    border: none;
    display: block;
    height: auto;
    margin: 0;
    outline: none;
    padding: 0;
    text-align: left;
    width: 100%;
    color: #000000;
}

.footer .footer-links ul {
    list-style: none;
    margin: 0;
    margin-bottom: 30px
}

.footer .footer-links a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    font-weight: 400;
    display: inline-block;
    line-height: 2.31;
    position: relative;
    color: #000000 !important;
}

.rooster-toggle .footer .footer-links a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .footer .footer-links a {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.footer .footer-links a:after {
    transform: scaleX(0);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    visibility: hidden;
    width: 100%
}

.no-touch .footer .footer-links a:hover:after {
    transform: scaleX(1);
    visibility: visible
}

@media screen and (min-width: 100.0625em) {
    .footer .footer-links a {
        line-height: 2.31
    }
}

.footer .footer-links a::after {
    background-color: #c20016;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 24px
}

.footer .copyright {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    color: #fff;
    font-size: .8125rem;
    font-weight: 300;
    padding: 15px 0 0;
    text-align: center
}

.rooster-toggle .footer .copyright {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .footer .copyright {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media screen and (min-width: 81.25em) {
    .footer .copyright {
        font-size: .8125rem
    }
}

@media print, screen and (min-width: 64em) {
    .footer .copyright {
        margin-top: 30px
    }
}

@media screen and (max-width: 19.9375em) {
    .footer .copyright {
        margin-top: 10px
    }
}

.footer .social-icons .social-icon .social {
    display: inline-block;
    margin-left: 28px;
    position: relative
}

    .footer .social-icons .social-icon .social::before {
        background: url("../Media/social-sprite.png") no-repeat;
        content: '';
        height: 20px;
        left: -28px;
        position: absolute;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        width: 20px
    }

@media screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .footer .social-icons .social-icon .social::before {
        background-image: url("../Media/social-sprite-2x.png");
        background-size: 20px 83px
    }
}

.footer .social-icons .social-icon .social.facebook::before {
    background-position: 0 0
}

.footer .social-icons .social-icon .social.pinterest::before {
    background-position: 0 -63px
}

.footer .social-icons .social-icon .social.instagram::before {
    background-position: 0 -21px
}

.footer .social-icons .social-icon .social.youtube::before {
    background-position: 0 -42px
}

.footer .social-icons .social-icon .social.linkedin::before {
    background-image: url("../Media/linkedin-icon.png")
}

@media screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .footer .social-icons .social-icon .social.linkedin::before {
        background-image: url("../Media/linkedin-icon-2x.png");
        background-size: 20px 20px
    }
}

@media screen and (max-width: 19.9375em) {
    .footer .social-icons .social-icon {
        display: inline-block;
        vertical-align: middle
    }

        .footer .social-icons .social-icon a.social {
            display: block;
            height: 100%;
            font-size: 0;
            text-indent: -999rem;
            text-transform: capitalize;
            width: 100%
        }
}

@media screen and (max-width: 19.9375em) {
    .footer .social-icons .content {
        display: block
    }
}

.search-tabs {
    margin-top: 25px
}

@media print, screen and (min-width: 64em) {
    .search-tabs {
        margin-top: 0
    }
}

.search-tabs .tab-nav {
    border: 1px solid #c8c8c8;
    border-top: 0;
    list-style: none;
    margin: 0
}

@media screen and (max-width: 63.9375em) {
    .search-tabs .tab-nav {
        margin-top: -1px;
        max-height: 0;
        overflow: hidden;
        transition: all 800ms ease
    }
}

@media print, screen and (min-width: 64em) {
    .search-tabs .tab-nav {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row
    }

        .search-tabs .tab-nav::after {
            display: none
        }
}

.search-tabs .tab-nav li {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .search-tabs .tab-nav li.active a {
        font-weight: 700
    }

    .search-tabs .tab-nav li:first-child {
        margin-top: 3px
    }

    .search-tabs .tab-nav li:lastr-child {
        margin-bottom: 3px
    }
}

@media print, screen and (min-width: 64em) {
    .search-tabs .tab-nav li {
        border-top: 3px solid #fff;
        min-width: 16.38rem;
        text-align: center;
        top: 1px
    }
}

.search-tabs .tab-nav a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    display: block;
    font-weight: normal;
    padding: 11px 20px
}

.rooster-toggle .search-tabs .tab-nav a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .search-tabs .tab-nav a {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .search-tabs .tab-nav a {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: .8125rem;
        line-height: 1.54;
        font-weight: 400;
        padding: 18px 20px;
        text-transform: uppercase
    }

    .rooster-toggle .search-tabs .tab-nav a {
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 300
    }
}

@media screen and (min-width: 64em) and (min-width: 100.0625em) {
    .search-tabs .tab-nav a {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.search-tabs .tab-nav a[disabled] {
    cursor: default;
    opacity: 0.25;
    pointer-events: none
}

@media print, screen and (min-width: 64em) {
    .search-tabs .tab-nav .active {
        border-bottom: 1px solid #fff;
        border-left: 1px solid #c8c8c8;
        border-right: 1px solid #c8c8c8;
        border-top: 3px solid #c20016
    }

        .search-tabs .tab-nav .active a {
            color: #c20016
        }
}

.search-tabs .w-tab-nav {
    margin-bottom: 20px;
    min-height: 3.1rem;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .search-tabs .w-tab-nav {
        margin-bottom: 0;
        min-height: auto
    }
}

@media screen and (max-width: 63.9375em) {
    .search-tabs .w-tab-nav.noactive-results {
        display: none
    }
}

.search-tabs .w-tab-nav.open .trigger-dropdown {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54
}

.rooster-toggle .search-tabs .w-tab-nav.open .trigger-dropdown {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .search-tabs .w-tab-nav.open .trigger-dropdown {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.search-tabs .w-tab-nav.open .trigger-dropdown::before {
    transform: rotate(270deg)
}

@media screen and (max-width: 63.9375em) {
    .search-tabs .w-tab-nav.open .tab-nav {
        max-height: 200px
    }
}

@media print, screen and (min-width: 64em) {
    .search-tabs .w-tab-nav.open .tab-nav {
        display: -ms-flexbox;
        display: flex
    }
}

.search-tabs .trigger-dropdown {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    letter-spacing: initial;
    margin-right: 0;
    padding: 14px 20px;
    text-transform: inherit;
    width: 100%
}

.rooster-toggle .search-tabs .trigger-dropdown {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .search-tabs .trigger-dropdown {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .search-tabs .trigger-dropdown {
        display: none
    }
}

.search-tabs .trigger-dropdown::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    margin-top: -3px;
    right: 1.25rem;
    transform: rotate(90deg)
}

.w-tab-nav a.cta.primary:not(.disabled) {
    background-color: inherit;
    border: 1px solid #c8c8c8;
    color: inherit
}

    .w-tab-nav a.cta.primary:not(.disabled)::before {
        color: #c20016
    }

    .w-tab-nav a.cta.primary:not(.disabled) .count {
        padding-left: 4px
    }

.tab-item {
    display: none;
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media print, screen and (min-width: 48em) {
    .tab-item {
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .tab-item {
        margin: 0
    }
}

.tab-item.active {
    display: block
}

@media print, screen and (min-width: 64em) {
    .tab-item.active {
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

.product-detail {
    margin-bottom: 50px
}

@media print, screen and (min-width: 64em) {
    .product-detail {
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 100px
    }
}

.product-detail .product-images {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-images {
        width: 59%
    }
}

.product-detail .product-images .w-media {
    position: relative
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-images .carousel {
        border-top: 0
    }
}

.product-detail .product-images .resize {
    padding-bottom: 61.648%
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-images .resize img {
        max-width: 484px
    }
}

.product-detail .controls .icon {
    cursor: pointer;
    position: absolute;
    top: 46%;
    z-index: 2
}

@media screen and (max-width: 63.9375em) {
    .product-detail .controls .right {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .product-detail .controls .right {
        right: 2.95rem
    }
}

@media screen and (min-width: 81.25em) {
    .product-detail .controls .right {
        right: 4.95rem
    }
}

@media screen and (max-width: 63.9375em) {
    .product-detail .controls .left {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .product-detail .controls .left {
        left: 2.95rem
    }
}

@media screen and (min-width: 81.25em) {
    .product-detail .controls .left {
        left: 4.95rem
    }
}

.product-detail .product-info {
    margin: 0 1.5625rem
}

@media print, screen and (min-width: 48em) {
    .product-detail .product-info {
        margin: 0 2.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-info {
        margin-left: 0;
        margin-right: 50px;
        padding-top: 0;
        width: calc(41% - 50px)
    }
}

.product-detail .product-info .product-logo {
    margin-bottom: 20px
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-info .product-logo {
        margin-top: 30px
    }
}

.product-detail .product-info .product-logo img {
    max-width: 130px
}

@media screen and (max-width: 81.1875em) {
    .product-detail .product-info .product-logo img {
        max-width: 110px
    }
}

.no-flexboxlegacy .product-detail .product-info .product-logo img {
    height: 100%
}

.product-detail .product-info h1 {
    font-size: 1.5625rem;
    line-height: 1.4
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-info h1 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .product-detail .product-info h1 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .product-detail .product-info h1 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

@media print, screen and (min-width: 64em) {
    .product-detail .product-info h1 {
        margin-bottom: 20px;
        margin-top: 30px
    }
}

.product-detail .product-info .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: static;
    right: initial;
    z-index: 1;
    margin-bottom: 20px;
    position: static
}

.rooster-toggle .product-detail .product-info .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .product-detail .product-info .status {
        font-size: .75rem;
        line-height: 1
    }
}

.product-detail .product-info .date {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    color: #868d91;
    font-size: .75rem;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform: uppercase
}

.rooster-toggle .product-detail .product-info .date {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .product-detail .product-info .date {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.product-detail .product-info .tagline {
    margin-bottom: 20px
}

.product-detail .product-info p {
    font-size: .9375rem;
    margin-bottom: 20px
}

.product-detail .product-info ul {
    font-size: .9375rem;
    font-weight: 300
}

.product-detail .product-info .product-code {
    margin-top: 20px
}

    .product-detail .product-info .product-code strong {
        margin-right: 5px
    }

.product-detail .product-info .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 30px
}

.rooster-toggle .product-detail .product-info .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .product-detail .product-info .title {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.product-detail .custom-selectbox {
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    overflow: hidden;
    padding: 3px;
    background: #f9f9f9
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .product-detail .custom-selectbox {
        width: calc(58.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: 0
    }
}

.product-detail .pack-content {
    list-style-type: none;
    margin: 0 0 30px
}

    .product-detail .pack-content li {
        margin-bottom: 5px
    }

.product-detail .sales-code {
    font-size: .9375rem;
    list-style-type: none;
    margin-left: 15px;
    margin-top: 25px
}

    .product-detail .sales-code li {
        margin-bottom: 10px
    }

        .product-detail .sales-code li::before {
            background: #28343d;
            border-radius: 50%;
            content: '';
            display: inline-block;
            height: 4px;
            margin-right: 15px;
            vertical-align: middle;
            width: 4px
        }

.product-detail .carousel .dots {
    margin-bottom: 20px;
    position: relative;
    top: 20px
}

@media print, screen and (min-width: 64em) {
    .product-detail .carousel .dots {
        top: 30px
    }
}

.product-detail .carousel.single {
    padding: 30px 0
}

@media print, screen and (min-width: 64em) {
    .product-detail .carousel.single {
        padding: 30px 0 40px
    }
}

.product-detail .carousel .slider .list {
    transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72)
}

@media screen and (max-width: 47.9375em) {
    .product-detail .carousel .slider .list {
        transition-duration: 0.2s
    }
}

.product-detail .carousel .item-block {
    max-width: none;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.2, 0, 0.2, 1),visibility 800ms cubic-bezier(0.2, 0, 0.2, 1);
    visibility: hidden
}

    .product-detail .carousel .item-block.active {
        opacity: 1;
        visibility: visible
    }

.no-js .product-detail .carousel .item-block {
    opacity: 1;
    visibility: visible
}

.product-detail .plp-links {
    list-style-type: none;
    margin-left: 0px
}

    .product-detail .plp-links a:link {
        text-decoration: underline;
        color: #4A90E2
    }

.inpage-nav {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .inpage-nav {
        display: initial;
        width: 100%
    }
}

.inpage-nav:last-child > .container:last-child {
    margin-bottom: 50px
}

@media print, screen and (min-width: 48em) {
    .inpage-nav:last-child > .container:last-child {
        margin-bottom: 100px
    }
}

.inpage-nav .grid {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .inpage-nav .grid {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .grid {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .inpage-nav .grid {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav > .container:first-child {
        margin-top: 100px
    }
}

.inpage-nav h2, .inpage-nav .subsection {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.4375rem);
    margin-right: .71875rem;
    margin-left: .71875rem
}

@media print, screen and (min-width: 48em) {
    .inpage-nav h2, .inpage-nav .subsection {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .inpage-nav h2, .inpage-nav .subsection {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (min-width: 81.25em) {
    .inpage-nav h2, .inpage-nav .subsection {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.inpage-nav h2 {
    margin-bottom: 25px
}

@media print, screen and (min-width: 48em) {
    .inpage-nav h2 {
        margin-bottom: 40px
    }
}

.inpage-nav .subsection {
    border-top: 1px solid #d8d8d8
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection {
        display: -ms-flexbox;
        display: flex;
        padding: 0
    }

        .inpage-nav .subsection > h3, .inpage-nav .subsection > ul, .inpage-nav .subsection > dl {
            padding-top: 50px
        }

        .inpage-nav .subsection .key {
            width: calc(33.3333333333% - 1.5rem);
            margin-right: .75rem;
            margin-left: .75rem;
            display: inline-block;
            margin-left: 0;
            vertical-align: top
        }

        .inpage-nav .subsection .value {
            width: calc(66.6666666667% - 1.5rem);
            margin-right: .75rem;
            margin-left: .75rem;
            display: inline-block;
            margin-right: 0
        }
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection.collapsed h3::before {
        background-color: #c20016;
        content: '';
        height: 10px;
        position: absolute;
        right: 4px;
        transition: all 0.5s ease;
        transform: rotate(0deg);
        width: 2px;
        top: 33px
    }

    .inpage-nav .subsection.collapsed h3::after {
        background-color: #c20016;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        transition: all 0.5s ease;
        transform: rotate(180deg);
        width: 10px
    }

    .inpage-nav .subsection:not(.collapsed) h3::before {
        background-color: #c20016;
        content: '';
        height: 10px;
        position: absolute;
        right: 4px;
        transition: all 0.5s ease;
        transform: rotate(90deg);
        width: 2px;
        top: 33px
    }

    .inpage-nav .subsection:not(.collapsed) h3::after {
        background-color: #c20016;
        content: '';
        height: 2px;
        position: absolute;
        right: 0;
        transition: all 0.5s ease;
        transform: rotate(360deg);
        width: 10px
    }
}

.inpage-nav .subsection h3 {
    font-size: 1.125rem;
    line-height: 1.39
}

@media print, screen and (min-width: 64em) {
    .inpage-nav .subsection h3 {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .subsection h3 {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection h3 {
        margin-bottom: 0;
        padding: 25px 0
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection h3 {
        width: calc(25% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: 0
    }
}

.inpage-nav .subsection h3::after {
    font-size: .625rem;
    margin-top: 12px;
    position: absolute;
    right: 0
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection:last-child {
        border-bottom: 1px solid #d8d8d8
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection:last-child {
        margin-bottom: 0
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection:not(:last-child) {
        padding-bottom: 40px
    }
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection > dl {
        display: none;
        margin-bottom: 0;
        overflow: hidden
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection > dl {
        width: calc(75% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-bottom: 0
    }
}

.inpage-nav .subsection .key {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .inpage-nav .subsection .key {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .subsection .key {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection .key:not(:first-child) {
        margin-top: 15px
    }
}

.inpage-nav .subsection ul {
    list-style: none;
    margin-bottom: 0;
    margin-left: 0
}

.inpage-nav .subsection dd, .inpage-nav .subsection dt {
    margin-bottom: 12px
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection dt {
        margin-bottom: 0
    }
}

.inpage-nav .subsection dd:last-child {
    margin-bottom: 25px
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection > ul {
        display: none;
        margin-bottom: 0
    }

        .inpage-nav .subsection > ul li:last-child {
            margin-bottom: 25px
        }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection > ul {
        width: calc(66.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media screen and (min-width: 81.25em) {
    .inpage-nav .subsection > ul {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.inpage-nav .subsection .document {
    padding-left: 25px;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection .document {
        display: inline-block;
        margin-bottom: 40px;
        vertical-align: top;
        width: 33%
    }

        .inpage-nav .subsection .document:last-child, .inpage-nav .subsection .document:nth-last-child(2):nth-child(odd) {
            margin-bottom: 0
        }
}

@media screen and (min-width: 81.25em) {
    .inpage-nav .subsection .document {
        width: 44%
    }
}

.inpage-nav .subsection .document a {
    display: block
}

    .inpage-nav .subsection .document a::before {
        content: '';
        display: inline-block;
        height: 50px;
        left: -4px;
        position: absolute;
        width: 30px
    }

.inpage-nav .subsection .document::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90d';
    font-size: 1.125rem;
    left: 0;
    position: absolute;
    top: 5px
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .subsection .document:not(:first-child) {
        margin-top: 15px
    }
}

.inpage-nav .subsection .document .name {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    letter-spacing: -0.2px
}

.rooster-toggle .inpage-nav .subsection .document .name {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .subsection .document .name {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .subsection .document .name {
        padding-right: 15px;
        word-wrap: break-word
    }
}

.inpage-nav .subsection .document .size {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    color: #71777b;
    letter-spacing: -0.2px;
    margin-top: 5px
}

.rooster-toggle .inpage-nav .subsection .document .size {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .subsection .document .size {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.no-touch .inpage-nav .document a:hover {
    color: #c20016
}

.inpage-nav .list-items li {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px
}

    .inpage-nav .list-items li:not(:first-child) {
        margin-top: 0.3rem
    }

    .inpage-nav .list-items li:last-child {
        margin-bottom: 0
    }

.inpage-nav .list-items img {
    -ms-flex-item-align: start;
    -ms-grid-row-align: start;
    align-self: start;
    height: auto;
    max-width: 40px
}

    .inpage-nav .list-items img + span {
        margin-left: 15px
    }

@media print, screen and (min-width: 48em) {
    .inpage-nav .list-items img + span {
        margin-left: 30px
    }
}

.inpage-nav .value {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .inpage-nav .value {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .value {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.inpage-nav .value .yes::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e907';
    color: #c20016
}

.inpage-nav .value .no::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90b';
    color: #c20016
}

.inpage-nav .sticky-links {
    display: block
}

@media screen and (max-width: 47.9375em) {
    .inpage-nav .sticky-links {
        display: none
    }
}

.inpage-nav .sticky-links .links {
    background-color: #fff
}

@media print, screen and (min-width: 48em) {
    .inpage-nav .sticky-links .links {
        padding: 10px 0
    }
}

.inpage-nav .sticky-links a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    color: #71777b;
    display: inline-block;
    letter-spacing: 2px;
    line-height: 1.23;
    margin-bottom: 20px;
    margin-right: 60px;
    position: relative;
    text-transform: uppercase
}

.rooster-toggle .inpage-nav .sticky-links a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .inpage-nav .sticky-links a {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.inpage-nav .sticky-links a.active {
    color: #c20016
}

    .inpage-nav .sticky-links a.active::before {
        background-color: #c20016;
        bottom: -3px;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%
    }

.no-touch .inpage-nav .sticky-links a:hover {
    color: #c20016
}

    .no-touch .inpage-nav .sticky-links a:hover::before {
        background-color: #c20016;
        bottom: -3px;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%
    }

@media print, screen and (min-width: 48em) {
    .inpage-nav[data-inview="true"].sticky .sticky-links {
        left: 0;
        margin-bottom: 0;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 99
    }

        .inpage-nav[data-inview="true"].sticky .sticky-links > .container {
            background-color: #ffffff
        }
}

.find-depot {
    margin-bottom: 25px
}

@media print, screen and (min-width: 64em) {
    .find-depot {
        border-bottom: 1px solid #c8c8c8;
        border-top: 1px solid #c8c8c8;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .find-depot.results-shown .search-depot {
        margin-bottom: 20px
    }

    .find-depot.results-shown .results-section {
        position: relative
    }

        .find-depot.results-shown .results-section::before {
            background-color: #c8c8c8;
            content: '';
            height: 1px;
            left: 0;
            margin-left: -25px;
            opacity: 0.3;
            padding-right: 50px;
            position: absolute;
            top: 0;
            width: 100%
        }
}

.find-depot.results-shown h1, .find-depot.results-shown .desc {
    display: none
}

.find-depot h1 {
    font-size: 1.5625rem;
    line-height: 1.6;
    margin-bottom: 15px
}

@media print, screen and (min-width: 64em) {
    .find-depot h1 {
        font-size: 2.5rem;
        line-height: 1;
        margin-top: 40px
    }
}

.find-depot .desc {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    line-height: 1.33;
    margin-bottom: 0
}

.rooster-toggle .find-depot .desc {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .find-depot .desc {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 64em) {
    .find-depot .expand-section {
        margin-bottom: 30px
    }
}

.find-depot .expand-section .copy {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67
}

.rooster-toggle .find-depot .expand-section .copy {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .find-depot .expand-section .copy {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 64em) {
    .find-depot .expand-section .copy {
        line-height: 1.67;
        margin-top: 30px
    }
}

.find-depot .expand-section .expand {
    margin-top: 25px
}

@media screen and (max-width: 63.9375em) {
    .find-depot h1, .find-depot .desc, .find-depot .expand-section, .find-depot .search-container, .find-depot .result {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

.find-depot .search-section {
    margin: 30px 0;
    padding: 30px 0
}

@media print, screen and (min-width: 64em) {
    .find-depot .search-section {
        margin-bottom: 0;
        max-height: 710px;
        overflow: hidden;
        padding: 0 25px;
        width: 30%
    }
}

.find-depot .search-container {
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .find-depot .search-container {
        margin-bottom: 0;
        width: 100%
    }
}

.find-depot .search-icon {
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 12px;
    top: 6px
}

    .find-depot .search-icon::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e91b';
        color: #c20016;
        font-size: 1.125rem
    }

.find-depot .search-depot {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    font-size: 1.25rem;
    line-height: 1;
    padding: 11px 50px 11px 18px;
    width: 100%
}

.rooster-toggle .find-depot .search-depot {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .find-depot .search-depot {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.find-depot .suggestions-container {
    background: #fff;
    box-sizing: border-box;
    display: none;
    padding: 0 1px;
    position: absolute;
    top: 48px;
    width: 100%;
    z-index: 99
}

    .find-depot .suggestions-container.show {
        display: block
    }

    .find-depot .suggestions-container .location::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e916';
        color: #c20016;
        vertical-align: middle
    }

    .find-depot .suggestions-container .location span {
        padding-left: 8px;
        vertical-align: middle
    }

    .find-depot .suggestions-container span {
        padding-left: 12px;
        vertical-align: middle
    }

    .find-depot .suggestions-container ul {
        box-shadow: 0 -1px 0 0 rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.2);
        list-style: none;
        margin: 0
    }

    .find-depot .suggestions-container li {
        cursor: pointer;
        overflow: hidden;
        padding: 12px 18px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

        .find-depot .suggestions-container li.selected, .find-depot .suggestions-container li:hover {
            background: #f6f6f6
        }

        .find-depot .suggestions-container li:not(.location)::before {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e915';
            color: #71777b;
            vertical-align: middle
        }

.find-depot .phone {
    display: block;
    margin-top: 10px
}

.no-touch .find-depot .phone {
    pointer-events: none
}

@media screen and (max-width: 63.9375em) {
    .find-depot .search-section, .find-depot .results-section {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
        max-width: 94.25rem;
        margin: 0 auto
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 30.0625em) {
    .find-depot .search-section, .find-depot .results-section {
        padding-right: 1.5625rem;
        padding-left: 1.5625rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 48em) {
    .find-depot .search-section, .find-depot .results-section {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 64em) {
    .find-depot .search-section, .find-depot .results-section {
        padding-right: 2.875rem;
        padding-left: 2.875rem
    }
}

@media screen and (max-width: 63.9375em) {
    .find-depot .grid-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-left: -.71875rem;
        margin-right: -.71875rem;
        display: block
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 30.0625em) {
    .find-depot .grid-wrapper {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 48em) {
    .find-depot .grid-wrapper {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media screen and (max-width: 63.9375em) and (min-width: 64em) {
    .find-depot .grid-wrapper {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.find-depot .grid-wrapper > .label {
    line-height: 1.5
}

@media print, screen and (min-width: 64em) {
    .find-depot .grid-wrapper > .label {
        margin-top: 0;
        padding-top: 30px
    }
}

.find-depot .result {
    padding: 15px 0;
    position: relative
}

@media print, screen and (min-width: 64em) {
    .find-depot .result {
        padding: 20px 0
    }
}

.find-depot .result::after {
    background-color: #c8c8c8;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%
}

@media screen and (max-width: 19.9375em) {
    .find-depot .result::after {
        margin-left: -1.5625rem;
        padding-right: 3.125rem
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .find-depot .result::after {
        margin-left: -2.875rem;
        padding-right: 5.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .find-depot .result::after {
        margin-left: -25px;
        padding-right: 50px
    }
}

.find-depot .result.collapsed .content {
    display: none
}

.find-depot .result.collapsed h3::before {
    background-color: #c20016;
    content: '';
    height: 10px;
    position: absolute;
    right: 20px;
    transition: all 0.5s ease;
    transform: rotate(0deg);
    width: 2px;
    top: 26px
}

@media screen and (max-width: 63.9375em) {
    .find-depot .result.collapsed h3::before {
        top: 20px
    }
}

.find-depot .result.collapsed h3::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: 16px;
    transition: all 0.5s ease;
    transform: rotate(180deg);
    width: 10px;
    top: 30px
}

@media screen and (max-width: 63.9375em) {
    .find-depot .result.collapsed h3::after {
        top: 24px
    }
}

.find-depot .result:not(.collapsed) {
    padding-bottom: 40px
}

    .find-depot .result:not(.collapsed) .heading::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e912';
        color: #c20016
    }

    .find-depot .result:not(.collapsed) .number {
        color: #fff
    }

.find-depot .result .content {
    padding-left: 35px
}

.find-depot h3, .find-depot .distance {
    margin: 0;
    padding-left: 34px
}

.find-depot h3 {
    position: relative
}

    .find-depot h3::before {
        background-color: #c20016;
        content: '';
        height: 10px;
        position: absolute;
        right: 20px;
        transition: all 0.5s ease;
        transform: rotate(90deg);
        width: 2px;
        top: 26px
    }

@media screen and (max-width: 63.9375em) {
    .find-depot h3::before {
        top: 20px
    }
}

.find-depot h3::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: 16px;
    transition: all 0.5s ease;
    transform: rotate(360deg);
    width: 10px;
    top: 30px
}

@media screen and (max-width: 63.9375em) {
    .find-depot h3::after {
        top: 24px
    }
}

.find-depot .distance {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.67;
    color: #71777b;
    font-size: .75rem;
    line-height: 1.67
}

.rooster-toggle .find-depot .distance {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .find-depot .distance {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

.find-depot .heading {
    cursor: pointer;
    position: relative
}

    .find-depot .heading::before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e914';
        color: #dedede;
        font-size: 1.875rem;
        position: absolute;
        top: 8px
    }

    .find-depot .heading::after {
        font-size: .625rem;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translate3d(0, -50%, 0)
    }

.find-depot .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    letter-spacing: 2.4px;
    line-height: 0.85;
    padding-top: 12px;
    text-transform: uppercase
}

.rooster-toggle .find-depot .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .find-depot .label {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .find-depot .label {
        padding-top: 30px
    }
}

.find-depot .label:not(:first-child) {
    padding-top: 30px
}

.find-depot .direction {
    margin: 20px 0 0
}

.find-depot .details {
    margin: 30px 0 0
}

@media screen and (max-width: 63.9375em) {
    .find-depot .details {
        box-sizing: border-box;
        width: 100%
    }
}

.find-depot .content ul {
    list-style: none;
    margin: 0
}

    .find-depot .content ul li:first-child {
        margin-top: 10px
    }

.find-depot .number {
    color: #71777b;
    font-size: .8125rem;
    margin-top: 12px;
    position: absolute;
    text-align: center;
    width: 30px
}

.find-depot .maps-wrapper {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .find-depot .maps-wrapper {
        width: 100%
    }

        .find-depot .maps-wrapper::after {
            padding-top: 100%
        }
}

@media print, screen and (min-width: 64em) {
    .find-depot .maps-wrapper {
        max-height: 730px;
        width: 70%
    }

        .find-depot .maps-wrapper::after {
            padding-top: 107%
        }
}

@media screen and (min-width: 81.25em) {
    .find-depot .maps-wrapper::after {
        padding-top: 75%
    }
}

.find-depot .maps-wrapper::after {
    content: '';
    display: block
}

.find-depot .maps {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@media print, screen and (min-width: 64em) {
    .find-depot .results-section {
        max-height: 612px;
        overflow-x: hidden;
        overflow-y: auto
    }
}

@media screen and (min-width: 81.25em) {
    .find-depot .results-section {
        max-height: 603px
    }
}

.find-depot .results-section .copy {
    margin-top: 15px
}

.nav__backdrop.open {
    display: block
}

    .nav__backdrop.open .overlay__wrapper .content {
        display: block
    }

.nav__backdrop .overlay__wrapper .content {
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    background: #fff;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 30px 20px;
    position: absolute;
    text-align: center;
    top: 30%;
    z-index: 13
}

@media print, screen and (min-width: 48em) {
    .nav__backdrop .overlay__wrapper .content {
        width: calc(66.6666666667% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: calc(16.6666666667% + .75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .nav__backdrop .overlay__wrapper .content {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(25% + .875rem)
    }
}

.nav__backdrop .overlay__wrapper .content .text {
    font-weight: bold;
    margin-bottom: 20px
}

@media print, screen and (min-width: 48em) {
    .nav__backdrop .overlay__wrapper .content .text {
        margin-bottom: 30px
    }
}

.nav__backdrop .overlay__wrapper .content .cta.primary {
    margin: 0 auto
}

.alternate-depots {
    margin: 50px 0
}

@media print, screen and (min-width: 48em) {
    .alternate-depots {
        margin: 100px 0
    }
}

.alternate-depots .depots {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: calc(100% - 1.4375rem);
    margin-right: .71875rem;
    margin-left: .71875rem
}

@media print, screen and (min-width: 48em) {
    .alternate-depots .depots {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .alternate-depots .depots {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media screen and (min-width: 81.25em) {
    .alternate-depots .depots {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

@media screen and (max-width: 63.9375em) {
    .alternate-depots .maps-wrapper {
        display: none
    }
}

@media print, screen and (min-width: 64em) {
    .alternate-depots .maps-wrapper {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        display: inline-block;
        position: relative
    }

        .alternate-depots .maps-wrapper::after {
            content: '';
            display: block;
            padding-top: 100%
        }
}

@media screen and (min-width: 81.25em) {
    .alternate-depots .maps-wrapper {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media print, screen and (min-width: 64em) {
    .alternate-depots .maps {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }
}

.alternate-depots .distance {
    color: #71777b;
    font-size: .8125rem
}

.alternate-depots .title {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39;
    color: #28343d
}

@media print, screen and (min-width: 64em) {
    .alternate-depots .title {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .alternate-depots .title {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle .alternate-depots .title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.alternate-depots .cta {
    border: solid 1px #c8c8c8;
    box-sizing: border-box;
    color: #28343d
}

.alternate-depots h2 {
    border-bottom: 1px solid #dedede;
    padding-bottom: 35px
}

.alternate-depots .depots-list {
    margin: 0 0 25px
}

.no-touch .alternate-depots .depots-list li:hover::after {
    animation-duration: 0.5s;
    animation-name: cta-arrow;
    animation-timing-function: ease-in-out
}

.alternate-depots .depots-list li {
    border-bottom: 1px solid #dedede;
    color: #dedede;
    font-size: .75rem;
    position: relative
}

    .alternate-depots .depots-list li::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: 7px;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        color: #c20016;
        line-height: inherit;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate3d(0, -50%, 0)
    }

    .alternate-depots .depots-list li::before {
        content: counter(item) " ";
        counter-increment: item;
        left: 9px;
        position: absolute;
        top: 27px
    }

.alternate-depots .locations {
    counter-reset: item;
    list-style-type: none;
    margin-left: 0
}

    .alternate-depots .locations a {
        display: block;
        left: 0;
        padding: 20px 10px 22px 40px;
        position: relative;
        top: 0
    }

        .alternate-depots .locations a::before {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e912';
            color: #fff;
            font-size: 1.5625rem;
            left: 0;
            position: absolute;
            text-shadow: 1px 0 0 #dedede,-1px 0 0 #dedede,0 1px 0 #dedede,0 -1px 0 #dedede,1px 1px #dedede,-1px -1px 0 #dedede,1px -1px 0 #dedede,-1px 1px 0 #dedede;
            top: 27px;
            z-index: -1
        }

.depot-contact {
    background-color: #f9f9f9;
    margin: 0 0 50px
}

@media screen and (max-width: 63.9375em) {
    .depot-contact {
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.depot-contact .depot-detail {
    -ms-flex-order: 3;
    order: 3
}

@media screen and (max-width: 19.9375em) {
    .depot-contact .depot-detail {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.depot-contact .common {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    padding: 30px calc(1.5625rem);
    width: calc(100% - 3.125rem)
}

@media print, screen and (min-width: 48em) {
    .depot-contact .common {
        padding: 50px calc(2.875rem) 30px;
        width: calc(100% - 5.75rem)
    }
}

@media print, screen and (min-width: 64em) {
    .depot-contact .common {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding: 80px 0 10px
    }
}

@media screen and (min-width: 81.25em) {
    .depot-contact .common {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.depot-contact .depot-map {
    position: relative
}

@media screen and (max-width: 63.9375em) {
    .depot-contact .depot-map {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .depot-contact .depot-map {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-right: -1.5625rem;
        width: calc(50% + 1.125rem)
    }
}

@media print, screen and (min-width: 64em) and (min-width: 30.0625em) {
    .depot-contact .depot-map {
        margin-right: -1.5625rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 48em) {
    .depot-contact .depot-map {
        margin-right: -2.875rem
    }
}

@media print, screen and (min-width: 64em) and (min-width: 64em) {
    .depot-contact .depot-map {
        margin-right: -2.875rem
    }
}

.depot-contact .depot-map::after {
    content: '';
    display: block;
    padding-top: 100%
}

.depot-contact .maps {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.depot-contact .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-size: .6875rem;
    -ms-flex-order: 1;
    order: 1
}

.rooster-toggle .depot-contact .label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .depot-contact .label {
        font-size: .75rem;
        line-height: 1
    }
}

.depot-contact .opening-hours {
    -ms-flex-order: 3;
    order: 3
}

@media print, screen and (min-width: 48em) {
    .depot-contact .opening-hours {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0;
        width: calc(50% + 0.9375rem)
    }
}

.depot-contact .opening-hours dl {
    font-size: .9375rem
}

.depot-contact .amenities {
    -ms-flex-order: 4;
    order: 4;
    padding-top: 40px
}

@media print, screen and (min-width: 48em) {
    .depot-contact .amenities {
        padding-top: 0
    }
}

.depot-contact .amenities li {
    font-size: .9375rem
}

    .depot-contact .amenities li img {
        width: 15px
    }

.depot-contact .contact-us {
    -ms-flex-order: 1;
    order: 1;
    padding-top: 0
}

@media print, screen and (min-width: 48em) {
    .depot-contact .contact-us {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0;
        -ms-flex-order: 2;
        order: 2
    }
}

.depot-contact .contact-us ul li {
    line-height: 25px
}

.depot-contact .contact-us ul strong {
    margin-right: 5px
}

.depot-contact .address {
    -ms-flex-order: 2;
    order: 2;
    padding-top: 40px
}

@media print, screen and (min-width: 48em) {
    .depot-contact .address {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0;
        -ms-flex-order: 1;
        order: 1;
        padding-top: 0;
        width: calc(50% + 0.9375rem)
    }
}

.depot-contact .address p {
    line-height: 30px;
    margin-bottom: 0
}

@media print, screen and (min-width: 48em) {
    .depot-contact .contact-us, .depot-contact .address, .depot-contact .amenities, .depot-contact .opening-hours {
        color: #28343d;
        display: inline-block;
        font-size: .9375rem;
        vertical-align: top
    }
}

.depot-contact .contact-us ul, .depot-contact .address ul, .depot-contact .amenities ul, .depot-contact .opening-hours ul {
    list-style: none;
    margin: 0
}

    .depot-contact .contact-us ul li, .depot-contact .address ul li, .depot-contact .amenities ul li, .depot-contact .opening-hours ul li {
        line-height: 30px
    }

.depot-contact .contact-us .icon-amenities, .depot-contact .address .icon-amenities, .depot-contact .amenities .icon-amenities, .depot-contact .opening-hours .icon-amenities {
    margin: -3px 5px 0 0;
    vertical-align: middle
}

.depot-contact .phone, .depot-contact .fax, .depot-contact .get-in-touch {
    line-height: 25px
}

    .depot-contact .phone .lable, .depot-contact .fax .lable, .depot-contact .get-in-touch .lable {
        font-weight: bold;
        margin-right: 5px
    }

.depot-contact .phone {
    pointer-events: initial
}

@media print, screen and (min-width: 64em) {
    .depot-contact .phone {
        pointer-events: none
    }
}

.depot-contact .heading-2 {
    -ms-flex-order: 2;
    order: 2;
    padding-bottom: 25px
}

.depot-contact h3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    letter-spacing: 2px;
    padding-bottom: 5px;
    text-transform: uppercase
}

.rooster-toggle .depot-contact h3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .depot-contact h3 {
        font-size: .9375rem;
        line-height: 1.33
    }
}

.depot-contact .cta {
    background-color: rgba(0,0,0,0);
    margin: 40px 0
}

@media print, screen and (min-width: 64em) {
    .depot-contact .cta {
        margin: 20px 0 60px
    }
}

.depot-contact .day, .depot-contact .duration {
    display: inline-block;
    font-weight: normal
}

.depot-contact .day {
    width: 50%
}

.depot-contact .fax {
    display: none
}

@media print, screen and (min-width: 64em) {
    .depot-contact .fax {
        display: block
    }
}

.depot-contact .get-in-touch a {
    text-decoration: underline;
    -webkit-text-decoration-color: #ad0014;
    text-decoration-color: #ad0014
}

@media screen and (max-width: 63.9375em) {
    .depot-contact .container {
        padding: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .depot-contact .grid {
        margin: 0
    }
}

.kitchen-listing {
    display: initial
}

    .kitchen-listing .filtering-sort {
        margin-top: 0
    }

    .kitchen-listing .container {
        margin-bottom: 50px;
        margin-top: 50px
    }

@media print, screen and (min-width: 64em) {
    .kitchen-listing .container {
        margin-bottom: 100px;
        margin-top: 100px
    }
}

.kitchen-listing .grid {
    position: relative
}

.kitchen-listing h2 {
    margin-bottom: 30px;
    text-align: center
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing h2 {
        font-size: 1.875rem
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing h2 {
        margin-bottom: 40px
    }
}

.kitchen-listing .filter-tabs {
    display: none
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .filter-tabs {
        display: block
    }
}

.kitchen-listing .filter-tabs .tab-nav {
    margin: 0
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .filter-tabs .tab-nav {
        text-align: center
    }
}

.kitchen-listing .filter-tabs li {
    border: 1px solid transparent;
    display: inline-block
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .filter-tabs li {
        border-top-color: #fff;
        border-top-width: 3px;
        position: relative
    }
}

.kitchen-listing .filter-tabs a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    display: inline-block;
    font-weight: 400;
    margin: 16px 70px;
    position: relative;
    text-transform: uppercase
}

.rooster-toggle .kitchen-listing .filter-tabs a {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .filter-tabs a {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .filter-tabs a {
        position: initial
    }
}

.kitchen-listing .filter-tabs a:hover {
    color: #c20016
}

.kitchen-listing .filter-tabs a::before {
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.kitchen-listing .filter-tabs a::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    display: inline-block;
    margin-left: 5px;
    transform: rotate(90deg);
    transition: none
}

.kitchen-listing .filter-tabs .active {
    border-bottom-color: #fff;
    border-left-color: #c8c8c8;
    border-right-color: #c8c8c8;
    border-top-color: #c20016
}

    .kitchen-listing .filter-tabs .active a {
        color: #c20016
    }

        .kitchen-listing .filter-tabs .active a::after {
            transform: rotate(270deg)
        }

.kitchen-listing .type-finish li, .kitchen-listing .type-color li, .kitchen-listing .type-status li {
    display: block
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .type-finish li, .kitchen-listing .type-color li, .kitchen-listing .type-status li {
        display: inline-block
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .type-status.panel ul {
        margin: 0 auto
    }

    .kitchen-listing .type-status.panel li {
        display: inline-block;
        margin-left: 30px;
        text-align: left
    }

        .kitchen-listing .type-status.panel li:first-child {
            margin-left: 0
        }
}

@media screen and (min-width: 81.25em) {
    .kitchen-listing .type-status.panel li {
        margin-left: 50px
    }
}

.kitchen-listing .type-status.panel .option-title {
    margin-top: 0;
    padding-left: 0
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .type-status.panel .option-title {
        font-weight: 400;
        text-transform: none
    }
}

.kitchen-listing .filter-content {
    margin-bottom: 25px
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .filter-content {
        margin-top: -1px
    }
}

.kitchen-listing .tab-title {
    font-family: "Rooster",sans-serif;

    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.39;
    display: none;
    margin-bottom: 22px;
    text-align: center
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .tab-title {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .tab-title {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.rooster-toggle .kitchen-listing .tab-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .tab-title {
        display: block
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .panel {
        display: block
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .panel {
        border: 0;
        display: none;
        padding: 30px 30px 0;
        text-align: center;
        width: auto
    }

        .kitchen-listing .panel:not(.type-status):not(.type-style) .options li:first-child {
            margin-left: 0
        }
}

.kitchen-listing .panel.active {
    display: block
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .panel.active {
        text-align: center
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .panel .title {
        display: none
    }
}

.kitchen-listing .hide-panel {
    border: 0;
    cursor: pointer;
    display: none;
    margin: 0 auto;
    padding: 0 15px 1px 0;
    position: relative;
    text-transform: uppercase
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .hide-panel {
        display: block
    }

        .kitchen-listing .hide-panel:before {
            transform: scaleX(0);
            transition-duration: 250ms;
            transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            visibility: hidden;
            width: 100%
        }

    .no-touch .kitchen-listing .hide-panel:hover:before {
        transform: scaleX(1);
        visibility: visible
    }

    .kitchen-listing .hide-panel::before {
        background-color: #c20016;
        content: '';
        display: block;
        height: 1px;
        left: 0;
        position: relative;
        top: 12px
    }

    .kitchen-listing .hide-panel:hover {
        color: #c20016
    }
}

.kitchen-listing .hide-panel::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: 7px;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    display: inline-block;
    font-size: 7px;
    margin-left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(-90deg)
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .checkbox-image + label {
        padding: 0 31px
    }

        .kitchen-listing .checkbox-image + label:hover a {
            color: #c20016
        }

        .kitchen-listing .checkbox-image + label::before {
            display: none
        }

        .kitchen-listing .checkbox-image + label::after {
            display: none
        }
}

.kitchen-listing .checkbox-image:checked + label::before, .kitchen-listing .checkbox-image:checked + label::after {
    display: none
}

.kitchen-listing .option-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.54;
    display: inline-block;
    padding-left: 20px;
    vertical-align: middle
}

.rooster-toggle .kitchen-listing .option-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .option-title {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .option-title {
        font-size: .75rem;
        margin-top: 12px;
        padding-left: 0;
        text-transform: uppercase
    }
}

.kitchen-listing .checkbox-image:checked + label .state {
    position: relative
}

    .kitchen-listing .checkbox-image:checked + label .state::before {
        background-color: rgba(40,52,61,0.9);
        border-radius: 50%;
        content: '';
        height: 60px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 60px;
        z-index: 2
    }

    .kitchen-listing .checkbox-image:checked + label .state::after {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e907';
        color: #fff;
        font-size: 1.25rem;
        left: 50%;
        position: absolute;
        text-decoration: none;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index: 2
    }

.kitchen-listing .type-style .checkbox-image:hover + label {
    text-decoration: none
}

    .kitchen-listing .type-style .checkbox-image:hover + label a {
        color: #28343d;
        text-decoration: none
    }

.kitchen-listing .type-style .checkbox-image + label:hover, .kitchen-listing .type-style .checkbox-image:checked + label {
    box-shadow: 0 0 20px #9b9b9b
}

    .kitchen-listing .type-style .checkbox-image + label:hover .option-title, .kitchen-listing .type-style .checkbox-image:checked + label .option-title {
        color: #c20016
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .type-style .checkbox-image:not(:checked) + label {
        box-shadow: none
    }

        .kitchen-listing .type-style .checkbox-image:not(:checked) + label .option-title {
            color: #28343d
        }
}

.kitchen-listing .w-img {
    background-color: #fff;
    border-bottom: solid 1px #c8c8c8;
    padding: 20px 0;
    text-align: center
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .w-img {
        padding: 40px 0
    }
}

.kitchen-listing .w-img img {
    max-height: 130px;
    max-width: 100%;
    width: auto
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .w-img img {
        max-height: 150px
    }
}

.kitchen-listing .w-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-listing .w-header {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .w-header {
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .sort-container {
        bottom: auto;
        display: block;
        position: absolute;
        right: 25px;
        top: 0
    }
}

.kitchen-listing .facet {
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    width: auto
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .panel.type-style ul {
        max-height: none
    }
}

.kitchen-listing .facet .options {
    max-height: none
}

    .kitchen-listing .facet .options a {
        display: block;
        line-height: initial
    }

    .kitchen-listing .facet .options ul {
        margin-bottom: 50px;
        position: relative
    }

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .options ul {
        max-height: none
    }
}

.kitchen-listing .facet .type-style ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: left
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .facet .type-style ul {
        margin-left: .84375rem;
        margin-right: .84375rem;
        padding-top: 20px
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style ul {
        margin-bottom: 10px;
        max-height: none
    }
}

.kitchen-listing .facet .type-style li {
    border: solid 1px #c8c8c8;
    display: inline-block;
    -ms-flex-preferred-size: calc(50% - 22px);
    flex-basis: calc(50% - 22px);
    margin: 0 10px 20px
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style li {
        -ms-flex-preferred-size: calc(25% - 32px);
        flex-basis: calc(25% - 32px);
        margin: 0 15px 30px
    }
}

@media screen and (min-width: 81.25em) {
    .kitchen-listing .facet .type-style li {
        -ms-flex-preferred-size: calc(25% - 52px);
        flex-basis: calc(25% - 52px);
        margin: 0 25px 40px
    }
}

.kitchen-listing .facet .type-style .option-label {
    border: 0;
    display: block;
    height: 100%;
    padding: 0
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style .option-label {
        padding: 0;
        text-align: left
    }
}

.kitchen-listing .facet .type-style .option-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    padding: 15px
}

.rooster-toggle .kitchen-listing .facet .type-style .option-title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .facet .type-style .option-title {
        font-size: .75rem;
        line-height: 1
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style .option-title {
        padding: 0 20px 10px
    }
}

.kitchen-listing .facet .type-style .attr {
    display: block;
    margin: 0;
    padding: 0 12px 20px 17px
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style .attr {
        padding: 0 20px 20px
    }
}

.kitchen-listing .facet .type-style .key {
    border: 0;
    display: block;
    margin: 0;
    padding-left: 1.6em;
    text-indent: -0.8em;
    width: auto
}

    .kitchen-listing .facet .type-style .key::before {
        background-color: #28343d;
        border-radius: 50%;
        content: '';
        display: inline-block;
        height: 3px;
        margin-right: 0.5rem;
        vertical-align: middle;
        width: 3px
    }

.kitchen-listing .facet .type-style p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: .8125rem;
    line-height: 1.54;
    padding: 0 15px 20px
}

.rooster-toggle .kitchen-listing .facet .type-style p {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .facet .type-style p {
        font-size: .9375rem;
        line-height: 1.33
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .facet .type-style p {
        padding: 0 20px 32px
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .facet .type-style .checkbox:checked + label {
        background: none
    }
}

.kitchen-listing .facet .filters {
    border-bottom: 1px solid #c8c8c8;
    padding: 0
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .facet .type-color .option-label, .kitchen-listing .facet .type-finish .option-label, .kitchen-listing .facet .type-status .option-label {
        padding: 15px 25px 15px 41px
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .panel-group {
        border: 1px solid #c8c8c8;
        border-bottom: 0;
        padding-bottom: 20px
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .panel-group.closed {
        display: none
    }
}

.kitchen-listing .panel-group.closed .hide-panel {
    display: none
}

.kitchen-listing .pallet {
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 40px
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .pallet {
        display: block;
        height: 60px;
        margin: 0 auto;
        width: 60px
    }
}

.kitchen-listing .pallet img {
    max-width: 100%
}

.kitchen-listing .pallet.border {
    border: solid 1px #c8c8c8
}

@media screen and (max-width: 63.9375em) {
    .kitchen-listing .w-count-sort {
        padding-bottom: 20px
    }
}

.kitchen-listing .w-count-sort .title-container {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-size: .9375rem
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .listing-container {
        margin-top: 25px
    }
}

.kitchen-listing .list-tiles {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

@media screen and (max-width: 47.9375em) {
    .kitchen-listing .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 30.0625em) {
    .kitchen-listing .list-tiles {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 48em) {
    .kitchen-listing .list-tiles {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media screen and (max-width: 47.9375em) and (min-width: 64em) {
    .kitchen-listing .list-tiles {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.kitchen-listing .list-tiles .group {
    width: 100%;
    list-style-type: none
}

    .kitchen-listing .list-tiles .group ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0
    }

.kitchen-listing .list-tiles .tile {
    list-style: none;
    margin-bottom: 50px;
    position: relative;
    width: calc(100% - 1.4375rem);
    margin-right: .71875rem;
    margin-left: .71875rem
}

@media print, screen and (min-width: 48em) {
    .kitchen-listing .list-tiles .tile {
        width: calc(50% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .list-tiles .tile {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.kitchen-listing .list-tiles .tile h3 {
    margin-bottom: 0;
    margin-top: 13px
}

.kitchen-listing .list-tiles .tile h4 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.67;
    margin-bottom: 5px
}

.rooster-toggle .kitchen-listing .list-tiles .tile h4 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .list-tiles .tile h4 {
        font-size: 1.0625rem;
        line-height: 1.47
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .list-tiles .tile h4 {
        margin-bottom: 10px
    }
}

.kitchen-listing .list-tiles .tile p {
    color: #6a7477
}

.kitchen-listing .list-tiles .tile .status-label-container {
    height: 45px
}

.kitchen-listing .list-tiles .tile .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #28343d;
    background-color: #417505;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    letter-spacing: 1px;
    padding: 7px 14px;
    position: static;
    right: initial;
    z-index: 1
}

.rooster-toggle .kitchen-listing .list-tiles .tile .status {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

@media screen and (min-width: 100.0625em) {
    .kitchen-listing .list-tiles .tile .status {
        font-size: .75rem;
        line-height: 1
    }
}

.kitchen-listing .list-tiles .img-wrapper {
    background: #f1f1f1
}

    .kitchen-listing .list-tiles .img-wrapper img {
        max-height: none;
        max-width: none;
        width: 100%
    }

.iphone.old-iphone .kitchen-listing .list-tiles .img-wrapper img {
    height: 100%;
    object-fit: contain
}

.kitchen-listing .available-colors .more {
    color: #6a7477;
    display: block;
    font-size: .9375rem
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .available-colors .more {
        display: inline-block
    }
}

.kitchen-listing .w-listing {
    width: 100%
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-listing .w-listing .selected-filter {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-listing .w-listing .selected-filter {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-listing .w-listing .w-count-sort {
        margin-left: .75rem;
        margin-right: .75rem
    }
}

.kitchen-product-listing .filtering-sort {
    margin-top: 0
}

.kitchen-product-listing .filtering-sort__container {
    padding-top: 30px
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing .filtering-sort__btn-label {
        display: inline-block;
        vertical-align: middle
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-product-listing .facet {
        padding-top: 20px
    }
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .kitchen-product-listing .w-facet {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem
    }
}

.kitchen-product-listing.component {
    margin-bottom: 0
}

    .kitchen-product-listing.component .listing__heading {
        font-size: 1.875rem;
        line-height: 2.5rem;
        margin-bottom: 4px;
        color: #28343d
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing.component .listing__heading {
        font-size: 1.5625rem;
        line-height: 2.1875rem
    }
}

.kitchen-product-listing.component .listing__text {
    color: #71777b;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5625rem
}

    .kitchen-product-listing.component .listing__text .inline {
        display: inline
    }

.kitchen-product-listing.component .listing__introduction {
    padding: 10px 0 32px
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing.component .listing__introduction {
        padding: 4px 8px 30px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing.component .listing__introduction {
        padding: 4px 0 30px
    }
}

.no-js .kitchen-product-listing.component .listing__introduction .hide {
    display: block !important
}

.kitchen-product-listing.component .listing__introduction a {
    color: #4a90e2;
    text-decoration: underline
}

    .kitchen-product-listing.component .listing__introduction a:hover, .kitchen-product-listing.component .listing__introduction a:focus {
        color: #28343d
    }

.kitchen-product-listing.component .listing__introduction .read-more .label {
    margin-top: 13px
}

    .kitchen-product-listing.component .listing__introduction .read-more .label .btn {
        padding: 0
    }

        .kitchen-product-listing.component .listing__introduction .read-more .label .btn + .btn {
            margin-left: 0
        }

        .kitchen-product-listing.component .listing__introduction .read-more .label .btn:hover {
            background: none
        }

    .kitchen-product-listing.component .listing__introduction .read-more .label::before, .kitchen-product-listing.component .listing__introduction .read-more .label::after {
        display: none
    }

.no-js .kitchen-product-listing.component .listing__introduction .read-more .label .kitchen-product-listing.component .listing__introduction .read-more .label {
    display: none
}

.kitchen-product-listing__container {
    margin-top: 34px;
    width: 100%
}

    .kitchen-product-listing__container ul, .kitchen-product-listing__container li {
        margin: 0;
        list-style: none
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__container ul, .kitchen-product-listing__container li {
        margin: 0 auto
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__container {
        margin-top: 22px
    }
}

.kitchen-product-listing__tiles {
    list-style: none;
    margin: 0
}

    .kitchen-product-listing__tiles .group {
        list-style: none
    }

        .kitchen-product-listing__tiles .group > ul {
            -ms-flex-align: center;
            align-items: center;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-pack: start;
            justify-content: flex-start;
            list-style: none;
            margin: 0
        }

        .kitchen-product-listing__tiles .group .tile {
            -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
            background: #fff;
            box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
            width: calc(50% - 13px);
            margin: 0 26px 30px 0;
            min-height: 610px;
            max-width: 585px;
            position: relative
        }

            .kitchen-product-listing__tiles .group .tile .tile-inner {
                display: -ms-flexbox;
                display: flex;
                -ms-flex: 100%;
                flex: 100%;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -ms-flex-pack: justify;
                justify-content: space-between;
                padding: 25px 30px
            }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner {
        padding: 17px 24px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner {
        padding: 18px 16px;
        position: relative
    }
}

.kitchen-product-listing__tiles .group .tile .tile-inner--align-left {
    width: 60%
}

@media screen and (max-width: 81.1875em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-left {
        width: calc(100% - 230px)
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-left {
        width: 54%
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-left {
        width: 100%
    }
}

.kitchen-product-listing__tiles .group .tile .tile-inner--align-right {
    max-width: 178px;
    width: 35%
}

@media screen and (max-width: 81.1875em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-right {
        width: 200px
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-right {
        max-width: 100%;
        width: 41%
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .tile-inner--align-right {
        width: 100%
    }
}

.kitchen-product-listing__tiles .group .tile:nth-child(2n) {
    margin-right: 0
}

.kitchen-product-listing__tiles .group .tile .status {
    background: #27642c;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0.092em;
    line-height: 1;
    padding: 9px 15px;
    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;
    z-index: 1
}

.kitchen-product-listing__tiles .group .tile .w-media img {
    object-fit: cover;
    width: 100%
}

.ie .kitchen-product-listing__tiles .group .tile .w-media img {
    max-height: none
}

.kitchen-product-listing__tiles .group .tile .w-desc .title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.28
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .w-desc .title {
        font-size: 1.5625rem;
        line-height: 1.4;
        margin-bottom: 6px
    }
}

.kitchen-product-listing__tiles .group .tile .w-desc h4 {
    color: #767572;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.04
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .w-desc h4 {
        font-size: 1.25rem;
        line-height: 1.25
    }
}

.kitchen-product-listing__tiles .group .tile .w-desc p {
    font-size: .75rem;
    font-weight: 700;
    margin-top: 19px
}

    .kitchen-product-listing__tiles .group .tile .w-desc p .product-id {
        font-weight: 400
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .w-desc p {
        margin-top: 12px
    }
}

.kitchen-product-listing__tiles .group .tile .w-desc ul {
    margin-top: 21px
}

    .kitchen-product-listing__tiles .group .tile .w-desc ul li {
        font-size: .8125rem;
        line-height: 1.54;
        padding-left: 16px;
        position: relative
    }

        .kitchen-product-listing__tiles .group .tile .w-desc ul li::before {
            background: #28343d;
            border-radius: 100%;
            content: "";
            display: block;
            height: 5px;
            left: 0;
            position: absolute;
            top: 7px;
            width: 5px
        }

        .kitchen-product-listing__tiles .group .tile .w-desc ul li + li {
            padding-top: 5px
        }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .w-desc ul li + li {
        padding-top: 8px
    }
}

.kitchen-product-listing__tiles .group .tile .w-desc ul li + li::before {
    top: 10px
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .w-desc ul {
        margin: 21px 0 0;
        padding-left: 0
    }
}

.kitchen-product-listing__tiles .group .tile .w-desc a.related-docs {
    display: inline-block;
    font-size: .8125rem;
    margin-top: 10px;
    text-decoration: underline
}

    .kitchen-product-listing__tiles .group .tile .w-desc a.related-docs:first-of-type, .kitchen-product-listing__tiles .group .tile .w-desc a.related-docs:first-child {
        margin-top: 20px
    }

.kitchen-product-listing__tiles .group .tile .frontal-image {
    background-color: #fff;
    background-size: auto 120px !important;
    border: 1px solid #c8c8c8;
    border-radius: 100%;
    display: -ms-flexbox;
    display: flex;
    height: 176px;
    margin: -74px 0 2px;
    position: relative;
    right: 10px;
    width: 176px;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.kitchen-product-listing__tiles .group .tile .frontal-image__inner {
    width: 100%;
    height: 100%;
    max-width: 91px;
    max-height: 129px
}

    .kitchen-product-listing__tiles .group .tile .frontal-image__inner > div {
        display: block;
        height: 100%;
        width: 100%
    }

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .frontal-image__inner {
        max-height: 76px;
        max-width: 52px
    }
}

.kitchen-product-listing__tiles .group .tile .frontal-image img {
    display: block;
    height: 100%;
    max-height: 129px;
    margin: auto;
    max-width: 91px;
    object-fit: cover;
    width: 100%
}

.ie .kitchen-product-listing__tiles .group .tile .frontal-image img {
    max-height: 120px;
    max-width: none;
    width: auto
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .frontal-image img {
        height: 143px;
        width: 98px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .frontal-image img {
        max-height: 76px;
        max-width: 52px
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .frontal-image {
        height: 197px;
        width: 191px;
        right: -15px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .frontal-image {
        height: 104px;
        margin-top: 0;
        position: absolute;
        top: -85px;
        width: 104px;
        right: 15px
    }
}

.kitchen-product-listing__tiles .group .tile .available-colors {
    position: relative;
    z-index: 1
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors {
        margin-top: 20px
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .desktop-colors {
        display: none
    }
}

.kitchen-product-listing__tiles .group .tile .available-colors .mobile-colors {
    display: none
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .mobile-colors {
        display: -ms-flexbox;
        display: flex
    }
}

.kitchen-product-listing__tiles .group .tile .available-colors .tablet-colors {
    display: none
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .tablet-colors {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .tablet-colors {
        display: none
    }
}

.kitchen-product-listing__tiles .group .tile .available-colors .label {
    display: block;
    margin-bottom: 5px;
    font-size: .75rem;
    line-height: 1.5625rem;
    letter-spacing: normal
}

.kitchen-product-listing__tiles .group .tile .available-colors .extra-colors {
    border: none;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

    .kitchen-product-listing__tiles .group .tile .available-colors .extra-colors .btn--text-link {
        color: #aeaeae;
        font-size: .6875rem;
        line-height: 30px;
        height: 29px;
        text-align: center;
        text-decoration: none;
        width: 30px
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .extra-colors .btn--text-link {
        height: 30px;
        width: 32px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors .extra-colors .btn--text-link {
        border: 1px solid;
        height: 22px;
        line-height: 24px;
        width: 24px
    }
}

.kitchen-product-listing__tiles .group .tile .available-colors ul {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
    list-style: none;
    margin: 0
}

    .kitchen-product-listing__tiles .group .tile .available-colors ul li {
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
        border: none;
        border-radius: 50%;
        -ms-flex: 1 0 21%;
        flex: 1 0 21%;
        margin: 0 16px 10px 0;
        max-height: 31px;
        max-width: 30px
    }

        .kitchen-product-listing__tiles .group .tile .available-colors ul li:nth-child(4n) {
            margin-right: 0
        }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li:nth-child(4n) {
        margin-right: 16px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li:nth-child(4n) {
        margin-right: 8px
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li {
        max-height: 32px;
        max-width: 32px
    }

        .kitchen-product-listing__tiles .group .tile .available-colors ul li:nth-child(5n) {
            margin-right: 0
        }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li {
        max-height: 24px;
        margin-right: 8px;
        max-width: 24px
    }

        .kitchen-product-listing__tiles .group .tile .available-colors ul li:nth-child(5n) {
            margin-right: 8px
        }
}

.kitchen-product-listing__tiles .group .tile .available-colors ul li .tooltip {
    border: none;
    display: block;
    height: 100%;
    width: 100%
}

    .kitchen-product-listing__tiles .group .tile .available-colors ul li .tooltip img {
        border-radius: 50%
    }

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li .tooltip img {
        height: 32px;
        width: 32px
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile .available-colors ul li .tooltip img {
        height: 24px;
        width: 24px
    }
}

.kitchen-product-listing__tiles .group .tile .tile-link {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles .group .tile {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 608px;
        min-height: 560px
    }

        .kitchen-product-listing__tiles .group .tile:nth-child(1n) {
            margin-right: 0
        }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-product-listing__tiles .group .tile {
        margin: 0 auto 16px;
        max-width: 100%;
        min-height: 0
    }
}

@media screen and (max-width: 63.9375em) {
    .kitchen-product-listing__tiles {
        margin: 0 auto;
        max-width: 610px
    }
}

.site-map {
    margin-top: 46px
}

@media print, screen and (min-width: 64em) {
    .site-map {
        margin-top: 100px
    }
}

.site-map h1 {
    font-size: 1.875rem;
    margin-bottom: 50px
}

@media print, screen and (min-width: 48em) {
    .site-map h1 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .site-map h1 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        font-size: 2.5rem;
        margin-bottom: 100px
    }
}

.site-map h2 {
    border-bottom: 1px solid #c8c8c8;
    font-size: 1.25rem;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .site-map h2 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .site-map h2 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        font-size: 1.875rem;
        margin-bottom: 35px;
        padding-bottom: 35px
    }
}

.site-map h3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 2.1875rem;
    margin-bottom: 0
}

.rooster-toggle .site-map h3 {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700
}

.site-map h3 a:before {
    transform: scaleX(0);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    visibility: hidden;
    width: 100%
}

.no-touch .site-map h3 a:hover:before {
    transform: scaleX(1);
    visibility: visible
}

.site-map h3 a::before {
    background-color: #c20016;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 24px
}

.site-map h3 a:hover {
    color: #c20016
}

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

    .site-map ul ul ul {
        margin: 0
    }

    .site-map ul li {
        font-size: .8125rem;
        line-height: 2.1875rem
    }

.site-map .grid > ul {
    margin: 0 0 30px;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .site-map .grid > ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 0 50px
    }
}

.site-map .grid > ul > li {
    margin-bottom: 20px
}

@media print, screen and (min-width: 48em) {
    .site-map .grid > ul > li {
        width: calc(33.3333333333% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-bottom: 50px
    }
}

@media print, screen and (min-width: 64em) {
    .site-map .grid > ul > li {
        width: calc(25% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.site-map li a {
    display: inline-block;
    position: relative
}

    .site-map li a:before {
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

.no-touch .site-map li a:hover:before {
    transform: scaleX(1);
    visibility: visible
}

.site-map li a::before {
    background-color: #c20016;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 24px
}

.site-map li a:hover {
    color: #c20016
}

.section-faq {
    font-size: .9375rem;
    margin-bottom: 50px;
    margin-top: 50px
}

@media print, screen and (min-width: 48em) {
    .section-faq {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem
    }
}

@media print, screen and (min-width: 64em) {
    .section-faq {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(16.6666666667% + .875rem);
        margin-bottom: 100px;
        margin-top: 100px
    }
}

.section-faq .faq-items {
    margin: 25px 0
}

@media print, screen and (min-width: 64em) {
    .section-faq .faq-items {
        margin: 50px 0
    }
}

.section-faq .faq-items:last-child {
    margin-bottom: 0
}

.section-faq h1 {
    font-size: 1.5625rem;
    line-height: 1.4;
    margin-bottom: 20px
}

@media print, screen and (min-width: 64em) {
    .section-faq h1 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 81.25em) {
    .section-faq h1 {
        font-size: 2.5rem;
        line-height: 1.25
    }
}

@media screen and (min-width: 100.0625em) {
    .section-faq h1 {
        font-size: 2.8125rem;
        line-height: 1.11
    }
}

.section-faq h2 {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 0;
    padding-bottom: 25px
}

@media print, screen and (min-width: 64em) {
    .section-faq h2 {
        font-size: 1.875rem;
        line-height: 1.33
    }
}

@media screen and (min-width: 100.0625em) {
    .section-faq h2 {
        font-size: 2.1875rem;
        line-height: 1.14
    }
}

@media print, screen and (min-width: 64em) {
    .section-faq h2 {
        padding-bottom: 40px
    }
}

.section-faq .subsection {
    border-bottom: 1px solid #d8d8d8;
    line-height: 1.625rem;
    max-height: none;
    overflow: hidden;
    padding: 30px 0;
    transition: 1.5s
}

@media print, screen and (min-width: 64em) {
    .section-faq .subsection {
        padding: 40px 0
    }
}

.section-faq .subsection:first-child {
    border-top: 1px solid #d8d8d8
}

.section-faq .subsection h3 {
    font-size: 1.125rem;
    line-height: 1.39;
    cursor: pointer;
    margin-bottom: 0;
    padding-right: 25px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media print, screen and (min-width: 64em) {
    .section-faq .subsection h3 {
        font-size: 1.25rem;
        line-height: 1.5
    }
}

@media screen and (min-width: 100.0625em) {
    .section-faq .subsection h3 {
        font-size: 1.375rem;
        line-height: 1.36
    }
}

.section-faq .subsection h3::after {
    font-size: .625rem;
    position: absolute;
    right: 0;
    top: 36%
}

.section-faq .subsection.collapsed h3::before {
    background-color: #c20016;
    content: '';
    height: 12px;
    position: absolute;
    right: 5px;
    transition: all 0.5s ease;
    transform: rotate(0deg);
    width: 2px;
    color: #c20016;
    top: 8px;
    transition-delay: 100ms
}

.section-faq .subsection.collapsed h3::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: 0;
    transition: all 0.5s ease;
    transform: rotate(180deg);
    width: 12px;
    top: 13px;
    transition-delay: 100ms
}

.section-faq .subsection:not(.collapsed) h3::before {
    background-color: #c20016;
    content: '';
    height: 12px;
    position: absolute;
    right: 5px;
    transition: all 0.5s ease;
    transform: rotate(90deg);
    width: 2px;
    color: #c20016;
    top: 8px
}

.section-faq .subsection:not(.collapsed) h3::after {
    background-color: #c20016;
    content: '';
    height: 2px;
    position: absolute;
    right: 0;
    transition: all 0.5s ease;
    transform: rotate(360deg);
    width: 12px;
    top: 13px
}

.section-faq .subsection .content {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    display: none;
    line-height: 1.625rem;
    margin-top: 20px;
    padding-bottom: 5px;
    padding-right: 20px;
    transition: 1.5s
}

    .section-faq .subsection .content:first-child {
        display: block
    }

    .section-faq .subsection .content p {
        margin-bottom: 20px
    }

    .section-faq .subsection .content a {
        border-bottom: 1px solid #28343d
    }

.no-touch .section-faq .subsection .content a:hover {
    border-bottom-color: #c20016
}

.rooster-toggle .section-faq .subsection .content {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

.section-faq .rte ul:last-child, .section-faq .rte ol:last-child {
    margin-bottom: 0
}

.manual-search .suggestions-container {
    height: auto;
    overflow: inherit
}

@media screen and (max-width: 63.9375em) {
    .manual-search .suggestions-container {
        margin-top: 0
    }
}

.manual-search .suggestions-container .suggestion {
    margin: 0 0 15px
}

@media print, screen and (min-width: 64em) {
    .manual-search .suggestions-container .group {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }
}

.manual-search .suggestions-container ul {
    padding-top: 15px
}

@media print, screen and (min-width: 64em) {
    .manual-search .suggestions-container ul {
        column-count: 2;
        margin-left: 15px;
        padding-top: 0
    }
}

.manual-search .suggestions-container .group-name {
    display: none
}

@media print, screen and (min-width: 64em) {
    header .search-header {
        margin-top: 150px;
        padding-top: 0
    }
}

@media screen and (max-width: 63.9375em) {
    header .search-header .search-form {
        margin-top: 80px
    }
}

@media screen and (min-width: 81.25em) {
    header .search-header .wrapper {
        width: calc(83.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin-left: calc(8.3333333333% + .875rem)
    }
}

header .search-header-container {
    opacity: 0;
    transform: translateY(40px);
    transition: transform 725ms cubic-bezier(1, 0, 0, 1),opacity 725ms cubic-bezier(1, 0, 0, 1);
    background: #fff;
    display: none;
    left: 0;
    margin: 0 auto;
    max-width: 1600px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 81px;
    transform: translateY(200px);
    width: 100%;
    z-index: 1
}

    header .search-header-container.open {
        opacity: 1;
        transform: translateY(0)
    }

@media screen and (max-width: 63.9375em) {
    header .search-header-container {
        height: 100vh;
        top: 0
    }

    .nav-mob-open header .search-header-container {
        transform: translateY(100%);
        transition-duration: 625ms, 625ms
    }

        .nav-mob-open header .search-header-container.open {
            transform: translateY(0)
        }
}

header .search-header-container .suggestions-container {
    border: 0;
    margin: 0 -14px 32px
}

@media screen and (max-width: 63.9375em) {
    header .search-header-container .suggestions-container {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 25px
    }

        header .search-header-container .suggestions-container .group {
            margin-left: 0;
            margin-right: 0
        }
}

header .search-header-container li.suggestion a::before {
    bottom: 0
}

header .search-header-container .search-submit {
    display: none
}

.search-header-container {
    display: none;
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: all 0.2s ease-in
}

@media print, screen and (min-width: 48em) {
    .search-header-container {
        margin: 0
    }
}

.search-header-container .grid:nth-child(even) {
    margin-left: -.71875rem;
    margin-right: -.71875rem
}

@media print, screen and (min-width: 30.0625em) {
    .search-header-container .grid:nth-child(even) {
        margin-left: -.71875rem;
        margin-right: -.71875rem
    }
}

@media print, screen and (min-width: 48em) {
    .search-header-container .grid:nth-child(even) {
        margin-left: -.75rem;
        margin-right: -.75rem
    }
}

@media print, screen and (min-width: 64em) {
    .search-header-container .grid:nth-child(even) {
        margin-left: -.875rem;
        margin-right: -.875rem
    }
}

.search-opened {
    overflow: hidden;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .search-opened {
        position: fixed
    }
}

.search-opened .nav__backdrop {
    display: block;
    z-index: 2
}

.search-opened .search-header-container {
    background: #fff;
    content: '';
    display: block;
    height: 100vh;
    opacity: 0;
    pointer-events: auto;
    position: absolute;
    width: 100%
}

@media print, screen and (min-width: 64em) {
    .search-opened .search-header-container {
        height: 390px;
        left: 0;
        position: fixed;
        top: 0;
        z-index: 9
    }
}

.search-opened .search-header-container .search-text {
    background: transparent;
    border: 0;
    border-bottom: none;
    border-radius: 1px;
    font-size: 1.875rem;
    padding: 17px 50px 17px 20px
}

@media print, screen and (min-width: 48em) {
    .search-opened .search-header-container .search-text {
        padding: 21px 70px 21px 20px
    }
}

@media print, screen and (min-width: 64em) {
    .search-opened .search-header-container .search-text {
        padding: 20px 75px 21px 30px
    }
}

.search-opened .search-header-container .search-text:focus {
    border: 0;
    border-bottom: 1px solid #868d91
}

.search-opened .search-header-container .search-text:-ms-input-placeholder {
    color: #545d65
}

.search-opened .search-header-container .search-text::placeholder {
    color: #545d65
}

.search-opened .search-header-container .search-text:-ms-input-placeholder {
    color: #545d65
}

@media screen and (max-width: 63.9375em) {
    .search-opened .search-header-container .group {
        width: 100%
    }
}

@media print, screen and (min-width: 64em) {
    .search-opened .search-header-container .group ul {
        padding-top: 10px
    }
}

@media print, screen and (min-width: 64em) {
    .search-opened .search-header-container li.suggestion a {
        font-size: 1.125rem
    }
}

.search-opened header .group-name {
    color: #000;
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 7px
}

@media print, screen and (min-width: 64em) {
    .search-opened header .group-name {
        border-bottom: 1px solid #c8c8c8;
        font-size: 1.125rem;
        font-weight: 300
    }
}

.no-touch .suggestion a {
    display: inline;
    position: relative
}

    .no-touch .suggestion a::before {
        background-color: #c20016;
        bottom: 0;
        content: '';
        display: inline;
        height: 1px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        visibility: hidden;
        width: 100%
    }

    .no-touch .suggestion a:hover::before {
        transform: scaleX(1);
        visibility: visible
    }

.in-page .search-header {
    margin-top: -28px
}

@media print, screen and (min-width: 48em) {
    .in-page .search-header {
        margin-top: -35px
    }
}

@media print, screen and (min-width: 64em) {
    .in-page .search-header {
        margin-top: -40px
    }
}

.search-header {
    margin-bottom: 25px;
    position: relative;
    z-index: 1
}

@media print, screen and (min-width: 64em) {
    .search-header {
        margin-bottom: 50px;
        padding-top: 50px
    }
}

@media screen and (max-width: 63.9375em) {
    .search-header {
        margin-top: 25px
    }
}

.search-header .wrapper {
    position: relative
}

.search-header .suggestions-container {
    border: 1px solid #c8c8c8;
    border-top: 0;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 20px;
    padding-top: 40px
}

@media screen and (max-width: 63.9375em) {
    .search-header .suggestions-container {
        border: 0;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-flow: column;
        flex-flow: column;
        height: calc(100vh - 255px);
        margin-bottom: 20px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 28px;
        overflow-y: auto;
        padding: 0;
        width: 100%
    }

        .search-header .suggestions-container .group-name {
            display: none
        }

        .search-header .suggestions-container .category-group {
            border-top: 1px solid #c8c8c8;
            margin-top: 20px;
            -ms-flex-order: 4;
            order: 4;
            padding-top: 20px
        }

            .search-header .suggestions-container .category-group .group-name {
                display: block
            }
}

.search-header .suggestions-container.hide {
    display: none
}

.search-header .suggestions-container .group-name {
    color: #28343d;
    font-weight: bold
}

@media print, screen and (min-width: 64em) {
    .search-header .suggestions-container .group-name {
        border-bottom: 1px solid #c8c8c8;
        margin-bottom: 10px;
        padding-bottom: 7px
    }
}

.search-header .suggestions-container .group {
    width: calc(25% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    font-size: .9375rem
}

@media screen and (max-width: 63.9375em) {
    .search-header .suggestions-container .group {
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin-left: 0;
        margin-right: 0
    }
}

.search-header .suggestions-container .group ul {
    list-style: none;
    margin: 0
}

@media screen and (max-width: 63.9375em) {
    .search-header .suggestions-container .group ul {
        margin: 0 0 -10px
    }
}

.search-header .suggestions-container .suggestion {
    display: block;
    margin: 10px 0;
    white-space: normal;
    word-break: break-word
}

@media print, screen and (min-width: 64em) {
    .search-header .suggestions-container .suggestion {
        margin: 15px 0
    }
}

.search-header .suggestions-container .suggestion a {
    color: #28343d;
    font-size: .9375rem;
    line-height: 1
}

.search-header .search-form {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%
}

.search-header .search-error {
    color: #c20016;
    display: none;
    font-size: .75rem;
    padding: 20px 20px 20px 0;
    position: absolute;
    top: 100%;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .search-header .search-error {
        padding-bottom: 0;
        position: relative
    }
}



@media print, screen and (min-width: 64em) {
    .search-header .search-text {
        font-size: 1.875rem;
        padding: 21px 75px 21px 25px
    }
}

.rooster-toggle .search-header .search-text {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300
}

.search-header .search-text:focus {
    border: 1px solid #71777b
}

.search-header .search-text:-ms-input-placeholder {
    color: #c8c8c8;
    opacity: 1
}

.search-header .search-text::placeholder {
    color: #c8c8c8;
    opacity: 1
}

.search-header .search-text:-ms-input-placeholder {
    color: #c8c8c8
}

.search-header .search-submit {
    background: none;
    border: 0;
    color: #c20016;
    cursor: pointer;
    font-size: 0;
    height: 28px;
    margin-top: -11px;
    position: absolute;
    right: 16px;
    top: 47%;
    width: 30px
}

@media print, screen and (min-width: 48em) {
    .search-header .search-submit {
        right: 26px
    }
}

@media print, screen and (min-width: 64em) {
    .search-header .search-submit {
        top: 50%
    }
}

.search-header .search-submit::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e91b';
    color: #e91333;
    font-size: 1.25rem
}

.kitchen-style .grid {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 50px;
    margin-top: 50px;
    padding-bottom: 50px;
    position: relative
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .grid {
        border-top: 1px solid #d8d8d8;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 100px;
        margin-top: 100px;
        padding-bottom: 0
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-style .kitchen-img img {
        display: none
    }
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .kitchen-img {
        -ms-flex-item-align: center;
        align-self: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 50%
    }
}

.kitchen-style .kitchen-img .w-media {
    position: relative
}

@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    .kitchen-style .kitchen-img .w-media {
        padding-bottom: 80%
    }
}

.kitchen-style .kitchen-img .w-media img {
    display: block
}

@media screen and (max-width: 47.9375em) {
    .kitchen-style .kitchen-details {
        padding-left: 1.5625rem;
        padding-right: 1.5625rem
    }
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .kitchen-details {
        -ms-flex-item-align: center;
        align-self: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 20px 0;
        width: 50%
    }
}

.kitchen-style .kitchen-details h2 {
    font-size: 1.25rem;
    margin: 35px auto 20px;
    text-align: center;
    width: 100%
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .kitchen-details h2 {
        font-size: 1.375rem;
        margin: 0 auto 10px;
        max-width: 84%
    }
}

@media print, screen and (min-width: 64em) {
    .kitchen-style .kitchen-details h2 {
        font-size: 1.5625rem;
        margin: 0 auto 25px;
        max-width: 84%
    }
}

@media screen and (min-width: 81.25em) {
    .kitchen-style .kitchen-details h2 {
        font-size: 1.875rem;
        margin: 0 auto 50px;
        max-width: 64%
    }
}

.kitchen-style .kitchen-details h2:empty {
    display: none
}

.kitchen-style .kitchen-details .w-media {
    margin-bottom: 10px;
    text-align: center
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .kitchen-details .w-media {
        margin-bottom: 0
    }
}

.kitchen-style .kitchen-details .w-media img {
    height: 200px;
    width: auto
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .kitchen-details .w-media img {
        height: 170px
    }
}

@media print, screen and (min-width: 48em) {
    .kitchen-style .kitchen-details .w-media img {
        height: 200px
    }
}

@media screen and (min-width: 81.25em) {
    .kitchen-style .kitchen-details .w-media img {
        height: 288px
    }
}

.kitchen-style .kitchen-details h3 {
    color: #28343d;
    font-size: 1.125rem;
    margin-bottom: 40px;
    text-align: center;
    width: 100%
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .kitchen-details h3 {
        margin-bottom: 20px
    }
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .kitchen-style .kitchen-details h3 {
        font-size: 1.25rem;
        margin: 0 auto 40px;
        max-width: 84%
    }
}

@media screen and (min-width: 81.25em) {
    .kitchen-style .kitchen-details h3 {
        font-size: 1.5rem;
        margin: 0 auto 50px;
        max-width: 64%
    }
}

.kitchen-style .available-colors {
    width: 100%
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .available-colors {
        margin: 0 10px;
        max-width: 100%
    }

        .kitchen-style .available-colors li a {
            height: 25px;
            width: 25px
        }

        .kitchen-style .available-colors li img {
            height: 25px;
            width: 25px
        }
}

@media print, screen and (min-width: 64em) {
    .kitchen-style .available-colors {
        margin-left: auto;
        margin-right: auto;
        max-width: 78%
    }
}

.kitchen-style .available-colors ul {
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: -10px
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .available-colors ul {
        margin: 0 auto -10px;
        max-width: 80%
    }
}

.kitchen-style .available-colors li {
    margin-bottom: 10px;
    margin-left: 8px;
    margin-right: 8px
}

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .kitchen-style .available-colors li {
        margin-bottom: 10px
    }
}

.kitchen-style .available-colors .label {
    margin-bottom: 15px;
    text-align: center
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .available-colors .label {
        margin-bottom: 10px
    }
}

.kitchen-style .kitchen-style-grid {
    margin-left: -0.875rem;
    margin-right: -0.875rem
}

    .kitchen-style .kitchen-style-grid .kitchen-detail-seo {
        margin-top: -50px;
        width: calc(66.6666666667% - 1.75rem);
        margin-right: 0.875rem;
        margin-left: 0.875rem;
        margin-left: calc(16.6666666667% + 0.875rem)
    }

        .kitchen-style .kitchen-style-grid .kitchen-detail-seo .plp-links {
            list-style-type: none;
            margin-left: 0px
        }

            .kitchen-style .kitchen-style-grid .kitchen-detail-seo .plp-links a:link {
                text-decoration: underline;
                color: #4A90E2
            }

@media screen and (min-width: 64em) and (max-width: 81.1875em) {
    .kitchen-style .kitchen-style-grid .kitchen-detail-seo {
        width: calc(83.3333333333% - 1.5rem);
        margin-right: 0.75rem;
        margin-left: 0.75rem;
        margin-left: calc(8.3333333333% + 0.75rem)
    }
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
    .kitchen-style .kitchen-style-grid .kitchen-detail-seo {
        margin-top: 0;
        width: calc(83.3333333333% - 1.5rem);
        margin-right: 0.75rem;
        margin-left: 0.75rem;
        margin-left: calc(8.3333333333% + 0.75rem)
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-style .kitchen-style-grid .kitchen-detail-seo {
        margin-top: 0;
        width: calc(83.3333333333% - 1.5rem);
        margin-right: 0.75rem;
        margin-left: 0.75rem;
        margin-left: calc(8.3333333333% + 0.75rem)
    }
}

@media screen and (max-width: 47.9375em) {
    .kitchen-style .kitchen-style-grid {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin: 0
    }
}

.kdp-gallery {
    margin-bottom: 50px;
    margin-top: 50px
}

@media print, screen and (min-width: 48em) {
    .kdp-gallery {
        margin-bottom: 100px;
        margin-top: 100px
    }
}

@media screen and (max-width: 19.9375em) {
    .kdp-gallery .item-block {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.4375rem);
        margin-right: .71875rem;
        margin-left: .71875rem
    }
}

@media print, screen and (min-width: 30.0625em) {
    .kdp-gallery .item-block {
        float: left;
        margin-top: 0.6%
    }

        .kdp-gallery .item-block:nth-child(1), .kdp-gallery .item-block:nth-child(5) {
            margin-left: 0;
            margin-right: 0.9%;
            width: 38.30%
        }

            .kdp-gallery .item-block:nth-child(1) .media, .kdp-gallery .item-block:nth-child(5) .media {
                padding-bottom: 56.25%
            }

        .kdp-gallery .item-block:nth-child(2), .kdp-gallery .item-block:nth-child(4) {
            margin-left: 0;
            margin-right: 0;
            width: 16.162%
        }

            .kdp-gallery .item-block:nth-child(2) .media, .kdp-gallery .item-block:nth-child(4) .media {
                padding-bottom: 133.33%
            }

        .kdp-gallery .item-block:nth-child(3) {
            float: right;
            margin-left: 0;
            margin-right: 0;
            width: 43.738%
        }

            .kdp-gallery .item-block:nth-child(3) .media {
                padding-bottom: 100%
            }

        .kdp-gallery .item-block:nth-child(4) {
            margin-left: 0;
            margin-right: 0.9%
        }

        .kdp-gallery .item-block:nth-child(5) {
            margin-left: 0;
            margin-right: 0
        }
}

.kdp-gallery .item-block .list {
    display: block;
    overflow: hidden
}

.kdp-gallery .item-block .media {
    background-color: rgba(0,0,0,0);
    display: block;
    height: auto;
    overflow: hidden;
    position: relative
}

@media print, screen and (min-width: 30.0625em) {
    .kdp-gallery .item-block .media {
        background: #28343d;
        height: 0
    }
}

.kdp-gallery .container {
    max-width: 100%;
    padding: 0
}

.kdp-gallery .img-fluid {
    display: block;
    position: static
}

@media print, screen and (min-width: 30.0625em) {
    .kdp-gallery .img-fluid {
        left: 0;
        position: absolute;
        top: 0
    }
}

.kdp-gallery .slider {
    overflow: hidden
}

@media screen and (max-width: 19.9375em) {
    .kdp-gallery .slider {
        padding-bottom: 30px
    }
}

@media print, screen and (min-width: 64em) {
    .kdp-gallery .slider {
        padding-bottom: 0
    }
}

.kdp-gallery .slider::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 0;
    box-shadow: inset 0 0 3px #fff
}

.kdp-gallery .slider::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 0
}

.kdp-gallery .carousel {
    position: relative
}

    .kdp-gallery .carousel .list {
        transition: all 0.7s cubic-bezier(0.47, 0, 0.75, 0.72)
    }

    .kdp-gallery .carousel .item-block {
        max-width: none
    }

@media screen and (max-width: 19.9375em) {
    .kdp-gallery .carousel .item-block {
        margin: 0;
        max-width: 480px;
        width: 100%
    }
}

.kdp-gallery .carousel img:hover {
    transform: none
}

.kdp-gallery .carousel .dots {
    bottom: 0
}

.kitchen-visualiser {
    overflow: hidden;
    text-align: center
}

    .kitchen-visualiser .render-wrapper {
        display: inline-block;
        overflow: hidden;
        position: relative;
        vertical-align: top
    }

    .kitchen-visualiser .render {
        display: block;
        height: 56.25vw;
        margin: 0 auto;
        max-height: 100vh;
        max-width: 177.78vh;
        width: 100vw
    }

    .kitchen-visualiser .toggle-menu {
        background-color: #fff;
        box-sizing: border-box;
        cursor: pointer;
        height: 44px;
        left: -44px;
        margin: auto 0;
        position: absolute;
        text-align: center;
        top: 62px;
        width: 44px
    }

        .kitchen-visualiser .toggle-menu::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e909';
            color: #c20016;
            line-height: 44px
        }

        .kitchen-visualiser .toggle-menu.icon-close::after {
            font-family: "icon-howdens";
            line-height: 1;
                    text-transform: none;
            content: '\e90b';
            line-height: 44px
        }

    .kitchen-visualiser .kv-menu-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        position: absolute;
        right: -320px;
        text-align: left;
        top: 0;
        transition: all 375ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
        width: 640px
    }

        .kitchen-visualiser .kv-menu-container.js-closed {
            right: -640px
        }

        .kitchen-visualiser .kv-menu-container.js-level-1-visible {
            right: -320px
        }

        .kitchen-visualiser .kv-menu-container.js-level-2-visible {
            right: 0
        }

            .kitchen-visualiser .kv-menu-container.js-level-2-visible .kv-header {
                width: 100%
            }

                .kitchen-visualiser .kv-menu-container.js-level-2-visible .kv-header a {
                    text-indent: 0
                }

            .kitchen-visualiser .kv-menu-container.js-level-2-visible .kv-footer {
                width: 100%
            }

        .kitchen-visualiser .kv-menu-container .kv-menu-level-container {
            background-color: #fff;
            -ms-flex-positive: 2;
            flex-grow: 2;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
            flex-direction: row;
            height: 0
        }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .kv-menu-level-1 {
                background-color: rgba(255,255,255,0.9);
                overflow-y: auto
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 p {
                display: block;
                font-size: .9375rem;
                padding: 20px 30px
            }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 p:hover {
                    color: #c20016;
                    cursor: pointer
                }

                    .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 p:hover::before {
                        width: 20px
                    }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 p:active::before {
                    background-color: #c20016;
                    width: 20px
                }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 p::after {
                    font-family: "icon-howdens";
                    line-height: 1;
                                    text-transform: none;
                    content: '\e901';
                    font-size: 7px;
                    transition: transform 675ms ease;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                    color: #c20016;
                    float: right;
                    font-size: .625rem;
                    position: relative;
                    top: 8px;
                    transition: 200ms linear
                }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 .active {
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.2)
            }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 .active p {
                    background-color: #28343d;
                    color: #fff
                }

                    .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-1 .active p::after {
                        color: #fff;
                        transform: rotate(180deg)
                    }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .kv-menu-level-2 {
                background: #28343d;
                overflow-y: auto
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li {
                border: 1px solid #d8d8d8;
                cursor: pointer;
                margin: 20px;
                position: relative
            }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li.active, .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li.not-available {
                    cursor: unset
                }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li:after {
                    font-family: "icon-howdens";
                    line-height: 1;
                                    text-transform: none;
                    content: '\e907';
                    background-color: #fff;
                    border: 1px solid #fff;
                    border-radius: 15px;
                    color: #fff;
                    height: 30px;
                    line-height: 30px;
                    overflow: hidden;
                    right: 15px;
                    text-align: center;
                    width: 30px;
                    position: absolute;
                    top: 15px
                }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li.active::after {
                    background-color: #417505;
                    color: #fff
                }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 .item-name {
                background: #fff;
                bottom: 0;
                font-size: .9375rem;
                left: 10px;
                padding: 1px 8px;
                position: absolute
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 img {
                display: block;
                max-width: 100%
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 .bg-color {
                height: 60px
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 .not-available-msg {
                background: rgba(255,255,255,0.8);
                font-size: .9375rem;
                height: 100%;
                left: 50%;
                line-height: 60px;
                position: absolute;
                text-align: center;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .single-height li img {
                height: 60px;
                width: 280px
            }

            .kitchen-visualiser .kv-menu-container .kv-menu-level-container .double-height li {
                background: #fff;
                height: 120px;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-pack: center;
                justify-content: center;
                -ms-flex-align: center;
                align-items: center
            }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .double-height li .not-available-msg {
                    line-height: 120px
                }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .double-height li:after {
                    background-color: #f1f1f1;
                    color: #f1f1f1
                }

                .kitchen-visualiser .kv-menu-container .kv-menu-level-container .double-height li .active:after, .kitchen-visualiser .kv-menu-container .kv-menu-level-container .double-height li .active:hover:after {
                    background-color: #417505;
                    color: white
                }

        .kitchen-visualiser .kv-menu-container .kv-menu-level-1, .kitchen-visualiser .kv-menu-container .kv-menu-level-2 {
            width: 50%;
            overflow-y: scroll
        }

        .kitchen-visualiser .kv-menu-container ul {
            list-style: none;
            margin: 0;
            padding: 0
        }

@media screen and (max-width: 63.9375em) {
    .kitchen-visualiser .kv-menu-container {
        width: 500px
    }

        .kitchen-visualiser .kv-menu-container.js-closed {
            right: -500px
        }

        .kitchen-visualiser .kv-menu-container.js-level-1-visible {
            right: -250px
        }

        .kitchen-visualiser .kv-menu-container .toggle-menu {
            height: 44px;
            left: -44px;
            min-width: 44px
        }

            .kitchen-visualiser .kv-menu-container .toggle-menu::after {
                line-height: 44px
            }

        .kitchen-visualiser .kv-menu-container .kv-menu-level-1 {
            background-color: unset;
            overflow-y: scroll
        }

        .kitchen-visualiser .kv-menu-container .level-1 p {
            font-size: .6875rem
        }

        .kitchen-visualiser .kv-menu-container .level-2 li:hover::before {
            border-radius: 10px;
            height: 20px;
            width: 20px
        }

        .kitchen-visualiser .kv-menu-container .level-2 .item-name {
            font-size: .6875rem
        }

        .kitchen-visualiser .kv-menu-container .level-2 .not-available-msg {
            font-size: .6875rem;
            line-height: 45px
        }

        .kitchen-visualiser .kv-menu-container .level-2 .active::before, .kitchen-visualiser .kv-menu-container .level-2 .active:hover::before {
            border-radius: 11px;
            font-size: .625rem;
            height: 20px;
            line-height: 20px;
            width: 20px
        }
}

.kitchen-visualiser .kv-header {
    -ms-flex-negative: 1;
    flex-shrink: 1;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    z-index: 1;
    width: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    transition: width 375ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
    min-height: 62px
}

    .kitchen-visualiser .kv-header img {
        height: 38px;
        width: 152px;
        display: block;
        padding: 12px 0 12px 20px
    }

    .kitchen-visualiser .kv-header a {
        line-height: 38px;
        padding: 12px 60px 12px 0;
        border: none;
        margin-right: 0;
        text-indent: -9999px;
        overflow: hidden
    }

        .kitchen-visualiser .kv-header a:before {
            content: url(../Media/start-again.svg);
            text-indent: 0;
            line-height: 1
        }

        .kitchen-visualiser .kv-header a:active {
            background: transparent
        }

.kitchen-visualiser .kv-footer {
    -ms-flex-negative: 1;
    flex-shrink: 1;
    background-color: #fff;
    width: 50%;
    z-index: 1;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    transition: width 375ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
}

    .kitchen-visualiser .kv-footer .cta {
        display: block;
        margin-right: 0;
        padding: 24px 30px 24px 30px;
        text-align: center
    }

    .kitchen-visualiser .kv-footer .save-kitchen {
        background: #417505;
        border: 1px solid #417505;
        color: #fff
    }

        .kitchen-visualiser .kv-footer .save-kitchen::before {
            display: none
        }

.w-overlay-popup {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 63.9375em) {
    .w-overlay-popup {
        left: 0;
        top: 0;
        transform: unset
    }
}

.w-overlay-popup .grid {
    margin: 0
}

.w-overlay-popup .close-overlay {
    border: 0;
    border-radius: 0;
    height: 50px;
    margin: 0;
    width: 50px
}

    .w-overlay-popup .close-overlay::before {
        font-size: 1rem;
        height: auto;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto
    }

.w-overlay-popup .content-container {
    padding: 30px 60px 50px
}

.w-overlay-popup .popup-heading {
    color: #fff;
    font-family: "Rooster",sans-serif;
    font-size: 1.5rem;
    line-height: 1
}

.w-overlay-popup .cta.primary {
    display: block;
    margin: 0 0 1.25rem
}

    .w-overlay-popup .cta.primary.on-navy-bg {
        background: transparent;
        color: #fff
    }

        .w-overlay-popup .cta.primary.on-navy-bg::before {
            color: #fff
        }

.w-kv-popup-save {
    width: calc(83.3333333333% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    height: auto;
    margin: auto;
    overflow-y: auto
}

@media screen and (min-width: 81.25em) {
    .w-kv-popup-save {
        width: calc(66.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: auto
    }
}

.w-kv-popup-save .kv-popup-save {
    background-color: #28343d;
    overflow: hidden;
    padding: 0
}

    .w-kv-popup-save .kv-popup-save .close-overlay {
        border-bottom: 1px solid #d8d8d8;
        border-radius: 0;
        display: block;
        margin: 0;
        position: relative;
        width: 100%
    }

        .w-kv-popup-save .kv-popup-save .close-overlay::before {
            left: 100%;
            padding: 14px;
            transform: translate(-100%, -50%)
        }

        .w-kv-popup-save .kv-popup-save .close-overlay:last-child {
            color: white;
            border: none;
            background: transparent;
            display: unset;
            transform: unset;
            font-size: .6875rem
        }

            .w-kv-popup-save .kv-popup-save .close-overlay:last-child:before {
                color: #fff;
                font-size: .5rem;
                left: 140%
            }

    .w-kv-popup-save .kv-popup-save .first-content, .w-kv-popup-save .kv-popup-save .second-content {
        -ms-flex: 1;
        flex: 1;
        overflow-y: auto
    }

    .w-kv-popup-save .kv-popup-save .slide {
        background: #fff;
        left: 100%;
        opacity: 1;
        padding: 30px 60px 50px;
        position: absolute;
        transition: all 375ms cubic-bezier(0.79, 0.015, 0.264, 0.986);
        width: calc(50% - 120px);
        overflow-y: auto
    }

        .w-kv-popup-save .kv-popup-save .slide .error-msg {
            color: #c20016
        }

        .w-kv-popup-save .kv-popup-save .slide.save {
            overflow-y: scroll
        }

        .w-kv-popup-save .kv-popup-save .slide.show {
            left: 50%;
            opacity: 1;
            transition: all 375ms cubic-bezier(0.79, 0.015, 0.264, 0.986)
        }

@media screen and (max-width: 63.9375em) {
    .w-kv-popup-save {
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0;
        overflow-x: hidden;
        width: 100%
    }

        .w-kv-popup-save .kv-popup-save {
            height: 100vh
        }

            .w-kv-popup-save .kv-popup-save > .close-overlay {
                display: none
            }

            .w-kv-popup-save .kv-popup-save .grid {
                height: 100%
            }

            .w-kv-popup-save .kv-popup-save .content-container {
                padding: 44px
            }

            .w-kv-popup-save .kv-popup-save .slide {
                padding: 44px;
                height: calc(100vh - 88px);
                width: calc(50% - 88px)
            }
}

.w-kv-popup-start-again {
    width: calc(66.6666666667% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    height: auto;
    margin: auto;
    overflow-y: auto
}

@media screen and (min-width: 81.25em) {
    .w-kv-popup-start-again {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: auto
    }
}

@media screen and (min-width: 100.0625em) {
    .w-kv-popup-start-again {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: auto
    }
}

.w-kv-popup-start-again .kv-popup-start-again {
    margin: auto;
    overflow: auto;
    padding: 110px 60px
}

.w-kv-popup-start-again .subsection {
    text-align: center
}

    .w-kv-popup-start-again .subsection .popup-heading {
        color: #28343d;
        font-size: 2.1875rem;
        padding: 0
    }

@media screen and (min-width: 81.25em) {
    .w-kv-popup-start-again .subsection .popup-heading {
        padding: 0 40px
    }
}

.w-kv-popup-start-again .subsection .description {
    margin: 25px 0 35px
}

.w-kv-popup-start-again .cta-container .cta {
    display: block;
    margin: 0 10px
}

@media screen and (max-width: 63.9375em) {
    .w-kv-popup-start-again {
        width: calc(100% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 0;
        overflow-x: hidden;
        width: 100%
    }

        .w-kv-popup-start-again .kv-popup-start-again {
            height: 100vh;
            padding: 60px
        }

        .w-kv-popup-start-again .cta-container .cta {
            margin: 0 0 1.25rem
        }
}

.kitchen-visualiser-form .subsection.common, .kitchen-visualiser-form-pdf .subsection.common {
    display: none
}

.kitchen-visualiser-form form, .kitchen-visualiser-form-pdf form {
    margin: 0;
    width: 100%
}

.kitchen-visualiser-form .subsection.default, .kitchen-visualiser-form-pdf .subsection.default {
    margin: 0;
    width: 100%
}

@media screen and (max-width: 63.9375em) {
    .kitchen-visualiser-form .subsection.default, .kitchen-visualiser-form-pdf .subsection.default {
        margin: 0;
        width: 100%
    }
}

.kitchen-visualiser-form .heading-3:first-child, .kitchen-visualiser-form-pdf .heading-3:first-child {
    border-bottom: 1px solid #dedede;
    font-family: "Rooster",sans-serif;
    font-size: 1.5rem;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0 0 25px
}

@media screen and (max-width: 63.9375em) {
    .kitchen-visualiser-form .heading-3:first-child, .kitchen-visualiser-form-pdf .heading-3:first-child {
        display: none
    }
}

.kitchen-visualiser-form .form-textbox, .kitchen-visualiser-form-pdf .form-textbox {
    margin-top: 0
}

@media screen and (max-width: 63.9375em) {
    .kitchen-visualiser-form .form-textbox, .kitchen-visualiser-form-pdf .form-textbox {
        margin-top: 0
    }

        .kitchen-visualiser-form .form-textbox .title, .kitchen-visualiser-form-pdf .form-textbox .title {
            font-weight: bold;
            margin-bottom: 5px
        }

        .kitchen-visualiser-form .form-textbox .description, .kitchen-visualiser-form-pdf .form-textbox .description {
            padding-bottom: 0
        }
}

.kitchen-visualiser-form .form-textbox .title, .kitchen-visualiser-form-pdf .form-textbox .title {
    font-weight: 400
}

.kitchen-visualiser-form .form-checkbox, .kitchen-visualiser-form-pdf .form-checkbox {
    border: 0;
    margin: 20px 0;
    padding-top: 0
}

@media screen and (max-width: 63.9375em) {
    .kitchen-visualiser-form .form-checkbox, .kitchen-visualiser-form-pdf .form-checkbox {
        margin-top: 10px
    }
}

.kitchen-visualiser-form .checkbox + label::after, .kitchen-visualiser-form-pdf .checkbox + label::after {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e907';
    display: none;
    font-size: .5rem;
    left: 1px;
    padding: 3px;
    top: 3px
}

.kitchen-visualiser-form .checkbox + label::before, .kitchen-visualiser-form-pdf .checkbox + label::before {
    top: 2px
}

.kitchen-visualiser-form .checkbox:checked + label::after, .kitchen-visualiser-form-pdf .checkbox:checked + label::after {
    background: #f9f9f9;
    display: block
}

.kitchen-visualiser-form .error-msg, .kitchen-visualiser-form-pdf .error-msg {
    padding: 0 0 12px
}

.kitchen-visualiser-form .form-button, .kitchen-visualiser-form-pdf .form-button {
    margin: 0
}

    .kitchen-visualiser-form .form-button .cta, .kitchen-visualiser-form-pdf .form-button .cta {
        text-align: left;
        width: 100%
    }

        .kitchen-visualiser-form .form-button .cta.disabled, .kitchen-visualiser-form-pdf .form-button .cta.disabled {
            background-color: #c8c8c8;
            color: #fff
        }

            .kitchen-visualiser-form .form-button .cta.disabled:before, .kitchen-visualiser-form-pdf .form-button .cta.disabled:before {
                color: #fff
            }

.form-success.save-kitchen-success, .kv-form-success {
    padding-bottom: 0
}

    .form-success.save-kitchen-success .grid, .kv-form-success .grid {
        margin: 0
    }

    .form-success.save-kitchen-success .common, .kv-form-success .common {
        margin: 0;
        width: 100%
    }

        .form-success.save-kitchen-success .common .heading-2, .kv-form-success .common .heading-2 {
            font-family: "Rooster",sans-serif;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 0 20px;
            text-transform: uppercase;
            line-height: 1
        }

@media screen and (max-width: 63.9375em) {
    .form-success.save-kitchen-success .common .heading-2, .kv-form-success .common .heading-2 {
        margin-bottom: 10px
    }
}

.form-success.save-kitchen-success .common hr, .kv-form-success .common hr {
    margin: 1.25rem auto
}

.form-success.save-kitchen-success .common .form-button, .kv-form-success .common .form-button {
    margin: 0
}

@media screen and (max-width: 63.9375em) {
    .form-success.save-kitchen-success .common .form-button, .kv-form-success .common .form-button {
        border: 0;
        margin: 0
    }
}

.rotate-device-container {
    background: #fff;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 7
}

    .rotate-device-container .rotate-device-content {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .rotate-device-container .rotate-icon {
        background: url("../Media/rotate.svg") no-repeat;
        display: block;
        height: 24px;
        margin: 15px auto;
        width: 24px
    }

    .rotate-device-container .rotate-message {
        font-size: 1rem
    }

.no-touch .kitchen-visualiser .kv-header a:hover::before {
    animation-duration: unset;
    animation-name: unset;
    animation-timing-function: unset
}

.no-touch .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li:hover::after {
    background-color: #417505;
    color: #417505
}

.no-touch .kitchen-visualiser .kv-menu-container .kv-menu-level-container .level-2 li.active:hover::after {
    color: #fff
}

.linkto-website {
    padding: 20px 0
}

    .linkto-website .step {
        padding: 50px 0
    }

@media screen and (max-width: 63.9375em) {
    .linkto-website .step {
        padding: 25px 0 26px
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step {
        padding-bottom: 34px
    }
}

.linkto-website .step .form form {
    padding-left: 0;
    margin: 0 auto;
    width: auto
}

    .linkto-website .step .form form h3 label {
        font-size: 1em;
        line-height: 1.5em;
        opacity: 0.4;
        padding-left: 40px;
        transition: 0.3s ease-in-out 0s
    }

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .form form h3 label {
        line-height: 1.2em;
        padding-left: 30px
    }
}

.linkto-website .step .form form h3 input:checked + label {
    opacity: 1
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .form form {
        padding-left: 0
    }
}

.linkto-website .step form .terms-conditions {
    margin: 57px 0 5px;
    padding-top: 0
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step form .terms-conditions {
        margin-bottom: 6px
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step form .terms-conditions {
        margin-top: 20px
    }
}

.linkto-website .step form .terms-conditions .checkbox + label {
    font-size: 1.25em;
    line-height: 1
}

.linkto-website .step form .terms-conditions .checkbox:checked + label::after {
    background: #c20016;
    content: "";
    margin: 2px;
    padding: 1px
}

.linkto-website .step .howdens-red {
    color: #c20016
}

.linkto-website .step .heading {
    margin-bottom: 38px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .heading h2 {
        font-size: 1.885rem;
        line-height: 1.2
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .heading {
        margin-bottom: 41px
    }

        .linkto-website .step .heading h2 {
            font-size: 1.555rem
        }
}

.linkto-website .step.step2 .heading {
    margin-bottom: 14px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step.step2 .heading {
        margin-bottom: 16px
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step.step2 .heading {
        margin-bottom: 35px
    }
}

.linkto-website .step.step2 .heading .w-rte {
    padding-left: 0
}

.linkto-website .step.step2 .w-rte {
    padding-left: 40px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step.step2 .w-rte {
        padding-left: 30px
    }
}

.linkto-website .step.step3 {
    padding-top: 40px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step.step3 {
        padding-top: 22px
    }
}

.linkto-website .step.disabled .form form h3 label {
    opacity: 1
}

.linkto-website .step .w-rte {
    padding-top: 18px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .w-rte {
        padding-top: 13px
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .w-rte {
        padding-top: 7px
    }
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item h3 {
        font-size: 1.885rem;
        line-height: 1.1
    }
}

.linkto-website .step .link-type-item.w-image-link {
    margin-bottom: 86px;
    margin-top: 58px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item.w-image-link {
        margin-bottom: 59px
    }
}

.linkto-website .step .link-type-item.w-text-link {
    margin-top: 105px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item.w-text-link {
        margin-top: 75px
    }
}

.linkto-website .step .link-type-item .w-link-select {
    margin-top: 50px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item .w-link-select {
        margin-top: 53px
    }
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item .w-link-select {
        margin-top: 55px
    }
}

.linkto-website .step .link-type-item .w-link-select .select-group-title, .linkto-website .step .link-type-item .w-link-select .select-group {
    padding-left: 40px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item .w-link-select .select-group-title, .linkto-website .step .link-type-item .w-link-select .select-group {
        padding-left: 30px
    }
}

.linkto-website .step .link-type-item .w-link-select.image-links {
    margin-top: 20px;
    padding-left: 40px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links {
        padding-left: 30px
    }
}

.linkto-website .step .link-type-item .w-link-select.image-links .field-set + .field-set {
    margin-top: 41px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links .field-set + .field-set {
        margin-top: 36px
    }
}

.linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label.none-selected span {
    font-family: "Rooster",sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-left: 15px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label.none-selected span {
        max-width: 100%
    }
}

.linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label img, .linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label span {
    display: inline-block;
    vertical-align: middle
}

.linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label img {
    height: auto;
    margin-left: 12px;
    max-width: 244px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label img {
        max-width: 190px
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label img {
        margin-left: 5px;
        max-width: 130px
    }
}

.linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label span {
    font-size: 1.235em;
    line-height: 1.1;
    margin-left: 20px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .link-type-item .w-link-select.image-links .field-set .radio-label span {
        max-width: 23%
    }
}

.linkto-website .step .link-type-item label {
    line-height: 1.5em
}

    .linkto-website .step .link-type-item label::after, .linkto-website .step .link-type-item label::before {
        top: 50%;
        transform: translateY(-50%)
    }

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .copy-button {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .step button.copy {
        margin: 0 auto;
        width: 100%
    }
}

.linkto-website .step button.copy::after, .linkto-website .step button.copy::before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e90d';
    color: #c20016;
    font-size: 13px;
    right: 20px
}

.no-touch .linkto-website .step button.copy:hover::before {
    animation: none
}

.linkto-website .step button.copy::after {
    background: #ffffff;
    border: none;
    bottom: auto;
    left: auto;
    right: 18px;
    top: 32%;
    width: 12px
}

.linkto-website .step .copy-tooltip {
    background: #f1f1f1;
    border: 1px solid #c8c8c8;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0;
    margin-left: 21px;
    padding: 5px 20px;
    text-align: center;
    transition: 0.3s ease-in-out 0s;
    visibility: hidden
}

    .linkto-website .step .copy-tooltip.show {
        opacity: 1;
        visibility: visible
    }

@media screen and (max-width: 19.9375em) {
    .linkto-website .step .copy-tooltip {
        display: inline-block;
        margin: 16px auto 14px
    }
}

.linkto-website .select-group .grid {
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -20px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .select-group .grid {
        margin: 0 auto
    }
}

.linkto-website .select-group .form-selectbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 calc(33% - 30px);
    flex: 0 0 calc(33% - 30px);
    margin: 10px 15px
}

@media screen and (max-width: 63.9375em) {
    .linkto-website .select-group .form-selectbox {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .select-group .form-selectbox {
        margin-bottom: 23px;
        margin-top: 5px
    }
}

.linkto-website .select-group .form-selectbox .custom-selectbox-wrap {
    width: 100%
}

    .linkto-website .select-group .form-selectbox .custom-selectbox-wrap li.level1 a {
        padding-left: 30px
    }

.linkto-website .form-textarea {
    margin-bottom: 84px
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .form-textarea {
        margin-bottom: 0
    }
}

.linkto-website .form-textarea textarea {
    background-color: #d8d8d8;
    border: 1px solid #979797;
    box-sizing: border-box;
    height: 120px;
    margin: 0 auto;
    outline: none;
    overflow-y: auto;
    padding: 20px 68px 20px 26px;
    width: 100%
}

@media screen and (max-width: 19.9375em) {
    .linkto-website .form-textarea textarea {
        height: 166px
    }
}

body .linkto-website .form-disabled-overlay.show {
    opacity: 1;
    visibility: visible
}

.product-listing__tiles .group .merchandise-tile, .kitchen-product-listing__tiles .group .merchandise-tile {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: row;
    flex-direction: row;
    width: calc(50% - 13px);
    margin: 0 0 30px 0;
    max-width: 585px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.product-listing__tiles .group .merchandise-tile__btn, .product-listing__tiles .group .merchandise-tile__btn .cta::before, .kitchen-product-listing__tiles .group .merchandise-tile__btn, .kitchen-product-listing__tiles .group .merchandise-tile__btn .cta::before {
    color: inherit
}

.product-listing__tiles .group .merchandise-tile__container, .kitchen-product-listing__tiles .group .merchandise-tile__container {
    width: 100%;
    padding: 20px 0
}

    .product-listing__tiles .group .merchandise-tile__container .text-container, .product-listing__tiles .group .merchandise-tile__container .button-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container {
        padding: 0 80px
    }

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container, .product-listing__tiles .group .merchandise-tile__container .button-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container {
        padding: 0 88px
    }
}

.product-listing__tiles .group .merchandise-tile__container .text-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container {
    padding-bottom: 48px
}

    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label {
        position: relative;
        text-transform: uppercase;
        font-size: .8125rem;
        line-height: 16px;
        margin: 0 0 27px;
        letter-spacing: 0.182em
    }

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label {
        font-size: .625rem;
        margin: 0 0 21px;
        letter-spacing: 0.231em
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label {
        font-size: .8125rem;
        margin: 0 0 23px
    }
}

.product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before {
    position: absolute;
    background-color: #ffffff;
    content: '';
    height: 2px;
    width: 50px;
    left: -70px;
    top: 50%;
    transform: translateY(-50%)
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before {
        width: 64px;
        left: -80px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__label::before {
        width: 24px;
        left: -32px
    }
}

.product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__heading, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__heading {
    font-size: 2.5rem;
    line-height: 1.13;
    margin-bottom: 10px
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__heading, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__heading {
        font-size: 1.875rem;
        line-height: 1.17;
        margin-bottom: 8px
    }
}

.product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__body-copy, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__body-copy {
    font-size: .9375rem;
    line-height: 1.67;
    font-weight: 300
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__body-copy, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container .merchandise-tile__body-copy {
        font-size: .8125rem;
        line-height: 1.54
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container {
        padding-bottom: 45px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .text-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .text-container {
        padding: 0 25px 45px 40px
    }
}

.product-listing__tiles .group .merchandise-tile__container .button-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

    .product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 24px;
        border: solid 1px #ffffff;
        padding: 16px 48px 17px;
        cursor: pointer;
        background: transparent;
        margin: 0 0 22px
    }

        .product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn:last-child, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn:last-child {
            margin-bottom: 0
        }

        .product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn .merchandise-tile__text, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn .merchandise-tile__text {
            font-size: .8125rem;
            line-height: 1;
            letter-spacing: 0.182em;
            text-transform: uppercase;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn .merchandise-tile__text, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn .merchandise-tile__text {
        font-size: .6875rem;
        letter-spacing: 0.182em
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container .merchandise-tile__btn {
        padding: 14px 34px 18px
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile__container .button-container, .kitchen-product-listing__tiles .group .merchandise-tile__container .button-container {
        padding: 0 16px
    }
}

@media screen and (max-width: 81.1875em) {
    .product-listing__tiles .group .merchandise-tile, .kitchen-product-listing__tiles .group .merchandise-tile {
        max-width: 452px;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%
    }
}

@media screen and (max-width: 63.9375em) {
    .product-listing__tiles .group .merchandise-tile, .kitchen-product-listing__tiles .group .merchandise-tile {
        max-width: 608px;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }
}

@media screen and (max-width: 47.9375em) {
    .product-listing__tiles .group .merchandise-tile, .kitchen-product-listing__tiles .group .merchandise-tile {
        min-height: 496px
    }
}

.tabbed-panel__tabs {
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    margin: 0
}

    .tabbed-panel__tabs a {
        color: #fff;
        display: block;
        font-family: "Rooster",sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 10px 0
    }

.tabs__tab {
    background-color: #7e94a4;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: inset 6px -10px 9px 0 rgba(0,0,0,0.2);
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center
}

.tabs__tab--active {
    background-color: #fff;
    box-shadow: 0 10px 0px 0 #fff,0 0 8px 0 rgba(0,0,0,0.15)
}

    .tabs__tab--active a {
        color: black;
        outline: none
    }

.tabbed-panel__tabs-content {
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15)
}

.tabs-content__tab {
    display: none;
    padding: 30px 16px
}

@media print, screen and (min-width: 48em) {
    .tabs-content__tab {
        padding: 60px
    }
}

.tabs-content__tab--active {
    display: block
}

.divider-container {
    position: relative;
    width: 100%;
    display: block
}

.grey-divider {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50%;
    z-index: 0;
    border-top: 1px solid #c8c8c8
}

.grey-divider-full {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 0;
    border-top: 1px solid #c8c8c8
}

.divider-text {
    z-index: 1;
    background: white;
    padding: 0 10px;
    display: inline-block;
    height: 100%;
    position: relative;
    color: #c8c8c8
}

.users-email {
    display: block;
    font-size: 18px;
    font-weight: bold
}

.register-content .register-content__title {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 28px;
    font-size: 1.5rem;
    color: #767572
}

.register-content .register-content__subtitle--bold {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #28343d;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px
}

.register-content .register-content__list {
    list-style: none
}

.register-content .register-content__list-item {
    line-height: 2em
}

    .register-content .register-content__list-item:before {
        content: '';
        display: inline-block;
        height: 24px;
        width: 24px;
        background-image: url(/Media/green-check-thin.svg);
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 1em;
        top: 7px;
        position: relative
    }

.register-content .btn {
    padding: 16px 0 15px
}

    .register-content .btn:first-of-type {
        margin: 10px 0 40px
    }

    .register-content .btn:last-of-type {
        margin: 30px 0 0
    }

h1.gigya-screen-caption {
    border: unset
}

.gigya-required-display {
    display: none
}

.gigya-composite-control {
    margin-bottom: 22px
}

.gigya-screen .gigya-composite-control-header {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #767572
}

.gigya-composite-control-label {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #28343d;
    display: block
}

.gigya-label {
    display: block;
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: .9375rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #28343d
}

.gigya-input-text, .gigya-input-password {
    width: 100%;
    height: 40px;
    border: solid 1px #c8c8c8;
    background-color: #f9f9f9;
    box-sizing: border-box;
    padding-left: 15px
}

.gigya-screen .gigya-error-display {
    border-top: 4px solid #c20016;
    background-color: #fcf2f3;
    margin-bottom: 40px;
    padding: 30px 40px 30px 90px;
    background-image: url("/Media/warning-red.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 30px 38px
}

    .gigya-screen .gigya-error-display .error-title {
        display: block;
        font-family: "Rooster",sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 10px
    }

    .gigya-screen .gigya-error-display .error-desc {
        margin-bottom: 10px
    }

    .gigya-screen .gigya-error-display .error-link {
        text-decoration: underline;
        color: #1787e0
    }

    .gigya-screen .gigya-error-display .gigya-error-msg.gigya-error-msg-active {
        color: #28343d;
        font-size: .9375rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal
    }

.gigya-screen .gigya-show-checkmark.gigya-valid {
    background-image: none
}

.gigya-error-msg {
    margin-top: 3px;
    font-family: Rooster
}

.cdc-container {
    width: calc(100% - 1.75rem);
    margin-right: .875rem;
    margin-left: .875rem;
    margin: 15px auto 60px
}

@media print, screen and (min-width: 48em) {
    .cdc-container {
        width: calc(75% - 1.5rem);
        margin-right: .75rem;
        margin-left: .75rem;
        margin: 15px auto 60px
    }
}

@media print, screen and (min-width: 64em) {
    .cdc-container {
        width: calc(58.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: 30px auto 60px
    }
}

@media screen and (min-width: 81.25em) {
    .cdc-container {
        width: calc(33.3333333333% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        margin: 30px auto 60px
    }
}

.white-container {
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
    padding: 30px 16px
}

@media print, screen and (min-width: 48em) {
    .white-container {
        padding: 60px
    }
}

.screenset-fail-container {
    border: 1px solid #c8c8c8;
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 50px
}

    .screenset-fail-container .error-cloud {
        width: 52px;
        margin-top: 30px;
        margin-bottom: 16px
    }

    .screenset-fail-container p {
        font-family: "Rooster",sans-serif;
        font-size: .9375rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #28343d;
        padding-bottom: 12px
    }

.hj-login-screen .gigya-composite-control-label:last-child, .hj-create-password-screen .gigya-composite-control-label:last-child, .hj-forgot-password-screen .gigya-composite-control-label:last-child, .hj-registration-screen .gigya-composite-control-label:last-child, .hj-verify-account .gigya-composite-control-label:last-child, .hj-add-account-screen .gigya-composite-control-label:last-child, .hj-account-added-screen .gigya-composite-control-label:last-child, .hj-verification-pending-screen .gigya-composite-control-label:last-child, .hj-password-successfully-set-screen .gigya-composite-control-label:last-child, .hj-change-password-success-screen .gigya-composite-control-label:last-child {
    margin-bottom: 0
}

.gigya-composite-control-image {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

    .gigya-composite-control-image .gigya-image {
        padding-bottom: 20px
    }

.gigya-composite-control-password {
    position: relative
}

    .gigya-composite-control-password > .password-visibility-icon {
        position: absolute;
        right: 10px;
        top: 32.5px;
        width: 24px;
        height: 24px;
        cursor: pointer
    }

    .gigya-composite-control-password > .show-icon {
        background: url("/Media/reveal.svg") no-repeat
    }

    .gigya-composite-control-password > .hide-icon {
        background: url("/Media/hide.svg") no-repeat
    }

.postbox-img {
    background-image: url(/Media/postbox.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 0
}

.hj-create-password-screen .password-visibility-icon {
    top: 8px
}

.hj-create-password-screen .gigya-composite-control-label:last-child {
    padding-top: 20px
}

.hj-change-password-screen .gigya-composite-control-label {
    display: inline-block;
    width: calc(50% - 15px);
    margin-bottom: 0
}

    .hj-change-password-screen .gigya-composite-control-label:first-child {
        margin-top: 40px;
        margin-right: 15px
    }

    .hj-change-password-screen .gigya-composite-control-label:last-child {
        margin-top: 40px;
        margin-left: 15px
    }

.hj-change-password-screen .btn {
    min-width: inherit
}

.hj-verification-pending-screen {
    padding-top: 50%
}

.forgot-password-success-screen {
    padding-top: 50%
}

.password-successfully-set-screen {
    padding-top: 25%
}

    .password-successfully-set-screen .gigya-composite-control {
        margin-bottom: 5px
    }

    .password-successfully-set-screen h2.gigya-composite-control {
        margin-bottom: 30px
    }

.utility-navigation-guide {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .625rem;
    line-height: 1.1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    background: #28343d;
    height: 30px;
    line-height: 30px;
    text-align: right
}


.rooster-toggle .utility-navigation-guide {
    font-family: "Rooster",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.09
}

@media screen and (min-width: 100.0625em) {
    .utility-navigation-guide {
        font-size: .75rem;
        line-height: 1
    }
}

.utility-navigation-guide ul {
    padding: 0 12px
}

.utility-navigation-guide li {
    display: inline-block;
    line-height: 30px;
    padding: 0 12px
}

.utility-navigation-guide a {
    color: #fff
}

@media print {
    header, footer, .sort-container .sortitems-selected-value, .external-reviews {
        display: none
    }

    a::after {
        content: ''
    }

    a[href]::after {
        content: none
    }

    h1 {
        font-size: 1.875rem
    }

    h2 {
        font-size: 1.5rem
    }

    img {
        display: block;
        height: auto;
        opacity: 1
    }

    .js:not(.exp-mode) body:not(.theme-depot) section:not(.search-header):not(.w-overlay-popup):not(.popup):not(.external-reviews):not(.utility-navigation):not(.utility-navigation-guide):not(.hero-editorial):not(.hero-homepage):not(.inpage-search):not(.cookie-message):not(.breadcrumb) {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    .carousel .column.heading {
        width: 100%
    }

    .carousel .column .icon {
        display: none
    }

    .listing-products {
        width: calc(75% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem;
        padding-top: 50px
    }

    .editorial-text-media.variant-a .section-container .grid {
        -ms-flex-align: inherit;
        align-items: inherit
    }

    .editorial-text-media.variant-a .section-container:nth-child(odd) .grid {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .editorial-text-media.variant-a .content-block {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

    .editorial-text-media.variant-b .content-block {
        width: calc(41.6666666667% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

    .hero-banner .container .subsection {
        background-color: #fff;
        box-sizing: border-box;
        margin: -40px 0 50px;
        padding: 50px 87px 0;
        position: relative
    }

        .hero-banner .container .subsection .w-heading, .hero-banner .container .subsection .w-text {
            width: calc(50% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem
        }

    .image-gallery.three-image .gallery-block {
        margin-top: 30px
    }

        .image-gallery.three-image .gallery-block.column:nth-child(1) {
            width: calc(41.6666666667% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem;
            margin-left: calc(8.3333333333% + .875rem);
            margin-top: 250px
        }

        .image-gallery.three-image .gallery-block.column:nth-child(2) {
            width: calc(41.6666666667% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem
        }

        .image-gallery.three-image .gallery-block.column:nth-child(3) {
            width: calc(33.3333333333% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem;
            margin-left: calc(50% + .875rem);
            margin-top: -190px
        }

        .image-gallery.three-image .gallery-block:nth-child(3) .gallery-img {
            height: 288px
        }

    .content-teaser.one-col {
        color: #fff !important
    }

        .content-teaser.one-col .content-teaser-img {
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            min-height: 0px;
            min-width: 0px;
            width: calc(100% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem
        }

        .content-teaser.one-col .content-block h3 {
            font-size: 1.25rem
        }

        .content-teaser.one-col .content-block .heading-4, .content-teaser.one-col .content-block .body-1, .content-teaser.one-col .content-block a {
            color: #fff !important
        }

    .content-teaser .content {
        -ms-flex-positive: 1;
        flex-grow: 1
    }

        .content-teaser .content h2, .content-teaser .content .body-1 {
            width: calc(50% - 1.75rem);
            margin-right: .875rem;
            margin-left: .875rem
        }

    .kitchen-listing .list-tiles .tile h3 {
        font-size: 1.25rem
    }

    .kitchen-listing .checkbox-image + label {
        padding: 0 15px
    }

    .content-teaser.one-col .content-block .heading-4 {
        font-size: 1.25rem
    }

    .kitchen-style .kitchen-details .w-media img {
        margin: 0 auto
    }

    .editorial-text-media .section-container .content-block {
        padding: 40px 0
    }

    .status, .load-more-section a, .editorial-text-media.variant-b .content-block h2, .editorial-text-media.variant-b .content-block p, .editorial-text-media.variant-b .content-block li, .editorial-text-media.variant-b .content-block .body-1, .hero-homepage .content-container .content h1, .hero-homepage .content-container .content .body-1, .hero-listing-products .subsection h1, .hero-editorial .content-container .content .label, .hero-editorial .content-container .content h1, .hero-editorial .content-container .content .body-1, .product-detail .product-images .item-tag, .cta.primary {
        color: #fff !important
    }

    .cta.disabled {
        color: #c8c8c8 !important
    }

    .image-gallery.two-image .gallery-block.column {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

    .video-component .column {
        background: none
    }

        .video-component .column .content h2, .video-component .column .content p {
            color: #fff !important
        }

        .video-component .column .video-img {
            background: none;
            padding-bottom: 45%
        }

            .video-component .column .video-img img {
                height: 300px
            }

            .video-component .column .video-img::after {
                height: 75%
            }

    .editorial-key-messages .content, .editorial-key-messages .content-copy {
        width: calc(50% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

    .form .common, .form form {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0px;
        min-width: 0px;
        width: calc(100% - 1.75rem);
        margin-right: .875rem;
        margin-left: .875rem
    }

    .form .w-brochures .brochure {
        margin-bottom: 25px;
        margin-top: 40px
    }

    .depot-contact .cta, .depots .cta.primary {
        color: #28343d !important
    }

    .maps-wrapper img {
        display: block;
        max-width: none !important
    }
}
/* Marks*/
footer.container.cream {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
/*  New Colours */
.charcoal {
    background-color: #28343D;
    color: #fff;
}

.charcoal-grad {
    background-image: linear-gradient(#394A57, #28343D);
    color: #fff;
}

.cream {
    background-color: #F5F5F5;
}
.grey {
    background-color: #D8D8D8;
}
.light-grey {
    background-color: #999999;
}

.mid-grey {
    background-color: #71777B;
}

.orange {
    background-color: #FE7710;
}

.orange-grad {
    background-color: #FE7710; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #ECA634, #FE7710); /* Standard syntax (must be last) */
    color: #fff;
}

.red {
    background-color: #c20016;
}

.red-grad {
    background-color: #c20016; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #c20016, #b50014); /* Standard syntax (must be last) */
    color: #fff;
}

.red-text {
    color: #BC0015;
}

/* For #F1F1F1 backgrounds palette */

.greybgone {
    background-color: #F1F1F1 !important;
}

.greybgone-10 {
    background-color: rgba(241,241,241,0.10) !important;
}

.greybgone-25 {
    background-color: rgba(241,241,241,0.25) !important;
}

.greybgone-50 {
    background-color: rgba(241,241,241,0.5) !important;
}

.greybgone-75 {
    background-color: rgba(241,241,241,0.75) !important;
}

.greybgone-90 {
    background-color: rgba(241,241,241,0.9) !important;
}

/* For #DEDEDE backgrounds palette */

.greybgtwo {
    background-color: #DEDEDE !important;
}

.greybgtwo-10 {
    background-color: rgba(222,222,222,0.10) !important;
}

.greybgtwo-25 {
    background-color: rgba(222,222,222,0.25) !important;
}

.greybgtwo-50 {
    background-color: rgba(222,222,222,0.5) !important;
}

.greybgtwo-75 {
    background-color: rgba(222,222,222,0.75) !important;
}

.greybgtwo-90 {
    background-color: rgba(222,222,222,0.9) !important;
}


/* For #D8D8D8 backgrounds palette */

.greybgthree {
    background-color: #D8D8D8 !important;
}

.greybgthree-10 {
    background-color: rgba(216,216,216,0.10) !important;
}

.greybgthree-25 {
    background-color: rgba(216,216,216,0.25) !important;
}

.greybgthree-50 {
    background-color: rgba(216,216,216,0.5) !important;
}

.greybgthree-75 {
    background-color: rgba(216,216,216,0.75) !important;
}

.greybgthree-90 {
    background-color: rgba(216,216,216,0.9) !important;
}

/* For #999999 backgrounds palette */

.greybgfour {
    background-color: #999999 !important;
}

.greybgfour-10 {
    background-color: rgba(153,153,153,0.10) !important;
}

.greybgfour-25 {
    background-color: rgba(153,153,153,0.25) !important;
}

.greybgfour-50 {
    background-color: rgba(153,153,153,0.5) !important;
}

.greybgfour-75 {
    background-color: rgba(153,153,153,0.75) !important;
}

.greybgfour-90 {
    background-color: rgba(153,153,153,0.9) !important;
}


/* For #71777B backgrounds palette */

.greybgfive {
    background-color: #71777B !important;
}

.greybgfive-10 {
    background-color: rgba(113,119,123,0.10) !important;
}

.greybgfive-25 {
    background-color: rgba(113,119,123,0.25) !important;
}

.greybgfive-50 {
    background-color: rgba(113,119,123,0.5) !important;
}

.greybgfive-75 {
    background-color: rgba(113,119,123,0.75) !important;
}

.greybgfive-90 {
    background-color: rgba(113,119,123,0.9) !important;
}


/* For #28343D backgrounds palette */

.greybgsix {
    background-color: #28343D !important;
}

.greybgsix-10 {
    background-color: rgba(40,52,61,0.10) !important;
}

.greybgsix-25 {
    background-color: rgba(40,52,61,0.25) !important;
}

.greybgsix-50 {
    background-color: rgba(40,52,61,0.5) !important;
}

.greybgsix-75 {
    background-color: rgba(40,52,61,0.75) !important;
}

.greybgsix-90 {
    background-color: rgba(40,52,61,0.9) !important;
}




.container.charcoal {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

.container.cream {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

.container.light-grey {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

/*   xxxxxxxxxx   */

.investor-bottom-boxes {
    padding-top: 15px;
    padding-bottom: 15px;
}

.home-white-area {
    padding-top: 50px;
    padding-bottom: 50px;
}

.home-mission-statement {
    /*padding-top: 70px;
    padding-bottom: 70px; */
    background-color: #F5F5F5;
}

.home-latest-report {
    background-color: #71777B;
}

.footer {
    margin-top: -1.5rem;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.home-mission-statement h3 {
    text-align: center;
    /*  display: block; */
    border-bottom: solid;
    border-bottom-width: 1px;
    padding-bottom: 1rem;
}

.home-mission-statement blockquote {
    margin: 0 1rem 1rem 1rem;
    padding: 2rem 10rem 2rem 10rem;
    border-left: none;
    font-size: 1.8rem;
    letter-spacing: -0.05rem;
    font-weight: bold;
    text-align: justify;
}

.home-latest-report ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: white;
    line-height: 40px;
    height: 100%;
    align-items: stretch;
}

.home-latest-report li {
    list-style: none;
    margin: 0;
}

    .home-latest-report li.download-icon {
        padding: 10px;
        background: #5CA41E;
        color: white;
        border-right: 1px solid white;
        height: 100%;
        align-self: center;
    }

/*  Red, Charcoal & Mid Grey boxes using Flex cards  */
        
/*  squares off corners from standard 0.25rem setting */
.card {
    border-radius: 0rem;
}

    .card.red, .card.charcoal, .card.mid-grey {
        color: #fff;
    }

.t-b-padded {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.t-b-half-padded {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.dark-rounded-button {
    background: #28343D;
    border: none;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    font-size: .6875rem;
    letter-spacing: 0.02em;
    padding: 8px 30px;
    text-align: center;
    text-transform: uppercase;
}

    .dark-rounded-button:hover, .large-dark-rounded-button:hover {
        background: #BBBBBB;
        text-decoration: none;
    }

.large-dark-rounded-button {
    background: #28343D;
    border: none;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    font-size: .6875rem;
    letter-spacing: 0.02em;
    padding: 8px 30px;
    width: auto;
    text-align: center;
    display: block;
    text-transform: uppercase;
}

    .large-dark-rounded-button *,
    .dark-rounded-button * {
        color: #FFF !important;
        margin: 0 !important;
    }

    .large-dark-rounded-button a,
    .dark-rounded-button a {
        display: block;
    }

    .large-dark-rounded-button p {
        margin: 0;
    }

    .marks-text-box {
        position: absolute;
        bottom: 30px;
        right: 50px;
        padding: 10px 15px;
        width: 50%;
        color: #fff;
        background-color: rgba(40,52,61,.5);
    }

.banner-text-box {
    position: absolute;
    bottom: 5%;
    right: 2.5%;
}

.container {
    max-width: 1600px !important
}

.component__wrapper-grid {
    box-sizing: border-box;
    margin: 0 0 !important;
    max-width: 1600px;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.card {
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    padding-left: 0px;
    padding-right: 0px;
}

.masonry-image {
    object-fit: cover;
}

.masonry-left {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top: .5rem;
    padding-left: 2rem;
    padding-bottom: .5rem;
    color: #fff;
    background-color: rgba(40,52,61,.7);
    text-align: left;
}

    .masonry-left a {
        background: #fff;
        border: none;
        border-radius: 24px;
        color: #000;
        cursor: pointer;
        font-size: .6875rem;
        letter-spacing: 0.02em;
        text-align: center;
        text-transform: uppercase;
        float: right;
        margin-right: 1rem;
        margin-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

.masonry-centered {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #fff;
    background-color: rgba(40,52,61,.7);
    text-align: center;
}

.two-col-text {
    column-count: 2;
    column-width: 45%;
}

.shadow-line {
    background-image: url('images/shadow-line.png'); /* The image used */
    background-position: bottom; /* position the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.background-band {
    position: relative;
}

    .background-band::before {
        content: "";
        display: block;
        position: absolute;
        top: 50px;
        bottom: -50px;
        left: 0px;
        right: 0;
        /* background-image: url('images/bg-band.png'); The image used */
        background-image: linear-gradient(#F1F1F1, #F1F1F1);
    }

    @media (min-width: 992px) {
        .background-band::before {
            bottom: 50px;
        }
    }

    .background-band .container {
        position: relative;
    }

    .text-on-band {
        height: 60% !important;
        vertical-align: middle;
        margin-top: 2rem;
    }

.band-image {
    margin-top: -2rem;
}

ul.tab-links {
    margin: 0px;
    padding: 0px;
}

ul.tab-links li {
    color: black;
    list-style: none;
    display: inline;
    margin-left: 0;
    margin-right: 2rem;
    font-family: "Rooster", sans-serif;
    font-weight: normal !important;
    font-size: 1rem;
    cursor: pointer;
}

.band-tabs li {
    color: black;
    list-style: none;
    display: inline;
    margin-left: 1rem;
    margin-right: 10px;
    font-weight: 300;
    font-family: "Rooster", sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

li.band-tabs.active {
    color: #c20016 !important;
}

li.band-tabs:before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
    color: #c20016;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    height: 16px;
    padding-right: 5px;
    left: 12px;
    top: 1px;
    width: 20px;
    margin-right: 10px;
    list-style: none;
}

li.band-tabs.active:before {
    font-family: "icon-howdens";
    line-height: 1;
    text-transform: none;
    content: '\e901';
    font-size: .625rem;
    transition: transform 675ms ease;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transform: translateY(0) rotate(90deg);
    transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
    color: #c20016;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    height: 18px;
    margin-right: 10px;
    left: 12px;
    top: 1px;
    width: 20px;
    list-style: none;
}

@media print, screen and (max-width: 80em) {
    ul.tab-links li {
        width: 100%;
        display: block;
    }
}

@media print, screen and (max-width: 80em) {
    .marks-text-box {
        display: block;
        overflow-x: auto;
        position: relative;
        bottom: 0px;
        right: 0px;
        padding: 10px 15px;
        width: 100%;
        color: #fff;
        background-color: rgba(40,52,61,.5);
    }
}

@media print, screen and (max-width: 80em) {
    .background-band {
        padding-bottom: 30em;
        background-color: #F1F1F1;
        bottom: 5em;
        padding: 10px 0px;
        display: inline;
        position: relative;
        clear: both;
    }
}

@media print, screen and (max-width: 80em) {
    .band-image {
        display: block;
        width: 80%;
        clear: both;
        margin-top: 2rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media print, screen and (max-width: 80em) {
    .inner-band {
        display: block;
        clear: both;
        margin-top: 5rem;
    }
}

@media print, screen and (max-width: 80em) {
    .clearing {
        clear: both;
        display: block;
        position: absolute;
    }
}
/*
@media print, screen and (max-width: 80em) {
    .background-band {
        padding-bottom: 30em;
        background-color: #F1F1F1;
        position: absolute;
        bottom: 5em;
        right: 50px;
        padding: 10px 15px;
        width: 50%;
        color: #fff;
        background-color: rgba(40,52,61,.5);
    }
}
*/
.home-mission-statement blockquote {
    margin: 0 1rem 1rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
    border-left: none;
    font-size: 1.4rem;
    letter-spacing: -0.05rem;
    font-weight: bold;
    text-align: unset;
}

@media (max-width: 576px) {
    .card-deck {
        margin-right: 0px;
        margin-left: 0px;
        padding-left: 1px;
        padding-left: 1px;
    }
}

.howden-card {
    min-height: 300px;
}

@media (max-width: 992px) {
    .howden-card {
        min-height: 150px;
    }

    .card-deck .card {
        flex: 0 0 95% !important;
    }

}

    .howden-card h1 {
        font-size: 5rem;
    }


    .zero-space {
        padding: 0px !important;
        margin: 0px !important;
    }

    .five-space {
        padding: 0px !important;
        margin: 5px !important;
    }


    @media (max-width: 576px) {
        .zero-space {
            padding: 0px !important;
        }

        .five-space {
            padding: 0px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            margin-top: 10px !important;
            margin-bottom: 10px !important;
        }
    }
    /*  Styling for tabs on Factsheet page    */
    ul.factsheet-links li {
        color: black;
        list-style: none;
        display: inline;
        margin-left: 0rem;
        margin-right: 1rem;
        font-family: "Rooster", sans-serif;
        font-weight: 600;
        font-size: 15px;
    }

    .factsheet-links {
        margin-left: 0px !important;
    }

    @media print, screen and (max-width: 80em) {
        ul .factsheet-links li {
            width: 100%;
            display: block;
        }
    }




    .factsheet-tabs li {
        color: black;
        list-style: none;
        display: inline;
        margin-left: 1rem;
        margin-right: 10px;
        font-weight: 600;
        font-family: "Rooster", sans-serif;
        font-size: 15px;
    }

    li.factsheet-tabs.active {
        color: red;
        list-style: none;
        display: inline;
        margin-left: 0rem;
        font-family: "Rooster", sans-serif;
        font-weight: 600;
        font-size: 15px;
    }

    li.factsheet-tabs:before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
        color: #c20016;
        display: inline-block;
        font-size: 1rem;
        font-weight: 700;
        height: 16px;
        padding-right: 5px;
        left: 12px;
        top: 1px;
        width: 20px;
        margin-right: 10px;
        list-style: none;
    }

    li.factsheet-tabs.active:before {
        font-family: "icon-howdens";
        line-height: 1;
            text-transform: none;
        content: '\e901';
        font-size: .625rem;
        transition: transform 675ms ease;
        transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transform: translateY(0) rotate(90deg);
        transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
        color: #c20016;
        display: inline-block;
        font-size: 1rem;
        font-weight: 700;
        height: 18px;
        margin-right: 10px;
        left: 12px;
        top: 1px;
        width: 20px;
        list-style: none;
    }

    .row.factsheet-row {
        padding-left: 10rem;
        padding-right: 10rem;
    }
    /*  Styling for tabs on Factsheet page ends  */
    /* Factsheet */

    caption {
        display: none;
    }

    table.factFinances {
        margin-bottom: 1rem;
    }

        table.factFinances td, table.factFinances th {
            padding: 15px;
            border-bottom: 1px solid #fff;
        }

    table.threeData th {
        background: #c20016;
        color: #fff;
    }

    .aRed {
        color: #c20016;
    }

    table.factFinances th.factStrong2 {
        background: #c20016;
        color: #fff;
    }

    table.factFinances th.factStrong2Grey {
        background: #DEDEDE;
        color: #000;
        font-weight: 700;
        font-size: 1.75rem;
    }

    table.factFinances th.factStrong {
        background: #F1F1F1;
        color: #000;
        text-align: left;
        padding-left: 1em;
        font-weight: normal;
    }

    table.factFinances th.factStrongGrey {
        background: #DEDEDE;
        color: #000;
        text-align: left;
        padding-left: 1em;
        font-weight: 700;
        font-size: 1.75rem;
    }

    ul.factsheet-list,
    ul.factsheet-list li {
        list-style: none;
        font-size: 1.125rem;
        position: relative;
        padding-bottom: .5rem;
    }

    .stroke:before {
        font-family: "icon-howdens";
        content: '\e901';
        font-size: 1rem;
        color: #c20016;
        display: inline-block;
        font-weight: 700;
        height: 18px;
        margin-right: 10px;
        top: 3px;
        width: 20px;
        position: absolute;
        left: -20px;
    }

    .grey-keyline {
        border-top: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
    }
    /*test*/



    /* Miniquote */

    .MiniQuote [class*="col-"] {
        padding-left: 0;
        padding-right: 5px;
    }


    /* news-tabe */
    .news-tabs .news-tabs-ul .tablinks {
        padding: 0px !important;
    }

        .news-tabs .news-tabs-ul .tablinks a.active {
            background: #F1F1F1;
        }

    /* FAQ Tabs */

    /*

ul.tabNavigation {
    margin: 0px 0px 2rem 0px;
    padding: 0px;
    list-style: none;
    border-bottom: 1px solid #d8d8d8;
    font-size: 1.1428rem;
}

    ul.tabNavigation li {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

        ul.tabNavigation li a, ul.tabNavigation li a:link, ul.tabNavigation li a:visited {
            display: block;
            padding: 0.5rem 1em;
            background: #fff !important;
            color: #71777b;
            line-height: 1.33;
            font-weight: 700;
            text-decoration: none !important;
            border-bottom: 0px !important;
        }

            ul.tabNavigation li a:hover, ul.tabNavigation li a:active, .ShareholderFAQS ul.tabNavigation li a#Current {
                background: #fff !important;
                color: #c20016;
                text-decoration: underline !important;
            }
*/

    .accordion-tab {
        position: relative;
        margin-bottom: 1px;
        width: 100%;
        overflow: hidden;
    }

        .accordion-tab input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .accordion-tab label {
            position: relative;
            display: block;
            padding: 0 0 0 1em;
            font-weight: 700;
            line-height: 3;
            cursor: pointer;
            color: #28343d;
            font-size: 1.2rem;
            border-bottom: 1px solid #d8d8d8;
            background-color: #fff;
            -moz-transition: background 0.6s ease-in-out;
            -webkit-transition: background 0.6s ease-in-out;
            -o-transition: background 0.6s ease-in-out;
            transition: background 0.6s ease-in-out;
        }

            .accordion-tab label:hover, .accordion-tab label:focus {
                background-color: #fff;
            }

        .accordion-tab.blue label {
            background: #2980b9;
        }

        .accordion-tab .tab-content {
            max-height: 0;
            overflow: hidden;
            background: #fff;
            -webkit-transition: max-height .35s;
            -o-transition: max-height .35s;
            transition: max-height .35s;
        }

        .accordion-tab.blue .tab-content {
            background: #3498db;
        }

        .accordion-tab .tab-content .content-inner {
            padding: 1em;
        }

        /* :checked */
        .accordion-tab input:checked ~ .tab-content {
            max-height: 100%;
        }
        /* Icon */
        .accordion-tab label::after {
            font-family: icon-howdens;
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 3em;
            height: 3em;
            line-height: 3;
            text-align: center;
            -webkit-transition: all .35s;
            -o-transition: all .35s;
            transition: all .35s;
            transform: rotate(90deg);
        }

        .accordion-tab input[type=checkbox] + label::after {
            content: "\e901";
        }

        .accordion-tab input[type=radio] + label::after {
            content: "\e901";
        }

        .accordion-tab input[type=checkbox]:checked + label::after {
            transform: rotate(270deg);
            color: #c20016;
        }

        .accordion-tab input[type=radio]:checked + label::after {
            transform: rotate(270deg);
            color: #c20016;
        }

    /* FAQ news-tabb link styling*/
    .faq {
        font-weight: 700;
        line-height: 2;
        font-size: 1rem;
    }

        .faq a:hover {
            background: #D8D8D8;
            font-weight: 700;
            line-height: 2;
            font-size: 1rem;
        }

        .faq a:active {
            background: #5CA41E;
            color: #fff;
            font-weight: 700;
            line-height: 2;
            font-size: 1rem;
        }

    .faq-selected a {
        background: #5CA41E;
        color: #fff !important;
        font-weight: 700;
        line-height: 2;
        font-size: 1rem;
    }

    html {
        letter-spacing: .01px;
    }

    .red-text-box {
        background: #BC0015;
        display: inline-block;
        color: #FFF;
        padding: 10px;
        line-height: 1;
    }

    .nav-link {
        color: #28343d;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: #28343d;
        text-decoration: underline;
    }

    .howden-card *,
        .greybgfour *,
        .faq-selected a {
        text-shadow: 0.005rem 0.005rem #000;
    }


    .table-borderless td.a {
        border-bottom: 1px solid !important;
    }

    .table-borderless td.aa {
        border-bottom: 2px solid !important;
    }

    .table-borderless td.aaa {
        border-bottom: 3px double !important;
    }

    .table-borderless td.at {
        border-top: 1px solid !important;
    }

    .table-borderless td.aat {
        border-top: 2px solid !important;
    }

    .table-borderless td.aat {
        border-top: 3px double !important;
    }

    .table-borderless td.al {
        border-left: 1px solid !important;
    }

    .table-borderless td.aal {
        border-left: 2px solid !important;
    }

    .table-borderless td.aaal {
        border-left: 3px double !important;
    }

    .table-borderless td.ar {
        border-right: 1px solid !important;
    }

    .table-borderless td.aar {
        border-right: 2px solid !important;
    }

    .table-borderless td.aaar {
        border-right: 3px double !important;
    }

    @media screen and (min-width: 80em) {

        .nav-item .nav-link:hover,
        .nav-link:focus {
            color: #fff;
        }
    }

    body.sfPageEditor header.header {
        height: auto;
        position: relative;
        top: auto;
        min-height: 56px;
        height: auto;
        z-index: 3
    }

    #back-top {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 999999 !important;
    }

    #back-top a {
        display: block;
        color: #c20016;
        padding: 0.6rem 1.5rem;
        border-radius: 100%;
        text-decoration: none;
        font-size: 2rem;
        text-shadow: 0.005rem 0.005rem #FFF;
    }

    .banner-text-box {
        position: absolute;
        bottom: 5%;
        right: 2.5%;
        left: 2.5%;
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .masonry-image:not(.ie11) {
          width: 100%;
          height: auto;
          max-height: 398px;
        }
        
        .masonry-image.ie11 {
          width: auto;
          height: 100%;
        }
      }

      @media all and (max-width: 1600px) {
        .masonry-image:not(.ie11) {
          max-height: none !important;
        }
      }

    @media (max-width: 992px) {
        .card-deck {
            margin-left: 0;
            margin-right: 0;
        }

        .card-deck .card {
            flex: 0 0 100% !important;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }


/* For mobile */

@media screen and (max-width: 900px) {
    .banner-text-box p {
        display: none;
    }
}


@media screen and (max-width: 900px) {
    .banner-text-box {
        display: none;
    }
}