@font-face {
    font-display: swap;
    font-family: "Sun Valley";
    src: url(/assets/fonts/sun-valley/sun-valley.eot);
    src: url(/assets/fonts/sun-valley/sun-valley.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/sun-valley/sun-valley.woff) format("woff"), url(/assets/fonts/sun-valley/sun-valley.ttf) format("truetype"), url("/assets/fonts/sun-valley/sun-valley.svg#Sun Valley") format("svg");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal
}

.j-rb-image {
	width: 100% !important;
}

html {
    background: #fff;
    color: #000;
    font: 400 16px/1.8 "Open Sans", Helvetica, Arial, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

a {
    background: 0 0
}

a:active,
a:hover {
    outline: 0
}

.f-link,
a {
    color: #000;
    cursor: pointer;
    text-decoration: underline
}

.f-link:hover,
a:hover {
    color: #951618;
    text-decoration: underline
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

:not(pre)>code,
:not(pre)>kbd,
:not(pre)>samp {
    background-color: #eee;
    border: 1px solid #d5d4d4;
    color: #d05;
    font-family: Consolas, monospace, serif;
    font-size: 14px;
    padding: 0 4px;
    white-space: nowrap
}

em {
    color: #d05
}

ins {
    background: #ffa;
    color: #000;
    text-decoration: none
}

mark {
    background: #ffa;
    color: #000
}

q {
    font-style: italic
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

audio,
canvas,
img,
svg,
video {
    box-sizing: border-box;
    max-width: 100%
}

.f-img-preserve,
.f-img-preserve audio,
.f-img-preserve canvas,
.f-img-preserve img,
.f-img-preserve svg,
.f-img-preserve video {
    max-width: none
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

address,
blockquote,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
    margin: 0 0 20px
}

*+address,
*+blockquote,
*+dl,
*+fieldset,
*+figure,
*+ol,
*+p,
*+pre,
*+ul {
    margin-top: 20px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    margin: 0 0 20px;
    text-transform: none
}

h1>.material-icons,
h2>.material-icons,
h3>.material-icons,
h4>.material-icons,
h5>.material-icons,
h6>.material-icons {
    font-size: inherit
}

*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6 {
    margin-top: 30px
}

.f-h1,
h1 {
    font-size: 1.625rem;
    line-height: 1.2
}

@media screen and (min-width:480px) {

    .f-h1,
    h1 {
        font-size: calc(26px + 10 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {

    .f-h1,
    h1 {
        font-size: 2.25rem
    }
}

.f-h2,
h2 {
    font-size: 1.25rem;
    line-height: 1.3
}

@media screen and (min-width:480px) {

    .f-h2,
    h2 {
        font-size: calc(20px + 4 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {

    .f-h2,
    h2 {
        font-size: 1.5rem
    }
}

.f-h3,
h3 {
    font-size: 1.125rem;
    line-height: 1.4
}

.f-h4,
h4 {
    font-size: 1rem;
    line-height: 1.4
}

.f-h5,
h5 {
    font-size: .875rem;
    line-height: 1.4
}

.f-h6,
h6 {
    font-size: .75rem;
    line-height: 1.5
}

ol,
ul {
    padding-left: 30px
}

ol>li>ol,
ol>li>ul,
ul>li>ol,
ul>li>ul {
    margin: 0
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    box-sizing: content-box;
    height: 0;
    margin: 20px 0
}

address {
    font-style: normal
}

blockquote {
    border-left: 5px solid #000;
    font-size: 24px;
    font-style: italic;
    line-height: 29px;
    padding-left: 20px
}

pre {
    background: #eee;
    color: #222;
    font: 400 12px/18px Consolas, monospace, serif;
    overflow: auto;
    padding: 10px;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

::-moz-selection {
    background: #20a5de;
    color: #fff;
    text-shadow: none
}

::selection {
    background: #20a5de;
    color: #fff;
    text-shadow: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block
}

progress {
    vertical-align: baseline
}

[hidden],
audio:not([controls]),
template {
    display: none
}

iframe {
    border: 0
}

@media screen and (max-width:400px) {
    @-ms-viewport {
        width: device-width
    }
}

.f-article a[data-visited]:not(.f-thumbnail) {
    color: #1a84b1;
    text-decoration: none
}

.f-article a[data-visited]:not(.f-thumbnail):hover {
    text-decoration: underline
}

.f-article a[data-visited]:not(.f-thumbnail):after {
    font-size: .75rem;
    color: #eee;
    content: " check "attr(data-visited);
    font-family: Material Icons
}

.f-article:after,
.f-article:before {
    content: '';
    display: table
}

.f-article:after {
    clear: both
}

.f-article>:last-child {
    margin-bottom: 0
}

.f-article+.f-article {
    margin-top: 25px
}

.f-article-title {
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
    margin-bottom: 0;
    text-transform: none
}

.f-article-title+.f-article-meta {
    margin-top: 0
}

.f-article-title a {
    color: inherit;
    text-decoration: none
}

.f-article-meta {
    color: #999;
    font-size: 12px;
    line-height: 18px
}

.f-article-lead {
    color: #222;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px
}

.f-article-divider {
    margin-bottom: 25px
}

*+.f-article-divider {
    border-top: 1px solid #eee;
    margin-top: 25px
}

*+.f-article-divider.f-article {
    padding-top: 25px
}

[class*=f-column-] {
    -moz-column-gap: 20px;
    column-gap: 20px
}

.f-column-1-2 {
    -moz-column-count: 2;
    column-count: 2
}

.f-column-1-3 {
    -moz-column-count: 3;
    column-count: 3
}

.f-column-1-4 {
    -moz-column-count: 4;
    column-count: 4
}

.f-column-1-5 {
    -moz-column-count: 5;
    column-count: 5
}

.f-column-1-6 {
    -moz-column-count: 6;
    column-count: 6
}

@media screen and (min-width:480px) {
    .f-column-small-1-2 {
        -moz-column-count: 2;
        column-count: 2
    }

    .f-column-small-1-3 {
        -moz-column-count: 3;
        column-count: 3
    }

    .f-column-small-1-4 {
        -moz-column-count: 4;
        column-count: 4
    }

    .f-column-small-1-5 {
        -moz-column-count: 5;
        column-count: 5
    }

    .f-column-small-1-6 {
        -moz-column-count: 6;
        column-count: 6
    }
}

.f-flex {
    display: flex
}

.f-flex>.f-container {
    width: 100%
}

.f-flex:after,
.f-flex:before {
    display: none !important
}

.f-flex-inline {
    display: inline-flex
}

.f-flex-inline>*,
.f-flex>* {
    -ms-flex-negative: 1
}

.f-flex-top {
    align-items: flex-start
}

.f-flex-middle {
    align-items: center
}

.f-flex-bottom {
    align-items: flex-end
}

.f-flex-center {
    justify-content: center
}

.f-flex-right {
    justify-content: flex-end
}

.f-flex-space-between {
    justify-content: space-between
}

.f-flex-space-around {
    justify-content: space-around
}

.f-flex-self-bottom {
    align-self: flex-end
}

.f-flex-self-top {
    align-self: flex-start
}

.f-flex-self-middle {
    align-self: center
}

.f-flex-self-baseline {
    align-self: baseline
}

.f-flex-self-left {
    margin-right: auto
}

.f-flex-self-right {
    margin-left: auto
}

.f-flex-self-to-top {
    margin-bottom: auto
}

.f-flex-self-to-bottom {
    margin-top: auto
}

.f-flex-row-reverse {
    flex-direction: row-reverse
}

.f-flex-column {
    flex-direction: column
}

.f-flex-column-reverse {
    flex-direction: column-reverse
}

.f-flex-nowrap {
    flex-wrap: nowrap
}

.f-flex-wrap {
    flex-wrap: wrap
}

.f-flex-wrap-reverse {
    flex-wrap: wrap-reverse
}

.f-flex-wrap-top {
    align-content: flex-start
}

.f-flex-wrap-middle {
    align-content: center
}

.f-flex-wrap-bottom {
    align-content: flex-end
}

.f-flex-wrap-space-between {
    align-content: space-between
}

.f-flex-wrap-space-around {
    align-content: space-around
}

.f-flex-grow>* {
    flex-grow: 1
}

.f-flex-order-first {
    order: -1
}

.f-flex-order-last {
    order: 99
}

@media screen and (max-width:766.99px) {
    .f-flex-order-first-small {
        order: -1
    }

    .f-flex-order-last-small {
        order: 99
    }
}

@media screen and (min-width:768px) and (max-width:960px) {
    .f-flex-order-first-medium {
        order: -1
    }

    .f-flex-order-last-medium {
        order: 99
    }
}

@media screen and (min-width:960px) and (max-width:1220px) {
    .f-flex-order-first-large {
        order: -1
    }

    .f-flex-order-last-large {
        order: 99
    }
}

.f-flex-item-none {
    flex: none
}

.f-flex-item-auto {
    flex: auto;
    -ms-flex-negative: 1
}

.f-flex-item-1 {
    flex: 1 1 auto
}

.ie9 .f-flex-fix {
    display: table;
    table-layout: fixed;
    width: 100%
}

.ie9 .f-flex-inline:not(.f-container),
.ie9 .f-flex:not(.f-container) {
    display: table-row
}

.ie9 .f-flex-inline:not(.f-container)>*,
.ie9 .f-flex:not(.f-container)>* {
    display: table-cell
}

.f-container {
    box-sizing: border-box;
    max-width: 980px;
    padding: 0 10px
}

.f-container:after,
.f-container:before {
    content: '';
    display: table
}

.f-container:after {
    clear: both
}

@media (min-width:1220px) {
    .f-container {
        max-width: 1390px;
        padding: 0 30px
    }
}

.f-container-center {
    margin-left: auto;
    margin-right: auto
}

.f-grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 0 -20px;
    padding: 0
}

.f-grid:after,
.f-grid:before {
    content: '';
    display: block;
    overflow: hidden
}

.f-grid:after {
    clear: both
}

.f-grid.f-grid-auto {
    margin-top: -20px
}

.f-grid.f-grid-auto>* {
    padding-top: 20px
}

.f-grid>* {
    flex: none;
    float: left;
    margin: 0;
    padding-left: 20px
}

.f-grid>*>*>:last-child {
    margin-bottom: 0
}

.f-grid+.f-grid,
.f-grid-margin,
.f-grid>*>.f-panel+.f-panel {
    margin-top: 20px
}

@media (min-width:1220px) {
    .f-grid {
        margin-left: -30px
    }

    .f-grid.f-grid-auto {
        margin-top: -30px
    }

    .f-grid.f-grid-auto>* {
        padding-top: 30px
    }

    .f-grid>* {
        padding-left: 30px
    }

    .f-grid+.f-grid,
    .f-grid-margin,
    .f-grid>*>.f-panel+.f-panel {
        margin-top: 30px
    }
}

.f-grid-collapse {
    margin-left: 0
}

.f-grid-collapse.f-grid-auto {
    margin-top: 0
}

.f-grid-collapse.f-grid-auto>* {
    padding-top: 0
}

.f-grid-collapse>* {
    padding-left: 0
}

.f-grid-collapse+.f-grid-collapse,
.f-grid-collapse>*>.f-panel+.f-panel,
.f-grid-collapse>.f-grid-margin {
    margin-top: 0
}

.f-grid-small {
    margin-left: -10px
}

.f-grid-small.f-grid-auto {
    margin-top: -10px
}

.f-grid-small.f-grid-auto>* {
    padding-top: 10px
}

.f-grid-small>* {
    padding-left: 10px
}

.f-grid-small+.f-grid-small,
.f-grid-small>*>.f-panel+.f-panel,
.f-grid-small>.f-grid-margin {
    margin-top: 10px
}

.f-grid-medium {
    margin-left: -20px
}

.f-grid-medium.f-grid-auto {
    margin-top: -20px
}

.f-grid-medium.f-grid-auto>* {
    padding-top: 20px
}

.f-grid-medium>* {
    padding-left: 20px
}

.f-grid-medium+.f-grid-medium,
.f-grid-medium>*>.f-panel+.f-panel,
.f-grid-medium>.f-grid-margin {
    margin-top: 20px
}

.f-grid-auto+.f-grid-auto {
    margin-top: 0
}

@media (min-width:768px) {
    .f-grid-divider:not(:empty) {
        margin-left: -20px;
        margin-right: -20px
    }

    .f-grid-divider>* {
        padding-left: 20px;
        padding-right: 20px
    }

    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-1-]:not(.f-width-1-1):nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-2-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-3-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-4-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-5-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-6-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-7-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-8-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-9-]:nth-child(n+2),
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-medium-]:not(.f-width-medium-1-1):nth-child(n+2) {
        border-left: 1px solid #eee
    }

    .f-grid-divider.f-grid-auto>[class*=f-width-1-]:not(.f-width-1-1):nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-2-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-3-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-4-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-5-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-6-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-7-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-8-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-9-]:nth-child(n+2),
    .f-grid-divider.f-grid-auto>[class*=f-width-medium-]:not(.f-width-medium-1-1):nth-child(n+2) {
        position: relative
    }

    .f-grid-divider.f-grid-auto>[class*=f-width-1-]:not(.f-width-1-1):nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-2-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-3-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-4-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-5-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-6-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-7-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-8-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-9-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-medium-]:not(.f-width-medium-1-1):nth-child(n+2):before {
        border-left: 1px solid #eee;
        content: '';
        height: calc(100% - 20px);
        left: 0;
        position: absolute;
        top: 20px
    }
}

@media (min-width:960px) {
    .f-grid-divider:not(.f-grid-auto)>[class*=f-width-large-]:not(.f-width-large-1-1):nth-child(n+2) {
        border-left: 1px solid #eee
    }

    .f-grid-divider.f-grid-auto>[class*=f-width-large-]:not(.f-width-large-1-1):nth-child(n+2) {
        position: relative
    }

    .f-grid-divider.f-grid-auto>[class*=f-width-large-]:not(.f-width-large-1-1):nth-child(n+2):before {
        border-left: 1px solid #eee;
        content: '';
        height: calc(100% - 20px);
        left: 0;
        position: absolute;
        top: 20px
    }
}

@media (min-width:1220px) {
    .f-grid-divider:not(:empty) {
        margin-left: -30px;
        margin-right: -30px
    }

    .f-grid-divider>* {
        padding-left: 30px;
        padding-right: 30px
    }

    .f-grid-divider:empty {
        margin-bottom: 30px;
        margin-top: 30px
    }

    .f-grid-divider.f-grid-auto>[class*=f-width-1-]:not(.f-width-1-1):nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-2-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-3-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-4-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-5-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-6-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-7-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-8-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-9-]:nth-child(n+2):before,
    .f-grid-divider.f-grid-auto>[class*=f-width-medium-]:not(.f-width-medium-1-1):nth-child(n+2):before {
        height: calc(100% - 30px);
        top: 30px
    }
}

.f-grid-divider:empty {
    border-top: 1px solid #eee;
    margin-bottom: 20px;
    margin-top: 20px
}

.f-grid-match>* {
    display: flex;
    flex-wrap: wrap
}

.f-grid-match>*>* {
    box-sizing: border-box;
    flex: none;
    width: 100%
}

[class*=f-grid-width]>*,
[class*=f-width] {
    box-sizing: border-box;
    width: 100%
}

[class*=f-pull-],
[class*=f-push-] {
    position: relative
}

.f-grid-width-1-1>* {
    width: 100%
}

.f-grid-width-1-2>* {
    width: 50%
}

.f-grid-width-1-3>* {
    width: 33.3333333333%
}

.f-grid-width-2-3>* {
    width: 66.6666666667%
}

.f-grid-width-1-4>* {
    width: 25%
}

.f-grid-width-3-4>* {
    width: 75%
}

.f-grid-width-1-5>* {
    width: 20%
}

.f-grid-width-2-5>* {
    width: 40%
}

.f-grid-width-3-5>* {
    width: 60%
}

.f-grid-width-4-5>* {
    width: 80%
}

.f-grid-width-1-6>* {
    width: 16.6666666667%
}

.f-grid-width-5-6>* {
    width: 83.3333333333%
}

.f-width-1-2 {
    width: 50%
}

.f-width-1-3 {
    width: 33.3333333333%
}

.f-width-2-3 {
    width: 66.6666666667%
}

.f-width-1-4 {
    width: 25%
}

.f-width-3-4 {
    width: 75%
}

.f-width-1-5 {
    width: 20%
}

.f-width-2-5 {
    width: 40%
}

.f-width-3-5 {
    width: 60%
}

.f-width-4-5 {
    width: 80%
}

.f-width-1-6 {
    width: 16.6666666667%
}

.f-width-5-6 {
    width: 83.3333333333%
}

@media (min-width:480px) {
    .f-grid-width-small-1-1>* {
        width: 100%
    }

    .f-grid-width-small-1-2>* {
        width: 50%
    }

    .f-grid-width-small-1-3>* {
        width: 33.3333333333%
    }

    .f-grid-width-small-2-3>* {
        width: 66.6666666667%
    }

    .f-grid-width-small-1-4>* {
        width: 25%
    }

    .f-grid-width-small-3-4>* {
        width: 75%
    }

    .f-grid-width-small-1-5>* {
        width: 20%
    }

    .f-grid-width-small-2-5>* {
        width: 40%
    }

    .f-grid-width-small-3-5>* {
        width: 60%
    }

    .f-grid-width-small-4-5>* {
        width: 80%
    }

    .f-grid-width-small-1-6>* {
        width: 16.6666666667%
    }

    .f-grid-width-small-5-6>* {
        width: 83.3333333333%
    }
}

@media (min-width:768px) {
    .f-grid-width-medium-1-1>* {
        width: 100%
    }

    .f-grid-width-medium-1-2>* {
        width: 50%
    }

    .f-grid-width-medium-1-3>* {
        width: 33.3333333333%
    }

    .f-grid-width-medium-2-3>* {
        width: 66.6666666667%
    }

    .f-grid-width-medium-1-4>* {
        width: 25%
    }

    .f-grid-width-medium-3-4>* {
        width: 75%
    }

    .f-grid-width-medium-1-5>* {
        width: 20%
    }

    .f-grid-width-medium-2-5>* {
        width: 40%
    }

    .f-grid-width-medium-3-5>* {
        width: 60%
    }

    .f-grid-width-medium-4-5>* {
        width: 80%
    }

    .f-grid-width-medium-1-6>* {
        width: 16.6666666667%
    }

    .f-grid-width-medium-5-6>* {
        width: 83.3333333333%
    }
}

@media (min-width:960px) {
    .f-grid-width-large-1-1>* {
        width: 100%
    }

    .f-grid-width-large-1-2>* {
        width: 50%
    }

    .f-grid-width-large-1-3>* {
        width: 33.3333333333%
    }

    .f-grid-width-large-2-3>* {
        width: 66.6666666667%
    }

    .f-grid-width-large-1-4>* {
        width: 25%
    }

    .f-grid-width-large-3-4>* {
        width: 75%
    }

    .f-grid-width-large-1-5>* {
        width: 20%
    }

    .f-grid-width-large-2-5>* {
        width: 40%
    }

    .f-grid-width-large-3-5>* {
        width: 60%
    }

    .f-grid-width-large-4-5>* {
        width: 80%
    }

    .f-grid-width-large-1-6>* {
        width: 16.6666666667%
    }

    .f-grid-width-large-5-6>* {
        width: 83.3333333333%
    }
}

@media (min-width:1220px) {
    .f-grid-width-xlarge-1-1>* {
        width: 100%
    }

    .f-grid-width-xlarge-1-2>* {
        width: 50%
    }

    .f-grid-width-xlarge-1-3>* {
        width: 33.3333333333%
    }

    .f-grid-width-xlarge-2-3>* {
        width: 66.6666666667%
    }

    .f-grid-width-xlarge-1-4>* {
        width: 25%
    }

    .f-grid-width-xlarge-3-4>* {
        width: 75%
    }

    .f-grid-width-xlarge-1-5>* {
        width: 20%
    }

    .f-grid-width-xlarge-2-5>* {
        width: 40%
    }

    .f-grid-width-xlarge-3-5>* {
        width: 60%
    }

    .f-grid-width-xlarge-4-5>* {
        width: 80%
    }

    .f-grid-width-xlarge-1-6>* {
        width: 16.6666666667%
    }

    .f-grid-width-xlarge-5-6>* {
        width: 83.3333333333%
    }
}

@media (min-width:480px) {
    .f-width-small-1-1 {
        width: 100%
    }

    .f-width-small-1-2 {
        width: 50%
    }

    .f-width-small-1-3 {
        width: 33.3333333333%
    }

    .f-width-small-2-3 {
        width: 66.6666666667%
    }

    .f-width-small-1-4 {
        width: 25%
    }

    .f-width-small-3-4 {
        width: 75%
    }

    .f-width-small-1-5 {
        width: 20%
    }

    .f-width-small-2-5 {
        width: 40%
    }

    .f-width-small-3-5 {
        width: 60%
    }

    .f-width-small-4-5 {
        width: 80%
    }

    .f-width-small-1-6 {
        width: 16.6666666667%
    }

    .f-width-small-5-6 {
        width: 83.3333333333%
    }
}

@media (min-width:768px) {
    .f-width-medium-1-1 {
        width: 100%
    }

    .f-width-medium-1-2 {
        width: 50%
    }

    .f-width-medium-1-3 {
        width: 33.3333333333%
    }

    .f-width-medium-2-3 {
        width: 66.6666666667%
    }

    .f-width-medium-1-4 {
        width: 25%
    }

    .f-width-medium-3-4 {
        width: 75%
    }

    .f-width-medium-1-5 {
        width: 20%
    }

    .f-width-medium-2-5 {
        width: 40%
    }

    .f-width-medium-3-5 {
        width: 60%
    }

    .f-width-medium-4-5 {
        width: 80%
    }

    .f-width-medium-1-6 {
        width: 16.6666666667%
    }

    .f-width-medium-5-6 {
        width: 83.3333333333%
    }
}

@media (min-width:960px) {
    .f-width-large-1-1 {
        width: 100%
    }

    .f-width-large-1-2 {
        width: 50%
    }

    .f-width-large-1-3 {
        width: 33.3333333333%
    }

    .f-width-large-2-3 {
        width: 66.6666666667%
    }

    .f-width-large-1-4 {
        width: 25%
    }

    .f-width-large-3-4 {
        width: 75%
    }

    .f-width-large-1-5 {
        width: 20%
    }

    .f-width-large-2-5 {
        width: 40%
    }

    .f-width-large-3-5 {
        width: 60%
    }

    .f-width-large-4-5 {
        width: 80%
    }

    .f-width-large-1-6 {
        width: 16.6666666667%
    }

    .f-width-large-5-6 {
        width: 83.3333333333%
    }
}

@media (min-width:1220px) {
    .f-width-xlarge-1-1 {
        width: 100%
    }

    .f-width-xlarge-1-2 {
        width: 50%
    }

    .f-width-xlarge-1-3 {
        width: 33.3333333333%
    }

    .f-width-xlarge-2-3 {
        width: 66.6666666667%
    }

    .f-width-xlarge-1-4 {
        width: 25%
    }

    .f-width-xlarge-3-4 {
        width: 75%
    }

    .f-width-xlarge-1-5 {
        width: 20%
    }

    .f-width-xlarge-2-5 {
        width: 40%
    }

    .f-width-xlarge-3-5 {
        width: 60%
    }

    .f-width-xlarge-4-5 {
        width: 80%
    }

    .f-width-xlarge-1-6 {
        width: 16.6666666667%
    }

    .f-width-xlarge-5-6 {
        width: 83.3333333333%
    }
}

.f-width-1-1,
[class*=f-grid-width]>.f-width-1-1 {
    width: 100%
}

.f-panel {
    display: block;
    position: relative
}

.f-panel>:last-child {
    margin-bottom: 0
}

.f-panel+.f-panel-divider {
    margin-top: 50px !important
}

.f-panel+.f-panel-divider:before {
    border-top: 1px solid #eee;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: -25px
}

@media (min-width:1220px) {
    .f-panel+.f-panel-divider {
        margin-top: 70px !important
    }

    .f-panel+.f-panel-divider:before {
        top: -35px
    }
}

.f-panel,
.f-panel:hover {
    text-decoration: none
}

.f-panel:after,
.f-panel:before {
    content: '';
    display: table
}

.f-panel:after {
    clear: both
}

.f-panel-title {
    color: #222;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: none
}

.f-panel-badge {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.f-panel-teaser {
    margin-bottom: 20px
}

.f-panel-body {
    padding: 20px
}

.f-panel-box {
    background: #eee;
    border: 1px solid #eee;
    color: #222;
    padding: 20px
}

.f-panel-box .f-panel-title {
    color: #222
}

.f-panel-box .f-panel-badge {
    right: 10px;
    top: 10px
}

.f-panel-box .f-panel-teaser {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px
}

.f-panel-box>.f-nav-side {
    margin: 0 -20px
}

.f-panel-box-hover:hover {
    color: #222
}

.f-panel-box-primary {
    background-color: #ebf7fd;
    border-color: #ebf7fd;
    color: #1a84b1
}

.f-panel-box-primary .f-panel-title {
    color: #20a5de
}

.f-panel-box-primary-hover:hover {
    color: #1a84b1
}

.f-panel-box-secondary {
    background-color: #fff;
    border-color: #eee;
    color: #222
}

.f-panel-box-secondary .f-panel-title,
.f-panel-box-secondary-hover:hover {
    color: #222
}

.f-panel-box-shadow {
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .09)
}

.f-panel-hover {
    color: #222;
    padding: 20px;
    transition: background-color .2s linear, border-color .2s linear
}

.f-panel-hover:hover {
    background: #eee;
    color: #222
}

.f-panel-hover .f-panel-badge {
    right: 10px;
    top: 10px
}

.f-panel-hover .f-panel-teaser {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px
}

.f-panel-header .f-panel-title {
    border-bottom: 1px solid #eee;
    color: #222;
    padding-bottom: 10px
}

.f-panel-space {
    padding: 30px
}

.f-panel-space .f-panel-badge {
    right: 30px;
    top: 30px
}

.f-panel-bordered {
    border: 1px solid #eee
}

.f-panel-bordered.f-margin-bottom-remove+.f-panel-bordered.f-margin-top-remove {
    border-top: 0
}

.f-panel-dashed {
    border: 1px dashed #c8c8c8
}

.f-panel-dashed.f-margin-bottom-remove+.f-panel-dashed.f-margin-top-remove {
    border-top: 0
}

.f-breadcrumb {
    font-size: .0000625rem;
    list-style: none;
    padding: 0
}

.f-breadcrumb>li {
    font-size: 1rem;
    vertical-align: top
}

.f-breadcrumb>li,
.f-breadcrumb>li>a,
.f-breadcrumb>li>span {
    display: inline-block
}

.f-breadcrumb>li:nth-child(n+2):before {
    content: ">";
    display: inline-block;
    margin: 0 8px
}

.f-breadcrumb>li:not(.f-active)>span {
    color: #999
}

.f-nav,
.f-nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.f-nav li>a,
.f-nav>a {
    display: block;
    text-decoration: none
}

.f-nav>a,
.f-nav>li>a {
    padding: 5px 15px
}

.f-nav ul {
    padding-left: 15px
}

.f-nav ul a {
    padding: 2px 0
}

.f-nav li>a>div {
    font-size: .75rem;
    line-height: 18px
}

.f-nav-header {
    font-size: .75pxrem;
    font-weight: 700;
    padding: 5px 15px;
    text-transform: uppercase
}

.f-nav-header:not(:first-child) {
    margin-top: 15px
}

.f-nav-divider>hr {
    margin: 9px 15px
}

ul.f-nav-sub {
    padding: 5px 0 5px 15px
}

ul.f-nav-sub .f-nav-header {
    padding-left: 0
}

.f-nav-parent-icon>.f-parent>a:after {
    font-size: 1.25rem;
    content: "î—‹";
    float: right;
    font-family: Material Icons;
    line-height: 1.4;
    margin-right: -10px;
    text-align: center;
    transform: rotate(0);
    transition: transform .2s ease-out;
    width: 20px
}

.f-nav-parent-icon>.f-parent.f-open>a:after {
    transform: rotate(-90deg)
}

.ie9 .f-nav-parent-icon>.f-parent.f-open>a:after {
    content: ""
}

.f-nav-parent-icon>.f-parent-link.f-open>a:after {
    font-size: 1.125rem;
    color: #000;
    content: "î—ˆ";
    transform: rotate(-45deg);
    transition: none
}

.f-nav-side>li>a {
    color: #222;
    transition: background-color .2s linear, color .2s linear
}

.f-nav-side>li>a:focus,
.f-nav-side>li>a:hover {
    background: rgba(0, 0, 0, .05);
    color: #222;
    outline: 0
}

.f-nav-side>li.f-active>a {
    background: #20a5de;
    color: #fff
}

.f-nav-side .f-nav-header {
    color: #222
}

.f-nav-side .f-nav-divider>hr {
    border-color: #eee
}

.f-nav-side ul a {
    color: #20a5de
}

.f-nav-side ul a:hover {
    color: #1a84b1
}

.f-nav-dropdown>li>a {
    color: #222;
    transition: background-color .2s linear, color .2s linear
}

.f-nav-dropdown>li>a .material-icons {
    font-size: 1rem
}

.f-nav-dropdown>li>a:focus,
.f-nav-dropdown>li>a:hover {
    background: #20a5de;
    color: #fff;
    outline: 0
}

.f-nav-dropdown .f-nav-header {
    color: #999
}

.f-nav-dropdown .f-nav-divider>hr {
    border-color: #eee
}

.f-nav-dropdown ul a {
    color: #20a5de
}

.f-nav-dropdown ul a:hover {
    color: #1a84b1
}

.f-nav-navbar>li>a {
    color: #222;
    transition: background-color .2s linear, color .2s linear
}

.f-nav-navbar>li>a:focus,
.f-nav-navbar>li>a:hover {
    background: #20a5de;
    color: #fff;
    outline: 0
}

.f-nav-navbar .f-nav-header {
    color: #999
}

.f-nav-navbar .f-nav-divider>hr {
    border-color: #eee
}

.f-nav-navbar ul a {
    color: #20a5de
}

.f-nav-navbar ul a:hover {
    color: #1a84b1
}

.f-nav-offcanvas>li>a {
    color: #eee;
    padding: 10px 15px
}

.f-nav-offcanvas>.f-open>a,
html:not(.f-touch) .f-nav-offcanvas>li>a:focus,
html:not(.f-touch) .f-nav-offcanvas>li>a:hover {
    background: #404040;
    color: #fff;
    outline: 0
}

html .f-nav.f-nav-offcanvas>li.f-active>a {
    background: #222;
    color: #fff
}

.f-nav-offcanvas .f-nav-header {
    color: #999
}

.f-nav-offcanvas .f-nav-divider>hr {
    border-color: #222
}

.f-nav-offcanvas ul a {
    color: #eee
}

html:not(.f-touch) .f-nav-offcanvas ul a:hover {
    color: #fff
}

.f-navbar {
    background: #eee;
    color: #222
}

.f-navbar.f-navbar-padded {
    padding: 15px 0
}

.f-navbar:after,
.f-navbar:before {
    content: '';
    display: table
}

.f-navbar:after {
    clear: both
}

.f-navbar-nav {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0
}

.f-navbar-nav>li {
    float: left;
    position: relative
}

.f-navbar-nav>li.f-active>a {
    background-color: #20a5de;
    color: #fff
}

.f-navbar-nav>li>a {
    font-size: .875rem;
    box-sizing: border-box;
    color: #222;
    display: block;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    text-decoration: none;
    transition: background-color .2s linear, color .2s linear
}

.f-navbar-nav>li>a[href='#'] {
    cursor: text
}

.f-navbar-nav>li>a:active {
    background-color: #eee;
    color: #222
}

.f-navbar-nav .f-navbar-nav-subtitle {
    line-height: 28px
}

.f-navbar-nav>li.f-open>a,
.f-navbar-nav>li:hover>a,
.f-navbar-nav>li>a:focus {
    background-color: #4cb7e5;
    color: #fff;
    outline: 0
}

.f-navbar-nav-subtitle>div {
    font-size: .625pxrem;
    line-height: 12px;
    margin-top: -6px
}

.f-navbar-brand,
.f-navbar-content,
.f-navbar-toggle {
    box-sizing: border-box;
    display: block;
    float: left;
    height: 40px;
    padding: 0 15px
}

.f-navbar-brand>.material-icons,
.f-navbar-content>.material-icons,
.f-navbar-toggle>.material-icons {
    top: 0
}

.f-navbar-brand:before,
.f-navbar-content:before,
.f-navbar-toggle:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.f-navbar-content+.f-navbar-content:not(.f-navbar-center) {
    padding-left: 0
}

.f-navbar-content>a:not([class]) {
    color: #20a5de
}

.f-navbar-content>a:not([class]):hover {
    color: #1a84b1
}

.f-navbar-brand {
    font-size: 1.125rem;
    color: #222;
    text-decoration: none
}

.f-navbar-brand:focus,
.f-navbar-brand:hover {
    color: #222;
    outline: 0;
    text-decoration: none
}

.f-navbar-toggle {
    font-size: 1.125rem;
    color: #222;
    text-decoration: none
}

.f-navbar-toggle>.material-icons {
    line-height: 40px
}

.f-navbar-toggle:focus,
.f-navbar-toggle:hover {
    color: #222;
    outline: 0;
    text-decoration: none
}

.f-navbar-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    text-align: center
}

.f-navbar-flip {
    float: right
}

.f-pagination {
    font-size: .0000625rem;
    list-style: none;
    padding: 0;
    text-align: center
}

.f-pagination:after,
.f-pagination:before {
    content: '';
    display: table
}

.f-pagination:after {
    clear: both
}

.f-pagination>.f-active>span {
    background: #000;
    color: #fff
}

.f-pagination .f-active span {
    background: #000
}

.f-pagination>.f-disabled>span {
    background-color: #eee;
    color: #999
}

.f-pagination .material-icons {
    font-size: 1.4375rem;
    max-height: 17px;
    top: -4px
}

.blog-pagination {
    margin-top: 60px
}

.f-pagination>li {
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    margin: 0 0 20px;
    vertical-align: top
}

.f-pagination>li:nth-child(n+2) {
    margin-left: 10px
}

.f-pagination>li>a {
    background-color: #fff;
    color: #222;
    transition: background-color .2s linear, color .2s linear
}

.f-pagination>li>a:active {
    background-color: #eee;
    color: #fff
}

.f-pagination>li>a,
.f-pagination>li>span {
    border-radius: 5px;
    box-sizing: content-box;
    display: inline-block;
    line-height: 20px;
    min-width: 20px;
    padding: 12px;
    text-align: center;
    text-decoration: none
}

.f-pagination>li>a:focus,
.f-pagination>li>a:hover {
    background-color: #000;
    color: #fff;
    outline: 0
}

.f-pagination-previous {
    float: left
}

.f-pagination-next {
    float: right
}

.f-pagination-left {
    text-align: left
}

.f-pagination-right {
    text-align: right
}

.f-subnav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-left: -10px;
    margin-top: -10px;
    padding: 0
}

.f-subnav:after,
.f-subnav:before {
    content: '';
    display: block;
    overflow: hidden
}

.f-subnav:after {
    clear: both
}

.f-subnav>* {
    flex: none;
    float: left;
    margin-top: 10px;
    padding-left: 10px;
    position: relative
}

.f-subnav>*>* {
    color: #222;
    display: inline-block;
    transition: background-color .2s linear, color .2s linear
}

.f-subnav>*>:focus,
.f-subnav>*>:hover {
    color: #20a5de;
    text-decoration: none
}

.f-subnav>.f-active>* {
    color: #20a5de
}

.f-subnav-line>:before {
    content: '';
    display: inline-block;
    height: 10px;
    vertical-align: middle
}

.f-subnav-line>:nth-child(n+2):before {
    border-left: 1px solid #eee;
    margin-right: 10px
}

.f-subnav-pill>*>* {
    padding: 3px 9px
}

.f-subnav-pill>*>:focus:not(.f-dropdown),
.f-subnav-pill>*>:hover:not(.f-dropdown) {
    background: #eee;
    color: #222;
    outline: 0;
    text-decoration: none
}

.f-subnav-pill>.f-active>* {
    background: #20a5de;
    color: #fff
}

.f-subnav>.f-disabled>* {
    background: 0 0;
    color: #999;
    cursor: text;
    text-decoration: none
}

.f-tab {
    border-bottom: 1px solid #eee;
    list-style: none;
    margin: 0;
    padding: 0
}

.f-tab:after,
.f-tab:before {
    content: '';
    display: table
}

.f-tab:after {
    clear: both
}

.f-tab>li {
    float: left;
    margin-bottom: -1px;
    position: relative
}

.f-tab>li:nth-child(n+2)>a {
    margin-left: 5px
}

.f-tab>li[data-f-dropdown] .f-dropdown {
    border-top: 0;
    margin-top: 0
}

.f-tab>li>a {
    border: 1px solid transparent;
    border-bottom-width: 0;
    color: #20a5de;
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color .2s linear, border-color .2s linear, color .2s linear
}

.f-tab>li.f-active>a {
    background: #fff;
    border-color: #eee #eee transparent;
    color: #222
}

.f-tab>li.f-disabled>a {
    color: #999;
    cursor: text
}

.f-tab>li.f-disabled.f-active>a,
.f-tab>li.f-disabled>a:focus,
.f-tab>li.f-disabled>a:hover {
    background: 0 0;
    border-color: transparent
}

.f-tab>li.f-open>a,
.f-tab>li>a:focus,
.f-tab>li>a:hover {
    background: #eee;
    border-color: #eee;
    color: #1a84b1;
    outline: 0
}

.f-tab>li.f-open:not(.f-active)>a,
.f-tab>li:not(.f-active)>a:focus,
.f-tab>li:not(.f-active)>a:hover {
    margin-bottom: 1px;
    padding-bottom: 7px
}

.f-tab-flip>li {
    float: right
}

.f-tab-flip>li:nth-child(n+2)>a {
    margin-left: 0;
    margin-right: 5px
}

.f-tab>li.f-tab-responsive>a {
    margin-right: 0
}

.f-tab>li.f-tab-responsive .f-dropdown {
    border-top: 0;
    margin-top: 0
}

.f-tab-responsive>a:before {
    font-size: 1.125rem;
    content: '\e5d2';
    display: inline-block;
    font-family: Material Icons;
    line-height: 1;
    vertical-align: middle
}

.f-tab-center {
    border-bottom: 1px solid #eee
}

.f-tab-center .f-tab {
    border: 0;
    float: right;
    position: relative;
    right: 50%
}

.f-tab-center .f-tab>li {
    position: relative;
    right: -50%
}

.f-tab-center .f-tab>li>a {
    text-align: center
}

.f-tab-center-bottom {
    border-bottom: 0;
    border-top: 1px solid #eee
}

.f-tab-center:after,
.f-tab-center:before {
    content: '';
    display: table
}

.f-tab-center:after {
    clear: both
}

.f-tab-bottom {
    border-bottom: 0;
    border-top: 1px solid #eee
}

.f-tab-bottom>li {
    margin-bottom: 0;
    margin-top: -1px
}

.f-tab-bottom>li.f-active>a {
    border-bottom-color: #eee;
    border-top-color: transparent
}

.f-tab-bottom>li>a {
    border-bottom-width: 1px;
    border-top-width: 0;
    padding-bottom: 8px;
    padding-top: 8px
}

.f-tab-bottom>li.f-open:not(.f-active)>a,
.f-tab-bottom>li:not(.f-active)>a:focus,
.f-tab-bottom>li:not(.f-active)>a:hover {
    margin-bottom: 0;
    margin-top: 1px;
    padding-bottom: 8px;
    padding-top: 7px
}

.f-tab-grid {
    border-bottom: 0;
    margin-left: -5px;
    position: relative;
    z-index: 0
}

.f-tab-grid:before {
    border-top: 1px solid #eee;
    bottom: -1px;
    display: block;
    left: 5px;
    position: absolute;
    right: 0;
    z-index: -1
}

.f-tab-grid>li:first-child>a {
    margin-left: 5px
}

.f-tab-grid>li>a {
    text-align: center
}

.f-tab-grid.f-tab-bottom {
    border-top: 0
}

.f-tab-grid.f-tab-bottom:before {
    bottom: auto;
    top: -1px
}

.f-tab-large>li>a {
    background-color: #efefef;
    border-color: #eee;
    padding: 15px 10px 10px
}

.f-tab-large>li:nth-child(n+2)>a {
    margin-left: -1px
}

.f-tab-large>li:not(.f-active)>a {
    margin-top: 5px;
    padding: 10px
}

.f-tab-large>li.f-open:not(.f-active)>a,
.f-tab-large>li:not(.f-active)>a:focus,
.f-tab-large>li:not(.f-active)>a:hover {
    border-color: #eee #eee transparent;
    padding-bottom: 9px
}

.f-tab-large>li.f-tab-responsive {
    margin-bottom: -1px
}

.f-tab-large>li.f-tab-responsive a {
    margin-left: 0
}

.f-tab-large+.f-switcher {
    border: solid #eee;
    border-width: 0 1px 1px;
    padding: 20px
}

@media screen and (min-width:768px) {
    .f-column-medium-1-2 {
        -moz-column-count: 2;
        column-count: 2
    }

    .f-column-medium-1-3 {
        -moz-column-count: 3;
        column-count: 3
    }

    .f-column-medium-1-4 {
        -moz-column-count: 4;
        column-count: 4
    }

    .f-column-medium-1-5 {
        -moz-column-count: 5;
        column-count: 5
    }

    .f-column-medium-1-6 {
        -moz-column-count: 6;
        column-count: 6
    }

    .f-tab-left,
    .f-tab-right {
        border-bottom: 0
    }

    .f-tab-left>li,
    .f-tab-right>li {
        float: none;
        margin-bottom: 0
    }

    .f-tab-left>li>a,
    .f-tab-right>li>a {
        padding-bottom: 8px;
        padding-top: 8px
    }

    .f-tab-left>li:nth-child(n+2)>a,
    .f-tab-right>li:nth-child(n+2)>a {
        margin-left: 0;
        margin-top: 5px
    }

    .f-tab-left>li.f-active>a,
    .f-tab-right>li.f-active>a {
        border-color: #eee
    }

    .f-tab-left {
        border-right: 1px solid #eee
    }

    .f-tab-left>li {
        margin-right: -1px
    }

    .f-tab-left>li>a {
        border-bottom-width: 1px;
        border-right-width: 0
    }

    .f-tab-left>li:not(.f-active)>a:focus,
    .f-tab-left>li:not(.f-active)>a:hover {
        margin-bottom: 0;
        margin-right: 1px;
        padding-bottom: 8px;
        padding-right: 11px
    }

    .f-tab-left>li.f-active>a {
        border-right-color: transparent
    }

    .f-tab-right {
        border-left: 1px solid #eee
    }

    .f-tab-right>li {
        margin-left: -1px
    }

    .f-tab-right>li>a {
        border-bottom-width: 1px;
        border-left-width: 0
    }

    .f-tab-right>li:not(.f-active)>a:focus,
    .f-tab-right>li:not(.f-active)>a:hover {
        margin-bottom: 0;
        margin-left: 1px;
        padding-bottom: 8px;
        padding-left: 11px
    }

    .f-tab-right>li.f-active>a {
        border-left-color: transparent
    }

    .f-tab-large>li>a {
        font-size: 1.125rem;
        padding: 25px 40px 15px
    }

    .f-tab-large>li:not(.f-active)>a {
        margin-top: 10px;
        padding: 15px 40px
    }

    .f-tab-large>li.f-open:not(.f-active)>a,
    .f-tab-large>li:not(.f-active)>a:focus,
    .f-tab-large>li:not(.f-active)>a:hover {
        padding-bottom: 14px
    }

    .f-tab-large+.f-switcher {
        padding: 40px
    }
}

.f-form input,
.f-form select,
.f-form textarea {
    border-radius: 0;
    box-sizing: border-box;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin: 0
}

.f-form select {
    -webkit-appearance: none;
    cursor: pointer;
    text-transform: none
}

.f-form optgroup {
    font: inherit;
    font-weight: 700
}

.f-form input::-moz-focus-inner {
    border: 0;
    padding: 0
}

.f-form input[type=checkbox],
.f-form input[type=radio] {
    padding: 0
}

.f-form input[type=checkbox]:not(:disabled),
.f-form input[type=radio]:not(:disabled) {
    cursor: pointer
}

.f-form input:not([type]),
.f-form input[type=datetime],
.f-form input[type=email],
.f-form input[type=number],
.f-form input[type=password],
.f-form input[type=search],
.f-form input[type=tel],
.f-form input[type=text],
.f-form input[type=url],
.f-form textarea {
    -webkit-appearance: none
}

.f-form input[type=search]::-webkit-search-cancel-button,
.f-form input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

.f-form input[type=number]::-webkit-inner-spin-button,
.f-form input[type=number]::-webkit-outer-spin-button {
    height: auto
}

.f-form fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.f-form textarea {
    overflow: auto;
    vertical-align: top
}

.f-form ::-moz-placeholder {
    color: #999;
    opacity: 1
}

.f-form :invalid {
    box-shadow: none
}

.f-form input:not([type=radio]):not([type=checkbox]),
.f-form select {
    vertical-align: middle
}

.f-form>:last-child {
    margin-bottom: 0
}

.f-form input:not([type]),
.f-form input[type=color],
.f-form input[type=date],
.f-form input[type=datetime-local],
.f-form input[type=datetime],
.f-form input[type=email],
.f-form input[type=month],
.f-form input[type=number],
.f-form input[type=password],
.f-form input[type=search],
.f-form input[type=tel],
.f-form input[type=text],
.f-form input[type=time],
.f-form input[type=url],
.f-form input[type=week],
.f-form select,
.f-form textarea {
    background-color: #fff;
    border: 1px solid #eee;
    color: #222;
    height: 30px;
    max-width: 100%;
    padding: 4px 6px;
    transition: color .2s linear, background-color .2s linear, border-color .2s linear
}

.f-form input:not([type]):focus,
.f-form input[type=color]:focus,
.f-form input[type=date]:focus,
.f-form input[type=datetime-local]:focus,
.f-form input[type=datetime]:focus,
.f-form input[type=email]:focus,
.f-form input[type=month]:focus,
.f-form input[type=number]:focus,
.f-form input[type=password]:focus,
.f-form input[type=search]:focus,
.f-form input[type=tel]:focus,
.f-form input[type=text]:focus,
.f-form input[type=time]:focus,
.f-form input[type=url]:focus,
.f-form input[type=week]:focus,
.f-form select:focus,
.f-form textarea:focus {
    background-color: #ebf7fd;
    border-color: #20a5de;
    color: #222;
    outline: 0
}

.f-form input:not([type]):disabled,
.f-form input[type=color]:disabled,
.f-form input[type=date]:disabled,
.f-form input[type=datetime-local]:disabled,
.f-form input[type=datetime]:disabled,
.f-form input[type=email]:disabled,
.f-form input[type=month]:disabled,
.f-form input[type=number]:disabled,
.f-form input[type=password]:disabled,
.f-form input[type=search]:disabled,
.f-form input[type=tel]:disabled,
.f-form input[type=text]:disabled,
.f-form input[type=time]:disabled,
.f-form input[type=url]:disabled,
.f-form input[type=week]:disabled,
.f-form select:disabled,
.f-form textarea:disabled {
    background-color: #eee;
    border-color: #eee;
    color: #999
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .f-form select:not([multiple]) {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+);
        background-position: right 0 top 50%;
        background-repeat: no-repeat;
        background-size: 30px;
        padding-right: 30px
    }

    .f-form select:not([multiple]):disabled {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDRDJFNkU5QjIxNUIxMUU4OUZBQUI4QTQyN0M5QUU3RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDRDJFNkU5QzIxNUIxMUU4OUZBQUI4QTQyN0M5QUU3RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNEMkU2RTk5MjE1QjExRTg5RkFBQjhBNDI3QzlBRTdFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNEMkU2RTlBMjE1QjExRTg5RkFBQjhBNDI3QzlBRTdFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+f6EjTgAAATRJREFUeNrsmEEKgkAYhTWiukF6gvIYQVDUxl3doE4Xbgra1CFadATpBu3sDYwQopYz81vC++ExqDl+n5POlJ9lmdfl6nkdLwpQgAIUoAAFKEABClDgd9U3PTFN0zmaG/KwZAiRKAzDS2sjAPg1miNyRcaW8KqPE/pctiKAC63QHJCBunMWEjn8BBkiiYmEyQjsNHxeJhIK/qLh81IS+zYENsi5sK+JRKDhp4X9qs+tuAAetiea2FAi0J8pg4913/IPsaGEc3ireaChhAi8Kt/2fyG8OUbqDYIsCofuyExdQ3/nI9fwrmbiTyNRCa/P/YulRJ2EGLzrtVCVhBi8xGKuTsI5vNRqtExCBN5qNfqlRKK3ReAlBd4lPCl4J/MAf5FRgAIUoAAFKEABClCAAp2tlwADAPJyYDq16r+8AAAAAElFTkSuQmCC)
    }
}

.f-form :-ms-input-placeholder {
    color: #999 !important
}

.f-form ::-webkit-input-placeholder {
    color: #999
}

.f-form :disabled:-ms-input-placeholder {
    color: #999 !important
}

.f-form :disabled::-moz-placeholder {
    color: #999
}

.f-form :disabled::-webkit-input-placeholder {
    color: #999
}

.f-form legend {
    border: 0;
    font-size: 18px;
    line-height: 30px;
    padding: 0 0 20px;
    width: 100%
}

.f-form legend:after {
    border-bottom: 1px solid #eee;
    content: '';
    display: block;
    width: 100%
}

.f-form-small input:not([type]),
.f-form-small input[type]:not([type=submit]):not([type=radio]):not([type=checkbox]),
.f-form-small select,
.f-form-small textarea,
input:not([type]).f-form-small,
input[type].f-form-small,
select.f-form-small,
textarea.f-form-small {
    font-size: 12px;
    height: 25px;
    padding: 3px
}

.f-form-large input:not([type]),
.f-form-large input[type]:not([type=submit]):not([type=radio]):not([type=checkbox]),
.f-form-large select,
.f-form-large textarea,
input:not([type]).f-form-large,
input[type].f-form-large,
select.f-form-large,
textarea.f-form-large {
    font-size: 16px;
    height: 40px;
    padding: 8px 6px
}

.f-form-large .f-form-icon {
    max-height: 40px
}

.f-form-large .f-form-icon>.material-icons {
    font-size: 24px;
    margin-top: -12px;
    width: 40px
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .f-form-large select,
    .f-form-small select,
    select.f-form-large,
    select.f-form-small {
        padding-right: 30px
    }
}

.f-form select[multiple],
.f-form select[size],
.f-form textarea {
    height: auto
}

.f-form-danger {
    background-color: #fff1f0 !important;
    border-color: #b72138 !important;
    color: #da314b !important
}

.f-form-success {
    background-color: #f2fae3 !important;
    border-color: #72a12e !important;
    color: #8ec73b !important
}

.f-form-blank {
    background-color: transparent !important;
    border-color: transparent !important;
    border-style: dashed !important
}

.f-form-blank:focus {
    border-color: #eee !important
}

input.f-form-width-mini {
    width: 40px
}

select.f-form-width-mini {
    width: 65px
}

.f-form-width-small {
    width: 130px
}

.f-form-width-medium {
    width: 200px
}

.f-form-width-large {
    width: 500px
}

.f-form-row:after,
.f-form-row:before {
    content: '';
    display: table
}

.f-form-row.f-grid:after,
.f-form-row.f-grid:before {
    content: '';
    display: block;
    overflow: hidden
}

.f-form-row+.f-form-row {
    margin-top: 20px
}

.f-form-row:after {
    clear: both
}

.f-form-help-inline {
    display: inline-block;
    margin: 0 0 0 10px
}

.f-form-help-block {
    margin: 5px 0 0
}

.f-form-controls>:first-child {
    margin-top: 0
}

.f-form-controls>:last-child {
    margin-bottom: 0
}

.f-form-controls-condensed {
    margin: 5px 0
}

.f-form-stacked .f-form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px
}

@media (max-width:959px) {
    .f-form-horizontal .f-form-label {
        display: block;
        font-weight: 700;
        margin-bottom: 5px
    }
}

@media (min-width:960px) {
    .f-form-horizontal .f-form-label {
        float: left;
        margin-top: 5px;
        width: 200px
    }

    .f-form-horizontal .f-form-controls {
        margin-left: 215px
    }

    .f-form-horizontal .f-form-controls-text {
        padding-top: 5px
    }
}

.f-form-icon {
    display: inline-block;
    max-height: 30px;
    max-width: 100%;
    position: relative
}

.f-form-icon>.material-icons {
    color: #999;
    font-size: 16px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 30px
}

.f-form-icon:not(.f-form-icon-flip)>input {
    padding-left: 30px !important
}

.f-form-icon-flip>.material-icons {
    right: 0
}

.f-form-icon-flip>input {
    padding-right: 30px !important
}

.f-form-icon-flip>input::-ms-clear {
    display: none
}

.f-btn.f-stepper {
    padding-left: 6px;
    padding-right: 6px
}

.f-btn.f-stepper i {
    font-size: 1rem
}

.f-form-large .f-btn.f-stepper i {
    font-size: 1.375rem
}

.f-form input[type=checkbox],
.f-form input[type=radio] {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #eee;
    border: 1px solid #999;
    display: inline-block;
    height: 19px;
    margin-top: -4px;
    outline: 0;
    overflow: hidden;
    vertical-align: middle;
    width: 19px;
    transition: background-color .2s linear, border-color .2s linear
}

.f-form input[type=checkbox]:focus,
.f-form input[type=radio]:focus {
    background-color: #ebf7fd;
    border-color: #20a5de
}

.f-form input[type=checkbox]:checked:before,
.f-form input[type=radio]:checked:before {
    display: block
}

.f-form input[type=radio] {
    border-radius: 50%
}

.f-form input[type=radio]:before {
    background: #20a5de;
    border-radius: 50%;
    content: '';
    height: 11px;
    margin: 3px auto 0;
    opacity: 0;
    transition: opacity .3s linear;
    width: 11px
}

.f-form input[type=radio]:checked:before {
    opacity: 1
}

.f-form input[type=checkbox] {
    background-color: #fff
}

.f-form input[type=checkbox]:before {
    color: #20a5de;
    content: "\2714";
    display: block;
    font-family: Material Icons;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    line-height: 17px;
    opacity: 0;
    text-align: center;
    transition: opacity .3s linear
}

.f-form input[type=checkbox]:checked:before {
    opacity: 1
}

.f-form input[type=checkbox]:disabled,
.f-form input[type=radio]:disabled {
    border-color: #eee
}

.f-form input[type=radio]:disabled:checked:before {
    background-color: #999
}

.f-form input[type=checkbox]:disabled:checked:before {
    color: #999
}

.f-form input.f-placeholder::-webkit-input-placeholder {
    left: 0;
    position: relative;
    top: 0;
    transform-origin: left top;
    transition: transform .2s ease-in-out
}

.f-form input.f-placeholder::-moz-placeholder {
    left: 0;
    position: relative;
    top: 0;
    transform-origin: left top;
    transition: transform .2s ease-in-out
}

.f-form input.f-placeholder:-ms-input-placeholder {
    left: 0;
    position: relative;
    top: 0;
    transform-origin: left top;
    transition: transform .2s ease-in-out
}

.f-form input.f-placeholder::-ms-input-placeholder {
    left: 0;
    position: relative;
    top: 0;
    transform-origin: left top;
    transition: transform .2s ease-in-out
}

.f-form input.f-placeholder::placeholder {
    left: 0;
    position: relative;
    top: 0;
    transform-origin: left top;
    transition: transform .2s ease-in-out
}

.f-form input.f-placeholder.f-placeholder-up::-webkit-input-placeholder[style*=hidden] {
    opacity: 1;
    transform: translateY(-32px) scale(.8);
    visibility: visible !important
}

.f-form input.f-placeholder.f-placeholder-down::-webkit-input-placeholder[style*=hidden] {
    opacity: 1;
    transform: translateY(32px) scale(.8);
    visibility: visible !important
}

.f-input-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle
}

.f-input-toggle input[type=checkbox],
.f-input-toggle input[type=radio] {
    display: none
}

.f-input-toggle input[type=checkbox][disabled]+*,
.f-input-toggle input[type=radio][disabled]+* {
    opacity: .5
}

.f-input-toggle input+* {
    background-color: #fff;
    border: 2px solid #e6e6e6;
    border-radius: 15px;
    box-sizing: border-box;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    height: 30px;
    margin-right: 5px;
    pointer-events: none;
    transition: background-color .3s ease-in-out, border .3s ease-in-out;
    vertical-align: middle;
    width: 50px
}

.f-input-toggle input+:before {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .15);
    content: '';
    display: block;
    height: 26px;
    position: absolute;
    transition: background-color .3s cubic-bezier(0, 1.1, 1, 1.1), transform .3s cubic-bezier(0, 1.1, 1, 1.1);
    width: 26px
}

.f-input-toggle input:checked+* {
    background-color: #20a5de;
    border-color: #20a5de
}

.f-input-toggle input:checked+:before {
    transform: translate3d(20px, 0, 0)
}

.f-input-toggle.f-input-toggle-success input:checked+* {
    background-color: #8ec73b;
    border-color: #8ec73b
}

.f-input-toggle.f-input-toggle-danger input:checked+* {
    background-color: #faa732;
    border-color: #faa732
}

.f-input-toggle.f-input-toggle-warning input:checked+* {
    background-color: #da314b;
    border-color: #da314b
}

.f-input-toggle.f-input-toggle-small input+* {
    border-radius: 12.5px;
    height: 25px;
    width: 40px
}

.f-input-toggle.f-input-toggle-small input+:before {
    border-radius: 10.5px;
    height: 21px;
    width: 21px
}

.f-input-toggle.f-input-toggle-small input:checked+:before {
    transform: translate3d(15px, 0, 0)
}

.f-input-toggle.f-input-toggle-large input+* {
    border-radius: 20px;
    height: 40px;
    width: 70px
}

.f-input-toggle.f-input-toggle-large input+:before {
    border-radius: 18px;
    height: 36px;
    width: 36px
}

.f-input-toggle.f-input-toggle-large input:checked+:before {
    transform: translate3d(30px, 0, 0)
}

.f-range {
    -webkit-appearance: none;
    background-color: #d7dcdf;
    height: 10px !important;
    margin: 0;
    outline: 0;
    padding: 0 !important;
    width: 100%
}

.f-range.f-range-label {
    width: calc(100% - 80px)
}

.f-range::-webkit-slider-runnable-track {
    margin: 0 -2px
}

.f-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #20a5de;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    transform: scale(1);
    transition: background-color .2s ease-in-out, transform .2s ease-in-out;
    width: 20px
}

.f-range::-webkit-slider-thumb:hover {
    background-color: #36aee2
}

.f-range:active::-webkit-slider-thumb {
    background-color: #62c0e8;
    transform: scale(1.05)
}

.f-range::-moz-range-thumb {
    background-color: #20a5de;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    transition: background-color .15s ease-in-out;
    width: 20px
}

.f-range::-moz-range-thumb:hover {
    background-color: #36aee2
}

.f-range:active::-moz-range-thumb {
    background-color: #36aee2
}

.f-range-value {
    background-color: #20a5de;
    box-sizing: border-box;
    color: #fff;
    float: right;
    line-height: 20px;
    margin-left: 20px;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    width: 60px
}

.f-range-value:after {
    border-bottom: 7px solid transparent;
    border-right: 7px solid #20a5de;
    border-top: 7px solid transparent;
    content: '';
    height: 0;
    left: -7px;
    position: absolute;
    top: 8px;
    width: 0
}

.f-range-value.f-range-value-left {
    float: left;
    margin-left: 0;
    margin-right: 20px
}

.f-range-value.f-range-value-left:after {
    border-left: 7px solid #20a5de;
    border-right: 7px solid transparent;
    left: 100%
}

::-moz-range-track {
    background-color: #d7dcdf;
    border: 0
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0
}

.f-list {
    list-style: none;
    padding: 0
}

.f-list>li:after,
.f-list>li:before {
    content: '';
    display: table
}

.f-list>li:after {
    clear: both
}

.f-list>li>:last-child {
    margin-bottom: 0
}

.f-list ul {
    list-style: none;
    margin: 0;
    padding-left: 20px
}

.f-list-line>li:nth-child(n+2) {
    border-top: 1px solid #eee;
    margin-top: 5px;
    padding-top: 5px
}

.f-list-striped>li {
    padding: 5px
}

.f-list-striped>li:nth-of-type(odd) {
    background: #eee
}

.f-list-space>li:nth-child(n+2) {
    margin-top: 20px
}

.f-list-space.f-list-line>li:nth-child(n+2) {
    padding-top: 20px
}

.f-list-inline {
    margin-left: 0;
    padding-left: 0
}

.f-list-inline>li {
    display: inline-block;
    margin: 0 5px
}

.f-list-inline>li:first-child {
    margin-left: 0
}

.f-list-inline>li:last-child {
    margin-right: 0
}

.f-table {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    margin-bottom: 20px;
    width: 100%
}

.f-table+.f-table {
    margin-top: 20px
}

.f-table .f-tr {
    display: table-row
}

.f-table .f-th {
    display: table-head
}

.f-table .f-td {
    display: table-cell
}

.f-table .f-td,
.f-table .f-th,
.f-table td,
.f-table th {
    border-bottom: 1px solid #eee;
    padding: 8px
}

.f-table.f-table-plain .f-td,
.f-table.f-table-plain .f-th,
.f-table.f-table-plain td,
.f-table.f-table-plain th {
    border: 0
}

.f-table .f-th,
.f-table th {
    text-align: left
}

.f-table .f-td,
.f-table td {
    vertical-align: top
}

.f-table .f-thead .f-th,
.f-table thead th {
    vertical-align: bottom
}

.f-table .f-caption,
.f-table .f-tfoot,
.f-table caption,
.f-table tfoot {
    font-size: .75rem;
    font-style: italic
}

.f-table .f-caption,
.f-table caption {
    color: #999;
    text-align: left
}

.f-table-middle,
.f-table-middle .f-td,
.f-table-middle td {
    vertical-align: middle !important
}

.f-table-bottom,
.f-table-bottom .f-td,
.f-table-bottom td {
    vertical-align: bottom !important
}

.f-table-striped tbody tr:nth-of-type(odd) {
    background: #eee
}

.f-table-large td {
    padding: 16px
}

.f-table-condensed td {
    padding: 4px 8px
}

.f-table-bordered td,
.f-table-bordered th {
    border: 1px solid #eee
}

.f-table-hover tbody tr {
    transition: background-color .2s linear
}

.f-table-hover tbody tr:hover {
    background-color: #eee
}

@media screen and (max-width:766.99px) {
    .f-table-responsive>thead {
        display: none
    }

    .f-table-responsive>tbody>tr {
        border: 1px solid #eee;
        display: block;
        margin-bottom: 20px
    }

    .f-table-responsive>tbody>tr>td {
        font-size: .8125rem;
        border-bottom: 1px dotted #eee;
        display: block
    }

    .f-table-responsive>tbody>tr>td:last-child {
        border-bottom: 0
    }

    .f-table-responsive>tbody>tr>td:before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        margin-bottom: 10px
    }

    .f-table-responsive>tbody>tr>td.f-td-responsive-inline:before {
        float: left;
        margin-bottom: 0;
        margin-right: 20px
    }

    .f-table-responsive>tbody>tr>th {
        display: block
    }

    .f-table-responsive>tbody>tr:last-child {
        margin-bottom: 0
    }

    .f-table-responsive.f-table-responsive-inline>tbody>tr>td {
        text-align: right
    }

    .f-table-responsive.f-table-responsive-inline>tbody>tr>td:before {
        float: left;
        margin-bottom: 0;
        margin-right: 20px
    }

    .f-table-responsive.f-table-bordered>tbody>tr {
        border: 0
    }

    .f-table-responsive.f-table-bordered>tbody>tr>td {
        border-bottom: 0
    }

    .f-table-responsive.f-table-bordered>tbody>tr>td:last-child {
        border-bottom: 1px solid #eee
    }
}

.f-alert {
    background-color: #ebf7fd;
    color: #20a5de;
    margin-bottom: 15px;
    padding: 13.3333333333px
}

.f-alert>:last-child {
    margin-bottom: 0
}

*+.f-alert {
    margin-top: 15px
}

.f-alert h1,
.f-alert h2,
.f-alert h3,
.f-alert h4,
.f-alert h5,
.f-alert h6 {
    color: inherit
}

.f-alert>.f-close:first-child {
    float: right
}

.f-alert>.f-close:first-child+* {
    margin-top: 0
}

.f-alert-success {
    background: #f2fae3;
    color: #8ec73b
}

.f-alert-warning {
    background: #fffceb;
    color: #faa732
}

.f-alert-danger {
    background: #fff1f0;
    color: #da314b
}

.f-alert-large {
    padding: 40px
}

.f-alert-large>.f-close:first-child {
    margin: -10px -10px 0 0
}

[class*=f-animation-] {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@media screen {
    [data-f-scrollspy*=f-animation-]:not([data-f-scrollspy*=target]) {
        opacity: 0
    }
}

.f-animation-fade {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: f-fade;
    animation-name: f-fade;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important
}

.f-animation-scale-up {
    -webkit-animation-name: f-fade-scale-02;
    animation-name: f-fade-scale-02
}

.f-animation-scale-up-over {
    -webkit-animation-name: f-fade-scale-over;
    animation-name: f-fade-scale-over
}

.f-animation-scale-down {
    -webkit-animation-name: f-fade-scale-18;
    animation-name: f-fade-scale-18
}

.f-animation-slide-top {
    -webkit-animation-name: f-fade-top;
    animation-name: f-fade-top
}

.f-animation-slide-bottom {
    -webkit-animation-name: f-fade-bottom;
    animation-name: f-fade-bottom
}

.f-animation-slide-left {
    -webkit-animation-name: f-fade-left;
    animation-name: f-fade-left
}

.f-animation-slide-right {
    -webkit-animation-name: f-fade-right;
    animation-name: f-fade-right
}

.f-animation-slide-top-small {
    -webkit-animation-name: f-fade-top-small;
    animation-name: f-fade-top-small
}

.f-animation-slide-bottom-small {
    -webkit-animation-name: f-fade-bottom-small;
    animation-name: f-fade-bottom-small
}

.f-animation-scale {
    -webkit-animation-name: f-scale-12;
    animation-name: f-scale-12
}

.f-animation-shake {
    -webkit-animation-name: f-shake;
    animation-name: f-shake
}

.f-animation-reverse {
    animation-direction: reverse;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

.f-animation-10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s
}

.f-animation-15 {
    -webkit-animation-duration: 15s;
    animation-duration: 15s
}

.f-animation-top-left {
    transform-origin: 0 0
}

.f-animation-top-center {
    transform-origin: 50% 0
}

.f-animation-top-right {
    transform-origin: 100% 0
}

.f-animation-middle-left {
    transform-origin: 0 50%
}

.f-animation-middle-right {
    transform-origin: 100% 50%
}

.f-animation-bottom-left {
    transform-origin: 0 100%
}

.f-animation-bottom-center {
    transform-origin: 50% 100%
}

.f-animation-bottom-right {
    transform-origin: 100% 100%
}

.f-animation-hover:not(:hover),
.f-animation-hover:not(:hover) [class*=f-animation-],
.f-animation:not(.f-animation-click)[class*=f-animation-],
.f-touch .f-animation-hover:not(.f-hover),
.f-touch .f-animation-hover:not(.f-hover) [class*=f-animation-] {
    -webkit-animation-name: none;
    animation-name: none
}

.ie9 .f-scrollspy-init-inview {
    opacity: 1
}

@-webkit-keyframes f-fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes f-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes f-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes f-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes f-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes f-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes f-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes f-fade-top-small {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-fade-top-small {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes f-fade-bottom-small {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-fade-bottom-small {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes f-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes f-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes f-fade-scale-over {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    70% {
        opacity: .7;
        transform: scale(1.2)
    }

    90% {
        opacity: .9;
        transform: scale(.95)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes f-fade-scale-over {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    70% {
        opacity: .7;
        transform: scale(1.2)
    }

    90% {
        opacity: .9;
        transform: scale(.95)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes f-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes f-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes f-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes f-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes f-slide-left {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes f-slide-left {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes f-slide-right {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes f-slide-right {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes f-slide-left-33 {
    0% {
        transform: translateX(33%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes f-slide-left-33 {
    0% {
        transform: translateX(33%)
    }

    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes f-slide-right-33 {
    0% {
        transform: translateX(-33%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes f-slide-right-33 {
    0% {
        transform: translateX(-33%)
    }

    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes f-scale-12 {
    0% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes f-scale-12 {
    0% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes f-rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@keyframes f-rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@-webkit-keyframes f-shake {

    0%,
    100% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(-9px)
    }

    20% {
        transform: translateX(8px)
    }

    30% {
        transform: translateX(-7px)
    }

    40% {
        transform: translateX(6px)
    }

    50% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(4px)
    }

    70% {
        transform: translateX(-3px)
    }

    80% {
        transform: translateX(2px)
    }

    90% {
        transform: translateX(-1px)
    }
}

@keyframes f-shake {

    0%,
    100% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(-9px)
    }

    20% {
        transform: translateX(8px)
    }

    30% {
        transform: translateX(-7px)
    }

    40% {
        transform: translateX(6px)
    }

    50% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(4px)
    }

    70% {
        transform: translateX(-3px)
    }

    80% {
        transform: translateX(2px)
    }

    90% {
        transform: translateX(-1px)
    }
}

@-webkit-keyframes f-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes f-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes f-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.f-btn::-moz-focus-inner {
    border: 0;
    padding: 0
}

.f-btn {
    -webkit-appearance: none;
    background: #eee;
    border: 0;
    box-sizing: border-box;
    color: #222;
    display: inline-block;
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    overflow: visible;
    padding: 4px 12px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    transition: background-color .2s linear, color .2s linear, border .2s linear
}

.f-btn:not(:disabled) {
    cursor: pointer
}

.f-btn:focus,
.f-btn:hover {
    background-color: #222;
    color: #fff;
    outline: 0;
    text-decoration: none
}

.f-btn.f-active,
.f-btn:active {
    background-color: #999;
    color: #222
}

.f-btn.f-btn-icon {
    padding: 2px
}

.f-btn.f-btn-icon.f-btn-small {
    padding: 2px 6px
}

.f-btn.f-icon-left>.material-icons {
    margin-left: -8px
}

.f-btn.f-icon-right>.material-icons {
    margin-right: -8px
}

.f-btn.f-btn-transparent {
    background-color: transparent;
    border: 1px solid #20a5de
}

.f-btn.f-btn-transparent-inverted,
.f-btn.f-btn-transparent:hover {
    background-color: #20a5de;
    border: 1px solid #20a5de
}

.f-btn.f-btn-transparent-inverted:hover {
    background-color: transparent;
    border: 1px solid #20a5de
}

.f-btn-primary {
    background-color: #20a5de;
    border-color: #20a5de;
    color: #fff
}

.f-btn-primary.f-active {
    background-color: #1a84b1;
    color: #1a84b1
}

.f-btn-primary:focus,
.f-btn-primary:hover {
    background-color: #1a84b1;
    border-color: #20a5de;
    color: #fff
}

.f-form .f-btn-primary,
.f-form .f-btn-primary:focus,
.f-form .f-btn-primary:hover {
    color: #fff
}

.f-btn-success {
    background-color: #8ec73b;
    border-color: #8ec73b;
    color: #fff
}

.f-btn-success.f-active {
    background-color: #72a12e;
    color: #72a12e
}

.f-btn-success:focus,
.f-btn-success:hover {
    background-color: #72a12e;
    border-color: #8ec73b;
    color: #fff
}

.f-form .f-btn-success,
.f-form .f-btn-success:focus,
.f-form .f-btn-success:hover {
    color: #fff
}

.f-btn-warning {
    background-color: #faa732;
    border-color: #faa732;
    color: #fff
}

.f-btn-warning.f-active {
    background-color: #f39106;
    color: #f39106
}

.f-btn-warning:focus,
.f-btn-warning:hover {
    background-color: #f39106;
    border-color: #faa732;
    color: #fff
}

.f-form .f-btn-warning,
.f-form .f-btn-warning:focus,
.f-form .f-btn-warning:hover {
    color: #fff
}

.f-btn-danger {
    background-color: #da314b;
    border-color: #da314b;
    color: #fff
}

.f-btn-danger.f-active {
    background-color: #b72138;
    color: #b72138
}

.f-btn-danger:focus,
.f-btn-danger:hover {
    background-color: #b72138;
    border-color: #da314b;
    color: #fff
}

.f-form .f-btn-danger,
.f-form .f-btn-danger:focus,
.f-form .f-btn-danger:hover {
    color: #fff
}

.f-btn-jblue {
    background-color: #20a5de;
    border-color: #20a5de;
    color: #fff
}

.f-btn-jblue.f-active {
    background-color: #1a84b1;
    color: #1a84b1
}

.f-btn-jblue:focus,
.f-btn-jblue:hover {
    background-color: #1a84b1;
    border-color: #20a5de;
    color: #fff
}

.f-form .f-btn-jblue,
.f-form .f-btn-jblue:focus,
.f-form .f-btn-jblue:hover {
    color: #fff
}

.f-btn-jred {
    background-color: #c11d1f;
    border-color: #c11d1f;
    color: #fff
}

.f-btn-jred.f-active {
    background-color: #951618;
    color: #951618
}

.f-btn-jred:focus,
.f-btn-jred:hover {
    background-color: #951618;
    border-color: #c11d1f;
    color: #fff
}

.f-form .f-btn-jred,
.f-form .f-btn-jred:focus,
.f-form .f-btn-jred:hover {
    color: #fff
}

.f-btn-jgreen {
    background-color: #65b231;
    border-color: #f9d777;
    color: #fff
}

.f-btn-jgreen.f-active {
    background-color: #4e8a26;
    color: #4e8a26
}

.f-btn-jgreen:focus,
.f-btn-jgreen:hover {
    background-color: #4e8a26;
    color: #000
}

.f-form .f-btn-jgreen,
.f-form .f-btn-jgreen:focus,
.f-form .f-btn-jgreen:hover {
    color: #fff
}

.f-btn-jorange {
    background-color: #f08826;
    border-color: #f08826;
    color: #fff
}

.f-btn-jorange.f-active {
    background-color: #d46f0f;
    color: #d46f0f
}

.f-btn-jorange:focus,
.f-btn-jorange:hover {
    background-color: #d46f0f;
    border-color: #f08826;
    color: #fff
}

.f-form .f-btn-jorange,
.f-form .f-btn-jorange:focus,
.f-form .f-btn-jorange:hover {
    color: #fff
}

.f-btn-jpurple {
    background-color: #8a549c;
    border-color: #8a549c;
    color: #fff
}

.f-btn-jpurple.f-active {
    background-color: #6d427b;
    color: #6d427b
}

.f-btn-jpurple:focus,
.f-btn-jpurple:hover {
    background-color: #6d427b;
    border-color: #8a549c;
    color: #fff
}

.f-form .f-btn-jpurple,
.f-form .f-btn-jpurple:focus,
.f-form .f-btn-jpurple:hover {
    color: #fff
}

.f-btn-jdyellow {
    background-color: #e0b119;
    border-color: #e0b119;
    color: #fff
}

.f-btn-jdyellow.f-active {
    background-color: #b28d14;
    color: #b28d14
}

.f-btn-jdyellow:focus,
.f-btn-jdyellow:hover {
    background-color: #b28d14;
    border-color: #e0b119;
    color: #fff
}

.f-form .f-btn-jdyellow,
.f-form .f-btn-jdyellow:focus,
.f-form .f-btn-jdyellow:hover {
    color: #fff
}

.f-btn:disabled {
    background-color: #eee;
    color: #999
}

.f-btn-link,
.f-btn-link.f-active,
.f-btn-link:active,
.f-btn-link:disabled,
.f-btn-link:focus,
.f-btn-link:hover {
    background: 0 0;
    border-color: transparent
}

.f-btn-link {
    color: #1a84b1
}

.f-btn-link.f-active,
.f-btn-link:active,
.f-btn-link:focus,
.f-btn-link:hover {
    color: #20a5de;
    text-decoration: underline
}

.f-btn-link:disabled {
    color: #eee
}

.f-btn-link:focus {
    outline: dotted 1px
}

.f-btn-faux {
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 0
}

.f-btn-mini {
    font-size: 11px;
    line-height: 1.3;
    padding: 2px 6px
}

.f-btn-mini.f-button-transparent,
.f-btn-mini.f-button-transparent-inverted {
    padding: 0 4px
}

.f-btn-mini .material-icons {
    font-size: 11px
}

.f-btn-small {
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 10px
}

.f-btn-small.f-button-transparent,
.f-btn-small.f-button-transparent-inverted {
    padding: 2px 8px
}

.f-btn-small .material-icons {
    font-size: 12px
}

.f-btn-large,
.f-btn-xlarge {
    line-height: 1.3;
    padding: 8px 15px
}

.f-btn-large.f-button-transparent,
.f-btn-large.f-button-transparent-inverted,
.f-btn-xlarge.f-button-transparent,
.f-btn-xlarge.f-button-transparent-inverted {
    padding: 6px 13px
}

.f-btn-large .material-icons,
.f-btn-xlarge .material-icons {
    font-size: 16px
}

@media screen and (min-width:960px) {
    .f-column-large-1-2 {
        -moz-column-count: 2;
        column-count: 2
    }

    .f-column-large-1-3 {
        -moz-column-count: 3;
        column-count: 3
    }

    .f-column-large-1-4 {
        -moz-column-count: 4;
        column-count: 4
    }

    .f-column-large-1-5 {
        -moz-column-count: 5;
        column-count: 5
    }

    .f-column-large-1-6 {
        -moz-column-count: 6;
        column-count: 6
    }

    .f-btn-xlarge {
        font-size: 20px;
        line-height: 1.3;
        padding: 11px 20px
    }

    .f-btn-xlarge.f-button-transparent,
    .f-btn-xlarge.f-button-transparent-inverted {
        padding: 9px 18px
    }

    .f-btn-xlarge .material-icons {
        font-size: 20px
    }
}

.f-btn-caret.f-btn,
.f-btn-caret.f-btn-large,
.f-btn-caret.f-btn-mini,
.f-btn-caret.f-btn-small {
    padding-left: 6px;
    padding-right: 6px
}

.f-btn-caret.f-btn-large>.material-icons,
.f-btn-caret.f-btn-mini>.material-icons,
.f-btn-caret.f-btn-small>.material-icons,
.f-btn-caret.f-btn>.material-icons {
    margin: 0
}

.f-btn-caret.f-btn-mini {
    padding-left: 4px;
    padding-right: 4px
}

.f-btn-caret.f-btn-large {
    padding-left: 8px;
    padding-right: 8px
}

.f-btn-caret.f-btn-large>.material-icons {
    font-size: 1.5rem
}

.f-btn-caret .material-icons {
    display: block;
    top: 0
}

.f-btn-group {
    font-size: .0000625rem;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    white-space: nowrap
}

.f-btn-group>* {
    display: inline-block
}

.f-btn-group .f-btn {
    vertical-align: top
}

.f-btn-dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle
}

.f-close::-moz-focus-inner {
    border: 0;
    padding: 0
}

.f-close {
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    box-sizing: content-box;
    color: inherit;
    display: inline-block;
    font: inherit;
    line-height: 1;
    margin: 0;
    opacity: .3;
    overflow: visible;
    padding: 0;
    text-align: center;
    text-transform: none;
    vertical-align: middle;
    transition: opacity .2s linear
}

.f-close:focus,
.f-close:hover {
    color: inherit;
    cursor: pointer;
    opacity: .5;
    outline: 0;
    text-decoration: none
}

.f-close-alt {
    background: #eee;
    border-radius: 50%;
    line-height: 1;
    opacity: 1;
    padding: 5px
}

.f-close-alt i {
    display: block;
    opacity: .5
}

.f-close-alt:focus,
.f-close-alt:hover {
    opacity: 1
}

.f-close-alt:focus i,
.f-close-alt:hover i {
    opacity: .8
}

.material-icons,
.material-icons:focus,
.material-icons:hover {
    text-decoration: none
}

.material-icons {
    font-size: 1.75rem;
    font-feature-settings: 'liga';
    position: relative;
    top: -1px;
    vertical-align: middle
}

.material-icons.f-icon {
    font-size: inherit;
    line-height: inherit
}

.f-icon-small {
    font-size: 150%;
    line-height: 1
}

.f-icon-medium {
    font-size: 200%;
    line-height: 1
}

.f-icon-large {
    font-size: 250%;
    line-height: 1
}

.f-icon-hover {
    color: #999;
    transition: color .2s
}

.f-icon-hover:hover {
    color: #222
}

.f-icon-button {
    background: #eee;
    border-radius: 100%;
    box-sizing: border-box;
    color: #222;
    display: inline-block;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 35px;
    transition: background-color .2s, color .2s
}

.f-icon-button:focus,
.f-icon-button:hover {
    background-color: #999;
    color: #fff;
    outline: 0
}

.f-icon-button:active {
    background-color: #eee;
    color: #222
}

.f-icon-spin {
    -webkit-animation: 2s linear infinite md-spin;
    animation: 2s linear infinite md-spin
}

.f-icon-spin.f-icon-reverse {
    -webkit-animation: 2s linear infinite md-spin2;
    animation: 2s linear infinite md-spin2
}

.f-icon-pulse {
    -webkit-animation: 1s steps(8) infinite md-spin;
    animation: 1s steps(8) infinite md-spin
}

.f-icon-pulse.f-icon-reverse {
    -webkit-animation: 1s steps(8) infinite md-spin2;
    animation: 1s steps(8) infinite md-spin2
}

@-webkit-keyframes md-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@keyframes md-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@-webkit-keyframes md-spin2 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-359deg)
    }
}

@keyframes md-spin2 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-359deg)
    }
}

.f-overlay {
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transform: translateZ(0);
    vertical-align: middle
}

.f-overlay.f-border-circle {
    -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%)
}

.f-overlay>:first-child {
    margin-bottom: 0
}

.f-overlay-panel {
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    left: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0
}

.f-overlay-panel a:not([class]) {
    color: inherit;
    text-decoration: underline
}

.f-overlay-panel a[class*=f-icon-]:not(.f-icon-button) {
    color: inherit
}

.f-overlay-panel.f-flex>*>:last-child,
.f-overlay-panel>:last-child {
    margin-bottom: 0
}

.f-overlay-panel h1,
.f-overlay-panel h2,
.f-overlay-panel h3,
.f-overlay-panel h4,
.f-overlay-panel h5,
.f-overlay-panel h6 {
    color: inherit
}

.f-overlay-active :not(.f-active)>.f-overlay-panel:not(.f-ignore),
.f-overlay-hover:not(:hover):not(.f-hover) .f-overlay-panel:not(.f-ignore) {
    opacity: 0
}

.f-overlay-background {
    background: rgba(0, 0, 0, .5)
}

.f-overlay-image {
    padding: 0
}

.f-overlay-top {
    bottom: auto
}

.f-overlay-bottom {
    top: auto
}

.f-overlay-left {
    right: auto
}

.f-overlay-right {
    left: auto
}

.f-overlay-icon>i {
    font-size: 3.125rem;
    color: #fff;
    height: 50px;
    left: 50%;
    line-height: 1;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 50px
}

.f-overlay-blur,
.f-overlay-fade,
.f-overlay-grayscale,
.f-overlay-scale,
.f-overlay-spin,
[class*=f-overlay-slide] {
    transition-duration: .3s;
    transition-property: opacity, transform, filter, -webkit-filter;
    transition-timing-function: ease-out
}

.f-overlay-active .f-overlay-fade,
.f-overlay-active .f-overlay-scale,
.f-overlay-active .f-overlay-spin,
.f-overlay-active [class*=f-overlay-slide] {
    transition-duration: .8s
}

.f-overlay-fade {
    opacity: .7
}

.f-overlay-active .f-active>.f-overlay-fade,
.f-overlay-hover:hover .f-overlay-fade {
    opacity: 1
}

.f-overlay-scale {
    transform: scale(1)
}

.f-overlay-active .f-active>.f-overlay-scale,
.f-overlay-hover:hover .f-overlay-scale {
    transform: scale(1.1)
}

.f-overlay-spin {
    transform: scale(1) rotate(0)
}

.f-overlay-active .f-active>.f-overlay-spin,
.f-overlay-hover:hover .f-overlay-spin {
    transform: scale(1.1) rotate(3deg)
}

.f-overlay-grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.f-overlay-active .f-active>.f-overlay-grayscale,
.f-overlay-hover:hover .f-overlay-grayscale {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

[class*=f-overlay-slide] {
    opacity: 0
}

.f-overlay-slide-top {
    transform: translateY(-100%)
}

.f-overlay-slide-bottom {
    transform: translateY(100%)
}

.f-overlay-slide-left {
    transform: translateX(-100%)
}

.f-overlay-slide-right {
    transform: translateX(100%)
}

.f-overlay-active .f-active>[class*=f-overlay-slide],
.f-overlay-hover:hover [class*=f-overlay-slide] {
    opacity: 1;
    transform: translateX(0) translateY(0)
}

.f-text-small {
    font-size: 12px;
    line-height: 1.2
}

.f-text-large {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4
}

.f-text-bold {
    font-weight: 700
}

.f-text-muted {
    color: #999 !important
}

.f-text-primary {
    color: #20a5de !important
}

.f-text-success {
    color: #8ec73b !important
}

.f-text-warning {
    color: #faa732 !important
}

.f-text-danger {
    color: #da314b !important
}

.f-text-contrast {
    color: #fff !important
}

.f-text-left {
    text-align: left !important
}

.f-text-right {
    text-align: right !important
}

.f-text-center {
    text-align: center !important
}

.f-text-justify {
    text-align: justify !important
}

.f-text-top {
    vertical-align: top !important
}

.f-text-middle {
    vertical-align: middle !important
}

.f-text-bottom {
    vertical-align: bottom !important
}

@media (min-width:768px) {
    .f-text-center-medium {
        text-align: center !important
    }

    .f-text-left-medium {
        text-align: left !important
    }

    .f-text-right-medium {
        text-align: right !important
    }
}

@media (min-width:960px) {
    .f-text-center-large {
        text-align: center !important
    }

    .f-text-left-large {
        text-align: left !important
    }

    .f-text-right-large {
        text-align: right !important
    }
}

.f-text-nowrap {
    white-space: nowrap
}

.f-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.f-text-break {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word
}

.f-text-upper {
    text-transform: uppercase
}

.f-clearfix:before {
    content: '';
    display: table-cell
}

.f-clearfix:after {
    clear: both;
    content: '';
    display: table
}

.f-nbfc {
    overflow: hidden
}

.f-nbfc-alt {
    display: table-cell;
    width: 10000px
}

.f-float-left {
    float: left
}

.f-float-right {
    float: right
}

[class*=f-float-] {
    max-width: 100%
}

[class*=f-align-] {
    display: block;
    margin-bottom: 15px
}

.f-align-left {
    float: left;
    margin-right: 15px
}

.f-align-right {
    float: right;
    margin-left: 15px
}

.f-align-center {
    margin-left: auto;
    margin-right: auto
}

@media (min-width:768px) {
    .f-align-medium-left {
        float: left;
        margin-right: 15px
    }

    .f-align-medium-right {
        float: right;
        margin-left: 15px
    }
}

.f-vertical-align {
    font-size: .0000625rem
}

.f-vertical-align:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.f-vertical-align-bottom,
.f-vertical-align-middle {
    display: inline-block;
    font-size: 1rem;
    max-width: 100%
}

.f-vertical-align-middle {
    vertical-align: middle
}

.f-vertical-align-bottom {
    vertical-align: bottom
}

[class*=f-height] {
    box-sizing: border-box
}

.f-height-1-1 {
    height: 100%
}

.f-height-viewport {
    height: 100vh;
    min-height: 600px
}

.f-responsive-height,
.f-responsive-width {
    box-sizing: border-box
}

.f-responsive-width {
    height: auto;
    max-width: 100% !important
}

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

.f-margin {
    margin-bottom: 20px
}

.f-margin+.f-margin {
    margin-top: 20px
}

.f-margin-top {
    margin-top: 20px !important
}

.f-margin-bottom {
    margin-bottom: 20px !important
}

.f-margin-left {
    margin-left: 20px !important
}

.f-margin-right {
    margin-right: 20px !important
}

.f-margin-vertical {
    margin-bottom: 20px !important;
    margin-top: 20px !important
}

.f-margin-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important
}

*+.f-margin {
    margin-top: 20px
}

.f-margin-small {
    margin-bottom: 10px
}

.f-margin-small+.f-margin-small {
    margin-top: 10px
}

.f-margin-small-top {
    margin-top: 10px !important
}

.f-margin-small-bottom {
    margin-bottom: 10px !important
}

.f-margin-small-left {
    margin-left: 10px !important
}

.f-margin-small-right {
    margin-right: 10px !important
}

.f-margin-small-vertical {
    margin-bottom: 10px !important;
    margin-top: 10px !important
}

.f-margin-small-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important
}

*+.f-margin-small {
    margin-top: 10px
}

.f-margin-medium {
    margin: 40px
}

.f-margin-medium-top {
    margin-top: 40px !important
}

.f-margin-medium-bottom {
    margin-bottom: 40px !important
}

.f-margin-medium-left {
    margin-left: 40px !important
}

.f-margin-medium-right {
    margin-right: 40px !important
}

.f-margin-medium-vertical {
    margin-bottom: 40px !important;
    margin-top: 40px !important
}

.f-margin-medium-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important
}

*+.f-margin-medium {
    margin-top: 40px !important
}

.f-margin-large {
    margin-bottom: 40px
}

.f-margin-large+.f-margin-large {
    margin-top: 40px
}

.f-margin-large-top {
    margin-top: 40px !important
}

.f-margin-large-bottom {
    margin-bottom: 40px !important
}

.f-margin-large-left {
    margin-left: 40px !important
}

.f-margin-large-right {
    margin-right: 40px !important
}

.f-margin-large-vertical {
    margin-bottom: 40px !important;
    margin-top: 40px !important
}

.f-margin-large-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important
}

*+.f-margin-large {
    margin-top: 40px
}

.f-margin-xlarge {
    margin-bottom: 80px
}

.f-margin-xlarge+.f-margin-xlarge {
    margin-top: 80px
}

.f-margin-xlarge-top {
    margin-top: 80px !important
}

.f-margin-xlarge-bottom {
    margin-bottom: 80px !important
}

.f-margin-xlarge-left {
    margin-left: 80px !important
}

.f-margin-xlarge-right {
    margin-right: 80px !important
}

.f-margin-xlarge-vertical {
    margin-bottom: 80px !important;
    margin-top: 80px !important
}

.f-margin-xlarge-horizontal {
    margin-left: 80px !important;
    margin-right: 80px !important
}

*+.f-margin-xlarge {
    margin-top: 80px
}

.f-margin-remove {
    margin: 0 !important
}

.f-margin-top-remove {
    margin-top: 0 !important
}

.f-margin-bottom-remove {
    margin-bottom: 0 !important
}

.f-padding {
    padding: 20px
}

.f-padding-top {
    padding-top: 20px !important
}

.f-padding-bottom {
    padding-bottom: 20px !important
}

.f-padding-left {
    padding-left: 20px !important
}

.f-padding-right {
    padding-right: 20px !important
}

.f-padding-vertical {
    padding-bottom: 20px !important;
    padding-top: 20px !important
}

.f-padding-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.f-padding-small {
    padding: 10px
}

.f-padding-small-top {
    padding-top: 10px !important
}

.f-padding-small-bottom {
    padding-bottom: 10px !important
}

.f-padding-small-left {
    padding-left: 10px !important
}

.f-padding-small-right {
    padding-right: 10px !important
}

.f-padding-small-vertical {
    padding-bottom: 10px !important;
    padding-top: 10px !important
}

.f-padding-small-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.f-padding-medium {
    padding: 30px
}

.f-padding-medium-top {
    padding-top: 30px !important
}

.f-padding-medium-bottom {
    padding-bottom: 30px !important
}

.f-padding-medium-left {
    padding-left: 30px !important
}

.f-padding-medium-right {
    padding-right: 30px !important
}

.f-padding-medium-vertical {
    padding-bottom: 30px !important;
    padding-top: 30px !important
}

.f-padding-medium-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important
}

.f-padding-large {
    padding: 40px
}

.f-padding-large-top {
    padding-top: 40px !important
}

.f-padding-large-bottom {
    padding-bottom: 40px !important
}

.f-padding-large-left {
    padding-left: 40px !important
}

.f-padding-large-right {
    padding-right: 40px !important
}

.f-padding-large-vertical {
    padding-bottom: 40px !important;
    padding-top: 40px !important
}

.f-padding-large-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.f-padding-xlarge {
    padding: 80px
}

.f-padding-xlarge-top {
    padding-top: 80px !important
}

.f-padding-xlarge-bottom {
    padding-bottom: 80px !important
}

.f-padding-xlarge-left {
    padding-left: 80px !important
}

.f-padding-xlarge-right {
    padding-right: 80px !important
}

.f-padding-xlarge-vertical {
    padding-bottom: 80px !important;
    padding-top: 80px !important
}

.f-padding-xlarge-horizontal {
    padding-left: 80px !important;
    padding-right: 80px !important
}

.f-normalize-child-margin>:first-child {
    margin-top: 0 !important
}

.f-normalize-child-margin>:last-child {
    margin-bottom: 0 !important
}

.f-padding-remove {
    padding: 0 !important
}

.f-padding-top-remove {
    padding-top: 0 !important
}

.f-padding-bottom-remove {
    padding-bottom: 0 !important
}

.f-padding-vertical-remove {
    padding-bottom: 0 !important;
    padding-top: 0 !important
}

.f-border-circle {
    border-radius: 50%
}

.f-border-rounded {
    border-radius: 5px
}

.f-heading-large {
    font-size: 36px;
    line-height: 1.2
}

@media (min-width:768px) {
    .f-heading-large {
        font-size: 52px;
        line-height: 1.2
    }

    .f-dropdown:not(.f-dropdown-stack)>.f-dropdown-grid {
        margin-left: -15px;
        margin-right: -15px
    }

    .f-dropdown:not(.f-dropdown-stack)>.f-dropdown-grid>[class*=f-width-] {
        padding-left: 15px;
        padding-right: 15px
    }

    .f-dropdown:not(.f-dropdown-stack)>.f-dropdown-grid>[class*=f-width-]:nth-child(n+2) {
        border-left: 1px solid #eee
    }

    .f-dropdown-width-2:not(.f-dropdown-stack) {
        width: 400px
    }

    .f-dropdown-width-3:not(.f-dropdown-stack) {
        width: 600px
    }

    .f-dropdown-width-4:not(.f-dropdown-stack) {
        width: 800px
    }

    .f-dropdown-width-5:not(.f-dropdown-stack) {
        width: 1000px
    }
}

.f-link-muted,
.f-link-muted a,
.f-link-muted a:hover,
.f-link-muted:hover {
    color: #222
}

.f-link-reset,
.f-link-reset a,
.f-link-reset a:focus,
.f-link-reset a:hover,
.f-link-reset:focus,
.f-link-reset:hover {
    color: inherit;
    text-decoration: none
}

.f-scrollable-text {
    height: 300px;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    resize: both
}

.f-scrollable-box {
    border: 1px solid #eee;
    box-sizing: border-box;
    height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    resize: both
}

.f-scrollable-box>:last-child {
    margin-bottom: 0
}

.f-overflow-hidden {
    overflow: hidden
}

.f-overflow-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.f-overflow-container>:last-child {
    margin-bottom: 0
}

.f-position-absolute,
[class*=f-position-bottom],
[class*=f-position-top] {
    position: absolute !important
}

.f-position-top {
    top: 0;
    width: 100%
}

.f-position-bottom {
    bottom: 0;
    width: 100%
}

.f-position-top-left {
    left: 0;
    top: 0
}

.f-position-top-right {
    right: 0;
    top: 0
}

.f-position-bottom-left {
    bottom: 0;
    left: 0
}

.f-position-bottom-right {
    bottom: 0;
    right: 0
}

.f-position-cover {
    background-color: rgba(0, 0, 0, .001);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.f-position-relative {
    position: relative !important
}

.f-position-z-index {
    z-index: 1
}

.f-display-block {
    display: block !important
}

.f-display-inline {
    display: inline !important
}

.f-display-inline-block {
    display: inline-block !important
}

@media (min-width:1220px) {

    .f-hidden-large-xlarge,
    .f-hidden-xlarge,
    .f-visible-large,
    .f-visible-medium,
    .f-visible-small,
    .f-visible-xsmall,
    .f-visible-xsmall-small {
        display: none !important
    }
}

@media (min-width:960px) and (max-width:1219px) {

    .f-hidden-large,
    .f-hidden-large-xlarge,
    .f-visible-medium,
    .f-visible-small,
    .f-visible-xlarge,
    .f-visible-xsmall,
    .f-visible-xsmall-small {
        display: none !important
    }
}

@media (min-width:768px) and (max-width:959px) {

    .f-hidden-medium,
    .f-visible-large,
    .f-visible-large-xlarge,
    .f-visible-small,
    .f-visible-xlarge,
    .f-visible-xsmall,
    .f-visible-xsmall-small {
        display: none !important
    }
}

@media (min-width:480px) and (max-width:767px) {
    .f-visible-xsmall {
        display: none !important
    }
}

@media (max-width:767px) {

    .f-hidden-small,
    .f-hidden-xsmall-small,
    .f-visible-large,
    .f-visible-large-xlarge,
    .f-visible-medium,
    .f-visible-xlarge {
        display: none !important
    }

    .f-dropdown-grid>[class*=f-width-] {
        width: 100%
    }

    .f-dropdown-grid>[class*=f-width-]:nth-child(n+2) {
        margin-top: 15px
    }
}

@media (max-width:479px) {
    .f-hidden-xsmall {
        display: none !important
    }
}

.f-hidden {
    display: none !important;
    visibility: hidden !important
}

.f-invisible {
    visibility: hidden !important
}

.f-visible-hover:hover .f-hidden,
.f-visible-hover:hover .f-invisible {
    display: block !important;
    visibility: visible !important
}

.f-visible-hover-inline:hover .f-hidden,
.f-visible-hover-inline:hover .f-invisible {
    display: inline-block !important;
    visibility: visible !important
}

.f-notouch .f-hidden-notouch,
.f-touch .f-hidden-touch {
    display: none !important
}

.f-cursor-pointer {
    cursor: pointer
}

.f-cursor-default {
    cursor: default
}

.f-cursor-move {
    cursor: move
}

.f-hyphenate {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word
}

.f-rp-video {
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

.f-rp-video>iframe,
.f-rp-video>svg,
.f-rp-video>video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.f-video-wrap {
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
    position: relative
}

.f-video-wrap iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.f-a11y {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.f-dotnav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    /*margin-left: -15px;*/
    margin-top: -15px;
    padding: 0;
    width: fit-content;
}

.f-dotnav:after,
.f-dotnav:before {
    content: '';
    display: block;
    overflow: hidden
}

.f-dotnav:after {
    clear: both
}

.f-dotnav>* {
    flex: none;
    float: left;
    margin-top: 15px;
    padding-left: 15px
}

.f-dotnav>.f-active>* {
    background-color: #eee
}

.f-dotnav>*>* {
    background-color: #000;
    border-radius: 50%;
    box-sizing: content-box;
    display: block;
    height: 11px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 11px;
    transition: background-color .2s linear
}

.f-dotnav>*>:focus,
.f-dotnav>*>:hover {
    background-color: #eee;
    outline: 0
}

.f-dotnav-contrast>*>*,
.f-dotnav>*>:active {
    background-color: #ccc
}

.f-dotnav-contrast>*>:active,
.f-dotnav-contrast>*>:focus,
.f-dotnav-contrast>*>:hover,
.f-dotnav-contrast>.f-active>* {
    background-color: #000
}

.f-dotnav-vertical {
    flex-direction: column
}

.f-dotnav-vertical>* {
    float: none
}

.ie9 .f-dotnav.f-flex-center {
    left: calc(50% - 15px);
    transform: translateX(-50%);
    width: auto
}

.f-dropdown,
.f-dropdown-blank {
    box-sizing: border-box;
    display: none;
    left: 0;
    position: absolute;
    top: 100%;
    width: 200px;
    z-index: 970
}

.f-dropdown-blank.f-dropdown-enabled,
.f-dropdown.f-dropdown-enabled {
    margin-top: 5px
}

.f-dropdown {
    background-color: #fff;
    border: 1px solid #eee;
    color: #222;
    font-size: 1rem;
    padding: 15px;
    vertical-align: top
}

.f-dropdown .f-nav {
    margin: 0 -15px
}

.f-dropdown:focus {
    outline: 0
}

.f-open>.f-dropdown,
.f-open>.f-dropdown-blank {
    -webkit-animation: .2s ease-in-out f-fade;
    animation: .2s ease-in-out f-fade;
    display: block;
    transform-origin: 0 0
}

.f-dropdown-top {
    margin-top: -5px
}

.f-dropdown-bottom {
    margin-top: 5px
}

.f-dropdown-left {
    margin-left: -5px
}

.f-dropdown-right {
    margin-left: 5px
}

.f-dropdown-grid>[class*=f-width-]>.f-panel+.f-panel,
.f-grid .f-dropdown-grid+.f-dropdown-grid {
    margin-top: 15px
}

.f-dropdown-stack>.f-dropdown-grid>[class*=f-width-] {
    width: 100%
}

.f-dropdown-stack>.f-dropdown-grid>[class*=f-width-]:nth-child(n+2) {
    margin-top: 15px
}

.f-dropdown-small {
    min-width: 150px;
    padding: 5px;
    white-space: nowrap;
    width: auto
}

.f-dropdown-small .f-nav {
    margin: 0 -5px
}

.f-dropdown-navbar {
    background: #fff;
    color: #222;
    margin: 0
}

.f-dropdown-navbar.f-dropdown-enabled {
    margin-top: 0
}

.f-open>.f-dropdown-navbar {
    -webkit-animation: .2s ease-in-out f-slide-top-fixed;
    animation: .2s ease-in-out f-slide-top-fixed
}

.f-dropdown-scrollable {
    max-height: 200px;
    overflow-y: auto
}

.f-check-dropdown .f-check-dropdown-box {
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    color: #222;
    min-height: 30px;
    padding: 4px 30px 4px 6px;
    position: relative
}

.f-check-dropdown .f-check-dropdown-box>i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.f-check-dropdown .f-dropdown {
    max-height: 140px;
    overflow-y: scroll;
    width: 100%
}

.f-check-dropdown .f-dropdown.f-dropdown-bottom {
    margin-top: -1px
}

.f-check-dropdown .f-dropdown label {
    display: block
}

.f-lazyload-background {
    overflow: hidden;
    position: relative
}

.f-lazyload-image {
    background-size: cover;
    display: block;
    position: relative
}

.f-lazyload-image>.f-lazyload-placeholder {
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 1s ease-out;
    width: 100%
}

.f-lazyload-image>img {
    transition: opacity 1s ease-out
}

.f-lazyload-image.f-lazyload-start>img,
.f-lazyload-image.f-lazyloaded>.f-lazyload-placeholder {
    opacity: 0
}

.f-lazyload-image.f-lazyloaded>img {
    opacity: 1
}

.f-lazyload-cover {
    background-position: center top;
    background-size: 100% auto;
    height: 100%;
    left: 0;
    position: absolute !important;
    top: 0;
    width: 100%
}

.f-lazyload-cover>.f-lazyload-placeholder,
.f-lazyload-cover>img {
    height: auto;
    left: 50%;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto
}

.f-modal {
    background-color: rgba(0, 0, 0, .6);
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    position: fixed;
    right: 0;
    top: 0;
    touch-action: cross-slide-y pinch-zoom double-tap-zoom;
    transition: opacity .15s linear;
    z-index: 1010
}

.f-modal.f-open {
    opacity: 1
}

.f-modal.f-no-transition {
    opacity: 1;
    transition: none
}

.f-modal-page,
.f-modal-page body {
    overflow: hidden
}

.f-modal-dialog {
    background-color: #fff;
    box-sizing: border-box;
    margin: 50px auto;
    max-width: calc(100% - 20px);
    opacity: 0;
    padding: 20px;
    position: relative;
    transform: translateY(-100px);
    transition: opacity .3s linear, transform .3s ease-out;
    width: 600px
}

.f-modal-dialog.f-modal-hidden {
    transform: translateY(0)
}

.f-modal-dialog>:not([class*=f-modal-]):last-child {
    margin-bottom: 0
}

.f-modal-dialog>.f-close:first-child {
    float: right;
    margin: -10px -10px 0 0
}

.f-modal-dialog>.f-close:first-child+:not([class*=f-modal-]) {
    margin-top: 0
}

.f-modal-dialog>.f-close:first-child>i {
    display: block
}

.f-open .f-modal-dialog {
    opacity: 1;
    transform: translateY(0)
}

.f-open .f-modal-dialog.f-modal-hidden {
    opacity: 1;
    visibility: hidden
}

.f-open .f-modal-dialog.f-modal-hidden.f-active {
    opacity: 1;
    visibility: visible
}

.f-modal-dialog-lightbox {
    max-width: calc(100% - 30px);
    min-height: 100px;
    padding: 0
}

.f-modal-dialog-lightbox>.f-close:first-child {
    float: none;
    margin: 0;
    position: absolute;
    right: -18px;
    top: -18px
}

.f-lightbox-zoom {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1011
}

.f-lightbox-zoom>img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    bottom: -1000%;
    height: auto;
    left: -1000%;
    margin: auto !important;
    max-height: none !important;
    max-width: none !important;
    position: absolute !important;
    right: -1000%;
    top: -1000%;
    transform-origin: 50% 50% !important;
    transition: transform .2s ease-out;
    width: auto;
    will-change: transform
}

.f-lightbox-zoom .f-lightbox-zoom-close {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1012
}

.f-lightbox-zoom-tip {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 4px;
    bottom: 0;
    color: #fff;
    left: 50%;
    padding: 2px 5px;
    position: absolute;
    transform: translateX(-50%)
}

@media (max-width:767px) {
    .f-modal-dialog {
        margin: 10px auto;
        width: auto
    }

    .f-modal-dialog-lightbox>.f-close:first-child {
        right: -7px;
        top: -7px
    }
}

.f-modal-dialog-blank {
    margin: 0;
    max-width: 100%;
    padding: 0;
    transition: opacity .3s linear;
    width: 100%
}

.f-modal-dialog-blank>.f-close:first-child {
    float: none;
    margin: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1
}

@media (min-width:768px) {
    .f-modal-dialog-large {
        width: 930px
    }
}

@media (min-width:1220px) {
    .f-modal-dialog-large {
        width: 1130px
    }
}

.f-modal-header {
    background: #eee;
    border-bottom: 1px solid #e1e1e1;
    margin: -20px -20px 15px;
    padding: 20px
}

.f-modal-footer {
    background: #eee;
    border-top: 1px solid #e1e1e1;
    margin: 15px -20px -20px
}

.f-modal-footer>:last-child,
.f-modal-header>:last-child {
    margin-bottom: 0
}

.f-modal-caption {
    bottom: -20px;
    color: #fff;
    left: 0;
    margin-bottom: -10px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.f-modal-over {
    background-color: #fff;
    opacity: 1;
    position: absolute;
    transition: background-color .4s ease-out, height .4s ease-out, left .4s ease-out, opacity linear, top .4s ease-out, width .4s ease-out, visibility .1333333333s linear, z-index linear;
    visibility: visible;
    z-index: 1011
}

.f-modal-over.f-active {
    opacity: 0;
    transition: background-color .4s ease-out, height .4s ease-out, left .4s ease-out, opacity .1333333333s linear, top .4s ease-out, width .4s ease-out, visibility .1333333333s linear, z-index .1333333333s linear;
    visibility: hidden;
    z-index: 1009
}

.f-modal-over.f-gone {
    opacity: 0;
    transition: opacity .2s linear, visibility .2s linear;
    visibility: hidden
}

.f-modal-spinner {
    color: #eee;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.f-modal-spinner i {
    font-size: 1.875rem;
    display: block
}

.f-modal-alert .f-modal-icon {
    border: 4px solid grey;
    border-radius: 50%;
    box-sizing: content-box;
    height: 80px;
    margin: 20px auto;
    padding: 0;
    position: relative;
    width: 80px
}

.f-modal-alert .f-modal-icon.f-modal-error,
.f-modal-alert .f-modal-icon.f-modal-success {
    border-color: #8ec73b
}

.f-modal-alert .f-modal-icon.f-modal-error:after,
.f-modal-alert .f-modal-icon.f-modal-error:before,
.f-modal-alert .f-modal-icon.f-modal-success:after,
.f-modal-alert .f-modal-icon.f-modal-success:before {
    background: #fff;
    content: '';
    height: 120px;
    position: absolute;
    width: 60px
}

.f-modal-alert .f-modal-icon.f-modal-error:before,
.f-modal-alert .f-modal-icon.f-modal-success:before {
    border-radius: 120px 0 0 120px;
    left: -33px;
    top: -7px;
    transform: rotate(-45deg);
    transform-origin: 60px 60px
}

.f-modal-alert .f-modal-icon.f-modal-error:after,
.f-modal-alert .f-modal-icon.f-modal-success:after {
    border-radius: 0 120px 120px 0;
    left: 30px;
    top: -11px;
    transform: rotate(-45deg);
    transform-origin: 0 60px
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder,
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-placeholder {
    border: 4px solid rgba(165, 220, 134, .2);
    border-radius: 50%;
    box-sizing: content-box;
    height: 80px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 80px;
    z-index: 2
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-fix,
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-fix {
    background-color: #fff;
    height: 90px;
    left: 28px;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 5px;
    z-index: 1
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line,
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line {
    background-color: #8ec73b;
    border-radius: 2px;
    display: block;
    height: 5px;
    position: absolute;
    z-index: 2
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip,
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip {
    left: 14px;
    top: 46px;
    transform: rotate(45deg);
    width: 25px
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-long,
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-long {
    right: 8px;
    top: 38px;
    transform: rotate(-45deg);
    width: 47px
}

.f-modal-alert .f-modal-icon.f-modal-error {
    border-color: #da314b
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-x-mark {
    display: block;
    position: relative;
    z-index: 2
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
    border: 4px solid rgba(200, 0, 0, .2)
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
    background-color: #da314b;
    top: 37px;
    width: 47px
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-left {
    left: 17px;
    transform: rotate(45deg)
}

.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-right {
    right: 16px;
    transform: rotate(-45deg)
}

.f-modal-alert .f-modal-icon.f-modal-warning {
    border-color: #faa732
}

.f-modal-alert .f-modal-icon.f-modal-warning:before {
    -webkit-animation: 2s linear infinite pulseWarning;
    animation: 2s linear infinite pulseWarning;
    background-color: #fff;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%
}

.f-modal-alert .f-modal-icon.f-modal-warning:after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1
}

.f-modal-alert .f-modal-icon.f-modal-warning .f-modal-body {
    background-color: #faa732;
    border-radius: 2px;
    height: 47px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 10px;
    width: 5px;
    z-index: 2
}

.f-modal-alert .f-modal-icon.f-modal-warning .f-modal-dot {
    background-color: #faa732;
    border-radius: 50%;
    bottom: 10px;
    height: 7px;
    left: 50%;
    margin-left: -3px;
    position: absolute;
    width: 7px;
    z-index: 2
}

.f-modal-alert+.f-modal-content {
    text-align: center
}

.animateSuccessTip {
    -webkit-animation: .75s animateSuccessTip;
    animation: .75s animateSuccessTip
}

.animateSuccessLong {
    -webkit-animation: .75s animateSuccessLong;
    animation: .75s animateSuccessLong
}

.f-modal-icon.f-modal-success.animate:after {
    -webkit-animation: 4.25s ease-in rotatePlaceholder;
    animation: 4.25s ease-in rotatePlaceholder
}

.animateErrorIcon {
    -webkit-animation: 1s animateErrorIcon;
    animation: 1s animateErrorIcon
}

.animateXLeft {
    -webkit-animation: .75s animateXLeft;
    animation: .75s animateXLeft
}

.animateXRight {
    -webkit-animation: .75s animateXRight;
    animation: .75s animateXRight
}

.scaleWarning {
    -webkit-animation: 2s infinite alternate scaleWarning;
    animation: 2s infinite alternate scaleWarning
}

.pulseWarningIns {
    -webkit-animation: .8s pulseWarningIns;
    animation: .8s pulseWarningIns
}

.pulseWarningIns2 {
    -webkit-animation: 1.2s pulseWarningIns2;
    animation: 1.2s pulseWarningIns2
}

@-webkit-keyframes animateSuccessTip {

    0%,
    54% {
        left: 1px;
        top: 19px;
        width: 0
    }

    70% {
        left: -8px;
        top: 37px;
        width: 50px
    }

    84% {
        left: 21px;
        top: 48px;
        width: 17px
    }

    100% {
        left: 14px;
        top: 45px;
        width: 25px
    }
}

@keyframes animateSuccessTip {

    0%,
    54% {
        left: 1px;
        top: 19px;
        width: 0
    }

    70% {
        left: -8px;
        top: 37px;
        width: 50px
    }

    84% {
        left: 21px;
        top: 48px;
        width: 17px
    }

    100% {
        left: 14px;
        top: 45px;
        width: 25px
    }
}

@-webkit-keyframes animateSuccessLong {

    0%,
    65% {
        right: 46px;
        top: 54px;
        width: 0
    }

    84% {
        right: 0;
        top: 35px;
        width: 55px
    }

    100% {
        right: 8px;
        top: 38px;
        width: 47px
    }
}

@keyframes animateSuccessLong {

    0%,
    65% {
        right: 46px;
        top: 54px;
        width: 0
    }

    84% {
        right: 0;
        top: 35px;
        width: 55px
    }

    100% {
        right: 8px;
        top: 38px;
        width: 47px
    }
}

@-webkit-keyframes rotatePlaceholder {

    0%,
    5% {
        transform: rotate(-45deg)
    }

    100%,
    12% {
        transform: rotate(-405deg)
    }
}

@keyframes rotatePlaceholder {

    0%,
    5% {
        transform: rotate(-45deg)
    }

    100%,
    12% {
        transform: rotate(-405deg)
    }
}

@-webkit-keyframes animateErrorIcon {

    0%,
    20% {
        opacity: 0;
        transform: rotateX(100deg)
    }

    100% {
        opacity: 1;
        transform: rotateX(0)
    }
}

@keyframes animateErrorIcon {

    0%,
    20% {
        opacity: 0;
        transform: rotateX(100deg)
    }

    100% {
        opacity: 1;
        transform: rotateX(0)
    }
}

@-webkit-keyframes animateXLeft {

    0%,
    65% {
        left: 82px;
        top: 95px;
        width: 0
    }

    84% {
        left: 14px;
        top: 33px;
        width: 47px
    }

    100% {
        left: 17px;
        top: 37px;
        width: 47px
    }
}

@keyframes animateXLeft {

    0%,
    65% {
        left: 82px;
        top: 95px;
        width: 0
    }

    84% {
        left: 14px;
        top: 33px;
        width: 47px
    }

    100% {
        left: 17px;
        top: 37px;
        width: 47px
    }
}

@-webkit-keyframes animateXRight {

    0%,
    65% {
        right: 82px;
        top: 95px;
        width: 0
    }

    84% {
        right: 14px;
        top: 33px;
        width: 47px
    }

    100% {
        right: 16px;
        top: 37px;
        width: 47px
    }
}

@keyframes animateXRight {

    0%,
    65% {
        right: 82px;
        top: 95px;
        width: 0
    }

    84% {
        right: 14px;
        top: 33px;
        width: 47px
    }

    100% {
        right: 16px;
        top: 37px;
        width: 47px
    }
}

@-webkit-keyframes scaleWarning {

    0%,
    67.5% {
        transform: scale(1)
    }

    68% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes scaleWarning {

    0%,
    67.5% {
        transform: scale(1)
    }

    68% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes pulseWarning {

    0%,
    30% {
        background-color: #fff;
        opacity: .5;
        transform: scale(1)
    }

    100% {
        background-color: #faa732;
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes pulseWarning {

    0%,
    30% {
        background-color: #fff;
        opacity: .5;
        transform: scale(1)
    }

    100% {
        background-color: #faa732;
        opacity: 0;
        transform: scale(2)
    }
}

@-webkit-keyframes pulseWarningIns {

    0%,
    40% {
        background-color: #fbbc64;
        opacity: 0;
        transform: translateY(-20px)
    }

    75% {
        background-color: #fbb24b;
        opacity: .5;
        transform: translateY(10px)
    }

    80% {
        background-color: #fbb24b;
        opacity: 1;
        transform: translateY(5px)
    }

    100% {
        background-color: #faa732;
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes pulseWarningIns {

    0%,
    40% {
        background-color: #fbbc64;
        opacity: 0;
        transform: translateY(-20px)
    }

    75% {
        background-color: #fbb24b;
        opacity: .5;
        transform: translateY(10px)
    }

    80% {
        background-color: #fbb24b;
        opacity: 1;
        transform: translateY(5px)
    }

    100% {
        background-color: #faa732;
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes pulseWarningIns2 {

    0%,
    40%,
    60% {
        background-color: #fbbc64;
        border-radius: 0;
        opacity: 0;
        transform: rotate(0) scale(1.5)
    }

    100% {
        background-color: #faa732;
        border-radius: 50%;
        opacity: 1;
        transform: rotate(365deg) scale(1)
    }
}

@keyframes pulseWarningIns2 {

    0%,
    40%,
    60% {
        background-color: #fbbc64;
        border-radius: 0;
        opacity: 0;
        transform: rotate(0) scale(1.5)
    }

    100% {
        background-color: #faa732;
        border-radius: 50%;
        opacity: 1;
        transform: rotate(365deg) scale(1)
    }
}

.f-notify {
    box-sizing: border-box;
    left: 10px;
    position: fixed;
    top: 10px;
    width: 350px;
    z-index: 1040
}

.f-notify-bottom-right,
.f-notify-top-right {
    left: auto;
    right: 10px
}

.f-notify-bottom-center,
.f-notify-top-center {
    left: 50%;
    margin-left: -175px
}

.f-notify-bottom-center,
.f-notify-bottom-left,
.f-notify-bottom-right {
    bottom: 10px;
    top: auto
}

@media (max-width:479px) {
    .f-notify {
        left: 10px;
        margin: 0;
        right: 10px;
        width: auto
    }
}

.f-notify-message {
    background: #222;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    padding: 15px;
    position: relative
}

.f-notify-message-info {
    background: #ebf7fd;
    color: #20a5de
}

.f-notify-message-success {
    background: #f2fae3;
    color: #8ec73b
}

.f-notify-message-warning {
    background: #fffceb;
    color: #faa732
}

.f-notify-message-danger {
    background: #fff1f0;
    color: #da314b
}

.f-notify-message .material-icons {
    font-size: 1rem
}

.f-notify-message>.f-close {
    float: right;
    line-height: 22px;
    opacity: 0;
    transition: opacity .2s linear, visibility .2s linear .2s;
    visibility: hidden
}

.f-notify-message:hover>.f-close {
    opacity: 1;
    transition: opacity .2s linear, visibility .2s linear;
    visibility: visible
}

.f-offcanvas {
    background-color: rgba(0, 0, 0, .1);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    touch-action: none;
    z-index: 1000
}

.f-offcanvas.f-active {
    display: block
}

.f-offcanvas.f-active .f-offcanvas-bar-flip[mode=reveal].f-offcanvas-bar-show>*,
.f-offcanvas.f-active .f-offcanvas-bar.f-offcanvas-bar-show {
    transform: translateX(0)
}

.f-offcanvas.f-offcanvas-overlaid {
    display: block;
    visibility: hidden
}

.f-offcanvas.f-offcanvas-overlaid.f-active {
    visibility: visible
}

.f-offcanvas .f-panel {
    color: #999;
    margin: 20px 15px
}

.f-offcanvas .f-panel a:not([class]) {
    color: #eee
}

.f-offcanvas .f-panel a:not([class]):hover {
    color: #fff
}

.f-offcanvas .f-panel-title {
    color: #eee
}

.f-offcanvas-page {
    margin-left: 0;
    position: fixed;
    transition: margin-left .3s ease-in-out
}

.f-offcanvas-bar {
    background-color: #333;
    bottom: 0;
    left: 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    position: fixed;
    -ms-scroll-chaining: none;
    top: 0;
    transform: translateX(-100%);
    transition: left .3s ease-in-out, transform .3s ease-in-out;
    width: 270px;
    z-index: 1001
}

.f-offcanvas-bar[mode=none] {
    transition: none
}

.f-offcanvas-bar[mode=reveal] {
    clip: rect(0, 0, 100vh, 0);
    transform: translateX(0);
    transition: transform .3s ease-in-out, clip .3s ease-in-out
}

.f-offcanvas-bar-flip[mode=reveal] {
    clip: none;
    transform: translateX(100%)
}

.f-offcanvas-bar-flip[mode=reveal]>* {
    transform: translateX(-100%);
    transition: transform .3s ease-in-out
}

.f-offcanvas-bar-flip {
    left: auto;
    right: 0;
    transform: translateX(100%)
}

.f-offcanvas-back,
.f-offcanvas-closeall {
    font-size: 1rem;
    background-color: #4d4c4c;
    border: 0;
    color: #eee;
    cursor: pointer;
    display: block;
    height: 38px;
    margin-top: 20px;
    padding: 0 20px;
    position: relative;
    width: 100%
}

.f-offcanvas-back span,
.f-offcanvas-closeall span {
    position: absolute;
    right: 20px;
    top: 10px;
    transition: right .3s ease-in-out
}

.f-offcanvas-back i,
.f-offcanvas-closeall i {
    left: 15px;
    position: absolute;
    top: 7px;
    transition: left .3s ease-in-out
}

.f-offcanvas-inactive .f-offcanvas-back,
.f-offcanvas-inactive .f-offcanvas-closeall {
    background-color: #404040
}

.f-offcanvas-inactive .f-offcanvas-back span,
.f-offcanvas-inactive .f-offcanvas-closeall span {
    right: calc(100% - 28px)
}

.f-offcanvas-inactive .f-offcanvas-back i,
.f-offcanvas-inactive .f-offcanvas-closeall i {
    left: calc(100% - 28px)
}

.f-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    touch-action: cross-slide-y pinch-zoom double-tap-zoom
}

.f-switcher>:not(.f-active) {
    display: none
}

.f-accordion-title {
    background: #eee;
    cursor: pointer;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 15px;
    margin-top: 0;
    padding: 5px 15px
}

.f-accordion-content {
    padding: 0 15px 15px
}

.f-accordion-content>:last-child {
    margin-bottom: 0
}

.f-accordion-content:after,
.f-accordion-content:before {
    content: '';
    display: table
}

.f-accordion-content:after {
    clear: both
}

.f-countdown {
    list-style: none;
    text-align: center;
    text-transform: uppercase
}

.f-countdown li {
    display: inline-block;
    padding: 0 20px
}

.f-countdown .f-countdown-number {
    display: block;
    font-size: 32px
}

.f-countdown-divider li {
    border-right: 1px solid #eee
}

.f-countdown-divider li:last-child {
    border-right-width: 0
}

.f-countdown-stacked li {
    display: block
}

.f-countdown-stacked.f-countdown-divider li {
    border-bottom: 1px solid #eee;
    border-right: 0
}

.f-countdown-stacked.f-countdown-divider li:last-child {
    border-bottom: 0
}

@media screen and (min-width:768px) {
    .f-countdown-stacked li {
        display: inline-block
    }

    .f-countdown-stacked.f-countdown-divider li {
        border-bottom: 0;
        border-right: 1px solid #eee
    }

    .f-countdown-stacked.f-countdown-divider li:last-child {
        border-right-width: 0
    }
}

.f-slidenav {
    font-size: 3.75rem;
    background-color: transparent;
    border: 0;
    box-sizing: border-box;
    color: rgba(34, 34, 34, .4);
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    width: 60px;
    transition: color .2s linear
}

.f-slidenav>i {
    font-size: 3.75rem;
    font-weight: 100
}

.f-slidenav:focus,
.f-slidenav:hover {
    color: rgba(34, 34, 34, .7);
    cursor: pointer;
    outline: 0;
    text-decoration: none
}

.f-slidenav:active {
    color: rgba(34, 34, 34, .9)
}

.f-slidenav-position {
    position: relative
}

.f-slidenav-position:hover .f-slidenav {
    opacity: 1
}

.f-slidenav-position .f-slidenav {
    margin-top: -30px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transition: opacity .2s linear;
    z-index: 1
}

.f-slidenav-position .f-slidenav-previous {
    left: 10px
}

.f-slidenav-position .f-slidenav-next {
    right: 10px
}

@media screen and (min-width:768px) {
    .f-slidenav-position .f-slidenav-previous {
        left: 40px
    }

    .f-slidenav-position .f-slidenav-next {
        right: 40px
    }
}

.f-slidenav-contrast {
    color: rgba(255, 255, 255, .5)
}

.f-slidenav-contrast:focus,
.f-slidenav-contrast:hover {
    color: rgba(255, 255, 255, .7)
}

.f-slidenav-contrast:active {
    color: rgba(255, 255, 255, .9)
}

[data-f-slider] {
    direction: ltr
}

html[dir=rtl] .f-slider>* {
    direction: rtl
}

.f-slider {
    position: relative;
    touch-action: pan-y;
    z-index: 0
}

.f-slider:not(.f-grid) {
    list-style: none;
    margin: 0;
    padding: 0
}

.f-slider>* {
    left: 0;
    position: absolute;
    top: 0
}

.f-slider.f-drag {
    cursor: col-resize;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.f-slider img {
    pointer-events: none
}

.f-slider-container {
    overflow: hidden
}

.f-slider-container+.f-slide-handle {
    background-color: #ebf7fd;
    display: none;
    height: 5px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    z-index: 2
}

.f-slider-container+.f-slide-handle .f-drag-handle {
    background-color: #d4eefb;
    border: 1px solid #a5dbf6;
    cursor: pointer;
    display: block;
    height: 20px;
    position: absolute;
    top: -7.5px;
    transform: translateX(0);
    transition: background-color .2s linear, border .2s linear, transform .1s linear;
    width: 120px;
    z-index: 1
}

.f-slider-container+.f-slide-handle .f-drag-handle.f-handle-drag,
.f-slider-container+.f-slide-handle .f-drag-handle:hover {
    background-color: #a5dbf6;
    border-color: #8ed2f4
}

.f-slider-container+.f-slide-handle .f-slide-step {
    float: left;
    height: 5px
}

@media only screen and (min-width:960px) {
    .f-slider.f-slider-fancy>li>div {
        transform: scale(.95);
        transform-origin: center;
        transition: transform .1s linear
    }

    .f-slider.f-slider-fancy>li.f-next>div,
    .f-slider.f-slider-fancy>li.f-previous>div {
        transform: scale(1.05);
        z-index: 1
    }

    .f-slider.f-slider-fancy>li.f-active>div {
        transform: scale(1.15);
        z-index: 2
    }

    .f-slider-container+.f-slide-handle {
        display: block
    }
}

.f-slider:not(.f-drag) {
    transition: transform .2s linear
}

.f-slider a,
.f-slider img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none
}

.f-slider-fullscreen,
.f-slider-fullscreen>li {
    height: 100vh
}

.f-slider-slideshow-nav li {
    box-sizing: border-box;
    cursor: pointer
}

.f-slider-slideshow-nav li:before {
    border: 2px solid transparent;
    box-sizing: border-box;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.f-slider-slideshow-nav .f-active:before {
    border-color: #20a5de
}

.f-slideshow {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    touch-action: pan-y;
    width: 100%;
    z-index: 1
}

.f-slideshow.f-active>li {
    display: block;
    position: absolute
}

.f-slideshow>li {
    display: none;
    left: 0;
    opacity: 0;
    top: 0;
    width: 100%
}

.f-slideshow>li:first-child {
    display: block
}

.f-slideshow>li>img {
    visibility: hidden
}

.f-slideshow>li>a>img {
    width: 100%
}

.f-slideshow>.f-active {
    opacity: 1;
    z-index: 10
}

[data-f-slideshow-slide] {
    cursor: pointer
}

.f-slideshow-fullscreen,
.f-slideshow-fullscreen>li {
    height: 100vh
}

.f-slideshow-fade-in {
    -webkit-animation: .5s linear forwards f-fade;
    animation: .5s linear forwards f-fade
}

.f-slideshow-fade-out {
    animation: .5s linear reverse forwards f-fade;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-scroll-forward-in {
    -webkit-animation: .5s ease-in-out forwards f-slide-right;
    animation: .5s ease-in-out forwards f-slide-right
}

.f-slideshow-scroll-forward-out {
    animation: .5s ease-in-out reverse forwards f-slide-left;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-scroll-backward-in {
    -webkit-animation: .5s ease-in-out forwards f-slide-left;
    animation: .5s ease-in-out forwards f-slide-left
}

.f-slideshow-scroll-backward-out {
    animation: .5s ease-in-out reverse forwards f-slide-right;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-scale-out {
    animation: .5s ease-in-out reverse forwards f-fade-scale-15;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-swipe-forward-in {
    -webkit-animation: .5s ease-in-out forwards f-slide-left-33;
    animation: .5s ease-in-out forwards f-slide-left-33
}

.f-slideshow-swipe-forward-out {
    animation: .5s ease-in-out reverse forwards f-slide-left;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-swipe-backward-in {
    -webkit-animation: .5s ease-in-out forwards f-slide-right-33;
    animation: .5s ease-in-out forwards f-slide-right-33
}

.f-slideshow-swipe-backward-out {
    animation: .5s ease-in-out reverse forwards f-slide-right;
    -webkit-animation-fill-mode: forwards
}

.f-slideshow-swipe-backward-in:before,
.f-slideshow-swipe-forward-in:before {
    animation: .5s ease-in-out reverse forwards f-fade;
    -webkit-animation-fill-mode: forwards;
    background: rgba(0, 0, 0, .6);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

[data-f-sticky].f-active {
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    z-index: 980
}

[data-f-sticky][class*=f-animation-] {
    -webkit-animation-duration: .15s;
    animation-duration: .15s
}

[data-f-sticky].f-animation-reverse {
    -webkit-animation-duration: .04s;
    animation-duration: .04s
}

.j-accordion .f-accordion-title {
    font-size: 1rem;
    border-radius: 5px;
    line-height: 1;
    margin: 10px 0 0;
    padding: 14px 15px
}

.j-accordion .f-accordion-title:before {
    font-size: 1.875rem;
    content: '+';
    float: right;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    line-height: .5;
    margin-left: 10px;
    text-align: center;
    width: 18px
}

@media screen and (min-width:480px) {
    .j-accordion .f-accordion-title {
        font-size: calc(16px + 4 * (100vw - 480px)/ 740)
    }

    .j-accordion .f-accordion-title:before {
        font-size: calc(30px + 8 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .f-column-xlarge-1-2 {
        -moz-column-count: 2;
        column-count: 2
    }

    .f-column-xlarge-1-3 {
        -moz-column-count: 3;
        column-count: 3
    }

    .f-column-xlarge-1-4 {
        -moz-column-count: 4;
        column-count: 4
    }

    .f-column-xlarge-1-5 {
        -moz-column-count: 5;
        column-count: 5
    }

    .f-column-xlarge-1-6 {
        -moz-column-count: 6;
        column-count: 6
    }

    .f-flex-order-first-xlarge {
        order: -1
    }

    .f-flex-order-last-xlarge {
        order: 99
    }

    .j-accordion .f-accordion-title {
        font-size: 1.25rem
    }

    .j-accordion .f-accordion-title:before {
        font-size: 2.375rem
    }
}

.j-accordion .f-accordion-title:first-child {
    margin-top: 0
}

.j-accordion .f-accordion-title.f-active {
    border-radius: 5px 5px 0 0
}

.j-accordion .f-accordion-title.f-active:before {
    content: '\02013'
}

.j-accordion .f-accordion-title.alt {
    background-color: #20a5de;
    color: #fff
}

.j-accordion .f-accordion-content {
    background-color: #eee;
    border-radius: 0 0 5px 5px;
    margin-top: -1px;
    padding: 1px 15px 15px
}

.j-accordion .f-accordion-content.alt {
    background-color: #20a5de;
    color: #fff
}

.j-accordion .f-accordion-content.alt a,
.j-accordion .f-accordion-content.alt h3,
.j-accordion .f-accordion-content.alt h4 {
    color: #fff
}

.j-accordion .f-accordion-content h3 {
    font-size: 1rem
}

.j-accordion .f-accordion-content h4 {
    font-size: .875rem
}

.j-accordion .f-accordion-content h3,
.j-accordion .f-accordion-content h4 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin-bottom: 10px
}

.j-accordion .f-accordion-content h3+p,
.j-accordion .f-accordion-content h4+p {
    margin-top: 0
}

.j-accordion+.sharea {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .j-accordion .f-accordion-title {
        padding: 20px 30px
    }

    .j-accordion .f-accordion-content {
        padding: 0 30px 20px
    }
}

.f-alert {
    border-radius: 5px
}

.f-alert-jblue {
    background-color: #20a5de;
    color: #fff
}

.banner {
    position: relative
}

.banner .flipped .f-lazyload-background {
    display: flex;
    flex-direction: column;
    width: 100%
}

.banner .f-slidenav {
    background-color: #fff;
    color: #222;
    height: auto;
    line-height: 1;
    opacity: 1;
    padding: 5px;
    top: 30%;
    width: auto
}

.banner .f-slidenav>.material-icons {
    font-size: 1.875rem;
    display: block;
    top: 0
}

.banner .f-slidenav-previous {
    left: 0
}

.banner .f-slidenav-next {
    right: 0
}

.banner .f-lazyload-background {
    position: relative
}

.banner .f-lazyload-background img {
    width: 100%
}

.banner a {
    z-index: 1
}

.banner a:focus+div .f-btn-ghost,
.banner a:hover+div .f-btn-ghost {
    background-color: #fff;
    border-color: #fff;
    color: #000
}

.banner a:focus+div .f-btn-black,
.banner a:focus+div .f-btn-dgrey,
.banner a:hover+div .f-btn-black,
.banner a:hover+div .f-btn-dgrey {
    background-color: #fff;
    border-color: #fff;
    color: #222
}

.banner a:focus+div .f-btn-sale,
.banner a:hover+div .f-btn-sale {
    background-color: #c11d1f;
    border-color: #c11d1f;
    color: #fff
}

.banner.sale {
    background-color: #c11d1f
}

.banner-inner {
    background-color: #000
}

.banner-inner.alt {
    background-color: transparent;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.sale .banner-inner {
    background-color: transparent;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%
}

.sale .banner-inner .f-container {
    align-items: flex-end;
    display: flex;
    width: calc(100vw - 60px)
}

.discover .banner-inner {
    background-color: transparent;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%
}

.banner-content {
    color: #fff;
    padding: 20px;
    text-align: center;
    text-shadow: 0 0 8px rgba(0, 0, 0, .6)
}

.sale .banner-content {
    width: 100%
}

.sale .banner-content h1 {
    font-size: 6.25rem;
    line-height: .8
}

.sale .banner-content p {
    font-size: 1rem;
    margin: 10px 0;
    text-transform: uppercase
}

@media screen and (min-width:480px) {
    .banner .f-slidenav>.material-icons {
        font-size: calc(30px + 20 * (100vw - 480px)/ 740)
    }

    .sale .banner-content p {
        font-size: calc(16px + 12 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .banner .f-slidenav>.material-icons {
        font-size: 3.125rem
    }

    .sale .banner-content p {
        font-size: 1.75rem
    }
}

.discover .banner-content h1 {
    font-size: 3.125rem;
    line-height: 1;
    text-transform: uppercase
}

.discover .banner-content h1 span {
    font-size: 5rem;
    display: inline-block;
    line-height: .8;
    position: relative;
    text-transform: none
}

.discover .banner-content h1 span:before {
    content: '';
    display: block
}

.discover .banner-content h1 span:after {
    border: 3px solid #37c460;
    content: '';
    left: -20px;
    position: absolute;
    top: calc(100% + 20px);
    width: calc(100% + 40px);
    z-index: -1
}

.banner-content.no-shadow {
    text-shadow: none
}

.banner-content h1 {
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.2
}

@media screen and (min-width:480px) {
    .discover .banner-content h1 {
        font-size: calc(50px + 50 * (100vw - 480px)/ 740)
    }

    .discover .banner-content h1 span {
        font-size: calc(80px + 120 * (100vw - 480px)/ 740)
    }

    .banner-content h1 {
        font-size: calc(24px + 24 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .discover .banner-content h1 {
        font-size: 6.25rem
    }

    .discover .banner-content h1 span {
        font-size: 12.5rem
    }

    .banner-content h1 {
        font-size: 3rem
    }
}

.banner-content h1>img {
    max-width: 150px
}

.banner-content p {
    font-size: 1rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.2
}

@media screen and (min-width:480px) {
    .banner-content p {
        font-size: calc(16px + 4 * (100vw - 480px)/ 740)
    }
}

.banner-content p:last-child {
    margin-bottom: 0
}

.banner-content .f-btn {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    text-shadow: none
}

.banner-strip {
    background-color: #fff;
    padding: 20px 10px;
    position: relative;
    z-index: 1
}

.banner-strip .booking-reset {
    font-size: .75rem;
    margin-bottom: 5px;
    margin-top: -4px;
    text-align: center
}

.banner-strip .booking-reset a {
    color: #fff;
    text-decoration: none
}

.banner-strip .booking-reset a:hover {
    text-decoration: underline
}

.banner-strip .booking-reset input {
    background: #4a4a4a;
    border: 0;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0
}

.banner-strip .f-slidenav {
    background-color: rgba(255, 255, 255, .4);
    height: auto;
    margin: 0;
    opacity: 1;
    transform: translateY(-50%);
    width: 30px
}

.banner-strip .f-slidenav.f-slidenav-previous {
    left: 0
}

.banner-strip .f-slidenav.f-slidenav-next {
    right: 0
}

.banner-strip .f-slidenav .material-icons {
    color: #000;
    display: block;
    margin-left: -15px;
    width: 30px
}

.banner-strip .newsletter-form.f-form.f-form-large input[type=checkbox] {
    border: 1px solid #eee
}

.banner-strip .panel-2 .text-overlay,
.banner-strip .panel-3 .text-overlay {
    position: relative;
    z-index: 1
}

.banner-strip .panel-2 {
    height: 100%;
    position: relative;
    width: 100%
}

.banner-strip .panel-2 ul.f-dotnav {
    left: 10px;
    top: 15px
}

.banner-strip .panel-2 .panel {
    width: 100%
}

.banner-strip .panel-2 .vlogging-desktop {
    display: none
}

.banner-strip .panel-2 picture {
    position: relative
}

.banner-strip .panel-2 .text-overlay {
    background-color: #eee;
    color: #000;
    display: inline-block;
    padding: 20px 0;
    text-align: center;
    width: 100%
}

.banner-strip .panel-2 .text-overlay span {
    font-size: 2.1875rem;
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1em;
    max-width: 95%
}

.banner-strip .panel-2 .text-overlay span:hover {
    color: #000
}

.banner-strip .panel-2 .text-overlay span small {
    font-size: 1.5625rem;
    display: block;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1em;
    margin: 13px 0 0
}

.banner-strip .panel-2 .text-overlay p {
    font-size: .875rem;
    font-weight: 600
}

.banner-strip .panel-2 .text-overlay .offer-price a {
    color: #000;
    text-decoration: none !important
}

.banner-strip .panel-3 {
    background-color: #fff;
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    width: 100%
}

.banner-strip .panel-3 .panel:hover .text-overlay {
    color: #fff
}

.banner-strip .panel-3 .text-overlay {
    background-color: #f9d777;
    box-sizing: border-box;
    padding: 20px;
    width: 100%
}

.banner-strip .panel-3 .text-overlay span {
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 2.1875rem;
    line-height: 1.2em;
    max-width: 260px;
    text-transform: uppercase
}

.banner-strip .panel-3 .text-overlay span small {
    font-size: 1.5625rem;
    display: block;
    font-weight: 300;
    text-transform: none
}

.banner-strip .panel-3 .text-overlay .offer-price {
    font-size: .875rem;
    line-height: normal;
    margin: 10px 0 0;
    padding: 0
}

.banner-strip .panel-3 .text-overlay .offer-price a {
    color: #fff;
    text-decoration: none
}

@media screen and (max-width:766.99px) {
    .banner .flipped .banner-inner {
        order: -1
    }

    .banner.further .banner-inner.alt {
        position: relative
    }

    .banner.further .banner-content {
        padding: 20px 0 0
    }

    .banner.further h1 {
        color: #000
    }

    .banner-content.no-shadow-mob {
        text-shadow: none
    }
}

@media screen and (max-width:958.99px) {
    .sale .banner-content .f-btn-sale {
        padding-bottom: 8px;
        padding-top: 8px
    }
}

@media screen and (min-width:768px) {
    .banner {
        margin-bottom: 30px;
        margin-top: 30px
    }

    .banner.takeover {
        margin-bottom: 0
    }

    .banner .f-slidenav {
        top: 50%
    }

    .banner-inner,
    .banner-inner.alt {
        background-color: transparent;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%
    }

    .banner-inner .f-container,
    .banner-inner.alt .f-container {
        align-items: flex-end;
        display: flex;
        width: calc(100vw - 60px)
    }

    .banner-content {
        margin-left: auto;
        margin-top: -40px;
        padding-right: 40px;
        text-align: left;
        width: 50%
    }

    .sale .banner-content h1 {
        margin-top: 20px
    }

    .discover .banner-content {
        margin: 0;
        padding-right: 0;
        width: 100%
    }

    .discover .banner-content h1 span:after {
        border-width: 5px
    }

    .banner-content.banner-0 {
        margin-left: 0
    }

    .banner-content.banner-1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .banner-content.no-shadow-desk {
        text-shadow: none
    }

    .banner-content h1>img {
        max-width: 220px
    }

    .alt .banner-content {
        margin-left: 0;
        margin-right: auto
    }

    .takeover .banner-content {
        margin-right: auto;
        text-align: center
    }

    .banner-strip {
        background-color: transparent;
        margin: 20px auto 0;
        max-width: 1330px;
        padding: 0;
        width: 100%;
        z-index: 1
    }

    .banner-strip .booking-reset {
        margin-top: -12px
    }

    .banner-strip .panel-2 div,
    .banner-strip .panel-3 div {
        display: block
    }

    .banner-strip .panel-2 div {
        height: 100%
    }

    .banner.banner-small .f-lazyload-background {
        max-height: 600px
    }

    .banner .f-lazyload-image {
        height: 100%
    }

    .banner .f-lazyload-background picture img {
        left: 50%;
        max-width: none;
        min-width: 100%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto
    }
}

@media screen and (min-width:960px) {

    .banner-strip .panel-2,
    .banner-strip .panel-3 {
        padding-top: 0
    }

    .banner-strip .panel-2 ul.f-slideshow,
    .banner-strip .panel-2 ul.f-slideshow li {
        min-height: 100%
    }

    .banner-content {
        width: 50%
    }

    .sale .banner-content h1 {
        font-size: 9.375rem;
        margin-bottom: 30px;
        margin-top: 40px
    }

    .sale .banner-content p {
        margin: 20px 0
    }

    .banner-content h1>img {
        max-width: 290px
    }

    .banner-strip .panel-2 ul.f-slideshow li {
        bottom: 0;
        min-height: 0
    }
}

@media screen and (min-width:1220px) {
    .banner-content p {
        font-size: 1.25rem
    }

    .banner-content {
        margin-top: 0;
        padding-right: 20px;
        width: 40%
    }

    .sale .banner-content h1 {
        font-size: 12.5rem;
        margin-top: 50px
    }

    .banner-strip .panel-2 ul.f-dotnav {
        bottom: 0;
        left: auto;
        top: auto
    }

    .banner-strip .panel-2 picture {
        min-height: 100%;
        position: relative
    }

    .banner-strip .panel-2 picture img {
        left: 50%;
        max-width: none;
        min-height: 100%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto
    }

    .banner-strip .panel-2 .text-overlay {
        background-color: transparent;
        height: auto;
        left: 40px;
        max-width: 292px;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .banner-strip .panel-2 .text-overlay span {
        font-size: 2.1875rem;
        line-height: 1.2em
    }

    .banner-strip .panel-2 .text-overlay span small {
        font-size: 1.5625rem;
        font-weight: 400;
        letter-spacing: -1px;
        line-height: 1.3em;
        margin: 16px auto 0;
        max-width: 200px
    }

    .banner-strip .panel-2 .text-overlay p {
        margin: 15.3846153846px 0 0
    }

    .banner-strip .panel-2 ul {
        overflow: visible
    }

    .banner-strip .panel-2 .vlogging-mobile {
        display: none
    }

    .banner-strip .panel-2 .vlogging-desktop {
        display: block
    }

    .banner-strip .bookings-tab-container h2 {
        font-size: 1.375rem;
        margin-bottom: 35px
    }

    .banner-strip .bookings-tab-container .booking-reset a {
        padding: 0 0 20px
    }
}

@media screen and (min-width:1440px) {
    .sale .banner-content h1 {
        font-size: 14.375rem;
        margin-top: 50px
    }
}

@media screen and (min-width:1600px) {
    .sale .banner-content h1 {
        font-size: 15.625rem;
        margin-top: 0
    }
}

@media (max-height:620px) and (min-width:768px) {
    .banner-content h1 {
        font-size: 2.5rem
    }
}

@media (min-height:400px) and (min-width:768px) and (max-width:1219px) {

    .banner-inner,
    .banner-inner.alt {
        top: calc(50% - 30px)
    }

    .discover .banner-inner,
    .discover .banner-inner.alt {
        top: 50%
    }
}

.basket-form {
    margin-bottom: 40px
}

.basket-container:hover .basket {
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s, visibility .2s;
    visibility: visible
}

.basket {
    background-color: #fff;
    box-sizing: border-box;
    color: #000;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: left;
    top: calc(100% + 10px);
    transition: opacity .2s, visibility .2s .2s;
    visibility: hidden;
    width: 100%;
    z-index: 4
}

.basket:hover {
    opacity: 1;
    pointer-events: all;
    transition: opacity .3s, visibility .3s;
    visibility: visible
}

.basket h2 {
    margin-bottom: 10px;
    text-align: center
}

.basket .f-list {
    padding: 0
}

.basket>p:last-child {
    margin: 0
}

.basket .spinner {
    height: 40px;
    margin: 20px auto 0;
    width: 40px
}

.sub-total {
    font-size: .875rem;
    border-top: 1px solid #eee;
    margin: 0;
    padding-top: 10px
}

.full-total {
    font-size: 1rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    margin: 0 0 5px
}

.basket-item {
    border-top: 1px solid #eee;
    padding: 10px 0
}

.basket-item>img {
    align-self: flex-start;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-right: 10px
}

.basket-item h3 {
    font-size: .8125rem;
    line-height: 1.125;
    margin: 0 0 10px;
    max-width: 180px
}

.basket-item p {
    font-size: .6875rem;
    line-height: 1;
    margin: 0
}

.basket-item .f-btn-faux {
    font-size: .6875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    text-decoration: underline
}

.basket-item .total {
    font-size: .875rem
}

@media screen and (min-width:480px) {
    .basket {
        border: 1px solid #eee;
        border-bottom: 0;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 0 6px 4px rgba(0, 0, 0, .05);
        max-width: 340px;
        padding: 20px;
        top: calc(100% + 20px)
    }

    .basket:before {
        bottom: 100%;
        content: '';
        height: 25px;
        left: 0;
        position: absolute;
        width: 100%
    }

    .basket h2 {
        margin-bottom: 20px
    }
}

.basket-top {
    padding-bottom: 0 !important;
    padding-top: 0 !important
}

.basket-top div {
    margin-left: 0;
    padding-left: 0;
    padding-top: 0
}

.basket-top h1.header-mob {
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 0 !important
}

.basket-top h1.header-dt {
    display: none
}

.basket-top .column-divide {
    float: right;
    margin-left: 0;
    margin-top: 0;
    width: 100%
}

.basket-top .column-divide .collect-at-store,
.basket-top .column-divide .home-delivery {
    background: #eee;
    border-left: 1px solid #fff;
    padding-left: 0;
    padding-top: 14px;
    width: 50%
}

.basket-top .column-divide .collect-at-store svg,
.basket-top .column-divide .home-delivery svg {
    margin: 0;
    padding: 0
}

.basket-top .column-divide .collect-at-store h2,
.basket-top .column-divide .home-delivery h2 {
    margin: 0 0 8px;
    padding: 0
}

.basket-top .column-divide .collect-at-store p,
.basket-top .column-divide .home-delivery p {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    margin: 0 0 5px
}

.basket-top .column-divide .collect-at-store span,
.basket-top .column-divide .home-delivery span {
    display: inline-block;
    font-size: .8125rem;
    margin: 0 0 9px
}

.basket-top .column-divide .collect-at-store {
    border-top-left-radius: 5px
}

.basket-top .column-divide .collect-at-store h2:before {
    background: url(/assets/images/checkout/store-icon.svg) center top no-repeat;
    content: '';
    display: inline-block;
    height: 19px;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.basket-top .column-divide .collect-at-store .postcode-check-dt {
    display: none
}

.basket-top .column-divide .home-delivery {
    border-top-right-radius: 5px
}

.basket-top .column-divide .home-delivery h2:before {
    background: url(/assets/images/checkout/delivery-black.svg) center top no-repeat;
    content: '';
    display: inline-block;
    height: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.basket-row ul {
    margin: 0;
    padding: 0 0 0 20px
}

.basket-row ul li {
    list-style: none
}

.basket-row ul li .prod-main {
    border-top: 1px solid #eee;
    margin: 10px 0 0;
    padding: 10px 0;
    position: relative
}

.basket-row ul li .prod-main .mob-options {
    clear: both
}

.basket-row ul li .prod-main h2,
.basket-row ul li .prod-main p,
.basket-row ul li .prod-main picture {
    float: left
}

.basket-row ul li .prod-main picture {
    margin-right: 20px;
    max-width: 140px
}

.basket-row ul li .prod-main picture img {
    border: 1px solid #eee;
    border-radius: 5px
}

.basket-row ul li .prod-main h2 {
    display: contents;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .75rem;
    font-weight: 700
}

.basket-row ul li .prod-main h2 span {
    display: block;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    margin-top: 10px
}

.basket-row ul li .prod-main p {
    margin-top: 10px
}

.basket-row ul li .prod-main p select {
    margin-bottom: 10px
}

.basket-row ul li .prod-main p button.delete {
    padding-left: 10px;
    text-decoration: underline
}

@media screen and (max-width:959.99px) {

    .basket-top .column-divide .collect-at-store h2,
    .basket-top .column-divide .home-delivery h2 {
        font-size: 1rem;
        padding-top: 25px;
        position: relative
    }

    .basket-top .column-divide .collect-at-store h2:before,
    .basket-top .column-divide .home-delivery h2:before {
        left: 0;
        position: absolute;
        top: 0
    }

    .basket-top .column-divide .collect-at-store p,
    .basket-top .column-divide .home-delivery p {
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: .75rem;
        font-weight: 700;
        padding: 0 10px
    }

    .basket-row ul li .prod-main .options {
        display: flex;
        width: 100%
    }

    .basket-row ul li .prod-main .options p {
        margin: 15px 0 0
    }

    .basket-row ul li .prod-main .options p.quantity {
        width: 100%
    }

    .basket-row ul li .prod-main .options p.price {
        float: right;
        margin-top: 25px
    }

    .basket-row ul li .prod-main .options select {
        margin-left: 5px
    }
}

.basket-row ul li:last-of-type .prod-main picture {
    margin-bottom: 0
}

.basket-row ul li .prod-options {
    padding-left: 0
}

.basket-row ul li .prod-options .delivery,
.basket-row ul li .prod-options .order {
    position: relative
}

@media screen and (max-width:959.99px) {

    .basket-row ul li .prod-options .delivery,
    .basket-row ul li .prod-options .order {
        background: #eee;
        margin-bottom: 1px;
        padding: 1px 10px 15px
    }

    .basket-row ul li .prod-options .delivery div,
    .basket-row ul li .prod-options .order div {
        margin: 0 auto
    }

    .basket-row ul li .prod-options .delivery img,
    .basket-row ul li .prod-options .delivery input,
    .basket-row ul li .prod-options .order img,
    .basket-row ul li .prod-options .order input {
        float: right;
        margin: 5px 0 0;
        max-height: 60px
    }
}

.basket-row ul li .prod-options .active .radio-check {
    display: inline
}

.basket-row ul li .prod-options .active input {
    display: none
}

.basket-row ul li .prod-options .active span {
    color: #65b231;
    font-weight: 700
}

.basket-row ul li .prod-options .active svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: -34px;
    width: 100%
}

.basket-row ul li .prod-options .active svg image {
    display: inline-block
}

.basket-row ul li .prod-options .inactive .radio-check {
    display: none
}

.basket-row ul li .prod-options .inactive input {
    display: inline-block
}

.basket-row ul li .prod-options .active span,
.basket-row ul li .prod-options .inactive span,
.basket-row ul li .prod-options .unavailable span {
    display: block;
    margin-top: 10px;
    max-width: 165px
}

.basket-row ul li .prod-options .active input[type=radio],
.basket-row ul li .prod-options .inactive input[type=radio],
.basket-row ul li .prod-options .unavailable input[type=radio] {
    height: 30px;
    width: 30px
}

.basket-row ul li .prod-options .active input[type=radio]:before,
.basket-row ul li .prod-options .inactive input[type=radio]:before,
.basket-row ul li .prod-options .unavailable input[type=radio]:before {
    height: 20px;
    width: 20px
}

.basket-row ul li .prod-options .unavailable .icon-dt {
    display: none
}

.basket-row ul li .prod-options .unavailable .icon-mob {
    display: block
}

.basket-row ul li .prod-options .unavailable span {
    color: #ccc
}

.subtotals {
    margin-left: 0
}

.subtotals .promo-totals {
    border: 1px solid #eee;
    float: left;
    margin-left: 0;
    margin-right: 33px
}

.subtotals .promo-totals div {
    float: right
}

.subtotals .promo-totals .promo-flex {
    border-bottom: 1px solid #eee;
    display: flex;
    padding: 0 0 10px
}

.subtotals .promo-totals .promo-flex .promo {
    margin: 0 auto;
    padding: 10px 10px 0
}

.subtotals .promo-totals .promo-flex .promo input[type=text] {
    width: 180px
}

.subtotals .promo-totals .promo-flex .promo button {
    padding-left: 20px;
    padding-right: 20px
}

.subtotals .promo-totals .totals ul {
    border-right: 0
}

.subtotals .promo-totals .totals ul li {
    border-bottom: 1px solid #eee;
    padding: 10px
}

.subtotals .promo-totals .totals ul li.total {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0
}

.subtotals .promo-totals .totals ul li:last-of-type {
    border-bottom: 0
}

.subtotals .proceed-strip {
    border: 1px solid #eee;
    border-width: 0 1px 1px;
    display: inline-block;
    padding: 10px;
    text-align: center
}

.subtotals .proceed-strip div {
    float: left
}

.subtotals .proceed-strip div p {
    font-size: .75rem;
    line-height: 1.2em;
    margin: auto auto 0;
    max-width: 180px;
    padding: 10px 0 15px
}

.subtotals .proceed-strip div p strong {
    display: block
}

.subtotals .proceed-strip div a.proceed,
.subtotals .proceed-strip div button {
    margin: 0 auto auto;
    max-width: 340px
}

@media screen and (min-width:768px) {
    .basket-top h1.header-mob {
        padding-top: 20px !important
    }

    .basket-row ul li .prod-main h2 {
        display: inline-block;
        font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 1.125rem;
        font-weight: 400;
        margin-right: 20px;
        max-width: 242px
    }

    .basket-row ul li .prod-main h2 span {
        font-size: .875rem;
        margin-top: 15px
    }
}

@media screen and (min-width:960px) {
    .basket-form {
        margin-bottom: 80px
    }

    .basket-top {
        margin-right: 10px;
        margin-top: -48px
    }

    .basket-top h1 {
        padding-top: 35px
    }

    .basket-top h1.header-mob {
        display: none
    }

    .basket-top h1.header-dt {
        display: block;
        margin-left: 0;
        padding-left: 0;
        padding-top: 55px
    }

    .basket-top .column-divide {
        width: auto
    }

    .basket-top .column-divide .collect-at-store,
    .basket-top .column-divide .home-delivery {
        min-width: 323px
    }

    .basket-top .column-divide .collect-at-store h2:before,
    .basket-top .column-divide .home-delivery h2:before {
        margin-right: 5px;
        width: 30px
    }

    .basket-top .column-divide .collect-at-store .postcode-check-dt {
        display: flex;
        margin-left: 20px
    }

    .basket-top .column-divide .collect-at-store .postcode-check-dt input {
        width: 210px
    }

    .basket-top .column-divide .collect-at-store .postcode-check-dt .f-btn {
        border-radius: 0 5px 5px 0
    }

    .basket-top .column-divide .collect-at-store .postcode-check-mob {
        display: none
    }

    .basket-top .column-divide .collect-at-store .postcode-check {
        margin-left: 19px
    }

    .basket-row:first-of-type .prod-options .delivery,
    .basket-row:first-of-type .prod-options .order {
        border-top: 1px solid #eee
    }

    .basket-row ul {
        margin: 0 0 20px
    }

    .basket-row ul li .prod-main {
        border: 1px solid #eee;
        margin: -1px 15px 0 0;
        max-width: 640px;
        padding: 20px 10px 20px 20px
    }

    .basket-row ul li .prod-main.single-prod:after,
    .basket-row ul li .prod-main.single-prod:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 100%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        width: 0
    }

    .basket-row ul li .prod-main.single-prod:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 12px;
        margin-top: -20px
    }

    .basket-row ul li .prod-main.single-prod:before {
        border-color: rgba(238, 238, 238, 0);
        border-left-color: #eee;
        border-width: 15px;
        margin-top: -23px
    }

    .basket-row ul li .prod-main.bundle-prod {
        background: #fff;
        border: 1px solid #eee;
        position: relative
    }

    .basket-row ul li .prod-main.bundle-prod:after,
    .basket-row ul li .prod-main.bundle-prod:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: -1px;
        width: 0
    }

    .basket-row ul li .prod-main.bundle-prod:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-color: #fff;
        border-width: 12px;
        margin-left: -12px
    }

    .basket-row ul li .prod-main.bundle-prod:before {
        border-color: rgba(238, 238, 238, 0);
        border-top-color: #eee;
        border-width: 13px;
        margin-left: -13px
    }

    .basket-row ul li .prod-main p {
        margin-top: 30px;
        max-width: 102px
    }

    .basket-row ul li .prod-main p button.delete {
        padding-left: 0
    }

    .basket-row ul li .prod-main .options span {
        display: none
    }

    .basket-row ul li .prod-options {
        display: flex;
        padding-left: 20px
    }

    .basket-row ul li .prod-options .delivery,
    .basket-row ul li .prod-options .order {
        align-items: center;
        border: 1px solid #eee;
        border-width: 1px 0 1px 1px;
        display: flex;
        margin-top: -1px;
        position: relative;
        text-align: center
    }

    .basket-row ul li .prod-options .delivery div,
    .basket-row ul li .prod-options .order div {
        margin: 0 auto
    }

    .basket-row ul li .prod-options .delivery {
        border-right: 1px solid #eee
    }

    .basket-row ul li .prod-options .unavailable .icon-dt {
        display: inline-flex
    }

    .basket-row ul li .prod-options .unavailable .icon-mob {
        display: none
    }

    .basket-row ul li .prod-options .unavailable span {
        color: #ddd
    }

    .subtotals {
        margin-left: 0
    }

    .subtotals .promo-totals {
        max-width: 641px
    }

    .subtotals .promo-totals div {
        float: left
    }

    .subtotals .promo-totals .promo-flex {
        border-bottom: 0
    }

    .subtotals .promo-totals .promo-flex .promo {
        padding: 20px 20px 0
    }

    .subtotals .promo-totals .promo-flex .promo input[type=text] {
        width: 195px
    }

    .subtotals .promo-totals .totals {
        border-left: 1px solid #eee
    }

    .subtotals .promo-totals .totals ul {
        border-top: none;
        padding: 0
    }

    .subtotals .proceed-strip {
        border-width: 1px;
        max-width: 647px;
        padding: 20px;
        text-align: left
    }

    .subtotals .proceed-strip div p {
        float: left;
        font-size: .875rem;
        max-width: 180px;
        padding: 0
    }
}

@media (min-width:960px) and (max-width:1370px) {
    .basket-top {
        margin-right: 0
    }

    .basket-top .collect-delivery {
        padding-left: 20px
    }

    .basket-top .collect-delivery .column-divide {
        width: 100%
    }

    .basket-top .collect-delivery .column-divide .collect-at-store,
    .basket-top .collect-delivery .column-divide .home-delivery {
        display: inline;
        min-width: 1px
    }

    .basket-top .collect-delivery .column-divide .collect-at-store .postcode-check-dt {
        display: none
    }

    .basket-top .collect-delivery .column-divide .collect-at-store .postcode-check-dt input {
        width: 210px
    }

    .basket-top .collect-delivery .column-divide .collect-at-store .postcode-check-mob {
        display: block
    }

    .basket-row ul {
        margin: 0
    }

    .basket-row ul li .prod-main {
        margin-right: 0
    }

    .basket-row ul li .prod-options .delivery,
    .basket-row ul li .prod-options .order {
        background: #fff
    }

    .subtotals .proceed-strip,
    .subtotals .promo-totals {
        max-width: 100%;
        width: 100%
    }

    .subtotals .proceed-strip {
        border-top: 0
    }
}

.main.f-active:after {
    background-color: transparent !important
}

.book-signup-tabs {
    border: 0;
    display: flex
}

.book-signup-tabs>li {
    flex-grow: 1;
    margin-bottom: 0
}

.book-signup-tabs>li.f-active {
    margin-bottom: 0;
    z-index: 2
}

.book-signup-tabs>li.f-active:nth-child(1)>a,
.book-signup-tabs>li.f-active:nth-child(2)>a,
.book-signup-tabs>li.f-active:nth-child(3)>a {
    background-color: #fff;
    border: 0;
    color: #000
}

.book-signup-tabs>li.f-active:nth-child(1)>a:focus,
.book-signup-tabs>li.f-active:nth-child(1)>a:hover,
.book-signup-tabs>li.f-active:nth-child(2)>a:focus,
.book-signup-tabs>li.f-active:nth-child(2)>a:hover,
.book-signup-tabs>li.f-active:nth-child(3)>a:focus,
.book-signup-tabs>li.f-active:nth-child(3)>a:hover {
    background-color: #fff;
    color: #000
}

.book-signup-tabs>li.f-active:nth-child(1)>a path,
.book-signup-tabs>li.f-active:nth-child(2)>a path,
.book-signup-tabs>li.f-active:nth-child(3)>a path {
    fill: #000
}

.book-signup-tabs>li:not(.f-active) {
    z-index: 0
}

.book-signup-tabs>li.f-open:not(.f-active)>a,
.book-signup-tabs>li:not(.f-active)>a:focus,
.book-signup-tabs>li:not(.f-active)>a:hover {
    margin-bottom: 0;
    padding-bottom: 10px
}

.book-signup-tabs>li:nth-child(1) svg {
    height: 20px;
    width: 20px
}

.book-signup-tabs>li:nth-child(2)>a {
    background-color: #8a549c;
    color: #fff
}

.book-signup-tabs>li:nth-child(2)>a:focus,
.book-signup-tabs>li:nth-child(2)>a:hover {
    background-color: #6d427b
}

.book-signup-tabs>li:nth-child(3)>a {
    background-color: #f08826;
    color: #fff
}

.book-signup-tabs>li:nth-child(3)>a:focus,
.book-signup-tabs>li:nth-child(3)>a:hover {
    background-color: #d46f0f
}

.book-signup-tabs>li:nth-child(3) svg {
    height: 20px;
    width: 26px
}

.book-signup-tabs>li>a {
    font-size: .875rem;
    background-color: #20a5de;
    border: 0;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1;
    padding: 12px 10px 10px;
    text-align: center;
    text-transform: uppercase
}

.book-signup-tabs>li>a:focus,
.book-signup-tabs>li>a:hover {
    background-color: #1a84b1;
    color: #fff
}

.book-signup-tabs>li>a:focus path,
.book-signup-tabs>li>a:hover path {
    fill: #fff
}

.book-signup-tabs>li>a path {
    fill: #fff;
    transition: fill .2s
}

.book-signup-tabs>li>a svg {
    margin-right: 5px
}

.bookings-tab-container {
    background: #4a4a4a;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    width: 100%
}

.bookings-tab-container h2 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem
}

.bookings-tab-container>li {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    padding: 10px
}

.booking-form,
.newsletter-form {
    flex-wrap: wrap
}

.booking-form>.booking-field,
.newsletter-form>.booking-field {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%
}

.booking-form>.booking-field.f-inactive .fakeput,
.newsletter-form>.booking-field.f-inactive .fakeput {
    color: #d8d8d8
}

.booking-form>.booking-field+.booking-field,
.newsletter-form>.booking-field+.booking-field {
    background-color: #fff;
    margin-top: 10px
}

.booking-form .fakeput,
.newsletter-form .fakeput {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    height: 44px;
    font-size: .875rem;
    line-height: 44px;
    padding: 0 10px;
    position: relative;
    text-align: left;
    width: 100%
}

.booking-form .fakeput:focus,
.newsletter-form .fakeput:focus {
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
    color: #20a5de
}

.booking-form .fakeput .material-icons,
.newsletter-form .fakeput .material-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.booking-form .f-btn.f-btn-disabled,
.newsletter-form .f-btn.f-btn-disabled {
    background-color: #f9d777;
    color: #000;
    font-weight: 600
}

.newsletter-form>.booking-field .checkbox-label {
    align-self: flex-start;
    display: flex
}

.booking-form {
    margin: 0 auto
}

.booking-form .spinner {
    height: 40px;
    margin-top: 10px;
    width: 40px
}

.range-form input {
    width: 100%
}

.booking-dropdown {
    background-color: #eee;
    border-radius: 5px;
    box-sizing: border-box;
    left: 0;
    min-height: 100%;
    opacity: 0;
    padding: 30px 10px 10px !important;
    position: absolute;
    top: 0;
    transition: opacity .3s, visibility .3s .3s;
    visibility: hidden;
    width: 100%;
    z-index: 2
}

.booking-dropdown.f-active {
    opacity: 1;
    transition: opacity .3s, visibility .3s;
    visibility: visible
}

.booking-dropdown:before {
    border: 15px solid transparent;
    border-bottom-color: #fff;
    bottom: 100%;
    content: '';
    left: 50%;
    margin-left: -20px;
    position: absolute
}

.booking-dropdown.brand .option-select {
    justify-content: center
}

.booking-dropdown.brand .option-select.f-active {
    background-color: #fff;
    border-color: #000
}

.booking-dropdown.brand img {
    max-height: 47px
}

.booking-dropdown .close-dropdown {
    position: absolute;
    right: 5.7142857143px;
    top: 5.7142857143px
}

.booking-dropdown .f-grid>div {
    display: flex;
    max-height: 130px
}

.booking-dropdown h3 {
    font-size: 1.125rem;
    padding-top: 20px;
    text-align: center
}

.booking-dropdown .option-select {
    font-size: .875rem;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    cursor: pointer;
    display: inline-block;
    flex-direction: column;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    justify-content: space-between;
    padding: 20px;
    text-align: center;
    width: 100%
}

.booking-dropdown .option-select.f-active {
    background-color: #000;
    color: #fff
}

.booking-dropdown .option-select.f-active path {
    fill: #fff
}

.booking-dropdown .option-select:hover {
    background-color: #000;
    color: #fff;
    cursor: pointer
}

.booking-dropdown .option-select:hover path {
    fill: #fff
}

.booking-dropdown .option-select span {
    display: block;
    margin-top: 10px
}

@media screen and (max-width:766.99px) {
    .booking-dropdown .f-grid-medium.f-grid-auto {
        margin-left: -10px
    }

    .booking-dropdown .f-grid-medium.f-grid-auto>* {
        padding-left: 10px
    }
}

@media screen and (min-width:768px) {
    .book-signup-tabs {
        display: block
    }

    .book-signup-tabs>li>a {
        padding-left: 20px;
        padding-right: 20px
    }

    .bookings-tab-container h2 {
        font-size: 1.25rem;
        margin-bottom: 30px
    }

    .booking-form,
    .newsletter-form {
        flex-wrap: nowrap;
        list-style: none
    }

    .booking-form>.booking-field,
    .newsletter-form>.booking-field {
        flex-basis: 0;
        flex-grow: 1;
        margin-bottom: 20px;
        width: auto
    }

    .booking-form>.booking-field+.booking-field,
    .newsletter-form>.booking-field+.booking-field {
        margin-top: 0
    }

    .booking-dropdown {
        padding: 10px 20px
    }

    .booking-dropdown .close-dropdown {
        right: 5px;
        top: 5px
    }
}

@media screen and (min-width:960px) {
    .booking-dropdown {
        background-color: #fff;
        border-radius: 0 5px 5px 0;
        left: 100%;
        min-height: 0;
        top: 14px;
        width: 530px
    }

    .booking-dropdown:before {
        border-bottom-color: transparent;
        border-right-color: #fff;
        bottom: auto;
        left: auto;
        margin-left: 0;
        right: 100%;
        top: 70px
    }

    .booking-dropdown.type {
        top: 77px
    }

    .booking-dropdown.brand {
        top: 142px
    }

    .booking-dropdown.f-active {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25)
    }

    .booking-dropdown .close-dropdown {
        right: 5px;
        top: 2px
    }
}

@media screen and (min-width:1220px) {
    .bookings-tab-container>li {
        padding: 30px
    }

    .booking-form .booking-field {
        margin-bottom: 20px
    }

    .book-signup-tabs>li>a {
        padding-left: 30px;
        padding-right: 30px
    }

    .booking-dropdown {
        padding: 30px 20px 20px !important;
        top: 20px
    }

    .booking-dropdown.type {
        top: 85px
    }

    .booking-dropdown.brand {
        top: 149px
    }
}

.banner+nav {
    margin-top: 0
}

.banner-signup {
    padding: 10px 0
}

.bookings-tab-container-wide {
    background: #fff;
    border-radius: 5px;
    padding: 0;
    position: relative
}

.bookings-tab-container-wide .booking-dropdown {
    padding: 0 10px 20px 0 !important;
    top: 9px
}

.bookings-tab-container-wide .booking-dropdown .product-brands,
.bookings-tab-container-wide .booking-dropdown .product-categories,
.bookings-tab-container-wide .booking-dropdown .product-types {
    margin-left: 0
}

.bookings-tab-container-wide .booking-field {
    margin-bottom: 0
}

.bookings-tab-container-wide h2 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem
}

.bookings-tab-container-wide>li {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .3);
    padding: 10px
}

@media screen and (min-width:768px) {
    .banner-signup {
        background-color: transparent;
        margin-bottom: 40px;
        margin-top: -80px;
        padding: 0;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 1
    }

    .bookings-tab-container-wide>li {
        border-radius: 0 5px 5px;
        padding: 20px
    }

    .bookings-tab-container-wide .booking-form>.booking-field+.booking-field,
    .bookings-tab-container-wide .newsletter-form>.booking-field+.booking-field {
        margin-left: 20px
    }
}

@media screen and (min-width:960px) {
    .bookings-tab-container-wide .booking-dropdown {
        height: auto;
        left: 0;
        padding: 0 20px 20px 0 !important;
        top: calc(100% + 20px);
        width: 100%
    }

    .bookings-tab-container-wide .booking-dropdown:before {
        border: 15px solid transparent;
        border-bottom-color: #fff;
        content: '';
        left: 10%;
        position: absolute;
        top: -30px
    }

    .bookings-tab-container-wide>li {
        padding: 30px
    }
}

.section.brands {
    padding-bottom: 40px;
    padding-top: 10px !important
}

.section.brands h2 {
    font-size: 1.25rem;
    margin-bottom: 40px
}

.section.brands a {
    display: block;
    padding: 5px;
    text-align: center
}

.section.brands img {
    max-height: 20px
}

.brands-slider {
    padding-left: 40px;
    padding-right: 40px
}

.brands-slider .f-dotnav {
    margin-top: 0;
    position: relative
}

.brands-slider .f-dotnav>.f-active>* {
    background-color: #eee
}

.brands-slider .f-dotnav>*>* {
    background-color: #000;
    height: 11px;
    width: 11px
}

@media screen and (min-width:768px) {
    .brands {
        margin-top: 0 !important
    }

    .brands li {
        padding-top: 10px !important
    }

    .brands li a {
        padding: 20px
    }
}

.f-btn {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-weight: 600
}

.f-btn-large {
    font-size: .875rem;
    padding-bottom: 12px;
    padding-top: 12px
}

.f-btn-xlarge {
    font-size: 1rem
}

.f-btn-tall {
    padding-bottom: 18px;
    padding-top: 18px
}

.f-btn-grey {
    border-color: #eee
}

.f-btn-grey:focus,
.f-btn-grey:hover {
    border-color: #222
}

.f-btn-dgrey {
    background-color: #807f7f;
    border-color: #807f7f;
    color: #fff
}

.f-btn-dgrey:focus,
.f-btn-dgrey:hover {
    background-color: #fff;
    border-color: #fff;
    color: #222
}

.f-btn-black {
    background-color: #222;
    border-color: #222;
    color: #fff
}

.f-btn-black:focus,
.f-btn-black:hover {
    background-color: #fff;
    border-color: #fff;
    color: #222
}

.f-btn-sale {
    border-color: #fff;
    color: #c11d1f
}

.f-btn-sale:focus,
.f-btn-sale:hover {
    background-color: #c11d1f;
    border-color: #c11d1f
}

.f-btn-faux {
    font-family: "Open Sans", Helvetica, Arial, sans-serif
}

.f-btn-ghost {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff
}

.f-btn-ghost.f-active,
.f-btn-ghost:focus,
.f-btn-ghost:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000
}

.f-btn-ghost-dark {
    background-color: transparent;
    border: 1px solid #000;
    color: #000
}

.f-btn-ghost-dark.f-active,
.f-btn-ghost-dark:focus,
.f-btn-ghost-dark:hover {
    background-color: #000;
    border-color: #000;
    color: #fff
}

.f-btn-white {
    background-color: #fff;
    border: none;
    color: #000
}

.f-btn-white.tags {
    margin: 20px
}

.f-btn-white.f-active,
.f-btn-white:focus,
.f-btn-white:hover {
    background-color: #000;
    border-color: #000;
    color: #fff
}

@media screen and (max-width:766.99px) {
    .f-btn-small-1-1 {
        width: 100%
    }
}

@media screen and (min-width:1220px) {
    .brands li {
        padding-top: 20px !important
    }

    .brands-slider {
        padding-left: 0;
        padding-right: 0
    }

    .section.brands img {
        max-height: 28px
    }

    .f-btn-lng {
        padding-left: 60px;
        padding-right: 60px
    }

    .f-btn-xlng {
        padding-left: 80px;
        padding-right: 80px
    }
}

.callout {
    align-items: flex-start;
    background-color: #20a5de;
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    justify-content: center;
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    width: 100%
}

.callout.pink {
    background-color: #e40c65
}

.callout.red {
    background-color: #c11d1f
}

.callout h3 {
    font-size: 1.125rem;
    color: #fff;
    flex: 1 1 0
}

@media screen and (min-width:480px) {
    .callout h3 {
        font-size: calc(18px + 6 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .callout h3 {
        font-size: 1.5rem
    }
}

.callout>* {
    margin: 0
}

.callout>*+* {
    margin-left: 15px
}

.callout svg {
    height: 44px;
    width: 44px
}

.callout-list {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.4
}

.callout-list li {
    font-size: .75rem;
    align-items: center;
    background-color: #eee;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    padding: 10px 0;
    width: calc(50% - 5px)
}

@media screen and (min-width:480px) {
    .callout-list li {
        font-size: calc(12px + 2 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .callout-list li {
        font-size: .875rem
    }
}

.callout-list li.special {
    background-color: #fff;
    display: block;
    width: 100%
}

.callout-list li.special p {
    display: block
}

.callout-list li+li {
    margin-top: 10px
}

.callout-list p {
    display: none;
    margin: 0
}

.callout-item {
    font-size: .75rem;
    display: block;
    font-weight: 600
}

.special .callout-item {
    font-size: .875rem;
    color: #c11d1f;
    margin-bottom: 10px
}

@media screen and (min-width:768px) {
    .callout {
        align-items: center;
        margin: 20px 0
    }

    .callout h3 {
        flex: none
    }

    .callout svg {
        height: 60px;
        width: 60px
    }

    .callout-list {
        border: 0
    }

    .callout-list>li {
        align-items: center;
        background-color: #fff;
        display: flex;
        font-size: 1rem;
        padding: 5px 0;
        width: 100%
    }

    .callout-list>li p strong {
        display: inline-block;
        margin-bottom: 10px
    }

    .callout-list>li.special {
        border: 0;
        display: flex
    }

    .callout-list>li.full {
        display: block;
        padding: 0 0 20px
    }

    .callout-list>li.full+.full {
        margin-top: 5px
    }

    .callout-list>li+li {
        margin-top: 0
    }

    .callout-list p {
        display: block;
        flex: 1
    }

    .callout-item {
        align-content: center;
        background-color: #eee;
        border-radius: 5px;
        box-sizing: border-box;
        display: flex;
        margin-right: 15px;
        max-width: 240px;
        padding: 20px;
        width: 100%
    }

    .special .callout-item {
        background-color: #fff;
        border: 1px solid #c11d1f;
        margin-bottom: 0
    }
}

.cat-title {
    margin-top: 20px
}

.cat-title h1 {
    margin-bottom: 10px
}

.camera-banner div:first-child {
    overflow: hidden
}

.camera-banner .panel-mgrey {
    background-color: #f7f7f7
}

.camera-banner .panel-mgrey .panel-content p {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    font-weight: 200;
    line-height: 20px;
    margin: 30px auto 20px;
    max-height: 100%;
    max-width: 240px
}

.camera-categories {
    margin: 30px 0 0
}

.camera-categories h2 {
    margin: 0 0 30px
}

.camera-categories .blog-pod .advice-center {
    background-color: #f7f7f7;
    padding: 15px 0 0;
    text-align: center
}

.camera-categories .blog-pod .advice-center p {
    display: inline-block;
    font-size: .875rem;
    font-weight: 600
}

.camera-banner h2,
.inspiration h2,
.recommended h2 {
    font-weight: 500;
    margin: 5px 0 20px
}

.camera-banner ul li a img,
.inspiration ul li a img,
.recommended ul li a img {
    padding: 0
}

.camera-banner .panel .panel-content h3 {
    margin: 0 auto;
    max-width: 200px;
    text-transform: none
}

.inspiration .offer-ribbon {
    font-size: .875rem;
    background-color: #f7f7f7;
    font-weight: 600;
    line-height: 1;
    margin-top: 0;
    padding: 0;
    text-align: left;
    width: 100%
}

.inspiration .offer-ribbon p {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0;
    padding: 20px 20px 15px
}

.inspiration .offer-ribbon span {
    display: inline-block;
    line-height: 1.4em;
    padding: 0 20px 20px
}

@media screen and (min-width:960px) {
    .recommended h2 {
        margin: 20px 0 30px
    }

    .recommended ul {
        margin: 10px 0
    }

    .recommended ul.brand-slide li a img {
        padding: 20px 15px 15px
    }

    .recommended ul.f-dotnav {
        bottom: -40px
    }
}

@media screen and (min-width:1220px) {
    .cat-title {
        margin-top: -20px
    }
}

.modal-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 712px
}

.modal-inner h2 {
    font-weight: 500;
    margin-top: 20px
}

.modal-inner .f-form-controls button {
    background: #8a549c;
    border: 1px solid #8a549c;
    width: 28%
}

.modal-inner .f-form-controls input {
    width: 70%
}

.modal-inner .order-now {
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 0
}

.modal-inner .order-now .collect-later,
.modal-inner .order-now .collect-now {
    background: #eee;
    margin-bottom: 20px;
    padding: 20px
}

.modal-inner .order-now .collect-later p,
.modal-inner .order-now .collect-now p {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4em;
    margin: 0;
    padding: 0 30px 0 40px
}

.modal-inner .order-now .collect-now p {
    background: url(/assets/images/product/in-stock.png) left top 2px no-repeat;
    color: #65b231
}

.modal-inner .order-now .collect-later p {
    background: url(/assets/images/product/calendar-icon.png) left top 2px no-repeat;
    color: #f08826
}

.modal-inner .order-now .store-info {
    display: inline-block;
    padding: 0 8% 15px;
    width: 84%
}

.modal-inner .order-now .store-info ul {
    float: left;
    margin: 0;
    max-width: 460px;
    padding: 0
}

.modal-inner .order-now .store-info ul li {
    list-style: none
}

.modal-inner .order-now .store-info ul li.store-name {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem
}

.modal-inner .order-now .store-info ul li.distance {
    font-size: .75rem
}

.modal-inner .order-now .store-info ul li.address {
    font-size: .875rem;
    padding: 15px 0
}

.modal-inner .order-now .store-info ul li.view-map {
    font-weight: 600
}

.modal-inner .order-now .store-info ul li.view-map a {
    text-decoration: underline
}

.modal-inner .order-now .store-info button {
    background: #65b231;
    border-color: #65b231;
    float: right;
    margin-top: 20px;
    padding: 12px 50px;
    transition: opacity .3s, visibility .3s .3s;
    width: 100%
}

.modal-inner .order-now .store-info button:hover {
    transition: opacity .3s, visibility .3s .3s
}

@media screen and (min-width:768px) {
    .modal-inner .f-form-controls button {
        max-width: 141px
    }

    .modal-inner .f-form-controls input {
        margin-right: 5px;
        max-width: 340px
    }

    .modal-inner .order-now .collect-later p,
    .modal-inner .order-now .collect-now p {
        line-height: 1.7em;
        padding: 0 20px 0 40px
    }

    .modal-inner .order-now .store-info {
        padding: 0 2% 15px;
        width: 96%
    }

    .modal-inner .order-now .store-info ul li.address {
        padding: 10px 0
    }

    .modal-inner .order-now .store-info button {
        margin-top: 0;
        width: auto
    }
}

.order-popup .f-modal-dialog .material-icons {
    font-size: 2.1875rem
}

.order-popup .f-modal-dialog h2 {
    font-weight: 500;
    font-size: 1.125rem;
    margin-top: 10px
}

.order-popup .f-modal-dialog p {
    font-size: .875rem;
    line-height: 1.6em;
    margin: 0 auto 10px;
    max-width: 380px
}

.order-popup .f-modal-dialog .popup-buttons {
    margin-top: 20px
}

.order-popup .f-modal-dialog .popup-buttons button {
    margin-bottom: 20px;
    width: 100%
}

.footer .section {
    padding-bottom: 40px;
    padding-top: 40px
}

.footer li {
    line-height: 1.43
}

.footer a {
    font-size: .875rem;
    text-decoration: none
}

.footer a:hover {
    text-decoration: underline
}

.footer .dark h3 {
    color: #fff;
    margin-bottom: 20px
}

.footer .dark h3+ul {
    margin-top: 0
}

.footer .social {
    text-align: center
}

.footer .social>li {
    margin: 0;
    padding: 0
}

.footer .social>li+li {
    margin-left: 14px
}

.footer .social svg {
    fill: #fff;
    height: 30px;
    width: 30px
}

.footer .stock-msg {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1.2;
    margin-bottom: 0
}

.footer .stock-msg svg {
    margin-left: 20px
}

.footer .awards {
    display: inline-block;
    text-align: center;
    width: 100%
}

.sub-footer h3 {
    font-size: .875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin-top: 20px
}

.copyright {
    font-size: .625rem;
    margin: 5px auto 0;
    max-width: 1100px
}

.foot-cards {
    max-width: 400px;
    width: 100%
}

@media screen and (min-width:768px) {
    .order-popup .f-modal-dialog {
        max-width: 480px
    }

    .order-popup .f-modal-dialog .popup-buttons {
        margin-bottom: 10px !important
    }

    .order-popup .f-modal-dialog .popup-buttons button {
        margin-bottom: 0;
        max-width: 200px
    }

    .order-popup .f-modal-dialog .popup-buttons button.f-btn-jorange {
        background: #f08826
    }

    .order-popup .f-modal-dialog .popup-buttons button.f-btn-jorange:hover {
        background: #d46f0f
    }

    .order-popup .f-modal-dialog .popup-buttons button:first-of-type {
        margin-right: 15px
    }

    .footer {
        text-align: left
    }

    .footer .section {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .footer .f-width-medium-1-3 {
        text-align: right
    }

    .footer .stock-msg {
        justify-content: flex-end
    }

    .footer .social {
        text-align: right
    }

    .section.sub-footer {
        padding-bottom: 40px;
        padding-top: 30px !important
    }

    .awards {
        display: inline-block;
        max-width: 230px;
        text-align: right
    }

    .sub-footer h3 {
        margin-top: 0
    }
}

@media screen and (min-width:1220px) {
    .footer .social>li+li {
        margin-left: 15px
    }

    .icon-align {
        display: inline-block;
        margin: 0 auto 15px;
        text-align: center;
        width: 100%
    }

    .icon-align h3 {
        margin: 0 20px 0 0
    }

    .icon-align p .foot-cards {
        max-width: 330px
    }

    .icon-align h3,
    .icon-align p {
        display: inline
    }
}

.f-form.f-form-large input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.f-form.f-form-large select,
.f-form.f-form-large textarea {
    font-size: .875rem;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px
}

.f-form.f-form-large .f-form-success,
.f-form.f-form-large input.f-form-danger,
.f-form.f-form-large select.f-form-danger,
.f-form.f-form-large textarea.f-form-danger {
    background-color: #fff !important
}

.f-form.f-form-large input.highlight,
.f-form.f-form-large select.highlight,
.f-form.f-form-large textarea.highlight {
    -webkit-animation: 1.6s linear infinite forwards pulse;
    animation: 1.6s linear infinite forwards pulse;
    border-color: #999
}

.f-form.f-form-large :-webkit-autofill,
.f-form.f-form-large :-webkit-autofill:focus,
.f-form.f-form-large :-webkit-autofill:hover {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #000
}

.f-form.f-form-large select:not([multiple]) {
    background-position: right 5px top 50%;
    background-size: 30px;
    padding-right: 40px
}

.f-form.f-form-large input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.f-form.f-form-large select {
    height: 44px
}

.f-form.f-form-large label.f-flex {
    line-height: 1.43;
    margin-bottom: 0;
    margin-top: 0
}

.f-form.f-form-large label.f-flex input[type=checkbox] {
    margin-right: 10px;
    margin-top: 0
}

.f-form.f-form-large input[type=checkbox] {
    background-color: #fff;
    border-radius: 5px;
    height: 26px;
    min-width: 26px;
    width: 26px
}

.f-form.f-form-large input[type=checkbox]:before {
    font-size: 1.25rem;
    color: #222;
    line-height: 24px
}

.f-form.f-form-large input[type=radio] {
    background-color: #fff;
    border-color: #999;
    height: 22px;
    width: 22px
}

.f-form.f-form-large input[type=radio].alt {
    border-color: #222;
    border-radius: 5px;
    height: 26px;
    min-width: 26px;
    width: 26px
}

.f-form.f-form-large input[type=radio].alt:before {
    font-size: 1.25rem;
    background-color: transparent;
    content: "î—Š";
    display: block;
    font-family: Material Icons;
    font-weight: 700;
    height: auto;
    line-height: 24px;
    margin: 0;
    text-align: center;
    width: auto
}

.f-form.f-form-large input[type=radio]:before {
    background-color: #000;
    height: 12px;
    margin-top: 4px;
    width: 12px
}

.f-form.f-form-large input[type=radio]:disabled:after {
    font-size: .9375rem;
    color: #999;
    content: '\e5cd';
    display: inline-block;
    font-family: Material Icons;
    margin: 3px 0 0 3px
}

.f-form.f-form-large.newsletter-form .f-form-label {
    display: none
}

.f-form.f-form-large.newsletter-form .f-form-row {
    margin-top: 10px;
    text-align: left
}

.f-form.f-form-large.newsletter-form label {
    font-size: .625rem
}

.f-form.f-form-large.newsletter-form input[type=checkbox] {
    border: 0;
    float: left;
    margin-right: 5px;
    margin-top: 4px
}

.f-form.f-form-large.newsletter-form input[type=checkbox]:checked {
    background-color: #000;
    border-color: #000
}

.f-form.f-form-large.newsletter-form input[type=checkbox]:checked:before {
    color: #fff
}

.f-form.f-form-large.contact-form {
    background-color: #eee;
    padding-bottom: 20px;
    padding-top: 20px
}

.f-form.f-form-large.contact-form input[type=checkbox] {
    background-color: #fff;
    border-color: #eee
}

.inbtn>input[type]:not([type=submit]):not([type=radio]):not([type=checkbox]) {
    border-radius: 5px 0 0 5px
}

.inbtn .f-btn {
    border-radius: 0 5px 5px 0
}

.f-form .errorfeedback,
.f-form .field-validation-error,
span.f-form-danger {
    border: 0 !important
}

@media screen and (min-width:768px) {
    .f-form.f-form-large.contact-form {
        padding-bottom: 40px
    }
}

@-webkit-keyframes pulse {
    30% {
        box-shadow: 0 0 1px 13px #fff, 0 0 1px 14px rgba(32, 165, 222, .8)
    }

    50% {
        box-shadow: 0 0 1px 15px #fff, 0 0 1px 14px rgba(32, 165, 222, .1)
    }

    100% {
        box-shadow: 0 0 1px 15px rgba(255, 255, 255, 0), 0 0 1px 14px rgba(32, 165, 222, 0)
    }
}

@keyframes pulse {
    30% {
        box-shadow: 0 0 1px 13px #fff, 0 0 1px 14px rgba(32, 165, 222, .8)
    }

    50% {
        box-shadow: 0 0 1px 15px #fff, 0 0 1px 14px rgba(32, 165, 222, .1)
    }

    100% {
        box-shadow: 0 0 1px 15px rgba(255, 255, 255, 0), 0 0 1px 14px rgba(32, 165, 222, 0)
    }
}

.header {
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    position: relative;
    z-index: 2
}

.header .f-sticky-init.f-active,
.header [data-f-sticky].f-active {
    box-shadow: 0 0 6px 4px rgba(0, 0, 0, .05)
}

.header .middle-mobile {
    justify-content: center
}

.header .middle-mobile:nth-child(1) {
    justify-content: flex-start
}

.header .middle-mobile:nth-child(4) {
    justify-content: flex-end
}

.top {
    background-color: #fff;
    color: #000;
    padding: 10px 0
}

.top.checkout {
    font-size: .875rem;
    border-bottom: 1px solid #eee
}

.search-form {
    color: #000;
    margin-left: auto;
    margin-right: auto;
    max-width: 370px;
    width: 100%
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox]) {
    border-radius: 4px;
    color: #000;
    padding-left: 15px;
    padding-right: 50px
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder {
    color: #000
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder {
    color: #000
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder {
    color: #000
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder {
    color: #000
}

.search-form input[type=text]:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder {
    color: #000
}

.search-form .f-btn-faux {
    background-color: #000;
    border-radius: 0 5px 5px 0;
    padding: 7px;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%)
}

.search-form .search-text {
    background-color: #000;
    border: 1px solid;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    bottom: 0;
    color: #fff;
    cursor: pointer;
    padding: 0 20px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(0)
}

.search-form .search-text:hover {
    opacity: .8
}

.top-list {
    align-self: center;
    display: flex;
    margin: 0;
    text-align: center
}

.top-list>li {
    align-items: center;
    display: flex
}

.top-list>li+li {
    margin-left: 20px
}

.top-list a:not(.f-btn) {
    font-size: .875rem;
    color: #000;
    text-decoration: none
}

.top-list a:not(.f-btn):hover {
    text-decoration: underline
}

.top-list svg {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.menu-icon rect {
    transition: opacity .35s, transform .35s
}

.upsells {
    background-color: #eee;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    letter-spacing: -.2px;
    padding: 0
}

.upsells ul {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0
}

.upsells li {
    font-weight: 600;
    line-height: 1
}

.upsells svg {
    margin-right: 10px
}

.upsells a {
    text-decoration: none
}

.upsells .tp-cont {
    display: inline-flex;
    margin-right: 10px;
    width: 123px
}

.upsells .tp-cont .star {
    background-color: #dadada;
    display: inline-block;
    height: 23px;
    width: 23px
}

.upsells .tp-cont .star-full {
    background-color: #00b67a
}

.upsells .tp-cont .star+.star {
    margin-left: 2px
}

.upsells .tp-cont img {
    height: 23px;
    width: 23px
}

.basket-link {
    position: relative
}

.basket-link .spinner {
    height: 20px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px
}

.basket-items {
    font-size: .625rem;
    background-color: #20a5de;
    border-radius: 50%;
    color: #fff;
    height: 12px;
    line-height: 12px;
    padding: 3px;
    position: absolute;
    right: -3px;
    text-align: center;
    top: -3px;
    width: 12px
}

.basket-container svg {
    height: 26px !important;
    width: 26px !important
}

.menu-active .menu-icon {
    height: 22px
}

.menu-active .menu-icon rect:nth-child(1) {
    opacity: 0
}

.menu-active .menu-icon rect:nth-child(2) {
    transform: rotate(-45deg) translate(-8px, -1px)
}

.menu-active .menu-icon rect:nth-child(3) {
    transform: rotate(45deg) translate(1px, -4px)
}

.menu-active .show-on-menu {
    display: block !important
}

.menu-active .hide-on-menu {
    display: none
}

.menu-active .hide-on-menu.alt {
    display: block;
    visibility: hidden
}

@media screen and (max-width:958.99px) {
    .header .f-container {
        padding-left: 20px;
        padding-right: 20px
    }

    .main-logo {
        max-height: 27px
    }

    .account svg {
        height: 22px !important;
        width: 23px !important
    }

    .upsells svg {
        height: 43px !important;
        margin-right: 5px;
        width: 43px !important
    }

    .search-form-container {
        background-color: #fff;
        color: #000;
        left: 0;
        padding: 10px;
        position: fixed;
        top: 0;
        transform: translateY(-100%);
        transition: transform .35s, visibility .35s .35s;
        visibility: hidden;
        width: 100%;
        z-index: 1
    }

    .search-form-container .hide-search {
        background-color: #fff;
        display: none;
        padding: 5px;
        position: absolute;
        right: 0;
        top: 100%
    }

    .search-form-container.f-active {
        transform: translateY(0);
        transition: transform .35s, visibility .35s;
        visibility: visible
    }

    .search-form-container.f-active .hide-search {
        display: block
    }
}

@media screen and (min-width:960px) {
    .f-form.f-form-large.contact-form {
        padding-bottom: 100px
    }

    .upsells {
        padding: 2px 0
    }

    .upsells ul {
        justify-content: space-between
    }

    .basket-items {
        font-size: .75rem;
        height: 15px;
        line-height: 15px;
        width: 15px
    }

    .top {
        padding: 20px 0
    }

    .header .middle-mobile {
        justify-content: flex-end
    }

    .header .middle-mobile:nth-child(2) {
        justify-content: flex-start
    }

    .main-logo {
        height: 70px
    }

    .top-list {
        align-self: center
    }

    .top-list>li {
        align-self: flex-end
    }

    .top-list>li+li {
        margin-left: 20px
    }

    .top-list a {
        display: flex;
        flex-direction: column
    }

    .basket-container svg {
        height: 32px !important;
        width: 32px !important
    }
}

.j-list {
    list-style: none;
    padding: 0
}

.j-list.two-column {
    -moz-columns: 2;
    columns: 2
}

.j-list-alt>li {
    font-size: 1.25rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif
}

.j-list a {
    text-decoration: none
}

.j-list>li {
    position: relative;
    font-size: .9375rem
}

.j-list>li:before {
    font-size: 1.1875rem;
    content: '\e5cc';
    display: inline;
    font-family: Material Icons;
    left: 0;
    line-height: 1;
    position: relative;
    top: 4px
}

.j-list-boolean>li {
    padding-left: 30px;
    position: relative
}

.j-list-boolean>li+li {
    margin-top: 5px
}

.j-list-boolean>li:before {
    font-size: 1.25rem;
    border: 1px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    font-family: Material Icons;
    height: 24px;
    left: 0;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 24px
}

.j-list-boolean>li.false {
    opacity: .4
}

.j-list-boolean>li.true:before {
    content: '\e5ca'
}

.j-list-boolean>li.false:before {
    content: '\e5cd'
}

.loader {
    align-items: center;
    background-color: rgba(255, 255, 255, .9);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .35s, visibility .35s .35s;
    visibility: hidden;
    width: 100%;
    z-index: 1050
}

.loader.f-active {
    opacity: 1;
    transition: opacity .35s, visibility .35s;
    visibility: visible
}

.spinner {
    height: 60px;
    position: relative;
    width: 60px
}

.spinner * {
    box-sizing: border-box;
    line-height: 0
}

.spinner:before {
    -webkit-animation: .5s linear infinite rotate-square-2-shadow;
    animation: .5s linear infinite rotate-square-2-shadow;
    background-color: #000;
    border-radius: 50%;
    bottom: 0;
    content: '';
    height: 20%;
    left: 0;
    min-width: 5px;
    opacity: .1;
    position: absolute;
    width: 100%
}

.spinner:after {
    -webkit-animation: .5s linear infinite rotate-square-2-animate;
    animation: .5s linear infinite rotate-square-2-animate;
    background-color: #20a5de;
    border-radius: 5px;
    bottom: 40%;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%
}

.bar-loader {
    left: 50%;
    overflow: hidden;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -60%);
    width: 180px
}

.bar-loader .ball,
.bar-loader .ball2 {
    -webkit-animation: 2s linear infinite along;
    animation: 2s linear infinite along;
    background-color: #20a5de;
    border-radius: 5px;
    display: block;
    height: 10px;
    left: 15px;
    position: absolute;
    top: 5px;
    width: 10px
}

.bar-loader .ball2 {
    -webkit-animation: 2s linear -1s infinite along;
    animation: 2s linear -1s infinite along;
    background-color: #e40c65
}

.bar-loader p {
    font-size: 1.25rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700
}

.bar-loader ul {
    margin: 0;
    padding: 0
}

.bar-loader li {
    -webkit-animation: 2s linear infinite around;
    animation: 2s linear infinite around;
    background-color: #c11d1f;
    border-radius: 5px;
    display: inline-block;
    height: 10px;
    margin: 0;
    width: 30px
}

.bar-loader li:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.bar-loader li:nth-child(2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    background-color: #f08826
}

.bar-loader li:nth-child(3) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    background-color: #fee505
}

.bar-loader li:nth-child(4) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    background-color: #65b231
}

.bar-loader li:nth-child(5) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    background-color: #20a5de
}

.bar-loader li:nth-child(6) {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    background-color: #8a549c
}

@-webkit-keyframes rotate-square-2-animate {
    17% {
        border-bottom-right-radius: 3px
    }

    25% {
        transform: translateY(20%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 50%;
        transform: translateY(40%) scale(1, .9) rotate(45deg)
    }

    75% {
        transform: translateY(20%) rotate(67.5deg)
    }

    100% {
        transform: translateY(0) rotate(90deg)
    }
}

@keyframes rotate-square-2-animate {
    17% {
        border-bottom-right-radius: 3px
    }

    25% {
        transform: translateY(20%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 50%;
        transform: translateY(40%) scale(1, .9) rotate(45deg)
    }

    75% {
        transform: translateY(20%) rotate(67.5deg)
    }

    100% {
        transform: translateY(0) rotate(90deg)
    }
}

@-webkit-keyframes rotate-square-2-shadow {

    0%,
    100% {
        transform: scale(1, 1)
    }

    50% {
        transform: scale(1.2, 1)
    }
}

@keyframes rotate-square-2-shadow {

    0%,
    100% {
        transform: scale(1, 1)
    }

    50% {
        transform: scale(1.2, 1)
    }
}

@-webkit-keyframes around {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@keyframes around {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@-webkit-keyframes along {
    0% {
        left: 0;
        top: 5px
    }

    15%,
    25%,
    35%,
    45%,
    5% {
        top: 3px
    }

    10%,
    20%,
    30%,
    40% {
        top: 5px
    }

    50% {
        left: 100%;
        top: 5px
    }

    100% {
        left: 100%
    }
}

@keyframes along {
    0% {
        left: 0;
        top: 5px
    }

    15%,
    25%,
    35%,
    45%,
    5% {
        top: 3px
    }

    10%,
    20%,
    30%,
    40% {
        top: 5px
    }

    50% {
        left: 100%;
        top: 5px
    }

    100% {
        left: 100%
    }
}

h1,
h2,
h3,
h4 {
    line-height: 1.3
}

h2 {
    font-size: 1.125rem
}

@media screen and (min-width:480px) {
    h2 {
        font-size: calc(18px + 2 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .top-list {
        align-self: flex-end
    }

    .search-form {
        max-width: 370px
    }

    h2 {
        font-size: 1.25rem
    }
}

.f-container-small {
    max-width: 790px
}

.f-container-medium {
    max-width: 1160px
}

.alt-font {
    font-family: Sun Valley, Oswald, "Open Sans", Helvetica, Arial, sans-serif
}

.section {
    padding-bottom: 10px;
    padding-top: 10px
}

.section.light {
    background-color: #eee
}

.section+.section:not(.cta-section),
[class=section]+[class=section] {
    padding-top: 0
}

.main.f-active {
    position: relative
}

.main.f-active:after {
    opacity: .8;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
    height: calc(100% + 40px);
    top: -40px
}

.j-content {
    font-size: .875rem;
    line-height: 1.43
}

.j-content h1 {
    font-size: 1rem;
    margin-bottom: 30px
}

.j-content .lead {
    font-size: 1.5rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.125
}

@media screen and (min-width:480px) {
    .j-content h1 {
        font-size: calc(16px + 8 * (100vw - 480px)/ 740)
    }

    .j-content .lead {
        font-size: calc(24px + 24 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .j-content h1 {
        font-size: 1.5rem
    }

    .j-content .lead {
        font-size: 3rem
    }
}

.j-content blockquote {
    font-size: 1rem;
    line-height: 1.333;
    margin-bottom: 40px
}

.j-dd.f-open .f-btn {
    background-color: #222;
    border-color: #222;
    border-radius: 5px 5px 0 0;
    color: #fff
}

.j-dd .f-btn {
    border-color: #eee;
    text-align: left
}

.j-dd .f-btn>.material-icons {
    font-size: 1.125rem;
    float: right
}

.j-dd .f-dropdown {
    background-color: #222;
    border: 0;
    border-radius: 0 0 5px 5px;
    color: #fff;
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    z-index: 1
}

.j-dd .f-dropdown a {
    color: #fff
}

.jessops-slider .f-grid>li {
    display: flex;
    float: none
}

.jessops-slider .panel>picture {
    width: 100%
}

.sharea {
    font-size: .875rem;
    line-height: 1.333;
    margin-left: auto;
    margin-right: auto;
    max-width: 290px;
    text-align: center
}

.sharea.alt {
    font-size: 1.125rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif
}

.sharea .f-list {
    margin: 0
}

.sharea p {
    margin-bottom: 10px
}

.sharea svg {
    height: 48px;
    width: 48px
}

.inst svg {
    fill: #9a398d
}

.face svg {
    fill: #3d5a99
}

.twit svg {
    fill: #5ea9dd
}

.blog-tags {
    margin-top: -10px
}

.blog-tags>* {
    margin: 10px 5px 0
}

.tags {
    margin-bottom: 40px
}

.tags>* {
    margin: 5px 10px 10px
}

.svg-wrap {
    position: relative;
    width: 100%
}

.svg-wrap.s-236-44 {
    height: 0;
    padding-bottom: 18.6440677966%;
    position: relative
}

.svg-wrap.s-236-44>iframe,
.svg-wrap.s-236-44>svg,
.svg-wrap.s-236-44>video,
.svg-wrap>svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.f-cookie-consent {
    font-size: .875rem;
    line-height: 1.43;
    position: fixed;
    z-index: 10
}

.f-cookie-consent a {
    color: #fff
}

.f-cookie-consent .material-icons {
    font-size: 2.125rem;
    margin-right: 10px
}

@media screen and (min-width:480px) {
    .j-content blockquote {
        font-size: calc(16px + 8 * (100vw - 480px)/ 740)
    }

    .f-cookie-consent .material-icons {
        font-size: calc(34px + 6 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .j-content blockquote {
        font-size: 1.5rem
    }

    .f-cookie-consent .material-icons {
        font-size: 2.5rem
    }
}

.f-cookie-consent .f-btn {
    min-width: 140px;
    width: 100%
}

@media screen and (max-width:766.99px) {
    .f-grid-medium.f-grid-auto {
        margin-top: -10px
    }

    .f-grid-medium.f-grid-auto>* {
        padding-top: 10px
    }

    .j-content h1 {
        margin-bottom: 15px;
        margin-top: 15px
    }

    .f-container-nopad {
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0
    }

    .f-container-nopad .f-border-rounded {
        border-radius: 0
    }
}

@media screen and (min-width:768px) {
    .search-form-container .hide-search {
        right: 5px;
        top: 5px
    }

    .section {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .section+.section:not(.cta-section) {
        padding-top: 0
    }

    .f-cookie-consent .f-cookie-consent-actions {
        margin-left: 40px;
        width: 20%
    }

    .f-cookie-consent .material-icons {
        margin-right: 20px
    }

    .main.takeover {
        margin-top: -40px
    }

    .main.takeover>.section:first-child {
        padding-top: 0
    }

    .main>.section:first-child {
        padding-top: 10px;
		padding-bottom:0px !important;
    }
}

@media screen and (min-width:960px) {
    .main.takeover {
        margin-top: -80px
    }

    .j-content .lead,
    .j-content h1 {
        margin-bottom: 30px
    }

    .j-content blockquote {
        padding-left: 20px
    }
}

.f-modal-dialog {
    border: 1px solid #eee;
    border-radius: 5px
}

.f-modal-dialog.f-modal-dialog-lightbox {
    border: 0
}

.f-modal-footer {
    padding: 10px
}

.f-lightbox-content>img {
    border-radius: 5px
}

.f-lightbox-content .f-slidenav {
    background-color: #fff;
    color: #000;
    height: auto;
    line-height: 0;
    margin: 0;
    opacity: 1;
    padding: 5px;
    transform: translateY(-50%);
    width: auto
}

.f-lightbox-content .f-slidenav>.material-icons {
    font-size: 1.875rem;
    top: 0
}

.f-lightbox-content .f-slidenav-previous {
    left: 0
}

.f-lightbox-content .f-slidenav-previous>.material-icons {
    left: -1px
}

.f-lightbox-content .f-slidenav-next {
    right: 0
}

.f-lightbox-content .f-slidenav-next>.material-icons {
    right: -1px
}

.basket-modal .f-modal-dialog {
    width: 1070px
}

.basket-modal h2,
.basket-modal h3 {
    font-size: 1.25rem;
    text-align: center
}

.basket-modal h2>svg,
.basket-modal h3>svg {
    vertical-align: bottom
}

.basket-modal .product-image {
    margin-right: 20px;
    width: 100px
}

.basket-modal .product-image img {
    border: 1px solid #eee;
    border-radius: 5px
}

.basket-modal .product-brand {
    max-width: 98px
}

.basket-modal .product-overview h3 {
    font-size: 1rem;
    margin: 5px 0 0
}

.basket-modal .product-overview p {
    margin: 5px 0 0
}

.basket-modal .product-overview hr {
    margin: 10px 0
}

.basket-modal .price {
    font-size: 1.125rem;
    margin-top: 10px
}

.basket-modal .offer,
.basket-modal .product-panel h3 {
    font-size: .875rem
}

.basket-modal .product-panel p:last-child {
    margin-bottom: 0;
    margin-top: 10px
}

.basket-modal .product-panel .deets>div {
    display: flex;
    flex-direction: column
}

.basket-modal .product-panel .save {
    font-size: .875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin-top: auto
}

.basket-modal .products-slider.jessops-slider .f-slidenav {
    padding: 0;
    top: 22%
}

.basket-modal .products-slider.jessops-slider .f-slidenav-previous {
    left: -34px
}

.basket-modal .products-slider.jessops-slider .f-slidenav-next {
    right: -34px
}

.basket-modal-grid {
    display: flex;
    flex-direction: column
}

.basket-modal-grid>div {
    border-radius: 5px
}

.basket-modal-grid>div>:last-child {
    margin-bottom: 0
}

.basket-modal-grid>hr {
    margin: 0
}

.basket-overview {
    display: flex;
    flex-direction: column;
    order: 1
}

.basket-overview>div {
    margin-top: auto
}

.basket-overview>div>:not(:first-child) {
    margin: 20px 0 0
}

.recommends {
    min-width: 0
}

.care-plan {
    font-size: .8125rem;
    border: 1px solid #65b231;
    padding: 20px;
    text-align: center
}

.care-plan.f-added {
    opacity: .5
}

.care-plan.f-added .f-btn {
    visibility: hidden
}

.care-plan .lead {
    font-size: .875rem;
    line-height: 1.25;
    margin-bottom: 10px
}

.care-plan .lead p:last-child {
    margin-bottom: 0
}

.care-plan .cover-price {
    font-size: 1.125rem;
    display: block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    margin-top: 10px
}

.product-finder-modal .f-modal-dialog>.f-close:first-child .material-icons {
    font-size: 2.25rem
}

.product-finder-modal h2 {
    font-size: 1rem;
    text-transform: uppercase
}

.product-finder-modal h2 svg {
    height: 20px;
    vertical-align: bottom;
    width: 20px
}

.product-finder-modal .f-modal-dialog {
    width: 1300px
}

.product-finder-modal .f-container-small {
    margin-bottom: 20px;
    max-width: 950px
}

.home-modal {
    background-color: rgba(255, 255, 255, .6)
}

.home-modal .f-modal-dialog {
    border: 2px solid rgba(34, 34, 34, .2);
    border-radius: 0;
    box-shadow: 0 6px 40px -15px rgba(0, 0, 0, .2);
    max-width: calc(100% - 40px);
    padding: 0
}

.home-modal .f-modal-dialog>.f-close:first-child {
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1
}

.home-modal .home-modal-content {
    padding: 20px
}

.home-modal h2 {
    font-size: 1.0625rem;
    color: #e0b119;
    text-transform: uppercase
}

.home-modal h2 strong {
    color: #000
}

.home-modal p:last-child {
    margin-bottom: 0
}

.home-modal .modal-price {
    font-size: 1.0625rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1
}

.home-modal .modal-price span {
    font-size: 2rem
}

@media screen and (min-width:480px) {
    .home-modal h2 {
        font-size: calc(17px + 15 * (100vw - 480px)/ 740)
    }

    .home-modal .modal-price {
        font-size: calc(17px + 23 * (100vw - 480px)/ 740)
    }

    .home-modal .modal-price span {
        font-size: calc(32px + 21 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .home-modal h2 {
        font-size: 2rem
    }

    .home-modal .modal-price {
        font-size: 2.5rem
    }

    .home-modal .modal-price span {
        font-size: 3.3125rem
    }
}

.home-modal .f-btn {
    font-size: 1.3125rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    width: 100%
}

@media screen and (max-width:766.99px) {
    .product-finder-modal .booking-dropdown {
        height: 100%
    }

    .basket-modal-grid .basket-overview,
    .basket-modal-grid .care-plan,
    .basket-modal-grid .recommends,
    .basket-modal-grid>hr {
        margin-top: 20px
    }
}

@media screen and (min-width:768px) {
    .basket-modal .product-image {
        width: 145px
    }

    .basket-modal-grid {
        display: grid;
        display: -ms-grid;
        -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
        grid-gap: 20px;
        -ms-grid-rows: auto 20px auto;
        grid-template-columns: repeat(6, 1fr)
    }

    .basket-modal-grid>div {
        border: 1px solid #eee;
        padding: 20px
    }

    .basket-modal-grid>div.care-plan {
        border: 1px solid #65b231
    }

    .current-item {
        -ms-grid-column: 1;
        grid-column: 1/5;
        -ms-grid-column-span: 7;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1
    }

    .basket-overview {
        -ms-grid-column: 9;
        grid-column: 5/7;
        -ms-grid-column-span: 3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        order: 0
    }

    .care-plan {
        -ms-grid-column: 1;
        grid-column: 1/4;
        -ms-grid-column-span: 5;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1
    }

    .care-plan+.recommends {
        -ms-grid-column: 7;
        grid-column: 4/7;
        -ms-grid-column-span: 6;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1
    }

    .recommends {
        -ms-grid-column: 1;
        grid-column: 1/7;
        -ms-grid-column-span: 11;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        min-width: 0
    }

    .home-modal .f-modal-dialog {
        padding: 20px
    }

    .home-modal .f-modal-dialog>.f-close:first-child {
        right: 30px;
        top: 30px
    }

    .home-modal .home-modal-content {
        padding: 0
    }

    .home-modal h2 {
        margin-top: 20px
    }

    .home-modal p {
        margin: 0
    }

    .home-modal .modal-price {
        margin-bottom: 0
    }

    .home-modal .home-modal-footer {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

@media screen and (min-width:960px) {
    .f-modal-dialog.f-modal-dialog-lightbox {
        max-width: calc(100% - 100px)
    }

    .f-lightbox-content .f-slidenav {
        background-color: transparent;
        color: #fff;
        padding: 0
    }

    .f-lightbox-content .f-slidenav>.material-icons {
        font-size: 3.125rem
    }

    .f-lightbox-content .f-slidenav-previous {
        left: -50px
    }

    .f-lightbox-content .f-slidenav-next {
        right: -50px
    }

    .basket-modal h2,
    .basket-modal h3 {
        text-align: left
    }

    .basket-modal .products-slider {
        padding: 0
    }

    .basket-modal .products-slider .f-slidenav {
        display: none
    }

    .current-item {
        grid-column: 1/4;
        -ms-grid-column-span: 5
    }

    .basket-overview {
        -ms-grid-column: 7;
        grid-column: 4/7;
        -ms-grid-column-span: 6
    }

    .care-plan {
        grid-column: 1/3;
        -ms-grid-column-span: 3
    }

    .care-plan h3 {
        text-align: center
    }

    .care-plan+.recommends {
        -ms-grid-column: 5;
        grid-column: 3/7;
        -ms-grid-column-span: 7
    }

    .home-modal .f-modal-dialog {
        padding: 20px;
        width: 800px
    }

    .home-modal .f-modal-dialog>.f-close:first-child {
        right: 40px;
        top: 40px
    }
}

.main-nav {
    background-color: #4a4a4a;
    font-weight: 400;
    height: calc(100vh - 49px);
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    text-rendering: optimizeLegibility;
    transform: translateX(-100%);
    transition: transform .3s ease-out;
    width: 100%;
    z-index: 2
}

.menu-active .main-nav {
    transform: translateX(0)
}

.main-nav .main-nav-links {
    list-style: none;
    margin: 0;
    padding: 0
}

.main-nav .main-nav-links li {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 400
}

.main-nav .main-nav-links a:not(.panel),
.main-nav .main-nav-links span.menu-header {
    color: #fff;
    display: block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    padding: 10px 20px
}

.main-nav a {
    text-decoration: none
}

.main-nav a.panel {
    width: auto
}

.main-nav-buttons {
    margin-top: 10px
}

.main-nav-buttons .f-btn {
    border-radius: 0;
    display: block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1;
    padding: 16px 20px;
    text-align: left;
    text-transform: uppercase
}

.sub-menu {
    background-color: #000;
    min-height: calc(100vh - 49px);
    position: absolute;
    top: 0;
    transform: translateX(100%);
    transition: transform .35s ease-out;
    width: 100%
}

.sub-menu>ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.sub-menu.f-active {
    transform: translateX(0);
    z-index: 1
}

.sub-menu.f-active li:first-child {
    background-color: #fff
}

.sub-menu.f-active li:first-child a {
    color: #000
}

.sub-menu.f-active .sub-menu.f-active {
    z-index: 2
}

.sub-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0
}

.sub-menu .sub-menu a:hover {
    text-decoration: underline
}

.close-submenu .material-icons,
.open-submenu {
    font-size: 1.75rem;
    float: right;
    height: 42px;
    line-height: 42px;
    margin-right: -21px;
    margin-top: -12px;
    text-align: center;
    top: 0;
    width: 48px
}

.close-submenu .material-icons {
    float: left;
    margin-left: -8px;
    margin-right: 10px;
    width: auto
}

.jessops-slider.products-slider .f-slidenav-previous {
    left: -40px
}

.jessops-slider.products-slider .f-slidenav-next {
    right: -40px
}

.jessops-slider .f-slidenav {
    background-color: #fff;
    border: 1px solid;
    border-radius: 50%;
    color: #000;
    height: auto;
    line-height: 0;
    margin: 0;
    opacity: 1;
    padding: 5px;
    width: auto
}

.jessops-slider .f-slidenav>.material-icons {
    font-size: 1.875rem;
    top: 0
}

.jessops-slider .f-slidenav-previous {
    left: 0
}

.jessops-slider .f-slidenav-previous>.material-icons {
    left: -1px
}

.jessops-slider .f-slidenav-next {
    right: 0
}

.jessops-slider .f-slidenav-next>.material-icons {
    right: -1px
}

.f-breadcrumb {
    display: none;
    margin: 20px 0
}

.f-breadcrumb>li:nth-child(n+2):before {
    font-size: .75rem
}

.f-breadcrumb a,
.f-breadcrumb span {
    font-size: .75rem;
    color: #000;
    line-height: 1;
    text-decoration: none
}

.f-breadcrumb a {
    font-weight: 700
}

@media screen and (max-width:958.99px) {
    .main-nav .f-container {
        max-width: none;
        padding: 0
    }

    .main-nav .main-nav-links a:not(.panel),
    .main-nav .main-nav-links span.menu-header {
        padding: 15px 20px
    }

    .main-nav .main-nav-links .sub-menu>li+li,
    .main-nav .main-nav-links span.menu-header,
    .main-nav .main-nav-links>li+li {
        border-top: 1px solid #151515
    }

    .main-nav-buttons .f-btn {
        padding-bottom: 15px;
        padding-top: 15px
    }
}

@media screen and (min-width:768px) {
    .f-breadcrumb {
        display: block
    }

    .jessops-slider.mobile-slider .f-slidenav {
        display: none
    }

    .jessops-slider .f-slidenav>.material-icons {
        font-size: 2.5rem
    }
}

@media screen and (min-width:960px) {
    .jessops-slider.products-slider .f-slidenav-previous {
        left: -40px
    }

    .jessops-slider.products-slider .f-slidenav-next {
        right: -40px
    }

    .main-nav {
        height: auto;
        min-height: 0;
        overflow: visible;
        position: static;
        transform: none
    }

    .main-nav .f-container {
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 1
    }

    .main-nav .main-nav-links {
        display: flex;
        flex: 1
    }

    .main-nav .main-nav-links .sub-menu a:not(.panel) {
        color: #fff;
        padding: 3px 0
    }

    .main-nav .main-nav-links .sub-menu a:not(.panel).menu-header {
        padding: 0
    }

    .main-nav .main-nav-links>li>a:not(.panel),
    .main-nav .main-nav-links>li>span.menu-header {
        font-size: 1.125rem;
        padding: 12px 6px
    }

    .main-nav .main-nav-links>li+li {
        margin-left: 5px
    }

    .main-nav .main-nav-links>li>.sub-menu {
        align-items: flex-start;
        display: flex;
        padding: 20px
    }

    .main-nav .main-nav-links>li>.sub-menu>ul {
        flex: 1
    }

    .main-nav .main-nav-links a:not(.panel),
    .main-nav .main-nav-links span.menu-header {
        color: #fff;
        display: inline-block;
        padding: 16px 10px
    }

    .main-nav .main-nav-links span.menu-header {
        margin-bottom: 20px;
        padding: 0
    }

    .main-nav-buttons {
        align-self: flex-end;
        display: flex;
        margin-top: 0
    }

    .main-nav-buttons .f-btn {
        padding: 11px 10px;
        text-align: center;
        width: 124px
    }

    .sub-menu {
        background-color: #222;
        border-radius: 0 0 5px 5px;
        box-sizing: border-box;
        left: 10px;
        min-height: 0;
        opacity: 0;
        pointer-events: none;
        top: 100%;
        transform: none;
        transition: opacity .25s, visibility .25s .25s;
        visibility: hidden;
        width: calc(100% - 60px)
    }

    .sub-menu>ul {
        display: flex;
        flex-wrap: wrap
    }

    .sub-menu>ul>li {
        width: 25%
    }

    .sub-menu>ul>li:first-child {
        display: none
    }

    .sub-menu a:not(.panel),
    .sub-menu span.menu-header {
        font-size: .875rem;
        padding: 0
    }

    .sub-menu a:not(.panel).menu-header,
    .sub-menu span.menu-header.menu-header {
        font-size: 1rem;
        margin-bottom: 20px;
        text-transform: none
    }

    .sub-menu .sub-menu {
        margin: 0 0 20px;
        position: static
    }

    .sub-menu .sub-menu>li {
        line-height: 1
    }

    .sub-menu .sub-menu>li:first-child {
        display: none
    }

    .sub-menu .sub-menu a:not(.panel),
    .sub-menu .sub-menu span.menu-header {
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        text-transform: none
    }

    .sub-menu .panel {
        margin-left: 20px
    }

    ul.sub-menu:last-child {
        margin-bottom: 0
    }

    .has-menu:hover>a:not(.panel),
    .has-menu:hover>span.menu-header {
        background-color: #222;
        color: #fff
    }

    .has-menu:hover .sub-menu {
        opacity: 1;
        pointer-events: all;
        transition: opacity .25s, visibility .25s;
        visibility: visible;
        z-index: 1
    }

    .close-submenu .material-icons,
    .open-submenu {
        display: none
    }
}

@media screen and (min-width:1220px) {

    .main-nav .main-nav-links>li>a:not(.panel),
    .main-nav .main-nav-links>li>span.menu-header {
        font-size: 1.125rem;
        padding: 16px 7px
    }

    .main-nav .main-nav-links>li+li {
        margin-left: 22.769231px
    }

    .main-nav-buttons .f-btn {
        padding: 15px 20px;
        width: 142px
    }

    .sub-menu {
        left: 30px
    }
}

@media screen and (min-width:1380px) {
    .jessops-slider.products-slider .f-slidenav-previous {
        left: -50px
    }

    .jessops-slider.products-slider .f-slidenav-next {
        right: -50px
    }

    .jessops-slider .f-slidenav {
        background-color: transparent;
        color: #000;
        padding: 0
    }

    .jessops-slider .f-slidenav>.material-icons {
        font-size: 2.5rem
    }

    .jessops-slider .f-slidenav-previous {
        left: -50px
    }

    .jessops-slider .f-slidenav-next {
        right: -50px
    }
}

a.f-panel-box,
a.panel {
    display: block;
    text-decoration: none;
    width: 100%
}

.panel {
    border-radius: 5px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none
}

.panel:hover {
    color: #000;
    text-decoration: none
}

.panel:hover .f-lazyload-background {
    transform: scale(1.1)
}

.panel:hover .panel-overlay-alt {
    transform: translateY(0)
}

.panel .panel-content h3 {
    margin: 0;
    padding: 0
}

.panel .panel-content p {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.375rem;
    font-weight: 300;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%
}

.panel .panel-content span {
    font-size: .875rem
}

.panel .panel-content span:hover {
    text-decoration: underline
}

.panel-two-face {
    overflow: hidden
}

.panel-two-face .panel-content {
    order: 1
}

.panel-two-face p {
    margin-left: auto;
    margin-right: auto;
    max-height: 74px;
    max-width: 190px;
    overflow: hidden
}

.panel-two-face p:last-child {
    margin-top: 40px;
    max-width: none
}

.panel-black {
    background-color: #000
}

.panel-grey {
    background-color: #eee
}

.panel-red {
    background-color: #d0021b;
    color: #fff
}

.panel-red h3,
.panel-red:hover {
    color: #fff
}

.panel-center {
    text-align: center
}

.panel-tp .panel-overlay {
    background-color: #eee;
    border-radius: 5px;
    padding: 20px;
    position: relative
}

.panel-tp .panel-overlay>img {
    margin-bottom: 10px;
    max-width: 236px
}

.panel-tp .svg-wrap {
    max-width: 80%
}

.panel-tp h3 {
    margin: 10px 0 0
}

.panel-tp p {
    margin: 0
}

.panel-finance,
.panel-store {
    border: 1px solid #eee;
    padding: 15px
}

.panel-finance.f-active,
.panel-store.f-active {
    background-color: #000;
    color: #fff;
    position: relative
}

.panel-finance.f-active:before,
.panel-store.f-active:before {
    font-size: .875rem;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    content: '\e5ca';
    font-family: Material Icons;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 20px
}

.panel-finance.f-active a,
.panel-finance.f-active h4,
.panel-store.f-active a,
.panel-store.f-active h4 {
    color: #fff
}

.panel-finance h4,
.panel-store h4 {
    margin-bottom: 0
}

.panel-finance p,
.panel-store p {
    margin: 0
}

.panel-finance p:last-child,
.panel-store p:last-child {
    margin-top: 5px
}

.panel-finance a,
.panel-store a {
    font-size: .75rem
}

.panel-guide h2,
.panel-guide h3 {
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 10px;
    padding-bottom: 15px;
    text-align: center
}

.panel-finance h4 {
    margin: 0 auto;
    width: 60%
}

.panel-finance p:first-of-type {
    margin: 10px 0
}

.panel-finance .f-list {
    margin-bottom: 10px;
    margin-top: 10px
}

.panel-review {
    align-items: middle;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 15px
}

.panel-review .margin,
.panel-review address {
    margin-bottom: 0;
    margin-top: 5px
}

.panel-review p {
    margin-bottom: 0;
    margin-top: -3px
}

.panel-review .edit {
    border-left: 1px solid #eee;
    margin-bottom: -15px;
    margin-left: 10px;
    margin-top: -15px;
    padding-left: 20px;
    padding-right: 10px
}

.panel .f-lazyload-background {
    transition: transform .35s ease-out
}

.f-panel-box.f-border-rounded {
    overflow: hidden
}

.products-list>li {
    display: flex
}

.product-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-decoration: none
}

.product-panel:hover {
    color: #000;
    text-decoration: none
}

.product-panel.f-added {
    opacity: .5
}

.product-panel.f-added .f-btn {
    visibility: hidden
}

.similar .product-panel h3 {
    margin-bottom: 10px
}

.product-panel img {
    border: 1px solid #eee;
    border-radius: 5px
}

.product-panel .deets {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between
}

.product-panel .deets>div {
    margin-top: auto
}

.product-panel .deets .cashback {
    font-weight: 100
}

.product-panel h3 {
    font-size: .875rem;
    flex: 1 1 auto;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin-bottom: 5px;
    margin-top: 10px
}

@media screen and (min-width:480px) {
    .product-panel h3 {
        font-size: calc(14px + 2 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .product-panel h3 {
        font-size: 1rem
    }
}

.product-panel h4 {
    font-size: .875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin: 0 0 5px
}

.product-panel p {
    line-height: 1;
    margin: 0 0 5px
}

.product-panel p.save {
    margin-top: 10px
}

.product-panel .save {
    font-size: 1.125rem;
    color: #d0021b;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif
}

.product-panel .alternatives {
    font-size: .75rem
}

.product-panel .old-price {
    font-size: .875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    text-decoration: line-through
}

.panel-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.panel-overlay h2,
.panel-overlay h3,
.panel-overlay p {
    color: #fff
}

.panel-overlay-alt {
    background-color: rgba(32, 165, 222, .8);
    bottom: 0;
    left: 0;
    position: absolute;
    transform: translateY(100%) translateY(-40px);
    transition: transform .35s cubic-bezier(.6, 0, .7, 1);
    width: 100%
}

.panel-overlay-alt .panel-content {
    padding: 0 20px 20px
}

.panel-overlay-tl {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    padding: 20px
}

.panel-overlay-tl h3 {
    font-size: 1.5rem;
    margin: 0
}

@media screen and (min-width:480px) {
    .panel-overlay-tl h3 {
        font-size: calc(24px + 24 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .panel-overlay-tl h3 {
        font-size: 3rem
    }
}

.panel-overlay-tl p {
    font-size: .875rem;
    margin: 0 0 10px;
    max-width: 80%
}

.panel-overlay-bl {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    text-align: center
}

.panel-overlay-bl h3 {
    font-size: 1.5rem;
    margin: 0;
    width: 85%
}

.panel-overlay-s {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    text-align: left
}

.panel-overlay-s>img {
    width: 120px
}

.panel-overlay-s h3 {
    font-size: 1.5rem;
    margin: 0;
    width: 85%
}

.panel-overlay-wh {
    background-color: rgba(255, 255, 255, .9)
}

.panel-overlay-wh h3 {
    font-size: 1.5rem;
    color: #000
}

.panel-overlay-wh p {
    font-size: .875rem;
    color: #000
}

.panel-contrast {
    color: #fff
}

.panel-content {
    padding: 20px
}

.panel-content>div {
    width: 100%
}

.panel-content h3 {
    font-size: 1.5rem;
    line-height: 1.125;
    text-transform: uppercase
}

@media screen and (min-width:480px) {
    .panel-content h3 {
        font-size: calc(24px + 12 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .panel-content h3 {
        font-size: 2.25rem
    }
}

.panel-content p {
    font-size: .875rem
}

.panel-black .panel-content,
.panel-black .panel-content h3 {
    color: #fff
}

.contact-box {
    font-size: .75rem;
    background-color: #000;
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    line-height: 1.43;
    padding: 20px 30px;
    position: relative;
    text-decoration: none
}

@media screen and (min-width:480px) {
    .contact-box {
        font-size: calc(12px + 2 * (100vw - 480px)/ 740)
    }
}

.contact-box:hover {
    color: #fff;
    text-decoration: none
}

.contact-box:hover svg {
    transform: translate(-50%, -50%) scale(1.1)
}

.contact-box .svg-wrap {
    border: 1px solid #fff;
    border-radius: 50%;
    display: block;
    height: 70px;
    margin: 0 auto 10px;
    text-align: center;
    width: 70px
}

.contact-box svg {
    height: 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform .2s;
    width: 32px
}

.contact-box p {
    margin-bottom: 0;
    margin-top: auto
}

@media screen and (max-width:766.99px) {
    .panel .f-btn {
        width: 100%
    }
}

@media screen and (min-width:768px) {
    .panel-two-face .panel-content {
        order: 0
    }

    .panel-two-face p {
        max-width: none
    }

    .panel-overlay-alt {
        transform: translateY(100%) translateY(-45px)
    }

    .panel-tp {
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center
    }

    .panel-tp .panel-overlay {
        background-color: rgba(255, 255, 255, .9);
        height: auto;
        left: 50%;
        padding: 20px 30px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto
    }

    .panel-tp .svg-wrap {
        max-width: 100%
    }

    .panel-guide h2,
    .panel-guide h3 {
        margin-top: 20px;
        padding-bottom: 20px
    }

    .panel .panel-content {
        padding: 20px
    }

    .panel .panel-content p {
        line-height: 1.2em;
        margin: 5px 0
    }

    .panel-height {
        background-color: #fff;
        height: 100%
    }

    .panel-height .advice-centre {
        background-color: #fff;
        top: 154px
    }

    .panel-overlay-bl,
    .panel-overlay-s {
        align-items: flex-start;
        text-align: left
    }

    .similar .product-panel h3 {
        margin-bottom: 20px
    }
}

@media screen and (min-width:1220px) {
    .contact-box {
        font-size: .875rem
    }

    .panel-overlay-alt {
        transform: translateY(100%) translateY(-50px)
    }

    .panel-overlay-bl h3 {
        width: 55%
    }

    .panel .panel-content {
        padding: 20px
    }

    .panel .panel-content p {
        line-height: 1.2em;
        margin: 5px auto 40px;
        font-size: 1.75rem;
        max-height: 100%;
        max-width: 210px
    }

    .panel .panel-content span {
        font-size: .875rem
    }

    .panel-height {
        height: auto
    }

    .panel-height .advice-centre {
        top: auto
    }

    .product-panel h3 {
        display: inline-block;
        max-height: 90px;
        min-height: 90px;
        overflow: hidden
    }
}

.tp-score {
    font-size: .75rem
}

.tp-score svg {
    height: 22px;
    margin-right: 10px;
    width: 122px
}

.product-slideshow ul {
    margin: 0 auto;
    max-width: 85%
}

.price {
    font-size: 1.5rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.125
}

@media screen and (min-width:480px) {
    .price {
        font-size: calc(24px + 24 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .price {
        font-size: 3rem
    }
}

.price.alt {
    font-size: 1.125rem;
    margin: 0 0 15px
}

.price.alt .cashback {
    font-size: .875rem
}

.price.larger {
    font-size: 1.5rem
}

.price .save,
.price>* {
    font-size: .875rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 400
}

.f-btn-tall.add {
    font-size: 1.25rem;
    padding-bottom: 14px;
    padding-top: 14px;
    text-transform: uppercase
}

.offer {
    font-size: .875rem;
    line-height: 1.2;
    margin: 0
}

@media screen and (min-width:480px) {
    .offer {
        font-size: calc(14px + 6 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .offer {
        font-size: 1.25rem
    }
}

.buy-wrap button {
    font-weight: 600;
    padding: 16px 0
}

.buy-wrap .js-add-to-basket {
    font-size: 1.125rem;
    padding: 15px 0
}

.order-collect {
    padding: 0 20px 20px
}

.order-collect p {
    margin: 10px 0
}

.order-collect p.collect-now {
    background: url(/assets/images/product/in-stock.png) left top no-repeat;
    color: #65b231;
    content: '';
    display: inline;
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: 6px;
    padding-left: 35px;
    padding-top: 2px;
    position: relative
}

.order-collect p.location-address {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500
}

.order-collect p a {
    font-size: .8125rem
}

.order-collect button {
    font-size: .875rem;
    margin-top: 6px;
    max-width: 198px;
    padding: 10px
}

.check-stock {
    padding: 16px 0 0
}

.check-stock,
.order-collect {
    background: #eee;
    border-radius: 5px;
    margin-top: 15px
}

.check-stock h2,
.order-collect h2 {
    margin: 0 0 10px
}

.check-stock h2:before,
.order-collect h2:before {
    background: url(/assets/images/checkout/store-icon.svg) center top no-repeat;
    content: '';
    display: inline-block;
    font-weight: 600;
    height: 19px;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.check-stock .postcode-check-dt,
.order-collect .postcode-check-dt {
    border-radius: 5px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px 20px
}

.check-stock .postcode-check-dt input,
.order-collect .postcode-check-dt input {
    border: 1px solid #fff;
    border-radius: 5px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .8125rem;
    height: 44px;
    padding: 4px 15px;
    width: 100%
}

.check-stock .postcode-check-dt button,
.order-collect .postcode-check-dt button {
    padding: 8px 20px;
    width: auto
}

.check-stock .postcode-check-dt .f-btn,
.order-collect .postcode-check-dt .f-btn {
    border-radius: 0 5px 5px 0
}

.check-stock .postcode-check-mob,
.order-collect .postcode-check-mob {
    display: none
}

.check-stock .postcode-check,
.order-collect .postcode-check {
    margin-left: 19px
}

@media screen and (max-width:1219.99px) {
    .buy-wrap button {
        padding: 10px 0
    }
}

.was {
    line-height: 1.4;
    text-decoration: line-through
}

.save {
    color: #d0021b
}

.cashback {
    display: block;
    font-weight: 700;
    margin: 5px 0;
    margin-left: 0 !important
}

.cashback~.j-list:last-child {
    margin-bottom: 0
}

.messages {
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 100%
}

.messages li {
    font-size: 1rem;
    padding-left: 27px;
    position: relative
}

.messages li svg {
    float: left;
    left: -18px;
    margin: 0;
    max-width: 52px;
    padding: 0;
    position: absolute;
    top: -22px
}

.messages li svg ellipse.st0 {
    stroke: #000
}

.messages li.green svg ellipse.st0 {
    stroke: #65b231
}

.messages li.false svg ellipse.st0 {
    stroke: #eee
}

.messages .material-icons {
    border: 2px solid;
    border-radius: 50%;
    margin-right: 5px
}

.messages .false {
    color: #eee
}

.messages .green {
    color: #65b231
}

.delivery-stock {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 15px
}

.delivery-stock .in-stock {
    background: url(/assets/images/product/in-stock.png) left top no-repeat;
    padding-left: 30px
}

.delivery-stock .home-delivery {
    background: url(/assets/images/product/home-delivery.png) left top 3px no-repeat;
    padding-left: 40px
}

.delivery-stock .home-delivery,
.delivery-stock .in-stock {
    content: '';
    display: inline-block;
    height: 24px
}

.products-slider {
    margin-bottom: 40px;
    padding: 0 30px
}

.products-slider.jessops-slider .f-slidenav {
    background-color: transparent
}

.products-slider.jessops-slider .f-slidenav .material-icons {
    font-size: 3.125rem
}

.products-slider .f-slidenav {
    top: 28%
}

.products-slider button {
    border: 0 !important
}

section.similar h2 {
    font-weight: 500
}

.blog-slider.jessops-slider .f-slidenav {
    background-color: transparent
}

.blog-slider.jessops-slider .f-slidenav .material-icons {
    font-size: 3.125rem
}

.blog-slider button {
    border: 0 !important
}

.protection {
    font-size: .8125rem;
    margin-top: 10px;
    text-align: left
}

.protection p {
    margin-bottom: 0
}

.protection-deets {
    display: flex;
    justify-content: space-between;
    margin-top: 0
}

.protection-deets a {
    display: block;
    margin-top: 10px
}

.protection-deets input[type=checkbox] {
    border-color: #20a5de;
    margin-right: 10px;
    margin-top: 0;
    min-width: 19px
}

.protection-deets span {
    margin-top: -4px;
    padding-right: 60px
}

.protection-deets strong {
    font-size: 1.125rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1;
    min-width: 80px;
    text-align: right;
    white-space: nowrap
}

.protection.f-hidden-large-xlarge {
    margin: 20px 0
}

.insurance-modal .f-modal-dialog {
    font-size: .8125rem;
    padding: 10px;
    width: 460px
}

.insurance-modal .f-modal-dialog>.f-close:first-child {
    margin: 0;
    position: absolute;
    right: 10px;
    top: 10px
}

.insurance-modal .product-brand {
    width: 100px
}

.insurance-modal .price,
.insurance-modal .tp-score {
    margin: 5px 0 0
}

.insurance-modal .price {
    font-size: 1.125rem
}

.insurance-modal .offer {
    font-size: .875rem
}

.insurance-modal hr {
    margin: 10px 0
}

.insurance-modal h1 {
    font-size: 1rem;
    margin: 5px 0 0
}

.insurance-modal h2 {
    font-size: 1.25rem
}

.insurance-modal a {
    font-size: .875rem
}

.care-plan-deets {
    font-size: 1rem;
    align-items: center;
    display: flex;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    justify-content: space-between;
    line-height: 1;
    margin: 5px 0 30px
}

.care-plan-deets strong {
    font-size: 1.125rem;
    font-weight: 500;
    white-space: nowrap
}

.confirm-insurance {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px
}

.confirm-insurance input[type=checkbox] {
    height: 10px;
    margin-right: 5px;
    margin-top: -1px;
    width: 10px
}

.confirm-insurance input[type=checkbox]:before {
    font-size: .5rem;
    line-height: 8px
}

.confirm-insurance .f-btn {
    margin: 10px -10px -10px;
    width: calc(100% + 20px)
}

.confirm-insurance .f-btn-disabled {
    background-color: #eee;
    border-color: #eee;
    color: #999
}

.the-product h1 {
    font-weight: 500;
    font-size: 1.25rem;
    margin: 20px 20px 10px
}

.the-product h1+.product-code {
    margin-top: 0
}

.the-product p.price {
    margin: 0 0 5px
}

.the-product p.product-code {
    font-size: .75rem
}

.the-product p.cashback {
    font-size: .875rem
}

.the-product p.tp-score {
    margin: 10px 0 0
}

.the-product p.s-marg {
    margin: 10px 0
}

.the-product p.or {
    margin: 0;
    text-align: center
}

.the-product .f-btn {
    font-weight: 600
}

.tab-section {
    margin-top: 20px
}

.tab-section .tabs {
    margin-bottom: 0;
    margin-top: 20px
}

.tab-section .tabs li {
    border-right: 2px solid #fff;
    display: flex;
    margin-bottom: 0
}

.tab-section .tabs li:last-of-type {
    border-right: 0
}

.tab-section .tabs li a {
    background-color: #eee;
    border: none;
    color: #4a4a4a;
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: 100%
}

.tab-section .tabs li a.finance-tab {
    background-color: #20a5de;
    color: #fff
}

.tab-section .tabs li a:hover {
    background-color: #4a4a4a;
    color: #fff;
    margin-bottom: 0;
    padding-bottom: 0
}

.tab-section .tabs li .f-dropdown {
    border: 0;
    max-height: 1000px;
    padding: 0;
    width: 100%
}

.tab-section .tabs li .f-dropdown ul {
    margin: 0;
    width: 100%
}

.tab-section .tabs li .f-dropdown ul li {
    border-top: 1px solid #eee;
    display: block
}

.f-tab-responsive>a:before {
    margin-right: 10px
}

.tab-contents {
    background-color: #fff;
    margin-top: 0
}

.tab-contents h3 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600
}

.tab-contents p {
    font-size: .875rem
}

.tab-contents li {
    padding: 20px
}

.tab-contents .f-btn {
    max-width: 243px;
    width: 100%
}

.deals {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 20px 0 0;
    padding: 10px 15px 0 10px;
    text-align: left
}

.deals h3 {
    font-weight: 500
}

.deals .f-accordion-title,
.deals h3 {
    display: block !important;
    padding: 0 0 10px
}

.deals .f-accordion-content,
.deals h3 {
    background-color: #fff
}

.deals .f-accordion-content {
    padding: 0 0 20px
}

.deals .f-accordion-content .f-btn {
    width: 100%
}

.deals p {
    margin: 10px 0
}

.deals .special p {
    margin: 0;
    padding: 0
}

.deets button {
    font-weight: 300;
    margin: 20px 0
}

.star-rating {
    background: url(/assets/images/stars.png) left top no-repeat;
    display: block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    height: 18px;
    line-height: 1.2rem;
    margin: 0 auto 10px;
    max-width: 100px;
    text-decoration: none;
    text-indent: 110%
}

.star-rating:hover {
    text-decoration: underline
}

.similar {
    padding: 0 17px
}

.p-tabs-mobile {
    margin-top: 10px
}

.p-tabs-mobile div {
    margin-top: 5px
}

.p-tabs-mobile div h2.finance-tab {
    background-color: #20a5de;
    color: #fff
}

.p-tabs-mobile div .f-accordion-content {
    margin-top: -5px;
    padding-top: 20px
}

.p-tabs-mobile div .f-accordion-content .f-btn {
    width: 100%
}

@media screen and (min-width:1220px) {
    .p-tabs-mobile {
        display: none
    }
}

@media screen and (min-width:375px) {
    .messages {
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-weight: 600
    }
}

@media screen and (min-width:768px) {
    .the-product {
        margin: 0 auto 20px;
        max-width: 580px
    }

    .the-product h1 {
        margin: 20px 20px 10px 0
    }

    .messages {
        font-size: .6875rem
    }

    .insurance-modal .f-modal-dialog>.f-close:first-child {
        right: 20px;
        top: 20px
    }

    .insurance-modal .f-modal-content {
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 20px
    }

    .tab-section .tabs li {
        display: block
    }

    .tab-section .tabs li a {
        padding: 15px
    }

    .f-zoom-area {
        box-shadow: 0 5px 50px 5px rgba(150, 150, 150, .2);
        position: absolute;
        z-index: 9999
    }

    span.f-lazyload-placeholder {
        pointer-events: none
    }
}

@media screen and (max-width:766.99px) {
    .messages {
        margin-bottom: 0
    }
}

@media screen and (min-width:960px) {
    .recommended {
        margin-bottom: 0
    }

    .recommended .products-slider .f-slidenav {
        top: 20%
    }

    .product-slideshow ul {
        max-width: 100%
    }

    .similar .product-slideshow .f-slidenav {
        top: 36%
    }

    .the-product {
        margin: 0
    }

    .the-product h1 {
        font-size: 1.5rem;
        margin: 20px 0 10px
    }

    .the-product p.product-code {
        font-size: .875rem
    }

    .the-product p.cashback {
        font-size: 1.25rem
    }

    .the-product p.tp-score {
        font-size: .875rem;
        margin: 20px 0 0
    }

    .the-product li {
        font-size: .875rem
    }

    .star-rating {
        display: inline-block;
        float: left;
        margin-right: 55px;
        max-width: 100px
    }

    .price.alt {
        margin: 0 0 30px
    }

    .deals {
        padding: 20px 20px 5px
    }

    .deals .f-accordion-title,
    .deals h3 {
        padding: 0 0 15px
    }

    .deals p {
        margin: 15px 0
    }

    .insurance-modal .f-modal-dialog {
        padding: 20px;
        width: 864px
    }

    .insurance-modal .f-modal-dialog>.f-close:first-child {
        right: 0;
        top: 5px
    }

    .tab-section {
        margin-top: 20px
    }

    .tab-section .tabs {
        border-bottom: 3px solid #4a4a4a;
        display: table;
        margin-bottom: 0;
        margin-top: 7px;
        width: 100%
    }

    .tab-section .tabs li {
        display: table-cell;
        float: none;
        margin-bottom: 0;
        width: auto
    }

    .tab-section .tabs li a {
        border: none;
        border-radius: 5px 5px 0 0;
        display: block;
        font-size: 1.0625rem;
        height: 48px;
        max-height: 42px;
        padding: 12px 0 0;
        text-align: center
    }

    .tab-section .tabs li.f-active {
        margin-bottom: -1px
    }

    .tab-section .tabs li.f-active a {
        background-color: #4a4a4a;
        color: #fff
    }

    .buy-wrap .check-stock,
    .buy-wrap .order-collect {
        border-radius: 5px
    }

    .buy-wrap .check-stock h2,
    .buy-wrap .order-collect h2 {
        font-weight: 500;
        margin-bottom: 15px;
        padding-top: 15px
    }

    .buy-wrap .check-stock h2:before,
    .buy-wrap .order-collect h2:before {
        margin-right: 5px;
        width: 30px
    }
}

@media (min-width:680px) and (max-width:1024px) {
    .product-top {
        margin-top: -40px !important
    }

    .messages {
        padding: 0 0 10px
    }
}

@media (min-width:1024px) and (max-width:1450px) {

    .check-stock,
    .order-collect {
        margin-top: 0;
        padding-top: 0
    }

    .delivery-stock {
        margin-bottom: 20px
    }
}

@media screen and (min-width:1220px) {
    .product-top .p-col-1 {
        width: 549px
    }

    .product-top .p-col-2 {
        max-width: 375px
    }

    .product-top .p-col-3 {
        max-width: 412px
    }

    .check-stock,
    .check-stock h2,
    .order-collect,
    .order-collect h2 {
        margin-top: 0;
        padding-top: 0
    }

    .check-stock .postcode-check-dt input,
    .order-collect .postcode-check-dt input {
        font-size: .875rem
    }

    .check-stock .postcode-check-dt button,
    .order-collect .postcode-check-dt button {
        padding: 8px 40px
    }

    .tab-section .tabs li a {
        font-size: 1.25rem;
        max-height: 48px
    }
}

@media screen and (min-width:1450px) {

    .blog-slider,
    .products-slider {
        padding: 0
    }

    .product-top .p-col-3 {
        max-width: 417px
    }
}

.cta-section {
    text-align: center
}

.cta-section+.section:not(.cta-section) {
    margin-top: 20px
}

.cta-section h2 {
    font-size: 1.5rem;
    line-height: 1.125
}

@media screen and (min-width:480px) {
    .cta-section h2 {
        font-size: calc(24px + 24 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .cta-section h2 {
        font-size: 3rem
    }
}

.cta-section p {
    font-size: .875rem
}

.cta-section .f-container {
    width: 100%
}

.cta-section .jessops-list {
    display: none
}

.cta-section .f-btn {
    font-weight: 600;
    width: 100%
}

.cta-img {
    margin-bottom: -20px;
    margin-top: 40px
}

.cta-img.top {
    margin-bottom: 40px;
    margin-top: -20px
}

.callout-section .callout {
    margin: 0
}

.dark {
    background-color: #000;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, .6)
}

.dark .play-video,
.dark a,
.dark h2 {
    color: #fff
}

.dark .f-btn {
    text-shadow: none
}

.dark-light,
.dark-light h2,
.grey,
.light {
    color: #000
}

.grey h2,
.light h2 {
    color: #20a5de
}

.grey {
    background-color: #e6e6e8
}

.signup {
    background-color: #87cde5;
    color: #fff;
    min-height: 0
}

.signup h2 {
    color: #fff
}

.f-slider-container .play-video,
.f-visible-small .play-video {
    color: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.play-video .material-icons {
    font-size: 6.25rem
}

.similar .f-grid>div {
    display: flex
}

.section.content-grid-section+.content-grid-section {
    padding-top: 40px
}

@media screen and (max-width:766.99px) {
    .cta-section .f-container {
        padding-left: 30px;
        padding-right: 30px
    }

    .cta-section .f-form-row+.f-form-row,
    .cta-section h2 {
        margin-top: 10px
    }
}

@media screen and (min-width:480px) {
    .cta-section .f-btn:not(.f-width-1-1) {
        width: auto
    }

    .dark-light {
        background-color: #000;
        color: #fff
    }

    .dark-light .play-video,
    .dark-light a,
    .dark-light h2 {
        color: #fff
    }

    .dark-light .f-btn-ghost-dark {
        border-color: #fff;
        color: #fff
    }

    .dark-light .f-btn-ghost-dark:focus,
    .dark-light .f-btn-ghost-dark:hover {
        background-color: #fff;
        color: #000
    }
}

@media screen and (min-width:768px) {
    .cta-section {
        text-align: left
    }

    .cta-section .jessops-list {
        display: block
    }

    .signup {
        background: url(/assets/images/ctas/newsletter-bg.jpg) right -430px center no-repeat #87cde5
    }

    .recommended h2,
    .similar h2 {
        margin-bottom: 30px
    }
}

@media screen and (min-width:1220px) {
    .section.cta-section {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .section.cta-section.big-pad {
        padding-bottom: 120px;
        padding-top: 120px
    }

    .signup {
        background: url(/assets/images/ctas/newsletter-bg.jpg) center center no-repeat #87cde5
    }
}

[data-tt] {
    display: inline-block;
    position: relative
}

[data-tt]:after,
[data-tt]:before {
    display: block !important;
    font-size: .9em;
    font-weight: 300;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-transform: none;
    transition: opacity .3s, transform .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-tt]:before {
    border: 5px solid transparent;
    content: '';
    z-index: 1001
}

[data-tt]:after {
    background-color: #000;
    border-radius: 3px;
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, .35);
    color: #fff;
    content: attr(data-tt);
    max-width: 21em;
    min-width: 3em;
    overflow: hidden;
    padding: 8px 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1000
}

[data-tt]:not([flow]):before,
[data-tt][flow^=up]:before {
    border-bottom-width: 0;
    border-top-color: #000;
    bottom: 100%
}

[data-tt]:not([flow]):after,
[data-tt][flow^=up]:after {
    bottom: calc(100% + 5px)
}

[data-tt]:not([flow]):after,
[data-tt]:not([flow]):before,
[data-tt][flow^=up]:after,
[data-tt][flow^=up]:before {
    left: 50%;
    transform: translate(-50%, -.5em)
}

[data-tt][flow^=down]:before {
    border-bottom-color: #000;
    border-top-width: 0;
    top: 100%
}

[data-tt][flow^=down]:after {
    top: calc(100% + 5px)
}

[data-tt][flow^=down]:after,
[data-tt][flow^=down]:before {
    left: 50%;
    transform: translate(-50%, .5em)
}

[data-tt][flow^=left]:before {
    border-left-color: #000;
    border-right-width: 0;
    left: -5px;
    top: 50%;
    transform: translate(-.5em, -50%)
}

[data-tt][flow^=left]:after {
    right: calc(100% + 5px);
    top: 50%;
    transform: translate(-.5em, -50%)
}

[data-tt][flow^=right]:before {
    border-left-width: 0;
    border-right-color: #000;
    right: -5px;
    top: 50%;
    transform: translate(.5em, -50%)
}

[data-tt][flow^=right]:after {
    left: calc(100% + 5px);
    top: 50%;
    transform: translate(.5em, -50%)
}

[data-tt]:not([flow]):hover:after,
[data-tt]:not([flow]):hover:before,
[data-tt][flow^=down]:hover:after,
[data-tt][flow^=down]:hover:before,
[data-tt][flow^=up]:hover:after,
[data-tt][flow^=up]:hover:before {
    opacity: .9;
    transform: translate(-50%, 0)
}

[data-tt][flow^=left]:hover:after,
[data-tt][flow^=left]:hover:before,
[data-tt][flow^=right]:hover:after,
[data-tt][flow^=right]:hover:before {
    opacity: .9;
    transform: translate(0, -50%)
}

[data-tt='']:after,
[data-tt='']:before {
    display: none !important
}

.trade-section {
    padding-top: 20px !important
}

.spacer {
    height: 15px
}

.box {
    border: 1px solid #eee;
    border-radius: 5px
}

.savings {
    display: inline-block;
    margin: 10px 0 0;
    padding: 0;
    width: 100%
}

.savings .inner {
    background: #8a549c;
    border-radius: 5px 5px 0 0;
    padding: 10px 0;
    text-align: center;
    width: 100%
}

.savings .inner h2 {
    color: #fff;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
    width: 100%
}

.savings .inner p {
    display: inline;
    font-size: .875rem;
    margin: 0;
    padding: 0
}

.savings .inner p a {
    color: #fff;
    text-decoration: none
}

.savings .inner p a:hover {
    text-decoration: underline
}

.trade-in {
    background: #000;
    margin: 0 10px 20px;
    overflow: hidden;
    padding-top: 0 !important;
    position: relative;
    text-align: center
}

.trade-in .quote-panel {
    color: #fff;
    padding: 10px 10px 0
}

.trade-in .quote-panel h2 {
    color: #fff;
    font-size: 3rem;
    font-weight: 500;
    padding: 20px 0 0
}

.trade-in .quote-panel p {
    color: #fff;
    font-size: .875rem;
    line-height: 1.45em;
    margin: 0 auto 10px;
    max-width: 600px;
    padding: 0 0 10px
}

.trade-in .quote-panel .trade-search {
    margin: 0 auto;
    max-height: 50px;
    max-width: 600px;
    overflow: hidden;
    position: relative
}

.trade-in .quote-panel .trade-search input[type=text] {
    border: none;
    border-radius: 5px;
    color: #999;
    float: left;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    height: 48px;
    outline: 0;
    overflow: hidden;
    padding-left: 15px;
    width: 89%
}

.trade-in .quote-panel .trade-search button {
    background: #20a5de;
    border-radius: 0 5px 5px 0;
    bottom: 0;
    height: 50px;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(0)
}

.trade-in .camera-mobile img {
    max-width: 262px
}

.trade-in .panel {
    border-radius: 0
}

.trade-in .panel .cta-img {
    margin-bottom: -10px;
    margin-top: 10px
}

.with-saved-items,
.with-saved-items .panel {
    border-radius: 0 0 5px 5px
}

.without-saved-items {
    border-radius: 5px;
    margin-top: 10px
}

.without-saved-items .panel {
    border-radius: 5px
}

.checklist-columns {
    margin: 20px 0
}

.checklist-columns .feature-list {
    border-bottom: 1px solid #eee;
    display: inline-block;
    margin: 0 0 10px
}

.checklist-columns .feature-list .trade-icon {
    float: left;
    margin-right: 10px
}

.checklist-columns .feature-list .checklist {
    float: left;
    width: 85%
}

.checklist-columns .feature-list .checklist h3 {
    font-size: 1.25rem;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 500;
    margin: 0 0 10px
}

.checklist-columns .feature-list .checklist ul {
    margin: 0 0 20px
}

.checklist-columns .feature-list .checklist ul li {
    display: inline-flex;
    font-size: .875rem;
    margin-left: -5px;
    width: 100%
}

.checklist-columns .feature-list .checklist ul li:before {
    top: 3px
}

.checklist-columns .feature-list .checklist p {
    font-size: .875rem;
    line-height: 1.6em;
    max-width: 260px
}

.checklist-columns .sell-cta {
    background: #eee;
    border-radius: 5px;
    margin: 0 0 20px;
    padding: 20px;
    text-align: center
}

.checklist-columns .sell-cta h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 auto 20px;
    max-width: 184px
}

.checklist-columns .sell-cta p {
    font-size: .875rem;
    line-height: 1.45em
}

@media screen and (min-width:768px) {
    .savings {
        margin: 0
    }

    .savings .inner h2 {
        display: inline;
        margin-right: 20px;
        width: auto
    }

    .trade-in .panel-desktop {
        display: none
    }

    .trade-in .quote-panel .trade-search input[type=text] {
        width: 90%
    }

    .checklist-columns {
        margin: 10px 0 40px
    }

    .checklist-columns .feature-list {
        border-bottom: 0;
        border-right: 1px solid #eee
    }

    .checklist-columns .feature-list .checklist p {
        margin: 0
    }
}

@media screen and (min-width:1220px) {
    .savings .inner {
        margin-left: 0;
        padding: 15px 0
    }

    .trade-in {
        margin-bottom: 35px
    }

    .trade-in .quote-panel {
        padding: 15px 50px;
        top: 0
    }

    .trade-in .quote-panel h2 {
        padding: 0
    }

    .trade-in .quote-panel p {
        padding: 0 0 20px
    }

    .checklist {
        padding-bottom: 40px
    }

    .sell-cta h3 {
        max-width: 100%
    }

    .sell-cta p {
        margin: 20px auto 0;
        max-width: 242px
    }
}

@media screen and (min-width:1280px) {
    .trade-in {
        background: 0 0;
        margin-bottom: 10px;
        text-align: left
    }

    .trade-in .panel .cta-img {
        margin-top: -10px
    }

    .trade-in .panel picture {
        display: none;
        margin-top: -50px
    }

    .trade-in .panel-desktop {
        display: block;
        max-height: 300px;
        z-index: 0
    }

    .trade-in .panel-desktop picture {
        display: block
    }

    .trade-in .quote-panel {
        padding: 35px 50px;
        position: absolute;
        z-index: 1
    }

    .trade-in .camera-mobile {
        display: none
    }
}

.trade-products {
    display: inline-block;
    margin: 0 0 20px;
    padding: 10px 0 20px;
    width: 100%
}

.trade-products h2 {
    font-weight: 500;
    margin: 0 0 30px;
    text-align: center
}

.trade-products ul {
    border-bottom: 1px solid #eee;
    padding: 0 0 40px
}

.trade-products ul li a {
    text-decoration: none
}

.trade-products ul li a span {
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    margin: 0 0 40px;
    text-decoration: none
}

.trade-products picture {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    text-align: center
}

.trade-products picture img,
.trade-products picture source {
    max-width: 240px
}

.trade-products picture span {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 240px !important;
    max-height: 285px
}

@media screen and (min-width:768px) {
    .trade-products {
        margin: 0
    }

    .trade-products h2 {
        text-align: left
    }

    .trade-products ul li a span {
        margin: 10px 0 40px
    }

    .trade-products picture {
        padding: 34px 16px
    }
}

.trade-product-main picture {
    border: 1px solid #eee;
    border-radius: 5px;
    height: 100%;
    padding: 0
}

.trade-product-main picture span {
    margin: 0 auto;
    max-height: 360px;
    max-width: 360px;
    position: relative !important;
    text-align: center;
    width: 100%
}

.trade-product-title h2 {
    border-bottom: 1px solid #eee;
    display: block;
    font-size: 3rem;
    font-weight: 500;
    padding: 20px 0;
    text-align: center
}

.trade-product-title h2 span {
    display: block;
    font-size: 1.5rem;
    margin: 0 auto;
    max-width: 222px;
    padding: 0;
    width: 100%
}

.trade-product-title h2 span a {
    display: block;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .8125rem;
    padding: 20px 0 0
}

.steps-list {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    padding-left: 0
}

.steps-list li {
    counter-increment: inst;
    display: table;
    font-size: .875rem;
    line-height: 32px;
    list-style-type: none;
    width: 100%
}

.steps-list li:before {
    background: #eee;
    border-radius: 50%;
    content: counter(inst);
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    height: 36px;
    margin: 0 10px 10px 0;
    text-align: center;
    width: 36px
}

.quote-button {
    background: #f08826;
    border: none;
    color: #fff;
    font-size: 1.125rem;
    height: 55px;
    max-width: 373px;
    width: 100%
}

.description {
    margin: 0
}

.description h2 {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2em;
    margin-top: 5px
}

.description .conditions {
    margin: 0
}

.description .conditions div {
    padding: 0 0 15px
}

.description .conditions div .quote-condition {
    margin: 0 auto;
    padding: 15px 15px 20px;
    text-align: center
}

.description .conditions div .quote-condition h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 8px 0 20px
}

.description .conditions div .quote-condition ul {
    margin: 10px 0 -5px;
    text-align: left
}

.description .conditions div .quote-condition ul li {
    display: flex;
    font-size: .875rem
}

.description .conditions div .quote-condition input[type=radio] {
    background: #fff;
    border: 1px solid #000;
    height: 40px;
    width: 40px
}

.description .conditions div .quote-condition input[type=radio]:before {
    height: 30px;
    margin-top: 4px;
    width: 30px
}

.description .conditions div .lgrey {
    background: #eee
}

.accessories {
    font-size: .8125rem;
    margin: 0 0 40px;
    padding: 20px 0 0
}

.accessories .checkbox,
.select-quote .checkbox {
    margin-bottom: 15px;
    position: relative
}

.accessories .checkbox span,
.select-quote .checkbox span {
    display: inline-flex
}

.accessories .checkbox label,
.select-quote .checkbox label {
    display: inline-flex;
    padding-left: 40px;
    position: relative
}

.accessories .checkbox input[type=checkbox],
.select-quote .checkbox input[type=checkbox] {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    height: 26px;
    left: 0;
    min-width: 26px;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 26px;
    z-index: 1
}

.accessories .checkbox input[type=checkbox]:before,
.select-quote .checkbox input[type=checkbox]:before {
    font-size: 1.25rem;
    color: #222;
    line-height: 24px
}

.accessories .checkbox input[type=checkbox]:checked+.input-helper:before,
.select-quote .checkbox input[type=checkbox]:checked+.input-helper:before {
    border: .9em solid #65b231;
    border-radius: 5px;
    content: ' ';
    display: block;
    font-size: 1rem;
    height: 0;
    margin-top: 0;
    max-height: 26px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 0
}

.accessories .checkbox input[type=checkbox]:checked+.input-helper:after,
.select-quote .checkbox input[type=checkbox]:checked+.input-helper:after {
    border: solid #fff;
    border-width: 0 .15em .15em 0;
    color: #fff;
    content: ' ';
    display: block;
    height: .8em;
    left: 10px;
    margin-top: -.3em;
    opacity: 1;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
    width: .3em
}

.accessories .checkbox .input-helper,
.select-quote .checkbox .input-helper {
    display: inline-flex
}

.accessories .checkbox .input-helper:after,
.accessories .checkbox .input-helper:before,
.select-quote .checkbox .input-helper:after,
.select-quote .checkbox .input-helper:before {
    content: '';
    position: absolute
}

.accessories .checkbox .input-helper:before,
.select-quote .checkbox .input-helper:before {
    border: 1px solid #000;
    border-radius: 5px;
    color: #fff;
    content: '';
    display: block;
    height: 26px;
    left: 0;
    top: 0;
    width: 26px
}

.accessories .checkbox .input-helper:after,
.select-quote .checkbox .input-helper:after {
    color: #fff;
    content: '\2714';
    font-size: .9375rem;
    left: 7px;
    opacity: 0;
    top: 0;
    transform: scale(0)
}

.continue-button {
    display: inline-block;
    margin-bottom: 40px !important;
    text-align: center;
    width: 100%
}

@media screen and (min-width:960px) {
    .accessories {
        padding: 30px 0 15px
    }

    .trade-product-title h2 {
        margin: -10px 0 0;
        padding: 0 0 20px;
        text-align: left
    }

    .trade-product-title h2 span {
        max-width: 100%;
        padding: 20px 0 0
    }

    .trade-product-title h2 span a {
        display: inline
    }

    .steps-list {
        border-bottom: 0;
        padding-bottom: 0
    }

    .description {
        margin-top: 60px
    }

    .description h2 {
        margin: 40px 0
    }

    .description .conditions div {
        padding: 0 0 5px 30px
    }

    .description .conditions div:first-of-type {
        padding-left: 0
    }

    .description .conditions div .quote-condition {
        padding: 30px 20px 40px
    }

    .description .conditions div .quote-condition h3 {
        font-size: 1.5rem
    }

    .continue-button {
        margin-bottom: 80px !important
    }
}

.select-quote {
    margin: 20px 0 0;
    order: 1
}

.select-quote .checkbox {
    margin-bottom: 0
}

.select-quote .checkbox label {
    padding-left: 40px;
    position: relative
}

.select-quote .checkbox span {
    font-size: .875rem
}

.trade-heading {
    margin: 0 0 20px;
    text-align: center
}

.trade-heading h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.15em;
    margin-top: 20px
}

.trade-heading p {
    font-size: .875rem;
    margin: 0
}

.trade-overview .details-box {
    background: #eee;
    border-radius: 5px;
    margin: 0 auto 60px;
    max-width: 982px;
    padding: 20px 2% 10px;
    text-align: center;
    width: 96%
}

.trade-overview .details-box .terms {
    text-align: left
}

.trade-overview .details-box .terms .select-quote {
    margin: 0
}

.trade-overview .details-box .terms .select-quote span {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.25em;
    margin-top: -6px;
    position: relative;
    text-align: left;
    top: 2px
}

.trade-overview .details-box h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 30px;
    padding: 0
}

.trade-overview .details-box .quote-button {
    margin: 10px 0 0;
    max-width: 311px
}

.trade-overview .details-box fieldset {
    border: 0;
    margin: 0 auto;
    max-width: 633px
}

.trade-overview .details-box fieldset .f-form-controls {
    text-align: left
}

.trade-overview .details-box fieldset .f-form-controls input.field-width {
    border: 1px solid #eee;
    border-radius: 5px;
    color: #aaa;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    height: 30px;
    line-height: 1em;
    margin: 0 0 20px;
    max-width: 234px;
    padding: 6px 5%;
    width: 100%
}

.trade-overview .quote {
    margin: 0 auto 10px;
    max-width: 960px;
    padding: 0 30px 30px
}

.trade-overview .quote .trade-product {
    display: flex;
    flex-flow: column
}

.trade-overview .quote .trade-product picture {
    margin: 0 auto;
    max-height: 260px;
    max-width: 260px;
    order: 2
}

.trade-overview .quote .trade-product .select-quote {
    order: 1
}

.trade-overview .quote .trade-serial {
    margin-top: 20px
}

.trade-overview .quote .trade-serial .asterisk ::-webkit-input-placeholder {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk ::-webkit-input-placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote .trade-serial .asterisk::-webkit-input-placeholder:before {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk::-moz-placeholder:before {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk:-ms-input-placeholder:before {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk::-ms-input-placeholder:before {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk::placeholder:before {
    background: #c11d1f
}

.trade-overview .quote .trade-serial .asterisk::-webkit-input-placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote .trade-serial .asterisk::-moz-placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote .trade-serial .asterisk:-ms-input-placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote .trade-serial .asterisk::-ms-input-placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote .trade-serial .asterisk::placeholder:after {
    color: red;
    content: '*';
    font-size: .625rem;
    vertical-align: top
}

.trade-overview .quote h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 15px
}

.trade-overview .quote dl {
    margin: 0
}

.trade-overview .quote dl dt {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4em
}

.trade-overview .quote dl dd {
    font-size: .875rem;
    margin: 0 0 10px
}

.trade-overview .quote dl dd:last-of-type {
    margin: 0
}

.trade-overview .quote input[type=text] {
    height: auto;
    padding: 10px 15px
}

.trade-overview .quote textarea {
    padding: 15px
}

.trade-overview .quote input[type=text],
.trade-overview .quote textarea {
    border-radius: 5px;
    color: #999;
    font-size: .875rem
}

.trade-overview .quote .update-button {
    border: 1px solid #000;
    padding: 10px;
    width: 100%
}

.trade-overview .quote .update-button:hover {
    background: #f08826;
    border: 1px solid #f08826
}

.add-item {
    margin: 10px 0;
    text-align: center
}

.add-item .f-btn {
    background: #20a5de;
    color: #fff;
    max-width: 311px;
    text-align: center;
    width: 100%
}

.add-item .f-btn:before {
    content: '\002B';
    margin-right: 5px
}

.add-item .f-btn:hover {
    background: #000
}

@media screen and (min-width:960px) {
    .trade-heading {
        margin: 0 0 30px
    }

    .trade-heading h2 {
        margin-top: 0
    }

    .add-item {
        margin: 20px 0 40px
    }

    .trade-overview .quote {
        margin: 0 auto 30px;
        padding: 30px
    }

    .trade-overview .quote h3 {
        margin-top: 0;
        max-width: 270px
    }

    .trade-overview .quote .trade-product {
        display: flex;
        flex-flow: column
    }

    .trade-overview .quote .trade-product picture {
        order: 1
    }

    .trade-overview .quote .trade-product .select-quote {
        order: 2
    }

    .trade-overview .quote .trade-serial {
        margin-top: 0
    }

    .trade-overview .details-box {
        padding: 20px 20px 30px;
        width: 100%
    }

    .trade-overview .details-box fieldset input.field-width {
        margin: 0 20px 30px 0;
        max-width: 281px;
        padding: 6px 15px;
        width: 100%
    }
}

.banner-content.banner-blfr h1 {
    font-size: 3.125rem
}

.panel-overlay-blfr,
.panel-overlay-sale {
    background-color: transparent;
    justify-content: space-between
}

.panel-overlay-blfr .offer-ribbon,
.panel-overlay-sale .offer-ribbon {
    font-size: 1.25rem;
    background-color: #bd0000;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1;
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
    width: 100%
}

@media screen and (min-width:480px) {
    .banner-content.banner-blfr h1 {
        font-size: calc(50px + 30 * (100vw - 480px)/ 740)
    }

    .panel-overlay-blfr .offer-ribbon,
    .panel-overlay-sale .offer-ribbon {
        font-size: calc(20px + 2 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {
    .banner-content.banner-blfr h1 {
        font-size: 5rem
    }

    .panel-overlay-blfr .offer-ribbon,
    .panel-overlay-sale .offer-ribbon {
        font-size: 1.375rem
    }
}

.panel-overlay-blfr .offer-price,
.panel-overlay-sale .offer-price {
    font-size: 1.875rem;
    box-sizing: border-box;
    color: #000;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.1;
    padding-left: 20px;
    text-align: left;
    //text-shadow: 0 0 15px rgba(249, 214, 119, .5);
    width: 100%
}

.panel-overlay-blfr .offer-price span,
.panel-overlay-sale .offer-price span {
    display: block
}

.panel-overlay-blfr .offer-price strong,
.panel-overlay-sale .offer-price strong {
    font-size: 2.25rem;
    display: block
}

@media screen and (min-width:480px) {

    .panel-overlay-blfr .offer-price,
    .panel-overlay-sale .offer-price {
        font-size: calc(30px + 6 * (100vw - 480px)/ 740)
    }

    .panel-overlay-blfr .offer-price strong,
    .panel-overlay-sale .offer-price strong {
        font-size: calc(36px + 8 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {

    .panel-overlay-blfr .offer-price,
    .panel-overlay-sale .offer-price {
        font-size: 2.25rem
    }

    .panel-overlay-blfr .offer-price strong,
    .panel-overlay-sale .offer-price strong {
        font-size: 2.75rem
    }
}

.panel-overlay-blfr .offer-price small,
.panel-overlay-sale .offer-price small {
    font-size: 1rem;
    display: block;
    margin-top: 5px
}

.panel-overlay-blfr h3,
.panel-overlay-sale h3 {
    font-size: 1.375rem;
    margin: 0 10px 30px;
    text-align: center
}

@media screen and (min-width:480px) {

    .panel-overlay-blfr h3,
    .panel-overlay-sale h3 {
        font-size: calc(22px + 0 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {

    .panel-overlay-blfr h3,
    .panel-overlay-sale h3 {
        font-size: 1.375rem
    }
}

.panel-overlay-sale .offer-ribbon {
    background-color: #c11d1f;
    color: #fff
}

.panel-overlay-sale .offer-price {
    text-shadow: none
}

.blfr-play-icon {
    font-size: 3.75rem;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%)
}

.bf-countdown {
    background-color: #222;
    color: #fff;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    min-width: 265px;
    padding: 15px 10px;
    text-align: center
}

.bf-countdown h2 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase
}

.bf-countdown h2 a {
    color: #fff;
    text-decoration: none
}

.bf-countdown h2 svg {
    margin-top: -4px
}

.bf-countdown .sale {
    color: #c11d1f
}

.bf-countdown .f-countdown {
    display: flex;
    justify-content: space-between;
    line-height: 1;
    margin: 0
}

.bf-countdown .f-countdown>li {
    padding: 0 10px
}

.bf-countdown .f-countdown .f-countdown-number {
    font-size: 1.5rem
}

.bf-countdown .f-time {
    font-size: .75rem;
    color: #999;
    display: inline-block;
    font-weight: 300;
    margin-top: 5px
}

@media screen and (min-width:480px) {
    .bf-countdown h2 {
        font-size: calc(20px + 10 * (100vw - 480px)/ 740)
    }

    .bf-countdown .f-countdown .f-countdown-number {
        font-size: calc(24px + 8 * (100vw - 480px)/ 740)
    }

    .bf-countdown .f-time {
        font-size: calc(12px + 4 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:768px) {
    .bf-countdown {
        align-items: center;
        border-radius: 0 0 6px 6px;
        display: flex;
        justify-content: space-between;
        left: 50%;
        min-width: 580px;
        padding: 15px 20px;
        position: absolute;
        top: 0;
        transform: translateX(-50%)
    }

    .bf-countdown h2 {
        margin-bottom: 0
    }

    .bf-countdown .f-countdown {
        flex: 1 1 auto;
        margin-left: 20px
    }

    .bf-countdown .f-countdown>li {
        padding: 0 20px
    }
}

@media screen and (min-width:960px) {
    .banner-content.banner-blfr {
        max-width: 660px;
        width: 100%
    }

    .bf-countdown {
        min-width: 680px;
        padding: 15px 40px
    }

    .bf-countdown .f-countdown {
        margin-left: 40px
    }
}

@media screen and (min-width:1220px) {
    .bf-countdown h2 {
        font-size: 1.875rem
    }

    .bf-countdown .f-countdown .f-countdown-number {
        font-size: 2rem
    }

    .bf-countdown .f-time {
        font-size: 1rem
    }

    .bf-countdown {
        min-width: 780px
    }

    .bf-countdown .f-countdown {
        margin-left: 80px
    }
}

@media screen and (min-width:1220px) and (max-width:1599px) {
    .takeover .banner-content {
        margin-top: -60px
    }
}

@media screen and (min-height:665px) and (min-width:960px) {
    .banner-content.banner-blfr {
        max-width: 530px
    }
}

.hide {
    display: none
}

.white {
    padding-bottom: 20px;
    padding-top: 20px !important
}

.light-grey {
    background-color: #f7f7f7;
    padding-bottom: 20px 10px;
    padding-top: 20px !important
}

.light-grey .tag {
    font-size: .75rem;
    border-radius: 0 0 5px;
    color: #fff;
    display: inline-table;
    left: 0;
    padding: 7px 15px;
    position: absolute;
    top: 0;
    z-index: 1
}

.light-grey .tag.pink {
    background-color: #e40c65
}

.light-grey .tag.blue {
    background-color: #20a5de
}

.light-grey .tag.orange {
    background-color: #f08826
}

.light-grey .tag.purple {
    background-color: #8a549c
}

.light-grey .tag.green {
    background-color: #65b231
}

.light-grey .tag.yellow {
    background-color: #fee505;
    color: #000
}

.light-grey .be-inspired {
    background-color: #fff;
    position: relative
}

.light-grey .be-inspired .offer-ribbon {
    padding: 20px 0;
    text-align: center
}

.light-grey .advice-centre {
    background-color: #fff;
    position: relative;
    z-index: 1
}

.light-grey .advice-centre .offer-ribbon {
    padding: 0;
    text-align: left
}

.light-grey .advice-centre .offer-ribbon p {
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0;
    padding: 20px 20px 15px
}

.light-grey .advice-centre .offer-ribbon span {
    display: inline-block;
    line-height: 1.4em;
    padding: 0 20px 20px
}

.light-grey .advice-centre-links ul {
    margin: 0;
    padding: 0
}

.light-grey .advice-centre-links ul li {
    list-style: none;
    position: relative
}

.light-grey .advice-centre-links ul li a {
    font-size: .875rem;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0 13px;
    padding: 10px;
    position: relative;
    text-decoration: none;
    transition: background-color .2s, color .2s;
    width: 100%
}

.light-grey .advice-centre-links ul li a:hover {
    background-color: #eee
}

.light-grey .advice-centre-links ul li a .material-icons {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%)
}

.light-grey .advice-centre-links a {
    width: 100%
}

.light-grey .advice-centre-links a.f-btn {
    background-color: transparent
}

.light-grey .advice-centre-links a.f-btn:hover {
    background-color: #000;
    color: #fff
}

.light-grey .advice-centre,
.light-grey .be-inspired {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%
}

.light-grey .advice-centre .offer-ribbon,
.light-grey .be-inspired .offer-ribbon {
    font-size: .875rem;
    background-color: #fff;
    font-weight: 600;
    line-height: 1;
    margin-top: 0;
    width: 100%
}

.light-grey .advice-centre .offer-price,
.light-grey .be-inspired .offer-price {
    font-size: 1.875rem;
    box-sizing: border-box;
    color: #fff;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.1;
    padding-left: 20px;
    text-align: left;
    width: 100%
}

.light-grey .advice-centre .offer-price span,
.light-grey .be-inspired .offer-price span {
    display: block
}

.light-grey .advice-centre .offer-price strong,
.light-grey .be-inspired .offer-price strong {
    font-size: 2.25rem;
    display: block
}

@media screen and (min-width:480px) {

    .light-grey .advice-centre .offer-price,
    .light-grey .be-inspired .offer-price {
        font-size: calc(30px + 6 * (100vw - 480px)/ 740)
    }

    .light-grey .advice-centre .offer-price strong,
    .light-grey .be-inspired .offer-price strong {
        font-size: calc(36px + 8 * (100vw - 480px)/ 740)
    }
}

@media screen and (min-width:1220px) {

    .light-grey .advice-centre .offer-price,
    .light-grey .be-inspired .offer-price {
        font-size: 2.25rem
    }

    .light-grey .advice-centre .offer-price strong,
    .light-grey .be-inspired .offer-price strong {
        font-size: 2.75rem
    }
}

.light-grey .advice-centre .offer-price small,
.light-grey .be-inspired .offer-price small {
    font-size: 1rem;
    display: block;
    margin-top: 5px
}

.light-grey .advice-centre h3,
.light-grey .be-inspired h3 {
    font-size: 1.375rem;
    margin: 0 10px 30px;
    text-align: center
}

@media screen and (min-width:480px) {

    .light-grey .advice-centre h3,
    .light-grey .be-inspired h3 {
        font-size: calc(22px + 0 * (100vw - 480px)/ 740)
    }
}

.inspired h2 {
    margin-bottom: 10px;
    margin-top: -10px
}

.inspired .panel {
    margin-top: 10px
}

.signup .f-form-row label.f-flex {
    font-size: .75rem
}

@media screen and (min-width:1220px) {

    .light-grey .advice-centre h3,
    .light-grey .be-inspired h3 {
        font-size: 1.375rem
    }

    .hide {
        display: inline-block
    }

    .white {
        padding-top: 20px !important
    }

    .light-grey {
        padding-bottom: 50px;
        padding-top: 30px !important
    }
}

.blog {
    margin-top: 20px;
    padding-top: 0 !important
}

.blog h1 {
    font-size: 2.25rem;
    margin-bottom: 10px
}

.blog h1.m-top {
    margin-bottom: 20px;
    margin-top: 20px
}

.blog h2 {
    font-size: 1.25rem;
    margin: 0 auto 20px;
    max-width: 900px
}

.blog span.tag {
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-family: Oswald, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    padding: 6px 12px
}

.blog span.tag.pink {
    background-color: #e40c65
}

.blog span.tag.blue {
    background-color: #20a5de
}

.blog span.tag.orange {
    background-color: #f08826
}

.blog span.tag.purple {
    background-color: #8a549c
}

.blog span.tag.green {
    background-color: #65b231
}

.blog span.tag.yellow {
    background-color: #fee505;
    color: #000
}

.article-content {
    padding: 0 20px
}

.article-content a {
    color: #20a5de
}

.article-content p {
    font-size: .875rem
}

.article-content blockquote {
    display: inline-block;
    font-size: 1.875rem;
    line-height: 1.47em;
    margin: 20px 0
}

.article-content .hide {
    margin: 0
}

.blog-slider {
    margin: 0 0 30px
}

@media only screen and (max-width:660px) {
    .blog-slider.jessops-slider .f-slidenav {
        background-color: #fff;
        border-radius: 0;
        padding: 0
    }

    .blog-slider.jessops-slider .f-slidenav .material-icons {
        font-size: 1.5625rem
    }
}

.blog-slider ul li {
    border: 1px solid #eee;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden
}

.blog-slider ul li .blog-slider-left {
    line-height: normal;
    padding: 20px;
    text-align: left
}

.blog-slider ul li .blog-slider-left h3 {
    font-size: 1.375rem;
    margin-top: 20px
}

.blog-slider ul li .blog-slider-left p {
    font-size: .875rem
}

.blog-slider ul li .blog-slider-left .btn {
    font-weight: 600
}

.blog-slider ul li .blog-slider-right {
    border-radius: 0 5px 5px 0;
    overflow: visible
}

.blog-slider ul li span.slide-caption {
    background-color: #000;
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    padding: 5% 5% 20px;
    text-align: left;
    width: 90%
}

.article-bottom-nav {
    padding: 0 20px 30px
}

.article-bottom-nav hr {
    margin: 20px 0 30px
}

.article-bottom-nav a.f-btn {
    display: block;
    margin: 0 auto 20px;
    max-width: 190px;
    padding: 12px 45px;
    width: 100%
}

.article-bottom-nav .share {
    display: inline-block;
    text-align: center;
    width: 100%
}

.article-bottom-nav .share p {
    font-size: .875rem;
    font-weight: 700
}

.article-bottom-nav .share ul {
    margin: 0;
    text-align: center;
    width: 100%
}

.article-bottom-nav .share ul li {
    margin: 0 5px 0 0;
    width: 45px
}

@media screen and (max-width:767.99px) {
    .blog-cat-picker {
        display: inline-block;
        width: 100%
    }

    .blog-cat-picker form,
    .blog-cat-picker h2 {
        display: inline;
        float: right;
        width: 72%
    }

    .blog-cat-picker form select,
    .blog-cat-picker h2 select {
        width: 100%
    }

    .blog-cat-picker h2 {
        float: left;
        line-height: 2.3em;
        text-align: left !important;
        width: auto
    }

    .article-bottom-nav .social-icons {
        display: flex;
        flex-wrap: wrap
    }

    .article-bottom-nav .social-icons .share {
        order: 1
    }

    .article-bottom-nav .social-icons .share p {
        margin: 0 0 10px
    }

    .article-bottom-nav .social-icons .blog-return {
        margin: 20px auto 10px;
        order: 2
    }
}

.posts {
    margin-bottom: 0
}

.posts h2 {
    margin: 0 0 20px
}

.posts button {
    top: 48%
}

.related {
    padding: 20px 0 60px
}

.related h2 {
    margin: 0 0 20px
}

.related h3 {
    margin-bottom: 0
}

.related .price.alt .cashback {
    color: #f08826;
    display: inline
}

@media screen and (min-width:768px) {
    .blog-slider ul li span.slide-caption {
        padding: 15px;
        width: 100%
    }

    .related h2 {
        margin: 20px 0 30px
    }

    .related h3 {
        margin: 10px 0 30px
    }
}

@media screen and (min-width:1220px) {
    .blog {
        margin-top: -10px;
        padding-top: 0 !important
    }

    .blog h1 {
        font-size: 2.25rem;
        margin-bottom: 30px
    }

    .blog h2 {
        font-size: 1.5rem;
        margin: 0 auto 40px
    }

    .article-content {
        margin-top: -60px;
        max-width: 880px
    }

    .article-content blockquote {
        margin: 20px 0 40px
    }

    .article-content h3 {
        margin: 60px 0 0
    }

    .blog-slider {
        display: block
    }

    .blog-slider ul li .blog-slider-left {
        padding: 70px 70px 20px
    }

    .blog-slider ul li .blog-slider-left h3 {
        font-size: 2.25rem;
        margin-top: 25px
    }

    .blog-slider ul.f-dotnav {
        bottom: 20px;
        display: inline-block;
        left: 0;
        margin-left: 70px
    }

    .blog-slider ul.f-dotnav li {
        border: 1px solid #000;
        border-radius: 50%;
        float: left;
        margin-right: 10px;
        padding: 0
    }

    .article-bottom-nav a.f-btn {
        float: left;
        padding: 12px 45px;
        width: auto
    }

    .article-bottom-nav .share {
        float: right;
        width: auto
    }

    .article-bottom-nav .share p {
        float: left
    }

    .article-bottom-nav .share ul {
        float: left;
        margin: 0 0 0 20px;
        width: auto
    }

    .article-bottom-nav .share ul li {
        margin: 0 5px 0 0;
        width: 34px
    }

    .posts h2 {
        margin: 10px 0 40px
    }

    .posts button {
        top: 48% !important
    }
}

@media print {

    *,
    :after,
    :before {
        background: 0 0 !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,
    tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }

    .header .search-form-container {
        visibility: hidden
    }

    .banner,
    .categories,
    .cta-img,
    .f-cookie-consent,
    .f-slidenav,
    .play-video,
    .product-finder,
    .product-images,
    .product-orders,
    .sharea,
    .top-list,
    .upsells {
        display: none !important
    }

    picture {
        border: 2px solid #eee !important;
        box-sizing: border-box
    }

    picture>img {
        visibility: hidden
    }

    .panel {
        border: 2px solid #eee !important;
        box-sizing: border-box;
        position: relative
    }

    .panel picture {
        border: 0 !important
    }

    .panel.panel-tp .panel-overlay {
        text-align: center
    }

    .panel.panel-two-face picture {
        display: none
    }

    .panel.panel-two-face .f-grid-width-medium-1-2>* {
        width: 100%
    }

    .section {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .footer,
    .sub-footer {
        border-top: 2px solid #eee
    }

    .footer .section,
    .sub-footer .section {
        padding-bottom: 20px
    }

    .foot-cards {
        width: 400px !important
    }

    .j-accordion .f-accordion-title {
        background-color: #eee !important
    }

    .j-accordion .f-accordion-title+div {
        height: auto !important
    }

    .j-accordion .f-accordion-content {
        padding-top: 20px
    }

    .products-list>.f-grid>div {
        page-break-inside: avoid
    }

    .product-rating {
        width: 150px !important
    }

    .callout {
        border: 2px solid #eee
    }

    .callout svg {
        display: none
    }

    .cta-section {
        border-top: 2px solid #eee
    }

    .cta-section .f-lazyload-cover {
        display: none !important
    }

    .cta-section .f-grid-width-medium-1-2,
    .cta-section .f-grid-width-medium-1-3,
    .cta-section .f-grid-width-small-2-5 {
        justify-content: center
    }

    .cta-section .f-grid-width-medium-1-2>*,
    .cta-section .f-grid-width-medium-1-3>*,
    .cta-section .f-grid-width-small-2-5>* {
        width: 50%
    }

    .f-slider {
        min-height: 0 !important;
        min-width: 0 !important;
        transform: translateX(0) !important
    }

    .f-slider.f-grid-width-medium-1-3>li,
    .f-slider.f-grid-width-small-1-3>li {
        width: 33.333% !important
    }

    .f-slider.f-grid-width-small-1-2>li {
        width: 50% !important
    }

    .f-slider>li {
        height: auto !important;
        min-height: auto !important;
        position: static;
        width: auto !important
    }

    .products-slider {
        padding: 0
    }

    .f-grid-width-small-2-5>* {
        width: 40%
    }

    .f-grid-width-medium-1-4>* {
        width: 25%
    }

    .f-grid-width-medium-1-3>*,
    .f-grid-width-small-1-3>* {
        width: 33.333%
    }

    .f-grid-width-medium-1-2>* {
        width: 50%
    }

    .list-view {
        text-align: center !important
    }

    .list-view>div>div hr {
        display: none !important
    }

    .list-view>hr:not(:first-of-type) {
        display: block !important
    }

    .list-view>.f-grid>* {
        box-sizing: border-box !important;
        width: 33.333% !important
    }

    .list-view .image,
    .list-view .product-rating {
        margin-bottom: 10px !important
    }

    .list-view .details,
    .list-view .details-pricing,
    .list-view .image,
    .list-view .pricing {
        width: 100% !important
    }

    .list-view .details-pricing {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important
    }

    .list-view .f-hidden-medium,
    .list-view .f-list {
        display: none !important
    }
}