body {
overflow-x: hidden;
overflow-y: auto;
}

.newsletterSubscriber {
position: relative;
}

footer {
display: block;
}

footer>section {
background-color: #222222;
position: relative;
}

main > section {
display: inline-block;
vertical-align: top;
width: 100%;
background: #ffffff;
padding-bottom: 0;
}

main {
height: initial;
}

/* Animation Class */
.text-scroll {
position: relative;
opacity: 0;
top: 50px;
transition: 1s;
}

.is-visible {
opacity: 1;
top: 0;
}

/* End Animation Class */

.hero p,
.hero h3,
.hero a,
.benefits h6,
.benefits p,
.benefits h1,
.how-use h4,
.how-use li {
letter-spacing: 0;
}


.wrapper-f6 {
height: 100%;
max-width: 1182px;
margin: 0 auto;
position: relative;
background-color: #ffffff;
}

.fixed {
position: fixed;
transform: translate(-50%);
max-width: 1010px;
pointer-events: none;
}

.hero {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/look-1.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
padding-left: 7.3%;
padding-right: 7.3%;
}

.hero-wrapper {
position: relative;
display: flex;
}

.hero__content {
background-color: #ffffff;
width: 100%;
align-self: flex-end;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 40px 24px;
bottom: 0;
}

.hero__title {
font-size: 26px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.3em;
letter-spacing: 1.20px;
text-align: center;
color: #000000;
text-transform: uppercase;
font-family: 'Nimbus Sans Extended D', sans-serif;
}

.hero__description {
font-family: 'Nimbus Roman D', sans-serif;
max-width: 782px;
font-size: 18px;
letter-spacing: 0.82px;
text-align: center;
color: #000000;
padding-bottom: 24px;
padding-top: 24px;
line-height: 1.5em;
}

.hero__button {
height: 44px;
border-radius: 4px;
background-color: #222222;
}

.hero__link {
color: inherit;
max-width: 255px;
width: 100%;
pointer-events: all;
cursor: pointer;
}

.hero__title--center,
.hero__description--center,
.hero__button--center {
text-align: center;
}

.benefits {
margin: 0 auto;
display: flex;
flex-direction: column;
min-height: 315px;
background-color: #222222;
padding: 40px 24px;
position: relative;
max-width: 1010px;
transform: translate(0);
width: 100%;
}

.benefits-wrapper {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/look-2.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
display: flex;
align-items: flex-end;
}

.benefits__header {
font-family: 'Nimbus Sans Extended D', sans-serif;
font-size: 26px;
font-weight: bold;
letter-spacing: 1.20px;
text-align: center;
color: #ffffff;
text-transform: uppercase;
padding-bottom: 40px;
}

.benefits__container h6 {
font-family: 'Nimbus Sans Extended D', sans-serif;
text-transform: uppercase;
}

.benefits__container p {
font-family: 'Nimbus Roman D', sans-serif;
}

.benefits__wrapper {
color: #ffffff;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}

.how-use .travel-secondary,
.how-use .travel,
.how-use .how-use__container {
width: 50%;
min-height: 535px;
}

.how-use .how-use__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
padding: 48px 70px 48px 40px;
}

.how-use .how-use__f6,
.how-use .how-use__shopping {
max-width: 440px;
}

.how-use__list {
list-style: disc;
margin-left: 15px;
}

.how-use__list li {
font-size: 15px;
letter-spacing: 0;
color: #000000;
line-height: 1.8em;
font-family: 'Nimbus Roman D';
}

.how-use {
margin: 0 auto;
max-width: 1182px;
display: flex;
flex-wrap: wrap;
position: relative;
}

.how-use__link {
text-decoration: underline;
}

@media(max-width: 575px) {

.how-use .travel-secondary,
.how-use .travel,
.how-use .how-use__container {
display: flex;
width: 100%;
flex-direction: row;
}

.how-use .how-use__container--order {
order: 4;
}
}

.benefits__container--space {
margin-left: 48px;
margin-right: 48px;
}

.benefits__container {
max-width: 285px;
}

.benefits__container h6 {
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
line-height: 1.3em;
}

.benefits__container p {
font-size: 14px;
letter-spacing: 0;
}

.benefits__flight {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/icon-plane.png');
}

.benefits__price {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/icon-star-shine.png');
}

.benefits__card {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/icon-creditcard.png');
}

.benefits__icon {
background-position: center;
background-repeat: no-repeat;
display: inline-block;
text-align: center;
margin-bottom: 24px;
}

.benefits__icon--size {
width: 56px;
height: 56px;
}


@media(max-width: 768px) {
.benefits__wrapper {
flex-direction: column;
align-items: center;
}

.benefits__container--space,
.comments__container--space {
margin-top: 48px;
margin-bottom: 48px;
}
}

.how-use .travel,
.how-use .travel-secondary {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.how-use .travel {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/travel.jpg');
}

.how-use .travel-secondary {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/travel-secondary.jpg');
}

.how-use .travel-secondary,
.how-use .travel,
.how-use .how-use__container {
width: 50%;
min-height: 535px;
}

.how-use .how-use__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
padding: 48px 70px 48px 40px;
}

.how-use .how-use__f6,
.how-use .how-use__shopping {
max-width: 440px;
}

.how-use .how-use__f6 h4,
.how-use .how-use__shopping h4 {
font-family: 'Nimbus Sans Extended D', sans-serif;
font-size: 26px;
font-weight: bold;
letter-spacing: 0;
color: #000000;
margin-bottom: 24px;
text-transform: uppercase;
line-height: 1.3em;
}

.how-use .how-use__f6 p,
.how-use .how-use__shopping p {
font-family: 'Nimbus Roman D', sans-serif;
font-size: 15px;
letter-spacing: 0;
color: #000000;
}

.how-use {
margin: 0 auto;
max-width: 1182px;
display: flex;
flex-wrap: wrap;
position: relative;
}

.how-use {
background-color: #f5f5f5;
}

.how-use-video {
background-color: #222222;
color: #ffffff;
text-align: center;
}

.how-use__f6__video {
width: 100%;
}

.how-use-video iframe {
width: 100%;
height: 500px;
margin: 0 auto;
}

@media(max-width: 768px) {

.how-use .travel-secondary,
.how-use .travel,
.how-use .how-use__container {
display: flex;
width: 100%;
flex-direction: row;
}

.how-use .how-use__container--order {
order: 4;
}
}

.faq {
max-width: 1010px;
margin: 0 auto;
position: relative;
background-color: #ffffff;
padding-left: 40px;
padding-right: 70px;
padding-bottom: 48px;
}

.faq__title {
font-size: 26px;
font-weight: bold;
text-transform: none;
letter-spacing: 0;
padding-top: 64px;
line-height: 1.3em;
font-family: 'Nimbus Sans Extended D', sans-serif;
text-transform: uppercase;
}

.accordion {
width: 100%;
color: white;
overflow: hidden;
border-bottom: 0;
}

.accordion__label {
display: flex;
justify-content: space-between;
font-size: 15px;
letter-spacing: 0;
margin-top: 32px;
margin-bottom: 22px;
color: #000000;
text-transform: none;
font-family: 'Nimbus Roman D', sans-serif;
}

.accordion__label::after {
content: "\276F";
width: 25px;
height: 25px;
-webkit-transition: all .500s;
transition: all .500;
transform: rotate(90deg);
display: flex;
justify-content: center;
align-items: center;
}

.accordion__text {
font-family: "Nimbus Roman D", sans-serif;
color: #000;
max-height: 0;
font-size: 15px;
letter-spacing: 0;
transition: all .500s;
}

.accordion__input:checked~.accordion__label::after {
transform: rotate(270deg);
}

.accordion__input:checked~.accordion__text {
max-height: 100vh;
padding: 10px 0 30px;
}


@media(max-width: 768px) {
.hero__title--center br {
display: none;
}

.hero {
background-attachment: unset;
}

.hero__content {
padding-top: 32px;
padding-bottom: 32px;
}

.hero__title,
.hero__button {
font-size: 16px;
}

.hero__description {
font-size: 14px;
padding-top: 16px;
}

.fixed {
position: relative;
transform: unset;
}

.benefits {
padding-top: 54px;
padding-bottom: 54px;
}

.benefits-wrapper {
height: 100%;
background-image: none;
}

.benefits__header {
font-size: 16px;
}

.benefits__container p {
font-size: 14px;
}

.benefits__container h6 {
font-size: 14px;
}

.how-use .how-use__container {
min-height: 100%;
}

.how-use .how-use__container h4 {
font-size: 16px;
line-height: 1.4em;
}

.how-use .how-use__container p {
font-size: 14px;
}

.comments__header {
font-size: 16px;
}

.comments__title,
.comments__text {
font-size: 14px;
}

.faq .faq__title {
font-size: 16px;
}

.faq .accordion__title {
font-size: 15px;
}

.faq .accordion__text {
font-size: 14px;
}
}

@media
(-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
.hero {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/look-1@2x.jpg');
background-size: cover;
}

.benefits-wrapper {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/look-2@2x.jpg');
}

.how-use .travel {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/travel@2x.jpg');
}

.how-use .travel-secondary {
background-image: url('https://cdn-static.farfetch-contents.com/content/images/Home_CMS/Cms/BR/F6/assets/images/travel-secondary@2x.jpg');
}
}

.know__more {
cursor: pointer;
text-decoration: underline;
}

.know__more:hover {
text-decoration: none;
}

/* modal */
.know__more-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.know__more-modal__content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}

.know__more-modal__content .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.know__more-modal__content .close:hover,
.know__more-modal__content .close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}

@media all and (max-width: 1115px) {
.know__more-modal__content {
width: 80%;
}
}

"use strict";

const F6 = {
animateTextOnScroll: function () {
const targets = document.querySelectorAll("[data-scroll]");
const options = {
root: null,
rootMargin: "0px 0px 25px 0px",
threshold: 0.5
};

function handleIntersection(entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
};

if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handleIntersection, options);
targets.forEach(function (target) {
observer.observe(target);
});
}
},

togglePositionFixed: function () {
function isElementInViewport(el) {
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0 && rect.bottom >= 0) ||
(rect.bottom >=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.top <=
(window.innerHeight || document.documentElement.clientHeight)) ||
(rect.top >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight))
);
}

function togglePosition() {
const heroContent = document.querySelector('.hero__content');
const benefitContent = document.querySelector('.benefits__content');
const howUse = document.querySelector('.how-use');
const howUseInView = isElementInViewport(howUse);
const benefitInVIew = isElementInViewport(benefitContent);

if (howUseInView) {
heroContent.classList.remove('fixed')
}

if (benefitInVIew) {
heroContent.classList.add('fixed')
}
}

document.body.addEventListener('scroll', togglePosition);
},
};

window.addEventListener('DOMContentLoaded', function () {
F6.animateTextOnScroll();
});

(function () {
var modal = document.getElementById("know-more-modal");

var btn = document.getElementById("know-more");

var span = document.getElementById("know-more-close");

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}())