@font-face {
    font-family: 'Avenir Next';
    src: url("/assets/fonts/avenir/AvenirNextLTPro-Regular.woff");
}

@font-face {
    font-family: 'Adieu-Regular';
    src: url("/assets/fonts/GTF Adieu Family/Adieu-Regular.otf");
}

:root {
    --primary-orange: #FF6600;
    --primary-purple: #5000A0;
    --white: #fff;
    --light-purple: #8D58C1;
    --dark-charcoal: #2B2B2B;
}

body {
    margin: 0;
    max-width: 100% !important;
}

header,
footer {
    display: none;
}

.mapboxgl-canvas {
    width: 100%;
}

#findstation__quickfilter {
    display: none;
}

.mapboxgl-ctrl-geocoder--input:focus {
    outline: none;
}

.fleetcard {
    height: 100%;
    width: 100%;
    position: fixed;
}

#fleetcard-map {
    height: 100%;
}

.mapboxgl-popup-mobile-position {
    transform: none !important;
    width: 100%;
    height: 100%;
    background-color: #fff;
    justify-content: center;
}

.mapboxgl-popup {
    max-width: 100% !important;
    z-index: 2;
}

.mapboxgl-popup .mapboxgl-popup-content {
    border-radius: 20px;
    padding: 0px;
    overflow-y: scroll;
    box-shadow: none;
}

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group hr {
    margin: 0px;
    padding: 0px;
}

.mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
    font-size: 26px;
    color: #FF6600;
    top: 28px;
    right: 28px;
}

#findstation__status {
    width: 280px;
    background: var(--white);
    position: absolute;
    bottom: 0;
    z-index: 2;
    border-radius: 20px;
    padding: 18px 20px;
    margin: 11px 18px;
}

.findstation__status__item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.findstation__status__item .findstation__status__item__colour {
    height: 20px;
    width: 20px;
    margin-right: 16px;
    border-radius: 50%;
}

.findstation__status__item .findstation__status__item__desc {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 31px;
    margin-bottom: 0px;
}

.findstation__status__item:nth-child(1) .findstation__status__item__colour {
    /* background: var(--primary-orange); */
}

.findstation__status__item:nth-child(2) .findstation__status__item__colour {
    /* border: 1px solid var(--primary-orange) */
    /* background: var(--primary-purple);*/
}

/* .findstation__status__item:nth-child(3) .findstation__status__item__colour {
  background: var(--primary-purple);
} */

.findstation__statusbtn button {
    width: 50px;
    height: 50px;
    box-shadow: none !important;
    border: 0px;
    border-radius: 20px !important;
    background: var(--white);
    position: absolute;
    bottom: 20px;
    z-index: 1;
    left: 20px;
}

.findstation__statusbtn .findstation__statusbtn--active {
    background: var(--primary-orange);
    z-index: 4;
}

.findstation__statusbtn .findstation__statusbtn--active .findstation__statusbtn__icon {
    background-image: url(/assets/img/findAStation/station_status_icon_white.svg);
}

.findstation__statusbtn button .findstation__statusbtn__icon {
    background-image: url(/assets/img/findAStation/station_status_icon_orange.svg);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}

.filterby-accordion {
    width: 100%;
    background: var(--white);
    overflow-y: scroll;
    padding: 5px 5px;
    border-radius: 0px 0px 20px 20px;
}

.filterby-accordion .label {
    position: relative;
    font-size: 15px;
    color: var(--primary-purple);
    font-weight: 600;
    cursor: pointer;
    margin: 0px;
    font-family: 'Avenir Next';
    font-weight: 600;
    height: 64px;
    align-items: center;
    display: flex;
    border-top: 0.5px solid rgba(196, 196, 196, 0.5);
}

.filterby-accordion .label::before {
    background-image: url(/assets/img/findAStation/filter_dropdown_plus.svg);
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    margin-right: 20px;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
}

.filterby-accordion .content {
    position: relative;
    background: white;
    height: 0;
    font-size: 20px;
    text-align: justify;
    overflow: hidden;
    transition: 0.5s;
}

.filterby-accordion hr {
    width: 100%;
    margin-left: 0;
}

.filterby-accordion .filterby__container.active .content {
    height: auto;
}

.filterby-accordion .filterby__container.active .label::before {
    background-image: url(/assets/img/findAStation/filter_dropdown_minus.svg);
    content: '';
}

.filterby-accordion .filterby__container.active .label {
    border-bottom: 0.5px solid rgba(196, 196, 196, 0.5);
}

.fleetcard-map__filter {
    position: absolute;
    right: 20px;
    top: 84px;
    z-index: 1;
    display: inline-block;
    height: 50px;
}

.fleetcard-map__filter.fleetcard-map__filter--visible {
    width: calc(100% - 44px);
}

.fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
    justify-content: space-between;
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.fleetcard-map__filter div.fleetcard-map__filter__content {
    padding: 0;
    display: none;
    margin: 0;
}

.fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__content {
    display: block;
    height: 150%;
}

.fleetcard-map__filter__title span {
    display: none;
}

.fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title span {
    display: block;
}

.fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
    background-color: #FF6600;
    background-repeat: no-repeat;
    background-image: url('/assets/img/fleetcard/arrow-white-up.svg');
    border-radius: 30px;
    margin-right: 2px;
    background-position: center;
    padding: 25px;
}

.fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
    padding: 0px 0px;
}

.fleetcard-map__filter__title {
    display: flex;
    background: #fff;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 0px 17px;
    border-radius: 30px;
    font-family: 'Avenir Next';
}

.fleetcard-map__filter__title span {
    font-size: 18px;
    font-weight: 600;
}

.fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
    width: 16px;
    height: 16px;
    background-image: url('/assets/img/fleetcard/arrow-down.svg');
    background-repeat: no-repeat;
}

.fleetcard-map__filter__subtitle {
    display: flex;
    align-items: center;
    background: #fff;
    height: 60px;
    border-bottom: 1px solid rgba(196, 196, 196, 0.5);
}

.fleetcard-map__filter__subtitle p {
    color: #5000A0;
    font-size: 15px;
    margin: 0px;
    padding-left: 0px;
    font-family: 'Avenir Next';
    font-weight: 600;
}

#fleetcard-map__filter__dropdown,
#fleetcard-map__filter__dropdown__convenience,
#fleetcard-map__filter__dropdown__fleet,
#fleetcard-map__filter__dropdown__services,
#fleetcard-map__filter__dropdown__loyalty,
#fleetcard-map__filter__dropdown__courier {
    background: #fff;
    padding: 18px 0px;
    margin: 0;
    overflow-y: scroll;
}

.fleetcard-map__filter__dropdown__checkbox input {
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    border: 1px solid #C4C4C4;
    margin: 0px;
    font-family: 'Avenir Next';
}

.fleetcard-map__filter__dropdown__checkbox {
    display: flex;
    align-items: center;
}

.fleetcard-map__filter__dropdown__checkbox:not(:last-child) {
    margin-bottom: 11px;
}

.fleetcard-map__filter__dropdown__checkbox label {
    display: inline-block;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    user-select: none;
    cursor: pointer;
    margin-left: 14px;
    font-family: 'Avenir Next';
}

.fleetcard-map__filter__dropdown__checkbox label:first-letter {
    text-transform: capitalize;
}

.fleetcard-map__filter__dropdown__checkbox input:checked {
    background-color: #fff;
    border-color: #C4C4C4;
    background-image: url('/assets/img/fleetcard/checkbox-tick.svg');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.mapboxgl-ctrl-geocoder .suggestions {
    border-radius: 20px;
    background: var(--white);
    padding: 15px 0px;
}

.mapboxgl-ctrl-geocoder .suggestions li a {
    padding: 10px;
    border-bottom: 0px;
}

.mapboxgl-ctrl-geocoder ul .mapboxgl-ctrl-geocoder--powered-by {
    display: none !important;
}

.mapboxgl-ctrl-bottom-left {
    left: 20px;
    bottom: 120px;
    display: flex;
    flex-direction: row-reverse;
    width: calc(100% - 40px);
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group {
    border-radius: 20px;
    margin-left: 20px !important;
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
    margin: 0px;
}

.mapboxgl-ctrl-bottom-left a {
    display: none;
}

.mapboxgl-ctrl-geocoder {
    border-radius: 20px;
    width: 100%;
    max-width: none;
    margin-left: 0px;
    box-shadow: none;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon {
    fill: var(--primary-orange);
    left: unset;
    right: 15px;
    top: 11px;
    width: 30px;
    height: 30px;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right>* {
    top: 2px;
    right: 15px;
}

.mapboxgl-ctrl button:not(:disabled):hover {
    background: var(--white);
}

.mapbox-directions-component-keyline {
    border-radius: 0;
    box-shadow: none;
    height: 50px;
    width: 100%;
    max-width: 860px;
}

.touchscreen-interact,
.touchscreen-logo,
.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-compass,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib,
.mapbox-directions-component-keyline .directions-reverse,
.mapbox-directions-component-keyline .mapbox-directions-origin label,
.mapbox-directions-component-keyline .mapbox-directions-destination label {
    display: none;
}

.mapboxgl-ctrl-geocoder input[type='text'] {
    border-radius: 20px;
    box-shadow: none;
    height: 50px;
    width: 100%;
    max-width: 426px;
    padding-left: 18px;
    font-family: Avenir Next;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0em;
    color: #2B2B2B;
}

.mapboxgl-ctrl-geocoder input[type='text']::placeholder {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: var(--dark-charcoal);
    margin-left: 18px;
    transform: translate3d(0, 2px, 0)
}

.mapboxgl-ctrl-geocoder .geocoder-pin-right * {
    top: 15px;
}

.mapboxgl-ctrl-group .mapboxgl-ctrl-geolocate {
    width: 50px;
    height: 50px;
    box-shadow: none !important;
    border-radius: 20px !important;
}

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
    box-shadow: none !important;
    border-radius: 20px !important;
    margin: 22px;
}

.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: none;
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
    background-image: url('/assets/img/fleetcard/arrow-geolocation.svg')
}

.fleetcard-map__openmaps {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 20px;
    width: 192px;
}

.fleetcard-map__openmaps .fleetcard-map__openmaps__btn {
    height: 50px;
    border: none;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 30px;
    align-items: center;
    padding: 0px 23px;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #FF6600;
    text-decoration: none;
}

.fleetcard-map__openmaps .fleetcard-map__openmaps__icon {
    background-image: url('/assets/img/fleetcard/arrow-right-orange.svg');
    width: 25px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: #fff;
}

.station {
    padding: 28px 0px;
    border-radius: 20px;
}

.station__header,
.station__details,
.station__amenities {
    padding: 0px 28px;
}

.station hr {
    margin: 0px;
}

.station__header p {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    color: #5000A0;
    margin-top: 0;
    text-transform: capitalize;
    max-width: 300px;
    padding-right: 40px;
}

.station__details .station__details__title,
.station__photos .station__photos__title {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #5000A0;
}

.station__photos {
    display: flex;
    align-items: center;
    padding: 28px 28px 0px 28px;
}

#station__photos__items {
    padding-left: 16px;
}

.station__photos .station__photos__title {
    min-width: 60px;
}

#station__photos__items a {
    color: var(--white);
}

#station__photos__items a img {
    height: 60px;
    width: 80px;
    object-fit: cover;
    border-radius: 10px;
    margin: 5px;
}

.station__details .station__details__item {
    display: flex;
    text-transform: capitalize;
}

.station__details__item .station__details__item__title {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    min-width: 60px;
    color: #C4C4C4;
}

.station__details__item .station__details__item__data {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    max-width: 300px;
    color: #2B2B2B;
    padding-left: 16px;
}

.station .station__amenities,
.station .station__details {
    padding-top: 15px;
}

.station .station__amenities .station__amenities__item {
    display: flex;
    align-items: baseline;
}

.station .station__amenities .station__amenities__item img {
    width: 13px;
    margin: 0px 14px 0px 0px;
}

.station .station__amenities ul {
    -webkit-column-count: 2;
    column-count: 2;
    padding-left: 0px;
}

.station .station__amenities .station__amenities__item {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    text-transform: capitalize;
    color: #2B2B2B;
}

.station .station__openmaps {
    height: 50px;
    border: none;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 30px;
    width: 191px;
    align-items: center;
    padding: 0px 23px;
    margin-top: 20px;
    margin-left: 28px;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #FF6600;
    text-decoration: none;
    border: 1px solid #FF6600;
}

.station__openmaps .station__openmaps__icon {
    background-image: url('/assets/img/fleetcard/arrow-right-orange.svg');
    width: 25px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: #fff;
}

@media only screen and (min-width: 992px) {
    #findstation__quickfilter {
        z-index: 1;
        position: absolute;
        top: 80px;
        right: 100px;
        width: 400px;
        display: flex;
        justify-content: space-between;
        max-width: 400px;
    }

    .fleetcard-map__quickfilter {
        width: 100%;
        background: var(--primary-purple);
        height: 50px;
        border-radius: 20px;
        padding: 0px 20px;
    }

    .fleetcard-map__quickfilter ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        width: 100%;
        padding-left: 0px;
    }

    .fleetcard-map__quickfilter ul input {
        display: none;
    }

    .fleetcard-map__quickfilter ul label {
        display: flex;
        flex-direction: row-reverse;
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: var(--primary-orange);
    }

    .fleetcard-map__quickfilter ul .quickSearchIcon {
        height: 18px;
        width: 18px;
        background-size: cover;
        margin-right: 5px;
    }
}

@media only screen and (min-width: 1327px) {
    #findstation__quickfilter {
        z-index: 1;
        position: absolute;
        top: 16px;
        right: 413px;
        width: 400px;
    }
}

@media only screen and (min-width: 992px) {
    .fleetcard {
        margin-top: 0px;
    }

    .mapboxgl-ctrl-bottom-left {
        display: flex;
        flex-direction: row;
        justify-content: left;
        padding: 0px;
        max-width: 893px;
        width: calc(100% - 495px);
        bottom: 20px;
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group {
        box-shadow: none !important;
        border-radius: 20px !important;
        margin-right: 11px !important;
        margin-left: 0px !important;
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
        margin: 16px 0 0;
    }

    .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right>* {
        top: 7px;
    }

    .mapboxgl-popup .mapboxgl-popup-content {
        overflow-y: unset;
    }

    .station {
        max-width: 410px;
    }

    .fleetcard-map__filter {
        position: absolute;
        right: 100px;
        top: 16px;
        z-index: 1;
        display: inline-block;
        background: #fff;
        width: 100%;
        max-width: 293px;
        height: 50px;
        border-radius: 20px;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .fleetcard-map__filter div.fleetcard-map__filter__content {
        padding: 0;
        display: none;
        margin: 0;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__content {
        height: auto;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
        padding: 0px 28px;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
        background-color: #fff;
        background-image: url('/assets/img/fleetcard/arrow-down.svg');
        padding: 0px;
        margin-right: 0px;
    }

    .fleetcard-map__filter__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0px 28px;
    }

    .fleetcard-map__filter__title span {
        font-size: 18px;
        display: block;
    }

    .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
        width: 16px;
    }

    #fleetcard-map__filter__dropdown,
    #fleetcard-map__filter__dropdown__convenience,
    #fleetcard-map__filter__dropdown__fleet,
    #fleetcard-map__filter__dropdown__services,
    #fleetcard-map__filter__dropdown__loyalty,
    #fleetcard-map__filter__dropdown__courier {
        background: #fff;
        padding: 22px;
        margin: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow-y: unset;
        height: unset;
    }

    .fleetcard-map__filter__dropdown__checkbox input {
        -webkit-appearance: none;
        width: 19px;
        height: 19px;
        border: 1px solid #C4C4C4;
    }

    .fleetcard-map__filter__dropdown__checkbox {
        display: flex;
        align-items: center;
    }

    .fleetcard-map__filter__dropdown__checkbox:not(:last-child) {
        margin-bottom: 11px;
    }

    .fleetcard-map__filter__dropdown__checkbox label {
        display: inline-block;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        user-select: none;
        cursor: pointer;
        margin-left: 14px;
    }

    .fleetcard-map__filter__dropdown__checkbox input:checked {
        background-color: #fff;
        border-color: #C4C4C4;
        background-image: url('/assets/img/fleetcard/checkbox-tick.svg');
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mapboxgl-ctrl-geocoder {
        width: 100%;
        max-width: 339px;
        border-radius: 20px;
        margin-left: 0;
    }

    .mapboxgl-ctrl-bottom-right {
        display: block;
        margin: 0px 20px 20px 0px;
        height: 117px;
    }

    .mapboxgl-ctrl-bottom-right button {
        width: 50px;
        height: 50%;
    }

    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
        border-radius: 20px;
        margin: 0px;
        height: 100%;
    }

    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button:hover {
        border-radius: 20px;
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
        margin: 0px;
    }

    .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
        background-image: url('/assets/img/fleetcard/minus-orange.svg') !important;
    }

    .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
        background-image: url('/assets/img/fleetcard/plus-orange.svg') !important;
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out {
        border-top: none;
    }

    .filterby-accordion {
        overflow: auto;
        max-height: 400px;
    }

    .filterby-accordion::-webkit-scrollbar {
        width: 5px;
    }

    .filterby-accordion::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .filterby-accordion::-webkit-scrollbar-thumb {
        background: var(--light-purple);
    }

    .filterby-accordion::-webkit-scrollbar-thumb:hover {
        background: var(--light-purple);
    }

    .filterby-accordion .label {
        padding-left: 28px;
    }

    #findstation__status {
        width: 283px;
        background: var(--white);
        position: absolute;
        bottom: 0;
        z-index: 3;
        right: 100px;
        display: block;
        border-radius: 20px;
        padding: 15px 22px;
        margin-bottom: 22px;
    }

    .findstation__statusbtn button {
        display: none;
    }

    .touchscreen-logo {
        display: block;
        position: absolute;
        z-index: 3;
        width: 104px;
        top: 20px;
        right: 20px;
    }

    .touchscreen-logo img {
        width: 100%;
    }

    .touchscreen-interact {
        z-index: 1;
        position: absolute;
        display: flex;
        align-items: center;
        height: 60px;
        margin: 20px;
        background: var(--primary-orange);
        padding: 10px;
        border-radius: 30px;
    }

    .touchscreen-interact p {
        color: var(--white);
        font-family: Avenir Next;
        font-size: 1.5rem;
        font-weight: 700;
        padding: 0 20px;
        margin-bottom: 0px;
    }

    #screensaver {
        height: 100vh;
        display: none;
        background: black;
    }

    .screensaver-item {
        height: 100vh;
        background: no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .screensaver-item__landing-text {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        padding-left: 60px;
        color: var(--white);
    }

    .screensaver-item__station-text {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        bottom: 0;
        padding: 0px 20px 20px 20px;
        color: var(--white);
    }

    .screensaver-item__landing-text p,
    .screensaver-item__station-text p,
    .screensaver-item__landing-text span,
    .screensaver-item__station-text span {
        margin-bottom: 0px;
        line-height: 1;
    }

    .screensaver-item__date {
        color: #fff;
        font-family: 'Adieu-Regular';
        font-weight: 700;
        font-size: 28px;
        margin-top: auto;
    }
}

@media only screen and (min-width: 4000px) {
    .touchscreen-logo {
        position: absolute;
        z-index: 3;
        width: 340px;
        top: 60px;
        left: unset;
        right: 60px;
    }

    .touchscreen-logo img {
        width: 100%;
    }

    .touchscreen-interact {
        z-index: 1;
        position: absolute;
        display: flex;
        align-items: center;
        height: 145px;
        margin: 60px;
        background: var(--primary-orange);
        padding: 10px;
        border-radius: 90px;
    }

    .touchscreen-interact p {
        color: var(--white);
        font-family: Avenir Next;
        font-size: 45px;
        font-weight: 700;
        padding: 0 48px;
        margin-bottom: 0px;
    }

    .mapboxgl-ctrl-bottom-left {
        margin-left: 60px;
        justify-content: left;
        padding: 0px;
        max-width: 1386px;
        width: calc(100% - 495px);
        bottom: 60px;
    }

    .mapboxgl-ctrl-geocoder {
        width: 100%;
        max-width: 1200px;
        border-radius: 60px;
        margin-left: 0;
    }

    .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon {
        fill: var(--primary-orange);
        left: unset;
        right: 50px;
        top: 35px;
        width: 70px;
        height: 70px;
    }

    .mapboxgl-ctrl-geocoder input[type='text'] {
        font-size: 54px;
        height: 100%;
        max-width: 100%;
        padding-left: 50px;
    }

    .mapboxgl-ctrl-geocoder input[type='text']::placeholder {
        font-size: 50px;
        font-weight: 500;
        line-height: normal;
        color: var(--dark-charcoal);
        margin-left: 18px;
        transform: translate3d(0, 2px, 0)
    }

    .mapboxgl-ctrl-group .mapboxgl-ctrl-geolocate {
        width: 150px;
        height: 150px;
        box-shadow: none !important;
        border-radius: 60px !important;
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
        background-image: url('/assets/img/svg_s/touchscreen-geo-orange-arrow.svg')
    }

    #findstation__status {
        width: 843px;
        background: var(--white);
        position: absolute;
        bottom: 0;
        z-index: 2;
        right: 261px;
        display: block;
        border-radius: 60px;
        padding: 43px 60px;
        margin-bottom: 60px;
    }

    .findstation__status__item .findstation__status__item__desc {
        font-weight: 500;
        font-size: 42px;
        line-height: 92px;
        margin-bottom: 0px;
    }

    .findstation__status__item .findstation__status__item__colour {
        height: 60px;
        width: 60px;
        margin-right: 16px;
        border-radius: 50%;
    }

    .mapboxgl-ctrl-bottom-right {
        display: block;
        margin: 0px 60px 60px 0px;
        height: 329px;
    }

    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
        border-radius: 60px !important;
    }

    .mapboxgl-ctrl-bottom-right button {
        width: 164px;
        height: 50%;
    }

    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button:hover {
        border-radius: 60px !important;
    }

    .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
        background-image: url(/assets/img/svg_s/touchscreen-plus.svg) !important;
    }

    .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
        background-image: url(/assets/img/svg_s/touchscreen-minus.svg) !important;
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group {
        border-radius: 60px !important;
    }

    .station__header p {
        font-weight: 600;
        font-size: 58px;
        line-height: 79px;
        max-width: 820px;
        padding-right: 40px;
    }

    .station {
        max-width: 1000px;
    }

    .station__details .station__details__title,
    .station__photos .station__photos__title {
        font-size: 40px;
        line-height: 54px;
    }

    .station__details__item .station__details__item__title {
        font-size: 34px;
        line-height: 47px;
        min-width: 170px;
    }

    .station__details__item .station__details__item__data {
        font-size: 37px;
        line-height: 50px;
        max-width: 700px;
    }

    #station__photos__items a img {
        height: 162px;
        width: 225px;
        object-fit: cover;
        border-radius: 10px;
        margin: 5px;
    }

    .mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
        font-size: 40px;
        color: #FF6600;
        top: 54px;
        right: 28px;
    }
}