@font-face {
    font-family: "rocky";
    src: url("https://static.directferries.co.uk/fonts/rocky-bolditalic.woff2") format("woff2");
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
    ascent-override: 90%
}

@font-face {
    font-family: "mundial-light";
    src: url("https://static.directferries.co.uk/fonts/mundial-light.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    font-stretch: normal;
    ascent-override: 90%
}

@font-face {
    font-family: "mundial-demibold";
    src: url("https://static.directferries.co.uk/fonts/mundial-demibold.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    ascent-override: 90%
}

.tk-rocky {
    font-family: rocky,serif;
    font-weight: 700;
    font-style: italic
}

.tk-mundial {
    font-family: mundial,sans-serif
}

.demi {
    font-weight: 600
}

h1 {
    font-size: 24px;
    line-height: 32px
}

@media(min-width: 769px) {
    h1 {
        font-size: 32px;
        line-height: 40px
    }
}

h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600
}

@media(min-width: 769px) {
    h2 {
        font-size: 24px;
        line-height: 32px
    }
}

h3 {
    font-size: 20px;
    line-height: 24px
}

h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600
}

@media(hover: hover)and (pointer: fine) {
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
        text-decoration: underline
    }
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

    *::before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    *::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

input, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, select {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

button, a {
    touch-action: manipulation
}

html, body {
    margin: 0;
    padding: 0
}

h1, h2, h3, h4, h5, h6, b {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

p {
    font-size: 16px;
    line-height: 24px
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(0,0,0,0);
    background-image: none
}

button, input, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, optgroup, select, textarea {
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0
}

[role=button], button {
    cursor: pointer
}

button, input, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15
}

    button, input:not([type=checkbox]), body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:not([type=checkbox]), body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:not([type=checkbox]) {
        overflow: visible;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

button, select {
    text-transform: none
}

button {
    border: none;
    background-color: rgba(0,0,0,0)
}

li {
    list-style-type: none
}

.df-grey__background {
    background-color: #212121
}

.df-grey80__background {
    background-color: #4d4d4d
}

.df-grey60__background {
    background-color: #7a7a7a
}

.df-grey40__background {
    background-color: #a6a6a6
}

.df-grey20__background {
    background-color: #d4d4d4
}

.df-grey10__background {
    background-color: #e8e8e8
}

.df-primary__background {
    background-color: #fc6446
}

.df-primary80__background {
    background-color: #fc826b
}

.df-primary60__background {
    background-color: #fca38f
}

.df-primary40__background {
    background-color: #ffc2b5
}

.df-primary20__background {
    background-color: #ffe0d9
}

.df-primary10__background {
    background-color: #fff0ed
}

.df-secondary__background {
    background-color: #e4e8dc
}

.df-secondary80__background {
    background-color: #e8ede3
}

.df-secondary60__background {
    background-color: #f0f2eb
}

.df-secondary40__background {
    background-color: #f5f5f2
}

.df-secondary20__background {
    background-color: #fafaf7
}

.df-tertiaryGreen__background {
    background-color: #0f5a5c
}

.df-tertiaryGreen80__background {
    background-color: #407a7d
}

.df-tertiaryGreen60__background {
    background-color: #709c9e
}

.df-tertiaryGreen40__background {
    background-color: #9ebdbf
}

.df-tertiaryGreen20__background {
    background-color: #cfdede
}

.df-tertiaryGreen10__background {
    background-color: #e8edf0
}

.df-tertiaryGrey__background {
    background-color: #5a6c78
}

.df-tertiaryGrey80__background {
    background-color: #7b8993
}

.df-tertiaryGrey60__background {
    background-color: #9ca7ae
}

.df-tertiaryGrey40__background {
    background-color: #bdc4c9
}

.df-tertiaryGrey20__background {
    background-color: #dee2e4
}

.df-tertiaryGrey10__background {
    background-color: #eff0f2
}

.df-accentDark__background {
    background-color: #4b5fff
}

.df-accentDark80__background {
    background-color: #6f7fff
}

.df-accentDark60__background {
    background-color: #939fff
}

.df-accentDark40__background {
    background-color: #b7bfff
}

.df-accentDark20__background {
    background-color: #dbdfff
}

.df-accentDark10__background {
    background-color: #edefff
}

.df-accentLight__background {
    background-color: #c9ecf4
}

.df-accentLight80__background {
    background-color: #d4f0f6
}

.df-accentLight60__background {
    background-color: #dff4f8
}

.df-accentLight40__background {
    background-color: #e9f7fb
}

.df-accentLight20__background {
    background-color: #f4fbfd
}

.df-warning__background {
    background-color: #ffb932
}

.df-warning80__background {
    background-color: #ffc75b
}

.df-warning60__background {
    background-color: #ffd584
}

.df-warning40__background {
    background-color: #ffe3ad
}

.df-warning20__background {
    background-color: #fff1d6
}

.df-warning10__background {
    background-color: #fff8eb
}

.df-warning__background {
    background-color: #ffb932
}

.df-warning80__background {
    background-color: #ffc75b
}

.df-warning60__background {
    background-color: #ffd584
}

.df-warning40__background {
    background-color: #ffe3ad
}

.df-warning20__background {
    background-color: #fff1d6
}

.df-warning10__background {
    background-color: #fff8eb
}

.df-error__background {
    background-color: #e10f1e
}

.df-error80__background {
    background-color: #e73f4b
}

.df-error60__background {
    background-color: #ed6f78
}

.df-error40__background {
    background-color: #f39fa5
}

.df-error20__background {
    background-color: #f9cfd2
}

.df-error10__background {
    background-color: #fce7e9
}

.df-success__background {
    background-color: #328639
}

.df-success80__background {
    background-color: #5b9e61
}

.df-success60__background {
    background-color: #84b688
}

.df-success40__background {
    background-color: #adcfb0
}

.df-success20__background {
    background-color: #d6e7d7
}

.df-success10__background {
    background-color: #ebf3eb
}

.df-binaryDark__background {
    background-color: #000
}

.df-binaryLight__background {
    background-color: #fff
}

.df-fill__primary {
    fill: #fc6446
}

.df-fill__secondary {
    fill: #e4e8dc
}

.df-fill__tertiaryGreen {
    fill: #0f5a5c
}

.df-fill__tertiaryGrey {
    fill: #5a6c78
}

.df-fill__binaryDark {
    fill: #000
}

.df-fill__binaryLight {
    fill: #fff
}

.df-flexbox {
    display: flex
}

.df-flexbox__direction-column {
    flex-direction: column
}

.df-flexbox__justify-flexStart {
    justify-content: flex-start
}

.df-flexbox__justify-flexEnd {
    justify-content: flex-end
}

.df-flexbox__justify-center {
    justify-content: center
}

.df-flexbox__justify-spaceBetween {
    justify-content: space-between
}

.df-flexbox__justify-spaceAround {
    justify-content: space-around
}

.df-flexbox__justify-spaceEvenly {
    justify-content: space-evenly
}

.df-flexbox__alignItems-flexStart {
    align-items: flex-start
}

.df-flexbox__alignItems-flexEnd {
    align-items: flex-end
}

.df-flexbox__alignItems-center {
    align-items: center
}

.df-flexbox__alignItems-stretch {
    align-items: stretch
}

.df-flexbox__alignItems-baseline {
    align-items: baseline
}

.df-flexbox__gap-xs {
    gap: 4px
}

.df-flexbox__gap-sm {
    gap: 8px
}

.df-flexbox__gap-md {
    gap: 16px
}

.df-flexbox__gap-lg {
    gap: 32px
}

.df-flexbox__nowrap {
    flex-wrap: nowrap
}

.df-flexbox__wrap {
    flex-wrap: wrap
}

.df-flexbox__wrap-reverse {
    flex-wrap: wrap-reverse
}

.form-control, .fsControl, #txtMarketingVoucherInput {
    display: flex;
    width: 100%;
    min-height: 48px;
    background-color: #fff;
    color: #212121;
    background-image: none;
    border-radius: 8px !important;
    text-decoration: none;
    padding: 8px 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 14px !important;
    line-height: 20px !important;
    align-items: center
}

@media(min-width: 769px) {
    .form-control, .fsControl, #txtMarketingVoucherInput {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

.fs * {
    padding-bottom: 8px
}

.ui-helper-hidden {
    display: none
}

.ui-helper-hidden-accessible {
    position: absolute;
    left: -99999999px
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}

.ui-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ui-helper-clearfix {
    display: inline-block
}

* html .ui-helper-clearfix {
    height: 1%
}

.ui-helper-clearfix {
    display: block
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}

.ui-state-disabled {
    cursor: default
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat
}

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ui-widget {
    font-size: .6875rem
}

    .ui-widget input, .ui-widget body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ui-widget #railBtn, .ui-widget body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ui-widget #railBtn, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: Verdana,Arial,Helvetica;
        font-size: 1em
    }

.ui-widget-content {
    border: 1px solid #aaa;
    background: #fff 50% 50% repeat-x;
    color: #000
}

    .ui-widget-content a {
        color: #000
    }

.ui-widget-header {
    border: 1px solid #2c7ca9;
    background: #64b6e6 50% 50% repeat-x;
    color: #fff
}

    .ui-widget-header a {
        color: #222
    }

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #eee 50% 50% repeat-x;
    color: #444;
    outline: none
}

    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
        color: #444;
        text-decoration: none;
        outline: none
    }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    border: 1px solid #8af;
    background: #fff 50% 50% repeat-x;
    color: #333;
    outline: none
}

    .ui-state-hover a, .ui-state-hover a:hover {
        color: #333;
        text-decoration: none;
        outline: none
    }

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid #036;
    background: #0064b4 50% 50% repeat-x;
    color: #fff;
    outline: none
}

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
        color: #fff;
        outline: none;
        text-decoration: none
    }

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #ffc 50% 50% repeat-x;
    color: #363636
}

    .ui-state-highlight a, .ui-widget-content .ui-state-highlight a {
        color: #363636
    }

.ui-state-error, .ui-widget-content .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #fef1ec 50% bottom repeat-x;
    color: #cd0a0a
}

    .ui-state-error a, .ui-widget-content .ui-state-error a {
        color: #cd0a0a
    }

.ui-state-error-text, .ui-widget-content .ui-state-error-text {
    color: #cd0a0a
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70)
}

.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons.png")
}

.ui-widget-content .ui-icon {
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons.png")
}

.ui-widget-header .ui-icon {
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons-state-hover.png")
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons-state-hover.png")
}

.ui-state-active .ui-icon {
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons-state-active.png")
}

.ui-state-highlight .ui-icon {
    background-image: url("https://static.directferries.co.uk/image/fs/calendar/ui-icons-state-active.png")
}

.ui-icon-carat-1-n {
    background-position: 0 0
}

.ui-icon-carat-1-ne {
    background-position: -16px 0
}

.ui-icon-carat-1-e {
    background-position: -32px 0
}

.ui-icon-carat-1-se {
    background-position: -48px 0
}

.ui-icon-carat-1-s {
    background-position: -64px 0
}

.ui-icon-carat-1-sw {
    background-position: -80px 0
}

.ui-icon-carat-1-w {
    background-position: -96px 0
}

.ui-icon-carat-1-nw {
    background-position: -112px 0
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}

.ui-icon-arrow-4 {
    background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}

.ui-icon-extlink {
    background-position: -32px -80px
}

.ui-icon-newwin {
    background-position: -48px -80px
}

.ui-icon-refresh {
    background-position: -64px -80px
}

.ui-icon-shuffle {
    background-position: -80px -80px
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

.ui-icon-folder-open {
    background-position: -16px -96px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-note {
    background-position: -64px -96px
}

.ui-icon-mail-closed {
    background-position: -80px -96px
}

.ui-icon-mail-open {
    background-position: -96px -96px
}

.ui-icon-suitcase {
    background-position: -112px -96px
}

.ui-icon-comment {
    background-position: -128px -96px
}

.ui-icon-person {
    background-position: -144px -96px
}

.ui-icon-print {
    background-position: -160px -96px
}

.ui-icon-trash {
    background-position: -176px -96px
}

.ui-icon-locked {
    background-position: -192px -96px
}

.ui-icon-unlocked {
    background-position: -208px -96px
}

.ui-icon-bookmark {
    background-position: -224px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-flag {
    background-position: -16px -112px
}

.ui-icon-calendar {
    background-position: -32px -112px
}

.ui-icon-cart {
    background-position: -48px -112px
}

.ui-icon-pencil {
    background-position: -64px -112px
}

.ui-icon-clock {
    background-position: -80px -112px
}

.ui-icon-disk {
    background-position: -96px -112px
}

.ui-icon-calculator {
    background-position: -112px -112px
}

.ui-icon-zoomin {
    background-position: -128px -112px
}

.ui-icon-zoomout {
    background-position: -144px -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-wrench {
    background-position: -176px -112px
}

.ui-icon-gear {
    background-position: -192px -112px
}

.ui-icon-heart {
    background-position: -208px -112px
}

.ui-icon-star {
    background-position: -224px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-cancel {
    background-position: 0 -128px
}

.ui-icon-plus {
    background-position: -16px -128px
}

.ui-icon-plusthick {
    background-position: -32px -128px
}

.ui-icon-minus {
    background-position: -48px -128px
}

.ui-icon-minusthick {
    background-position: -64px -128px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-closethick {
    background-position: -96px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-lightbulb {
    background-position: -128px -128px
}

.ui-icon-scissors {
    background-position: -144px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-copy {
    background-position: -176px -128px
}

.ui-icon-contact {
    background-position: -192px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-alert {
    background-position: 0 -144px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-notice {
    background-position: -32px -144px
}

.ui-icon-help {
    background-position: -48px -144px
}

.ui-icon-check {
    background-position: -64px -144px
}

.ui-icon-bullet {
    background-position: -80px -144px
}

.ui-icon-radio-off {
    background-position: -96px -144px
}

.ui-icon-radio-on {
    background-position: -112px -144px
}

.ui-icon-pin-w {
    background-position: -128px -144px
}

.ui-icon-pin-s {
    background-position: -144px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-pause {
    background-position: -16px -160px
}

.ui-icon-seek-next {
    background-position: -32px -160px
}

.ui-icon-seek-prev {
    background-position: -48px -160px
}

.ui-icon-seek-end {
    background-position: -64px -160px
}

.ui-icon-seek-first {
    background-position: -80px -160px
}

.ui-icon-stop {
    background-position: -96px -160px
}

.ui-icon-eject {
    background-position: -112px -160px
}

.ui-icon-volume-off {
    background-position: -128px -160px
}

.ui-icon-volume-on {
    background-position: -144px -160px
}

.ui-icon-power {
    background-position: 0 -176px
}

.ui-icon-signal-diag {
    background-position: -16px -176px
}

.ui-icon-signal {
    background-position: -32px -176px
}

.ui-icon-battery-0 {
    background-position: -48px -176px
}

.ui-icon-battery-1 {
    background-position: -64px -176px
}

.ui-icon-battery-2 {
    background-position: -80px -176px
}

.ui-icon-battery-3 {
    background-position: -96px -176px
}

.ui-icon-circle-plus {
    background-position: 0 -192px
}

.ui-icon-circle-minus {
    background-position: -16px -192px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px
}

.ui-icon-circle-check {
    background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}

.ui-corner-tl {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0
}

.ui-corner-tr {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0
}

.ui-corner-bl {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0
}

.ui-corner-br {
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0
}

.ui-corner-top {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0
}

.ui-corner-bottom {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0
}

.ui-corner-right {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0
}

.ui-corner-left {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0
}

.ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0
}

.ui-widget-overlay {
    background: #aaa 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30)
}

.ui-widget-shadow {
    margin: 0 0 0 0;
    padding: 0;
    background: #aaa 50% 50% repeat-x;
    opacity: 0;
    filter: Alpha(Opacity=0);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    z-index: 99999;
    display: block
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
    display: none
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px
}

.ui-accordion .ui-accordion-header {
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    zoom: 1
}

.ui-accordion .ui-accordion-li-fix {
    display: inline
}

.ui-accordion .ui-accordion-header-active {
    border-bottom: 0
}

.ui-accordion .ui-accordion-header a {
    display: block;
    font-size: 1em;
    padding: .5em .5em .5em 2.2em
}

.ui-accordion .ui-accordion-header .ui-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    margin-top: -2px;
    position: relative;
    top: 1px;
    margin-bottom: 2px;
    overflow: auto;
    display: none
}

.ui-accordion .ui-accordion-content-active {
    display: block
}

.ui-dialog {
    position: relative;
    padding: .2em;
    width: 300px
}

    .ui-dialog .ui-dialog-titlebar {
        padding: .5em .3em .3em 1em;
        position: relative
    }

    .ui-dialog .ui-dialog-title {
        float: left;
        margin: .1em 0 .2em
    }

    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 19px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 18px
    }

        .ui-dialog .ui-dialog-titlebar-close span {
            display: block;
            margin: 1px
        }

        .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
            padding: 0
        }

    .ui-dialog .ui-dialog-content {
        border: 0;
        padding: .5em 1em;
        background: none;
        overflow: auto;
        zoom: 1
    }

    .ui-dialog .ui-dialog-buttonpane {
        text-align: left;
        border-width: 1px 0 0 0;
        background-image: none;
        margin: .5em 0 0 0;
        padding: .3em 1em .5em .4em
    }

        .ui-dialog .ui-dialog-buttonpane button {
            float: right;
            margin: .5em .4em .5em 0;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            line-height: 1.4em;
            width: auto;
            overflow: visible
        }

    .ui-dialog .ui-resizable-se {
        width: 14px;
        height: 14px;
        right: 3px;
        bottom: 3px
    }

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-datepicker {
    display: none
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    z-index: 5000
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em
    }

    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
        top: 1px
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 2px
    }

    .ui-datepicker .ui-datepicker-next {
        right: 2px
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px
    }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center
    }

        .ui-datepicker .ui-datepicker-title select {
            float: left;
            font-size: 1em;
            margin: 1px 0
        }

    .ui-datepicker select.ui-datepicker-month-year {
        width: 100%
    }

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        width: 49%
    }

    .ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
        float: right
    }

    .ui-datepicker table {
        width: 100%;
        font-size: .9em;
        border-collapse: collapse;
        margin: 0 0 .4em
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        border: 0
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px
    }

        .ui-datepicker td span, .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            float: right;
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left
            }

    .ui-datepicker.ui-datepicker-multi {
        width: auto
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%
}

.ui-datepicker-cover {
    display: none;
    display: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 200px;
    height: 200px
}

.ui-datepicker-today a.ui-state-default {
    border-color: #fff;
    background: #eee;
    color: #444
}

.ui-datepicker-today a.ui-state-hover {
    border-color: #fcefa1;
    background: #ffc;
    color: #444
}

.ui-datepicker-today a.ui-state-active {
    border-color: #036;
    background: #0064b4;
    color: #fff
}

.ui-datepicker-calendar a.ui-state-default {
    border-color: #fff
}

.ui-datepicker-calendar a.ui-state-active {
    border-color: #036
}

.ui-datepicker-current {
    display: none
}

.ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default {
    border-color: #fff;
    background-color: #fff
}

.ui-datepicker-calendar a.ui-state-hover {
    border-color: #fcefa1;
    background: #ffc;
    color: #444
}

.not-closeable .ui-dialog-titlebar-close {
    display: none
}

@media(max-width: 992px) {
    .ui-datepicker {
        width: auto
    }

    .ui-datepicker-buttonpane {
        display: none
    }

    .ui-datepicker td span, .ui-datepicker td a {
        padding: 7px
    }
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    padding: 0;
    border: 1px solid #ccc;
    font-size: .8125rem;
    color: #333;
    border-radius: 3px;
    max-height: 300px;
    overflow-y: scroll;
    z-index: 200
}

    .ui-autocomplete::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px
    }

    .ui-autocomplete::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #ccc;
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
        box-shadow: 0 0 1px rgba(255,255,255,.5);
        border: 2px solid #fff
    }

    .ui-autocomplete li {
        padding: 6px 1px;
        margin: 0 0 0 7px;
        color: #006fa0;
        border-bottom: 1px dotted #ccc
    }

        .ui-autocomplete li:last-child {
            border-bottom: none
        }

    .ui-autocomplete .ui-state-disabled {
        font-size: .875rem;
        opacity: 1;
        color: #212121;
        border-bottom: 2px solid #0070a0;
        margin: 0 0 0 7px;
        padding: 5px 0
    }

    .ui-autocomplete .ui-menu-item .location {
        font-size: .6875rem;
        color: #7d7d7d;
        display: none
    }

    .ui-autocomplete mark {
        background: #ffe36e;
        color: #7d7d7d
    }

    .ui-autocomplete .port mark {
        color: #006fa0
    }

    .ui-autocomplete .ui-state-disabled mark {
        color: #212121
    }

    .ui-autocomplete.ui-widget-content .ui-state-focus {
        background: #e4e8dc;
        border: none;
        border-bottom: 1px dotted #ccc
    }

    .ui-autocomplete.ui-widget-content li.ui-state-focus:last-child {
        border-bottom: none
    }

@media(min-width: 992px) {
    .ui-autocomplete li {
        padding: 5px 1px
    }

    .ui-autocomplete .ui-menu-item .location {
        display: inline
    }
}

@media(max-width: 768px) {
    .ui-autocomplete {
        width: auto;
        right: 30px
    }
}

.ui-widget-content {
    border: 0px solid #aaa;
    background: 50% 50% repeat-x #fff;
    color: #000;
    border-radius: 8px;
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    margin-top: 8px
}

    .ui-widget-content::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 16px;
        width: 0;
        height: 0;
        border-left: 8px solid rgba(0,0,0,0);
        border-right: 8px solid rgba(0,0,0,0);
        border-bottom: 8px solid #fff
    }

    .ui-widget-content .ui-state-disabled {
        opacity: 1;
        filter: Alpha(Opacity=100);
        background-image: none
    }

.ui-datepicker {
    width: auto;
    padding: 0;
    z-index: 25
}

    .ui-datepicker table {
        width: 100%;
        height: 100%;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: .875rem;
        border-collapse: collapse;
        margin: 0 0 .4em
    }

        .ui-datepicker table td {
            border: 0;
            padding: 4px
        }

        .ui-datepicker table th {
            padding: .7em .3em;
            text-align: center;
            color: #212121;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            font-size: .75rem;
            border: 0
        }

    .ui-datepicker.ui-datepicker-multi {
        position: absolute;
        z-index: 1;
        width: auto !important
    }

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
        border: 0px solid #2c7ca9;
        background: 50% 50% repeat-x #fff;
        color: #212121;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 1rem;
        margin: 4px;
        border-radius: 4px
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center
    }

    .ui-datepicker .ui-datepicker-prev span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
        background-image: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-left.svg");
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center
    }

    .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
        background-image: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-right.svg");
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center
    }

    .ui-datepicker .ui-datepicker-buttonpane button {
        float: right;
        margin: .5em .2em .4em;
        cursor: pointer;
        padding: .2em .6em .3em;
        width: auto;
        overflow: visible;
        display: none
    }

.ui-datepicker-calendar a.ui-state-default {
    border-color: #fff;
    border-radius: 100px;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 1rem;
    background-color: #f0f2eb;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(min-width: 769px) {
    .ui-datepicker-calendar a.ui-state-default {
        line-height: 1.5rem;
        -webkit-transition: .2s;
        transition: .2s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out
    }
}

.ui-datepicker-calendar a.ui-state-default:hover {
    border-color: #fff;
    border-radius: 100px;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 1.375rem;
    background-color: #9ebdbf;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    color: #fff
}

@media(min-width: 769px) {
    .ui-datepicker-calendar a.ui-state-default:hover {
        line-height: 1.5rem;
        background-color: #9ebdbf;
        color: #fff
    }
}

.ui-datepicker-calendar a.ui-state-active {
    border-color: #fc6446;
    background-color: #fc6446;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    color: #fff
}

.ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default {
    border-color: #fff;
    border-radius: 100px;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 1.375rem;
    background-color: #f0f2eb;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 1rem;
    color: #212121
}

.ui-datepicker-multi .ui-datepicker-group table {
    margin: 0 auto .4em;
    width: 100%;
    height: 100%;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: .875rem;
    border-collapse: collapse;
    margin: 0 0 .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
    padding: 8px;
    float: left
}

.ui-autocomplete {
    position: absolute;
    width: auto;
    right: 16px;
    left: 16px;
    cursor: pointer;
    padding: 0px;
    border: 0px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    color: #212121;
    font-size: 1rem;
    line-height: 1.25rem;
    border-radius: 8px;
    max-height: 280px;
    overflow-y: scroll;
    z-index: 200;
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)
}

@media(min-width: 769px) {
    .ui-autocomplete {
        width: unset;
        right: unset;
        left: unset;
        padding: 8px;
        max-height: 320px
    }
}

.ui-autocomplete .ui-state-disabled {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    color: #45b7ed;
    font-size: .875rem;
    line-height: 1.25rem;
    opacity: 1;
    border-bottom: 4px solid #fff;
    margin: 0 0 0 8px;
    padding: 8px 0;
    background: #fff
}

@media(min-width: 769px) {
    .ui-autocomplete .ui-state-disabled {
        font-size: 1rem
    }
}

.ui-autocomplete li {
    padding: 8px 8px;
    margin: 8px 8px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    color: #212121;
    font-size: 1rem;
    line-height: 1.25rem;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background: #f0f2eb;
    border-radius: 4px
}

.ui-autocomplete.ui-widget-content .ui-state-focus {
    padding: 8px 8px;
    margin: 8px 8px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    color: #212121;
    font-size: 1rem;
    line-height: 1.25rem;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background: #9ebdbf;
    border-radius: 4px
}

.ui-autocomplete mark {
    background: #daf0fb;
    color: #212121;
    border-radius: 4px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased
}

.ui-autocomplete .ui-menu-item .location {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #4a4a4a;
    font-size: .875rem;
    line-height: 1.25rem;
    display: none
}

.ui-autocomplete::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px
}

.ui-autocomplete::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d3d0c9;
    border: 2px solid #fff
}

.ui-state-disabled {
    opacity: 1;
    filter: Alpha(Opacity=100);
    background-image: none
}

.desk-dealfinder {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 24px;
    padding: 16px
}

@media(min-width: 769px) {
    .desk-dealfinder {
        background-color: #212121;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px
    }
}

.desk-dealfinder .journey_timing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 24px 48px;
    grid-column-gap: 8px
}

.desk-dealfinder .form-control {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 1.125rem;
    background-color: #fff;
    color: #212121;
    background-image: none;
    border: 2px solid #d3d0c9;
    font-size: 1rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    border-radius: 8px;
    text-decoration: none;
    padding: 8px 8px 8px 8px
}

@media(min-width: 769px) {
    .desk-dealfinder .form-control {
        line-height: 1.125rem
    }
}

.desk-dealfinder .route_list {
    position: absolute;
    cursor: pointer;
    padding: 8px;
    border: 0px solid #ccc;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    color: #212121;
    font-size: 1rem;
    line-height: 1.25rem;
    border-radius: 8px;
    max-height: 320px;
    overflow-y: scroll;
    z-index: 200;
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    -webkit-animation: fadein .3s ease-in-out forwards;
    animation: fadein .3s ease-in-out forwards
}

    .desk-dealfinder .route_list::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 8px
    }

    .desk-dealfinder .route_list::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #d3d0c9;
        border: 2px solid #fff
    }

    .desk-dealfinder .route_list h5 {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        color: #45b7ed;
        font-size: 1rem;
        line-height: 1.25rem;
        opacity: 1;
        border-bottom: 4px solid #fff;
        margin: 0 0 0 8px;
        padding: 8px 0;
        background: #fff
    }

    .desk-dealfinder .route_list .routes li {
        padding: 8px 8px;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        background: #f0f2eb;
        border-radius: 4px;
        margin-bottom: 4px;
        cursor: pointer
    }

        .desk-dealfinder .route_list .routes li mark {
            background: #daf0fb;
            color: #212121;
            border-radius: 4px;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased
        }

        .desk-dealfinder .route_list .routes li:hover {
            padding: 8px 8px;
            border-top: 2px solid #fff;
            border-bottom: 2px solid #fff;
            background: #e0f1fa;
            border-radius: 4px;
            margin-bottom: 4px
        }

        .desk-dealfinder .route_list .routes li .port {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            color: #212121;
            font-size: 1rem;
            line-height: 1.25rem;
            white-space: nowrap
        }

        .desk-dealfinder .route_list .routes li .location {
            font-family: mundial-light,sans-serif !important;
            font-weight: 300 !important;
            font-style: normal !important;
            color: #4a4a4a;
            font-size: .875rem;
            line-height: 1.25rem
        }

.desk-dealfinder .journey_type label, .desk-dealfinder .journey_type input, .desk-dealfinder .journey_type body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .desk-dealfinder .journey_type #railBtn, .desk-dealfinder .journey_type body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .desk-dealfinder .journey_type #railBtn {
    margin: 0 8px 0 0
}

.desk-dealfinder .popup {
    position: absolute;
    z-index: 4;
    background-color: #fff;
    cursor: default;
    padding: 16px;
    border: 0px solid #ccc;
    border-radius: 8px;
    opacity: 0;
    -webkit-animation: fadein .2s ease-in-out forwards;
    animation: fadein .2s ease-in-out forwards;
    top: calc(100% + 15px);
    left: -1px;
    right: 0;
    min-width: 450px;
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)
}

@media(min-width: 769px) {
    .desk-dealfinder .popup {
        z-index: 1
    }
}

.desk-dealfinder .popup select, .desk-dealfinder .popup input[type=text], .desk-dealfinder .popup body#TrainAndFerryMain #df-dom-deal_finder_container [type=text]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .desk-dealfinder .popup [type=text]#railBtn, .desk-dealfinder .popup body#TrainAndFerryInd #df-dom-deal_finder_container [type=text]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .desk-dealfinder .popup [type=text]#railBtn {
    min-width: 92px;
    font-size: 1rem;
    line-height: 1.25rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    padding: 8px;
    border: 2px solid #f0f2eb;
    border-radius: 8px;
    margin: 0 0 0 auto;
    background-color: #f0f2eb;
    color: #212121
}

.desk-dealfinder .popup label {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #212121;
    font-size: 1.125rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0px 8px;
    background-color: #f0f2eb;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer
}

    .desk-dealfinder .popup label.long {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0px
    }

        .desk-dealfinder .popup label.long select {
            min-width: 92px;
            font-size: 1rem;
            line-height: 1.25rem;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            padding: 8px;
            border: 2px solid #f0f2eb;
            border-radius: 8px;
            margin: 0 0 0 auto;
            background-color: #f0f2eb;
            color: #212121
        }

    .desk-dealfinder .popup label.radiolabel {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        margin-right: 8px;
        font-size: 1rem;
        background-color: #fff;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

        .desk-dealfinder .popup label.radiolabel input, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel #railBtn, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel #railBtn {
            margin: 0px 8px 0 0
        }

            .desk-dealfinder .popup label.radiolabel input[type=radio]:checked::after, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel [type=radio]#railBtn:checked::after, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel [type=radio]#railBtn:checked::after {
                width: 16px;
                height: 16px;
                border-radius: 16px;
                top: -1px;
                left: -1px;
                position: relative;
                background-color: #212121;
                content: "";
                display: inline-block;
                visibility: visible;
                border: 0px solid #fff
            }

            .desk-dealfinder .popup label.radiolabel input[type=radio]::after, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel [type=radio]#railBtn::after, .desk-dealfinder .popup label.radiolabel body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .desk-dealfinder .popup label.radiolabel [type=radio]#railBtn::after {
                width: 16px;
                height: 16px;
                border-radius: 16px;
                top: -1px;
                left: -1px;
                position: relative;
                background-color: #f0f2eb;
                content: "";
                display: inline-block;
                visibility: visible;
                border: 0px solid #fff
            }

    .desk-dealfinder .popup label.pet_counter output {
        width: 32px;
        border-width: 0px 0;
        background-color: #fff;
        border-radius: 32px;
        margin-left: 8px;
        margin-right: 8px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 30px;
        border: 0px solid #f0f2eb
    }

    .desk-dealfinder .popup label.pet_counter span {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 30px;
        border: 0px solid #f0f2eb
    }

        .desk-dealfinder .popup label.pet_counter span.inactive {
            background-color: rgba(0,0,0,0);
            opacity: .4;
            color: #212121;
            pointer-events: none;
            cursor: default
        }

        .desk-dealfinder .popup label.pet_counter span.increment {
            border-radius: 8px;
            font-size: 1.5rem
        }

    .desk-dealfinder .popup label .wheelchair {
        background-image: url("https://static.directferries.co.uk/image/ico/new/light-blue/wheelchair-accessibility.svg");
        background-size: 24px;
        background-position: 4px;
        background-repeat: no-repeat;
        padding-left: 48px;
        height: 24px;
        width: 24px
    }

    .desk-dealfinder .popup label [type=checkbox] {
        border: 1px solid #f0f2eb;
        right: 16px;
        position: relative
    }

.desk-dealfinder .popup h5 {
    font-size: 1rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
    padding: 0px 32px 8px 0;
    border-bottom: 0px solid #2c7ca9;
    margin-bottom: 8px;
    color: #45b7ed
}

.desk-dealfinder .popup h6 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    padding: 24px 0px 8px 0;
    border-bottom: 0px solid #eeeae2;
    margin-bottom: 8px;
    color: #212121
}

.desk-dealfinder .popup .popup_closer {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background: url("https://static.directferries.co.uk/image/ico/new/grey/cancel.svg") no-repeat left center;
    border: none
}

.desk-dealfinder .popup footer .popup_done {
    float: right;
    line-height: 1.25rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    padding: 8px 24px 8px 16px;
    background-color: #fc6446;
    background-image: url("https://static.directferries.co.uk/image/ico/new/white/arrow-right.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: right 50%;
    border-radius: 8px;
    min-width: 120px;
    margin-top: 8px
}

.desk-dealfinder .popup#pets_popup label.pet_counter[for=petType1_outbound] {
    background-image: none
}

.desk-dealfinder .popup#pets_popup label.pet_counter[for=petType2_outbound], .desk-dealfinder .popup#pets_popup label.pet_counter[for=petType7_outbound], .desk-dealfinder .popup#pets_popup label.pet_counter[for=petType8_outbound] {
    background-image: none
}

.desk-dealfinder .popup#pets_popup label.pet_counter[for=petType3_outbound] {
    background-image: none
}

@media(min-width: 769px) {
    .desk-dealfinder #vehicles_popup {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.desk-dealfinder #vehicles_popup.popup label.radiolabel {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-right: 8px;
    font-size: 1rem
}

@media(min-width: 769px) {
    .desk-dealfinder #vehicles_popup.popup label.vehicle_base, .desk-dealfinder #vehicles_popup.popup label.caravan_trailer {
        padding-left: 0;
        margin-right: auto
    }
}

@media(min-width: 769px) {
    .desk-dealfinder #vehicles_popup.popup fieldset.caravan_trailer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.desk-dealfinder .other_details .df_submit {
    float: right;
    min-height: 40px;
    line-height: 1.125rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 1.125rem;
    padding: 8px 24px 8px 16px;
    background-color: #fc6446;
    background-image: url("https://static.directferries.co.uk/image/ico/new/white/arrow-right.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: right 50%;
    border-radius: 8px
}

.desk-dealfinder .other_details .currency.disabled {
    background-color: rgba(0,0,0,0)
}

.fsWrap {
    background: #212121;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px
}

    .fsWrap .offerSlider {
        padding-right: 32px;
        padding-top: 16px;
        padding-bottom: 16px;
        height: 320px;
        border-radius: 8px;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .fsWrap .carousel, .fsWrap .carouselIn {
        border-radius: 8px;
        height: 100%
    }

        .fsWrap .carouselIn > .item img {
            border-radius: 8px;
            height: 100%
        }

        .fsWrap .carouselIn > .active {
            height: inherit;
            width: 100%;
            left: 0
        }

    .fsWrap .carouselDots {
        bottom: 0px;
        left: 8px;
        z-index: 15;
        padding-left: 0;
        text-align: center;
        list-style: disc;
        margin: 0px
    }

        .fsWrap .carouselDots li {
            display: inline-block;
            width: 8px;
            height: 8px;
            text-indent: -999px;
            cursor: pointer;
            border: 0px solid #45b7ed;
            border-radius: 8px;
            background: #45b7ed;
            margin: 4px
        }

        .fsWrap .carouselDots .active {
            background: #fff
        }

        .fsWrap .carouselDots > .item {
            height: inherit;
            width: 100%
        }

    .fsWrap .carouselCap {
        top: 0px;
        z-index: 10;
        color: #fff;
        text-align: left;
        padding: 8px;
        position: absolute
    }

        .fsWrap .carouselCap span {
            display: table-caption;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            background: #45b7ed;
            margin: 0;
            padding: 8px;
            border-radius: 8px;
            -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
            box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
            width: 280px;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            font-size: 16px !important;
            line-height: 24px !important
        }

        .fsWrap .carouselCap a {
            display: block;
            bottom: 10px;
            right: 10px
        }

        .fsWrap .carouselCap .btn {
            float: right;
            line-height: 1.125rem;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            font-size: 1rem;
            padding: 8px 24px 8px 16px;
            background-color: #fc6446;
            background-image: url("https://static.directferries.co.uk/image/ico/new/white/arrow-right.svg");
            background-repeat: no-repeat;
            background-size: 24px;
            background-position: right 50%
        }

.fs.sayt .formPopup {
    z-index: 100;
    background-image: none;
    padding-top: 0px;
    border-radius: 8px;
    width: auto;
    background: #f0f2eb;
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
    position: absolute;
    left: 16px;
    margin-right: 16px;
    margin-top: -36px
}

    .fs.sayt .formPopup .formCon input, .fs.sayt .formPopup .formCon body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .fs.sayt .formPopup .formCon #railBtn, .fs.sayt .formPopup .formCon body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .fs.sayt .formPopup .formCon #railBtn {
        appearance: auto;
        -webkit-appearance: auto
    }

        .fs.sayt .formPopup .formCon input[type=radio]::after, .fs.sayt .formPopup .formCon body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fs.sayt .formPopup .formCon [type=radio]#railBtn::after, .fs.sayt .formPopup .formCon body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fs.sayt .formPopup .formCon [type=radio]#railBtn::after {
            width: 24px;
            height: 24px;
            border-radius: 24px;
            top: -6px;
            left: -6px;
            position: relative;
            background-color: #e4e8dc;
            content: "";
            display: inline-block;
            visibility: visible;
            border: 4px solid #fff
        }

        .fs.sayt .formPopup .formCon input[type=radio]:checked::after, .fs.sayt .formPopup .formCon body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fs.sayt .formPopup .formCon [type=radio]#railBtn:checked::after, .fs.sayt .formPopup .formCon body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fs.sayt .formPopup .formCon [type=radio]#railBtn:checked::after {
            width: 24px;
            height: 24px;
            border-radius: 24px;
            top: -6px;
            left: -6px;
            position: relative;
            background-color: #212121;
            content: "";
            display: inline-block;
            visibility: visible;
            border: 4px solid #fff
        }

    .fs.sayt .formPopup#vehPopupOut .formCon .form-group .form-control {
        background-color: #f0f2eb
    }

    .fs.sayt .formPopup .formCon input, .fs.sayt .formPopup .formCon body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .fs.sayt .formPopup .formCon #railBtn, .fs.sayt .formPopup .formCon body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .fs.sayt .formPopup .formCon #railBtn {
        appearance: auto;
        -webkit-appearance: auto;
        width: max-content
    }

@media(min-width: 769px) {
    .fs.sayt .formPopup {
        z-index: 100;
        background-image: none;
        padding-top: 0;
        border-radius: 8px;
        width: 480px;
        background: #f0f2eb;
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
        box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
        margin-top: -36px
    }
}

.formCon .wc {
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/wheelchair-accessibility.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding-bottom: 0
}

    .formCon .wc label {
        margin-bottom: 0;
        padding-bottom: 0
    }

    .formCon .wc input, .formCon .wc body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .formCon .wc #railBtn, .formCon .wc body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .formCon .wc #railBtn {
        appearance: auto;
        -webkit-appearance: auto
    }

.fs.sayt .formPopup .formCon {
    display: grid;
    padding: 16px;
    background-color: #fff
}

@media(min-width: 769px) {
    .fs.sayt .formPopup .formCon {
        border-radius: 8px
    }
}

.fs.sayt .formPopup .formCon a.fsTLnk {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 1rem;
    padding: 16px 8px
}

.fs.sayt .formPopup .formCon table .tbody .tr {
    display: grid
}

.fs.sayt .popupTitle {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0px;
    background: #fff;
    color: #212121;
    border-left: 0px solid #c9c9c9;
    border-right: 0px solid #c9c9c9
}

.fs.sayt .popupClose {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background: url("https://static.directferries.co.uk/image/ico/new/grey/cancel.svg") no-repeat left center;
    border: none
}

.fs.sayt table .txt-group {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    color: #193354;
    line-height: 1.25rem;
    margin: 0;
    padding: 0
}

@media(min-width: 769px) {
    .fs.sayt table .txt-group {
        font-size: 16px;
        line-height: 1.5rem
    }
}

.fs.sayt .petLbl {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    color: #193354
}

.fs.sayt .petGrp {
    position: relative;
    display: grid;
    border-collapse: separate;
    margin: 0 0px 0 0px;
    grid-template-columns: auto auto auto;
    justify-self: end;
    padding: 0;
    gap: 2px
}

    .fs.sayt .petGrp label {
        width: 40px !important;
        background-color: #ede9e1;
        color: #193354;
        font-size: 1.25rem;
        font-family: mundial,sans-serif !important;
        font-weight: 600 !important;
        font-style: normal !important;
        -webkit-font-smoothing: antialiased;
        border-radius: 100px !important;
        text-decoration: none;
        line-height: 1.625rem;
        height: 40px !important;
        min-height: unset;
        display: flex !important;
        align-items: center;
        justify-content: center
    }

    .fs.sayt .petGrp .btn-default {
        text-align: center;
        text-decoration: none;
        position: relative;
        padding: 8px 8px;
        line-height: 1.5rem;
        height: 40px;
        border-radius: 100px !important;
        width: 40px;
        font-size: 1.5rem;
        background-image: none !important;
        margin: 0px !important;
        background-color: rgba(0,0,0,0);
        text-decoration: none;
        position: relative;
        border-color: rgba(0,0,0,0);
        color: #333;
        font-size: 2rem !important;
        font-family: mundial-light,sans-serif !important;
        font-weight: 300 !important;
        font-style: normal !important
    }

        .fs.sayt .petGrp .btn-default.disabled {
            text-align: center;
            text-decoration: none;
            position: relative;
            padding: 8px 8px;
            height: 40px;
            border-radius: 100px !important;
            width: 40px;
            font-size: 1.5rem;
            background-image: none !important;
            -ms-flex-item-align: center;
            align-self: center;
            color: #d3d0c9;
            font-size: 2rem;
            font-family: mundial-light,sans-serif !important;
            font-weight: 300 !important;
            font-style: normal !important
        }

@media(min-width: 769px) {
    .fs.sayt .petGrp .btn-default:hover {
        background-color: #fff
    }
}

.fs.sayt .petGrp .input-group-btn {
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    width: auto;
    display: grid;
    align-self: center;
    padding: 0 !important
}

.fs.sayt .titleInner {
    padding: 16px 36px 16px 16px;
    border-bottom: 0px solid #0070aa;
    font-size: 1rem;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

    .fs.sayt .titleInner .fsCopy {
        margin-top: 8px;
        margin-bottom: -24px
    }

        .fs.sayt .titleInner .fsCopy label {
            line-height: 1.5rem;
            margin: 0;
            padding: 0px 0 0 24px;
            color: #212121;
            font-size: .875rem
        }

            .fs.sayt .titleInner .fsCopy label input, .fs.sayt .titleInner .fsCopy label body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .fs.sayt .titleInner .fsCopy label #railBtn, .fs.sayt .titleInner .fsCopy label body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .fs.sayt .titleInner .fsCopy label #railBtn {
                width: max-content;
                appearance: auto;
                padding: 0
            }

.fs #cal_out, .fs #cal_ret {
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/calendar.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: calc(100% - 8px) 50%;
    background-repeat: no-repeat
}

.fs label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-size: .875rem
}

    .fs label.radio-inline {
        position: relative
    }

.fs tbody {
    -ms-flex-item-align: center;
    align-self: center
}

@media(min-width: 769px) {
    .fs tbody {
        display: grid
    }
}

.fs tbody tr {
    align-self: center;
    display: grid;
    grid-template-columns: 2fr 1fr;
    background-color: #f0f2eb;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px
}

.fs .errDiv table {
    width: 100%
}

    .fs .errDiv table tbody tr {
        background-color: #fce7e9;
        border: 2px solid #e10f1e;
        color: #212121;
        border-radius: 8px
    }

        .fs .errDiv table tbody tr td {
            font-size: 14px
        }

@media(min-width: 769px) {
    .fs tbody tr {
        grid-template-columns: 3fr 1fr;
        margin-bottom: unset
    }
}

.fs tbody tr td {
    -ms-flex-item-align: center;
    align-self: center;
    padding: 0px !important;
    width: 100% !important
}

    .fs tbody tr td .form-group {
        -ms-flex-item-align: center;
        align-self: center;
        padding: 0px !important
    }

        .fs tbody tr td .form-group .form-control {
            background-color: #ede9e1;
            border: none;
            margin-right: 8px;
            font-size: 16px;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            min-height: unset;
            height: max-content
        }

        .fs tbody tr td .form-group .select {
            -ms-flex-item-align: center;
            align-self: center;
            padding: 0px;
            width: 100%
        }

.fsDone {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    cursor: pointer;
    border: 0px solid rgba(0,0,0,0);
    white-space: nowrap;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    color: #ff4a0e;
    background-color: #ede9e1;
    background-image: none;
    background-position: right 50%;
    padding: 0px 4px 0px 4px;
    font-size: .875rem;
    min-width: 160px
}

.formPopup {
    display: none
}

@media(min-width: 769px) {
    .fs .formPopup {
        min-width: 450px
    }
}

.popUpForm {
    width: 80%;
    margin: 16px auto
}

.con {
    margin-right: auto;
    margin-left: auto;
    padding-left: 16px;
    padding-right: 16px
}

.fs {
    line-height: 1 !important
}

.xs1, .sm1, .md1, .lg1, .xs2, .sm2, .md2, .lg2, .xs3, .sm3, .md3, .lg3, .xs4, .sm4, .md4, .lg4, .xs5, .sm5, .md5, .lg5, .xs6, .sm6, .md6, .lg6, .xs7, .sm7, .md7, .lg7, .xs8, .sm8, .md8, .lg8, .xs9, .sm9, .md9, .lg9, .xs10, .sm10, .md10, .lg10, .xs11, .sm11, .md11, .lg11, .xs12, .sm12, .md12, .lg12, .sm15, .sm35, .sm85 {
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px
}

.xs1, .xs2, .xs3, .xs4, .xs5, .xs6, .xs7, .xs8, .xs9, .xs10, .xs11, .xs12 {
    float: left
}

.xs12 {
    width: 100%
}

.xs11 {
    width: 91.66666667%
}

.xs10 {
    width: 83.33333333%
}

.xs9 {
    width: 75%
}

.xs8 {
    width: 66.66666667%
}

.xs7 {
    width: 58.33333333%
}

.xs6 {
    width: 50%
}

.xs5 {
    width: 41.66666667%
}

.xs4 {
    width: 33.33333333%
}

.xs3 {
    width: 25%
}

.xs2 {
    width: 16.66666667%
}

.xs1 {
    width: 8.33333333%
}

@media(min-width: 769px) {
    .con {
        width: 750px
    }

    .sm1, .sm2, .sm25, .sm3, .sm4, .sm5, .sm6, .sm7, .sm8, .sm9, .sm10, .sm11, .sm12, .sm15, .sm35, .sm85 {
        float: left
    }

    .sm12 {
        width: 100%
    }

    .sm11 {
        width: 91.66666667%
    }

    .sm10 {
        width: 83.33333333%
    }

    .sm9 {
        width: 75%
    }

    .sm85 {
        width: 70%
    }

    .sm8 {
        width: 66.66666667%
    }

    .sm75 {
        width: 80%
    }

    .sm7 {
        width: 58.33333333%
    }

    .sm6 {
        width: 50%
    }

    .sm5 {
        width: 41.66666667%
    }

    .sm4 {
        width: 33.33333333%
    }

    .sm35 {
        width: 30%
    }

    .sm3 {
        width: 25%
    }

    .sm25 {
        width: 20%
    }

    .sm2 {
        width: 16.66666667%
    }

    .sm15 {
        width: 12.5%
    }

    .sm1 {
        width: 8.33333333%
    }
}

@media(min-width: 992px) {
    .con {
        width: 970px
    }

    .md1, .md2, .md3, .md4, .md5, .md6, .md7, .md8, .md9, .md10, .md11, .md12 {
        float: left
    }

    .md12 {
        width: 100%
    }

    .md11 {
        width: 91.66666667%
    }

    .md10 {
        width: 83.33333333%
    }

    .md9 {
        width: 75%
    }

    .md8 {
        width: 66.66666667%
    }

    .md7 {
        width: 58.33333333%
    }

    .md6 {
        width: 50%
    }

    .md5 {
        width: 41.66666667%
    }

    .md4 {
        width: 33.33333333%
    }

    .md3 {
        width: 25%
    }

    .md2 {
        width: 16.66666667%
    }

    .md1 {
        width: 8.33333333%
    }
}

@media(min-width: 1200px) {
    .con {
        width: 1100px
    }

    .lg1, .lg2, .lg3, .lg4, .lg5, .lg6, .lg7, .lg8, .lg9, .lg10, .lg11, .lg12 {
        float: left
    }

    .lg12 {
        width: 100%
    }

    .lg11 {
        width: 91.66666667%
    }

    .lg10 {
        width: 83.33333333%
    }

    .lg9 {
        width: 75%
    }

    .lg8 {
        width: 66.66666667%
    }

    .lg7 {
        width: 58.33333333%
    }

    .lg6 {
        width: 50%
    }

    .lg5 {
        width: 41.66666667%
    }

    .lg4 {
        width: 33.33333333%
    }

    .lg3 {
        width: 25%
    }

    .lg2 {
        width: 16.66666667%
    }

    .lg1 {
        width: 8.33333333%
    }
}

.cl:before, .cl:after, .con:before, .con:after, .row:before, .row:after {
    content: " ";
    display: table
}

.cl:after, .con:after, .row:after {
    clear: both
}

.lang_flag.de-AT {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/at.svg")
}

.lang_flag.fr-BE {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/be.svg")
}

.lang_flag.nl-BE {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/be.svg")
}

.lang_flag.de-CH {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ch.svg")
}

.lang_flag.fr-CH {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ch.svg")
}

.lang_flag.zh-CN {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/cn.svg")
}

.lang_flag.cs-CZ {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/cz.svg")
}

.lang_flag.de-DE {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/de.svg")
}

.lang_flag.da-DK {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/dk.svg")
}

.lang_flag.es-ES {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/es.svg")
}

.lang_flag.fi-FI {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/fi.svg")
}

.lang_flag.fr-FR {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/fr.svg")
}

.lang_flag.el-GR {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/gr.svg")
}

.lang_flag.ja-JP {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/jp.svg")
}

.lang_flag.it-IT {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/it.svg")
}

.lang_flag.en-IE {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ie.svg")
}

.lang_flag.nl-NL {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/nl.svg")
}

.lang_flag.nn-NO {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/no.svg")
}

.lang_flag.nb-NO {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/no.svg")
}

.lang_flag.pl-PL {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/pl.svg")
}

.lang_flag.pt-PT {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/pt.svg")
}

.lang_flag.ru-RU {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ru.svg")
}

.lang_flag.sv-SE {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/se.svg")
}

.lang_flag.sk-SK {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/sk.svg")
}

.lang_flag.tr-TR {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/tr.svg")
}

.lang_flag.uk-UA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ua.svg")
}

.lang_flag.en-US {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/us.svg")
}

.lang_flag.en-AU {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/au.svg")
}

.lang_flag.ar-SA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/sa.svg")
}

.lang_flag.ar-QA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/sa.svg")
}

.lang_flag.fr-MC {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/mc.svg")
}

.lang_flag.fr-MA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/mc.svg")
}

.lang_flag.ar-MA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ma.svg")
}

.lang_flag.tn {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/tn.svg")
}

.lang_flag.en-CA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ca.svg")
}

.lang_flag.fr-CA {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/ca.svg")
}

.lang_flag.ko-KR {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/kr.svg")
}

.lang_flag.en-GB {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/gb.svg")
}

.lang_flag.ca-ES {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/es-ct.svg")
}

.lang_flag.id-ID {
    background-image: url("https://static.directferries.co.uk/images/flags/4x3/id.svg")
}

.lang_flag {
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: left center
}

@media(max-width: 768px) {
    #search-widget {
        margin: 24px 0
    }
}

#search-widget input[type=text][data-testid*=popup-port-field-input], #search-widget body#TrainAndFerryMain #df-dom-deal_finder_container [type=text][data-testid*=popup-port-field-input]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container #search-widget [type=text][data-testid*=popup-port-field-input]#railBtn, #search-widget body#TrainAndFerryInd #df-dom-deal_finder_container [type=text][data-testid*=popup-port-field-input]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container #search-widget [type=text][data-testid*=popup-port-field-input]#railBtn {
    background-color: unset !important;
    padding: 0;
    border: none !important
}

    #search-widget input[type=text][data-testid*=popup-port-field-input]:focus-visible, #search-widget body#TrainAndFerryMain #df-dom-deal_finder_container [type=text][data-testid*=popup-port-field-input]#railBtn:focus-visible, body#TrainAndFerryMain #df-dom-deal_finder_container #search-widget [type=text][data-testid*=popup-port-field-input]#railBtn:focus-visible, #search-widget body#TrainAndFerryInd #df-dom-deal_finder_container [type=text][data-testid*=popup-port-field-input]#railBtn:focus-visible, body#TrainAndFerryInd #df-dom-deal_finder_container #search-widget [type=text][data-testid*=popup-port-field-input]#railBtn:focus-visible {
        border: none !important;
        outline: none !important
    }

@media(min-width: 1024px) {
    #search-widget ._14y7hcy2:after {
        content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12%2012C5.37258%2012%200%206.62742%200%200V12H12Z%27%20fill%3D%27%23E4E8DC%27%2F%3E%3C%2Fsvg%3E") !important;
        bottom: -1px;
        right: -0.75rem;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: .75rem;
        height: .75rem;
        transform: translateY(-12px)
    }
}

div[id*=radix-][role=dialog] {
    z-index: 1000
}

    div[id*=radix-][role=dialog] input[type=text][data-testid*=drawer-port-field-input], div[id*=radix-][role=dialog] body#TrainAndFerryMain #df-dom-deal_finder_container [type=text][data-testid*=drawer-port-field-input]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container div[id*=radix-][role=dialog] [type=text][data-testid*=drawer-port-field-input]#railBtn, div[id*=radix-][role=dialog] body#TrainAndFerryInd #df-dom-deal_finder_container [type=text][data-testid*=drawer-port-field-input]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container div[id*=radix-][role=dialog] [type=text][data-testid*=drawer-port-field-input]#railBtn {
        background-color: unset !important;
        padding: 0;
        border: none !important
    }

        div[id*=radix-][role=dialog] input[type=text][data-testid*=drawer-port-field-input]:focus-visible, div[id*=radix-][role=dialog] body#TrainAndFerryMain #df-dom-deal_finder_container [type=text][data-testid*=drawer-port-field-input]#railBtn:focus-visible, body#TrainAndFerryMain #df-dom-deal_finder_container div[id*=radix-][role=dialog] [type=text][data-testid*=drawer-port-field-input]#railBtn:focus-visible, div[id*=radix-][role=dialog] body#TrainAndFerryInd #df-dom-deal_finder_container [type=text][data-testid*=drawer-port-field-input]#railBtn:focus-visible, body#TrainAndFerryInd #df-dom-deal_finder_container div[id*=radix-][role=dialog] [type=text][data-testid*=drawer-port-field-input]#railBtn:focus-visible {
            border: none !important;
            outline: none !important
        }

    div[id*=radix-][role=dialog] input[class*=_], div[id*=radix-][role=dialog] body#TrainAndFerryMain #df-dom-deal_finder_container [class*=_]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container div[id*=radix-][role=dialog] [class*=_]#railBtn, div[id*=radix-][role=dialog] body#TrainAndFerryInd #df-dom-deal_finder_container [class*=_]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container div[id*=radix-][role=dialog] [class*=_]#railBtn {
        background-color: unset !important;
        padding: 0;
        border: none !important
    }

        div[id*=radix-][role=dialog] input[class*=_]:focus-visible, div[id*=radix-][role=dialog] body#TrainAndFerryMain #df-dom-deal_finder_container [class*=_]#railBtn:focus-visible, body#TrainAndFerryMain #df-dom-deal_finder_container div[id*=radix-][role=dialog] [class*=_]#railBtn:focus-visible, div[id*=radix-][role=dialog] body#TrainAndFerryInd #df-dom-deal_finder_container [class*=_]#railBtn:focus-visible, body#TrainAndFerryInd #df-dom-deal_finder_container div[id*=radix-][role=dialog] [class*=_]#railBtn:focus-visible {
            border: none !important;
            outline: none !important
        }

#deal_finder_container:has(.dealfinder__tabs) #deal_finder_container_horizontal .dealfinderBase {
    border-radius: 0 8px 8px 8px
}

.dealfinder__tabs {
    display: flex;
    gap: 0
}

@media(max-width: 768px) {
    .dealfinder__tabs {
        margin-bottom: 16px
    }
}

.dealfinder__tabs .dealfinder__tab {
    background-color: rgba(0,0,0,0);
    color: #bdc4c9;
    cursor: pointer;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    height: initial;
    padding: 8px 16px !important;
    min-width: 120px
}

@media(min-width: 769px) {
    .dealfinder__tabs .dealfinder__tab {
        background-color: #e4e8dc;
        color: #212121
    }
}

@media(max-width: 768px) {
    .dealfinder__tabs .dealfinder__tab {
        flex: 1;
        border-bottom: 1px solid #bdc4c9
    }
}

.dealfinder__tabs .dealfinder__tab svg {
    height: 20px;
    width: 20px;
    fill: #bdc4c9
}

@media(min-width: 769px) {
    .dealfinder__tabs .dealfinder__tab svg {
        fill: #212121
    }
}

.dealfinder__tabs .dealfinder__tab--active {
    background-color: rgba(0,0,0,0);
    color: #fff;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

    .dealfinder__tabs .dealfinder__tab--active svg {
        fill: #fff
    }

@media(min-width: 769px) {
    .dealfinder__tabs .dealfinder__tab--active svg {
        fill: #212121
    }
}

@media(min-width: 769px) {
    .dealfinder__tabs .dealfinder__tab--active {
        color: #212121;
        background-color: #fff
    }
}

@media(max-width: 768px) {
    .dealfinder__tabs .dealfinder__tab--active {
        border-bottom: 2px solid #fff
    }
}

.dealfinder__tabs .dealfinder__tab:hover {
    opacity: 1;
    transition: .3s
}

.dealfinder__tabs .dealfinder__tab:first-of-type {
    border-radius: 8px 0 0 0
}

.dealfinder__tabs .dealfinder__tab:last-of-type {
    border-radius: 0 8px 0 0
}

.dealfinder__tab-content {
    display: none;
    animation: fadeIn .3s ease-in-out
}

.dealfinder__tab-content--active {
    display: block
}

.dealfinder__tab-content .affiliateWidget {
    border-radius: 8px
}

@media(max-width: 768px) {
    .dealfinder__tab-content .affiliateWidget {
        margin: 0 0 !important
    }
}

.dealfinder__tab-content .affiliateWidget .wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

button, a {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none
}

    button.primary, a.primary {
        background-color: #fc6446;
        color: #fff;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .3s ease-in-out;
        gap: 8px;
        text-align: center
    }

        button.primary svg, a.primary svg {
            fill: #fff;
            width: 20px;
            height: 20px;
            flex-shrink: 0
        }

@media(hover: hover)and (pointer: fine) {
    button.primary:hover, a.primary:hover {
        background-color: #fca38f
    }
}

button.primary:active, a.primary:active {
    background-color: #d06f5c
}

button.primary.disabled, button.primary.outline.disabled, a.primary.disabled, a.primary.outline.disabled {
    background-color: #e8e8e8;
    color: #a6a6a6;
    pointer-events: none
}

    button.primary.disabled svg, button.primary.outline.disabled svg, a.primary.disabled svg, a.primary.outline.disabled svg {
        fill: #a6a6a6
    }

button.primary.outline, a.primary.outline {
    background-color: #fff;
    color: #212121;
    border: 2px solid #fc6446
}

    button.primary.outline svg, a.primary.outline svg {
        fill: #212121
    }

@media(hover: hover)and (pointer: fine) {
    button.primary.outline:hover, a.primary.outline:hover {
        background-color: #fff0ed
    }
}

button.primary.outline.disabled, a.primary.outline.disabled {
    border: 2px solid #e8e8e8
}

button.secondary, a.secondary {
    background-color: #212121;
    color: #fff;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease-in-out;
    gap: 8px;
    text-align: center
}

    button.secondary svg, a.secondary svg {
        fill: #fff
    }

        button.secondary svg path, a.secondary svg path {
            fill: #fff
        }

    button.secondary.outline svg, a.secondary.outline svg {
        fill: #212121
    }

        button.secondary.outline svg path, a.secondary.outline svg path {
            fill: #212121
        }

    button.secondary.disabled svg, a.secondary.disabled svg {
        fill: #a6a6a6
    }

@media(hover: hover)and (pointer: fine) {
    button.secondary:hover, a.secondary:hover {
        background-color: #4d4d4d
    }
}

button.secondary:active, a.secondary:active {
    background-color: #212121
}

button.secondary.disabled, button.secondary.outline.disabled, a.secondary.disabled, a.secondary.outline.disabled {
    background-color: #e8e8e8;
    color: #a6a6a6;
    pointer-events: none
}

button.secondary.outline, a.secondary.outline {
    background-color: #fff;
    color: #212121;
    border: 2px solid #212121
}

    button.secondary.outline svg, a.secondary.outline svg {
        fill: #212121
    }

@media(hover: hover)and (pointer: fine) {
    button.secondary.outline:hover, a.secondary.outline:hover {
        background-color: #e8e8e8
    }
}

button.secondary.outline:active, a.secondary.outline:active {
    background-color: #d4d4d4
}

button.secondary.outline.disabled, a.secondary.outline.disabled {
    border: 2px solid #e8e8e8
}

    button.secondary.outline.disabled svg, a.secondary.outline.disabled svg {
        fill: #a6a6a6
    }

button.round, a.round {
    border-radius: 50px
}

button.square, a.square {
    border-radius: 8px
}

button.sm, a.sm {
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px 16px
}

button.reg, a.reg {
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 8px 16px
}

button.lg, a.lg {
    font-size: 18px !important;
    line-height: 24px !important;
    padding: 8px 24px
}

#btnApplyMarketingVoucher, #btnRemoveMarketingVoucher {
    background-color: #fc6446 !important;
    color: #fff;
    border: 2px solid #fc6446 !important;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    #btnApplyMarketingVoucher:hover, #btnRemoveMarketingVoucher:hover {
        background-color: #fca38f !important;
        border-color: #fca38f !important;
        transition: background-color .3s,color .3s,border-color .3s
    }

.btn#lnkChangeSearch {
    background-color: #fff;
    color: #212121;
    border: 2px solid #212121;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 8px;
    padding: 6px 16px !important;
    min-width: 140px;
    min-height: 32px;
    font-size: 14px !important;
    line-height: 20px !important
}

    .btn#lnkChangeSearch:hover {
        background-color: #e8e8e8 !important;
        color: #212121 !important;
        border-color: #212121 !important
    }

    .btn#lnkChangeSearch:active {
        background-color: #cfcfcf;
        border-color: #080808
    }

    .btn#lnkChangeSearch:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

#btnSearch.btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    #btnSearch.btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    #btnSearch.btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    #btnSearch.btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.fs.sayt .fsDone {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    .fs.sayt .fsDone:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .fs.sayt .fsDone:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .fs.sayt .fsDone:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.quote_item .abPseudoBtn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    .quote_item .abPseudoBtn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .quote_item .abPseudoBtn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .quote_item .abPseudoBtn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

    .quote_item .abPseudoBtn:hover .abPseudoBtn {
        background-color: #fc826b !important;
        transition: .3s
    }

.quote_item .ab-2062-continue {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    width: max-content;
    margin-left: auto
}

    .quote_item .ab-2062-continue:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .quote_item .ab-2062-continue:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .quote_item .ab-2062-continue:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

    .quote_item .ab-2062-continue:hover .abPseudoBtn {
        background-color: #fc826b !important;
        transition: .3s
    }

.nQte .abPseudoBtn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    .nQte .abPseudoBtn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .nQte .abPseudoBtn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .nQte .abPseudoBtn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

    .nQte .abPseudoBtn:hover .abPseudoBtn {
        background-color: #fc826b !important;
        transition: .3s
    }

.typePrice a.btn {
    background-color: #328639;
    color: #fff;
    border: 2px solid #328639;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 16px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 16px !important;
    line-height: 24px !important
}

    .typePrice a.btn:hover {
        background-color: #84b688 !important;
        color: #fff !important;
        border-color: #84b688 !important
    }

    .typePrice a.btn:active {
        background-color: #64a369;
        border-color: #64a369
    }

    .typePrice a.btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.type1 .typePrice a.btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 16px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 16px !important;
    line-height: 24px !important
}

    .type1 .typePrice a.btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .type1 .typePrice a.btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .type1 .typePrice a.btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.content-accom .form-group.btnCen .btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    display: flex !important
}

    .content-accom .form-group.btnCen .btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .content-accom .form-group.btnCen .btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .content-accom .form-group.btnCen .btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

@media(min-width: 769px) {
    .content-accom .form-group.btnCen .btn {
        max-width: 300px
    }
}

#customerDetailsContainer .form-group.btnCen {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 32px
}

    #customerDetailsContainer .form-group.btnCen .btn {
        background-color: #fc6446;
        color: #fff;
        border: 2px solid #fc6446;
        transition: background-color .3s,color .3s,border-color .3s;
        cursor: pointer;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        height: initial;
        border-radius: 50px;
        padding: 8px 16px !important;
        min-width: 140px;
        min-height: 40px;
        font-size: 16px !important;
        line-height: 24px !important;
        width: 100%;
        max-width: 300px
    }

        #customerDetailsContainer .form-group.btnCen .btn:hover {
            background-color: #fca38f !important;
            color: #fff !important;
            border-color: #fca38f !important
        }

        #customerDetailsContainer .form-group.btnCen .btn:active {
            background-color: #fb7a5d;
            border-color: #fb7a5d
        }

        #customerDetailsContainer .form-group.btnCen .btn:disabled {
            background-color: #e8e8e8;
            color: #a6a6a6;
            border-color: #e8e8e8;
            cursor: not-allowed
        }

.form-group.btnLnk#butSubmit input, .form-group.btnLnk#butSubmit body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn, .form-group.btnLnk#butSubmit body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    margin: 0 auto;
    width: max-content
}

    .form-group.btnLnk#butSubmit input:hover, .form-group.btnLnk#butSubmit body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:hover, body#TrainAndFerryMain #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:hover, .form-group.btnLnk#butSubmit body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:hover, body#TrainAndFerryInd #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .form-group.btnLnk#butSubmit input:active, .form-group.btnLnk#butSubmit body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:active, body#TrainAndFerryMain #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:active, .form-group.btnLnk#butSubmit body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:active, body#TrainAndFerryInd #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .form-group.btnLnk#butSubmit input:disabled, .form-group.btnLnk#butSubmit body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:disabled, body#TrainAndFerryMain #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:disabled, .form-group.btnLnk#butSubmit body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:disabled, body#TrainAndFerryInd #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

    .form-group.btnLnk#butSubmit input:disabled, .form-group.btnLnk#butSubmit body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:disabled, body#TrainAndFerryMain #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:disabled, .form-group.btnLnk#butSubmit body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:disabled, body#TrainAndFerryInd #df-dom-deal_finder_container .form-group.btnLnk#butSubmit #railBtn:disabled {
        background-repeat: no-repeat;
        background-position: -9999px
    }

.be-requote .form-group.btnLnk .btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    width: max-content
}

    .be-requote .form-group.btnLnk .btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .be-requote .form-group.btnLnk .btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .be-requote .form-group.btnLnk .btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

    .be-requote .form-group.btnLnk .btn.backBtn {
        background-color: #fff;
        color: #212121;
        border: 2px solid #212121;
        transition: background-color .3s,color .3s,border-color .3s;
        cursor: pointer;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        height: initial;
        border-radius: 50px;
        padding: 8px 24px !important;
        min-width: 140px;
        min-height: 40px;
        font-size: 18px !important;
        line-height: 24px !important;
        width: max-content
    }

        .be-requote .form-group.btnLnk .btn.backBtn:hover {
            background-color: #e8e8e8 !important;
            color: #212121 !important;
            border-color: #212121 !important
        }

        .be-requote .form-group.btnLnk .btn.backBtn:active {
            background-color: #cfcfcf;
            border-color: #080808
        }

        .be-requote .form-group.btnLnk .btn.backBtn:disabled {
            background-color: #e8e8e8;
            color: #a6a6a6;
            border-color: #e8e8e8;
            cursor: not-allowed
        }

.koala-urgency .koala-btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 16px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 16px !important;
    line-height: 24px !important;
    width: 100%
}

    .koala-urgency .koala-btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .koala-urgency .koala-btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .koala-urgency .koala-btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

@media(min-width: 769px) {
    .koala-urgency .koala-btn {
        width: max-content
    }
}

.koala-container .koala-cta .koala-btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 16px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 16px !important;
    line-height: 24px !important;
    width: max-content
}

    .koala-container .koala-cta .koala-btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .koala-container .koala-cta .koala-btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .koala-container .koala-cta .koala-btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

svg.arrow-forward-orange path.bg {
    fill: #fc6446
}

svg.arrow-forward-orange path.arrow {
    fill: #fff
}

svg.arrow-forward-black path.bg {
    fill: #212121
}

svg.arrow-forward-black path.arrow {
    fill: #fff
}

.popUp#emailQuote .content #pnlEmailMyQuote .form-group.btnCen {
    display: block
}

    .popUp#emailQuote .content #pnlEmailMyQuote .form-group.btnCen .btn {
        background-color: #fc6446;
        color: #fff;
        border: 2px solid #fc6446;
        transition: background-color .3s,color .3s,border-color .3s;
        cursor: pointer;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        height: initial;
        border-radius: 50px;
        padding: 8px 24px !important;
        min-width: 140px;
        min-height: 40px;
        font-size: 18px !important;
        line-height: 24px !important;
        width: max-content;
        margin: 0 auto
    }

        .popUp#emailQuote .content #pnlEmailMyQuote .form-group.btnCen .btn:hover {
            background-color: #fca38f !important;
            color: #fff !important;
            border-color: #fca38f !important
        }

        .popUp#emailQuote .content #pnlEmailMyQuote .form-group.btnCen .btn:active {
            background-color: #fb7a5d;
            border-color: #fb7a5d
        }

        .popUp#emailQuote .content #pnlEmailMyQuote .form-group.btnCen .btn:disabled {
            background-color: #e8e8e8;
            color: #a6a6a6;
            border-color: #e8e8e8;
            cursor: not-allowed
        }

.con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btnLnk:has(#btnPreviousPage) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center
}

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btnLnk:has(#btnPreviousPage) .btn {
        margin: unset !important
    }

@media(min-width: 769px) {
    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btnLnk:has(#btnPreviousPage) {
        flex-direction: row
    }
}

.con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #btnPreviousPage.btn {
    background-color: #fff;
    color: #212121;
    border: 2px solid #212121;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    width: max-content;
    margin: 0 auto
}

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #btnPreviousPage.btn:hover {
        background-color: #e8e8e8 !important;
        color: #212121 !important;
        border-color: #212121 !important
    }

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #btnPreviousPage.btn:active {
        background-color: #cfcfcf;
        border-color: #080808
    }

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #btnPreviousPage.btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btn {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    width: max-content;
    margin: 0 auto
}

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btn:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btn:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .con .row:has(.paymentSelect):not(:has(.summaryBox.mHide)) .sm85.md9 #butSubmit.btn:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.sold-out-btn {
    background-color: #e8e8e8 !important;
    color: #a6a6a6 !important;
    border: 2px solid #e8e8e8 !important;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 16px !important;
    line-height: 24px !important;
    width: max-content;
    margin-left: auto
}

.ab-2062-mb-30 .ab-2062-cta-outer .sold-out-btn {
    min-width: 140px !important
}

section.deal-finder .text button.book-button {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 6px 16px !important;
    min-width: 140px;
    min-height: 32px;
    font-size: 14px !important;
    line-height: 20px !important
}

    section.deal-finder .text button.book-button:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    section.deal-finder .text button.book-button:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    section.deal-finder .text button.book-button:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

.df-icon.df-icon--xs {
    width: 16px;
    height: 16px
}

    .df-icon.df-icon--xs svg {
        width: 16px
    }

.df-icon.df-icon--sm {
    width: 20px;
    height: 20px
}

    .df-icon.df-icon--sm svg {
        width: 20px
    }

.df-icon.df-icon--md {
    width: 24px;
    height: 24px
}

    .df-icon.df-icon--md svg {
        width: 24px
    }

.df-icon.df-icon--lg {
    width: 28px;
    height: 28px
}

    .df-icon.df-icon--lg svg {
        width: 28px
    }

.df-icon.df-icon--xl {
    width: 32px;
    height: 32px
}

    .df-icon.df-icon--xl svg {
        width: 32px
    }

.df-icon.df-icon--roundel {
    border-radius: 100%;
    padding: 8px
}

.df-icon.df-fill__binaryLight svg {
    fill: #fff
}

.df-icon.df-fill__binaryDark svg {
    fill: #000
}

.df-icon.df-fill__primary svg {
    fill: #fc6446
}

.df-icon.df-fill__secondary svg {
    fill: #e4e8dc
}

.df-icon.df-fill__tertiaryGreen svg {
    fill: #0f5a5c
}

.df-icon.df-fill__tertiaryGrey svg {
    fill: #5a6c78
}

.df-link--primary, .df-link--secondary {
    color: #fff;
    border-radius: 50px;
    width: max-content
}

    .df-link--primary:link, .df-link--primary:visited, .df-link--primary:hover, .df-link--primary:active, .df-link--secondary:link, .df-link--secondary:visited, .df-link--secondary:hover, .df-link--secondary:active {
        color: #fff
    }

    .df-link--primary svg, .df-link--secondary svg {
        fill: #fff
    }

    .df-link--primary.df-link--lg, .df-link--secondary.df-link--lg {
        font-size: 18px;
        line-height: 24px;
        padding: 8px 24px
    }

    .df-link--primary.df-link--md, .df-link--secondary.df-link--md {
        font-size: 16px;
        line-height: 24px;
        padding: 8px 16px
    }

    .df-link--primary.df-link--sm, .df-link--secondary.df-link--sm {
        font-size: 14px;
        line-height: 20px;
        padding: 6px 16px
    }

    .df-link--primary.df-flexbox__gap-sm, .df-link--secondary.df-flexbox__gap-sm {
        gap: 6px
    }

    .df-link--primary.df-flexbox__gap-md, .df-link--secondary.df-flexbox__gap-md {
        gap: 8px
    }

    .df-link--primary.df-flexbox__gap-lg, .df-link--secondary.df-flexbox__gap-lg {
        gap: 10px
    }

    .df-link--primary:focus, .df-link--primary:hover, .df-link--secondary:focus, .df-link--secondary:hover {
        text-decoration: none
    }

    .df-link--primary:active, .df-link--secondary:active {
        opacity: 1;
        filter: brightness(80%)
    }

.df-link--primary {
    background-color: #fc6446;
    border: 1px solid #fc6446
}

    .df-link--primary.df-link--outline {
        color: #fc6446;
        background-color: #fff
    }

        .df-link--primary.df-link--outline:hover {
            background-color: #ffe0d9
        }

        .df-link--primary.df-link--outline svg {
            fill: #fc6446
        }

.df-link--secondary {
    background-color: #0f5a5c;
    border: 1px solid #0f5a5c
}

    .df-link--secondary.df-link--outline {
        color: #0f5a5c;
        background-color: #fff
    }

        .df-link--secondary.df-link--outline:hover {
            background-color: #cfdede
        }

        .df-link--secondary.df-link--outline svg {
            fill: #0f5a5c
        }

.df-link--square {
    border-radius: 8px
}

.df-link--regular {
    font-weight: 400
}

.df-link--bold {
    font-weight: 600
}

:not(.df-link--outline).df-link--hover:hover {
    opacity: .8
}

.df-logo.df-logo--sm {
    height: 35px;
    width: 37px
}

.df-logo.df-logo--md {
    height: 44px;
    width: 46px
}

.df-logo.df-logo--lg {
    height: 57px;
    width: 60px
}

.df-logo.df-logo--full.df-logo--sm {
    width: 180px
}

.df-logo.df-logo--full.df-logo--md {
    width: 230px
}

.df-logo.df-logo--full.df-logo--lg {
    width: 300px
}

.hint2, .hilite {
    display: inline-flex;
    padding: 2px 4px;
    border-radius: 2px
}

    .hint2:has(.df-1240-fast-icon).blue, .hilite:has(.df-1240-fast-icon).blue {
        background-color: #0071bc;
        border-bottom: 0;
        padding-left: 16px
    }

        .hint2:has(.df-1240-fast-icon).blue img.df-1240-fast-icon, .hilite:has(.df-1240-fast-icon).blue img.df-1240-fast-icon {
            position: absolute;
            left: -45px;
            top: -5px;
            width: 44px
        }

    .hint2.green, .hilite.green {
        background-color: #328639
    }

    .hint2.dark-green, .hilite.dark-green {
        background-color: #407a7d
    }

    .hint2.red, .hilite.red {
        background-color: #e10f1e
    }

    .hint2.yellow, .hilite.yellow {
        background-color: #ffc75b
    }

        .hint2.yellow > div, .hilite.yellow > div {
            color: #212121
        }

    .hint2.blue, .hilite.blue {
        background-color: #4b5fff
    }

    .hint2.alternative, .hilite.alternative {
        background-color: #fff1d6;
        height: max-content
    }

        .hint2.alternative > div, .hilite.alternative > div {
            background-color: unset !important;
            border: none !important;
            color: #212121 !important
        }

    .hint2 > div, .hilite > div {
        font-size: 12px;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        color: #fff
    }

.con .crumbTitle {
    display: none
}

@media(min-width: 769px) {
    .con .crumbTitle {
        display: block;
        position: absolute;
        top: 24px;
        left: 320px;
        padding: 4px
    }

        .con .crumbTitle span {
            background-color: #0f5a5c;
            display: inline-block;
            padding: 4px 4px 4px 8px;
            color: #fff;
            position: relative;
            margin-right: -5px;
            border-radius: 4px 0 0 4px;
            font-size: 14px;
            line-height: 24px;
            height: 32px
        }

            .con .crumbTitle span:last-child {
                background-color: #0f5a5c;
                display: inline-block;
                padding: 4px 8px 4px 4px;
                color: #fff;
                position: relative;
                font-weight: bold;
                border-radius: 0 0
            }

                .con .crumbTitle span:last-child::after {
                    content: "";
                    position: absolute;
                    width: 32px;
                    height: 32px;
                    border-top: 16px solid rgba(0,0,0,0);
                    border-bottom: 16px solid rgba(0,0,0,0);
                    border-left: 16px solid #0f5a5c;
                    top: 0;
                    right: -32px
                }
}

.df-accordion--button {
    font-size: 16px;
    background-color: #cfdede;
    border: 1px solid #0f5a5c;
    border-radius: 4px;
    cursor: pointer;
    text-align: left
}

    .df-accordion--button:hover {
        filter: brightness(90%)
    }

.df-accordion--button__title-icon {
    padding: 16px;
    background-color: #0f5a5c
}

    .df-accordion--button__title-icon svg {
        fill: #fff
    }

.df-accordion--button__title-label {
    padding: 0 16px
}

.df-accordion--dropdown {
    padding: 16px;
    border: 1px solid #0f5a5c
}

.df-accordion--button__opened {
    border-radius: 4px 4px 0 0
}

.df-accordion--dropdown__opened {
    margin-top: -1px;
    border-radius: 0 0 4px 4px
}

.df-accordion--dropdown__closed {
    display: none
}

.df-accordion--button-icon-container {
    padding: 16px
}

.df-reviewAccordion {
    gap: 0
}

    .df-reviewAccordion .df-accordion--button__title {
        font-size: 20px
    }

    .df-reviewAccordion .df-accordion--button {
        border: none;
        border-bottom: 1px solid #000;
        background-color: #fafaf7;
        border-radius: 0
    }

    .df-reviewAccordion .df-accordion--button__opened {
        border-bottom: 1px solid rgba(0,0,0,0)
    }

    .df-reviewAccordion .df-accordion--dropdown {
        border: none;
        border-bottom: 1px solid #000;
        border-radius: 0
    }

@media(min-width: 769px) {
    body:has(#divQuotesContainer) #info.prices-rise-msg-div, body:has(#divQuotesContainer) #info.prices-rise-msg1-div {
        margin-left: 16px;
        margin-right: 16px;
        max-width: 1200px
    }
}

@media(min-width: 1200px) {
    body:has(#divQuotesContainer) #info.prices-rise-msg-div, body:has(#divQuotesContainer) #info.prices-rise-msg1-div {
        margin: 0 auto
    }
}

#info {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 8px
}

    #info.prices-rise-msg-div, #info.prices-rise-msg1-div {
        color: #212121 !important;
        padding-left: 40px;
        background: url("https://static.directferries.co.uk/image/ico/new/grey/duration.svg") no-repeat left 8px top 8px #fff0ed !important;
        border: 2px solid #fc6446 !important
    }

        #info.prices-rise-msg-div br, #info.prices-rise-msg1-div br {
            display: none
        }

    #info .prices-rise-msg, #info span {
        color: #212121 !important;
        font-size: 14px !important;
        line-height: 20px !important
    }

@media(min-width: 1025px) {
    #info .prices-rise-msg, #info span {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

#info div[class*=urgency-title] {
    display: none
}

@media(min-width: 769px) {
    #info div[class*=urgency-title] {
        display: block
    }
}

#info #spnCountdownText {
    display: none
}

@media(min-width: 769px) {
    #info #spnCountdownText {
        display: block
    }
}

.info {
    background-color: #e9f7fb;
    border: 2px solid #c9ecf4;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 16px !important;
    line-height: 24px !important
}

    .info a {
        text-decoration: underline
    }

    .info#termsAndConditions {
        padding: 16px 0 !important
    }

@media(max-width: 768px) {
    .info#termsAndConditions {
        background-color: rgba(0,0,0,0) !important;
        color: #fff;
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center;
        border: 0
    }

        .info#termsAndConditions a {
            color: #fff !important;
            text-decoration: underline
        }
}

.info#termsAndConditions #termsAndConditions3 {
    padding: 16px 0 !important;
    background-color: #c9ecf4;
    color: #212121;
    font-size: 14px !important;
    line-height: 20px !important
}

    .info#termsAndConditions #termsAndConditions3 a {
        font-size: 14px !important;
        line-height: 20px !important;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        text-decoration: underline !important
    }

@media(max-width: 768px) {
    .info#termsAndConditions #termsAndConditions3 a {
        color: #212121 !important
    }
}

.info#noResultsFoundDiv {
    max-width: 1200px;
    margin: 0 auto 16px auto;
    background: url("https://static.directferries.co.uk/image/ico/new/grey/ship.svg") 8px 10px no-repeat #e9f7fb !important;
    color: #212121 !important;
    border: 2px solid #c9ecf4
}

#ab-great-choice {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    padding: 8px !important;
    background-color: #ebf3eb !important;
    border: 2px solid #328639 !important;
    border-radius: 8px;
    margin-bottom: 0 !important
}

@media(min-width: 769px) {
    #ab-great-choice {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto
    }
}

@media(min-width: 769px) {
    #ab-great-choice {
        margin-top: 8px !important;
        margin-bottom: 8px !important
    }
}

#ab-great-choice .ab-great-choice--message {
    width: 100%;
    position: relative;
    color: #212121 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    #ab-great-choice .ab-great-choice--message {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

#ab-great-choice .ab-great-choice--message .ab-great-choice--secondarymessage {
    color: #212121 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

#ab-great-choice .ab-great-choice--message a.ab-great-choice--dismiss {
    position: absolute;
    right: 8px;
    top: 0
}

.error {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px 8px 8px 40px;
    display: block;
    background-color: #fce7e9;
    border: 2px solid #e10f1e;
    color: #212121 !important;
    border-radius: 8px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/error.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left 8px top 8px
}

@media(min-width: 1025px) {
    .error {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

.error .frmLbl {
    display: none
}

.error#divFCRadioError {
    margin-bottom: 16px
}

.error-tooltip#emailError {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px 8px 8px 40px;
    display: none;
    background-color: #fce7e9;
    border: 2px solid #e10f1e;
    color: #212121 !important;
    border-radius: 8px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/error.svg");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 8px top 8px;
    margin-top: 8px
}

    .error-tooltip#emailError.show {
        display: block
    }

@media(min-width: 1025px) {
    .error-tooltip#emailError {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

.df-dropdown__button {
    border: none;
    background: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer
}

    .df-dropdown__button svg {
        pointer-events: none
    }

.df-dropdown__list-container {
    position: absolute;
    z-index: 100003;
    padding-top: 20px
}

    .df-dropdown__list-container:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        top: 10px;
        left: 25px;
        transform: rotate(45deg);
        border: 1px solid #d4d4d4;
        box-shadow: 0 0 4px rgba(0,0,0,.25)
    }

    .df-dropdown__list-container:after {
        content: "";
        width: 0;
        border-bottom: 14px solid #fff;
        border-left: 14px solid rgba(0,0,0,0);
        border-right: 14px solid rgba(0,0,0,0);
        display: block;
        position: absolute;
        top: 7px;
        left: 22px;
        z-index: 100001
    }

.df-dropdown__list {
    position: relative;
    z-index: 100001;
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: .5em;
    box-shadow: 0 0 4px rgba(0,0,0,.25)
}

.df-dropdown__list-item {
    position: relative;
    z-index: 100001
}

    .df-dropdown__list-item .df-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 15px
    }

        .df-dropdown__list-item .df-link:hover, .df-dropdown__list-item .df-link:focus {
            text-decoration: none;
            background-color: #e4e8dc
        }

.df-wideDropdown__button {
    border: none;
    background: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer
}

    .df-wideDropdown__button svg {
        pointer-events: none
    }

.df-wideDropdown__list-container {
    position: absolute;
    z-index: 100002;
    left: 0;
    right: 0;
    padding-top: 35px
}

.df-wideDropdown__list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    z-index: 1;
    list-style-type: none;
    margin: 0;
    padding: 15px 20px;
    background-color: #fff;
    transition: all .4s ease
}

    .df-wideDropdown__list.show {
        transition: all .8s ease;
        opacity: 1;
        height: auto;
        max-height: 3000px;
        animation: headerFadeIn .5s forwards
    }

    .df-wideDropdown__list:not(.show) {
        display: none
    }

@keyframes headerFadeIn {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes headerFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.df-wideDropdown__list-item {
    position: relative;
    z-index: 1
}

    .df-wideDropdown__list-item .df-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 5px;
        background-color: #e4e8dc;
        font-weight: normal;
        border-radius: 4px
    }

        .df-wideDropdown__list-item .df-link:hover, .df-wideDropdown__list-item .df-link:focus {
            text-decoration: none
        }

    .df-wideDropdown__list-item svg {
        width: 28px;
        height: 22px
    }

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    filter: alpha(opacity=0);
    opacity: 0;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 20px !important
}

    .tooltip.in {
        filter: alpha(opacity=100);
        opacity: 1
    }

    .tooltip.top {
        padding: 8px 0;
        margin-top: -3px
    }

        .tooltip.top .tooltip-arrow {
            bottom: 0;
            left: 50%;
            margin-left: -5px;
            border-width: 6px 6px 0;
            border-top-color: #212121
        }

    .tooltip.bottom {
        padding: 8px 0;
        margin-top: 3px
    }

        .tooltip.bottom .tooltip-arrow {
            top: 0;
            left: 50%;
            margin-left: -10px;
            border-width: 0 10px 10px;
            border-bottom-color: #212121
        }

    .tooltip .tooltip-inner {
        max-width: 270px;
        padding: 8px;
        color: #fff;
        text-align: center;
        background-color: #212121;
        border-radius: 4px
    }

        .tooltip .tooltip-inner b {
            font-size: 14px !important;
            line-height: 20px !important
        }

    .tooltip .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: rgba(0,0,0,0);
        border-style: solid
    }

.df-zendesk-custom {
    color-scheme: light;
    position: fixed;
    bottom: 1rem;
    right: 2rem;
    transform: none;
    transform-origin: right bottom;
    border: 0;
    margin-top: 0;
    animation: .2s ease-in .5s 1 normal forwards running ww-8d4fa871-8418-4d4a-b362-8148b3e58e6f-widgetOnLoad;
    z-index: 1001;
    border-radius: 3.125rem
}

    .df-zendesk-custom #conversation-badge {
        background: #0f5a5c;
        color: #fff;
        width: fit-content;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        cursor: pointer;
        align-items: center;
        gap: .5rem;
        font-size: 1.125rem;
        line-height: 1.333;
        padding: .8rem 1.5rem
    }

        .df-zendesk-custom #conversation-badge i {
            margin-right: 0;
            background-color: rgba(0,0,0,0)
        }

    .df-zendesk-custom .svg-icon.df-icon-help {
        width: 24px;
        height: 24px;
        background-image: url("https://static.directferries.co.uk/image/ico/white/help.svg")
    }

    .df-zendesk-custom #unread-indicator {
        font-size: .875rem;
        line-height: 1.14286;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        min-width: 28px;
        height: 28px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -8px;
        right: 0
    }

.svg-icon {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    background-size: auto 24px;
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: contain
}

    .svg-icon[class*=" df-icon-"] {
        position: relative
    }

.bookingConfirmation__summary {
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

    .bookingConfirmation__summary h2 {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 16px !important;
        line-height: 24px !important
    }

.bookingConfirmation__summary--details {
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

    .bookingConfirmation__summary--details .item {
        display: flex;
        flex-direction: row;
        column-gap: 8px;
        align-items: center;
        font-size: 14px !important;
        line-height: 20px !important
    }

@media(min-width: 769px) {
    .bookingConfirmation__summary--details .item {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

.bookingConfirmation__summary--details .item svg {
    height: 24px;
    width: 24px;
    flex-shrink: 0
}

.bookingConfirmation__summary--refs {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    margin-top: 16px
}

    .bookingConfirmation__summary--refs .item {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
        font-size: 16px !important;
        line-height: 24px !important
    }

        .bookingConfirmation__summary--refs .item span {
            display: inline-block;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal
        }

#announcement-banner {
    background-color: #212121;
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 8px;
    width: 100%
}

@media(min-width: 769px) {
    #announcement-banner {
        justify-content: space-between
    }
}

#announcement-banner.visible {
    display: flex
}

#announcement-banner span {
    color: #fff
}

    #announcement-banner span a {
        color: #fff
    }

    #announcement-banner span svg {
        width: 20px;
        fill: #fff
    }

    #announcement-banner span.icon-shout {
        display: none
    }

@media(min-width: 769px) {
    #announcement-banner span.icon-shout {
        display: block
    }
}

#announcement-banner span.icon-cancel {
    cursor: pointer
}

    #announcement-banner span.icon-cancel svg {
        width: 14px
    }

@media(min-width: 769px) {
    #announcement-banner span.icon-cancel svg {
        width: 16px
    }
}

#announcement-banner span.desc {
    font-size: 14px;
    line-height: 20px;
    text-align: center
}

@media(min-width: 769px) {
    #announcement-banner span.desc {
        font-size: 16px
    }
}

.header-wrap {
    background-color: rgba(0,0,0,0)
}

@media(min-width: 769px) {
    .header-wrap {
        background-color: #e4e8dc
    }
}

.header-wrap:has(#customer-details-header), .header-wrap:has(#payment-page-header) {
    background-color: #0f5a5c
}

    .header-wrap:has(#customer-details-header) .header, .header-wrap:has(#payment-page-header) .header {
        color: #fff
    }

.header-wrap:has(#confirmation-header) {
    display: none
}

@media(min-width: 769px) {
    .header-wrap:has(#confirmation-header) {
        display: block
    }
}

.header-wrap .header {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 16px !important;
    line-height: 24px !important;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #fff
}

@media(min-width: 769px) {
    .header-wrap .header {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto
    }
}

@media(min-width: 769px) {
    .header-wrap .header {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media(min-width: 1200px) {
    .header-wrap .header {
        padding-left: 0;
        padding-right: 0
    }
}

@media(min-width: 769px) {
    .header-wrap .header {
        color: #212121
    }
}

#ticket-type-header, #customer-details-header {
    padding: 16px 0;
    font-size: 14px !important;
    line-height: 20px !important;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    color: #fff
}

@media(min-width: 769px) {
    #ticket-type-header, #customer-details-header {
        color: initial;
        font-size: 16px !important;
        line-height: 24px !important
    }
}

@media(min-width: 769px) {
    #ticket-type-header, #customer-details-header {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media(min-width: 1200px) {
    #ticket-type-header, #customer-details-header {
        padding-left: 0;
        padding-right: 0
    }
}

.box .header, .box .headerHlp, .marketing_voucher .header, .marketing_voucher .headerHlp {
    padding: 16px 16px;
    background-color: #0f5a5c;
    color: #fff;
    border-radius: 4px 4px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 16px !important;
    line-height: 24px !important;
    position: relative
}

@media(min-width: 769px) {
    .box .header, .box .headerHlp, .marketing_voucher .header, .marketing_voucher .headerHlp {
        background-color: #e4e8dc;
        color: #212121;
        border-radius: 4px 4px 0 0
    }
}

@media(min-width: 1200px) {
    .box .header, .box .headerHlp, .marketing_voucher .header, .marketing_voucher .headerHlp {
        padding: 16px 0
    }
}

.box .header .hlp a, .box .headerHlp .hlp a, .marketing_voucher .header .hlp a, .marketing_voucher .headerHlp .hlp a {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 4px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/white/help.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px
}

@media(min-width: 769px) {
    .box .header .hlp a, .box .headerHlp .hlp a, .marketing_voucher .header .hlp a, .marketing_voucher .headerHlp .hlp a {
        right: 8px;
        top: 12px
    }
}

#customerDetailsContainer .header, #customerDetailsContainer .headerHlp {
    padding: 8px 8px;
    background-color: #0f5a5c;
    color: #fff
}

@media(min-width: 769px) {
    #customerDetailsContainer .header, #customerDetailsContainer .headerHlp {
        padding: 16px 16px
    }
}

body:has(.paymentSelect) .headerHlp {
    padding: 8px;
    background-color: #0f5a5c;
    color: #fff
}

@media(min-width: 769px) {
    body:has(.paymentSelect) .headerHlp {
        padding: 16px 16px
    }
}

.be_confirmation .ticketHead {
    display: none
}

@media(min-width: 769px) {
    .be_confirmation .ticketHead {
        display: block;
        background-color: #0f5a5c;
        padding: 16px 16px;
        color: #fff;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

        .be_confirmation .ticketHead > div {
            width: 100%;
            max-width: 768px;
            margin: 0 auto
        }
}

@media(min-width: 769px)and (min-width: 769px) {
    .be_confirmation .ticketHead > div {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto
    }
}

.be_confirmation .itinerary .headerTbl {
    background-color: #0f5a5c;
    padding: 16px 16px;
    color: #fff;
    border-radius: 4px
}

    .be_confirmation .itinerary .headerTbl.out, .be_confirmation .itinerary .headerTbl.ret {
        background-position: left 8px top 16px;
        background-repeat: no-repeat;
        background-size: 24px;
        padding: 16px 16px 16px 40px
    }

    .be_confirmation .itinerary .headerTbl.out {
        background-image: url("https://static.directferries.co.uk/image/ico/new/white/outbound.svg")
    }

    .be_confirmation .itinerary .headerTbl.ret {
        background-image: url("https://static.directferries.co.uk/image/ico/new/white/inbound.svg")
    }

@media(min-width: 769px) {
    #MobileDevices .s60 .wrapper .flex-row-32 {
        justify-content: space-evenly
    }
}

@media(min-width: 769px) {
    #MobileDevices .s60 .wrapper .flex-row-32 .flex-col-32 {
        flex-grow: initial
    }
}

@media(min-width: 769px) {
    #MobileDevices .s60 .wrapper .flex-row-32 .flex-grow-1.hide-mob {
        flex-grow: initial
    }
}

#MobileDevices .s60:has(.qr-code) {
    padding-top: 16px
}

#MobileDevices .hide-mob:has(img) {
    align-items: flex-end
}

@media(max-width: 768px) {
    .qr-code {
        display: none !important
    }
}

.qr-code a {
    border: 1px solid #212121;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
    padding: 0 8px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    max-width: 150px;
    margin-bottom: 16px
}

    .qr-code a img {
        max-width: 140px;
        width: 100%
    }

    .qr-code a span {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 14px !important;
        line-height: 20px !important
    }

@media(min-width: 769px) {
    .store-links {
        display: none !important
    }
}

.app-screens img {
    max-height: 225px;
    max-width: 100%
}

@media(min-width: 769px) {
    body#Affiliate .narrow-hero .wrapper .text p.title {
        font-size: 64px
    }
}

.three-col {
    display: grid !important;
    grid-template-columns: 1fr
}

    .three-col::before {
        content: unset !important
    }

@media(min-width: 769px) {
    .three-col {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 1025px) {
    .three-col {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.three-col .sm12 {
    display: none
}

.three-col div:has(.bBox.nsiImg) {
    background-color: #e4e8dc;
    border-radius: 8px;
    padding: 16px
}

    .three-col div:has(.bBox.nsiImg) h2 {
        padding-left: 40px
    }

    .three-col div:has(.bBox.nsiImg) ul li a {
        text-decoration: underline
    }

.student-discount__intro h1 {
    font-size: 24px !important;
    line-height: 32px !important
}

.student-discount__destinations .wrapper {
    display: flex
}

@media(min-width: 769px) {
    .student-discount__destinations .wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr)
    }
}

.student-discount__destinations .wrapper > div {
    order: 1
}

@media(min-width: 769px) {
    .student-discount__destinations .wrapper > div {
        grid-column: 1/3;
        order: unset
    }
}

.student-discount__destinations .wrapper figure {
    order: 0
}

@media(min-width: 769px) {
    .student-discount__destinations .wrapper figure {
        grid-column: 3/4;
        order: unset
    }
}

.student-discount__destinations .wrapper figure img {
    max-width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px
}

.student-discount__faqs .wrapper > div {
    gap: 8px
}

.student-discount__faqs span {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 16px !important;
    line-height: 24px !important
}

.student-discount__faqs p {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 24px !important
}

#ShareShipReview input#btnSubmit {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important;
    margin: 16px 0;
    width: fit-content
}

    #ShareShipReview input#btnSubmit:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    #ShareShipReview input#btnSubmit:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    #ShareShipReview input#btnSubmit:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

#shipReview #reviews form .form-group {
    row-gap: 4px;
    margin-bottom: 24px
}

    #shipReview #reviews form .form-group label.radio-inline {
        display: flex;
        align-items: center;
        padding: 0;
        gap: 4px
    }

#shipReview #reviews form input[type=checkbox], #shipReview #reviews form body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn, #shipReview #reviews form body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn {
    appearance: auto;
    -webkit-appearance: radio;
    padding: 0;
    cursor: pointer;
    min-width: 20px !important;
    height: 20px;
    accent-color: #212121;
    margin-top: 2px;
    order: -1;
    margin-right: 8px
}

    #shipReview #reviews form input[type=checkbox]::after, #shipReview #reviews form body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn::after, #shipReview #reviews form body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn::after {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        top: 0;
        left: 0;
        position: relative;
        background-color: #fff;
        content: "";
        display: inline-block;
        visibility: visible;
        border: 3px solid #212121
    }

    #shipReview #reviews form input[type=checkbox]:checked::after, #shipReview #reviews form body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn:checked::after, #shipReview #reviews form body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container #shipReview #reviews form [type=checkbox]#railBtn:checked::after {
        background-color: rgba(0,0,0,0)
    }

.starSelect {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    margin-bottom: 32px
}

    .starSelect li {
        display: grid;
        grid-template-columns: 200px 1fr
    }

    .starSelect .review_stars.rateit {
        display: -moz-inline-box;
        display: inline-block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .starSelect .review_stars.rateit .rateit-range {
            position: relative;
            display: -moz-inline-box;
            display: inline-block;
            background: url("https://static.directferries.co.uk/image/sprites/stars-rateit.png") 0 -2px;
            height: 16px;
            outline: none
        }

        .starSelect .review_stars.rateit .rateit-selected {
            position: absolute;
            left: 0px;
            background: url("https://static.directferries.co.uk/image/sprites/stars-rateit.png") left -23px
        }

        .starSelect .review_stars.rateit .rateit-hover {
            position: absolute;
            left: 0px;
            background: url("https://static.directferries.co.uk/image/sprites/stars-rateit.png") left -23px
        }

#nps-score {
    display: block
}

    #nps-score #npsQuestion {
        margin-bottom: 16px;
        display: block
    }

    #nps-score br {
        display: none
    }

    #nps-score .nps-score--wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }

        #nps-score .nps-score--wrapper > label {
            display: flex;
            align-items: flex-end;
            gap: 4px
        }

input[type=radio], body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn {
    position: unset;
    appearance: auto;
    -webkit-appearance: radio;
    padding: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    accent-color: #212121
}

    input[type=radio]::after, body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after {
        width: 20px;
        height: 20px;
        border-radius: 24px;
        top: 0;
        left: 0;
        position: relative;
        background-color: #fff;
        content: "";
        display: inline-block;
        visibility: visible;
        border: 2px solid #212121
    }

    input[type=radio]:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after {
        background-color: rgba(0,0,0,0)
    }

.checkbox span {
    padding-left: 8px;
    line-height: 24px
}

body#TermsAndConditions .t_c-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0
}

@media(max-width: 768px) {
    body#TermsAndConditions .t_c-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

body#TermsAndConditions .t_c-table-container table.t_c-payment-table {
    width: 100%;
    border-collapse: collapse;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    min-width: 750px
}

    body#TermsAndConditions .t_c-table-container table.t_c-payment-table th, body#TermsAndConditions .t_c-table-container table.t_c-payment-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #e4e8dc;
        vertical-align: top
    }

    body#TermsAndConditions .t_c-table-container table.t_c-payment-table thead th {
        background-color: #f0f2eb;
        text-align: left;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

    body#TermsAndConditions .t_c-table-container table.t_c-payment-table thead tr:first-child th {
        border-bottom: 2px solid #e4e8dc
    }

        body#TermsAndConditions .t_c-table-container table.t_c-payment-table thead tr:first-child th:first-child {
            text-align: center
        }

    body#TermsAndConditions .t_c-table-container table.t_c-payment-table tbody td a {
        color: #4b5fff;
        text-decoration: underline
    }

body#TermsAndConditions section.header {
    border-bottom: 2px solid #e4e8dc
}

body#TermsAndConditions p {
    margin-bottom: 16px
}

    body#TermsAndConditions p.lead {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

body#TermsAndConditions h2, body#TermsAndConditions h3, body#TermsAndConditions ul {
    margin-bottom: 8px
}

body#TermsAndConditions ul {
    font-size: 16px !important;
    line-height: 24px !important
}

.sms__unsubscribe {
    width: 100%;
    grid-column: 1/all;
    background-color: #fff !important;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin-top: 16px
}

@media(min-width: 769px) {
    .sms__unsubscribe {
        padding: 0;
        margin-top: initial
    }
}

.sms__unsubscribe.box {
    background-color: #fff !important
}

.sms__unsubscribe .sms__unsubscribe-header {
    background-color: #0e5a5c;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 16px !important;
    line-height: 24px !important
}

@media(min-width: 769px) {
    .sms__unsubscribe .sms__unsubscribe-header {
        padding: 16px 16px;
        border-radius: 8px 8px 0 0
    }
}

.sms__unsubscribe .sms__unsubscribe-content {
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

@media(min-width: 769px) {
    .sms__unsubscribe .sms__unsubscribe-content {
        padding: 16px 16px
    }
}

.sms__unsubscribe .sms__unsubscribe-content p {
    font-size: 14px !important;
    line-height: 20px !important
}

@media(min-width: 769px) {
    .sms__unsubscribe .sms__unsubscribe-content p {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

.sms__unsubscribe .sms__unsubscribe-content .frmBox {
    display: flex;
    gap: 8px
}

    .sms__unsubscribe .sms__unsubscribe-content .frmBox select, .sms__unsubscribe .sms__unsubscribe-content .frmBox input[type=tel], .sms__unsubscribe .sms__unsubscribe-content .frmBox body#TrainAndFerryMain #df-dom-deal_finder_container [type=tel]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .sms__unsubscribe .sms__unsubscribe-content .frmBox [type=tel]#railBtn, .sms__unsubscribe .sms__unsubscribe-content .frmBox body#TrainAndFerryInd #df-dom-deal_finder_container [type=tel]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .sms__unsubscribe .sms__unsubscribe-content .frmBox [type=tel]#railBtn {
        display: flex;
        width: 100%;
        min-height: 48px;
        background-color: #eff0f2;
        color: #212121;
        border-radius: 8px !important;
        text-decoration: none;
        padding: 8px 16px !important;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 14px !important;
        line-height: 20px !important;
        align-items: center;
        appearance: none;
        border: 1px solid #212121
    }

    .sms__unsubscribe .sms__unsubscribe-content .frmBox select {
        background-image: url(https://static.directferries.co.uk/image/ico/new/grey/dropdown.svg) !important;
        background-position: calc(100% - 16px) 50%;
        background-repeat: no-repeat;
        background-size: 22px;
        flex: 1
    }

    .sms__unsubscribe .sms__unsubscribe-content .frmBox .tel_wrap {
        flex: 3
    }

.sms__unsubscribe .sms__unsubscribe-content a.sms__unsubscribe-cta {
    background-color: #fc6446;
    color: #fff;
    border: 2px solid #fc6446;
    transition: background-color .3s,color .3s,border-color .3s;
    cursor: pointer;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: initial;
    border-radius: 50px;
    padding: 8px 24px !important;
    min-width: 140px;
    min-height: 40px;
    font-size: 18px !important;
    line-height: 24px !important
}

    .sms__unsubscribe .sms__unsubscribe-content a.sms__unsubscribe-cta:hover {
        background-color: #fca38f !important;
        color: #fff !important;
        border-color: #fca38f !important
    }

    .sms__unsubscribe .sms__unsubscribe-content a.sms__unsubscribe-cta:active {
        background-color: #fb7a5d;
        border-color: #fb7a5d
    }

    .sms__unsubscribe .sms__unsubscribe-content a.sms__unsubscribe-cta:disabled {
        background-color: #e8e8e8;
        color: #a6a6a6;
        border-color: #e8e8e8;
        cursor: not-allowed
    }

@media(min-width: 769px) {
    .sms__unsubscribe .sms__unsubscribe-content a.sms__unsubscribe-cta {
        width: max-content
    }
}

.sms__unsubscribe .sms__unsubscribe-content .sms__unsubscribe-confirm {
    background-color: #ebf3eb;
    border: 2px solid #328639;
    font-size: 14px !important;
    line-height: 20px !important
}

@media(min-width: 769px) {
    .sms__unsubscribe .sms__unsubscribe-content .sms__unsubscribe-confirm {
        padding: 16px 16px !important;
        font-size: 16px !important;
        line-height: 24px !important
    }
}

table.lp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5em;
    padding: 16px 32px
}

@media(min-width: 769px) {
    table.lp-table {
        padding: 16px 16px
    }
}

table.lp-table thead th {
    background-color: #9ebdbf;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 16px !important;
    line-height: 24px !important
}

table.lp-table tbody tr {
    background-color: #e4e8dc
}

    table.lp-table tbody tr td {
        font-family: mundial-light,sans-serif !important;
        font-weight: 300 !important;
        font-style: normal !important;
        font-size: 16px !important;
        line-height: 24px !important;
        padding: 8px 16px
    }

        table.lp-table tbody tr td.row-label {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal
        }

    table.lp-table tbody tr td {
        border-radius: 0 8px 8px 0
    }

    table.lp-table tbody tr th {
        border-radius: 8px 0 0 8px
    }

.lp__price-table {
    display: flex;
    flex-direction: column;
    overflow-x: auto
}

@media(max-width: 768px) {
    .lp__price-table .wrapper {
        width: max-content
    }
}

.lp__price-table .wrapper table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(33,33,33,.25)
}

@media(max-width: 768px) {
    .lp__price-table .wrapper table {
        min-width: 720px;
        overflow-x: auto
    }

        .lp__price-table .wrapper table::-webkit-scrollbar {
            height: 8px
        }

        .lp__price-table .wrapper table::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 4px
        }
}

.lp__price-table .wrapper table td {
    padding: 16px 16px !important;
    word-wrap: break-word;
    border: none !important
}

.lp__price-table .wrapper table th {
    padding: 24px 16px 16px !important;
    text-align: left;
    word-wrap: break-word;
    border: none !important
}

.lp__price-table .wrapper table tbody tr {
    border-top: 1px solid #e4e8dc;
    border-bottom: 1px solid #e4e8dc
}

    .lp__price-table .wrapper table tbody tr:nth-child(even) {
        background: #fafaf7
    }

    .lp__price-table .wrapper table tbody tr:hover {
        background: #f0f2eb
    }

.lp__price-table .wrapper:has(figure:nth-of-type(2)) figure:first-of-type table:first-of-type {
    border-collapse: collapse;
    border-spacing: 0 8px;
    width: 100%;
    max-width: 400px;
    font-family: inherit;
    display: table;
    min-width: unset
}

    .lp__price-table .wrapper:has(figure:nth-of-type(2)) figure:first-of-type table:first-of-type th {
        text-align: left;
        padding: 16px 16px 16px !important
    }

        .lp__price-table .wrapper:has(figure:nth-of-type(2)) figure:first-of-type table:first-of-type th:last-of-type {
            text-align: right
        }

    .lp__price-table .wrapper:has(figure:nth-of-type(2)) figure:first-of-type table:first-of-type td {
        background: #fff;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: .75rem 1rem;
        border-radius: 8px
    }

        .lp__price-table .wrapper:has(figure:nth-of-type(2)) figure:first-of-type table:first-of-type td:last-child {
            text-align: right
        }

.lp__price-table .wrapper:has(figure:nth-of-type(2)) p.fare-summary__note {
    font-size: 12px !important;
    line-height: 16px !important;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

@media(min-width: 769px) {
    .lp__price-table .wrapper:has(figure:nth-of-type(2)) p.fare-summary__note {
        margin-top: -24px
    }
}

.lp__price-table .wrapper figure.table {
    margin: 0
}

section.trustpilot .wrapper h2 {
    text-align: center
}

.tp-wrapper-desktop {
    display: none
}

@media(min-width: 769px) {
    .tp-wrapper-desktop {
        display: block
    }

        .tp-wrapper-desktop .trustpilot-widget {
            max-width: 1168px;
            margin: 0 auto
        }

            .tp-wrapper-desktop .trustpilot-widget iframe {
                max-width: 600px;
                border-radius: 4px;
                margin: 0 auto
            }
}

.tp-wrapper-mobile .trustpilot-widget {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: flex-start;
    margin-top: 48px;
    margin-left: -16px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

@media(min-width: 769px) {
    .tp-wrapper-mobile {
        display: none
    }
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]), body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]), body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea {
    background-color: #eff0f2 !important;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    border: 1px solid #212121 !important;
    text-rendering: geometricPrecision;
    transition: border .3s ease;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

    input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill, textarea:-webkit-autofill {
        background-color: #eff0f2 !important;
        border: 1px solid #212121;
        box-shadow: 0 0 0px 1000px #eff0f2 inset !important
    }

    input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder, textarea::placeholder {
        color: #212121;
        text-rendering: geometricPrecision
    }

    input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, textarea:focus {
        outline: none
    }

textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 80px;
    max-height: 400px
}

.select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px
}

label, select {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

select {
    background-color: #eff0f2;
    border-radius: 8px;
    border: none;
    padding: 8px 16px;
    width: 100%;
    appearance: none;
    height: 48px;
    line-height: 1.2;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/dropdown.svg") !important;
    background-position: calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 22px
}

    select::placeholder {
        color: #212121;
        text-align: center;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

.passenger input[id*=Wheelchair], .passenger body#TrainAndFerryMain #df-dom-deal_finder_container [id*=Wheelchair]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .passenger [id*=Wheelchair]#railBtn, .passenger body#TrainAndFerryInd #df-dom-deal_finder_container [id*=Wheelchair]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .passenger [id*=Wheelchair]#railBtn {
    margin-left: 8px
}

.form-group label#reccomendText {
    margin-bottom: 16px
}

.form-group label.radio-inline {
    padding: 8px 0 8px 24px;
    position: relative;
    line-height: inherit;
    cursor: pointer;
    position: relative;
    margin-right: 8px
}

    .form-group label.radio-inline:has(input[type=checkbox],body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn,body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn) {
        padding: 8px 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer
    }

.form-group div:has(.radio-inline) {
    flex-direction: row
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

    *:focus-visible {
        outline: 3px solid #4b5fff !important;
        outline-offset: 0
    }

    *:focus {
        outline: none
    }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

body, html {
    font-family: mundial,sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #212121;
    text-rendering: geometricPrecision;
    background-color: #0f5a5c
}

@media(min-width: 769px) {
    body, html {
        background-color: #fff
    }
}

a {
    color: #212121
}

img {
    display: block
}

button {
    text-rendering: geometricPrecision
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    width: 100%;
    padding: 0 16px
}

ul.bullets {
    padding-left: 20px
}

    ul.bullets li {
        list-style-type: disc
    }

section.default {
    padding: 32px 0
}

@media(min-width: 769px) {
    section.default {
        padding: 48px 0
    }
}

section.default.tp {
    padding: 16px 16px
}

    section.default.tp:has(.tp-micro-wrap) {
        min-height: 52px
    }

section.default > .wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.default > .wrapper {
        gap: 32px
    }
}

section.default > .wrapper h1 {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 24px
}

@media(min-width: 769px) {
    section.default > .wrapper h1 {
        font-size: 32px
    }
}

section.default > .wrapper p.section-title, section.default > .wrapper h2 {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 20px
}

@media(min-width: 769px) {
    section.default > .wrapper p.section-title, section.default > .wrapper h2 {
        font-size: 24px
    }
}

section.default > .wrapper p.section-title em, section.default > .wrapper h2 em {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic
}

.s {
    background-color: #e4e8dc
}

.s20 {
    background-color: #fafaf7
}

.s40 {
    background-color: #f5f5f2
}

.s60 {
    background-color: #f0f2eb
}

.t {
    background-color: #0f5a5c
}

.t2 {
    background-color: #5a6c78
}

.p {
    background-color: #fc6446
}

.t10 {
    background-color: #e8edf0
}

.g10 {
    background-color: #e8e8e8
}

.g20 {
    background-color: #d4d4d4
}

.w {
    background-color: #fff
}

small {
    font-size: 12px;
    line-height: 16px;
    color: #212121;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

p a {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    text-decoration: underline
}

p small {
    font-size: 12px;
    line-height: 16px;
    color: #212121;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

p.lead {
    font-size: 20px;
    line-height: 32px
}

p b {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

hr {
    border: none;
    height: 2px;
    background-color: #0f5a5c
}

.text-center {
    text-align: center
}

@media(max-width: 768px) {
    .text-center-mob {
        text-align: center
    }
}

.align-center {
    align-self: center
}

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

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

@media(max-width: 768px) {
    .align-center-mob {
        align-self: center !important
    }
}

.align-start {
    align-self: start
}

.col-w {
    color: #fff
}

.mix-multiply {
    mix-blend-mode: multiply
}

.pad-8 {
    padding: 8px
}

.pad-16 {
    padding: 16px
}

.pad-32 {
    padding: 32px
}

@media(max-width: 768px) {
    .pad-8-mob {
        padding: 8px !important
    }
}

@media(max-width: 768px) {
    .pad-16-mob {
        padding: 16px !important
    }
}

@media(max-width: 768px) {
    .pad-32-mob {
        padding: 32px !important
    }
}

@media(min-width: 769px) {
    .pad-8-med {
        padding: 8px !important
    }
}

@media(min-width: 769px) {
    .pad-16-med {
        padding: 16px !important
    }
}

@media(min-width: 769px) {
    .pad-32-med {
        padding: 32px !important
    }
}

@media(min-width: 1025px) {
    .pad-32-lg {
        padding: 32px !important
    }
}

@media(min-width: 1025px) {
    .pad-8-lg {
        padding: 8px !important
    }
}

@media(min-width: 1025px) {
    .pad-16-lg {
        padding: 16px !important
    }
}

@media(max-width: 768px) {
    .hide-mob {
        display: none !important
    }
}

.shadow {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

.br-8 {
    border-radius: 8px
}

.oh {
    overflow: hidden
}

.mb-16 {
    margin-bottom: 16px;
    display: block
}

.flex {
    display: flex
}

.flex-grow-1 {
    flex-grow: 1
}

.flex-col-8 {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.flex-col-16 {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.flex-col-32 {
    display: flex;
    flex-direction: column;
    gap: 32px
}

@media(max-width: 768px) {
    .flex-col-8-mob {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important
    }
}

@media(max-width: 768px) {
    .flex-col-16-mob {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important
    }
}

@media(max-width: 768px) {
    .flex-col-32-mob {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important
    }
}

.flex-grid {
    display: grid
}

.grid-1col {
    grid-template-columns: 1fr
}

.grid-2col {
    grid-template-columns: 1fr 1fr
}

.grid-3col {
    grid-template-columns: 1fr 1fr 1fr
}

.grid-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

@media(max-width: 768px) {
    .grid-1col-mob {
        grid-template-columns: 1fr
    }
}

@media(min-width: 769px) {
    .grid-2col-md {
        grid-template-columns: 1fr 1fr
    }

    .grid-3col-md {
        grid-template-columns: 1fr 1fr 1fr
    }

    .grid-4col-md {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media(min-width: 1025px) {
    .grid-2col-lg {
        grid-template-columns: 1fr 1fr
    }

    .grid-3col-lg {
        grid-template-columns: 1fr 1fr 1fr
    }

    .grid-4col-lg {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

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

.justify-center {
    justify-content: center
}

@media(max-width: 768px) {
    .justify-center-mob {
        justify-content: center
    }
}

.flex-row {
    display: flex;
    flex-direction: row
}

.demi {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

.font14 {
    font-size: 14px;
    line-height: 20px
}

.font20 {
    font-size: 20px;
    line-height: 32px
}

.mw-100 {
    max-width: 100%
}

.flex-wrap {
    flex-wrap: wrap
}

.full-width {
    width: 100%
}

.gap16 {
    gap: 16px
}

.gap32 {
    gap: 32px
}

@media(min-width: 769px) {
    .flex-row-32-desktop {
        display: flex;
        flex-direction: row;
        gap: 32px
    }
}

@media(min-width: 769px) {
    .flex-row-16-desktop {
        display: flex;
        flex-direction: row;
        gap: 16px
    }
}

.flex-row-32 {
    display: flex;
    flex-direction: row;
    gap: 32px
}

.f1 {
    flex: 1
}

.flex-row-16 {
    display: flex;
    flex-direction: row;
    gap: 16px
}

@media(min-width: 769px) {
    .max-w-50 {
        max-width: 50%
    }
}

.glide {
    position: relative;
    width: 100%;
    box-sizing: border-box
}

    .glide * {
        box-sizing: inherit
    }

.glide__track {
    overflow: hidden
}

.glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    overflow: hidden;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform
}

.glide__slides--dragging {
    user-select: none
}

.glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

    .glide__slide a {
        user-select: none;
        -webkit-user-drag: none;
        -moz-user-select: none;
        -ms-user-select: none
    }

.glide__arrows {
    -webkit-touch-callout: none;
    user-select: none
}

.glide__bullets {
    -webkit-touch-callout: none;
    user-select: none
}

.glide--rtl {
    direction: rtl
}

.glide__bullets {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap
}

    .glide__bullets .glide__bullet {
        width: 12px;
        height: 12px;
        border-radius: 100px;
        background-color: #d4d4d4
    }

        .glide__bullets .glide__bullet.glide__bullet--active {
            background-color: #7a7a7a
        }

ul.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    row-gap: 10px
}

    ul.breadcrumb li:not(:last-of-type):after {
        content: "/";
        padding: 0 16px
    }

@media(hover: hover)and (pointer: fine) {
    ul.breadcrumb li a:hover {
        text-decoration: underline
    }
}

ul.breadcrumb li:last-of-type span {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic
}

.blog-breadcrumb {
    color: #fff;
    background: #0f5a5c;
    padding: 16px 0
}

    .blog-breadcrumb a {
        color: #fff;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

header#site-nav {
    background: #e8e8e8;
    padding: 20px;
    text-align: center;
    display: flex
}

@media(min-width: 769px) {
    header#site-nav {
        height: 90px
    }
}

header#site-nav .wrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

.operator-card-a {
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    grid-row-gap: 8px;
    justify-content: center;
    flex-grow: 1
}

@media(min-width: 426px) {
    .operator-card-a {
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-template-areas: "logo dates" "operator duration" "getPrice getPrice"
    }
}

@media(min-width: 769px) {
    .operator-card-a {
        grid-template-columns: 1fr 2fr max-content;
        grid-template-areas: "logo dates getPrice" "operator duration getPrice"
    }
}

@media(min-width: 1025px) {
    .operator-card-a {
        grid-template-columns: .7fr 1fr .7fr 1.5fr max-content;
        justify-content: start;
        grid-template-areas: "logo operator dates duration getPrice";
        gap: 16px
    }
}

.operator-card-a.shadow {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

.operator-card-a.border-t {
    border: 1px solid #0f5a5c
}

.operator-card-a.border-g {
    border: 1px solid #212121
}

.operator-card-a > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap
}

@media(min-width: 374px) {
    .operator-card-a > * {
        justify-content: flex-start
    }
}

@media(min-width: 769px) {
    .operator-card-a > * {
        flex-wrap: nowrap;
        gap: 8px
    }
}

.operator-card-a svg {
    width: 24px;
    flex-shrink: 0
}

    .operator-card-a svg path {
        fill: #212121
    }

.operator-card-a a.dates, .operator-card-a a.operator {
    text-decoration: underline
}

.operator-card-a .logo {
    grid-area: logo;
    align-self: center
}

@media(min-width: 769px) {
    .operator-card-a .logo {
        align-self: unset
    }
}

.operator-card-a .logo img {
    max-width: 100px;
    max-height: 55px
}

.operator-card-a .operator {
    grid-area: operator
}

.operator-card-a .dates {
    grid-area: dates
}

    .operator-card-a .dates span span {
        font-weight: bold
    }

.operator-card-a .duration {
    grid-area: duration
}

    .operator-card-a .duration span span {
        font-weight: bold
    }

.operator-card-a .submit-btn {
    grid-area: getPrice;
    justify-content: center;
    margin-top: 20px;
    border-top: 4px dotted #e4e8dc;
    padding-top: 16px
}

@media(min-width: 374px) {
    .operator-card-a .submit-btn {
        justify-content: flex-end
    }
}

@media(min-width: 769px) {
    .operator-card-a .submit-btn {
        margin-top: 0;
        border-top: none;
        padding-top: 0
    }
}

.operator-card-b {
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    grid-row-gap: 8px;
    justify-content: center;
    flex-grow: 1
}

@media(min-width: 374px) {
    .operator-card-b {
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-template-areas: "logo operator" "logo dates" "getPrice getPrice"
    }
}

@media(min-width: 769px) {
    .operator-card-b {
        grid-template-columns: 1fr 2fr max-content;
        grid-template-areas: "logo operator getPrice" "logo dates getPrice"
    }
}

@media(min-width: 1025px) {
    .operator-card-b {
        grid-template-columns: 1fr 1fr 3fr max-content;
        justify-content: start;
        grid-template-areas: "logo operator dates getPrice";
        gap: 16px
    }
}

.operator-card-b.shadow {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

.operator-card-b.border-t {
    border: 1px solid #0f5a5c
}

.operator-card-b.border-g {
    border: 1px solid #212121
}

.operator-card-b > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px
}

@media(min-width: 374px) {
    .operator-card-b > * {
        justify-content: flex-start
    }
}

.operator-card-b svg {
    width: 24px;
    flex-shrink: 0
}

    .operator-card-b svg path {
        fill: #212121
    }

.operator-card-b a.dates, .operator-card-b a.operator {
    text-decoration: underline
}

.operator-card-b .logo {
    grid-area: logo;
    width: 120px;
    align-self: center
}

@media(min-width: 769px) {
    .operator-card-b .logo {
        align-self: unset
    }
}

.operator-card-b .logo img {
    max-width: 120px;
    max-height: 55px
}

.operator-card-b .operator {
    grid-area: operator
}

.operator-card-b .dates {
    grid-area: dates
}

.operator-card-b .submit-btn {
    grid-area: getPrice;
    justify-content: center;
    margin-top: 20px;
    border-top: 4px dotted #e4e8dc;
    padding-top: 16px
}

@media(min-width: 374px) {
    .operator-card-b .submit-btn {
        justify-content: flex-end
    }
}

@media(min-width: 769px) {
    .operator-card-b .submit-btn {
        margin-top: 0;
        border-top: none;
        padding-top: 0
    }
}

.operator-card-c {
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    grid-row-gap: 8px;
    justify-content: center;
    flex-grow: 1
}

@media(min-width: 374px) {
    .operator-card-c {
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-template-areas: "operator dates" "operator duration" "getPrice getPrice"
    }
}

@media(min-width: 769px) {
    .operator-card-c {
        grid-template-columns: 1fr 1fr 1fr max-content;
        grid-template-areas: "operator dates duration getPrice"
    }
}

@media(min-width: 1025px) {
    .operator-card-c {
        grid-template-columns: 1fr 1fr 3fr max-content;
        justify-content: start;
        grid-template-areas: "operator dates duration getPrice";
        gap: 16px
    }
}

.operator-card-c.shadow {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

.operator-card-c.border-t {
    border: 1px solid #0f5a5c
}

.operator-card-c.border-g {
    border: 1px solid #212121
}

.operator-card-c > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px
}

@media(min-width: 374px) {
    .operator-card-c > * {
        justify-content: flex-start
    }
}

.operator-card-c svg {
    width: 24px;
    flex-shrink: 0
}

    .operator-card-c svg path {
        fill: #212121
    }

.operator-card-c a.dates, .operator-card-c a.operator {
    text-decoration: underline
}

.operator-card-c .operator {
    grid-area: operator
}

.operator-card-c .dates {
    grid-area: dates
}

    .operator-card-c .dates span span {
        font-weight: bold
    }

.operator-card-c .duration {
    grid-area: duration
}

    .operator-card-c .duration span span {
        font-weight: bold
    }

.operator-card-c .submit-btn {
    grid-area: getPrice;
    justify-content: center;
    margin-top: 20px;
    border-top: 4px dotted #e4e8dc;
    padding-top: 16px
}

@media(min-width: 374px) {
    .operator-card-c .submit-btn {
        justify-content: flex-end
    }
}

@media(min-width: 769px) {
    .operator-card-c .submit-btn {
        margin-top: 0;
        border-top: none;
        padding-top: 0
    }
}

.operator-card-d {
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    grid-row-gap: 8px;
    justify-content: center;
    flex-grow: 1
}

@media(min-width: 374px) {
    .operator-card-d {
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-template-areas: "route route" "dates duration" "getPrice getPrice"
    }
}

@media(min-width: 769px) {
    .operator-card-d {
        grid-template-columns: 1fr 1fr 1fr max-content;
        grid-template-areas: "route route route" "dates duration getPrice"
    }
}

@media(min-width: 1025px) {
    .operator-card-d {
        grid-template-columns: 1fr 1fr 2fr max-content;
        justify-content: start;
        grid-template-areas: "route dates duration getPrice";
        gap: 16px
    }
}

.operator-card-d.shadow {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

.operator-card-d.border-t {
    border: 1px solid #0f5a5c
}

.operator-card-d.border-g {
    border: 1px solid #212121
}

.operator-card-d > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px
}

@media(min-width: 374px) {
    .operator-card-d > * {
        justify-content: flex-start
    }
}

.operator-card-d svg {
    width: 24px;
    flex-shrink: 0
}

    .operator-card-d svg path {
        fill: #212121
    }

.operator-card-d .route {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    grid-area: route;
    display: block
}

@media(hover: hover)and (pointer: fine) {
    .operator-card-d .route a:hover {
        text-decoration: underline
    }
}

.operator-card-d .dates {
    grid-area: dates
}

    .operator-card-d .dates span {
        line-height: 20px
    }

.operator-card-d .duration {
    grid-area: duration
}

.operator-card-d .submit-btn {
    grid-area: getPrice;
    justify-content: center;
    margin-top: 20px;
    border-top: 4px dotted #e4e8dc;
    padding-top: 16px
}

@media(min-width: 374px) {
    .operator-card-d .submit-btn {
        justify-content: flex-end
    }
}

@media(min-width: 769px) {
    .operator-card-d .submit-btn {
        margin-top: 0;
        border-top: none;
        padding-top: 0
    }
}

li.offer-card {
    display: flex;
    flex-direction: column;
    box-shadow: none;
    height: auto
}

@media(hover: hover)and (pointer: fine) {
    li.offer-card:hover {
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
    }

        li.offer-card:hover > a {
            background-color: #d4d4d4 !important
        }

        li.offer-card:hover .image img {
            transform: scale(1.2)
        }
}

li.offer-card > a {
    transition: background-color .3s ease;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    height: 100%;
    background-color: #fff;
    z-index: 1
}

    li.offer-card > a:focus {
        outline-offset: -3px
    }

li.offer-card .image {
    aspect-ratio: 8/3;
    width: 100%;
    overflow: hidden;
    height: auto;
    position: relative;
    z-index: -1
}

    li.offer-card .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    li.offer-card .image img {
        transition: transform .3s ease;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

li.offer-card .details {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

    li.offer-card .details span.flag {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

        li.offer-card .details span.flag svg path {
            fill: #212121
        }

.chevron-card {
    display: flex;
    flex-direction: row;
    gap: 0;
    text-align: left;
    height: 120px;
    position: relative
}

@media(min-width: 426px) {
    .chevron-card {
        flex-direction: column;
        height: unset;
        justify-content: space-between
    }
}

.chevron-card .text {
    padding: 8px 12px;
    width: 100%;
    flex: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}

@media(min-width: 426px) {
    .chevron-card .text {
        flex-grow: 1;
        padding: 16px
    }
}

@media(min-width: 769px) {
    .chevron-card .text {
        padding: 24px 24px 16px 24px
    }
}

.chevron-card .text h3 {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 1.2
}

.chevron-card .text p {
    font-size: 18px;
    line-height: 1.2
}

@media(min-width: 426px) {
    .chevron-card .text p {
        font-size: 20px
    }
}

@media(min-width: 769px) {
    .chevron-card .text p {
        font-size: 24px
    }
}

.chevron-card .image {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0
}

    .chevron-card .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.3);
        position: absolute;
        inset: 0
    }

    .chevron-card .image img {
        filter: saturate(1);
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        object-fit: cover
    }

.chevron-card svg.chevron-negative-down {
    z-index: 1;
    display: none
}

@media(min-width: 426px) {
    .chevron-card svg.chevron-negative-down {
        display: block;
        transform: scale(1.05);
        transform-origin: center top
    }
}

.chevron-card svg.chevron-negative-right {
    z-index: 1;
    transform: scale(1.05);
    transform-origin: left;
    height: 100%
}

@media(min-width: 426px) {
    .chevron-card svg.chevron-negative-right {
        display: none
    }
}

.chevron-card.tertiary {
    color: #fff;
    background-color: #0f5a5c
}

.chevron-card.primary {
    color: #fff;
    background-color: #fc6446
}

.chevron-card.grey {
    color: #fff;
    background-color: #5a6c78
}

.chevron-card.secondary {
    background-color: #e4e8dc
}

@media(min-width: 769px) {
    section.why-df-cards {
        padding: 64px 0
    }
}

section.why-df-cards p.section-title {
    text-align: center
}

section.why-df-cards .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 426px) {
    section.why-df-cards .cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 769px) {
    section.why-df-cards .cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px
    }
}

section.why-df-cards svg.chevron-negative-down path, section.why-df-cards svg.chevron-negative-right path {
    fill: #fafaf7
}

section.why-df-cards.s20 svg.chevron-negative-down path, section.why-df-cards.s20 svg.chevron-negative-right path {
    fill: #fafaf7
}

section.why-df-cards.s40 svg.chevron-negative-down path, section.why-df-cards.s40 svg.chevron-negative-right path {
    fill: #f5f5f2
}

section.why-df-cards.s60 svg.chevron-negative-down path, section.why-df-cards.s60 svg.chevron-negative-right path {
    fill: #f0f2eb
}

section.why-df-cards.t svg.chevron-negative-down path, section.why-df-cards.t svg.chevron-negative-right path {
    fill: #0f5a5c
}

section.why-df-cards.t2 svg.chevron-negative-down path, section.why-df-cards.t2 svg.chevron-negative-right path {
    fill: #5a6c78
}

section.why-df-cards.p svg.chevron-negative-down path, section.why-df-cards.p svg.chevron-negative-right path {
    fill: #fc6446
}

section.why-df-cards.t10 svg.chevron-negative-down path, section.why-df-cards.t10 svg.chevron-negative-right path {
    fill: #e8edf0
}

section.why-df-cards.g10 svg.chevron-negative-down path, section.why-df-cards.g10 svg.chevron-negative-right path {
    fill: #e8e8e8
}

section.why-df-cards.w svg.chevron-negative-down path, section.why-df-cards.w svg.chevron-negative-right path {
    fill: #fff
}

@media(hover: hover)and (pointer: fine) {
    .faq-item:not(.open):hover .question {
        filter: brightness(90%)
    }
}

.faq-item:not(.open) .question {
    border-radius: 4px
}

.faq-item.open .question {
    filter: brightness(90%);
    border-radius: 4px 4px 0 0
}

    .faq-item.open .question .arrow {
        rotate: -90deg
    }

.faq-item.open .answer {
    border-radius: 0 0 4px 4px;
    border: 1px solid #0f5a5c;
    border-top: rgba(0,0,0,0)
}

.faq-item .answerList ul {
    padding: 8px 32px !important
}

.faq-item .answerList li {
    list-style-type: disc;
    padding: 4px 0
}

.faq-item .question {
    display: flex;
    flex-direction: row;
    background-color: #cfdede;
    border: 1px solid #0f5a5c;
    align-items: center;
    cursor: pointer;
    gap: 16px;
    transition: border-radius .3s ease,filter .3s ease;
    overflow: hidden
}

    .faq-item .question .icon {
        background-color: #0f5a5c;
        padding: 16px;
        display: flex;
        align-items: center;
        align-self: stretch
    }

        .faq-item .question .icon svg {
            width: 24px;
            height: 24px
        }

            .faq-item .question .icon svg path {
                fill: #fff
            }

    .faq-item .question .text {
        padding: 16px 0
    }

        .faq-item .question .text h2 {
            font-size: 16px;
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal
        }

    .faq-item .question .arrow {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding: 16px;
        transition: rotate .3s ease;
        rotate: 90deg
    }

        .faq-item .question .arrow svg {
            width: 24px;
            height: 24px
        }

            .faq-item .question .arrow svg path {
                fill: #212121
            }

.faq-item .answer {
    height: 0;
    overflow: hidden;
    background: #fafaf7;
    transition: height .3s ease,border .3s ease;
    border: 1px solid rgba(0,0,0,0)
}

    .faq-item .answer > div {
        padding: 16px
    }

section.reviews .review-overview {
    border-radius: 8px;
    background-color: #0f5a5c;
    color: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

    section.reviews .review-overview .snapshot {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

        section.reviews .review-overview .snapshot p {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            line-height: 1
        }

        section.reviews .review-overview .snapshot .total {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center
        }

            section.reviews .review-overview .snapshot .total span {
                font-family: mundial-demibold,sans-serif !important;
                font-weight: 600;
                font-style: normal;
                font-size: 40px;
                margin-top: -6px
            }

            section.reviews .review-overview .snapshot .total > div {
                display: flex;
                flex-direction: column;
                gap: 4px;
                align-items: center
            }

                section.reviews .review-overview .snapshot .total > div .star-rating path {
                    fill: #fff
                }

                    section.reviews .review-overview .snapshot .total > div .star-rating path:not(.half) {
                        stroke: #fff
                    }

    section.reviews .review-overview ul li {
        background-color: #fff;
        border-radius: 4px;
        color: #212121;
        padding: 8px 16px;
        font-family: mundial-light,sans-serif !important;
        font-weight: 300 !important;
        font-style: normal !important
    }

        section.reviews .review-overview ul li span {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal
        }

li.review-item {
    border-bottom: 1px solid #0f5a5c;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color .3s ease;
    padding: 16px 0
}

    li.review-item.open .overview .arrow svg {
        rotate: -90deg
    }

    li.review-item .overview {
        display: flex;
        flex-direction: row;
        cursor: pointer
    }

        li.review-item .overview .title {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

            li.review-item .overview .title .quote p {
                font-family: mundial-demibold,sans-serif !important;
                font-weight: 600;
                font-style: normal;
                font-size: 20px
            }

        li.review-item .overview .arrow {
            margin-left: auto
        }

            li.review-item .overview .arrow svg {
                transition: rotate .3s ease;
                width: 20px;
                rotate: 90deg
            }

    li.review-item .text {
        height: 0;
        overflow: hidden;
        transition: height .3s ease;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

        li.review-item .text ul.starSelect {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 16px;
            max-width: 400px;
            background-color: #e4e8dc;
            border-radius: 8px
        }

            li.review-item .text ul.starSelect li {
                display: flex;
                flex-direction: row;
                gap: 16px;
                justify-content: space-between
            }

.star-rating > div {
    display: none
}

.star-rating svg {
    width: 80px
}

.star-rating.half div.half {
    display: block
}

.star-rating.one div.one {
    display: block
}

.star-rating.one-half div.one-half {
    display: block
}

.star-rating.two div.two {
    display: block
}

.star-rating.two-half div.two-half {
    display: block
}

.star-rating.three div.three {
    display: block
}

.star-rating.three-half div.three-half {
    display: block
}

.star-rating.four div.four {
    display: block
}

.star-rating.four-half div.four-half {
    display: block
}

.star-rating.five div.five {
    display: block
}

section.route-summary-table {
    color: #fff
}

    section.route-summary-table p.section-title em {
        display: block
    }

    section.route-summary-table .route-table {
        width: 100%;
        border-collapse: collapse
    }

        section.route-summary-table .route-table thead {
            font-size: 24px;
            text-align: left
        }

            section.route-summary-table .route-table thead em {
                font-family: rocky,serif;
                font-weight: 400;
                font-style: italic
            }

            section.route-summary-table .route-table thead th {
                padding-bottom: 32px
            }

@media(min-width: 769px) {
    section.route-summary-table .route-table tbody {
        grid-template-columns: repeat(2, 1fr);
        display: grid
    }
}

section.route-summary-table .route-table tbody tr {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #fff
}

    section.route-summary-table .route-table tbody tr td {
        padding: 16px 0;
        width: 100%
    }

@media(min-width: 769px) {
    section.route-summary-table .route-table tbody tr td {
        padding: 8px
    }
}

section.route-summary-table .route-table tbody td:nth-of-type(1) {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

section.route-summary-table.t .route-table tbody td {
    color: #fff !important
}

section.ferry-timetable {
    color: #fff
}

    section.ferry-timetable .details {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

@media(min-width: 769px) {
    section.ferry-timetable .details {
        gap: 16px
    }
}

section.ferry-timetable .details p.section-title em {
    display: block
}

section.ferry-timetable .details p:not(.title) {
    font-family: mundial,sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important
}

section.ferry-timetable table.timetable {
    width: 100%;
    border-collapse: collapse
}

    section.ferry-timetable table.timetable thead {
        text-align: left;
        display: none
    }

@media(min-width: 769px) {
    section.ferry-timetable table.timetable thead {
        display: table-header-group
    }
}

section.ferry-timetable table.timetable thead th, section.ferry-timetable table.timetable tbody td {
    padding: 8px 0
}

@media(min-width: 769px) {
    section.ferry-timetable table.timetable thead th, section.ferry-timetable table.timetable tbody td {
        padding: 16px;
        border-bottom: 1px solid #fff;
        flex: 1
    }
}

section.ferry-timetable table.timetable thead tr, section.ferry-timetable table.timetable tbody tr {
    display: flex;
    flex-direction: column
}

@media(min-width: 769px) {
    section.ferry-timetable table.timetable thead tr, section.ferry-timetable table.timetable tbody tr {
        flex-direction: row
    }
}

section.ferry-timetable table.timetable tbody td {
    flex-shrink: 0;
    text-align: right
}

@media(min-width: 769px) {
    section.ferry-timetable table.timetable tbody td {
        text-align: left
    }
}

section.ferry-timetable table.timetable tbody td:before {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    content: attr(data-label);
    width: 50%;
    display: inline-block;
    float: left;
    text-align: left
}

@media(min-width: 769px) {
    section.ferry-timetable table.timetable tbody td:before {
        display: none
    }
}

section.ferry-timetable table.timetable tbody tr:not(:last-of-type) {
    padding-bottom: 32px
}

@media(min-width: 769px) {
    section.ferry-timetable table.timetable tbody tr:not(:last-of-type) {
        padding-bottom: 0
    }
}

section.onboard .ferry-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 426px) {
    section.onboard .ferry-cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 769px) {
    section.onboard .ferry-cards {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media(hover: hover)and (pointer: fine) {
    .ferry-card:hover .image {
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
    }

        .ferry-card:hover .image img {
            transform: scale(1.2)
        }

    .ferry-card:hover p {
        text-decoration: underline
    }
}

.ferry-card a {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ferry-card .image {
    aspect-ratio: 11/9;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    width: 100%
}

    .ferry-card .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    .ferry-card .image img {
        transition: transform .3s ease;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ferry-card p {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

section.download-app-banner {
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    section.download-app-banner {
        padding: 64px 0
    }
}

section.download-app-banner .new-banner {
    display: flex;
    flex-direction: column
}

@media(min-width: 769px) {
    section.download-app-banner .new-banner {
        flex-direction: row;
        border-radius: 8px;
        overflow: hidden
    }
}

section.download-app-banner .text, section.download-app-banner .image {
    flex: 1
}

section.download-app-banner .text {
    padding: 32px
}

@media(min-width: 769px) {
    section.download-app-banner .text {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 32px;
        justify-content: center
    }
}

section.download-app-banner .text .logo {
    display: none;
    width: 200px
}

@media(min-width: 769px) {
    section.download-app-banner .text .logo {
        display: block
    }
}

section.download-app-banner .text .logo svg {
    width: 100%
}

section.download-app-banner .text .main-title, section.download-app-banner .text .secondary-text {
    line-height: 1
}

section.download-app-banner .text .main-title {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    padding: 0 8px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    section.download-app-banner .text .main-title {
        text-align: left;
        font-size: 32px;
        padding: 0;
        max-width: 90%
    }
}

section.download-app-banner .text .secondary-text {
    display: none
}

@media(min-width: 769px) {
    section.download-app-banner .text .secondary-text {
        font-family: rocky,serif !important;
        font-weight: 700;
        font-style: italic;
        display: block;
        font-size: 40px
    }
}

section.download-app-banner .image {
    position: relative;
    aspect-ratio: 4/2;
    width: 100%
}

    section.download-app-banner .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    section.download-app-banner .image img {
        width: 100%;
        object-fit: cover;
        object-position: top
    }

@media(min-width: 769px) {
    section.download-app-banner .image img {
        height: 100%
    }
}

section.download-app-banner .image a.secondary {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1
}

@media(min-width: 769px) {
    section.download-app-banner .image a.secondary {
        display: none
    }
}

section.download-app-banner .image .chevron-right {
    display: none
}

@media(min-width: 769px) {
    section.download-app-banner .image .chevron-right {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1
    }
}

section.download-app-banner .image .chevron-down {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1
}

@media(min-width: 769px) {
    section.download-app-banner .image .chevron-down {
        display: none
    }
}

section.download-app-banner .image .secondary-text {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 34px;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 100px;
    left: 0;
    z-index: 1;
    width: 100%
}

@media(min-width: 769px) {
    section.download-app-banner .image .secondary-text {
        display: none
    }
}

section.download-app-banner .new-banner.primary {
    background-color: #fc6446;
    color: #fff
}

    section.download-app-banner .new-banner.primary .logo svg .text path {
        fill: #fff
    }

    section.download-app-banner .new-banner.primary .logo svg path.circle {
        fill: #fff
    }

    section.download-app-banner .new-banner.primary .logo svg path.df-icon-text {
        fill: #fc6446
    }

    section.download-app-banner .new-banner.primary .text {
        background-color: #fc6446
    }

    section.download-app-banner .new-banner.primary .chevron-right, section.download-app-banner .new-banner.primary .chevron-down {
        fill: #fc6446
    }

section.download-app-banner .new-banner.secondary {
    background-color: #e4e8dc
}

    section.download-app-banner .new-banner.secondary .text {
        background-color: #e4e8dc
    }

    section.download-app-banner .new-banner.secondary .chevron-right, section.download-app-banner .new-banner.secondary .chevron-down {
        fill: #e4e8dc
    }

section.download-app-banner .new-banner.tertiary {
    background-color: #0f5a5c;
    color: #fff
}

    section.download-app-banner .new-banner.tertiary .logo svg .text path {
        fill: #fff
    }

    section.download-app-banner .new-banner.tertiary .text {
        background-color: #0f5a5c
    }

    section.download-app-banner .new-banner.tertiary .chevron-right, section.download-app-banner .new-banner.tertiary .chevron-down {
        fill: #0f5a5c
    }

section.download-app-banner.uplift-ad-banner .text .logo {
    display: block;
    margin-bottom: 12px
}

section.download-app-banner.uplift-ad-banner.uplift-image-only .text {
    display: none
}

section.download-app-banner.uplift-ad-banner.uplift-image-only .image {
    height: auto;
    margin: 0 auto
}

    section.download-app-banner.uplift-ad-banner.uplift-image-only .image:after {
        content: none
    }

section.download-app-banner.uplift-ad-banner.uplift-image-only .chevron-right, section.download-app-banner.uplift-ad-banner.uplift-image-only .chevron-down {
    display: none
}

section.download-app-banner.uplift-ad-banner.uplift-image-only img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center
}

@media(max-width: 768px) {
    section.download-app-banner.uplift-ad-banner.uplift-image-only .image {
        aspect-ratio: 300/250;
        max-width: 300px;
        margin: 0 auto
    }
}

@media(min-width: 769px)and (max-width: 1024px) {
    section.download-app-banner.uplift-ad-banner.uplift-image-only .image {
        aspect-ratio: 728/90;
        height: auto;
        max-width: 728px;
        margin: 0 auto
    }

        section.download-app-banner.uplift-ad-banner.uplift-image-only .image img {
            height: auto
        }
}

@media(min-width: 1025px) {
    section.download-app-banner.uplift-ad-banner.uplift-image-only .image {
        aspect-ratio: 970/250;
        height: auto;
        max-width: 970px;
        margin: 0 auto
    }
}

.dl__app-download {
    display: none
}

@media(min-width: 769px) {
    .dl__app-download {
        display: block;
        position: absolute;
        background-color: #fff;
        z-index: 10;
        border-radius: 8px;
        width: 160px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 0 8px 8px
    }

        .dl__app-download span {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            font-size: 12px !important;
            line-height: 16px !important
        }
}

section.ai-planner-banner {
    padding-top: 32px;
    padding-bottom: 32px;
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    section.ai-planner-banner {
        padding: 64px 0
    }
}

section.ai-planner-banner .new-banner {
    display: flex;
    flex-direction: column;
    background-color: #e4e8dc;
    color: #fff;
    border-radius: 8px;
    overflow: hidden
}

@media(min-width: 769px) {
    section.ai-planner-banner .new-banner {
        flex-direction: row;
        overflow: hidden
    }
}

section.ai-planner-banner .new-banner .text {
    background-color: #0f5a5c
}

section.ai-planner-banner .new-banner .chevron-right, section.ai-planner-banner .new-banner .chevron-down {
    fill: #0f5a5c
}

section.ai-planner-banner .text, section.ai-planner-banner .image {
    flex: 1
}

section.ai-planner-banner .text {
    padding: 16px;
    z-index: 10;
    position: relative
}

@media(min-width: 769px) {
    section.ai-planner-banner .text {
        padding: 16px 32px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
        flex: 1.5
    }
}

section.ai-planner-banner .text svg {
    display: none
}

@media(min-width: 769px) {
    section.ai-planner-banner .text svg {
        display: block
    }
}

@media(min-width: 769px)and (max-width: 947px) {
    section.ai-planner-banner .text svg {
        display: none
    }
}

section.ai-planner-banner .text > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media(min-width: 769px) {
    section.ai-planner-banner .text > div {
        align-items: flex-start;
        text-align: left;
        justify-content: center;
        flex: 1
    }
}

@media(min-width: 769px)and (max-width: 820px) {
    section.ai-planner-banner .text > div {
        flex: 1.2
    }
}

section.ai-planner-banner .text .main-title, section.ai-planner-banner .text .secondary-text {
    line-height: 1
}

section.ai-planner-banner .text .main-title {
    font-size: 42px;
    text-align: center;
    padding: 0 32px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    section.ai-planner-banner .text .main-title {
        text-align: left;
        font-size: 42px;
        padding: 0;
        max-width: 90%
    }
}

section.ai-planner-banner .text .secondary-text {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 42px;
    color: #e4e8dc;
    padding-right: 20px
}

@media(min-width: 769px) {
    section.ai-planner-banner .text .secondary-text {
        position: relative;
        font-size: 42px;
        padding-right: 20px
    }
}

section.ai-planner-banner .text .secondary-text > span.tag {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) scale(2)
}

@media(min-width: 769px) {
    section.ai-planner-banner .text .secondary-text > span.tag {
        right: -20px;
        transform: none;
        bottom: auto;
        left: auto;
        top: 0
    }
}

section.ai-planner-banner .image {
    position: relative;
    aspect-ratio: 4/3
}

@media(min-width: 769px) {
    section.ai-planner-banner .image {
        aspect-ratio: 4/2;
        flex: 1
    }
}

section.ai-planner-banner .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

section.ai-planner-banner .image a.secondary {
    background-color: #0f5a5c;
    border: 2px solid #0f5a5c;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) scale(1.3);
    z-index: 1
}

@media(hover: hover)and (pointer: fine) {
    section.ai-planner-banner .image a.secondary:hover {
        background-color: #407a7d
    }
}

@media(min-width: 769px) {
    section.ai-planner-banner .image a.secondary {
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.3)
    }
}

section.ai-planner-banner .image .chevron-right {
    display: none
}

@media(min-width: 769px) {
    section.ai-planner-banner .image .chevron-right {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1
    }
}

section.ai-planner-banner .image .chevron-down {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1
}

@media(min-width: 769px) {
    section.ai-planner-banner .image .chevron-down {
        display: none
    }
}

div.banner-in-funnel {
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    border: 1px solid #212121;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%
}

@media(min-width: 769px) {
    div.banner-in-funnel {
        min-height: 110px;
        margin: 0 auto;
        max-width: 1200px
    }
}

div.banner-in-funnel svg.chevron-right {
    transform: scale(1.1)
}

div.banner-in-funnel .logo {
    display: flex;
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo {
        width: 35%
    }
}

@media(min-width: 1025px) {
    div.banner-in-funnel .logo {
        width: 30%
    }
}

@media(min-width: 1200px) {
    div.banner-in-funnel .logo {
        width: 25%
    }
}

div.banner-in-funnel .logo > div {
    background-color: #fc6446;
    padding: 8px;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo > div {
        padding-left: 32px
    }
}

div.banner-in-funnel .logo > div img {
    max-width: 64px;
    width: 100%
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo > div img {
        max-width: 92px
    }
}

div.banner-in-funnel .logo > div img.frame-1 {
    display: none
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo > div img.frame-1 {
        display: block;
        margin-bottom: -94px;
        margin-top: 16px
    }
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo > div img.frame-2 {
        margin-top: -94px
    }
}

div.banner-in-funnel .logo svg.df-logo-dark {
    justify-self: center;
    max-width: 300px;
    min-width: 200px
}

div.banner-in-funnel .logo svg.chevron-right {
    width: 60px;
    height: 100%
}

@media(max-width: 768px) {
    div.banner-in-funnel .logo svg.chevron-right {
        position: absolute;
        top: 0;
        left: 80px;
        width: initial !important
    }
}

@media(min-width: 426px) {
    div.banner-in-funnel .logo svg.chevron-right {
        width: 48px
    }
}

@media(min-width: 769px) {
    div.banner-in-funnel .logo svg.chevron-right {
        width: 30px
    }
}

div.banner-in-funnel .logo svg.chevron-right path {
    fill: #fc6446
}

div.banner-in-funnel .text {
    display: flex;
    position: relative;
    color: #fff;
    padding: 16px 16px 16px 56px;
    flex: 1
}

@media(min-width: 769px) {
    div.banner-in-funnel .text {
        padding: 0 0 0 16px;
        flex-shrink: 0
    }
}

div.banner-in-funnel .text > div {
    gap: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

div.banner-in-funnel .text p {
    z-index: 1;
    line-height: 1;
    text-align: center;
    color: #212121
}

    div.banner-in-funnel .text p span {
        font-family: rocky,serif !important;
        font-weight: 700;
        font-style: italic;
        font-size: 24px;
        display: inline-block
    }

@media(min-width: 769px) {
    div.banner-in-funnel .text p span {
        font-size: 32px
    }
}

@media(min-width: 769px) {
    div.banner-in-funnel .text p {
        text-align: left
    }
}

div.banner-in-funnel .text p:nth-of-type(1) {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 24px !important
}

@media(min-width: 769px) {
    div.banner-in-funnel .text p:nth-of-type(1) {
        font-size: 32px !important
    }
}

div.banner-in-funnel .text p:nth-of-type(2) {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 16px
}

div.banner-in-funnel span.icon-cancel {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 14px;
    height: 14px;
    cursor: pointer
}

    div.banner-in-funnel span.icon-cancel svg {
        width: 100%;
        height: 100%
    }

        div.banner-in-funnel span.icon-cancel svg path {
            fill: #212121
        }

div.banner-in-funnel.primary {
    background-color: #fc6446
}

    div.banner-in-funnel.primary svg.chevron-down path {
        fill: #fc6446
    }

    div.banner-in-funnel.primary div.image svg.chevron-right path {
        fill: #fc6446
    }

div.banner-in-funnel.tertiary {
    background-color: #0f5a5c
}

    div.banner-in-funnel.tertiary svg.chevron-down path {
        fill: #0f5a5c
    }

    div.banner-in-funnel.tertiary div.image svg.chevron-right path {
        fill: #0f5a5c
    }

div.banner-in-funnel.secondary {
    background-color: #e4e8dc
}

    div.banner-in-funnel.secondary svg.chevron-down path {
        fill: #e4e8dc
    }

    div.banner-in-funnel.secondary div.image svg.chevron-right path {
        fill: #e4e8dc
    }

@media(min-width: 769px) {
    .banner-in-funnel.df-leaderboard {
        max-width: 728px;
        max-height: 90px
    }
}

.banner-in-funnel.df-leaderboard .icon-cancel {
    display: none
}

@media(min-width: 769px) {
    .banner-in-funnel.df-leaderboard.etickets-banner .logo {
        width: 25%
    }

        .banner-in-funnel.df-leaderboard.etickets-banner .logo > div {
            padding-left: 16px;
            gap: 8px
        }

            .banner-in-funnel.df-leaderboard.etickets-banner .logo > div img {
                max-width: 60px
            }

        .banner-in-funnel.df-leaderboard.etickets-banner .logo svg.chevron-right {
            width: 25px
        }
}

section.need-help {
    background-color: #fff
}

@media(min-width: 769px) {
    section.need-help {
        padding: 32px 0
    }
}

section.need-help .wrapper {
    gap: 32px
}

@media(min-width: 769px) {
    section.need-help .wrapper {
        gap: 16px
    }
}

section.need-help .title {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center
}

    section.need-help .title p {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 20px;
        line-height: 1
    }

@media(min-width: 769px) {
    section.need-help .title p {
        font-size: 24px;
        margin-bottom: 4px
    }
}

section.need-help .title svg {
    width: 24px;
    height: 24px
}

@media(min-width: 769px) {
    section.need-help .title svg {
        display: none
    }
}

section.need-help .title svg path {
    fill: #212121
}

section.need-help .text {
    order: 3
}

@media(min-width: 769px) {
    section.need-help .text {
        font-size: 20px;
        line-height: 32px;
        order: unset
    }
}

section.need-help a {
    order: 1
}

@media(min-width: 769px) {
    section.need-help a {
        order: unset;
        align-self: center
    }
}

section.newsletter-signup {
    padding: 32px 0
}

@media(max-width: 768px) {
    section.newsletter-signup {
        color: #212121;
        background-color: #fafaf7
    }
}

@media(min-width: 769px) {
    section.newsletter-signup {
        padding: 64px 0
    }
}

section.newsletter-signup .wrapper > div {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.newsletter-signup .wrapper > div {
        background-color: #fafaf7;
        padding: 32px;
        border-radius: 8px
    }
}

@media(min-width: 1025px) {
    section.newsletter-signup .wrapper > div {
        flex-direction: row;
        justify-content: space-between
    }
}

section.newsletter-signup .text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.newsletter-signup .text {
        gap: 24px
    }
}

section.newsletter-signup .text h2 {
    line-height: 1
}

section.newsletter-signup .text span {
    font-size: 18px;
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic
}

@media(min-width: 1025px) {
    section.newsletter-signup .form {
        display: flex;
        justify-content: center
    }
}

section.newsletter-signup form.newsletter-signup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center
}

@media(min-width: 769px) {
    section.newsletter-signup form.newsletter-signup {
        flex-direction: row;
        gap: 16px
    }
}

section.newsletter-signup form.newsletter-signup input, section.newsletter-signup form.newsletter-signup body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn, section.newsletter-signup form.newsletter-signup body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn {
    background: #e8e8e8;
    border-radius: 8px;
    border: none;
    padding: 16px 32px;
    text-align: center;
    width: 100%
}

@media(min-width: 769px) {
    section.newsletter-signup form.newsletter-signup input, section.newsletter-signup form.newsletter-signup body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn, section.newsletter-signup form.newsletter-signup body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn {
        min-width: 360px
    }
}

section.newsletter-signup form.newsletter-signup input::placeholder, section.newsletter-signup form.newsletter-signup body#TrainAndFerryMain #df-dom-deal_finder_container #railBtn::placeholder, body#TrainAndFerryMain #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn::placeholder, section.newsletter-signup form.newsletter-signup body#TrainAndFerryInd #df-dom-deal_finder_container #railBtn::placeholder, body#TrainAndFerryInd #df-dom-deal_finder_container section.newsletter-signup form.newsletter-signup #railBtn::placeholder {
    color: #212121;
    text-align: center;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

section.newsletter-signup form.newsletter-signup .submit-btn {
    flex-shrink: 0
}

footer#main-site-footer .top-section {
    background-color: #fafaf7
}

@media(min-width: 769px) {
    footer#main-site-footer .top-section {
        background-color: #fff
    }
}

footer#main-site-footer .top-section .wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px
}

@media(min-width: 769px) {
    footer#main-site-footer .top-section .wrapper {
        gap: 64px
    }
}

footer#main-site-footer .bottom-section {
    background-color: #fafaf7
}

@media(min-width: 769px) {
    footer#main-site-footer .bottom-section {
        background-color: #f5f5f2
    }
}

footer#main-site-footer .top-section {
    padding: 32px 0 16px 0
}

@media(min-width: 769px) {
    footer#main-site-footer .top-section {
        padding: 64px 0
    }
}

footer#main-site-footer .bottom-section {
    padding: 16px 0 32px 0
}

@media(min-width: 769px) {
    footer#main-site-footer .bottom-section {
        padding: 64px 0
    }
}

footer#main-site-footer .main-links a:hover, footer#main-site-footer .bottom-bar a:hover {
    text-decoration: underline
}

footer#main-site-footer .top-bar {
    display: grid;
    grid-template-areas: "cards cards" "logo need-help";
    row-gap: 48px
}

@media(min-width: 769px) {
    footer#main-site-footer .top-bar {
        grid-template-areas: "logo cards need-help";
        justify-content: space-between;
        gap: 16px;
        align-items: center
    }
}

footer#main-site-footer .top-bar .logo {
    width: 60px;
    height: 60px;
    grid-area: logo
}

footer#main-site-footer .top-bar .need-help {
    grid-area: need-help;
    justify-self: end;
    width: auto;
    align-self: center
}

footer#main-site-footer .top-bar .payment-cards {
    grid-area: cards
}

    footer#main-site-footer .top-bar .payment-cards ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px
    }

        footer#main-site-footer .top-bar .payment-cards ul li {
            box-shadow: 1px 2px 4px 0 rgba(63,123,125,.25);
            width: 64px;
            height: min-content
        }

            footer#main-site-footer .top-bar .payment-cards ul li img {
                width: 100%;
                height: auto
            }

footer#main-site-footer .main-links .toggle-links {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center
}

@media(min-width: 769px) {
    footer#main-site-footer .main-links .toggle-links {
        display: none
    }
}

footer#main-site-footer .main-links .toggle-links span {
    margin-bottom: 4px
}

footer#main-site-footer .main-links .toggle-links svg {
    width: 20px;
    transition: transform .3s ease;
    transform: rotate(90deg)
}

    footer#main-site-footer .main-links .toggle-links svg path {
        fill: #212121
    }

footer#main-site-footer .main-links .toggle-links.active svg {
    transform: rotate(-90deg)
}

footer#main-site-footer .main-links .links-grid {
    transition: height .3s ease;
    height: 0;
    overflow: hidden;
    display: grid;
    row-gap: 16px;
    column-gap: 16px;
    margin-top: 16px
}

@media(min-width: 374px) {
    footer#main-site-footer .main-links .links-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
        column-gap: 32px
    }
}

@media(min-width: 769px) {
    footer#main-site-footer .main-links .links-grid {
        overflow: visible;
        height: auto !important;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 0;
        row-gap: 64px;
        column-gap: 32px
    }
}

@media(min-width: 1025px) {
    footer#main-site-footer .main-links .links-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

footer#main-site-footer .main-links .links-grid ul {
    display: flex;
    flex-direction: column;
    gap: 4px
}

footer#main-site-footer .main-links .links-grid li.title {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 4px
}

footer#main-site-footer .main-links .links-grid li:not(.title) {
    font-size: 14px;
    line-height: 24px
}

footer#main-site-footer .bottom-bar {
    display: flex;
    flex-direction: column;
    gap: 8px
}

    footer#main-site-footer .bottom-bar > a {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        margin-bottom: 8px;
        align-self: flex-start
    }

    footer#main-site-footer .bottom-bar p, footer#main-site-footer .bottom-bar a {
        font-size: 12px;
        line-height: 18px
    }

li.destination-card {
    height: 230px
}

    li.destination-card > a {
        display: flex;
        flex-direction: row;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        border-radius: 8px;
        overflow: hidden;
        height: 100%
    }

@media(hover: hover)and (pointer: fine) {
    li.destination-card:hover .image img {
        transform: scale(1.2)
    }

    li.destination-card:hover .destination-info .cta {
        transform: translateX(10px)
    }
}

li.destination-card .image {
    flex: 1;
    order: 2;
    overflow: hidden;
    position: relative
}

    li.destination-card .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    li.destination-card .image img {
        transition: transform .3s ease;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

li.destination-card .destination-info {
    flex: 1;
    order: 1;
    background-color: #0f5a5c;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 16px 0 16px 24px;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 1
}

    li.destination-card .destination-info:after {
        content: "";
        position: absolute;
        left: 100%;
        top: 0;
        background-image: url("https://static.directferries.co.uk/image/brand/chevron-right-tertiary.svg");
        background-size: 54px 230px;
        background-repeat: no-repeat;
        background-position: 135% 0;
        width: 54px;
        height: 230px
    }

    li.destination-card .destination-info .cta {
        width: 32px;
        height: 32px;
        transition: transform .3s ease-in-out
    }

        li.destination-card .destination-info .cta svg {
            width: 100%;
            height: 100%
        }

    li.destination-card .destination-info h3 {
        font-size: 32px;
        line-height: 32px
    }

    li.destination-card .destination-info .subtitle {
        font-family: rocky,serif !important;
        font-weight: 700;
        font-style: italic;
        font-size: 24px
    }

a.submit-btn, button.submit-btn, div.submit-btn {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    gap: 8px;
    align-items: center
}

@media(min-width: 769px) {
    a.submit-btn, button.submit-btn, div.submit-btn {
        font-size: 20px
    }
}

a.submit-btn svg, button.submit-btn svg, div.submit-btn svg {
    width: 32px
}

@media(min-width: 769px) {
    a.submit-btn svg, button.submit-btn svg, div.submit-btn svg {
        width: 40px
    }
}

a.submit-btn svg path, button.submit-btn svg path, div.submit-btn svg path {
    transition: fill .3s ease
}

@media(hover: hover)and (pointer: fine) {
    a.submit-btn:hover, button.submit-btn:hover, div.submit-btn:hover {
        text-decoration: underline
    }

        a.submit-btn:hover svg path.bg, button.submit-btn:hover svg path.bg, div.submit-btn:hover svg path.bg {
            fill: #fc826b
        }
}

a.submit-btn.small, button.submit-btn.small, div.submit-btn.small {
    font-size: 16px
}

    a.submit-btn.small svg, button.submit-btn.small svg, div.submit-btn.small svg {
        width: 32px;
        height: 32px
    }

#AccommodationMain section.deal-finder div.bg {
    background-color: #e4e8dc
}

    #AccommodationMain section.deal-finder div.bg .chevron svg path {
        fill: #e4e8dc
    }

#AccommodationMain section.deal-finder .text {
    color: #212121
}

@media(max-width: 768px) {
    #AIBot section.deal-finder .deal-finder-main .wrapper {
        padding: 0
    }
}

section.deal-finder {
    position: relative;
    margin-top: -76px;
    z-index: 10
}

@media(min-width: 769px) {
    section.deal-finder {
        margin-top: 0;
        min-height: 480px
    }

        section.deal-finder.error-page {
            height: 450px
        }
}

@media(min-width: 769px) {
    section.deal-finder.deal-finder-widget {
        min-height: 320px
    }
}

@media(min-width: 769px) {
    section.deal-finder.deal-finder-widget .deal-finder-main {
        min-height: 320px
    }
}

@media(min-width: 769px) {
    section.deal-finder .deal-finder-main {
        position: relative;
        height: 100%;
        display: flex;
        min-height: 480px
    }
}

section.deal-finder .deal-finder-main .wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0
}

@media(min-width: 769px) {
    section.deal-finder .deal-finder-main .wrapper {
        padding-top: 48px;
        padding-bottom: 48px;
        gap: 32px;
        justify-content: space-between
    }
}

@media(min-width: 769px) {
    section.deal-finder .deal-finder-main .wrapper .text {
        margin-top: auto
    }
}

section.deal-finder div.bg {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 200px;
    background-color: #0f5a5c
}

    section.deal-finder div.bg.secondary {
        background-color: #e4e8dc
    }

        section.deal-finder div.bg.secondary .chevron {
            display: none
        }

@media(min-width: 769px) {
    section.deal-finder div.bg.secondary .chevron {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 55%;
        min-width: 600px;
        height: 100%;
        z-index: 1
    }

        section.deal-finder div.bg.secondary .chevron svg {
            position: absolute;
            right: 0;
            height: 100%
        }

            section.deal-finder div.bg.secondary .chevron svg path {
                fill: #e4e8dc
            }
}

@media(min-width: 769px) {
    section.deal-finder div.bg {
        height: 100%
    }
}

section.deal-finder div.bg .hero {
    width: 100%;
    height: 100%;
    position: relative
}

    section.deal-finder div.bg .hero:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.5);
        position: absolute;
        inset: 0
    }

@media(min-width: 769px) {
    section.deal-finder div.bg .hero {
        width: 60%;
        height: 100%;
        position: absolute;
        z-index: 0;
        right: 0
    }

        section.deal-finder div.bg .hero:after {
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(15,90,92,.2);
            position: absolute;
            inset: 0
        }
}

section.deal-finder div.bg .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0
}

@media(min-width: 769px) {
    section.deal-finder div.bg .hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        right: 0;
        bottom: unset
    }
}

section.deal-finder div.bg .chevron {
    display: none
}

@media(min-width: 769px) {
    section.deal-finder div.bg .chevron {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 55%;
        min-width: 600px;
        height: 100%;
        z-index: 1
    }

        section.deal-finder div.bg .chevron svg {
            position: absolute;
            right: 0;
            height: 100%
        }

            section.deal-finder div.bg .chevron svg path {
                fill: #0f5a5c
            }
}

section.deal-finder .dealfinder-widget-wrapper {
    position: relative;
    z-index: 10
}

@media(min-width: 769px) {
    section.deal-finder .dealfinder-widget-wrapper {
        margin: 0
    }
}

section.deal-finder .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 0 16px;
    color: #fff;
    height: 200px
}

    section.deal-finder .text:has(.book-now) {
        justify-content: flex-end;
        padding: 0 0 8px
    }

@media(min-width: 769px) {
    section.deal-finder .text:has(.book-now) {
        padding: 0 16px 0
    }
}

section.deal-finder .text:has(.book-now) a.book-now {
    display: flex
}

@media(min-width: 769px) {
    section.deal-finder .text:has(.book-now) a.book-now {
        display: none
    }
}

@media(min-width: 769px) {
    section.deal-finder .text {
        margin-top: 0;
        order: 2;
        padding: 0;
        width: 50%;
        height: unset;
        gap: 32px
    }
}

section.deal-finder .text a {
    display: none
}

@media(min-width: 769px) {
    section.deal-finder .text a {
        display: inline-block
    }
}

section.deal-finder .text .title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px
}

@media(min-width: 769px) {
    section.deal-finder .text .title {
        gap: 16px;
        padding-top: 0
    }
}

section.deal-finder .text p.title-line-1 {
    line-height: 1;
    font-size: 24px
}

@media(min-width: 769px) {
    section.deal-finder .text p.title-line-1 {
        font-size: 40px
    }
}

section.deal-finder .text p.title-line-2 {
    line-height: 1;
    font-size: 16px
}

@media(min-width: 769px) {
    section.deal-finder .text p.title-line-2 {
        font-size: 32px
    }
}

section.deal-finder .text p.title-line-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-weight: 800
}

section.deal-finder .text p.title-line-2 {
    font-family: rocky,serif;
    font-weight: 400;
    font-style: italic
}

section.deal-finder .text .hyphen {
    font-family: mundial,sans-serif !important;
    font-weight: 200 !important;
    font-style: normal !important
}

section.deal-finder .text .dest {
    font-family: rocky,serif;
    font-weight: 400;
    font-style: italic
}

section.deal-finder .text img.logo {
    border-radius: 4px;
    padding: 8px;
    background-color: #fff;
    max-width: 160px;
    margin-bottom: -30px
}

@media(min-width: 769px) {
    section.deal-finder .text img.logo {
        margin-bottom: 0
    }
}

@media(max-width: 768px) {
    section.deal-finder .text img.logo {
        max-height: 60px
    }
}

section.deal-finder.t2 div.bg {
    background-color: #5a6c78
}

    section.deal-finder.t2 div.bg .chevron svg path {
        fill: #5a6c78
    }

section.deal-finder.p div.bg {
    background-color: #fc6446
}

    section.deal-finder.p div.bg .chevron svg path {
        fill: #fc6446
    }

@media(min-width: 769px) {
    section.deal-finder.s .text {
        color: #212121
    }
}

section.deal-finder.s div.bg {
    background-color: #e4e8dc
}

    section.deal-finder.s div.bg .chevron svg path {
        fill: #e4e8dc
    }

@media(min-width: 769px) {
    .dealfinder-widger-wrapper {
        margin-top: 90px
    }
}

@media(min-width: 1200px) {
    .dealfinder-widger-wrapper {
        margin-top: 0
    }
}

#deal_finder_container_horizontal {
    display: none
}

@media(min-width: 769px) {
    #deal_finder_container_horizontal {
        display: block
    }
}

@media(min-width: 769px) {
    .df-dom-dealfinder {
        display: none;
        margin-top: 90px
    }
}

section.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-top: -76px
}

@media(min-width: 769px) {
    section.home-hero {
        height: 100vh;
        margin-top: -90px
    }
}

@media(min-width: 1025px) {
    section.home-hero {
        margin-top: -90px
    }
}

@media(min-width: 769px) {
    section.home-hero .all-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        padding: 140px 0;
        gap: 16px
    }
}

section.home-hero .all-content:has(.tp-wrapper-desktop) {
    justify-content: flex-start
}

    section.home-hero .all-content:has(.tp-wrapper-desktop) .hero-content {
        order: 3;
        margin-top: auto
    }

    section.home-hero .all-content:has(.tp-wrapper-desktop) .tp-wrapper-desktop {
        order: 2
    }

section.home-hero .hero-content {
    height: 300px;
    position: relative
}

@media(min-width: 769px) {
    section.home-hero .hero-content {
        height: unset;
        position: static;
        order: 2
    }
}

@media(max-width: 768px) {
    section.home-hero .hero-content .wrapper {
        padding: 0
    }
}

section.home-hero .hero-content .text-container {
    padding: 92px 32px 32px 32px;
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    section.home-hero .hero-content .text-container {
        padding: 0;
        order: 2
    }
}

section.home-hero .hero-content .text-container .text {
    color: #fff
}

    section.home-hero .hero-content .text-container .text div.text-wrapper {
        line-height: 1;
        font-size: 32px
    }

@media(min-width: 769px) {
    section.home-hero .hero-content .text-container .text div.text-wrapper {
        font-size: 80px
    }
}

@media(min-width: 769px)and (max-height: 720px) {
    section.home-hero .hero-content .text-container .text div.text-wrapper {
        font-size: 50px
    }
}

section.home-hero .hero-content .text-container .text div.text-wrapper span:nth-child(1) {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

section.home-hero .hero-content .text-container .text div.text-wrapper span:nth-child(2) em {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic;
    font-weight: 400
}

@media(min-width: 769px) {
    section.home-hero .hero-content .text-container .text div.text-wrapper span:nth-child(2) {
        display: block;
        margin-top: 8px
    }
}

section.home-hero .hero-content .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

    section.home-hero .hero-content .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    section.home-hero .hero-content .image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        object-position: bottom
    }

section.home-hero .dealfinder-widget-wrapper {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    width: 100%;
    padding: 0 16px;
    min-height: 640px
}

@media(min-width: 769px) {
    section.home-hero .dealfinder-widget-wrapper {
        order: 1;
        margin: 0 auto;
        min-height: initial
    }
}

@media(min-width: 1200px) {
    section.home-hero .dealfinder-widget-wrapper {
        margin: 0 auto
    }
}

@media(max-width: 768px) {
    section.home-hero .dealfinder-widget-wrapper .wrapper {
        padding: 0
    }
}

@media(min-width: 769px) {
    section.home-hero .dealfinder-widget-wrapper {
        order: 1
    }
}

section.home-hero div.hdOuter {
    z-index: 2
}

@media(min-width: 769px) {
    section.home-hero div.hdOuter .logoBar {
        background-color: rgba(33,33,33,.4)
    }
}

section.home-hero div.hdOuter svg.df-globalNav--fillColour path {
    fill: #fff
}

section.home-hero div.hdOuter svg.df-logo path.df-fill__binaryDark {
    fill: #fff
}

section.home-hero div.hdOuter .df-globalNav__desktop button, section.home-hero div.hdOuter .df-globalNav__desktop a.df-globalNav__link {
    color: #fff
}

section.home-hero div.hdOuter .df-globalNav__desktop .df-dropdown__button .df-icon path, section.home-hero div.hdOuter .df-globalNav__desktop .df-globalNav__link .df-icon path {
    fill: #fff
}

section.home-hero div.hdOuter .df-globalNav__desktop svg.df-logo path.df-fill__binaryDark {
    fill: #fff
}

section.home-hero .widget {
    background: #fafaf7;
    color: #212121;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 254px;
    z-index: 1
}

@media(min-width: 769px) {
    section.home-hero .widget {
        background: rgba(255,255,255,.8);
        color: #212121;
        border-radius: 8px;
        min-height: 256px;
        order: 1
    }
}

section.h1-section {
    background-color: #fff;
    position: relative;
    padding: 24px 0 0;
    z-index: 1
}

section.top-destinations ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 769px) {
    section.top-destinations ul {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 1025px) {
    section.top-destinations ul {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px
    }
}

@media(min-width: 769px) {
    section.ferry-companies-list {
        padding-top: 16px
    }
}

section.ferry-companies-list .ferry-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px
}

@media(min-width: 426px) {
    section.ferry-companies-list .ferry-logos {
        gap: 8px
    }
}

@media(min-width: 769px) {
    section.ferry-companies-list .ferry-logos {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(min-width: 1025px) {
    section.ferry-companies-list .ferry-logos {
        grid-template-columns: repeat(8, 1fr);
        gap: 32px
    }
}

section.ferry-companies-list .ferry-logo > a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/10;
    transition: transform .3s ease-in-out
}

@media(hover: hover)and (pointer: fine) {
    section.ferry-companies-list .ferry-logo > a:hover {
        transform: scale(1.2)
    }
}

section.ferry-companies-list .ferry-logo img {
    width: 100%;
    max-width: 70%
}

@media(min-width: 1025px) {
    section.ferry-companies-list .ferry-logo img {
        max-width: 90%
    }
}

section.popular-routes ul.route-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px
}

@media(min-width: 426px) {
    section.popular-routes ul.route-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px
    }
}

@media(min-width: 769px) {
    section.popular-routes ul.route-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
    }
}

@media(min-width: 1025px) {
    section.popular-routes ul.route-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px
    }
}

li.popular-route-card a {
    background: #fff;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    transition: background-color .3s ease,transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

@media(hover: hover)and (pointer: fine) {
    li.popular-route-card a:hover {
        background: rgba(255,255,255,.7);
        transform: scale(1.05)
    }
}

.blog-card {
    flex: 1;
    min-width: 0
}

    .blog-card a {
        display: flex;
        flex-direction: column;
        gap: 16px
    }

@media(hover: hover)and (pointer: fine) {
    .blog-card a:hover img {
        transform: scale(1.2)
    }

    .blog-card a:hover .post-info {
        opacity: .8
    }
}

.blog-card .image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/10;
    position: relative
}

    .blog-card .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    .blog-card .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease
    }

.blog-card .post-info {
    transition: opacity .3s ease;
    display: flex;
    flex-direction: row;
    gap: 16px
}

    .blog-card .post-info .text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .blog-card .post-info .title, .blog-card .post-info .desc {
        line-height: 1.2
    }

    .blog-card .post-info .title {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

    .blog-card .post-info .desc p {
        font-family: mundial,sans-serif !important;
        font-weight: 400 !important;
        font-style: normal !important;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0
    }

.blog-card .icon {
    width: 28px;
    height: 28px
}

    .blog-card .icon svg {
        width: 100%;
        height: 100%
    }

@media(min-width: 769px) {
    li.blog-card2 {
        display: flex
    }
}

li.blog-card2 a {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #d4d4d4
}

@media(min-width: 769px) {
    li.blog-card2 a {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        border: none
    }
}

@media(hover: hover)and (pointer: fine) {
    li.blog-card2 a:hover img {
        transform: scale(1.2)
    }
}

li.blog-card2 .image {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 4px;
    order: 2;
    flex: 1;
    align-self: flex-start
}

@media(min-width: 769px) {
    li.blog-card2 .image {
        aspect-ratio: 16/9;
        order: 1;
        border-radius: 4px;
        flex: unset;
        align-self: unset
    }
}

@media(min-width: 1025px) {
    li.blog-card2 .image {
        min-height: 106px
    }
}

@media(min-width: 1200px) {
    li.blog-card2 .image {
        min-height: 142px
    }
}

li.blog-card2 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

li.blog-card2 .post-info {
    order: 1;
    flex: 3
}

@media(min-width: 769px) {
    li.blog-card2 .post-info {
        order: 2;
        flex: 1;
        width: 100%
    }
}

li.blog-card2 .post-info .text {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media(min-width: 769px) {
    li.blog-card2 .post-info .text {
        order: 2
    }
}

li.blog-card2 .post-info .text > div {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start
}

@media(min-width: 769px) {
    li.blog-card2 .post-info .text > div {
        order: 1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px
    }
}

li.blog-card2 .post-info .text > div .tag {
    order: 2
}

@media(min-width: 769px) {
    li.blog-card2 .post-info .text > div .tag {
        order: 1
    }
}

li.blog-card2 .post-info .text > div .date {
    order: 1;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #a6a6a6;
    font-size: 12px
}

@media(min-width: 769px) {
    li.blog-card2 .post-info .text > div .date {
        order: 2;
        color: #212121
    }
}

li.blog-card2 .post-info .text .title {
    order: 1;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2
}

@media(min-width: 769px) {
    li.blog-card2 .post-info .text .title {
        order: 2;
        max-height: 2.4em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}

ul.blog-pagination {
    display: flex;
    flex-direction: row;
    line-height: 1;
    justify-content: center;
    padding: 8px 0;
    flex-wrap: wrap;
    align-items: center
}

    ul.blog-pagination li:first-of-type, ul.blog-pagination li:last-of-type {
        transform: translateY(3px)
    }

        ul.blog-pagination li:first-of-type button, ul.blog-pagination li:last-of-type button {
            transition: background .3s ease;
            padding: 8px;
            border-radius: 4px
        }

@media(hover: hover)and (pointer: fine) {
    ul.blog-pagination li:first-of-type button:hover, ul.blog-pagination li:last-of-type button:hover {
        background-color: #e4e8dc
    }
}

@media(min-width: 769px) {
    ul.blog-pagination li:first-of-type {
        padding-right: 32px
    }
}

ul.blog-pagination li:first-of-type svg {
    scale: -1
}

@media(min-width: 769px) {
    ul.blog-pagination li:last-of-type {
        padding-left: 32px
    }
}

ul.blog-pagination li button.pagination-number {
    transition: color .3s ease;
    display: block;
    padding: 16px;
    line-height: 1;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

    ul.blog-pagination li button.pagination-number:not(.active) {
        color: #a6a6a6
    }

    ul.blog-pagination li button.pagination-number.active {
        pointer-events: none
    }

@media(hover: hover)and (pointer: fine) {
    ul.blog-pagination li button.pagination-number:hover {
        color: #212121
    }
}

ul.blog-pagination svg.arrow-right {
    width: 16px;
    height: 16px
}

@media(min-width: 769px) {
    ul.blog-pagination svg.arrow-right {
        width: 20px;
        height: 20px
    }
}

ul.blog-pagination.disabled button {
    pointer-events: none
}

    ul.blog-pagination.disabled button svg path {
        fill: #e8e8e8
    }

    ul.blog-pagination.disabled button.pagination-number, ul.blog-pagination.disabled button.pagination-number.active {
        color: #e8e8e8 !important
    }

.tag {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 12px
}

    .tag.yellow {
        color: #212121;
        background-color: #ffc75b;
        border-bottom: 2px solid #ffb932
    }

    .tag.purple {
        color: #fff;
        background-color: #6f7fff;
        border-bottom: 2px solid #4b5fff
    }

    .tag.light-blue {
        background-color: #ecf8fd;
        border-bottom: 2px solid #b7bfff
    }

header#global-navigation {
    padding: 16px 32px;
    display: none;
    background-color: #fff;
    position: relative;
    z-index: 999
}

@media(min-width: 1200px) {
    header#global-navigation {
        height: 90px;
        display: block;
        padding: 16px 16px
    }
}

header#global-navigation.solid {
    background-color: #fff
}

header#global-navigation.dark {
    background-color: rgba(33,33,33,.4);
    transition: background-color .3s ease
}

    header#global-navigation.dark .logo .text path {
        fill: #fff
    }

    header#global-navigation.dark #site-nav ul > li > button, header#global-navigation.dark #site-nav > a, header#global-navigation.dark nav#site-nav > ul > li > a {
        color: #fff
    }

    header#global-navigation.dark #site-nav > ul > li.has-dropdown .icon-nav-arrow-down path {
        fill: #fff
    }

    header#global-navigation.dark #user-actions > ul > li > a, header#global-navigation.dark #user-actions > ul > li.has-dropdown {
        color: #fff
    }

        header#global-navigation.dark #user-actions > ul > li > a svg path {
            fill: #fff
        }

    header#global-navigation.dark.language-hover {
        background-color: #0f5a5c
    }

header#global-navigation.transparent {
    background-color: rgba(0,0,0,0)
}

header#global-navigation > .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: unset;
    padding: 0;
    height: 100%
}

header#global-navigation a.ai-assistant {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #c9ecf4;
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    align-items: center;
    padding: 4px 12px 6px 12px;
    border-bottom-left-radius: 8px;
    transition: background-color .3s ease
}

@media(hover: hover)and (pointer: fine) {
    header#global-navigation a.ai-assistant:hover {
        background-color: #e9f7fb
    }
}

header#global-navigation a.ai-assistant svg {
    width: 16px;
    height: 16px
}

    header#global-navigation a.ai-assistant svg path {
        fill: #212121
    }

header#global-navigation .logo {
    width: 240px
}

    header#global-navigation .logo a {
        display: block
    }

    header#global-navigation .logo svg {
        width: 100%
    }

header#global-navigation .nav-logo-group {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center
}

header#global-navigation .user-action-links {
    display: flex
}

header#global-navigation nav#site-nav, header#global-navigation nav#user-actions {
    display: flex
}

    header#global-navigation nav#site-nav > ul, header#global-navigation nav#user-actions > ul {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center
    }

        header#global-navigation nav#site-nav > ul > li, header#global-navigation nav#user-actions > ul > li {
            display: flex;
            line-height: 1
        }

            header#global-navigation nav#site-nav > ul > li > a, header#global-navigation nav#site-nav > ul > li > button, header#global-navigation nav#user-actions > ul > li > a, header#global-navigation nav#user-actions > ul > li > button {
                display: flex;
                gap: 6px;
                padding: 4px;
                border-radius: 8px;
                align-items: center;
                font-size: 14px;
                text-align: left
            }

                header#global-navigation nav#site-nav > ul > li > a span, header#global-navigation nav#site-nav > ul > li > button span, header#global-navigation nav#user-actions > ul > li > a span, header#global-navigation nav#user-actions > ul > li > button span {
                    margin: auto
                }

            header#global-navigation nav#site-nav > ul > li.has-dropdown > button, header#global-navigation nav#user-actions > ul > li.has-dropdown > button {
                cursor: auto
            }

    header#global-navigation nav#site-nav svg.icon-nav-arrow-down {
        width: 14px
    }

    header#global-navigation nav#site-nav svg path {
        fill: #212121
    }

    header#global-navigation nav#user-actions > ul > li > a > svg, header#global-navigation nav#user-actions > ul > li > button > svg {
        width: 20px;
        margin-top: 2px
    }

        header#global-navigation nav#user-actions > ul > li > a > svg path, header#global-navigation nav#user-actions > ul > li > button > svg path {
            fill: #212121
        }

    header#global-navigation nav#user-actions > ul > li > a span.flag, header#global-navigation nav#user-actions > ul > li > button span.flag {
        margin: 0;
        width: 25px
    }

        header#global-navigation nav#user-actions > ul > li > a span.flag img, header#global-navigation nav#user-actions > ul > li > button span.flag img {
            width: 100%;
            height: auto;
            border-radius: 2px;
            border: 2px solid #e4e8dc
        }

    header#global-navigation nav#site-nav li.has-dropdown {
        position: relative
    }

header#global-navigation div.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    min-width: max-content;
    padding-top: 10px
}

    header#global-navigation div.dropdown ul {
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        background-color: #fff;
        border-radius: 8px;
        z-index: 998;
        position: relative;
        overflow: hidden;
        padding: 8px 0
    }

    header#global-navigation div.dropdown svg {
        width: 20px
    }

    header#global-navigation div.dropdown li a {
        padding: 8px 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 400
    }

        header#global-navigation div.dropdown li a b {
            font-weight: 600
        }

    header#global-navigation div.dropdown:before {
        content: "";
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        position: absolute;
        width: 24px;
        height: 24px;
        top: -1px;
        left: 28px;
        transform: rotate(45deg);
        z-index: 997
    }

    header#global-navigation div.dropdown:after {
        content: "";
        width: 0;
        height: 0;
        border-left: 16px solid rgba(0,0,0,0);
        border-right: 16px solid rgba(0,0,0,0);
        border-bottom: 16px solid #fff;
        position: absolute;
        top: -6px;
        left: 24px;
        z-index: 999
    }

header#global-navigation.dark .country-dropdown > div {
    background-color: #0f5a5c
}

header#global-navigation .country-dropdown {
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 84px;
    left: 0;
    padding-top: 36px
}

    header#global-navigation .country-dropdown > div {
        background-color: #fff
    }

    header#global-navigation .country-dropdown .wrapper {
        padding: 16px 32px 32px 32px
    }

    header#global-navigation .country-dropdown ul {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 16px
    }

        header#global-navigation .country-dropdown ul a {
            display: flex;
            flex-direction: row;
            gap: 8px;
            padding: 6px;
            background-color: #f0f2eb;
            align-items: center;
            font-size: 14px;
            border-radius: 4px;
            font-family: mundial-light,sans-serif !important;
            font-weight: 300 !important;
            font-style: normal !important
        }

    header#global-navigation .country-dropdown span.flag {
        align-items: center;
        display: flex;
        width: 28px;
        height: 22px
    }

        header#global-navigation .country-dropdown span.flag img {
            width: 100%;
            height: auto;
            border-radius: 2px;
            border: 2px solid #e4e8dc
        }

header#global-navigation nav#site-nav > ul > li > a, header#global-navigation div.user-action-links nav#user-actions > ul > li > a {
    transition: background-color .3s ease,color .3s ease
}

    header#global-navigation nav#site-nav > ul > li > a svg path, header#global-navigation div.user-action-links nav#user-actions > ul > li > a svg path {
        transition: fill .3s ease
    }

@media(hover: hover)and (pointer: fine) {
    header#global-navigation nav#site-nav > ul > li > a:hover, header#global-navigation div.user-action-links nav#user-actions > ul > li > a:hover {
        background-color: #e4e8dc;
        color: #212121
    }

        header#global-navigation nav#site-nav > ul > li > a:hover svg path, header#global-navigation div.user-action-links nav#user-actions > ul > li > a:hover svg path {
            fill: #212121
        }
}

header#global-navigation div.dropdown a, header#global-navigation div.dropdown button {
    transition: background-color .3s ease
}

@media(hover: hover)and (pointer: fine) {
    header#global-navigation div.dropdown a:hover, header#global-navigation div.dropdown button:hover {
        background-color: #e4e8dc
    }
}

header#global-navigation .country-dropdown a {
    transition: background-color .3s ease,scale .3s ease
}

@media(hover: hover)and (pointer: fine) {
    header#global-navigation .country-dropdown a:hover {
        background-color: #e4e8dc;
        scale: 1.1
    }
}

header#global-navigation .country-dropdown a span {
    backface-visibility: hidden;
    transform: translateZ(0)
}

header#global-navigation li.has-dropdown div.dropdown {
    transition: opacity .3s ease,transform .3s ease;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none
}

header#global-navigation li.has-dropdown .country-dropdown {
    transition: opacity .3s ease,transform .3s ease;
    transform: translateY(-40px);
    opacity: 0;
    pointer-events: none
}

@media(hover: hover)and (pointer: fine) {
    header#global-navigation li.has-dropdown:hover div.dropdown, header#global-navigation li.has-dropdown.hover div.dropdown {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all
    }

    header#global-navigation li.has-dropdown:hover .country-dropdown, header#global-navigation li.has-dropdown.hover .country-dropdown {
        transform: translateY(-30px);
        opacity: 1;
        pointer-events: all
    }
}

@media(min-width: 1200px)and (max-width: 1340px) {
    header#global-navigation #user-actions > ul > li > a > span:not(.flag), header#global-navigation #user-actions > ul > li > button > span:not(.flag) {
        display: none
    }
}

header#global-navigation-mobile {
    position: relative;
    z-index: 999
}

@media(min-width: 1200px) {
    header#global-navigation-mobile {
        display: none
    }
}

header#global-navigation-mobile.transparent {
    background-color: rgba(255,255,255,0)
}

header#global-navigation-mobile.solid div.topbar {
    background-color: #fff
}

    header#global-navigation-mobile.solid div.topbar .logo .df-logo-dark .text path {
        fill: #212121
    }

    header#global-navigation-mobile.solid div.topbar .menu-btn path {
        fill: #212121
    }

@media(max-width: 768px) {
    header#global-navigation-mobile.tertiary div.topbar {
        background-color: #0f5a5c
    }

        header#global-navigation-mobile.tertiary div.topbar .logo .df-logo-dark .text path {
            fill: #fff
        }

        header#global-navigation-mobile.tertiary div.topbar .menu-btn path {
            fill: #fff
        }
}

header#global-navigation-mobile .wrapper {
    padding: 0;
    transition: background-color .2s ease-in-out
}

header#global-navigation-mobile div.topbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    height: 76px
}

@media(min-width: 769px) {
    header#global-navigation-mobile div.topbar {
        height: 90px;
        background-color: #fff
    }
}

header#global-navigation-mobile div.topbar .logo {
    width: 44px;
    height: 44px
}

@media(min-width: 374px) {
    header#global-navigation-mobile div.topbar .logo {
        width: 230px;
        height: 45px
    }
}

@media(min-width: 769px) {
    header#global-navigation-mobile div.topbar .logo {
        width: 300px;
        height: 58px
    }
}

header#global-navigation-mobile div.topbar .logo > a {
    display: block
}

header#global-navigation-mobile div.topbar .logo .df-logo-dark {
    display: none
}

    header#global-navigation-mobile div.topbar .logo .df-logo-dark .text path {
        fill: #fff
    }

@media(min-width: 769px) {
    header#global-navigation-mobile div.topbar .logo .df-logo-dark .text path {
        fill: #212121
    }
}

@media(min-width: 374px) {
    header#global-navigation-mobile div.topbar .logo .df-logo-dark {
        width: 100%;
        display: block
    }
}

@media(min-width: 769px) {
    header#global-navigation-mobile div.topbar .logo .df-logo-dark {
        width: 300px
    }
}

header#global-navigation-mobile div.topbar .logo .df-logo-disc {
    width: 100%
}

@media(min-width: 374px) {
    header#global-navigation-mobile div.topbar .logo .df-logo-disc {
        display: none
    }
}

header#global-navigation-mobile div.topbar .menu-btn {
    width: 24px;
    height: 24px
}

    header#global-navigation-mobile div.topbar .menu-btn path {
        fill: #fff
    }

@media(min-width: 769px) {
    header#global-navigation-mobile div.topbar .menu-btn path {
        fill: #212121
    }
}

header#global-navigation-mobile nav#site-nav-mob {
    display: flex;
    width: 100%
}

    header#global-navigation-mobile nav#site-nav-mob > ul {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        flex-direction: column;
        width: 100%
    }

        header#global-navigation-mobile nav#site-nav-mob > ul > li {
            display: flex;
            line-height: 1;
            background: #407a7d;
            border-bottom: 1px solid #709c9e
        }

            header#global-navigation-mobile nav#site-nav-mob > ul > li :focus-visible {
                position: relative;
                z-index: 1;
                outline-offset: -3px
            }

            header#global-navigation-mobile nav#site-nav-mob > ul > li > a, header#global-navigation-mobile nav#site-nav-mob > ul > li > button {
                color: #fff;
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 16px;
                font-size: 16px;
                width: 100%;
                transition: background-color .3s ease
            }

@media(hover: hover)and (pointer: fine) {
    header#global-navigation-mobile nav#site-nav-mob > ul > li > a:hover, header#global-navigation-mobile nav#site-nav-mob > ul > li > button:hover {
        background-color: #116769
    }
}

header#global-navigation-mobile nav#site-nav-mob > ul > li > a > svg, header#global-navigation-mobile nav#site-nav-mob > ul > li > button > svg {
    width: 24px
}

    header#global-navigation-mobile nav#site-nav-mob > ul > li > a > svg path, header#global-navigation-mobile nav#site-nav-mob > ul > li > button > svg path {
        fill: #fff
    }

header#global-navigation-mobile nav#site-nav-mob > ul > li > a > span.flag, header#global-navigation-mobile nav#site-nav-mob > ul > li > button > span.flag {
    width: 24px
}

    header#global-navigation-mobile nav#site-nav-mob > ul > li > a > span.flag img, header#global-navigation-mobile nav#site-nav-mob > ul > li > button > span.flag img {
        width: 100%;
        height: auto;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown {
    flex-direction: column
}

    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown.active > a, header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown.active > button {
        background-color: #116769
    }

    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > a, header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > button {
        justify-content: space-between
    }

        header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > a > svg, header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > button > svg {
            width: 20px
        }

            header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > a > svg path, header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown > button > svg path {
                fill: #fff
            }

    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown:not([data-cat=language]) svg {
        width: 24px
    }

        header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown:not([data-cat=language]) svg.icon-nav-arrow-down {
            width: 20px
        }

        header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown:not([data-cat=language]) svg path {
            fill: #fff
        }

    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown[data-cat=language] .dropdown svg {
        border-radius: 2px;
        border: 2px solid #e4e8dc;
        width: 24px
    }

    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown {
        background-color: #0f5a5c;
        overflow: hidden;
        transition: height .3s ease;
        padding: 0 16px
    }

        header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown ul {
            display: grid;
            padding: 16px 0;
            background-color: #0f5a5c
        }

@media(min-width: 426px) {
    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown ul {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 769px) {
    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown ul {
        grid-template-columns: repeat(3, 1fr)
    }
}

header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown ul li a {
    color: #fff;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    transition: background-color .3s ease;
    border-radius: 8px;
    min-height: 40px
}

@media(hover: hover)and (pointer: fine) {
    header#global-navigation-mobile nav#site-nav-mob > ul > li.has-dropdown div.dropdown ul li a:hover {
        background-color: #116769
    }
}

header#global-navigation-mobile nav#site-nav-mob [data-cat=language] button > span {
    display: flex;
    flex-direction: row;
    gap: 16px
}

header#global-navigation-mobile nav#site-nav-mob [data-cat=language] ul {
    display: grid;
    grid-template-columns: 1fr
}

@media(min-width: 374px) {
    header#global-navigation-mobile nav#site-nav-mob [data-cat=language] ul {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 769px) {
    header#global-navigation-mobile nav#site-nav-mob [data-cat=language] ul {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

header#global-navigation-mobile nav#site-nav-mob [data-cat=language] ul a {
    color: #fff;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 16px;
    align-items: center
}

header#global-navigation-mobile nav#site-nav-mob [data-cat=language] span.flag {
    align-items: center;
    display: flex;
    width: 24px
}

    header#global-navigation-mobile nav#site-nav-mob [data-cat=language] span.flag img {
        width: 100%;
        height: auto;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

@media(min-width: 769px) {
    body:not(.menu-active) header#global-navigation-mobile.medium-dark .topbar .logo svg.df-logo-dark .text path {
        fill: #212121
    }

    body:not(.menu-active) header#global-navigation-mobile.medium-dark .topbar .menu-btn path {
        fill: #212121
    }
}

header#global-navigation-mobile {
    overflow: hidden;
    height: 76px;
    transition: background-color .3s ease
}

@media(min-width: 769px) {
    header#global-navigation-mobile {
        height: 90px
    }
}

header#global-navigation-mobile > .wrapper {
    height: 100%
}

header#global-navigation-mobile .topbar {
    transition: background-color .3s ease
}

    header#global-navigation-mobile .topbar .menu-btn svg .close, header#global-navigation-mobile .topbar .menu-btn svg .burger {
        transition: opacity .3s ease,transform .3s ease;
        transform-origin: center
    }

    header#global-navigation-mobile .topbar .menu-btn svg .close {
        opacity: 0;
        transform: rotate(0deg)
    }

    header#global-navigation-mobile .topbar svg.df-logo-dark .text path, header#global-navigation-mobile .topbar .menu-btn svg path {
        transition: fill .3s ease
    }

header#global-navigation-mobile .nav-container {
    transition: clip-path .1s ease;
    will-change: clip-path;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    backface-visibility: hidden;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 32px
}

header#global-navigation-mobile .user-action-links {
    display: flex;
    flex-direction: column;
    gap: 16px
}

    header#global-navigation-mobile .user-action-links a {
        align-self: center;
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: center;
        min-width: 150px;
        line-height: 1
    }

        header#global-navigation-mobile .user-action-links a svg {
            width: 20px;
            height: 20px
        }

header#global-navigation-mobile li.has-dropdown svg.icon-nav-arrow-down {
    transition: transform .3s ease;
    transform: rotate(0deg)
}

header#global-navigation-mobile li.has-dropdown.active svg.icon-nav-arrow-down {
    transform: rotate(180deg)
}

body.closing header#global-navigation-mobile {
    overflow: visible
}

    body.closing header#global-navigation-mobile > .wrapper {
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch
    }

body.menu-active {
    overflow: hidden
}

@media(min-width: 1200px) {
    body.menu-active {
        margin-top: 0
    }
}

@media(min-width: 1200px) {
    body.menu-active {
        overflow: auto
    }
}

body.menu-active header#global-navigation-mobile {
    overflow: visible
}

    body.menu-active header#global-navigation-mobile.solid div.topbar .logo .df-logo-dark .text path {
        fill: #fff
    }

    body.menu-active header#global-navigation-mobile.solid div.topbar .menu-btn path {
        fill: #fff
    }

    body.menu-active header#global-navigation-mobile > .wrapper {
        height: 100vh;
        height: 100dvh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        background-color: #0f5a5c
    }

    body.menu-active header#global-navigation-mobile div.topbar {
        background-color: #0f5a5c
    }

        body.menu-active header#global-navigation-mobile div.topbar svg.df-logo-dark .text path, body.menu-active header#global-navigation-mobile div.topbar .menu-btn svg path {
            fill: #fff
        }

        body.menu-active header#global-navigation-mobile div.topbar .menu-btn svg .burger {
            opacity: 0
        }

        body.menu-active header#global-navigation-mobile div.topbar .menu-btn svg .close {
            opacity: 1;
            transform: rotate(90deg)
        }

    body.menu-active header#global-navigation-mobile .nav-container {
        pointer-events: all;
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transition: clip-path .6s ease
    }

.map-route-item:not(:last-of-type) {
    border-bottom: 1px solid #e4e8dc
}

@media(hover: hover)and (pointer: fine) {
    .map-route-item:not(.open):hover .route-title {
        background-color: #fff
    }
}

.map-route-item.open .route-title .arrow {
    rotate: -90deg
}

.map-route-item .route-title {
    transition: background-color .3s ease;
    background-color: rgba(255,255,255,0);
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer
}

    .map-route-item .route-title .arrow {
        width: 20px;
        height: 20px;
        transition: rotate .3s ease;
        rotate: 90deg
    }

    .map-route-item .route-title h3 {
        font-size: 16px;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

.map-route-item .route {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

    .map-route-item .route > a {
        text-decoration: underline
    }

.map-route-item .moreInfo {
    display: block;
    padding: 10px;
    margin: 5px 0;
    overflow: visible;
    white-space: normal
}

.map-route-item .available-routes {
    height: 0;
    overflow: hidden;
    transition: height .3s ease,border .3s ease
}

ul.links-list {
    column-count: 1;
    column-gap: 16px
}

@media(min-width: 426px) {
    ul.links-list {
        column-count: 2
    }
}

@media(min-width: 769px) {
    ul.links-list {
        column-count: 3
    }
}

@media(min-width: 1025px) {
    ul.links-list {
        column-count: 4
    }
}

ul.links-list li {
    padding-bottom: 16px
}

@media(min-width: 769px) {
    ul.links-list li {
        padding-bottom: 16px
    }
}

li.icon-text-links-item a {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    line-height: 1
}

    li.icon-text-links-item a .icon-pin {
        width: 24px;
        height: 24px;
        fill: #212121;
        flex-shrink: 0
    }

    li.icon-text-links-item a .flag {
        width: 32px;
        aspect-ratio: 4/3;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

@media(hover: hover)and (pointer: fine) {
    li.icon-text-links-item a:hover {
        text-decoration: underline
    }
}

li.icon-text-links-item.offer-style a {
    padding: 8px 16px;
    background-color: #f5f5f2;
    border: 1px solid #e4e8dc;
    border-radius: 4px;
    justify-content: space-between;
    font-size: 18px
}

    li.icon-text-links-item.offer-style a .flag {
        order: 2
    }

li.operator-routes-item {
    transition: background-color .3s ease;
    background-color: #e4e8dc
}

@media(hover: hover)and (pointer: fine) {
    li.operator-routes-item:hover {
        background-color: #d8decd
    }
}

li.operator-routes-item:first-of-type {
    border-radius: 8px 8px 0 0
}

li.operator-routes-item:last-of-type {
    border-radius: 0 0 8px 8px
}

li.operator-routes-item:not(:last-of-type) {
    border-bottom: 1px solid #b5c09e
}

li.operator-routes-item.open {
    background-color: #d8decd
}

    li.operator-routes-item.open .route-title .arrow svg {
        rotate: -90deg
    }

li.operator-routes-item .route-title {
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer
}

@media(min-width: 769px) {
    li.operator-routes-item .route-title {
        padding: 32px
    }
}

li.operator-routes-item .route-title .arrow {
    width: 24px;
    height: 24px
}

    li.operator-routes-item .route-title .arrow svg {
        transition: rotate .3s ease;
        rotate: 90deg;
        width: 100%;
        height: 100%
    }

li.operator-routes-item .available-routes {
    overflow: hidden;
    height: 0;
    transition: height .3s ease
}

    li.operator-routes-item .available-routes > div {
        border-radius: 8px;
        background-color: #fff;
        margin: 0 16px 16px 16px;
        overflow: hidden
    }

@media(min-width: 769px) {
    li.operator-routes-item .available-routes > div {
        margin: 0 32px 32px 32px
    }
}

li.operator-routes-item .available-routes > div > * {
    background-color: rgba(0,0,0,0)
}

li.operator-routes-item .available-routes > div:has(.from-to) > a:first-of-type {
    border-bottom: 4px dotted #e4e8dc
}

li.operator-routes-item .available-routes a.from-to {
    padding: 16px 32px;
    display: flex;
    flex-direction: column
}

@media(min-width: 769px) {
    li.operator-routes-item .available-routes a.from-to {
        padding: 16px 32px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 32px
    }
}

li.operator-routes-item .available-routes a.from-to img.flag, li.operator-routes-item .available-routes a.from-to div.flag {
    width: 32px;
    height: 24px;
    border-radius: 2px;
    border: 2px solid #e4e8dc
}

li.operator-routes-item .available-routes a.from-to .arrow-forward-secondary {
    width: 40px;
    height: 40px;
    align-self: flex-end
}

@media(min-width: 769px) {
    li.operator-routes-item .available-routes a.from-to .arrow-forward-secondary {
        align-self: unset;
        transform: unset
    }
}

@media(max-width: 768px) {
    li.operator-routes-item .available-routes a.from-to .arrow-forward-secondary {
        transform: rotate(90deg);
        align-self: flex-start
    }
}

li.operator-routes-item .available-routes a.from-to .port-from, li.operator-routes-item .available-routes a.from-to .port-to {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

@media(min-width: 769px) {
    li.operator-routes-item .available-routes a.from-to .port-from, li.operator-routes-item .available-routes a.from-to .port-to {
        flex: 1
    }
}

li.operator-routes-item .available-routes a.from-to .port-from .port-name, li.operator-routes-item .available-routes a.from-to .port-to .port-name {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

li.operator-routes-item .available-routes .operator-card-a {
    border: none;
    border-top: 4px dotted #e4e8dc;
    border-radius: 0;
    box-shadow: none
}

li.country-ferry-ports-item {
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    overflow: hidden;
    flex-grow: 1;
    background-color: #fff
}

    li.country-ferry-ports-item .title a, li.country-ferry-ports-item .links a {
        outline-offset: -3px;
        line-height: 1
    }

@media(hover: hover)and (pointer: fine) {
    li.country-ferry-ports-item .title a:hover, li.country-ferry-ports-item .links a:hover {
        text-decoration: underline
    }
}

@media(hover: hover)and (pointer: fine) {
    li.country-ferry-ports-item .title a:hover {
        background-color: #d4d4d4
    }
}

li.country-ferry-ports-item .title {
    background-color: #e8e8e8
}

    li.country-ferry-ports-item .title a {
        padding: 16px;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        transition: background-color .3s ease
    }

    li.country-ferry-ports-item .title img {
        width: 32px;
        height: 24px;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

    li.country-ferry-ports-item .title div {
        width: 32px;
        height: 24px;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

li.country-ferry-ports-item .links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 16px
}

    li.country-ferry-ports-item .links a {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        color: #4b5fff;
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center
    }

    li.country-ferry-ports-item .links svg.port-icon {
        fill: #212121;
        width: 24px;
        height: 24px
    }

li.featured-ship-card {
    position: relative
}

    li.featured-ship-card .image {
        aspect-ratio: 16/8;
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden
    }

        li.featured-ship-card .image:after {
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(15,90,92,.2);
            position: absolute;
            inset: 0
        }

        li.featured-ship-card .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease
        }

    li.featured-ship-card .ship-info {
        transition: background-color .3s ease;
        background-color: #0f5a5c;
        color: #fff;
        padding: 8px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;
        font-size: 14px;
        line-height: 1;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

        li.featured-ship-card .ship-info svg path {
            fill: #fff
        }

            li.featured-ship-card .ship-info svg path:not(.half) {
                stroke: #fff
            }

            li.featured-ship-card .ship-info svg path.outline {
                stroke: #fff;
                fill: none
            }

    li.featured-ship-card a.ship-name {
        border-radius: 8px;
        display: block;
        overflow: hidden
    }

@media(hover: hover)and (pointer: fine) {
    li.featured-ship-card a.ship-name:hover .image img {
        transform: scale(1.2)
    }

    li.featured-ship-card a.ship-name:hover .ship-info {
        background-color: #407a7d
    }
}

li.featured-ship-card a.ferry-line-name {
    font-size: 12px !important;
    padding: 8px !important;
    line-height: 1 !important;
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    z-index: 1
}

li.choose-ship-card {
    background-color: #e8edf0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}

    li.choose-ship-card a {
        line-height: 1.2;
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

@media(hover: hover)and (pointer: fine) {
    li.choose-ship-card a:hover {
        text-decoration: underline
    }
}

li.choose-ship-card p {
    line-height: 1;
    font-size: 14px
}

li.choose-ship-card > div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

    li.choose-ship-card > div a {
        text-decoration: underline;
        transition: color .3s ease
    }

@media(hover: hover)and (pointer: fine) {
    li.choose-ship-card > div a:hover {
        color: #7a7a7a
    }
}

section.destination-cards ul.destination-cards-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 769px) {
    section.destination-cards ul.destination-cards-list {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 1025px) {
    section.destination-cards ul.destination-cards-list {
        grid-template-columns: 1fr 1fr 1fr
    }
}

li.destination-card2 {
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    border-radius: 8px;
    background-color: #fff;
    transition: background-color .3s ease;
    overflow: hidden
}

    li.destination-card2 a {
        display: flex;
        flex-direction: row
    }

    li.destination-card2 .image {
        width: 100px;
        overflow: hidden
    }

        li.destination-card2 .image img {
            transition: transform .3s ease;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

    li.destination-card2 .text {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-grow: 1
    }

        li.destination-card2 .text .continent {
            font-family: rocky,serif;
            font-weight: 400;
            font-style: italic
        }

        li.destination-card2 .text .submit-btn {
            align-self: flex-end
        }

@media(hover: hover)and (pointer: fine) {
    li.destination-card2:hover {
        background-color: #eff0f2
    }

        li.destination-card2:hover .image img {
            transform: scale(1.2)
        }
}

section.intro .wrapper {
    gap: 24px
}

@media(min-width: 769px) {
    section.intro .wrapper {
        gap: 32px
    }
}

@media(min-width: 769px) {
    section.intro .wrapper > p, section.intro .wrapper ul li {
        font-size: 20px;
        line-height: 32px
    }
}

section.intro .wrapper .image-text-combo {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.intro .wrapper .image-text-combo {
        flex-direction: row;
        gap: 32px
    }
}

section.intro .wrapper .image-text-combo .image {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    max-width: 240px
}

    section.intro .wrapper .image-text-combo .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

section.intro .wrapper .image-text-combo .text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

section.intro .wrapper .image-text-combo .review-snapshot {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center
}

    section.intro .wrapper .image-text-combo .review-snapshot svg {
        width: 100px;
        height: auto
    }

    section.intro .wrapper .image-text-combo .review-snapshot a {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        color: #4b5fff;
        line-height: 1
    }

@media(hover: hover)and (pointer: fine) {
    section.intro .wrapper .image-text-combo .review-snapshot a:hover {
        text-decoration: underline
    }
}

section.intro .wrapper .longform-text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.intro .wrapper .longform-text {
        gap: 32px
    }
}

section.operator-ind-intro ul.links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}

@media(min-width: 769px) {
    section.operator-ind-intro ul.links {
        flex-direction: row;
        align-items: unset
    }
}

section.ship-main-intro .wrapper {
    gap: 24px
}

@media(min-width: 769px) {
    section.ship-main-intro .wrapper {
        gap: 32px
    }
}

li.ferry-offer-card {
    background-color: #f5f5f2;
    border: 1px solid #e4e8dc;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    li.ferry-offer-card {
        flex-direction: row;
        align-items: center
    }
}

li.ferry-offer-card > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}

li.ferry-offer-card a.submit-btn {
    flex-shrink: 0
}

li.popular-operators-item {
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

    li.popular-operators-item .operator-info {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

@media(min-width: 769px) {
    li.popular-operators-item .operator-info {
        align-items: center;
        flex-direction: row;
        gap: 32px
    }
}

li.popular-operators-item .operator-info .image {
    width: 140px;
    flex-shrink: 0
}

    li.popular-operators-item .operator-info .image a {
        width: 100%;
        display: block
    }

        li.popular-operators-item .operator-info .image a img {
            width: 100%
        }

li.popular-operators-item .operator-info .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    li.popular-operators-item .operator-info .text-wrap {
        gap: 32px
    }
}

li.popular-operators-item .operator-info .text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

li.popular-operators-item .operator-info .ctas {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    li.popular-operators-item .operator-info .ctas {
        flex-direction: row;
        gap: 32px
    }
}

li.popular-operators-item .popular-routes {
    height: 0;
    overflow: hidden;
    transition: height .3s ease
}

    li.popular-operators-item .popular-routes ul {
        padding: 16px;
        background: #d4d4d4;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

li.popular-operators-item .js-accordion-btn svg {
    transform: rotate(90deg);
    transition: transform .3s ease
}

li.popular-operators-item.open .js-accordion-btn svg {
    transform: rotate(-90deg)
}

section.longform-text div {
    display: flex;
    flex-direction: column;
    gap: 16px
}

section.longform-text ul {
    list-style-position: inside
}

    section.longform-text ul li {
        position: relative;
        padding-left: 16px;
        line-height: 24px
    }

        section.longform-text ul li:before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 10px;
            background-color: #212121
        }

li.price-list-item {
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

    li.price-list-item > div {
        padding: 16px;
        display: flex;
        flex-direction: column
    }

@media(min-width: 769px) {
    li.price-list-item > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 32px
    }
}

li.price-list-item > div img.flag {
    width: 32px;
    height: 24px;
    border-radius: 2px;
    border: 2px solid #e4e8dc
}

li.price-list-item > div .route-return {
    width: 40px;
    height: 40px;
    align-self: flex-end;
    transform: rotate(90deg)
}

@media(min-width: 769px) {
    li.price-list-item > div .route-return {
        align-self: unset;
        transform: unset
    }
}

li.price-list-item > div .port-from .label, li.price-list-item > div .port-to .label, li.price-list-item > div .price .label {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    li.price-list-item > div .port-from .label, li.price-list-item > div .port-to .label, li.price-list-item > div .price .label {
        display: none
    }
}

li.price-list-item > div .port-from, li.price-list-item > div .port-to {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

@media(min-width: 769px) {
    li.price-list-item > div .port-from, li.price-list-item > div .port-to {
        flex: 1
    }
}

li.price-list-item > div .port-from .port-name, li.price-list-item > div .port-to .port-name {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

li.price-list-item > div .port-from .label, li.price-list-item > div .port-to .label {
    width: 32px
}

li.price-list-item > div .price {
    padding-top: 16px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 16px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    border-top: 4px dotted #e4e8dc
}

@media(min-width: 769px) {
    li.price-list-item > div .price {
        margin-top: 0;
        border-left: 4px dotted #e4e8dc;
        border-top: none;
        padding-top: 0;
        padding-left: 32px;
        justify-content: flex-end
    }
}

div.banner-flexible-ticket {
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    div.banner-flexible-ticket {
        height: 168px;
        margin: 0 auto;
        max-width: 1168px
    }
}

div.banner-flexible-ticket a {
    display: flex;
    flex-direction: column
}

@media(min-width: 769px) {
    div.banner-flexible-ticket a {
        flex-direction: row;
        width: 100%;
        height: 100%
    }
}

div.banner-flexible-ticket a > * {
    flex: 1
}

div.banner-flexible-ticket svg.chevron-right {
    transform: scale(1.1)
}

div.banner-flexible-ticket .logo {
    display: none;
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .logo {
        display: flex
    }
}

div.banner-flexible-ticket .logo > div {
    background-color: #e4e8dc;
    padding-left: 32px;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

div.banner-flexible-ticket .logo svg.df-logo-dark {
    justify-self: center;
    max-width: 300px;
    min-width: 200px
}

div.banner-flexible-ticket .logo svg.chevron-right {
    width: 40px;
    height: 100%
}

    div.banner-flexible-ticket .logo svg.chevron-right path {
        fill: #e4e8dc
    }

div.banner-flexible-ticket .text {
    display: flex;
    position: relative;
    color: #fff;
    padding: 32px
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .text {
        padding: 0 0 0 16px;
        flex: .8;
        flex-shrink: 0
    }
}

div.banner-flexible-ticket .text > div {
    gap: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

div.banner-flexible-ticket .text p {
    z-index: 1;
    font-size: 40px;
    line-height: 1;
    text-align: center
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .text p {
        text-align: left;
        font-size: min(3vw,32px)
    }
}

div.banner-flexible-ticket .text p:nth-of-type(1) {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

div.banner-flexible-ticket .text p:nth-of-type(2) {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic
}

div.banner-flexible-ticket .image {
    width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: 4/3
}

    div.banner-flexible-ticket .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

@media(min-width: 769px) {
    div.banner-flexible-ticket .image {
        aspect-ratio: unset
    }
}

div.banner-flexible-ticket .image svg.df-logo-light {
    z-index: 1;
    position: absolute;
    bottom: 32px;
    left: 50%;
    width: 70%;
    transform: translateX(-50%)
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .image svg.df-logo-light {
        display: none
    }
}

div.banner-flexible-ticket .image svg.chevron-right {
    display: none
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .image svg.chevron-right {
        display: block;
        z-index: 1;
        width: 40px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
}

div.banner-flexible-ticket .image svg.chevron-down {
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0
}

@media(min-width: 769px) {
    div.banner-flexible-ticket .image svg.chevron-down {
        display: none
    }
}

div.banner-flexible-ticket .image img {
    width: 100.5%;
    height: 100.5%;
    object-fit: cover
}

div.banner-flexible-ticket.primary {
    background-color: #fc6446
}

    div.banner-flexible-ticket.primary svg.chevron-down path {
        fill: #fc6446
    }

    div.banner-flexible-ticket.primary div.image svg.chevron-right path {
        fill: #fc6446
    }

div.banner-flexible-ticket.tertiary {
    background-color: #0f5a5c
}

    div.banner-flexible-ticket.tertiary svg.chevron-down path {
        fill: #0f5a5c
    }

    div.banner-flexible-ticket.tertiary div.image svg.chevron-right path {
        fill: #0f5a5c
    }

.js-tabbed-content {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    .js-tabbed-content {
        gap: 32px
    }
}

.js-tabbed-content .tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e4e8dc;
    gap: 8px;
    color: #4d4d4d;
    flex-wrap: wrap
}

    .js-tabbed-content .tabs button {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        padding: 0 16px 4px 0;
        border-bottom: 2px solid rgba(0,0,0,0);
        margin-bottom: -1px;
        transition: border-bottom .3s ease,color .3s ease
    }

@media(min-width: 769px) {
    .js-tabbed-content .tabs button {
        padding: 0 24px 16px 0
    }
}

.js-tabbed-content .tabs button.active {
    color: #212121;
    border-bottom: 2px solid #fc6446
}

.js-tabbed-content .tab-content > .tab-pane:not(.active) {
    display: none;
    pointer-events: none
}

.js-tabbed-content .tab-pane #map_canvas {
    width: 100%;
    height: 450px
}

section.ferry-to-port-ind-tabs [data-tab-index="1"] > ul {
    display: flex;
    flex-direction: column;
    gap: 32px
}

    section.ferry-to-port-ind-tabs [data-tab-index="1"] > ul > li {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

section.c2c-tabs [data-tab-index="1"] ul.js-accordion, section.freight-tabs [data-tab-index="1"] ul.js-accordion {
    border-radius: 8px;
    background-color: #f0f2eb
}

    section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li:not(:last-of-type), section.freight-tabs [data-tab-index="1"] ul.js-accordion > li:not(:last-of-type) {
        border-bottom: 1px solid #e4e8dc
    }

@media(hover: hover)and (pointer: fine) {
    section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li:not(.open):hover .js-accordion-btn, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li:not(.open):hover .js-accordion-btn {
        background-color: #fff
    }
}

section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li.open .js-accordion-btn .arrow, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li.open .js-accordion-btn .arrow {
    rotate: -90deg
}

section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn {
    transition: background-color .3s ease;
    background-color: rgba(255,255,255,0);
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer
}

    section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn .arrow, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn .arrow {
        width: 20px;
        height: 20px;
        transition: rotate .3s ease;
        rotate: 90deg
    }

    section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn p, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-btn p {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal {
    height: 0;
    overflow: hidden;
    transition: height .3s ease,border .3s ease
}

    section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal > ul, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal > ul {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

        section.c2c-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal > ul li a.title, section.freight-tabs [data-tab-index="1"] ul.js-accordion > li .js-accordion-reveal > ul li a.title {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal;
            font-size: 18px;
            align-self: flex-start;
            text-decoration: underline
        }

section.routes-main-tabs .tab-content > .tab-pane {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    transition: opacity .3s ease,height .3s ease
}

@media(min-width: 1025px) {
    section.routes-main-tabs .tab-content > .tab-pane {
        grid-template-columns: 1fr 1fr
    }

        section.routes-main-tabs .tab-content > .tab-pane.ferry-ports {
            grid-template-columns: 1fr
        }
}

@media(min-width: 1025px) {
    section.routes-main-tabs .tab-content > .tab-pane .operator-card-d {
        grid-template-columns: 1fr 1fr max-content;
        justify-content: start;
        grid-template-areas: "route route route" "dates duration getPrice";
        gap: 16px
    }
}

li.ferry-alternative-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    flex-grow: 0;
    align-items: center
}

    li.ferry-alternative-card svg.compare-arrows {
        width: 24px;
        height: 24px
    }

        li.ferry-alternative-card svg.compare-arrows path {
            fill: #212121
        }

    li.ferry-alternative-card a {
        text-decoration: none
    }

@media(hover: hover)and (pointer: fine) {
    li.ferry-alternative-card a:hover {
        text-decoration: underline
    }
}

li.ferry-alternative-card p {
    line-height: 1.5
}

    li.ferry-alternative-card p br {
        display: none
    }

@media(min-width: 769px) {
    li.ferry-alternative-card p br {
        display: block
    }
}

section.ferry-gallery .images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 426px) {
    section.ferry-gallery .images {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 769px) {
    section.ferry-gallery .images {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media(min-width: 1025px) {
    section.ferry-gallery .images {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    }
}

section.ferry-gallery .images .image {
    width: 100%;
    aspect-ratio: 6/4;
    border-radius: 4px;
    overflow: hidden
}

    section.ferry-gallery .images .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

section.video .wrapper > div {
    display: flex;
    justify-content: center
}

    section.video .wrapper > div iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        max-width: 560px
    }

section.other-ships ul.other-ships-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media(min-width: 769px) {
    section.other-ships ul.other-ships-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px
    }
}

section.other-ships ul.other-ships-list li.other-ships-item {
    flex-grow: 1;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    section.other-ships ul.other-ships-list li.other-ships-item {
        flex-grow: 0
    }
}

section.other-ships ul.other-ships-list li.other-ships-item a {
    border-radius: 4px;
    background-color: #e4e8dc;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    line-height: 1;
    padding: 8px;
    transition: background-color .3s ease
}

@media(hover: hover)and (pointer: fine) {
    section.other-ships ul.other-ships-list li.other-ships-item a:hover {
        background-color: #ccd4bd
    }
}

section.other-ships ul.other-ships-list li.other-ships-item svg.ferry {
    width: 24px;
    height: 24px
}

section.other-ships ul.other-ships-list li.other-ships-item svg.arrow-right {
    width: 16px;
    margin-left: auto
}

@media(min-width: 769px) {
    section.other-ships ul.other-ships-list li.other-ships-item svg.arrow-right {
        margin-left: 32px
    }
}

section.onboard-ferries .text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    section.onboard-ferries .text {
        display: grid;
        grid-template-areas: "A C" "B B";
        gap: 16px
    }
}

section.onboard-ferries h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

@media(min-width: 769px) {
    section.onboard-ferries h2 {
        order: 1;
        gap: 16px
    }
}

section.onboard-ferries h2 svg {
    width: 32px
}

section.onboard-ferries p.lead {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 20px
}

@media(min-width: 769px) {
    section.onboard-ferries p.lead {
        order: 3
    }
}

@media(min-width: 769px) {
    section.onboard-ferries a.secondary {
        justify-self: flex-end;
        order: 2
    }
}

section.onboard-ferries .image {
    width: 100%;
    height: 186px;
    border-radius: 8px;
    overflow: hidden
}

    section.onboard-ferries .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.boldLink {
    -webkit-font-smoothing: antialiased !important;
    font-weight: 700 !important;
    text-decoration: underline
}

li.text-accordion-item {
    border-bottom: 1px solid #0f5a5c;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color .3s ease;
    padding: 16px 0
}

    li.text-accordion-item.open .js-accordion-btn .arrow svg {
        rotate: -180deg
    }

    li.text-accordion-item .js-accordion-btn {
        display: flex;
        flex-direction: row;
        cursor: pointer
    }

        li.text-accordion-item .js-accordion-btn .title {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

            li.text-accordion-item .js-accordion-btn .title p {
                font-family: mundial-demibold,sans-serif !important;
                font-weight: 600;
                font-style: normal;
                font-size: 20px
            }

        li.text-accordion-item .js-accordion-btn .arrow {
            margin-left: auto;
            rotate: 90deg
        }

            li.text-accordion-item .js-accordion-btn .arrow svg {
                transition: rotate .3s ease;
                width: 20px
            }

    li.text-accordion-item .text {
        height: 0;
        overflow: hidden;
        transition: height .3s ease
    }

section.subscribe-login {
    padding: 32px 0
}

    section.subscribe-login iframe {
        width: 100%;
        display: block;
        max-width: 1200px;
        margin: 0 auto;
        border: none;
        border-radius: 8px;
        min-height: 270px
    }

    section.subscribe-login form {
        background-color: #fff;
        border-radius: 8px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

@media(min-width: 1025px) {
    section.subscribe-login form {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap
    }
}

section.subscribe-login form > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1
}

@media(min-width: 769px) {
    section.subscribe-login form button {
        align-self: flex-start;
        margin-top: 34px
    }
}

section.subscribe-login form a.forgot {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(hover: hover)and (pointer: fine) {
    section.subscribe-login form a.forgot:hover {
        text-decoration: underline
    }
}

section.narrow-hero {
    margin: 0 auto;
    position: relative;
    height: 320px;
    overflow: hidden
}

@media(min-width: 769px) {
    section.narrow-hero {
        height: 264px;
        min-height: unset
    }
}

@media(min-width: 1200px) {
    section.narrow-hero {
        margin-top: 0
    }
}

section.narrow-hero .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%
}

@media(min-width: 769px) {
    section.narrow-hero .wrapper {
        flex-direction: row;
        height: 100%
    }
}

section.narrow-hero .text {
    padding: 32px;
    position: absolute;
    z-index: 1
}

@media(min-width: 769px) {
    section.narrow-hero .text {
        position: relative;
        align-self: center;
        padding: 0;
        width: 50%
    }
}

section.narrow-hero .text .title {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 1
}

@media(min-width: 769px) {
    section.narrow-hero .text .title {
        font-size: 32px
    }
}

section.narrow-hero .text .subtitle {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    margin-top: 10px
}

@media(min-width: 769px) {
    section.narrow-hero .text .subtitle {
        font-size: 32px;
        margin-top: 10px
    }
}

section.narrow-hero .image {
    aspect-ratio: 16/9;
    position: relative;
    margin: 0 -16px;
    height: 100%
}

    section.narrow-hero .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

@media(min-width: 769px) {
    section.narrow-hero .image {
        aspect-ratio: unset;
        position: absolute;
        width: 50%;
        height: 264px;
        margin: 0;
        right: 0
    }

        section.narrow-hero .image:after {
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(15,90,92,.2);
            position: absolute;
            inset: 0
        }
}

section.narrow-hero .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

@media(min-width: 769px) {
    section.narrow-hero .image img {
        object-position: center
    }
}

section.narrow-hero .image .chevron-right {
    display: none
}

@media(min-width: 769px) {
    section.narrow-hero .image .chevron-right {
        z-index: 1;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: auto
    }
}

section.narrow-hero.primary {
    color: #fff
}

@media(min-width: 769px) {
    section.narrow-hero.primary {
        background-color: #fc6446
    }
}

section.narrow-hero.primary .text-block {
    background-color: #fc6446
}

@media(min-width: 769px) {
    section.narrow-hero.primary .text-block {
        background-color: rgba(0,0,0,0)
    }
}

section.narrow-hero.primary .chevron-right, section.narrow-hero.primary .chevron-down {
    fill: #fc6446
}

section.narrow-hero.secondary {
    color: #fff
}

@media(min-width: 769px) {
    section.narrow-hero.secondary {
        background-color: #e4e8dc
    }
}

section.narrow-hero.secondary .text-block {
    background-color: #e4e8dc
}

@media(min-width: 769px) {
    section.narrow-hero.secondary .text-block {
        background-color: rgba(0,0,0,0)
    }
}

section.narrow-hero.secondary .chevron-right, section.narrow-hero.secondary .chevron-down {
    fill: #e4e8dc
}

section.narrow-hero.tertiary {
    color: #fff
}

@media(min-width: 769px) {
    section.narrow-hero.tertiary {
        background-color: #0f5a5c
    }
}

section.narrow-hero.tertiary .text-block {
    background-color: #0f5a5c
}

@media(min-width: 769px) {
    section.narrow-hero.tertiary .text-block {
        background-color: rgba(0,0,0,0)
    }
}

section.narrow-hero.tertiary .chevron-right, section.narrow-hero.tertiary .chevron-down {
    fill: #0f5a5c
}

section.accommodation-types {
    padding: 32px 0
}

    section.accommodation-types > .wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px
    }

@media(min-width: 769px) {
    section.accommodation-types > .wrapper {
        flex-direction: row !important;
        gap: 32px
    }
}

section.accommodation-types .accommodation-type {
    width: 100%
}

    section.accommodation-types .accommodation-type a {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

@media(hover: hover)and (pointer: fine) {
    section.accommodation-types .accommodation-type a:hover h2 {
        text-decoration: underline
    }

    section.accommodation-types .accommodation-type a:hover .image img {
        transform: scale(1.2)
    }
}

section.accommodation-types .accommodation-type h2 {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 20px
}

section.accommodation-types .accommodation-type .image {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden
}

    section.accommodation-types .accommodation-type .image:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

    section.accommodation-types .accommodation-type .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease
    }

li.mini-cruise-card {
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px
}

@media(min-width: 1025px) {
    li.mini-cruise-card {
        flex-direction: row;
        gap: 32px;
        align-items: center
    }
}

li.mini-cruise-card .image {
    width: 140px;
    flex-shrink: 0
}

    li.mini-cruise-card .image a {
        width: 100%;
        display: block
    }

        li.mini-cruise-card .image a img {
            width: 100%
        }

li.mini-cruise-card .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    li.mini-cruise-card .text-wrap {
        gap: 32px
    }
}

li.mini-cruise-card .text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(hover: hover)and (pointer: fine) {
    li.mini-cruise-card .text > a:hover {
        text-decoration: underline
    }
}

.intro-dropdown-selects {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    .intro-dropdown-selects {
        align-items: end;
        flex-direction: row
    }
}

.intro-dropdown-selects p {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

@media(min-width: 769px) {
    .intro-dropdown-selects p {
        margin-bottom: 16px
    }
}

@media(min-width: 769px) {
    .intro-dropdown-selects .select-wrapper {
        flex-grow: 1;
        max-width: 50%
    }
}

ul.share-links {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap
}

@media(min-width: 769px) {
    ul.share-links {
        flex-direction: row
    }
}

ul.share-links li a {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center
}

@media(hover: hover)and (pointer: fine) {
    ul.share-links li a:hover {
        text-decoration: underline
    }
}

ul.share-links li svg {
    width: 24px;
    height: 24px
}

    ul.share-links li svg path {
        fill: #212121
    }

body.df-signin {
    background-color: #f0f2eb
}

    body.df-signin #template-monolith-redirect-modal {
        display: none
    }

    body.df-signin nav.navbar {
        background-color: #0f5a5c;
        color: #fff
    }

    body.df-signin main .container {
        max-width: 1200px;
        display: flex;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        padding-left: 16px;
        padding-right: 16px
    }

        body.df-signin main .container > .row {
            display: flex;
            flex-direction: row;
            gap: 32px
        }

            body.df-signin main .container > .row > div:nth-of-type(1), body.df-signin main .container > .row > div:nth-of-type(3) {
                flex-basis: 25%
            }

            body.df-signin main .container > .row > div:nth-of-type(2) {
                flex-basis: 50%
            }

    body.df-signin main .df-middle-content .card-title h3 {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 32px;
        line-height: 40px
    }

section.blog-hero {
    min-height: 370px;
    position: relative
}

@media(min-width: 769px) {
    section.blog-hero {
        min-height: 440px
    }
}

@media(min-width: 1025px) {
    section.blog-hero {
        min-height: 740px
    }
}

section.blog-hero .text {
    position: relative;
    z-index: 3;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 16px;
    height: 300px
}

@media(min-width: 769px) {
    section.blog-hero .text {
        height: max-content;
        margin: 0 auto
    }
}

@media(min-width: 1025px) {
    section.blog-hero .text {
        max-width: 1200px;
        margin-top: 30px
    }
}

section.blog-hero .text > div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media(min-width: 769px) {
    section.blog-hero .text > div:first-of-type {
        max-width: 600px
    }
}

@media(min-width: 1025px) {
    section.blog-hero .text > div:first-of-type {
        gap: 16px
    }
}

section.blog-hero .text h1 {
    line-height: 1;
    font-size: 32px
}

@media(min-width: 769px) {
    section.blog-hero .text h1 {
        font-size: 40px
    }
}

section.blog-hero .text p {
    font-family: rocky,serif;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    font-size: 16px
}

@media(min-width: 769px) {
    section.blog-hero .text p {
        font-size: 32px
    }
}

section.blog-hero .image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

@media(min-width: 769px) {
    section.blog-hero .image {
        height: 84vh
    }
}

@media(min-width: 1025px) {
    section.blog-hero .image {
        height: calc(84vh + 120px)
    }
}

@media(min-width: 1200px) {
    section.blog-hero .image {
        height: calc(84vh + 120px)
    }
}

@media(min-width: 2000px) {
    section.blog-hero .image {
        height: 43vw;
        max-height: 1000px
    }
}

section.blog-hero .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(min-width: 1025px) {
    section.blog-hero .image img {
        object-position: top right
    }
}

section.blog-hero .image .overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(33, 33, 33, 0) 50%);
    z-index: 1;
    opacity: .7
}

section.blog-hero .image svg {
    width: 100%;
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 2
}

    section.blog-hero .image svg path {
        fill: #e4e8dc
    }

@media(max-width: 768px) {
    section.blog-hero .inner {
        display: flex;
        flex-direction: column
    }
}

section.blog-hero .inner .dealfinder-widget-wrapper {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    width: 100%;
    padding: 48px 16px 16px;
    min-height: 640px;
    order: 1
}

@media(max-width: 768px) {
    section.blog-hero .inner .dealfinder-widget-wrapper {
        background-color: #0f5a5c;
        padding-top: 0
    }
}

@media(min-width: 769px) {
    section.blog-hero .inner .dealfinder-widget-wrapper {
        order: 1;
        margin: 0 auto;
        min-height: initial;
        padding-left: 16px;
        padding-right: 16px
    }
}

@media(min-width: 1200px) {
    section.blog-hero .inner .dealfinder-widget-wrapper {
        margin: 0 auto
    }
}

@media(max-width: 768px) {
    section.blog-hero .inner .dealfinder-widget-wrapper .wrapper {
        padding: 0
    }
}

#blog-sidebar {
    border-radius: 8px;
    padding: 16px;
    background-color: #fafaf7;
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 1025px) {
    #blog-sidebar {
        width: 180px;
        flex-shrink: 0
    }
}

@media(min-width: 1025px) {
    #blog-sidebar {
        border-radius: 16px;
        width: 280px;
        flex-shrink: 0
    }
}

#blog-sidebar .categories {
    display: flex;
    flex-direction: column;
    gap: 16px
}

    #blog-sidebar .categories ul {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap
    }

@media(min-width: 1025px) {
    #blog-sidebar .categories ul a {
        min-width: 150px;
        justify-content: flex-start
    }
}

#blog-sidebar .popular {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 1025px) {
    #blog-sidebar .popular {
        overflow: hidden
    }
}

#blog-sidebar .popular ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 769px) {
    #blog-sidebar .popular ul {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 1025px) {
    #blog-sidebar .popular ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: auto
    }
}

@media(min-width: 1025px) {
    #blog-sidebar .popular ul li {
        padding: 16px 0;
        width: 100%;
        border-bottom: 1px solid #d4d4d4
    }

        #blog-sidebar .popular ul li:first-of-type {
            padding-top: 0
        }
}

#blog-sidebar .popular ul a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    line-height: 1
}

@media(hover: hover)and (pointer: fine) {
    #blog-sidebar .popular ul a:hover img {
        transform: scale(1.2)
    }
}

#blog-sidebar .popular ul .image {
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px
}

    #blog-sidebar .popular ul .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease
    }

#blog-sidebar .ad {
    width: 100%;
    display: block
}

    #blog-sidebar .ad img {
        width: 100%
    }

body.blog-home {
    background-color: #e4e8dc
}

    body.blog-home #blog-columns .left {
        background-color: rgba(0,0,0,0);
        padding: 0;
        border-radius: 0;
        min-width: 0
    }

    body.blog-home section.featured-post {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
    }

@media(min-width: 769px) {
    body.blog-home section.featured-post {
        border-radius: 16px;
        flex-direction: row-reverse
    }
}

@media(min-width: 1025px) {
    body.blog-home section.featured-post {
        height: 434px
    }
}

@media(min-width: 769px) {
    body.blog-home section.featured-post .image {
        flex: 1
    }
}

body.blog-home section.featured-post .image a {
    display: block;
    overflow: hidden;
    height: 100%;
    position: relative;
    aspect-ratio: 16/9
}

    body.blog-home section.featured-post .image a:after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(15,90,92,.2);
        position: absolute;
        inset: 0
    }

@media(hover: hover)and (pointer: fine) {
    body.blog-home section.featured-post .image a:hover img {
        transform: scale(1.2)
    }
}

@media(min-width: 769px) {
    body.blog-home section.featured-post .image a {
        aspect-ratio: unset
    }
}

body.blog-home section.featured-post .image img {
    transition: transform .3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center
}

body.blog-home section.featured-post .image .chevron-right {
    display: none
}

@media(min-width: 1025px) {
    body.blog-home section.featured-post .image .chevron-right {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        fill: #0f5a5c;
        height: 100%
    }
}

body.blog-home section.featured-post .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    background-color: #0f5a5c;
    color: #fff;
    padding: 16px
}

@media(min-width: 769px) {
    body.blog-home section.featured-post .text {
        flex: 1;
        gap: 16px;
        padding: 32px
    }
}

body.blog-home section.featured-post .text a {
    color: #fff
}

body.blog-home section.featured-post .text h2 {
    line-height: 24px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

body.blog-home section.featured-post .text > p {
    font-size: 14px
}

@media(min-width: 769px) {
    body.blog-home section.featured-post .text > p {
        font-size: 16px
    }
}

@media(min-width: 1025px) {
    body.blog-home section.featured-post .text > p {
        flex-grow: 1;
        overflow: hidden;
        flex-basis: 0
    }
}

body.blog-home section.featured-post .text .author-date {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    body.blog-home section.featured-post .text .author-date .author {
        font-family: rocky,serif !important;
        font-weight: 700;
        font-style: italic;
        font-size: 14px;
        line-height: 1
    }

    body.blog-home section.featured-post .text .author-date .date {
        font-size: 12px;
        line-height: 1
    }

body.blog-home section.featured-post.uplift-image-only .text {
    display: none
}

body.blog-home section.featured-post.uplift-image-only .image {
    height: auto;
    margin: 0 auto;
    flex: 0 0 auto;
    width: fit-content;
    display: inline-block;
    line-height: 0
}

    body.blog-home section.featured-post.uplift-image-only .image:after, body.blog-home section.featured-post.uplift-image-only .image a:after {
        content: none
    }

body.blog-home section.featured-post.uplift-image-only .chevron-right {
    display: none !important
}

@media(max-width: 768px) {
    body.blog-home section.featured-post.uplift-image-only {
        height: 250px;
        overflow: hidden
    }

        body.blog-home section.featured-post.uplift-image-only .image {
            display: flex;
            aspect-ratio: auto;
            width: 100%;
            max-width: 300px;
            height: 250px;
            margin: 0 auto
        }

            body.blog-home section.featured-post.uplift-image-only .image img {
                width: 100%;
                height: 100%;
                object-fit: contain
            }
}

@media(min-width: 769px)and (max-width: 1024px) {
    body.blog-home section.featured-post.uplift-image-only {
        display: block
    }

        body.blog-home section.featured-post.uplift-image-only .image {
            aspect-ratio: auto;
            width: 728px;
            max-width: 728px;
            margin: 0 auto
        }

            body.blog-home section.featured-post.uplift-image-only .image img {
                height: auto
            }
}

@media(min-width: 1025px) {
    body.blog-home section.featured-post.uplift-image-only {
        height: auto
    }
}

body.blog-home section.latest-posts {
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media(min-width: 769px) {
    body.blog-home section.latest-posts {
        gap: 16px
    }
}

@media(min-width: 769px) {
    body.blog-home .title-bar {
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap
    }
}

body.blog-home .title-bar h2 {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

body.blog-home .filters {
    display: none
}

@media(min-width: 769px) {
    body.blog-home .filters {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center
    }
}

@media(min-width: 769px) {
    body.blog-home .filters ul {
        display: flex;
        flex-direction: row;
        gap: 16px
    }
}

body.blog-home .filters ul button:not(.outline) {
    pointer-events: none
}

body.blog-home .filters span {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 18px
}

body.blog-home .blog-posts {
    padding: 0 16px 16px 16px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width: 769px) {
    body.blog-home .blog-posts {
        padding: 32px;
        gap: 32px
    }
}

body.blog-home ul.blog-card-list {
    display: grid;
    grid-template-columns: 1fr
}

@media(min-width: 769px) {
    body.blog-home ul.blog-card-list {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }
}

@media(min-width: 1025px) {
    body.blog-home ul.blog-card-list {
        grid-template-columns: 1fr 1fr 1fr
    }
}

body.blog-home section.blog-popular-articles {
    display: flex;
    flex-direction: column;
    gap: 32px
}

body.blog-category {
    background-color: #e4e8dc
}

main#blog-category-main {
    padding: 0 16px;
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 16px auto 32px auto
}

@media(min-width: 1025px) {
    main#blog-category-main {
        max-width: 1200px;
        margin: -250px auto 64px auto
    }
}

main#blog-category-main > div {
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px
}

@media(min-width: 769px) {
    main#blog-category-main > div {
        padding: 32px;
        border-radius: 16px
    }
}

@media(min-width: 1025px) {
    main#blog-category-main > div {
        gap: 32px
    }
}

main#blog-category-main section.latest-posts {
    display: flex;
    flex-direction: column;
    gap: 16px
}

    main#blog-category-main section.latest-posts ul.blog-card-list {
        display: grid;
        grid-template-columns: 1fr
    }

@media(min-width: 769px) {
    main#blog-category-main section.latest-posts ul.blog-card-list {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }
}

@media(min-width: 1025px) {
    main#blog-category-main section.latest-posts ul.blog-card-list {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

body.blog-post {
    background-color: #e4e8dc
}

    body.blog-post section.blog-post {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-bottom: 32px
    }

@media(min-width: 769px) {
    body.blog-post section.blog-post {
        padding-bottom: 64px;
        max-width: 900px
    }
}

body.blog-post section.blog-post .post-info {
    gap: 8px !important
}

    body.blog-post section.blog-post .post-info .author, body.blog-post section.blog-post .post-info .date {
        font-size: 14px;
        line-height: 1
    }

    body.blog-post section.blog-post .post-info .author {
        font-family: rocky,serif !important;
        font-weight: 700;
        font-style: italic
    }

    body.blog-post section.blog-post .post-info .date {
        font-family: mundial-light,sans-serif !important;
        font-weight: 300 !important;
        font-style: normal !important;
        color: #a6a6a6
    }

body.blog-post section.blog-post h1 {
    position: relative;
    padding-bottom: 32px
}

    body.blog-post section.blog-post h1:after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 180px;
        height: 2px;
        background-color: #4b5fff
    }

body.blog-post section.blog-post .image {
    max-width: 500px;
    height: auto;
    border-radius: 8px;
    overflow: hidden
}

@media(min-width: 769px) {
    body.blog-post section.blog-post .image {
        max-width: 800px
    }
}

body.blog-post section.blog-post .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main#blog-columns {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
    gap: 16px;
    margin: 16px auto 32px auto
}

@media(min-width: 1025px) {
    main#blog-columns {
        max-width: 1200px;
        flex-direction: row;
        margin: -300px auto 32px auto
    }
}

@media(min-width: 1025px) {
    main#blog-columns {
        gap: 32px
    }
}

main#blog-columns .left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px
}

@media(min-width: 1025px) {
    main#blog-columns .left {
        flex-grow: 1;
        gap: 32px;
        padding: 32px;
        border-radius: 16px
    }
}

body#load-mask {
    background-color: #fafaf7;
    height: 100vh
}

    body#load-mask #container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 20px;
        padding: 0 20px;
        margin: 0 auto;
        overflow: hidden
    }

@media(min-width: 769px) {
    body#load-mask #container {
        width: 50%
    }
}

body#load-mask #container p {
    font-size: 20px;
    text-align: center
}

@media(min-width: 769px) {
    body#load-mask #container p {
        max-width: 430px
    }
}

body#load-mask #logo {
    width: 100%
}

    body#load-mask #logo svg {
        width: 100%
    }

body#load-mask #operators {
    position: relative;
    margin-top: 20px;
    width: 410px;
    overflow: hidden
}

    body#load-mask #operators:before, body#load-mask #operators:after {
        content: "";
        width: 30%;
        height: 120%;
        position: absolute;
        background: linear-gradient(90deg, #FAFAF7 80%, rgba(250, 250, 247, 0) 100%);
        z-index: 10
    }

    body#load-mask #operators:before {
        top: -10%;
        left: -10%
    }

    body#load-mask #operators:after {
        right: -10%;
        top: -10%;
        transform: scaleX(-1)
    }

    body#load-mask #operators > div {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: left;
        width: 100%;
        padding: 15px 0
    }

    body#load-mask #operators span {
        flex-shrink: 0;
        display: block;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        width: 130px
    }

        body#load-mask #operators span img {
            width: 100%;
            height: 100%
        }

section.home-hero .image {
    overflow: hidden
}

    section.home-hero .image img {
        transform-origin: right bottom
    }

section.home-hero div.text-wrapper span {
    display: block;
    animation: textReveal 1.5s 1 ease forwards;
    transform-origin: left bottom;
    opacity: 0
}

    section.home-hero div.text-wrapper span:first-child {
        animation-delay: 1s
    }

    section.home-hero div.text-wrapper span:last-child {
        animation-delay: 3s
    }

@keyframes scaleSlowly {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.1)
    }
}

@keyframes textReveal {
    0% {
        transform: translateY(30px);
        opacity: 0;
        filter: blur(5px)
    }

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

@keyframes opacityShow {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opacityHide {
    0% {
        opacity: 1;
        z-index: 4
    }

    50% {
        opacity: 1;
        z-index: 4
    }

    100% {
        opacity: 0;
        z-index: -10
    }
}

@keyframes removeHeight {
    0% {
        height: 100%
    }

    100% {
        height: 0
    }
}

.fsOverlay.show {
    background: rgba(0,0,0,.5607843137);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: opacityShow 2s forwards;
    max-height: unset !important;
    z-index: 4
}

.fsOverlay.hide {
    background: rgba(0,0,0,.5607843137);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: opacityHide 2s forwards 0s,removeHeight 1s forwards 2s;
    display: none !important
}

.fsOverlayPop {
    position: relative;
    width: 100%;
    z-index: 20
}

header#booking-funnel-nav {
    padding: 16px 32px;
    position: relative;
    z-index: 999;
    height: 76px
}

@media(min-width: 769px) {
    header#booking-funnel-nav {
        background-color: #fff
    }
}

@media(min-width: 1200px) {
    header#booking-funnel-nav {
        height: 90px;
        display: block
    }
}

header#booking-funnel-nav > .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: unset;
    padding: 0;
    height: 100%;
    align-items: center
}

@media(min-width: 374px) {
    header#booking-funnel-nav .logo {
        width: 230px;
        height: 45px
    }
}

@media(min-width: 769px) {
    header#booking-funnel-nav .logo {
        width: 240px;
        height: 46px
    }
}

header#booking-funnel-nav .logo a {
    display: block
}

header#booking-funnel-nav .logo .text path {
    fill: #fff
}

@media(min-width: 769px) {
    header#booking-funnel-nav .logo .text path {
        fill: #212121
    }
}

div.booking-engine-header {
    color: #fff
}

@media(min-width: 769px) {
    div.booking-engine-header {
        background-color: #e4e8dc;
        color: #212121;
        padding: 12px 0
    }
}

div.booking-engine-header span {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    line-height: 1
}

.error-modal {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px
}

    .error-modal .text {
        display: flex;
        flex-direction: column;
        gap: 16px
    }

        .error-modal .text .title {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center
        }

            .error-modal .text .title svg {
                width: 24px;
                height: 24px
            }

            .error-modal .text .title span {
                font-size: 18px;
                font-family: mundial-demibold,sans-serif !important;
                font-weight: 600;
                font-style: normal
            }

table.price-table {
    border-spacing: 0 16px
}

    table.price-table thead {
        display: none;
        text-align: left
    }

@media(min-width: 769px) {
    table.price-table thead {
        display: table-header-group
    }
}

table.price-table thead th {
    font-size: 14px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

    table.price-table thead th:last-of-type {
        text-align: right
    }

table.price-table tbody tr {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.24))
}

table.price-table tbody td {
    background-color: #f5f5f2;
    padding: 16px;
    display: block;
    width: 100%
}

@media(min-width: 769px) {
    table.price-table tbody td {
        display: table-cell
    }
}

table.price-table tbody td.from {
    border-radius: 8px 8px 0 0
}

@media(min-width: 769px) {
    table.price-table tbody td.from {
        border-radius: 8px 0 0 8px
    }
}

table.price-table tbody td.price {
    border-radius: 0px 0px 8px 8px
}

@media(min-width: 769px) {
    table.price-table tbody td.price {
        border-radius: 0 8px 8px 0
    }
}

@media(min-width: 769px) {
    table.price-table tbody td.from, table.price-table tbody td.to {
        width: 37.5%
    }
}

table.price-table tbody td.from > div, table.price-table tbody td.to > div {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

    table.price-table tbody td.from > div > span, table.price-table tbody td.to > div > span {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        width: 35px
    }

@media(min-width: 769px) {
    table.price-table tbody td.from > div > span, table.price-table tbody td.to > div > span {
        display: none
    }
}

table.price-table tbody td.from div.location, table.price-table tbody td.to div.location {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

    table.price-table tbody td.from div.location img.flag, table.price-table tbody td.from div.location div.flag, table.price-table tbody td.to div.location img.flag, table.price-table tbody td.to div.location div.flag {
        width: 32px;
        height: 24px;
        border-radius: 2px;
        border: 2px solid #e4e8dc
    }

    table.price-table tbody td.from div.location span, table.price-table tbody td.to div.location span {
        display: block
    }

        table.price-table tbody td.from div.location span:nth-of-type(1), table.price-table tbody td.to div.location span:nth-of-type(1) {
            font-family: mundial-demibold,sans-serif !important;
            font-weight: 600;
            font-style: normal
        }

        table.price-table tbody td.from div.location span:nth-of-type(2), table.price-table tbody td.to div.location span:nth-of-type(2) {
            font-weight: 400
        }

table.price-table tbody td.icon {
    text-align: right;
    height: 0;
    padding: 0 16px
}

    table.price-table tbody td.icon svg {
        transform: rotate(90deg);
        margin-top: -20px
    }

@media(min-width: 769px) {
    table.price-table tbody td.icon {
        width: 10%;
        height: auto;
        padding: 16px
    }

        table.price-table tbody td.icon svg {
            transform: rotate(0);
            margin-top: 0
        }
}

table.price-table tbody td.price {
    position: relative
}

@media(min-width: 769px) {
    table.price-table tbody td.price {
        width: 15%;
        text-align: right
    }
}

table.price-table tbody td.price:before {
    content: "";
    width: 100%;
    border-top: 4px dotted #e4e8dc;
    position: absolute;
    top: 0;
    left: 0
}

@media(min-width: 769px) {
    table.price-table tbody td.price:before {
        height: 100%;
        width: auto;
        border-left: 4px dotted #e4e8dc;
        border-top: none
    }
}

table.price-table tbody td.price span {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 18px
}

    table.price-table tbody td.price span:nth-of-type(1) {
        margin-right: 8px
    }

@media(min-width: 769px) {
    table.price-table tbody td.price span:nth-of-type(1) {
        display: none
    }
}

section.inactive-route-box .inactive-lp {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

section.inactive-route-box .inactive-lp--head {
    background-color: #ffd584;
    padding: 16px;
    text-align: center;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal
}

section.inactive-route-box .inactive-lp--body {
    padding: 16px;
    background-color: #fff8eb;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 16px
}

    section.inactive-route-box .inactive-lp--body ul {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

        section.inactive-route-box .inactive-lp--body ul a {
            text-decoration: underline
        }

#exit-intent {
    z-index: 999;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

    #exit-intent.active {
        display: block;
        pointer-events: all
    }

        #exit-intent.active .message-box {
            transform: translate(-50%, -50%);
            opacity: 1
        }

        #exit-intent.active .bg {
            opacity: 1
        }

    #exit-intent > .message-box {
        transition: .3s transform ease-in-out,.3s opacity ease-in-out;
        transition-delay: .15s;
        background: #fff;
        border-radius: 8px;
        width: 80%;
        padding: 16px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
        align-items: flex-start;
        z-index: 1;
        border: 2px solid #fc6446;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        opacity: 0
    }

@media(min-width: 769px) {
    #exit-intent > .message-box {
        width: 500px;
        padding: 32px
    }
}

#exit-intent > .message-box .df-logo-dark {
    width: 150px
}

#exit-intent .bg {
    transition: .3s opacity ease-in-out;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    background-color: rgba(33,33,33,.7);
    opacity: 0
}

#enter-intent {
    z-index: 999;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

    #enter-intent.active {
        display: block;
        pointer-events: all
    }

        #enter-intent.active .message-box {
            transform: translate(-50%, -50%);
            opacity: 1
        }

        #enter-intent.active .bg {
            opacity: 1
        }

    #enter-intent > .message-box {
        transition: .3s transform ease-in-out,.3s opacity ease-in-out;
        transition-delay: .15s;
        background: #fff;
        border-radius: 8px;
        width: 80%;
        padding: 16px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
        align-items: flex-start;
        z-index: 1;
        border: 2px solid #fc6446;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25);
        opacity: 0
    }

@media(min-width: 769px) {
    #enter-intent > .message-box {
        width: 500px;
        padding: 32px
    }
}

#enter-intent > .message-box .df-logo-dark {
    width: 150px
}

#enter-intent .bg {
    transition: .3s opacity ease-in-out;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    background-color: rgba(33,33,33,.7);
    opacity: 0
}

#exit-intent-banner {
    background-color: #e4e8dc;
    padding: 8px 32px;
    text-align: center;
    position: relative;
    font-size: 12px
}

@media(min-width: 769px) {
    #exit-intent-banner {
        font-size: 14px;
        padding: 16px 24px
    }
}

#exit-intent-banner a {
    transition: opacity .3s ease-in-out;
    color: #fff
}

    #exit-intent-banner a:hover {
        opacity: .6
    }

#exit-intent-banner .close {
    transition: opacity .3s ease-in-out;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    z-index: 999;
    pointer-events: auto
}

    #exit-intent-banner .close:hover {
        opacity: .6
    }

#exit-intent-banner svg {
    width: 100%;
    height: 100%
}

    #exit-intent-banner svg path {
        fill: #212121
    }

#df-logo-animation {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    transform: scale(0.6)
}

@media(min-width: 769px) {
    #df-logo-animation {
        width: 370px;
        transform: scale(1)
    }
}

#df-logo-animation .disc-outer {
    position: relative;
    left: 120px;
    animation: scaleAndMove 5s cubic-bezier(0.34, 1.5, 0.64, 1) infinite
}

#df-logo-animation svg.disc {
    position: relative;
    animation: rotate 5s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
    transform-origin: center
}

#df-logo-animation svg.text > * {
    animation: fadeIn 5s ease-in-out infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    10% {
        transform: rotate(0deg)
    }

    30% {
        transform: rotate(-360deg)
    }

    70% {
        transform: rotate(-360deg)
    }

    90% {
        transform: rotate(0deg)
    }

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

@keyframes scaleAndMove {
    0% {
        transform: scale(0)
    }

    10% {
        transform: scale(1)
    }

    30% {
        transform: translateX(-120px) scale(1);
        animation-delay: .5s
    }

    70% {
        transform: translateX(-120px) scale(1);
        animation-delay: .5s
    }

    90% {
        transform: translateX(0px) scale(1)
    }

    100% {
        transform: translateX(0px) scale(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

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

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

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

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

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

@keyframes scaleUp {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@keyframes scaleDown {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

body#CustomPage .cms-content h1 {
    font-size: 24px
}

@media(min-width: 769px) {
    body#CustomPage .cms-content h1 {
        font-size: 32px
    }
}

body#CustomPage .cms-content h2 {
    font-size: 20px
}

@media(min-width: 769px) {
    body#CustomPage .cms-content h2 {
        font-size: 24px
    }
}

body#CustomPage .cms-content h3 {
    font-size: 20px
}

body#CustomPage .cms-content h4 {
    font-size: 18px;
    font-weight: 600
}

@media(hover: hover)and (pointer: fine) {
    body#CustomPage .cms-content h1 a:hover, body#CustomPage .cms-content h2 a:hover, body#CustomPage .cms-content h3 a:hover, body#CustomPage .cms-content h4 a:hover {
        text-decoration: underline
    }
}

body#CustomPage .cms-content ul {
    list-style-position: inside;
    padding-left: 16px
}

    body#CustomPage .cms-content ul li {
        position: relative;
        padding-left: 16px
    }

        body#CustomPage .cms-content ul li:before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 10px;
            background-color: #212121
        }

@media(min-width: 769px) {
    li.popular-blog-post-card {
        display: flex
    }
}

li.popular-blog-post-card a {
    display: flex;
    gap: 16px;
    width: 100%;
    white-space: normal;
    flex-direction: column;
    align-items: flex-start;
    padding: 0
}

@media(hover: hover)and (pointer: fine) {
    li.popular-blog-post-card a:hover img {
        transform: scale(1.2)
    }
}

li.popular-blog-post-card .image {
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 16/9
}

    li.popular-blog-post-card .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease
    }

li.popular-blog-post-card .post-info {
    width: 100%
}

    li.popular-blog-post-card .post-info .text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start
    }

        li.popular-blog-post-card .post-info .text > div {
            display: flex;
            flex-direction: row;
            gap: 8px;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            width: 100%
        }

            li.popular-blog-post-card .post-info .text > div .date {
                font-family: mundial-light,sans-serif !important;
                font-weight: 300 !important;
                font-style: normal !important;
                font-size: 12px
            }

        li.popular-blog-post-card .post-info .text h2 {
            font-weight: 600;
            font-size: 20px;
            line-height: 1.2
        }

li.blog-card-skeleton-loading {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #d4d4d4
}

@media(min-width: 769px) {
    li.blog-card-skeleton-loading {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        border: none
    }
}

li.blog-card-skeleton-loading .blank {
    background-color: rgba(232,232,232,.5)
}

li.blog-card-skeleton-loading .image {
    width: 100%
}

li.blog-card-skeleton-loading .tag, li.blog-card-skeleton-loading .date, li.blog-card-skeleton-loading .title {
    width: 100%;
    height: 20px;
    border-radius: 4px
}

li.blog-card-skeleton-loading .tag {
    max-width: 100px
}

li.blog-card-skeleton-loading .date {
    max-width: 70px
}

@media(min-width: 769px) {
    li.blog-card-skeleton-loading .tag, li.blog-card-skeleton-loading .date {
        max-width: unset;
        width: auto;
        flex: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: .7
    }

    100% {
        opacity: 1
    }
}

li.blog-card-skeleton-loading .image, li.blog-card-skeleton-loading title, li.blog-card-skeleton-loading .text > div {
    animation: fadeIn .6s ease-in-out infinite alternate
}

li.blog-card-skeleton-loading .image {
    animation-delay: 0s
}

li.blog-card-skeleton-loading .title {
    animation-delay: .4s
}

li.blog-card-skeleton-loading .text > div:nth-of-type(1) {
    animation-delay: .8s
}

.ck-content ul {
    list-style-type: disc;
    list-style-position: inside;
    font-size: 16px !important;
    line-height: 20px !important
}

@media(min-width: 769px) {
    .ck-content ul {
        font-size: 16px;
        line-height: 24px
    }
}

.ck-content ul li p {
    display: inline
}

.ck-content ul li span {
    display: inline
}

.ck-content ol li {
    list-style-type: decimal;
    list-style-position: inside;
    font-size: 14px;
    line-height: 20px
}

@media(min-width: 769px) {
    .ck-content ol li {
        font-size: 16px;
        line-height: 24px
    }
}

.ck-content p {
    font-size: 16px !important;
    line-height: 24px !important;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

    .ck-content p:has(strong) {
        font-weight: normal !important
    }

.ck-content h1 {
    font-size: 24px;
    line-height: 32px
}

.ck-content h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600
}

.ck-content h3 {
    font-size: 20px;
    line-height: 24px
}

.ck-content h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600
}

.ck-content li {
    margin: 5px 0;
    text-indent: unset
}

.ck-content a {
    text-decoration: underline
}

#blog-columns figure.table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    margin: 0
}

    #blog-columns figure.table table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse
    }

:root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-selector-caption-background: hsl(0, 0%, 97%);
    --ck-color-selector-caption-text: hsl(0, 0%, 20%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-todo-list-checkmark-size: 16px
}

.ck-content .table .ck-table-resized {
    table-layout: fixed
}

.ck-content .table table {
    overflow: hidden
}

.ck-content .table td, .ck-content .table th {
    overflow-wrap: break-word;
    position: relative
}

.ck-content .table > figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: var(--ck-color-selector-caption-text);
    background-color: var(--ck-color-selector-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px
}

.ck-content .table {
    margin: .9em auto;
    display: table
}

    .ck-content .table table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: 100%;
        border: 1px double #b3b3b3
    }

        .ck-content .table table td, .ck-content .table table th {
            min-width: 2em;
            padding: .4em;
            border: 1px solid #bfbfbf
        }

        .ck-content .table table th {
            font-weight: bold;
            background: rgba(0,0,0,.05)
        }

.ck-content[dir=rtl] .table th {
    text-align: right
}

.ck-content[dir=ltr] .table th {
    text-align: left
}

.ck-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .ck-content .page-break::after {
        content: "";
        position: absolute;
        border-bottom: 2px dashed #c4c4c4;
        width: 100%
    }

.ck-content .page-break__label {
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    font-family: Helvetica,Arial,Tahoma,Verdana,Sans-Serif;
    font-size: .75em;
    font-weight: bold;
    color: #333;
    background: #fff;
    box-shadow: 2px 2px 1px rgba(0,0,0,.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ck-content .media {
    clear: both;
    margin: .9em 0;
    display: block;
    min-width: 15em
}

.ck-content .todo-list {
    list-style: none
}

    .ck-content .todo-list li {
        position: relative;
        margin-bottom: 5px
    }

        .ck-content .todo-list li .todo-list {
            margin-top: 5px
        }

    .ck-content .todo-list .todo-list__label > input, .ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn, .ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn {
        -webkit-appearance: none;
        display: inline-block;
        position: relative;
        width: var(--ck-todo-list-checkmark-size);
        height: var(--ck-todo-list-checkmark-size);
        vertical-align: middle;
        border: 0;
        left: -25px;
        margin-right: -15px;
        right: 0;
        margin-left: 0
    }

.ck-content[dir=rtl] .todo-list .todo-list__label > input, .ck-content[dir=rtl] .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content[dir=rtl] .todo-list .todo-list__label > #railBtn, .ck-content[dir=rtl] .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content[dir=rtl] .todo-list .todo-list__label > #railBtn {
    left: 0;
    margin-right: 0;
    right: -25px;
    margin-left: -15px
}

.ck-content .todo-list .todo-list__label > input::before, .ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn::before, .ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #333;
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow
}

.ck-content .todo-list .todo-list__label > input::after, .ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn::after, .ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > #railBtn::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: "";
    left: calc(var(--ck-todo-list-checkmark-size)/3);
    top: calc(var(--ck-todo-list-checkmark-size)/5.3);
    width: calc(var(--ck-todo-list-checkmark-size)/5.3);
    height: calc(var(--ck-todo-list-checkmark-size)/2.6);
    border-style: solid;
    border-color: rgba(0,0,0,0);
    border-width: 0 calc(var(--ck-todo-list-checkmark-size)/8) calc(var(--ck-todo-list-checkmark-size)/8) 0;
    transform: rotate(45deg)
}

.ck-content .todo-list .todo-list__label > input[checked]::before, .ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > [checked]#railBtn::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > [checked]#railBtn::before, .ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > [checked]#railBtn::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > [checked]#railBtn::before {
    background: #26ab33;
    border-color: #26ab33
}

.ck-content .todo-list .todo-list__label > input[checked]::after, .ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > [checked]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > [checked]#railBtn::after, .ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > [checked]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label > [checked]#railBtn::after {
    border-color: #fff
}

.ck-content .todo-list .todo-list__label .todo-list__label__description {
    vertical-align: middle
}

.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox], .ck-content .todo-list .todo-list__label.todo-list__label_without-description body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label.todo-list__label_without-description [type=checkbox]#railBtn, .ck-content .todo-list .todo-list__label.todo-list__label_without-description body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-content .todo-list .todo-list__label.todo-list__label_without-description [type=checkbox]#railBtn {
    position: absolute
}

.ck-editor__editable.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > #railBtn, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > #railBtn, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn {
    cursor: pointer
}

    .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > #railBtn:hover::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > #railBtn:hover::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > #railBtn:hover::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > #railBtn:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn:hover::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn:hover::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn:hover::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn:hover::before {
        box-shadow: 0 0 0 5px rgba(0,0,0,.1)
    }

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0
}

.ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input, .ck-editor__editable.ck-content[dir=rtl] .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > #railBtn, .ck-editor__editable.ck-content[dir=rtl] .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > #railBtn {
    left: 0;
    margin-right: 0;
    right: -25px;
    margin-left: -15px
}

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #333;
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow
}

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn::after, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > #railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > #railBtn::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: "";
    left: calc(var(--ck-todo-list-checkmark-size)/3);
    top: calc(var(--ck-todo-list-checkmark-size)/5.3);
    width: calc(var(--ck-todo-list-checkmark-size)/5.3);
    height: calc(var(--ck-todo-list-checkmark-size)/2.6);
    border-style: solid;
    border-color: rgba(0,0,0,0);
    border-width: 0 calc(var(--ck-todo-list-checkmark-size)/8) calc(var(--ck-todo-list-checkmark-size)/8) 0;
    transform: rotate(45deg)
}

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > [checked]#railBtn::before, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > [checked]#railBtn::before, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > [checked]#railBtn::before, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > [checked]#railBtn::before {
    background: #26ab33;
    border-color: #26ab33
}

.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryMain #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > [checked]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > [checked]#railBtn::after, .ck-editor__editable.ck-content .todo-list body#TrainAndFerryInd #df-dom-deal_finder_container .todo-list__label > span[contenteditable=false] > [checked]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > [checked]#railBtn::after {
    border-color: #fff
}

.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox], .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description body#TrainAndFerryMain #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description [type=checkbox]#railBtn, .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description body#TrainAndFerryInd #df-dom-deal_finder_container [type=checkbox]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description [type=checkbox]#railBtn {
    position: absolute
}

.ck-content img.image_resized {
    height: auto
}

.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box
}

    .ck-content .image.image_resized img {
        width: 100%
    }

    .ck-content .image.image_resized > figcaption {
        display: block
    }

.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: .9em auto;
    min-width: 50px
}

    .ck-content .image img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        min-width: 100%;
        height: auto
    }

.ck-content .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start
}

    .ck-content .image-inline picture {
        display: flex
    }

    .ck-content .image-inline picture, .ck-content .image-inline img {
        flex-grow: 1;
        flex-shrink: 1;
        max-width: 100%
    }

.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: var(--ck-color-image-caption-text);
    background-color: var(--ck-color-image-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px
}

.ck-content ol {
    list-style-type: decimal
}

    .ck-content ol ol {
        list-style-type: lower-latin
    }

        .ck-content ol ol ol {
            list-style-type: lower-roman
        }

            .ck-content ol ol ol ol {
                list-style-type: upper-latin
            }

                .ck-content ol ol ol ol ol {
                    list-style-type: upper-roman
                }

.ck-content ul ul {
    list-style-type: circle
}

    .ck-content ul ul ul {
        list-style-type: square
    }

        .ck-content ul ul ul ul {
            list-style-type: square
        }

.ck-content .image-style-block-align-left, .ck-content .image-style-block-align-right {
    max-width: calc(100% - var(--ck-image-style-spacing))
}

.ck-content .image-style-align-left, .ck-content .image-style-align-right {
    clear: none
}

.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%
}

.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing)
}

.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto
}

.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing)
}

.ck-content .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto
}

.ck-content .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto
}

.ck-content p + .image-style-align-left, .ck-content p + .image-style-align-right, .ck-content p + .image-style-side {
    margin-top: 0
}

.ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right {
    margin-top: var(--ck-inline-image-style-spacing);
    margin-bottom: var(--ck-inline-image-style-spacing)
}

.ck-content .image-inline.image-style-align-left {
    margin-right: var(--ck-inline-image-style-spacing)
}

.ck-content .image-inline.image-style-align-right {
    margin-left: var(--ck-inline-image-style-spacing)
}

.ck-content .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow)
}

.ck-content .marker-green {
    background-color: var(--ck-highlight-marker-green)
}

.ck-content .marker-pink {
    background-color: var(--ck-highlight-marker-pink)
}

.ck-content .marker-blue {
    background-color: var(--ck-highlight-marker-blue)
}

.ck-content .pen-red {
    color: var(--ck-highlight-pen-red);
    background-color: rgba(0,0,0,0)
}

.ck-content .pen-green {
    color: var(--ck-highlight-pen-green);
    background-color: rgba(0,0,0,0)
}

.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px #ccc
}

.ck-content[dir=rtl] blockquote {
    border-left: 0;
    border-right: solid 5px #ccc
}

.ck-content code {
    background-color: rgba(199,199,199,.3);
    padding: .15em;
    border-radius: 2px
}

.ck-content .text-tiny {
    font-size: .7em
}

.ck-content .text-small {
    font-size: .85em
}

.ck-content .text-big {
    font-size: 1.4em
}

.ck-content .text-huge {
    font-size: 1.8em
}

.ck-content .mention {
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text)
}

.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: #dedede;
    border: 0
}

.ck-content pre {
    padding: 1em;
    color: #353535;
    background: rgba(199,199,199,.3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px
}

    .ck-content pre code {
        background: unset;
        padding: 0;
        border-radius: 0
    }

@media print {
    .ck-content .page-break {
        padding: 0
    }

        .ck-content .page-break::after {
            display: none
        }
}

.ck-content img {
    max-width: 100%
}

#rebrand-banner-shout {
    position: fixed;
    z-index: 999;
    display: none;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    background-color: #ffe3ad;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center;
    padding: 4px 40px 4px 16px;
    font-size: 14px
}

@media(min-width: 769px) {
    #rebrand-banner-shout {
        bottom: 32px;
        right: 32px;
        left: unset;
        background-color: #edefff;
        padding: 2px 40px 2px 16px;
        border-radius: 4px;
        font-size: 16px;
        width: auto
    }
}

#rebrand-banner-shout span.text {
    transform: translateY(2px)
}

#rebrand-banner-shout span.icon-shout {
    width: 24px;
    height: 24px
}

@media(min-width: 769px) {
    #rebrand-banner-shout span.icon-shout {
        width: 32px;
        height: 32px
    }
}

#rebrand-banner-shout span.icon-shout svg {
    width: 100%;
    height: 100%
}

    #rebrand-banner-shout span.icon-shout svg path {
        fill: #212121
    }

#rebrand-banner-shout span.icon-cancel {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 14px;
    height: 14px;
    cursor: pointer
}

    #rebrand-banner-shout span.icon-cancel svg {
        width: 100%;
        height: 100%
    }

        #rebrand-banner-shout span.icon-cancel svg path {
            fill: #212121
        }

body#TrainAndFerryInd .fsWrap, body#TrainAndFerryMain .fsWrap, body#FreightMain .fsWrap, body#MiniCruiseMain .fsWrap, body#AccommodationMain .fsWrap, body#MiniCruisePortInd .fsWrap, body#MiniCruiseOperator .fsWrap {
    background: rgba(0,0,0,0) !important
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap, body#TrainAndFerryMain .fsWrap, body#FreightMain .fsWrap, body#MiniCruiseMain .fsWrap, body#AccommodationMain .fsWrap, body#MiniCruisePortInd .fsWrap, body#MiniCruiseOperator .fsWrap {
        background: #fff !important;
        border-radius: 8px
    }
}

body#TrainAndFerryInd .fsWrap .fs label, body#TrainAndFerryMain .fsWrap .fs label, body#FreightMain .fsWrap .fs label, body#MiniCruiseMain .fsWrap .fs label, body#AccommodationMain .fsWrap .fs label, body#MiniCruisePortInd .fsWrap .fs label, body#MiniCruiseOperator .fsWrap .fs label {
    color: #fff;
    display: flex;
    flex-direction: row;
    gap: 8px
}

    body#TrainAndFerryInd .fsWrap .fs label > div, body#TrainAndFerryMain .fsWrap .fs label > div, body#FreightMain .fsWrap .fs label > div, body#MiniCruiseMain .fsWrap .fs label > div, body#AccommodationMain .fsWrap .fs label > div, body#MiniCruisePortInd .fsWrap .fs label > div, body#MiniCruiseOperator .fsWrap .fs label > div {
        padding: 0
    }

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap .fs label, body#TrainAndFerryMain .fsWrap .fs label, body#FreightMain .fsWrap .fs label, body#MiniCruiseMain .fsWrap .fs label, body#AccommodationMain .fsWrap .fs label, body#MiniCruisePortInd .fsWrap .fs label, body#MiniCruiseOperator .fsWrap .fs label {
        color: #212121
    }
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap .sm12, body#TrainAndFerryMain .fsWrap .sm12, body#FreightMain .fsWrap .sm12, body#MiniCruiseMain .fsWrap .sm12, body#AccommodationMain .fsWrap .sm12, body#MiniCruisePortInd .fsWrap .sm12, body#MiniCruiseOperator .fsWrap .sm12 {
        padding: 0 16px
    }
}

body#TrainAndFerryInd .fsWrap .fsRadios, body#TrainAndFerryMain .fsWrap .fsRadios, body#FreightMain .fsWrap .fsRadios, body#MiniCruiseMain .fsWrap .fsRadios, body#AccommodationMain .fsWrap .fsRadios, body#MiniCruisePortInd .fsWrap .fsRadios, body#MiniCruiseOperator .fsWrap .fsRadios {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px
}

body#TrainAndFerryInd .fsWrap label.radio-inline, body#TrainAndFerryMain .fsWrap label.radio-inline, body#FreightMain .fsWrap label.radio-inline, body#MiniCruiseMain .fsWrap label.radio-inline, body#AccommodationMain .fsWrap label.radio-inline, body#MiniCruisePortInd .fsWrap label.radio-inline, body#MiniCruiseOperator .fsWrap label.radio-inline {
    display: flex;
    flex-direction: row;
    gap: 8px;
    color: #fff;
    padding-bottom: 0
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap label.radio-inline, body#TrainAndFerryMain .fsWrap label.radio-inline, body#FreightMain .fsWrap label.radio-inline, body#MiniCruiseMain .fsWrap label.radio-inline, body#AccommodationMain .fsWrap label.radio-inline, body#MiniCruisePortInd .fsWrap label.radio-inline, body#MiniCruiseOperator .fsWrap label.radio-inline {
        color: #212121
    }
}

body#TrainAndFerryInd .fsWrap input[type=radio], body#TrainAndFerryInd .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn, body#TrainAndFerryInd #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn, body#TrainAndFerryMain .fsWrap input[type=radio], body#TrainAndFerryMain .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn, body#TrainAndFerryMain #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn, body#FreightMain .fsWrap input[type=radio], body#FreightMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#FreightMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruiseMain .fsWrap input[type=radio], body#MiniCruiseMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruiseMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn, body#AccommodationMain .fsWrap input[type=radio], body#AccommodationMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#AccommodationMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruisePortInd .fsWrap input[type=radio], body#MiniCruisePortInd .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruisePortInd .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruiseOperator .fsWrap input[type=radio], body#MiniCruiseOperator .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn, body#MiniCruiseOperator .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn {
    padding: 0;
    background-color: unset;
    border: unset;
    width: auto
}

    body#TrainAndFerryInd .fsWrap input[type=radio]::after, body#TrainAndFerryInd .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn::after, body#TrainAndFerryMain .fsWrap input[type=radio]::after, body#TrainAndFerryMain .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn::after, body#FreightMain .fsWrap input[type=radio]::after, body#FreightMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#FreightMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseMain .fsWrap input[type=radio]::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#AccommodationMain .fsWrap input[type=radio]::after, body#AccommodationMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#AccommodationMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruisePortInd .fsWrap input[type=radio]::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseOperator .fsWrap input[type=radio]::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after {
        width: 15px;
        height: 15px;
        border-radius: 24px;
        position: relative;
        background-color: #fff;
        content: "";
        display: inline-block;
        visibility: visible;
        border: none
    }

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap input[type=radio]::after, body#TrainAndFerryInd .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn::after, body#TrainAndFerryMain .fsWrap input[type=radio]::after, body#TrainAndFerryMain .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn::after, body#FreightMain .fsWrap input[type=radio]::after, body#FreightMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#FreightMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseMain .fsWrap input[type=radio]::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#AccommodationMain .fsWrap input[type=radio]::after, body#AccommodationMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#AccommodationMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruisePortInd .fsWrap input[type=radio]::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseOperator .fsWrap input[type=radio]::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn::after {
        border: 2px solid #212121
    }
}

body#TrainAndFerryInd .fsWrap input[type=radio]:checked::after, body#TrainAndFerryInd .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn:checked::after, body#TrainAndFerryMain .fsWrap input[type=radio]:checked::after, body#TrainAndFerryMain .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn:checked::after, body#FreightMain .fsWrap input[type=radio]:checked::after, body#FreightMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#FreightMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseMain .fsWrap input[type=radio]:checked::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#AccommodationMain .fsWrap input[type=radio]:checked::after, body#AccommodationMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#AccommodationMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruisePortInd .fsWrap input[type=radio]:checked::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseOperator .fsWrap input[type=radio]:checked::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after {
    background-color: #fc6446;
    border: none
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap input[type=radio]:checked::after, body#TrainAndFerryInd .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryInd #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn:checked::after, body#TrainAndFerryMain .fsWrap input[type=radio]:checked::after, body#TrainAndFerryMain .fsWrap #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#TrainAndFerryMain #df-dom-deal_finder_container .fsWrap [type=radio]#railBtn:checked::after, body#FreightMain .fsWrap input[type=radio]:checked::after, body#FreightMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#FreightMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseMain .fsWrap input[type=radio]:checked::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#AccommodationMain .fsWrap input[type=radio]:checked::after, body#AccommodationMain .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#AccommodationMain .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruisePortInd .fsWrap input[type=radio]:checked::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruisePortInd .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseOperator .fsWrap input[type=radio]:checked::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryMain #df-dom-deal_finder_container [type=radio]#railBtn:checked::after, body#MiniCruiseOperator .fsWrap body#TrainAndFerryInd #df-dom-deal_finder_container [type=radio]#railBtn:checked::after {
        border: 2px solid #212121;
        background-color: #212121
    }
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsWrap .fsBtn .form-group, body#TrainAndFerryMain .fsWrap .fsBtn .form-group, body#FreightMain .fsWrap .fsBtn .form-group, body#MiniCruiseMain .fsWrap .fsBtn .form-group, body#AccommodationMain .fsWrap .fsBtn .form-group, body#MiniCruisePortInd .fsWrap .fsBtn .form-group, body#MiniCruiseOperator .fsWrap .fsBtn .form-group {
        margin-top: 4px;
        margin-right: 0
    }
}

body#TrainAndFerryInd #ui-datepicker-div, body#TrainAndFerryMain #ui-datepicker-div, body#FreightMain #ui-datepicker-div, body#MiniCruiseMain #ui-datepicker-div, body#AccommodationMain #ui-datepicker-div, body#MiniCruisePortInd #ui-datepicker-div, body#MiniCruiseOperator #ui-datepicker-div {
    z-index: 10 !important
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .ui-datepicker-calendar a.ui-state-default:hover, body#TrainAndFerryMain .ui-datepicker-calendar a.ui-state-default:hover, body#FreightMain .ui-datepicker-calendar a.ui-state-default:hover, body#MiniCruiseMain .ui-datepicker-calendar a.ui-state-default:hover, body#AccommodationMain .ui-datepicker-calendar a.ui-state-default:hover, body#MiniCruisePortInd .ui-datepicker-calendar a.ui-state-default:hover, body#MiniCruiseOperator .ui-datepicker-calendar a.ui-state-default:hover {
        background-color: #fca38f
    }
}

body#TrainAndFerryInd .popupTitle, body#TrainAndFerryMain .popupTitle, body#FreightMain .popupTitle, body#MiniCruiseMain .popupTitle, body#AccommodationMain .popupTitle, body#MiniCruisePortInd .popupTitle, body#MiniCruiseOperator .popupTitle {
    color: #fff
}

body#TrainAndFerryInd #curBtn, body#TrainAndFerryMain #curBtn, body#FreightMain #curBtn, body#MiniCruiseMain #curBtn, body#AccommodationMain #curBtn, body#MiniCruisePortInd #curBtn, body#MiniCruiseOperator #curBtn {
    color: #fff
}

@media(min-width: 769px) {
    body#TrainAndFerryInd #curBtn, body#TrainAndFerryMain #curBtn, body#FreightMain #curBtn, body#MiniCruiseMain #curBtn, body#AccommodationMain #curBtn, body#MiniCruisePortInd #curBtn, body#MiniCruiseOperator #curBtn {
        color: #212121
    }
}

body#TrainAndFerryInd .formPopup:not(#vehPopup), body#TrainAndFerryMain .formPopup:not(#vehPopup), body#FreightMain .formPopup:not(#vehPopup), body#MiniCruiseMain .formPopup:not(#vehPopup), body#AccommodationMain .formPopup:not(#vehPopup), body#MiniCruisePortInd .formPopup:not(#vehPopup), body#MiniCruiseOperator .formPopup:not(#vehPopup) {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

    body#TrainAndFerryInd .formPopup:not(#vehPopup) .popupTitle, body#TrainAndFerryMain .formPopup:not(#vehPopup) .popupTitle, body#FreightMain .formPopup:not(#vehPopup) .popupTitle, body#MiniCruiseMain .formPopup:not(#vehPopup) .popupTitle, body#AccommodationMain .formPopup:not(#vehPopup) .popupTitle, body#MiniCruisePortInd .formPopup:not(#vehPopup) .popupTitle, body#MiniCruiseOperator .formPopup:not(#vehPopup) .popupTitle {
        color: #212121
    }

body#TrainAndFerryInd #btnSubmit, body#TrainAndFerryInd .fsDone, body#TrainAndFerryInd .btn.btnLge, body#TrainAndFerryMain #btnSubmit, body#TrainAndFerryMain .fsDone, body#TrainAndFerryMain .btn.btnLge, body#FreightMain #btnSubmit, body#FreightMain .fsDone, body#FreightMain .btn.btnLge, body#MiniCruiseMain #btnSubmit, body#MiniCruiseMain .fsDone, body#MiniCruiseMain .btn.btnLge, body#AccommodationMain #btnSubmit, body#AccommodationMain .fsDone, body#AccommodationMain .btn.btnLge, body#MiniCruisePortInd #btnSubmit, body#MiniCruisePortInd .fsDone, body#MiniCruisePortInd .btn.btnLge, body#MiniCruiseOperator #btnSubmit, body#MiniCruiseOperator .fsDone, body#MiniCruiseOperator .btn.btnLge {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    background-color: #fc6446;
    color: #fff;
    border-radius: 50px;
    padding: 8px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    width: 100%;
    transition: background-color .3s ease-in-out
}

@media(min-width: 769px) {
    body#TrainAndFerryInd #btnSubmit, body#TrainAndFerryInd .fsDone, body#TrainAndFerryInd .btn.btnLge, body#TrainAndFerryMain #btnSubmit, body#TrainAndFerryMain .fsDone, body#TrainAndFerryMain .btn.btnLge, body#FreightMain #btnSubmit, body#FreightMain .fsDone, body#FreightMain .btn.btnLge, body#MiniCruiseMain #btnSubmit, body#MiniCruiseMain .fsDone, body#MiniCruiseMain .btn.btnLge, body#AccommodationMain #btnSubmit, body#AccommodationMain .fsDone, body#AccommodationMain .btn.btnLge, body#MiniCruisePortInd #btnSubmit, body#MiniCruisePortInd .fsDone, body#MiniCruisePortInd .btn.btnLge, body#MiniCruiseOperator #btnSubmit, body#MiniCruiseOperator .fsDone, body#MiniCruiseOperator .btn.btnLge {
        height: 2.5em
    }
}

@media(hover: hover)and (pointer: fine) {
    body#TrainAndFerryInd #btnSubmit:hover, body#TrainAndFerryInd .fsDone:hover, body#TrainAndFerryInd .btn.btnLge:hover, body#TrainAndFerryMain #btnSubmit:hover, body#TrainAndFerryMain .fsDone:hover, body#TrainAndFerryMain .btn.btnLge:hover, body#FreightMain #btnSubmit:hover, body#FreightMain .fsDone:hover, body#FreightMain .btn.btnLge:hover, body#MiniCruiseMain #btnSubmit:hover, body#MiniCruiseMain .fsDone:hover, body#MiniCruiseMain .btn.btnLge:hover, body#AccommodationMain #btnSubmit:hover, body#AccommodationMain .fsDone:hover, body#AccommodationMain .btn.btnLge:hover, body#MiniCruisePortInd #btnSubmit:hover, body#MiniCruisePortInd .fsDone:hover, body#MiniCruisePortInd .btn.btnLge:hover, body#MiniCruiseOperator #btnSubmit:hover, body#MiniCruiseOperator .fsDone:hover, body#MiniCruiseOperator .btn.btnLge:hover {
        background-color: #fca38f
    }
}

@media(min-width: 769px) {
    body#TrainAndFerryInd .fsDone, body#TrainAndFerryMain .fsDone, body#FreightMain .fsDone, body#MiniCruiseMain .fsDone, body#AccommodationMain .fsDone, body#MiniCruisePortInd .fsDone, body#MiniCruiseOperator .fsDone {
        max-width: 180px
    }
}

body#TrainAndFerryInd select.form-control, body#TrainAndFerryInd input#cal_out, body#TrainAndFerryInd input#cal_ret, body#TrainAndFerryInd #vehBtn, body#TrainAndFerryInd #passBtn, body#TrainAndFerryInd #ps1, body#TrainAndFerryMain select.form-control, body#TrainAndFerryMain input#cal_out, body#TrainAndFerryMain input#cal_ret, body#TrainAndFerryMain #vehBtn, body#TrainAndFerryMain #passBtn, body#TrainAndFerryMain #ps1, body#FreightMain select.form-control, body#FreightMain input#cal_out, body#FreightMain input#cal_ret, body#FreightMain #vehBtn, body#FreightMain #passBtn, body#FreightMain #ps1, body#MiniCruiseMain select.form-control, body#MiniCruiseMain input#cal_out, body#MiniCruiseMain input#cal_ret, body#MiniCruiseMain #vehBtn, body#MiniCruiseMain #passBtn, body#MiniCruiseMain #ps1, body#AccommodationMain select.form-control, body#AccommodationMain input#cal_out, body#AccommodationMain input#cal_ret, body#AccommodationMain #vehBtn, body#AccommodationMain #passBtn, body#AccommodationMain #ps1, body#MiniCruisePortInd select.form-control, body#MiniCruisePortInd input#cal_out, body#MiniCruisePortInd input#cal_ret, body#MiniCruisePortInd #vehBtn, body#MiniCruisePortInd #passBtn, body#MiniCruisePortInd #ps1, body#MiniCruiseOperator select.form-control, body#MiniCruiseOperator input#cal_out, body#MiniCruiseOperator input#cal_ret, body#MiniCruiseOperator #vehBtn, body#MiniCruiseOperator #passBtn, body#MiniCruiseOperator #ps1 {
    background-color: #fafaf7;
    border: 1px solid #212121;
    border-radius: 8px;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

    body#TrainAndFerryInd select.form-control:focus-visible, body#TrainAndFerryInd input#cal_out:focus-visible, body#TrainAndFerryInd input#cal_ret:focus-visible, body#TrainAndFerryInd #vehBtn:focus-visible, body#TrainAndFerryInd #passBtn:focus-visible, body#TrainAndFerryInd #ps1:focus-visible, body#TrainAndFerryMain select.form-control:focus-visible, body#TrainAndFerryMain input#cal_out:focus-visible, body#TrainAndFerryMain input#cal_ret:focus-visible, body#TrainAndFerryMain #vehBtn:focus-visible, body#TrainAndFerryMain #passBtn:focus-visible, body#TrainAndFerryMain #ps1:focus-visible, body#FreightMain select.form-control:focus-visible, body#FreightMain input#cal_out:focus-visible, body#FreightMain input#cal_ret:focus-visible, body#FreightMain #vehBtn:focus-visible, body#FreightMain #passBtn:focus-visible, body#FreightMain #ps1:focus-visible, body#MiniCruiseMain select.form-control:focus-visible, body#MiniCruiseMain input#cal_out:focus-visible, body#MiniCruiseMain input#cal_ret:focus-visible, body#MiniCruiseMain #vehBtn:focus-visible, body#MiniCruiseMain #passBtn:focus-visible, body#MiniCruiseMain #ps1:focus-visible, body#AccommodationMain select.form-control:focus-visible, body#AccommodationMain input#cal_out:focus-visible, body#AccommodationMain input#cal_ret:focus-visible, body#AccommodationMain #vehBtn:focus-visible, body#AccommodationMain #passBtn:focus-visible, body#AccommodationMain #ps1:focus-visible, body#MiniCruisePortInd select.form-control:focus-visible, body#MiniCruisePortInd input#cal_out:focus-visible, body#MiniCruisePortInd input#cal_ret:focus-visible, body#MiniCruisePortInd #vehBtn:focus-visible, body#MiniCruisePortInd #passBtn:focus-visible, body#MiniCruisePortInd #ps1:focus-visible, body#MiniCruiseOperator select.form-control:focus-visible, body#MiniCruiseOperator input#cal_out:focus-visible, body#MiniCruiseOperator input#cal_ret:focus-visible, body#MiniCruiseOperator #vehBtn:focus-visible, body#MiniCruiseOperator #passBtn:focus-visible, body#MiniCruiseOperator #ps1:focus-visible {
        outline: none !important
    }

body#TrainAndFerryMain #df-dom-deal_finder_container div.return label, body#TrainAndFerryInd #df-dom-deal_finder_container div.return label {
    display: inline-block
}

body#TrainAndFerryInd .offerSlider, body#TrainAndFerryMain .offerSlider, body#MiniCruiseMain .offerSlider, body#MiniCruisePortInd .offerSlider, body#MiniCruiseOperator .offerSlider {
    display: none
}

body#TrainAndFerryInd .df-dom-dealfinder, body#TrainAndFerryMain .df-dom-dealfinder, body#MiniCruiseMain .df-dom-dealfinder, body#MiniCruisePortInd .df-dom-dealfinder, body#MiniCruiseOperator .df-dom-dealfinder {
    display: block;
    margin-top: 0
}

    body#TrainAndFerryInd .df-dom-dealfinder .fsWrap, body#TrainAndFerryMain .df-dom-dealfinder .fsWrap, body#MiniCruiseMain .df-dom-dealfinder .fsWrap, body#MiniCruisePortInd .df-dom-dealfinder .fsWrap, body#MiniCruiseOperator .df-dom-dealfinder .fsWrap {
        border-top-left-radius: 0
    }

body#TrainAndFerryInd #ui-datepicker-div, body#TrainAndFerryMain #ui-datepicker-div, body#MiniCruiseMain #ui-datepicker-div, body#MiniCruisePortInd #ui-datepicker-div, body#MiniCruiseOperator #ui-datepicker-div {
    z-index: 10
}

body#TrainAndFerryInd nav.subNav a, body#TrainAndFerryMain nav.subNav a, body#MiniCruiseMain nav.subNav a, body#MiniCruisePortInd nav.subNav a, body#MiniCruiseOperator nav.subNav a {
    background-color: #407a7d;
    padding: 16px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    margin-top: 16px
}

@media(min-width: 769px) {
    body#TrainAndFerryInd nav.subNav a, body#TrainAndFerryMain nav.subNav a, body#MiniCruiseMain nav.subNav a, body#MiniCruisePortInd nav.subNav a, body#MiniCruiseOperator nav.subNav a {
        background-color: #fff;
        border-radius: 4px 4px 0 0;
        color: #212121;
        margin-top: 0;
        transition: background-color .3s ease-in-out
    }
}

@media(min-width: 769px)and (hover: hover)and (pointer: fine) {
    body#TrainAndFerryInd nav.subNav a:hover, body#TrainAndFerryMain nav.subNav a:hover, body#MiniCruiseMain nav.subNav a:hover, body#MiniCruisePortInd nav.subNav a:hover, body#MiniCruiseOperator nav.subNav a:hover {
        background-color: #e8e8e8
    }
}

body#TrainAndFerryInd #passPopup, body#TrainAndFerryMain #passPopup, body#MiniCruiseMain #passPopup, body#MiniCruisePortInd #passPopup, body#MiniCruiseOperator #passPopup {
    width: 244px;
    max-width: 80%
}

@media(min-width: 769px) {
    body#TrainAndFerryInd #passPopup, body#TrainAndFerryMain #passPopup, body#MiniCruiseMain #passPopup, body#MiniCruisePortInd #passPopup, body#MiniCruiseOperator #passPopup {
        max-width: unset;
        width: 325px
    }
}

body#TrainAndFerryInd .fs .frmBox, body#TrainAndFerryMain .fs .frmBox, body#MiniCruiseMain .fs .frmBox, body#MiniCruisePortInd .fs .frmBox, body#MiniCruiseOperator .fs .frmBox {
    width: 150px
}

body#TrainAndFerryInd .fs .popupClose, body#TrainAndFerryMain .fs .popupClose, body#MiniCruiseMain .fs .popupClose, body#MiniCruisePortInd .fs .popupClose, body#MiniCruiseOperator .fs .popupClose {
    right: 16px;
    width: 24px;
    height: 24px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/cancel.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat
}

body#AccommodationMain .deal-finder-main #searchboxInc {
    margin: 16px 0 !important
}

body#AccommodationMain #calendar .caltable {
    padding: 8px
}

body#AccommodationMain #calendar .calheader select {
    min-width: unset;
    width: auto;
    top: auto
}

body#AccommodationMain #calendar .caltable td.calheader a {
    vertical-align: middle
}

body#AccommodationMain #calendar .caltable td.calheader .calPrevMonth span.prevMonthIcon, body#AccommodationMain #calendar .caltable td.calheader span.NoPrevMonthIcon {
    width: 24px;
    height: 24px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-left.svg");
    background: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-left.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat
}

body#AccommodationMain #calendar .caltable td.calheader span.NoPrevMonthIcon {
    opacity: .5
}

body#AccommodationMain #calendar .caltable td.calheader .calNextMonth:hover span.nextMonthIcon, body#AccommodationMain #calendar .caltable td.calheader .calPrevMonth:hover span.prevMonthIcon {
    background-position: 0
}

body#AccommodationMain #calendar .caltable td.calheader .calNextMonth span.nextMonthIcon, body#AccommodationMain #calendar .caltable td.calheader span.NoNextMonthIcon {
    width: 24px;
    height: 24px;
    background-image: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-right.svg");
    background: url("https://static.directferries.co.uk/image/ico/new/grey/arrow-right.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat
}

body#AccommodationMain #calendar .caltable td.calheader span.NoNextMonthIcon {
    opacity: .5
}

body#AccommodationMain #calendar .caltable .days a:hover, body#AccommodationMain #calendar .caltable .days td a:hover {
    background-color: #212121
}

body#AccommodationMain #calendar .caltable tr:last-of-type a {
    background-color: #212121;
    color: #fff;
    transition: background-color .3s ease-in-out;
    border-radius: 4px
}

    body#AccommodationMain #calendar .caltable tr:last-of-type a:hover {
        background-color: #4d4d4d
    }

body#AccommodationMain #calendar .days td.selected a {
    background-color: #fc6446 !important
}

    body#AccommodationMain #calendar .days td.selected a:hover {
        background-color: #fc6446 !important
    }

body#AccommodationMain #calendar .days td.today a, body#AccommodationMain #calendar .days td.future a {
    background-color: #e8ede3
}

body#AccommodationMain #calendar .caltable a:active {
    color: #fff !important;
    border-color: rgba(0,0,0,0) !important
}

.eco-travel.eco-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0;
    z-index: 20
}

    .eco-travel.eco-content .calculate {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        border-radius: 8px;
        padding: 32px 16px;
        margin: 0 0 75px;
        background: #f7f6f2;
        gap: 32px
    }

        .eco-travel.eco-content .calculate form {
            width: 360px;
            margin: 0 40px 0 0
        }

            .eco-travel.eco-content .calculate form h2 {
                font-size: 30px;
                line-height: 36px;
                margin: 0 0 30px;
                font-family: mundial-demibold,sans-serif !important
            }

            .eco-travel.eco-content .calculate form .select p {
                margin: 0 0 24px
            }

                .eco-travel.eco-content .calculate form .select p label {
                    display: inline-block;
                    font: inherit;
                    font-size: 20px;
                    line-height: 25px;
                    color: #193354;
                    margin: 0 0 10px
                }

                .eco-travel.eco-content .calculate form .select p select {
                    width: 100%;
                    height: 56px;
                    border: 2px solid #edebe6;
                    border-radius: 8px;
                    padding: 10px 50px 8px 18px;
                    color: #193354;
                    outline: 0;
                    -webkit-appearance: none;
                    background-image: url(https://static.directferries.co.uk/image/ico/dark-blue/dropdown.svg) !important;
                    background-position: calc(100% - 8px) 50% !important;
                    background-repeat: no-repeat !important;
                    background-size: 24px !important
                }

                .eco-travel.eco-content .calculate form .select p.disabled {
                    background: 0 0 !important;
                    opacity: .5
                }

                    .eco-travel.eco-content .calculate form .select p.disabled label {
                        opacity: .25
                    }

                    .eco-travel.eco-content .calculate form .select p.disabled select {
                        background-color: #f7f6f2
                    }

            .eco-travel.eco-content .calculate form button {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 56px;
                border-radius: 8px;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                padding: 10px 20px 8px;
                font-weight: 700;
                font-family: mundial-demibold,sans-serif !important;
                font-size: 19px;
                line-height: 24px;
                text-decoration: none;
                color: #fff;
                margin: 44px 0 0;
                outline: 0;
                background: #ff4a0e
            }

                .eco-travel.eco-content .calculate form button:after {
                    display: inline-block;
                    width: 12px;
                    height: 15px;
                    content: "";
                    margin: 0 0 0 12px;
                    background: url(https://www.directferries.co.uk/images/button-arrow.png) 50%/cover no-repeat
                }

                .eco-travel.eco-content .calculate form button[disabled] {
                    opacity: .2
                }

        .eco-travel.eco-content .calculate .results {
            position: relative;
            display: none;
            width: 660px;
            padding: 16px 0 0
        }

            .eco-travel.eco-content .calculate .results li {
                font-size: 16px;
                line-height: 1.5;
                color: #193354;
                margin: 0 0 50px
            }

                .eco-travel.eco-content .calculate .results li p {
                    margin: 0 0 5px
                }

                    .eco-travel.eco-content .calculate .results li p strong {
                        display: inline-block;
                        font-size: 20px;
                        vertical-align: baseline;
                        margin: 0 5px 0 0
                    }

                        .eco-travel.eco-content .calculate .results li p strong .co2e {
                            font-size: 16px
                        }

                            .eco-travel.eco-content .calculate .results li p strong .co2e .kg {
                                font-size: 20px
                            }

                .eco-travel.eco-content .calculate .results li .bar {
                    display: flex;
                    width: 100%;
                    height: 48px;
                    border-radius: 5px 0 0 5px;
                    font-size: 0
                }

                    .eco-travel.eco-content .calculate .results li .bar .bus, .eco-travel.eco-content .calculate .results li .bar .car, .eco-travel.eco-content .calculate .results li .bar .ferry, .eco-travel.eco-content .calculate .results li .bar .plane, .eco-travel.eco-content .calculate .results li .bar .train {
                        position: relative;
                        display: inline-block;
                        width: 0;
                        height: 48px
                    }

                        .eco-travel.eco-content .calculate .results li .bar .bus .icon, .eco-travel.eco-content .calculate .results li .bar .car .icon, .eco-travel.eco-content .calculate .results li .bar .ferry .icon, .eco-travel.eco-content .calculate .results li .bar .plane .icon, .eco-travel.eco-content .calculate .results li .bar .train .icon {
                            position: absolute;
                            top: 0;
                            right: 0;
                            display: block;
                            width: 55px;
                            height: 48px;
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                            background-size: cover;
                            z-index: 20;
                            opacity: 0
                        }

                            .eco-travel.eco-content .calculate .results li .bar .bus .icon.visible, .eco-travel.eco-content .calculate .results li .bar .car .icon.visible, .eco-travel.eco-content .calculate .results li .bar .ferry .icon.visible, .eco-travel.eco-content .calculate .results li .bar .plane .icon.visible, .eco-travel.eco-content .calculate .results li .bar .train .icon.visible {
                                opacity: 1
                            }

                        .eco-travel.eco-content .calculate .results li .bar .bus .value, .eco-travel.eco-content .calculate .results li .bar .car .value, .eco-travel.eco-content .calculate .results li .bar .ferry .value, .eco-travel.eco-content .calculate .results li .bar .plane .value, .eco-travel.eco-content .calculate .results li .bar .train .value {
                            position: absolute;
                            top: 100%;
                            right: 0;
                            display: inline-block;
                            border-radius: 4px;
                            -moz-border-radius: 4px;
                            -webkit-border-radius: 4px;
                            padding: 7px 8px 5px;
                            font-size: 11px;
                            line-height: 15px;
                            white-space: nowrap;
                            color: #fff;
                            margin: 10px 0 0;
                            background: #193354;
                            z-index: 20
                        }

                            .eco-travel.eco-content .calculate .results li .bar .bus .value:after, .eco-travel.eco-content .calculate .results li .bar .car .value:after, .eco-travel.eco-content .calculate .results li .bar .ferry .value:after, .eco-travel.eco-content .calculate .results li .bar .plane .value:after, .eco-travel.eco-content .calculate .results li .bar .train .value:after {
                                position: absolute;
                                top: 0;
                                left: 50%;
                                display: block;
                                width: 0;
                                height: 0;
                                border-left: 4px solid rgba(0,0,0,0);
                                border-right: 4px solid rgba(0,0,0,0);
                                border-bottom: 4px solid #193354;
                                content: "";
                                margin: -4px 0 0 -4px
                            }

                            .eco-travel.eco-content .calculate .results li .bar .bus .value.visible, .eco-travel.eco-content .calculate .results li .bar .ferry .value.visible, .eco-travel.eco-content .calculate .results li .bar .train .value.visible {
                                opacity: 1
                            }

                        .eco-travel.eco-content .calculate .results li .bar .ferry .reduction, .eco-travel.eco-content .calculate .results li .bar .plane .reduction {
                            position: absolute;
                            top: 0;
                            right: -100px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            width: 90px;
                            height: 48px;
                            border: 1px solid #d1d5dc;
                            border-radius: 5px;
                            padding: 2px;
                            font-size: 10px;
                            line-height: 10px;
                            letter-spacing: .025em;
                            text-align: center;
                            color: #85909e;
                            background: #fff
                        }

                        .eco-travel.eco-content .calculate .results li .bar .bus.min-width, .eco-travel.eco-content .calculate .results li .bar .car.min-width, .eco-travel.eco-content .calculate .results li .bar .ferry.min-width, .eco-travel.eco-content .calculate .results li .bar .plane.min-width, .eco-travel.eco-content .calculate .results li .bar .train.min-width {
                            min-width: 55px
                        }

                    .eco-travel.eco-content .calculate .results li .bar .bus, .eco-travel.eco-content .calculate .results li .bar .car, .eco-travel.eco-content .calculate .results li .bar .train {
                        box-shadow: inset -1px 0 0 rgba(255,255,255,.25)
                    }

                        .eco-travel.eco-content .calculate .results li .bar .train .icon {
                            background-image: url(https://www.directferries.co.uk/images/icon-train.png)
                        }

                        .eco-travel.eco-content .calculate .results li .bar .bus .icon {
                            background-image: url(https://www.directferries.co.uk/images/icon-bus.png)
                        }

                    .eco-travel.eco-content .calculate .results li .bar .ferry {
                        border-radius: 0 5px 5px 0
                    }

                        .eco-travel.eco-content .calculate .results li .bar .ferry .icon {
                            background-image: url(https://www.directferries.co.uk/images/icon-ferry.png)
                        }

                    .eco-travel.eco-content .calculate .results li .bar .car .icon {
                        background-image: url(https://www.directferries.co.uk/images/icon-car.png)
                    }

                    .eco-travel.eco-content .calculate .results li .bar .plane {
                        border-radius: 5px
                    }

                        .eco-travel.eco-content .calculate .results li .bar .plane .icon {
                            background-image: url(https://www.directferries.co.uk/images/icon-plane.png)
                        }

                .eco-travel.eco-content .calculate .results li.train-bus-ferry p strong {
                    color: #23a145
                }

                .eco-travel.eco-content .calculate .results li.train-bus-ferry .bar .bus, .eco-travel.eco-content .calculate .results li.train-bus-ferry .bar .ferry, .eco-travel.eco-content .calculate .results li.train-bus-ferry .bar .train {
                    background: #23a145
                }

                .eco-travel.eco-content .calculate .results li.electric-car-ferry p strong {
                    color: #136495
                }

                .eco-travel.eco-content .calculate .results li.electric-car-ferry .bar .car, .eco-travel.eco-content .calculate .results li.electric-car-ferry .bar .ferry {
                    background: #136495
                }

                .eco-travel.eco-content .calculate .results li.petrol-car-ferry p strong {
                    color: #45b7ed
                }

                .eco-travel.eco-content .calculate .results li.petrol-car-ferry .bar .car, .eco-travel.eco-content .calculate .results li.petrol-car-ferry .bar .ferry {
                    background: #45b7ed
                }

                .eco-travel.eco-content .calculate .results li.flight {
                    margin: 0
                }

                    .eco-travel.eco-content .calculate .results li.flight p strong {
                        color: #cc1b0b
                    }

                    .eco-travel.eco-content .calculate .results li.flight .bar .plane {
                        background: #cc1b0b
                    }

    .eco-travel.eco-content .main-text {
        margin: 0 0 65px
    }

        .eco-travel.eco-content .main-text h2 {
            font-size: 22px;
            line-height: 1.4;
            margin: 0 0 1em;
            font-family: mundial-demibold,sans-serif !important
        }

        .eco-travel.eco-content .main-text p {
            font-size: 16px;
            line-height: 1.4;
            margin: 0 0 1em
        }

    .eco-travel.eco-content .examples {
        border-top: 1px solid #e2e0db;
        padding: 40px 0 0;
        margin: 0 0 70px
    }

        .eco-travel.eco-content .examples h2 {
            font-size: 30px;
            line-height: 36px;
            margin: 0 0 40px;
            font-family: mundial-demibold,sans-serif !important
        }

        .eco-travel.eco-content .examples .example {
            border-radius: 8px;
            padding: 65px 50px 60px;
            text-align: center;
            margin: 0 0 25px;
            background: #f7f6f2;
            box-shadow: 0 2px 0 rgba(0,0,0,.1)
        }

            .eco-travel.eco-content .examples .example h3 {
                font-size: 26px !important;
                line-height: 34px !important;
                margin: 0 0 30px;
                font-family: mundial-demibold,sans-serif !important
            }

                .eco-travel.eco-content .examples .example h3 span {
                    white-space: nowrap
                }

                .eco-travel.eco-content .examples .example h3:after {
                    display: inline-block;
                    height: 25px;
                    vertical-align: top;
                    content: "";
                    margin: 4px 0 0 12px;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    background-size: cover
                }

            .eco-travel.eco-content .examples .example ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                width: 100%
            }

                .eco-travel.eco-content .examples .example ul li {
                    width: 33.33333%;
                    padding: 0 55px;
                    font-size: 14px;
                    line-height: 24px;
                    color: #666
                }

                    .eco-travel.eco-content .examples .example ul li .emissions {
                        display: inline-block;
                        font-size: 50px;
                        line-height: 50px;
                        margin: 0 auto 5px
                    }

                    .eco-travel.eco-content .examples .example ul li .lower, .eco-travel.eco-content .examples .example ul li .transport {
                        font-size: 24px;
                        line-height: 30px;
                        color: #1c3554
                    }

                        .eco-travel.eco-content .examples .example ul li .transport:after {
                            display: inline-block;
                            height: 20px;
                            vertical-align: top;
                            content: "";
                            margin: 6px 0 0 8px;
                            background-position: 0 0;
                            background-repeat: no-repeat;
                            background-size: cover
                        }

                    .eco-travel.eco-content .examples .example ul li.ferry .emissions, .eco-travel.eco-content .examples .example ul li.flight .emissions {
                        position: relative;
                        padding: 0 48px 0 0
                    }

                        .eco-travel.eco-content .examples .example ul li.ferry .emissions .co2e, .eco-travel.eco-content .examples .example ul li.flight .emissions .co2e {
                            position: absolute;
                            top: 8px;
                            right: 0;
                            width: 42px;
                            font-size: 15px;
                            line-height: 20px;
                            text-align: left
                        }

                        .eco-travel.eco-content .examples .example ul li.ferry .emissions .kg, .eco-travel.eco-content .examples .example ul li.flight .emissions .kg {
                            display: block
                        }

                    .eco-travel.eco-content .examples .example ul li.ferry {
                        position: relative
                    }

                        .eco-travel.eco-content .examples .example ul li.ferry .emissions {
                            color: #45b7ed
                        }

                        .eco-travel.eco-content .examples .example ul li.ferry.car .transport:after {
                            width: 54px;
                            background-image: url(https://www.directferries.co.uk/images/transport-ferry-car.png)
                        }

                        .eco-travel.eco-content .examples .example ul li.ferry:after {
                            position: absolute;
                            top: 50%;
                            right: 0;
                            font-size: 24px;
                            line-height: 30px;
                            color: #1c3554;
                            content: "- VS -";
                            transform: translate(35%, -50%);
                            -ms-transform: translate(35%, -50%)
                        }

                    .eco-travel.eco-content .examples .example ul li.flight .emissions {
                        color: #ff4a0e
                    }

                    .eco-travel.eco-content .examples .example ul li.saving .emissions {
                        color: #23a146
                    }

                        .eco-travel.eco-content .examples .example ul li.saving .emissions .percent {
                            display: inline-block;
                            font-size: 40px;
                            vertical-align: baseline;
                            margin: 0 0 0 4px
                        }

            .eco-travel.eco-content .examples .example.family-london-dublin h3:after {
                width: 95px;
                background-image: url(https://www.directferries.co.uk/images/example-family-london-dublin.png)
            }

@media(max-width: 1481px) {
    .eco-travel.eco-hero {
        height: 260px
    }

        .eco-travel.eco-hero .links {
            display: none
        }

            .eco-travel.eco-hero .intro, .eco-travel.eco-hero .links ul {
                max-width: 1196px
            }

                .eco-travel.eco-hero .intro h1 {
                    max-width: 520px;
                    font-size: 46px !important;
                    line-height: 54px !important
                }

    .eco-travel.eco-content {
        max-width: 1196px
    }

        .eco-travel.eco-content .calculate {
            margin: 0 0 60px
        }

            .eco-travel.eco-content .calculate form {
                width: calc(42.5% - 50px);
                margin: 0 50px 0 0
            }

            .eco-travel.eco-content .calculate .results {
                width: 57.5%
            }

        .eco-travel.eco-content .main-text {
            margin: 0 0 55px
        }

            .eco-travel.eco-content .main-text h2 {
                font-size: 20px
            }

            .eco-travel.eco-content .main-text p {
                font-size: 15px
            }

        .eco-travel.eco-content .examples {
            margin: 0 0 60px
        }
}

@media(max-width: 1080px) {
    .eco-travel.eco-hero {
        display: block;
        height: auto;
        padding: 0 16px;
        background: 0 0
    }

        .eco-travel.eco-hero .links {
            position: static;
            border: none;
            background: 0 0;
            display: none
        }

            .eco-travel.eco-hero .links ul {
                width: 100%;
                padding: 0;
                font-weight: 700;
                font-family: mundial-demibold,sans-serif !important;
                font-size: 14px
            }

                .eco-travel.eco-hero .links ul li {
                    margin: 0 5px 0 0
                }

                    .eco-travel.eco-hero .links ul li a {
                        border-radius: 8px 8px 0 0;
                        padding: 7px 14px;
                        color: #fff;
                        text-decoration: none;
                        background: #64b6e6
                    }

                    .eco-travel.eco-hero .links ul li:last-of-type {
                        margin: 0 0 0 auto
                    }

                        .eco-travel.eco-hero .links ul li:last-of-type a {
                            font-size: 16px;
                            background: #ff4a0e
                        }

        .eco-travel.eco-hero .intro {
            position: relative;
            padding: 50px;
            text-align: center;
            overflow: hidden;
            background: #193354
        }

            .eco-travel.eco-hero .intro * {
                position: relative;
                z-index: 20
            }

            .eco-travel.eco-hero .intro h1 {
                max-width: 600px;
                font-size: 35px !important;
                line-height: 44px !important;
                margin: 0 auto
            }

            .eco-travel.eco-hero .intro:after {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: "";
                background: #64b6e6 url(https://www.directferries.co.uk/images/eco-hero.jpg) 70% 50% no-repeat;
                background-size: cover;
                z-index: 10;
                opacity: .4
            }

    .eco-travel.eco-content {
        padding: 0 16px;
        margin: 20px auto
    }

        .eco-travel.eco-content .calculate {
            display: block;
            padding: 50px;
            margin: 0 0 50px
        }

            .eco-travel.eco-content .calculate form {
                width: auto;
                margin: 0
            }

                .eco-travel.eco-content .calculate form h2 {
                    font-size: 28px;
                    line-height: 34px;
                    text-align: center
                }

                .eco-travel.eco-content .calculate form .select {
                    display: flex
                }

                    .eco-travel.eco-content .calculate form .select p label {
                        font-size: 16px;
                        line-height: 20px
                    }

                    .eco-travel.eco-content .calculate form .select p:first-of-type, .eco-travel.eco-content .calculate form .select p:nth-of-type(2) {
                        width: calc(37.5% - 20px);
                        margin: 0 20px 0 0
                    }

                    .eco-travel.eco-content .calculate form .select p:nth-of-type(3) {
                        width: 25%;
                        margin: 0
                    }

                .eco-travel.eco-content .calculate form button {
                    height: 50px;
                    padding: 8px 15px;
                    font-size: 18px;
                    margin: 30px 0 0
                }

            .eco-travel.eco-content .calculate .results {
                width: auto;
                padding: 30px 0 15px
            }

        .eco-travel.eco-content .main-text {
            padding: 0 20px
        }

        .eco-travel.eco-content .examples {
            margin: 0 0 50px
        }

            .eco-travel.eco-content .examples h2 {
                font-size: 28px;
                line-height: 34px;
                text-align: center
            }

            .eco-travel.eco-content .examples .example {
                padding: 50px 10px;
                margin: 0 0 25px
            }

                .eco-travel.eco-content .examples .example h3 {
                    font-size: 24px !important;
                    line-height: 30px !important;
                    margin: 0 0 30px
                }

                    .eco-travel.eco-content .examples .example h3:after {
                        margin: 2px 0 0 12px
                    }

                .eco-travel.eco-content .examples .example ul li {
                    padding: 0 25px
                }

                    .eco-travel.eco-content .examples .example ul li .emissions {
                        font-size: 44px;
                        line-height: 44px
                    }

                    .eco-travel.eco-content .examples .example ul li.ferry {
                        width: 40%
                    }

                        .eco-travel.eco-content .examples .example ul li.ferry:after {
                            font-size: 18px;
                            line-height: 24px;
                            transform: translateY(-50%)
                        }

                        .eco-travel.eco-content .examples .example ul li.ferry .emissions .co2e {
                            width: 38px;
                            top: 8px;
                            font-size: 13px;
                            line-height: 16px
                        }

                    .eco-travel.eco-content .examples .example ul li.flight {
                        width: 30%
                    }

                        .eco-travel.eco-content .examples .example ul li.flight .emissions .co2e {
                            width: 38px;
                            top: 8px;
                            font-size: 13px;
                            line-height: 16px
                        }

                    .eco-travel.eco-content .examples .example ul li.saving {
                        width: 30%
                    }

                        .eco-travel.eco-content .examples .example ul li.saving .emissions .percent {
                            font-size: 36px
                        }
}

@media(max-width: 950px) {
    .eco-travel.eco-content .examples .example h3:after {
        display: block;
        margin: 10px auto 0
    }

    .eco-travel.eco-content .examples .example ul {
        display: block;
        width: auto
    }

        .eco-travel.eco-content .examples .example ul li.ferry, .eco-travel.eco-content .examples .example ul li.flight, .eco-travel.eco-content .examples .example ul li.saving {
            width: auto
        }

        .eco-travel.eco-content .examples .example ul li.ferry {
            margin: 0 0 50px
        }

            .eco-travel.eco-content .examples .example ul li.ferry:after {
                top: 100%;
                right: auto;
                left: 50%;
                transform: translate(-50%, 10px)
            }

        .eco-travel.eco-content .examples .example ul li.flight {
            margin: 0 0 15px
        }
}

@media(max-width: 768px) {
    .eco-travel.eco-hero {
        margin-top: 8px
    }

        .eco-travel.eco-hero .links {
            display: none
        }

        .eco-travel.eco-hero .intro {
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            padding: 35px 30px
        }

            .eco-travel.eco-hero .intro h1 {
                font-size: 32px !important;
                line-height: 38px !important
            }

    .eco-travel.eco-content .calculate form .select {
        display: block
    }

        .eco-travel.eco-content .calculate form .select p:first-of-type, .eco-travel.eco-content .calculate form .select p:nth-of-type(2) {
            width: auto;
            margin: 0 0 10px
        }

        .eco-travel.eco-content .calculate form .select p:nth-of-type(3) {
            width: auto;
            margin: 0
        }
}

@media(max-width: 680px) {
    .eco-travel.eco-hero .intro {
        padding: 30px 25px 25px
    }

        .eco-travel.eco-hero .intro h1 {
            font-size: 25px !important;
            line-height: 32px !important
        }

    .eco-travel.eco-content .calculate {
        padding: 16px 16px;
        margin: 0 0 35px
    }

        .eco-travel.eco-content .calculate form h2 {
            font-size: 22px;
            line-height: 28px;
            margin: 0 auto 20px
        }

        .eco-travel.eco-content .calculate form button {
            font-size: 18px;
            margin: 20px 0 0
        }

        .eco-travel.eco-content .calculate .results li {
            margin: 0 0 55px
        }

            .eco-travel.eco-content .calculate .results li p {
                margin: 0 0 10px
            }

                .eco-travel.eco-content .calculate .results li p strong {
                    display: block
                }

    .eco-travel.eco-content .main-text {
        margin: 0 0 35px
    }

        .eco-travel.eco-content .main-text h2 {
            font-size: 18px
        }

        .eco-travel.eco-content .main-text p {
            font-size: 14px
        }

    .eco-travel.eco-content .examples {
        padding: 35px 0 0;
        margin: 0 0 35px
    }

        .eco-travel.eco-content .examples h2 {
            font-size: 22px;
            line-height: 28px;
            margin: 0 0 30px
        }

        .eco-travel.eco-content .examples .example {
            padding: 16px 16px
        }

            .eco-travel.eco-content .examples .example h3 {
                font-size: 20px !important;
                line-height: 28px !important;
                margin: 0 0 30px
            }

            .eco-travel.eco-content .examples .example ul li .emissions {
                margin: auto
            }

            .eco-travel.eco-content .examples .example ul li .lower, .eco-travel.eco-content .examples .example ul li .transport {
                font-size: 20px;
                line-height: 28px
            }

                .eco-travel.eco-content .examples .example ul li .transport:after {
                    margin: 4px 0 0 8px
                }
}

@media(max-width: 480px) {
    .eco-travel.eco-content .calculate {
        padding: 30px 15px 10px
    }

        .eco-travel.eco-content .calculate .results {
            padding: 20px 0 15px
        }

            .eco-travel.eco-content .calculate .results li .bar {
                padding: 0 95px 0 0
            }

            .eco-travel.eco-content .calculate .results li.flight .bar {
                padding: 0
            }

    .eco-travel.eco-content .main-text {
        padding: 0 10px
    }

    .eco-travel.eco-content .examples .example {
        padding: 30px 15px
    }
}

body#calculator section.narrow-hero .wrapper .text p {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 32px;
    line-height: 40px
}

@media(min-width: 769px) {
    body#calculator section.narrow-hero .wrapper .text p {
        font-size: 40px;
        line-height: 48px
    }
}

body#calculator section.narrow-hero .image img {
    object-position: 60%
}

@media(min-width: 769px) {
    body#calculator section.narrow-hero .image img {
        object-position: 70%
    }
}

body#calculator .small-print {
    line-height: 24px
}

@media(min-width: 1025px) {
    body#calculator .small-print small {
        column-count: 2
    }
}

body#calculator .small-print a {
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    text-decoration: underline
}

body#calculator p {
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 24px
}

body#calculator .calculate .results li.train-bus-ferry p strong {
    color: #328639
}

body#calculator .calculate .results li.train-bus-ferry .bar .bus, body#calculator .calculate .results li.train-bus-ferry .bar .ferry, body#calculator .calculate .results li.train-bus-ferry .bar .train {
    background: #328639
}

    body#calculator .calculate .results li.train-bus-ferry .bar .bus.unused, body#calculator .calculate .results li.train-bus-ferry .bar .ferry.unused, body#calculator .calculate .results li.train-bus-ferry .bar .train.unused {
        display: none
    }

body#calculator .calculate .results li.electric-car-ferry p strong {
    color: #4b5fff
}

body#calculator .calculate .results li.electric-car-ferry .bar .car, body#calculator .calculate .results li.electric-car-ferry .bar .ferry {
    background: #4b5fff
}

body#calculator .calculate .results li.petrol-car-ferry p strong {
    color: #0f5a5c
}

body#calculator .calculate .results li.petrol-car-ferry .bar .car, body#calculator .calculate .results li.petrol-car-ferry .bar .ferry {
    background: #0f5a5c
}

body#calculator .calculate .results li.flight p strong {
    color: #e10f1e
}

body#calculator .calculate .results li.flight .bar .plane {
    background: #e10f1e
}

body#calculator section.example-journeys .wrapper > h2 {
    border-top: 1px solid #d4d4d4;
    padding-top: 32px
}

body#calculator section.example-journeys .example {
    border-radius: 8px;
    padding: 65px 50px 60px;
    text-align: center;
    margin: 0 0 25px;
    background: #f5f5f2;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.25)
}

    body#calculator section.example-journeys .example h3 {
        font-size: 26px !important;
        line-height: 34px !important;
        margin: 0 0 30px
    }

        body#calculator section.example-journeys .example h3 span {
            white-space: nowrap
        }

        body#calculator section.example-journeys .example h3:after {
            display: inline-block;
            height: 25px;
            vertical-align: top;
            content: "";
            margin: 4px 0 0 12px;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: cover
        }

    body#calculator section.example-journeys .example ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%
    }

        body#calculator section.example-journeys .example ul li {
            width: 33.33333%;
            padding: 0 55px;
            font-size: 14px;
            line-height: 24px
        }

            body#calculator section.example-journeys .example ul li .emissions {
                display: inline-block;
                font-size: 50px;
                line-height: 50px;
                margin: 0 auto 5px
            }

            body#calculator section.example-journeys .example ul li .lower, body#calculator section.example-journeys .example ul li .transport {
                font-size: 24px;
                line-height: 30px
            }

                body#calculator section.example-journeys .example ul li .transport:after {
                    display: inline-block;
                    height: 20px;
                    vertical-align: top;
                    content: "";
                    margin: 6px 0 0 8px;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    background-size: cover
                }

            body#calculator section.example-journeys .example ul li.ferry .emissions, body#calculator section.example-journeys .example ul li.flight .emissions {
                position: relative;
                padding: 0 48px 0 0
            }

                body#calculator section.example-journeys .example ul li.ferry .emissions .co2e, body#calculator section.example-journeys .example ul li.flight .emissions .co2e {
                    position: absolute;
                    top: 8px;
                    right: 0;
                    width: 42px;
                    font-size: 15px;
                    line-height: 20px;
                    text-align: left
                }

                body#calculator section.example-journeys .example ul li.ferry .emissions .kg, body#calculator section.example-journeys .example ul li.flight .emissions .kg {
                    display: block
                }

            body#calculator section.example-journeys .example ul li.ferry {
                position: relative
            }

                body#calculator section.example-journeys .example ul li.ferry .emissions {
                    color: #4b5fff
                }

                body#calculator section.example-journeys .example ul li.ferry.car .transport:after {
                    width: 54px;
                    background-image: url(https://www.directferries.co.uk/images/transport-ferry-car.png)
                }

                body#calculator section.example-journeys .example ul li.ferry:after {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    font-size: 24px;
                    line-height: 30px;
                    content: "- VS -";
                    transform: translate(35%, -50%);
                    -ms-transform: translate(35%, -50%)
                }

            body#calculator section.example-journeys .example ul li.flight .emissions {
                color: #e10f1e
            }

            body#calculator section.example-journeys .example ul li.saving .emissions {
                color: #328639
            }

                body#calculator section.example-journeys .example ul li.saving .emissions .percent {
                    display: inline-block;
                    font-size: 40px;
                    vertical-align: baseline;
                    margin: 0 0 0 4px
                }

    body#calculator section.example-journeys .example.family-london-dublin h3:after {
        width: 95px;
        background-image: url(https://www.directferries.co.uk/images/example-family-london-dublin.png)
    }

@media(max-width: 1080px) {
    body#calculator section.example-journeys h2 {
        font-size: 28px;
        line-height: 34px;
        text-align: center
    }

    body#calculator section.example-journeys .example {
        padding: 50px 10px;
        margin: 0 0 25px
    }

        body#calculator section.example-journeys .example h3 {
            font-size: 24px !important;
            line-height: 30px !important;
            margin: 0 0 30px
        }

            body#calculator section.example-journeys .example h3:after {
                margin: 2px 0 0 12px
            }

        body#calculator section.example-journeys .example ul li {
            padding: 0 25px
        }

            body#calculator section.example-journeys .example ul li .emissions {
                font-size: 44px;
                line-height: 44px
            }

            body#calculator section.example-journeys .example ul li.ferry {
                width: 40%
            }

                body#calculator section.example-journeys .example ul li.ferry:after {
                    font-size: 18px;
                    line-height: 24px;
                    transform: translateY(-50%)
                }

                body#calculator section.example-journeys .example ul li.ferry .emissions .co2e {
                    width: 38px;
                    top: 8px;
                    font-size: 13px;
                    line-height: 16px
                }

            body#calculator section.example-journeys .example ul li.flight {
                width: 30%
            }

                body#calculator section.example-journeys .example ul li.flight .emissions .co2e {
                    width: 38px;
                    top: 8px;
                    font-size: 13px;
                    line-height: 16px
                }

            body#calculator section.example-journeys .example ul li.saving {
                width: 30%
            }

                body#calculator section.example-journeys .example ul li.saving .emissions .percent {
                    font-size: 36px
                }
}

@media(max-width: 950px) {
    body#calculator section.example-journeys .example h3:after {
        display: block;
        margin: 10px auto 0
    }

    body#calculator section.example-journeys .example ul {
        display: block;
        width: auto
    }

        body#calculator section.example-journeys .example ul li.ferry, body#calculator section.example-journeys .example ul li.flight, body#calculator section.example-journeys .example ul li.saving {
            width: auto
        }

        body#calculator section.example-journeys .example ul li.ferry {
            margin: 0 0 50px
        }

            body#calculator section.example-journeys .example ul li.ferry:after {
                top: 100%;
                right: auto;
                left: 50%;
                transform: translate(-50%, 10px)
            }

        body#calculator section.example-journeys .example ul li.flight {
            margin: 0 0 15px
        }
}

@media(max-width: 680px) {
    body#calculator section.example-journeys .example {
        padding: 16px 16px
    }

        body#calculator section.example-journeys .example h3 {
            font-size: 20px !important;
            line-height: 28px !important;
            margin: 0 0 30px
        }

        body#calculator section.example-journeys .example ul li .emissions {
            margin: auto
        }

        body#calculator section.example-journeys .example ul li .lower, body#calculator section.example-journeys .example ul li .transport {
            font-size: 20px;
            line-height: 28px
        }

            body#calculator section.example-journeys .example ul li .transport:after {
                margin: 4px 0 0 8px
            }
}

@media(max-width: 480px) {
    body#calculator section.example-journeys .example {
        padding: 30px 15px
    }
}

body.ai-assistant .deal-finder {
    margin-top: unset
}

@media(min-width: 769px) {
    body.ai-assistant .deal-finder .text {
        display: none
    }
}

body.ai-assistant .deal-finder .text p.title-line-1 {
    font-family: mundial,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    line-height: 32px
}

body.ai-assistant .deal-finder .text .title-line-2 {
    font-family: rocky,serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 32px;
    line-height: 32px
}

@media(max-width: 768px) {
    #AIBot {
        background-color: #e4e8dc
    }
}

@media(max-width: 768px) {
    #AIBot header#global-navigation-mobile {
        background-color: #0f5a5c
    }
}

@media(max-width: 768px) {
    #AIBot:has(iframe.df-fullscreen-mode) header#global-navigation-mobile {
        display: none
    }
}

.dotted-bg {
    background-color: #fff;
    background-image: radial-gradient(#e4e8dc 1px, transparent 1px);
    background-size: 20px 20px
}

#chat-widget iframe {
    width: 100%
}

.ai-hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative
}

@media(max-width: 768px) {
    .ai-hero-content {
        display: flex;
        flex-direction: column;
        gap: 8px
    }
}

.ai-hero-content .hero-title {
    position: relative;
    font-family: mundial,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    line-height: 32px
}

@media(max-width: 768px) {
    .ai-hero-content .hero-title br {
        display: none
    }
}

@media(min-width: 769px) {
    .ai-hero-content .hero-title {
        text-align: center;
        font-size: 48px;
        line-height: 56px;
        margin-bottom: 32px
    }
}

.ai-hero-content p {
    font-size: 14px !important;
    line-height: 20px !important
}

    .ai-hero-content p:last-of-type {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal
    }

@media(min-width: 769px) {
    .ai-hero-content p {
        text-align: center;
        font-size: 18px !important;
        line-height: 24px !important;
        margin-bottom: 16px
    }
}

.ai-hero-content .get-started a {
    width: max-content;
    margin: 0 auto
}

.how-to h2 {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 32px
}

@media(min-width: 769px) {
    .how-to h2 {
        text-align: center;
        font-size: 32px;
        line-height: 40px
    }
}

.how-to p {
    font-size: 14px !important;
    line-height: 20px !important
}

@media(min-width: 769px) {
    .how-to p {
        font-size: 18px !important;
        line-height: 24px !important
    }
}

.how-to .ask-away {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 48px;
    gap: 24px
}

@media(min-width: 769px) {
    .how-to .ask-away {
        grid-template-columns: 1fr 2fr;
        gap: 48px
    }
}

.how-to .ask-away .img img {
    max-width: 100%;
    border-radius: 16px;
    width: 100%;
    object-fit: cover
}

@media(max-width: 768px) {
    .how-to .ask-away .img img {
        height: 300px
    }
}

.how-to .ask-away .examples section {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    border-top: 1px solid #e4e8dc;
    padding-top: 32px;
    padding-bottom: 32px
}

    .how-to .ask-away .examples section span {
        font-family: mundial-demibold,sans-serif !important;
        font-weight: 600;
        font-style: normal;
        font-size: 24px;
        line-height: 32px
    }

@media(min-width: 769px) {
    .how-to .ask-away .examples section span {
        font-size: 32px;
        line-height: 40px
    }
}

.how-to .ask-away .examples section p {
    font-size: 16px !important;
    line-height: 24px !important;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

.how-to .ask-away .examples section .message {
    background-color: #fff;
    border: 1px solid #4b5fff;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-family: mundial-demibold,sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px;
    width: fit-content
}

.beta-disclaimer {
    font-size: 14px !important;
    line-height: 20px !important;
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important
}

@media(max-width: 768px) {
    .beta-disclaimer {
        font-size: 12px !important;
        line-height: 16px !important
    }
}

.speech-bubble {
    display: none;
    position: absolute;
    background: #edefff;
    border: 1px solid #dbdfff;
    border-radius: 8px;
    padding: 8px;
    width: max-content;
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
    font-family: mundial-light,sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 20px !important
}

@media(min-width: 1200px) {
    .speech-bubble {
        display: block
    }
}

.speech-bubble::before {
    content: "";
    position: absolute;
    border: 11px solid rgba(0,0,0,0);
    border-top-color: #dbdfff;
    z-index: 0
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -19px;
    border: 10px solid rgba(0,0,0,0);
    border-top-color: #edefff;
    z-index: 1
}

.speech-bubble.t-r {
    top: -16px;
    right: -24%
}

    .speech-bubble.t-r::before {
        bottom: -22px;
        left: 30px
    }

    .speech-bubble.t-r::after {
        left: 31px
    }

.speech-bubble.t-l {
    top: -16px;
    left: -16%
}

    .speech-bubble.t-l::before {
        bottom: -22px;
        right: 30px
    }

    .speech-bubble.t-l::after {
        right: 31px
    }

.resDiscount {
    background-color: #e4e8dc;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #e4e8dc
}

    .resDiscount .resident-checkbox-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        outline: none;
        position: relative
    }

        .resDiscount .resident-checkbox-wrapper .resident-info-icon {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 6px;
            color: #212121;
            cursor: default
        }

            .resDiscount .resident-checkbox-wrapper .resident-info-icon:focus .resident-tooltip, .resDiscount .resident-checkbox-wrapper .resident-info-icon:hover .resident-tooltip, .resDiscount .resident-checkbox-wrapper .resident-info-icon.resident-active .resident-tooltip {
                opacity: 1;
                visibility: visible
            }

            .resDiscount .resident-checkbox-wrapper .resident-info-icon .resident-tooltip {
                position: absolute;
                bottom: 125%;
                left: 0;
                background-color: #212121;
                color: #fff;
                padding: 6px 10px;
                border-radius: 4px;
                white-space: normal;
                font-size: 12px;
                opacity: 0;
                visibility: hidden;
                transition: opacity .2s ease;
                z-index: 10;
                width: 300px
            }

                .resDiscount .resident-checkbox-wrapper .resident-info-icon .resident-tooltip::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 10px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #212121 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)
                }

        .resDiscount .resident-checkbox-wrapper .resident-label-text {
            margin-right: 8px;
            font-family: mundial,sans-serif !important;
            font-weight: 400 !important;
            font-style: normal !important;
            color: #212121;
            font-size: 14px !important;
            line-height: 20px !important
        }

        .resDiscount .resident-checkbox-wrapper .resident-checkbox-icon {
            position: relative;
            width: 24px;
            height: 24px
        }

            .resDiscount .resident-checkbox-wrapper .resident-checkbox-icon .resident-icon {
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity .2s ease
            }

                .resDiscount .resident-checkbox-wrapper .resident-checkbox-icon .resident-icon.resident-checked {
                    opacity: 0
                }

        .resDiscount .resident-checkbox-wrapper .resident-real-checkbox {
            display: none
        }

.logoBar {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,0)
}

@media(min-width: 769px) {
    .logoBar {
        background-color: #fff;
        padding: 16px;
        min-height: 76px !important
    }
}

.logoBar img.logo {
    max-width: 200px !important;
    margin-left: 0 !important;
    content: url("https://static.directferries.co.uk/image/brand/DirectFerries_Logotype_inverted.svg");
    width: 100% !important;
    height: auto !important
}

@media(min-width: 769px) {
    .logoBar img.logo {
        content: url("https://static.directferries.co.uk/image/brand/DirectFerries_Logotype.svg");
        max-width: 264px !important
    }
}

.logoBar img.headOpLogo {
    display: none
}

@media(min-width: 769px) {
    .logoBar img.headOpLogo {
        display: block
    }
}

.topBar {
    display: none
}

.sm12 {
    width: 100%
}

.dHide {
    display: block
}

@media(min-width: 769px) {
    .dHide {
        display: none
    }
}

.mHide {
    display: none !important
}

@media(min-width: 769px) {
    .mHide {
        display: block !important
    }
}

#backgroundPopupBE {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000 !important
}

.formPopup {
    display: none
}

.popUp {
    display: none;
    width: 75%;
    max-width: 640px !important;
    z-index: 90000 !important;
    background-color: #f5f5f2;
    padding: 0 !important
}

@media(min-width: 769px) {
    .popUp {
        width: 50%
    }
}

.popUp p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important
}

.box {
    border: 0 !important;
    background-color: rgba(0,0,0,0) !important
}

.con {
    width: 100%;
    max-width: unset;
    padding: 0 16px
}

@media(min-width: 769px) {
    .con {
        padding: 0 !important;
        margin: 0 !important
    }
}

footer:not(#main-site-footer) {
    float: unset !important;
    text-align: center;
    width: 100%;
    max-width: 768px;
    margin: 0 auto
}

@media(min-width: 769px) {
    footer:not(#main-site-footer) {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto
    }
}

footer:not(#main-site-footer) > div {
    padding: 16px 0;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 120px;
    color: #fff
}

@media(min-width: 769px) {
    footer:not(#main-site-footer) > div {
        margin-bottom: 40px;
        color: #212121
    }
}

.dev_info_box {
    z-index: 10000 !important
}