/* ===== GENERAL ===== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');

@font-face {
    font-family: 'Giorgio Sans';
    src: url('font/GiorgioSans-Bold.woff2') format('woff2'),
        url('font/GiorgioSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* { box-sizing:border-box; }
html, body { background:#bdb5e5;background:#dedaf2;background: linear-gradient(180deg, rgba(222,218,242,1) 0%, rgba(195,190,225,1) 100%);width:100%;margin:0;padding:0;height:100%;font-family:'Giorgio Sans',sans-serif; }
body { width:100%;height:100%;display:flex;align-items:center; }
img { display:block; }


.container { width:100%;max-width:1152px;margin:0 auto;height:380px;background:#fff;position:relative;overflow:hidden; } 

.container { max-width:100%;height:100%;max-height:800px; }

.background { width:100%;height:100%; }
.background img { width:100%;height:100%;object-fit:cover; }

.frame { position:absolute;top:0;width:100%;height:100%;overflow:hidden; }
img.plane  { position:absolute;bottom:60px;left:15px;transition:left 1.6s ease-in; }
img.plane.move { left:110%; }
img.departures-board { position:absolute;right:100px;top:0;transition:all 1s ease-in-out;width:30%;max-width:600px;min-width:400px; }
img.departures-board.move { top:100%; }
img.destination-sign { position:absolute;top:0;left:40px;transition:top 1s ease-in-out; }
img.destination-sign.move { top:-50%; }
.instructions { transition:bottom 1s ease-in-out;border-top-left-radius:10px;border-top-right-radius:10px;background:#5a4e9b;color:#fff;position:absolute;bottom:0;left:40px;padding:15px;text-align:center;font-size:1.25rem;font-family:"Open Sans", sans-serif; }
.instructions.move { bottom:-100px; }
form { width:100%;max-width:650px;position:absolute;top:55%;left:40px;transform:translateY(-50%);transition:left 1s ease-in-out; }
form img { position:absolute;top:0;right:-5px;transition:right 0.3s ease-in-out;z-index:2; }
form img:hover { cursor:pointer;right:-15px }
form input { position:relative;z-index:1;text-transform:uppercase;padding:33px 30px 32px;border-radius:45px;border:none;width:100%;font-size:2rem;font-family: "Giorgio Sans", sans-serif; }
form input::placeholder { color:#bfbfbf;text-wrap:wrap;position:absolute;top:50%;padding-right:90px;transform:translateY(-50%); }
.error { transition:top 0.3s ease-in-out;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-family:"Open Sans";font-size:0.9rem;position:absolute;top:0%;left:50%;background:#973434;color:#fff;padding:5px 15px;transform:translateX(-50%); }
.error.visible { top:100%; }
form.move { left:-100%; }


.frame-2 { top:100%;background:#000;color:#ffc107;overflow:hidden; }
.question-holder { position:absolute;top:0;left:0;height:100%;width:100%; }
.question { padding:30px;position:absolute;top:0;left:0;width:100%;border-bottom:3px solid #fff;height:50%;display:flex;gap:2rem;align-items:center;justify-content:center; }
.question span { text-transform:uppercase;display:inline-block;font-size:4rem;color:#ffcc45 }
.answers { position:absolute;bottom:0;left:0;width:100%;height:50%;display:flex;text-align:center; }
.answers::after { transition:opacity 0.3s ease-in-out;content:"";display:block;width:100%;height:100%;background:#000;opacity:0;position:absolute;bottom:0;left:0;pointer-events:none; }
.answers.active.faded::after { opacity:0.6;pointer-events:all; }
.answers.active { bottom:0 !important;cursor:pointer; }


.question-cover { position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0 }

.answer { padding:15px;text-transform:uppercase;position:relative;width:20%;height:100%;display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;background:#6a5fa5; }
.answer::after { position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);content:"";display:block; }
.answer.selected { background:#000 !important; }
.answer span { color:#fff;font-size:2.5rem; }
.answer:nth-child(even) { background:#5a4e9b; }
.answer:hover { background:#000 !important; }
.answers.set-2, .answers.set-3 { bottom:-100%; }
.answers.set-2 .answer,
.answers.set-3 .answer { transition:bottom 0.6s ease-in-out;bottom:-100%; }
:is(.answers.set-2, .answers.set-3) .answer.active { bottom:0; }

.frame-3 { background:#000;bottom:100%;left:0%;top:auto; }
.frame-3 > div { display:flex;width:100%;align-items:center;justify-content:center;height:100%; }
.frame-3 span { color:#FFC107;font-size:12.5rem;text-transform:uppercase; }

.frame-4 { top:0%;right:100%;background:#dedaf2;background: linear-gradient(180deg, rgba(222,218,242,1) 0%, rgba(195,190,225,1) 100%); }
.seat-slider, .slick-list, .slick-track { height:100%; }
.seat-slide { position:relative;height:100%; }
.seat-slide .seat { position:absolute;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none;width:80%; }
.window { position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);overflow:hidden;border-radius:38%;aspect-ratio:124/142;width:70%;max-width:250px; }
.window img { width:100%; }
.window-cover { position:absolute;top:0;left:0;transition:top 0.6s ease-in-out; }
.window.active .window-cover { top:-100%; }
.window-border { position:relative;z-index:2;pointer-events:none; }
.window img.window-image { position:absolute;top:1%;left:1%;width:98%;height:98%;object-fit:cover; }

.text-holder { position:absolute;top:40px;left:0;width:100%;text-align:center; }
.text-holder span { font-size:4rem;color:#5A4E9B;text-transform:uppercase; }
.cta-2 { display:none; }
.cta-2 a { color:#5A4E9B;text-decoration:none; }
.cta-2 .submit { transition:left 0.3s ease-in-out;display:inline-block;position:relative;left:0;width:70px;height:70px;vertical-align:middle;margin-left:10px; }
.cta-2:hover .submit { left:15px; }

.ticket { /*aspect-ratio:216/82;*/position:absolute;bottom:-100px;max-width:400px;transition:bottom 0.6s ease-in-out;bottom:-100%;width:90%;left:50%;transform:translateX(-50%); }
.ticket a { color:#000;text-decoration:none; }
.ticket.active { bottom:15px; }
.ticket img { width:100%;height:100%;object-fit:fill;position:absolute;top:0;left:0; }
.ticket-text { font-size:clamp(0.75rem,5vw,1rem);padding:9% 5%;font-family:"Open Sans", sans-serif;position:relative;top:0;left:23%;width:77%;height:100%;display:flex;align-items:center;flex-wrap:wrap; }
.ticket-text span { display:block; }
html.trading .cost-points { display:none; }
html.points .cost-trading { display:none; }

.try-again { display:none;font-size:1.6rem;position:absolute;top:115px;left:50%;transform:translateX(-50%);background:#ffc107;padding:15px 30px;border-radius:30px;color:#000;text-decoration:none; }
.try-again:hover { background:#000;color:#fff; }

.no-result-slide { display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;height:100%; }
.no-results { font-size:2rem; }
.no-result-slide .try-again { position:static;display:block;transform:none;margin-top:30px; }


/* Mobile Size */
@media(max-width:1152px){
    .container { width:100%;max-height:760px; height:100%; }

    .instructions { left:0;width:100%;border-radius:0;text-wrap:balance; }
    .plane { transform:scale(0.6) translateX(-30%); }
    form { top:65%; } 
    img.departures-board { transform:translateX(-50%);bottom:37%;top:auto;left:50%;width:90%;min-width:100px;max-height:50% }
    img.destination-sign { left:50%;transform:translate(-50%, 0%);width:90%;min-width:100px;max-height:13%;top:0; }
    img.departures-board.move { top:20%;right:150%;left:-150%; }
    img.plane { width:140%;bottom:0px; }
    form { width:100%;padding:0 15px;left:50%;transform:translate(-50%, -50%); }
    form.move { left:-120% }
    form img { right:8px; }
    form img:hover { right:8px; }
    form input { width:100%; }
    .question { height:35%;flex-wrap:wrap;justify-content:flex-start;gap:0.5rem;align-items:flex-start; }
    .plane-icon { width:50px; }
    .answers { height:65%;flex-wrap:wrap; }
    .answer { flex:1 1 100%;height:auto;border:1px solid #fff; }
    .answer span { font-size:2rem; }
    .question span { font-size:2.5rem;display:block;width:100%;flex:1 1 100%; }
/*    .answer:nth-child(even) { background:#6a5fa5; }*/

    .frame-3 span { color:#FFC107;font-size:6rem; }

    .window { transform:translate(-50%,-50%); }
    .seat-slide .seat { transform:translateX(-50%);width:100%;max-height:60%; }
    .ticket { transform:translateX(-50%);left:50%;bottom:-250px;width:90% }
    .ticket.active { bottom:50px; }
    .text-holder { padding:0 15px; }
    .ticket-text { font-size:1rem; }

    .try-again { top:180px;text-align:center; }

    .slick-prev { left:10px; }
    .slick-next { right:10px; }

    .slick-prev, .slick-next,.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { width:60px;height:60px;z-index:10;background:url("img/arrow.svg");background-size:100%; }
    .slick-prev { transform:translate(0, -50%) scaleX(-1) }
    .slick-disabled { opacity:0.3; }

    .slick-prev::before, .slick-next::before { color:#ffc107;font-size:60px;content:""; }

    .text-holder span { font-size:3rem;text-wrap:balance; }

    .answers::after, .question-cover { pointer-events:none; }

    form img { width:90px; }
    form input { font-size:1.5rem;padding-right:90px; }

    .cta-2 .submit { width:50px;height:50px;margin-left:0; }

} 

@media(max-width:768px){
    img.plane { bottom:5%; }
    .ticket { aspect-ratio:none; }
}

@media(max-width:560px){
    img.plane { bottom:8%; }
}