.menu .menu__item:nth-child(2) .menu__item__main__title span:nth-child(1) { display: flex; flex-direction: column-reverse; } .menu--open .menu__item:nth-child(2) .menu__item__main__title span:nth-child(1) { display: initial !important; } .button-before::before { content: "<  הקודם"; } .button-after::after { content: "הבא  >"; } .button-after, .button-before { color: #fff; font-family: "Fb Reforma"; font-size: 17px; min-width: 80px; } *, :after, :before { box-sizing: border-box; } body, html { overflow-x: hidden; min-height: 100%; max-height: 100%; height: 100%; } body { margin: 0; } .container { padding: 0 10px; } #app { font-family: Fb Reforma, sans-serif; font-style: normal; font-weight: 400; line-height: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: start; color: #34303d; position: relative; min-height: 100%; max-height: 100%; height: 100%; } .text-center { text-align: center; } .text-start { text-align: start; } @font-face { font-family: Fb Reforma; src: url(/fonts/fbreforma-regularwebfont.cef8a0b0.eot); src: url(/fonts/fbreforma-regularwebfont.cef8a0b0.eot?#iefix) format("embedded-opentype"), url(/fonts/fbreforma-regularwebfont.0afc8829.woff) format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Fb Reforma; src: url(/fonts/fbreforma-mediumwebfont.de95b12f.eot); src: url(/fonts/fbreforma-mediumwebfont.de95b12f.eot?#iefix) format("embedded-opentype"), url(/fonts/fbreforma-mediumwebfont.7b5c03ff.woff) format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: Fb Reforma; src: url(/fonts/fbreforma-boldwebfont.53b91e8b.eot); src: url(/fonts/fbreforma-boldwebfont.53b91e8b.eot?#iefix) format("embedded-opentype"), url(/fonts/fbreforma-boldwebfont.c8b4c0c9.woff) format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: IQOS; src: url(/fonts/IQOSW04-Regular.3d3b779f.woff2) format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: IQOS; src: url(/fonts/IQOSW04-Light.e436d742.woff2) format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: IQOS; src: url(/fonts/IQOSW04-Bold.4466d55b.woff2) format("woff2"); font-weight: 700; font-style: normal; } .ff-iqos { font-family: IQOS, sans-serif; font-size: 18px; font-weight: 700; } .fw-700 { font-weight: 700; font-size: 29px; line-height: 32px; color: #fff; } .test-view .ff-iqos { font-family: IQOS, sans-serif; font-size: 2.6vh; font-weight: 700; } .test-view .fw-700 { font-weight: 700; font-size: 29px; line-height: 32px; color: #fff; } .header[data-v-0b1f4080] { width: 100%; height: 62px; justify-content: space-between; align-items: center; padding: 19px 20px; background: #34303d; z-index: 2; transform: translateY(-100%); transition: all 1s ease; opacity: 0; display: none; } @media (min-width: 768px) { .header[data-v-0b1f4080] { gap: 9px; justify-content: center; } } .header.show[data-v-0b1f4080] { display: flex; opacity: 1; transform: translateY(0); } .header .router-link[data-v-0b1f4080] { width: 71px; height: 33px; display: flex; padding: 10px; justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; background: transparent; border: none; outline: none; } .header .router-link:disabled svg path[data-v-0b1f4080] { fill: #a3a3a3; } .header__title[data-v-0b1f4080] { color: #a3a3a3; text-align: center; font-size: 18px; font-weight: 500; } @media (min-width: 768px) { .header__title[data-v-0b1f4080] { width: 229px; } } .header.active .header__title[data-v-0b1f4080] { color: #fff; } .header .ff-iqos { font-size: 16px; } .test-view .header[data-v-0b1f4080] { width: 100%; height: 9.2dvh; justify-content: space-between; align-items: center; padding: 2.8dvh 2.9dvh; background: #34303d; z-index: 2; transform: translateY(-100%); transition: all 1s ease; opacity: 0; display: none; } @media (min-width: 768px) { .test-view .header[data-v-0b1f4080] { gap: 9px; justify-content: center; } } .test-view .header.show[data-v-0b1f4080] { display: flex; opacity: 1; transform: translateY(0); } .test-view .header .router-link[data-v-0b1f4080] { width: 10dvh; height: 4.9dvh; display: flex; padding: 12.5px; justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; background: transparent; border: none; outline: none; } .test-view .header .router-link:disabled svg path[data-v-0b1f4080] { fill: #a3a3a3; } .test-view .header__title[data-v-0b1f4080] { color: #a3a3a3; text-align: center; font-size: 18px; font-weight: 500; } @media (min-width: 768px) { .test-view .header__title[data-v-0b1f4080] { width: 229px; } } .test-view .header.active .test-view .header__title[data-v-0b1f4080] { color: #fff; } .header .ff-iqos { font-size: 14px; } .descr[data-v-2e48425a] { margin-top: 27px; z-index: 2; pointer-events: none; font-size: 21px; margin-bottom: 41px; font-weight: 500; white-space: nowrap; } @media (min-width: 768px) { .descr[data-v-2e48425a] br { display: none !important; } } [data-v-2e48425a] .ff-iqos { font-family: IQOS, sans-serif; font-size: 18px; font-weight: 700; } [data-v-2e48425a] .fw-700 { font-weight: 700; font-size: 29px; line-height: 32px; color: #fff; } @media (min-width: 768px) { [data-v-2e48425a] .fw-700 { display: block; } } [data-v-2e48425a] .fw-700.ff-iqos { font-size: 21px; } .home .descr[data-v-2e48425a] { min-height: 85px; margin-bottom: 0; } .home.step-7 .descr[data-v-2e48425a] { min-height: 64px; } .overlay[data-v-4bb48801] { height: 230px; } .overlay[data-v-4bb48801], .test-view .overlay[data-v-4bb48801] { position: absolute; top: 0; left: 0; width: 100%; background: linear-gradient(180deg, #00d1d2 57.22%, rgba(0, 209, 210, 0)); z-index: 1; } .test-view .overlay[data-v-4bb48801] { height: 34.3dvh; } .primary-btn[data-v-a1be9320] { display: inline-flex; padding: 16px 21px; justify-content: center; align-items: center; border-radius: 50px; background: #fff; color: #000; text-align: center; font-family: Fb Reforma, sans-serif; font-size: 14px; font-weight: 500; z-index: 3; text-decoration: none; cursor: pointer; border: none; gap: 10px; white-space: nowrap; } .primary-btn.iqos-font[data-v-a1be9320] { font-family: IQOS, sans-serif; font-weight: 700; font-size: 14px; } .primary-btn.one-btn[data-v-a1be9320] { border: 2px solid #cbcbcb; } .primary-btn.iluma-btn[data-v-a1be9320] { border: 2px solid #e4dac1; } .primary-btn.prime-btn[data-v-a1be9320] { border: 2px solid #b6e8cb; } /*.primary-btn .ff-iqos { font-size: 9px !important; }*/ .test-view .primary-btn[data-v-a1be9320] { display: inline-flex; padding: 2.3dvh 21px; justify-content: center; align-items: center; border-radius: 50px; background: #fff; color: #000; text-align: center; font-family: Fb Reforma, sans-serif; font-size: 14px; font-weight: 500; z-index: 3; text-decoration: none; cursor: pointer; border: none; gap: 6px !important; } .test-view .primary-btn.iqos-font[data-v-a1be9320] { font-family: IQOS, sans-serif; font-weight: 700; font-size: 13.5px; } .test-view .primary-btn.one-btn[data-v-a1be9320] { border: 2px solid #cbcbcb; } .test-view .primary-btn.iluma-btn[data-v-a1be9320] { border: 2px solid #e4dac1; } .test-view .primary-btn.prime-btn[data-v-a1be9320] { border: 2px solid #b6e8cb; } .primary-btn .ff-iqos { font-family: IQOS, sans-serif; font-weight: 700; font-size: 10px !important; } video { width: 100%; height: auto; display: none; } .volume__btn { display:none !important; width: 45px; height: 45px; left: 27px; bottom: 180px; } .test-view .volume__btn, .volume__btn { display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 50px; background: #3c4043; position: absolute; z-index: 3; cursor: pointer; } .test-view .volume__btn {width: 6.7dvh;height: 6.7dvh;left: 24px;bottom: 26dvh;DISPLAY: none;} .test-view .volume__btn svg { width: 3.4dvh; } .menu[data-v-2643286f] { display: flex; padding: 17px 24px; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; background: #34303d; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; z-index: 6; } .menu__arrow[data-v-2643286f] { transition: transform 0.3s ease-in-out; transform: rotate(180deg); transform-origin: center; } .menu--open[data-v-2643286f], .menu--test[data-v-2643286f] { padding-right: 50px; } .menu--open .menu__arrow[data-v-2643286f], .menu--test .menu__arrow[data-v-2643286f] { transform:  (8px) rotate(1turn); } .menu--open .menu__top[data-v-2643286f], .menu--test .menu__top[data-v-2643286f] { flex-direction: column; border-right: 1px solid #a3a3a3; margin-right: -2.6vh; } @media (min-width: 768px) { .menu--open .menu__top[data-v-2643286f], .menu--test .menu__top[data-v-2643286f] { align-items: flex-start; width: 50%; transform: translateX(-25%); } } .menu--open .menu__item[data-v-2643286f], .menu--test .menu__item[data-v-2643286f] { width: auto; transform: translateX(2.6vh); } .menu--open .menu__item[data-v-2643286f]:after, .menu--test .menu__item[data-v-2643286f]:after { content: unset; } .menu--open .menu__item__main[data-v-2643286f], .menu--test .menu__item__main[data-v-2643286f] { flex-direction: row; } .menu--open .menu__item__main__title[data-v-2643286f], .menu--test .menu__item__main__title[data-v-2643286f] { font-size: 14px; } .menu--test .menu__item--first .menu__item__sub[data-v-2643286f] { display: flex !important; } .menu__top[data-v-2643286f] { display: flex; justify-content: center; gap: 26px; width: 100%; } @media (min-width: 768px) { .menu__top[data-v-2643286f] { justify-content: center; } } .menu__item[data-v-2643286f] { height: 100%; position: relative; width: calc(25% - 19.5px); } @media (min-width: 768px) { .menu__item[data-v-2643286f] { width: 72px; } } .menu__item[data-v-2643286f]:after { content: ""; position: absolute; top: 17px; left: -26px; height: 1px; max-width: 26px; width: 29px; background-color: #88858d; } .menu__item--last[data-v-2643286f]:after { display: none; } .menu__item__main[data-v-2643286f] { display: flex; flex-direction: column; gap: 14px; align-items: center; cursor: pointer; } .menu__item__main.active .menu__item__main__step[data-v-2643286f] { background: #00d1d2; color: #34303d; } .menu__item__main.active .menu__item__main__title[data-v-2643286f] { color: #fff; font-weight: 600; } .menu__item__main__step[data-v-2643286f] { display: flex; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; color: #34303d; font-size: 15px; border-radius: 50px; background: #a3a3a3; } .menu__item__main__title[data-v-2643286f] { color: #88858d; text-align: center; font-size: 11px; } @media (min-width: 768px) { .menu__item__main__title[data-v-2643286f] { font-size: 13px; } } .menu__item__main__title[data-v-2643286f] .ff-iqos { font-size: 10px; font-weight: 400; } .menu__item__sub[data-v-2643286f] { margin-top: 7px; display: flex; flex-direction: column; margin-right: 17px; } .menu__item__sub__title[data-v-2643286f] { padding: 12px 16px; color: #a3a3a3; font-size: 12px; text-decoration: none; cursor: pointer; } .menu__item__sub__title[data-v-2643286f] .ff-iqos { font-size: 12px; } .menu__item__sub__title.active[data-v-2643286f] { background: #3c4043; color: #fff; border-right: 1px solid #00d1d2; font-weight: 600; } .test-view .menu[data-v-2643286f] { display: flex; padding: 2.5dvh 3.5dvh; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; background: #34303d; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; z-index: 6; } .test-view .menu__arrow[data-v-2643286f] { transition: transform 0.3s ease-in-out; transform: rotate(180deg); transform-origin: center; } .test-view .menu--open[data-v-2643286f], .test-view .menu--test[data-v-2643286f] { padding-right: 50px; } .test-view .menu--open .menu__arrow[data-v-2643286f], .test-view .menu--test .menu__arrow[data-v-2643286f] { transform: translateX(8px) rotate(1turn); } .test-view .menu--open .menu__top[data-v-2643286f], .test-view .menu--test .menu__top[data-v-2643286f] { flex-direction: column; border-right: 1px solid #a3a3a3; margin-right: -18px; } @media (min-width: 768px) { .test-view .menu--open .menu__top[data-v-2643286f], .test-view .menu--test .menu__top[data-v-2643286f] { align-items: flex-start; width: 50%; transform: translateX(-25%); } } .test-view .menu--open .menu__item[data-v-2643286f], .test-view .menu--test .menu__item[data-v-2643286f] { width: auto; transform: translateX(2.6dvh); } .test-view .menu--open .menu__item[data-v-2643286f]:after, .test-view .menu--test .menu__item[data-v-2643286f]:after { content: unset; } .test-view .menu--open .menu__item__main[data-v-2643286f], .test-view .menu--test .menu__item__main[data-v-2643286f] { flex-direction: row; } .test-view .menu--open .menu__item__main__title[data-v-2643286f], .test-view .menu--test .menu__item__main__title[data-v-2643286f] { font-size: 14px; } .test-view .menu--test .menu__item--first .menu__item__sub[data-v-2643286f] { display: flex !important; } .test-view .menu__top[data-v-2643286f] { display: flex; justify-content: center; gap: 26px; width: 100%; } @media (min-width: 768px) { .test-view .menu__top[data-v-2643286f] { justify-content: center; } } .test-view .menu__item[data-v-2643286f] { height: 100%; position: relative; width: calc(25% - 19.5px); } @media (min-width: 768px) { .test-view .menu__item[data-v-2643286f] { width: 72px; } } .test-view .menu__item[data-v-2643286f]:after { content: ""; position: absolute; top: 2.5dvh; left: -26px; height: 1px; max-width: 26px; width: 29px; background-color: #88858d; } .test-view .menu__item--last[data-v-2643286f]:after { display: none; } .test-view .menu__item__main[data-v-2643286f] { display: flex; flex-direction: column; gap: 14px; align-items: center; cursor: pointer; } .test-view .menu__item__main.active .menu__item__main__step[data-v-2643286f] { background: #00d1d2; color: #34303d; } .test-view .menu__item__main.active .menu__item__main__title[data-v-2643286f] { color: #fff; font-weight: 600; } .test-view .menu__item__main__step[data-v-2643286f] { display: flex; width: 5.3dvh; height: 5.3dvh; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; color: #34303d; font-size: 14px; border-radius: 50px; background: #a3a3a3; } .test-view .menu__item__main__title[data-v-2643286f] { color: #88858d; text-align: center; font-size: 14px; } @media (min-width: 768px) { .test-view .menu__item__main__title[data-v-2643286f] { font-size: 14px; } } .test-view .menu__item__main__title[data-v-2643286f] .ff-iqos { font-size: 12.5px; font-weight: 400; } .test-view .menu__item__sub[data-v-2643286f] { margin-top: 1dvh; display: flex; flex-direction: column; margin-right: 17px; } .test-view .menu__item__sub__title[data-v-2643286f] { padding: 13.5px 2.3dvh; color: #a3a3a3; font-size: 13.5px; text-decoration: none; cursor: pointer; } .test-view .menu__item__sub__title[data-v-2643286f] .ff-iqos { font-size: 12.5px; } .test-view .menu__item__sub__title.active[data-v-2643286f] { background: #3c4043; color: #fff; border-right: 1px solid #00d1d2; font-weight: 600; } .logo[data-v-199468f2] { display: block; height: 28px; margin: 32px auto 0; z-index: 5; pointer-events: none; } .logo--bottom[data-v-199468f2] { width: 63px; position: absolute; right: 27px; bottom: 180px; z-index: 5; } .test-view .logo[data-v-199468f2] { display: block; height: 4.1dvh; margin: 4.7dvh auto 0; z-index: 5; pointer-events: none; } .test-view .logo--bottom[data-v-199468f2] { width: 63px; position: absolute; right: 27px; bottom: 24.9dvh; z-index: 5; } .home[data-v-121a489a] { padding-bottom: 68px; position: relative; background: url(/img/main-bg.6f1da9f2.png); background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .home[data-v-121a489a] { padding-bottom: 0; background: url(/img/main-bg-lg.ba49b832.png); min-height: 100vh; max-height: 100vh; height: 100vh; background-size: cover; } } .home.hidden[data-v-121a489a] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .home.substep-7[data-v-121a489a] { background: url(/img/device-bg.5246ad60.png); background-repeat: no-repeat; background-position: 50%; background-size: cover; background-origin: content-box; background-position-y: 60px; background-position-x: calc(50% + 16px); } @media (min-width: 768px) { .home.substep-7[data-v-121a489a] { background-position-y: 83px; background-size: contain; background-repeat: repeat; } } .home .lottie-animation-container[data-v-121a489a], .home a[data-v-121a489a] { z-index: 2; } @media (min-width: 768px) { .home .lottie-animation-container[data-v-121a489a] { height: calc(100vh - 10px); margin-bottom: -20px; } } .home__btns[data-v-121a489a] { z-index: 2; display: flex; justify-content: center; gap: 30px; } .home__device[data-v-121a489a] { display: flex; flex-direction: column; gap: 45px; align-items: center; justify-content: space-between; } .home__device:first-child img[data-v-121a489a] { width: 40px; } .home__device:nth-child(2) img[data-v-121a489a], .home__device:nth-child(3) img[data-v-121a489a] { width: 75px; } .device[data-v-121a489a] { position: relative; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; background-position: 50%; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .device[data-v-121a489a] { min-height: 100vh; max-height: 100vh; height: 100vh; } } .device.hidden[data-v-121a489a] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .device__btns[data-v-121a489a] { z-index: 4; display: flex; justify-content: center; gap: 30px; } .device__image[data-v-121a489a] { height: auto; display: block; z-index: 2; margin: 0 auto; } @media (min-width: 768px) { .device__image[data-v-121a489a] { width: 100%; max-width: 450px; } } .device__image--wrap[data-v-121a489a] { width: -moz-fit-content; width: fit-content; position: relative; margin-top: 6px; } .device__image--plus[data-v-121a489a] { position: absolute; z-index: 3; } .device__image--plus--5-1[data-v-121a489a] { top: 18%; left: 7%; } @media (min-width: 768px) { .device__image--plus--5-1[data-v-121a489a] { left: 8%; } } .device__image--plus--5-2[data-v-121a489a] { top: 50%; left: 42%; } .device__image--plus--5-3[data-v-121a489a] { top: 73%; left: 41%; } .device__image--plus--6-1[data-v-121a489a] { top: 22%; left: 11%; } @media (min-width: 768px) { .device__image--plus--6-1[data-v-121a489a] { left: 12%; } } .device__image--plus--6-2[data-v-121a489a] { top: 28%; left: 26%; } .device__image--plus--6-3[data-v-121a489a] { top: 35%; left: 43%; } .device__image--plus--6-4[data-v-121a489a] { top: 73%; left: 62%; } .device__image--plus--2-1[data-v-121a489a] { top: 77%; left: 8%; } @media (min-width: 768px) { .device__image--plus--2-1[data-v-121a489a] { top: 76%; left: 8%; } } .device__image--plus--2-2[data-v-121a489a] { top: 54%; left: 28%; } @media (min-width: 768px) { .device__image--plus--2-2[data-v-121a489a] { top: 54%; left: 25%; } } .device .lottie-animation-container[data-v-121a489a] { position: absolute; z-index: 1; } .step-1.substep-0[data-v-121a489a] { background-image: url(/img/bg-1-0.2f56e2af.png); } @media (min-width: 768px) { .step-1.substep-0[data-v-121a489a] { background-image: url(/img/bg-1-0-lg.8cfa8ead.png); } } .step-2.substep-2 .lottie-animation-container[data-v-121a489a] { width: 80%; } .step-1.substep-1[data-v-121a489a], .step-1.substep-4[data-v-121a489a], .step-1.substep-5[data-v-121a489a], .step-1.substep-6[data-v-121a489a], .step-2.substep-13[data-v-121a489a], .step-2.substep-2[data-v-121a489a] { background-image: url(/img/bg-1-1.973d2ec7.png); } @media (min-width: 768px) { .step-1.substep-1[data-v-121a489a], .step-1.substep-4[data-v-121a489a], .step-1.substep-5[data-v-121a489a], .step-1.substep-6[data-v-121a489a], .step-2.substep-13[data-v-121a489a], .step-2.substep-2[data-v-121a489a] { background-image: url(/img/bg-1-1-lg.0870b2ca.png); } } .step-1.substep-2[data-v-121a489a] { background-image: url(/img/bg-1-2.74ca00f2.png); } @media (min-width: 768px) { .step-1.substep-2[data-v-121a489a] { background-image: url(/img/bg-1-2-lg.e6a5c64d.png); } } .step-2.substep-7[data-v-121a489a], .step-2.substep-8[data-v-121a489a], .step-2.substep-9[data-v-121a489a] { background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-7[data-v-121a489a], .step-2.substep-8[data-v-121a489a], .step-2.substep-9[data-v-121a489a] { background-image: url(/img/bg-2-7-lg.aeca8dfa.png); } } .step-2.substep-1[data-v-121a489a] { background-size: contain; background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-1[data-v-121a489a] { background-image: url(/img/bg-2-1-lg.0694a125.png); } } .step-2.substep-8[data-v-121a489a] { background-size: 150%; background-position: 0; } @media (min-width: 768px) { .step-2.substep-8[data-v-121a489a] { background-size: 100%; background-position: 50%; } } .step-1.substep-3[data-v-121a489a] { background-color: #85d0ec; } .step-2.substep-3 .device__image--wrap[data-v-121a489a] { z-index: 0; } .step-3.substep-2 .device__image--wrap[data-v-121a489a] { width: -moz-fit-content; width: fit-content; } .step-2.substep-10[data-v-121a489a], .step-2.substep-11[data-v-121a489a], .step-2.substep-12[data-v-121a489a], .step-2.substep-14[data-v-121a489a], .step-2.substep-3[data-v-121a489a], .step-2.substep-4[data-v-121a489a], .step-2.substep-5[data-v-121a489a], .step-2.substep-6[data-v-121a489a], .step-3.substep-1[data-v-121a489a], .step-3.substep-2[data-v-121a489a], .step-4.substep-1[data-v-121a489a], .step-5.substep-1[data-v-121a489a], .step-5.substep-2[data-v-121a489a] { background: #85d0ec; } .tooltip[data-v-121a489a] { position: absolute; background: #fff; color: #000; padding: 17px 19px; border-radius: 20px; z-index: 6; transform: translate(-9%, -110%); font-size: 13px; font-weight: 400; width: 240px; } [data-v-121a489a] .tooltip__title { font-size: 18px; width: 100%; font-weight: 500; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #d9d9d9; } .tooltip[data-v-121a489a]:after { content: ""; position: absolute; bottom: -13px; left: 20px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 15px solid #fff; } [data-v-121a489a] .tooltip p { margin: 2px 0; } [data-v-121a489a] .tooltip.device__image--plus--6-4 { transform: translate(-75%, -110%); } [data-v-121a489a] .tooltip.device__image--plus--6-4:after { left: unset; right: 13px; } [data-v-121a489a] .tooltip svg { margin-left: 8px; } [data-v-121a489a] .tooltip .ff-iqos { font-weight: 400 !important; font-size: 13px; } .circle[data-v-121a489a] { width: 48px; height: 48px; background-color: rgba(0, 209, 210, 0.3); transition: transform 0.6s ease-out 0.1s; z-index: 6; } .circle[data-v-121a489a], .inner-circle[data-v-121a489a] { border-radius: 50%; display: flex; align-items: center; justify-content: center; } .inner-circle[data-v-121a489a] { width: 24px; height: 24px; background-color: #00d1d2; position: relative; } .horizontal-bar[data-v-121a489a], .vertical-bar[data-v-121a489a] { position: absolute; background-color: #fff; transition: transform 0.6s ease-out 0.1s; } .vertical-bar[data-v-121a489a] { width: 3.5px; height: 12px; } .horizontal-bar[data-v-121a489a] { width: 12px; height: 3.5px; } .circle.active[data-v-121a489a] { transform: scale(1.5); } .inner-circle.active[data-v-121a489a] { transform: scale(0.8); } .transitioned .horizontal-bar[data-v-121a489a], .transitioned .vertical-bar[data-v-121a489a] { transform: rotate(45deg); } .device__image[data-v-121a489a] { transition: opacity 0.5s ease-in-out; } .fade-out[data-v-121a489a] { opacity: 0; } .fade-in[data-v-121a489a] { opacity: 1; } .fade-enter-active[data-v-121a489a], .fade-leave-active[data-v-121a489a] { transition: opacity 0.3s ease-in-out; } .fade-enter-from[data-v-121a489a], .fade-leave-to[data-v-121a489a] { opacity: 0; } .one-section .device .device__image--plus--5-1[data-v-121a489a] { top: 0; left: 37%; } .one-section .device .device__image--plus--5-2[data-v-121a489a] { top: 24%; left: 43%; } .one-section .device .device__image--plus--5-3[data-v-121a489a] { top: 43%; left: 41%; } .one-section .device .device__image--plus--5-4[data-v-121a489a] { top: 71%; left: 42%; } .prime-section .device .device__image--plus--6-1[data-v-121a489a] { top: 19%; left: 9%; } .prime-section .device .device__image--plus--6-3[data-v-121a489a] { top: 30%; left: 43%; } .prime-section .device .device__image--plus--6-4[data-v-121a489a] { top: 73%; left: 62%; } .test-view .home-section[data-v-121a489a], .test-view .iluma-section[data-v-121a489a], .test-view .one-section[data-v-121a489a], .test-view .prime-section[data-v-121a489a], .test-view[data-v-121a489a] { height: 100%; min-height: 100%; max-height: 100%; } .test-view .home[data-v-121a489a] { min-height: 100dvh; max-height: 100dvh; height: 100dvh; } @media (min-width: 768px) { .test-view .home[data-v-121a489a] { min-height: 100vh; max-height: 100vh; height: 100vh; } } .test-view .lottie-animation-container[data-v-121a489a] { z-index: 2; } .test-view .device[data-v-121a489a] { min-height: 100dvh; max-height: 100dvh; height: 100dvh; } @media (min-width: 768px) { .test-view .device[data-v-121a489a] { min-height: 100%; max-height: 100%; height: 100%; } } .test-view .device__image--wrap[data-v-121a489a] { width: -moz-fit-content; width: fit-content; margin-top: 0; } .test-view .device .lottie-animation-container[data-v-121a489a] { position: absolute; z-index: 1; height: auto; } .test-view.frame .device[data-v-121a489a], .test-view.frame .home[data-v-121a489a] { min-height: 100%; max-height: 100%; height: 100%; } .test-view .circle[data-v-121a489a] { width: 7.1dvh; height: 7.1dvh; background-color: rgba(0, 209, 210, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.6s ease-out 0.1s; z-index: 6; } @media (min-width: 768px) { .test-view .circle[data-v-121a489a] { width: 15%; height: 15%; } } .test-view .inner-circle[data-v-121a489a] { width: 3.55dvh; height: 3.55dvh; background-color: #00d1d2; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } @media (min-width: 768px) { .test-view .inner-circle[data-v-121a489a] { width: 50%; height: 50%; } .test-view .inner-circle .vertical-bar[data-v-121a489a] { width: 15%; height: 50%; } .test-view .inner-circle .horizontal-bar[data-v-121a489a] { height: 15%; width: 50%; } } .home[data-v-c753495c] { padding-bottom: 68px; position: relative; background: url(/img/main-bg.6f1da9f2.png); background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .home[data-v-c753495c] { padding-bottom: 0; background: url(/img/main-bg-lg.ba49b832.png); min-height: 100vh; max-height: 100vh; height: 100vh; background-size: cover; } } .home.hidden[data-v-c753495c] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .home.substep-7[data-v-c753495c] { background: url(/img/device-bg.5246ad60.png); background-repeat: no-repeat; background-position: 50%; background-size: cover; background-origin: content-box; background-position-y: 60px; } @media (min-width: 768px) { .home.substep-7[data-v-c753495c] { background-position-y: 25px; background-size: contain; background-repeat: repeat; } } .home a[data-v-c753495c] { z-index: 2; } .home .lottie-animation-container[data-v-c753495c] { height: calc(100vh - 180px); z-index: 2; } @media (min-width: 768px) { .home .lottie-animation-container[data-v-c753495c] { height: calc(100vh - 10px); margin-bottom: -20px; } } .home__btns[data-v-c753495c] { z-index: 2; display: flex; justify-content: center; gap: 30px; } .home__device[data-v-c753495c] { display: flex; flex-direction: column; gap: 45px; align-items: center; justify-content: space-between; } .home__device:first-child img[data-v-c753495c] { width: 40px; } .home__device:nth-child(2) img[data-v-c753495c], .home__device:nth-child(3) img[data-v-c753495c] { width: 75px; } .device[data-v-c753495c] { padding-bottom: 68px; position: relative; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; background-position: 50%; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .device[data-v-c753495c] { min-height: 100vh; max-height: 100vh; height: 100vh; } } .device.hidden[data-v-c753495c] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .device__btns[data-v-c753495c] { z-index: 4; display: flex; justify-content: center; gap: 30px; } .device__image[data-v-c753495c] { height: auto; display: block; z-index: 2; margin: 0 auto; } @media (min-width: 768px) { .device__image[data-v-c753495c] { width: 100%; max-width: 450px; } } .device__image--wrap[data-v-c753495c] { width: -moz-fit-content; width: fit-content; position: relative; margin-top: 6px; } .device__image--plus[data-v-c753495c] { position: absolute; z-index: 3; } .device__image--plus--5-1[data-v-c753495c] { top: 3%; left: 5%; } @media (min-width: 768px) { .device__image--plus--5-1[data-v-c753495c] { left: 5%; } } .device__image--plus--5-2[data-v-c753495c] { top: 44%; left: 36%; } .device__image--plus--5-3[data-v-c753495c] { top: 73%; left: 41%; } .device__image--plus--6-1[data-v-c753495c] { top: 5%; left: 11%; } @media (min-width: 768px) { .device__image--plus--6-1[data-v-c753495c] { left: 12%; } } .device__image--plus--6-2[data-v-c753495c] { top: 18%; left: 29%; } .device__image--plus--6-3[data-v-c753495c] { top: 23%; left: 43%; } .device__image--plus--6-4[data-v-c753495c] { top: 73%; left: 68%; } @media (min-width: 768px) { .device__image--plus--6-4[data-v-c753495c] { top: 68%; left: 66%; } } .device__image--plus--2-1[data-v-c753495c] { top: 77%; left: 8%; } @media (min-width: 768px) { .device__image--plus--2-1[data-v-c753495c] { top: 78%; left: 4%; } } .device__image--plus--2-2[data-v-c753495c] { top: 54%; left: 28%; } @media (min-width: 768px) { .device__image--plus--2-2[data-v-c753495c] { top: 63%; left: 25%; } } .device .lottie-animation-container[data-v-c753495c] { position: absolute; bottom: 35px; z-index: 1; } @media (min-width: 768px) { .device .lottie-animation-container[data-v-c753495c] { position: relative; transform: translateY(-39px); } } .step-4.substep-1 .lottie-animation-container[data-v-c753495c] { bottom: 0; } .step-1.substep-0[data-v-c753495c] { background-image: url(/img/bg-1-0.2f56e2af.png); } @media (min-width: 768px) { .step-1.substep-0[data-v-c753495c] { background-image: url(/img/bg-1-0-lg.8cfa8ead.png); } } .step-1.substep-1[data-v-c753495c], .step-1.substep-4[data-v-c753495c], .step-1.substep-5[data-v-c753495c], .step-1.substep-6[data-v-c753495c], .step-2.substep-13[data-v-c753495c], .step-2.substep-2[data-v-c753495c] { background-image: url(/img/bg-1-1.973d2ec7.png); } @media (min-width: 768px) { .step-1.substep-1[data-v-c753495c], .step-1.substep-4[data-v-c753495c], .step-1.substep-5[data-v-c753495c], .step-1.substep-6[data-v-c753495c], .step-2.substep-13[data-v-c753495c], .step-2.substep-2[data-v-c753495c] { background-image: url(/img/bg-1-1-lg.0870b2ca.png); } } .step-1.substep-2[data-v-c753495c] { background-image: url(/img/bg-1-2.74ca00f2.png); } @media (min-width: 768px) { .step-1.substep-2[data-v-c753495c] { background-image: url(/img/bg-1-2-lg.e6a5c64d.png); } } .step-2.substep-7[data-v-c753495c], .step-2.substep-8[data-v-c753495c], .step-2.substep-9[data-v-c753495c] { background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-7[data-v-c753495c], .step-2.substep-8[data-v-c753495c], .step-2.substep-9[data-v-c753495c] { background-image: url(/img/bg-2-7-lg.aeca8dfa.png); } } .step-2.substep-1[data-v-c753495c] { background-size: contain; background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-1[data-v-c753495c] { background-image: url(/img/bg-2-1-lg.0694a125.png); } } .step-2.substep-8[data-v-c753495c] { background-size: 150%; background-position: 0; } @media (min-width: 768px) { .step-2.substep-8[data-v-c753495c] { background-size: 100%; background-position: 50%; } } .step-1.substep-3[data-v-c753495c] { background-color: #85d0ec; } .step-2.substep-3 .device__image--wrap[data-v-c753495c] { z-index: 0; } .step-3.substep-2 .device__image--wrap[data-v-c753495c] { width: -moz-fit-content; width: fit-content; } .step-2.substep-10[data-v-c753495c], .step-2.substep-11[data-v-c753495c], .step-2.substep-12[data-v-c753495c], .step-2.substep-14[data-v-c753495c], .step-2.substep-3[data-v-c753495c], .step-2.substep-4[data-v-c753495c], .step-2.substep-5[data-v-c753495c], .step-2.substep-6[data-v-c753495c], .step-3.substep-1[data-v-c753495c], .step-3.substep-2[data-v-c753495c], .step-4.substep-1[data-v-c753495c], .step-5.substep-1[data-v-c753495c], .step-5.substep-2[data-v-c753495c] { background: #85d0ec; } .tooltip[data-v-c753495c] { position: absolute; background: #fff; color: #000; padding: 17px 19px; border-radius: 20px; z-index: 6; transform: translate(-9%, -110%); font-size: 13px; font-weight: 400; width: 240px; } [data-v-c753495c] .tooltip__title { font-size: 18px; width: 100%; font-weight: 500; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #d9d9d9; } .tooltip[data-v-c753495c]:after { content: ""; position: absolute; bottom: -13px; left: 20px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 15px solid #fff; } [data-v-c753495c] .tooltip p { margin: 2px 0; } [data-v-c753495c] .tooltip.device__image--plus--6-4 { transform: translate(-75%, -110%); } [data-v-c753495c] .tooltip.device__image--plus--6-4:after { left: unset; right: 13px; } [data-v-c753495c] .tooltip svg { margin-left: 8px; } [data-v-c753495c] .tooltip .ff-iqos { font-weight: 400 !important; font-size: 13px; } .circle[data-v-c753495c] { width: 48px; height: 48px; background-color: rgba(0, 209, 210, 0.3); transition: transform 0.6s ease-out 0.1s; z-index: 6; } .circle[data-v-c753495c], .inner-circle[data-v-c753495c] { border-radius: 50%; display: flex; align-items: center; justify-content: center; } .inner-circle[data-v-c753495c] { width: 24px; height: 24px; background-color: #00d1d2; position: relative; } .horizontal-bar[data-v-c753495c], .vertical-bar[data-v-c753495c] { position: absolute; background-color: #fff; transition: transform 0.6s ease-out 0.1s; } .vertical-bar[data-v-c753495c] { width: 3.5px; height: 12px; } .horizontal-bar[data-v-c753495c] { width: 12px; height: 3.5px; } .circle.active[data-v-c753495c] { transform: scale(1.5); } .inner-circle.active[data-v-c753495c] { transform: scale(0.8); } .transitioned .horizontal-bar[data-v-c753495c], .transitioned .vertical-bar[data-v-c753495c] { transform: rotate(45deg); } .device__image[data-v-c753495c] { transition: opacity 0.5s ease-in-out; } .fade-out[data-v-c753495c] { opacity: 0; } .fade-in[data-v-c753495c] { opacity: 1; } .fade-enter-active[data-v-c753495c], .fade-leave-active[data-v-c753495c] { transition: opacity 0.3s ease-in-out; } .fade-enter-from[data-v-c753495c], .fade-leave-to[data-v-c753495c] { opacity: 0; } @media (min-width: 768px) { .one-section .step-1.substep-5 .device__image[data-v-c753495c] { width: 350px; } } .one-section .device .device__image--plus--5-1[data-v-c753495c] { top: 0; left: 37%; } .one-section .device .device__image--plus--5-2[data-v-c753495c] { top: 24%; left: 43%; } .one-section .device .device__image--plus--5-3[data-v-c753495c] { top: 43%; left: 41%; } .one-section .device .device__image--plus--5-4[data-v-c753495c] { top: 71%; left: 42%; } .test-view .lottie-animation-container[data-v-c753495c] { z-index: 2; } @media (min-width: 768px) { .test-view .lottie-animation-container[data-v-c753495c] { height: calc(100vh - 10px); margin-bottom: -20px; } } .test-view .device__image--wrap[data-v-c753495c] { width: -moz-fit-content; width: fit-content; margin-top: 0; } .test-view .device .lottie-animation-container[data-v-c753495c] { bottom: 0; position: relative; z-index: 1; margin-bottom: -3px; } @media (min-width: 768px) { .test-view .device .lottie-animation-container[data-v-c753495c] { position: relative; transform: translateY(-39px); } } .test-view .circle[data-v-c753495c] { width: 7.1vh; height: 7.1vh; background-color: rgba(0, 209, 210, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.6s ease-out 0.1s; z-index: 6; } .test-view .inner-circle[data-v-c753495c] { width: 3.55vh; height: 3.55vh; background-color: #00d1d2; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .home[data-v-842a63f6] { padding-bottom: 68px; position: relative; background: url(/img/main-bg.6f1da9f2.png); background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .home[data-v-842a63f6] { padding-bottom: 0; background: url(/img/main-bg-lg.ba49b832.png); min-height: 100vh; max-height: 100vh; height: 100vh; background-size: cover; } } .home.hidden[data-v-842a63f6] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .home.substep-7[data-v-842a63f6] { background: url(/img/device-bg.5246ad60.png); background-repeat: no-repeat; background-position: 50%; background-size: cover; background-origin: content-box; background-position-y: 60px; } @media (min-width: 768px) { .home.substep-7[data-v-842a63f6] { background-position-y: 25px; background-size: contain; background-repeat: repeat; } } .home a[data-v-842a63f6] { z-index: 2; } .home .lottie-animation-container[data-v-842a63f6] { height: calc(100vh - 180px); z-index: 2; } @media (min-width: 768px) { .home .lottie-animation-container[data-v-842a63f6] { height: calc(100vh - 10px); margin-bottom: -20px; } } .home__btns[data-v-842a63f6] { z-index: 2; display: flex; justify-content: center; gap: 30px; } .home__device[data-v-842a63f6] { display: flex; flex-direction: column; gap: 45px; align-items: center; justify-content: space-between; } .home__device:first-child img[data-v-842a63f6] { width: 40px; } .home__device:nth-child(2) img[data-v-842a63f6], .home__device:nth-child(3) img[data-v-842a63f6] { width: 75px; } .device[data-v-842a63f6] { padding-bottom: 68px; position: relative; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; background-position: 50%; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .device[data-v-842a63f6] { min-height: 100vh; max-height: 100vh; height: 100vh; } } .device.hidden[data-v-842a63f6] { position: absolute; top: 0; left: -9999px; max-width: 0; max-height: 0; overflow: hidden; } .device__btns[data-v-842a63f6] { z-index: 4; display: flex; justify-content: center; gap: 30px; } .device__image[data-v-842a63f6] { width: 85%; height: auto; display: block; z-index: 2; margin: 0 auto; } @media (min-width: 768px) { .device__image[data-v-842a63f6] { width: 100%; max-width: 450px; } } .device__image--wrap[data-v-842a63f6] { width: -moz-fit-content; width: fit-content; position: relative; margin-top: 6px; } .device__image--plus[data-v-842a63f6] { position: absolute; z-index: 3; } .device__image--plus--5-1[data-v-842a63f6] { top: 3%; left: 10%; } @media (min-width: 768px) { .device__image--plus--5-1[data-v-842a63f6] { left: 5%; } } .device__image--plus--5-2[data-v-842a63f6] { top: 44%; left: 36%; } .device__image--plus--5-3[data-v-842a63f6] { top: 73%; left: 41%; } .device__image--plus--6-1[data-v-842a63f6] { top: 10%; left: 17%; } @media (min-width: 768px) { .device__image--plus--6-1[data-v-842a63f6] { left: 12%; } } .device__image--plus--6-2[data-v-842a63f6] { top: 18%; left: 29%; } .device__image--plus--6-3[data-v-842a63f6] { top: 23%; left: 43%; } .device__image--plus--6-4[data-v-842a63f6] { top: 73%; left: 60%; } @media (min-width: 768px) { .device__image--plus--6-4[data-v-842a63f6] { top: 68%; left: 66%; } } .device__image--plus--2-1[data-v-842a63f6] { top: 74%; left: 12%; } @media (min-width: 768px) { .device__image--plus--2-1[data-v-842a63f6] { top: 78%; left: 4%; } } .device__image--plus--2-2[data-v-842a63f6] { top: 50%; left: 30%; } @media (min-width: 768px) { .device__image--plus--2-2[data-v-842a63f6] { top: 63%; left: 25%; } } .device .lottie-animation-container[data-v-842a63f6] { position: absolute; bottom: 35px; z-index: 1; } @media (min-width: 768px) { .device .lottie-animation-container[data-v-842a63f6] { position: relative; transform: translateY(-39px); } } .step-4.substep-1 .lottie-animation-container[data-v-842a63f6] { bottom: 0; } .step-1.substep-0[data-v-842a63f6] { background-image: url(/img/bg-1-0.2f56e2af.png); } @media (min-width: 768px) { .step-1.substep-0[data-v-842a63f6] { background-image: url(/img/bg-1-0-lg.8cfa8ead.png); } } .step-1.substep-1[data-v-842a63f6], .step-1.substep-4[data-v-842a63f6], .step-1.substep-5[data-v-842a63f6], .step-1.substep-6[data-v-842a63f6], .step-2.substep-13[data-v-842a63f6], .step-2.substep-2[data-v-842a63f6] { background-image: url(/img/bg-1-1.973d2ec7.png); } @media (min-width: 768px) { .step-1.substep-1[data-v-842a63f6], .step-1.substep-4[data-v-842a63f6], .step-1.substep-5[data-v-842a63f6], .step-1.substep-6[data-v-842a63f6], .step-2.substep-13[data-v-842a63f6], .step-2.substep-2[data-v-842a63f6] { background-image: url(/img/bg-1-1-lg.0870b2ca.png); } } .step-1.substep-2[data-v-842a63f6] { background-image: url(/img/bg-1-2.74ca00f2.png); } @media (min-width: 768px) { .step-1.substep-2[data-v-842a63f6] { background-image: url(/img/bg-1-2-lg.e6a5c64d.png); } } .step-2.substep-7[data-v-842a63f6], .step-2.substep-8[data-v-842a63f6], .step-2.substep-9[data-v-842a63f6] { background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-7[data-v-842a63f6], .step-2.substep-8[data-v-842a63f6], .step-2.substep-9[data-v-842a63f6] { background-image: url(/img/bg-2-7-lg.aeca8dfa.png); } } .step-2.substep-1[data-v-842a63f6] { background-size: contain; background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } @media (min-width: 768px) { .step-2.substep-1[data-v-842a63f6] { background-image: url(/img/bg-2-1-lg.0694a125.png); } } .step-2.substep-8[data-v-842a63f6] { background-size: 150%; background-position: 0; } @media (min-width: 768px) { .step-2.substep-8[data-v-842a63f6] { background-size: 100%; background-position: 50%; } } .step-1.substep-3[data-v-842a63f6] { background-color: #85d0ec; } .step-2.substep-3 .device__image--wrap[data-v-842a63f6] { z-index: 0; } .step-3.substep-2 .device__image--wrap[data-v-842a63f6] { width: -moz-fit-content; width: fit-content; } .step-2.substep-10[data-v-842a63f6], .step-2.substep-11[data-v-842a63f6], .step-2.substep-12[data-v-842a63f6], .step-2.substep-14[data-v-842a63f6], .step-2.substep-3[data-v-842a63f6], .step-2.substep-4[data-v-842a63f6], .step-2.substep-5[data-v-842a63f6], .step-2.substep-6[data-v-842a63f6], .step-3.substep-1[data-v-842a63f6], .step-3.substep-2[data-v-842a63f6], .step-4.substep-1[data-v-842a63f6], .step-5.substep-1[data-v-842a63f6], .step-5.substep-2[data-v-842a63f6] { background: #85d0ec; } .tooltip[data-v-842a63f6] { position: absolute; background: #fff; color: #000; padding: 17px 19px; border-radius: 20px; z-index: 6; transform: translate(-9%, -110%); font-size: 13px; font-weight: 400; width: 240px; } [data-v-842a63f6] .tooltip__title { font-size: 18px; width: 100%; font-weight: 500; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #d9d9d9; } .tooltip[data-v-842a63f6]:after { content: ""; position: absolute; bottom: -13px; left: 20px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 15px solid #fff; } [data-v-842a63f6] .tooltip p { margin: 2px 0; } [data-v-842a63f6] .tooltip.device__image--plus--6-4 { transform: translate(-75%, -110%); } [data-v-842a63f6] .tooltip.device__image--plus--6-4:after { left: unset; right: 13px; } [data-v-842a63f6] .tooltip svg { margin-left: 8px; } [data-v-842a63f6] .tooltip .ff-iqos { font-weight: 400 !important; font-size: 13px; } .circle[data-v-842a63f6] { width: 48px; height: 48px; background-color: rgba(0, 209, 210, 0.3); transition: transform 0.6s ease-out 0.1s; z-index: 6; } .circle[data-v-842a63f6], .inner-circle[data-v-842a63f6] { border-radius: 50%; display: flex; align-items: center; justify-content: center; } .inner-circle[data-v-842a63f6] { width: 24px; height: 24px; background-color: #00d1d2; position: relative; } .horizontal-bar[data-v-842a63f6], .vertical-bar[data-v-842a63f6] { position: absolute; background-color: #fff; transition: transform 0.6s ease-out 0.1s; } .vertical-bar[data-v-842a63f6] { width: 3.5px; height: 12px; } .horizontal-bar[data-v-842a63f6] { width: 12px; height: 3.5px; } .circle.active[data-v-842a63f6] { transform: scale(1.5); } .inner-circle.active[data-v-842a63f6] { transform: scale(0.8); } .transitioned .horizontal-bar[data-v-842a63f6], .transitioned .vertical-bar[data-v-842a63f6] { transform: rotate(45deg); } .device__image[data-v-842a63f6] { transition: opacity 0.5s ease-in-out; } .fade-out[data-v-842a63f6] { opacity: 0; } .fade-in[data-v-842a63f6] { opacity: 1; } .fade-enter-active[data-v-842a63f6], .fade-leave-active[data-v-842a63f6] { transition: opacity 0.3s ease-in-out; } .fade-enter-from[data-v-842a63f6], .fade-leave-to[data-v-842a63f6] { opacity: 0; } .one-section .step-1.substep-5 .device__image[data-v-842a63f6] { transform: scale(0.8); } @media (min-width: 768px) { .one-section .step-1.substep-5 .device__image[data-v-842a63f6] { transform: unset; width: 350px; } } .one-section .device .device__image--plus--5-1[data-v-842a63f6] { top: 7%; left: 37%; } .one-section .device .device__image--plus--5-2[data-v-842a63f6] { top: 24%; left: 43%; } .one-section .device .device__image--plus--5-3[data-v-842a63f6] { top: 43%; left: 41%; } .one-section .device .device__image--plus--5-4[data-v-842a63f6] { top: 71%; left: 42%; } .device[data-v-082f8d60] { padding-bottom: 68px; position: relative; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; overflow: hidden; background-position: 50%; min-height: 100vh; max-height: 100vh; height: 100vh; } @media (min-width: 768px) { .device[data-v-082f8d60] { min-height: 100vh; max-height: 100vh; height: 100vh; } } .device__btns[data-v-082f8d60] { z-index: 4; display: flex; justify-content: center; gap: 30px; } .device__image[data-v-082f8d60] { width: 100%; height: auto; display: block; z-index: 2; } .device__image--wrap[data-v-082f8d60] { width: 100%; position: relative; } .device__image--plus[data-v-082f8d60] { position: absolute; z-index: 3; } .device__image--plus--5-1[data-v-082f8d60] { top: 7%; left: 37%; } .device__image--plus--5-2[data-v-082f8d60] { top: 24%; left: 43%; } .device__image--plus--5-3[data-v-082f8d60] { top: 43%; left: 41%; } .device__image--plus--5-4[data-v-082f8d60] { top: 71%; left: 42%; } .device__image--plus--2-1[data-v-082f8d60] { top: 74%; left: 4%; } .device__image--plus--2-2[data-v-082f8d60] { top: 50%; left: 25%; } .step-1.substep-0[data-v-082f8d60] { background-image: url(/img/bg-1-0.2f56e2af.png); } .step-1.substep-1[data-v-082f8d60], .step-1.substep-4[data-v-082f8d60], .step-1.substep-5[data-v-082f8d60], .step-2.substep-13[data-v-082f8d60], .step-2.substep-2[data-v-082f8d60] { background-image: url(/img/bg-1-1.973d2ec7.png); } .step-1.substep-2[data-v-082f8d60] { background-image: url(/img/bg-1-2.74ca00f2.png); } .step-2.substep-1[data-v-082f8d60], .step-2.substep-7[data-v-082f8d60], .step-2.substep-8[data-v-082f8d60], .step-2.substep-9[data-v-082f8d60] { background-image: url(/img/bg-2-1.04ec2291.png); background-origin: content-box; } .step-2.substep-1[data-v-082f8d60] { background-size: contain; } .step-2.substep-8[data-v-082f8d60] { background-size: 150%; background-position: 0; } .step-1.substep-3[data-v-082f8d60] { background-color: #85d0ec; } .step-1.substep-5 .device__image[data-v-082f8d60] { transform: scale(0.8); } .step-2.substep-3 .device__image--wrap[data-v-082f8d60] { z-index: 0; } .step-3.substep-2 .device__image--wrap[data-v-082f8d60] { width: 85%; } .step-2.substep-10[data-v-082f8d60], .step-2.substep-11[data-v-082f8d60], .step-2.substep-12[data-v-082f8d60], .step-2.substep-3[data-v-082f8d60], .step-2.substep-4[data-v-082f8d60], .step-2.substep-5[data-v-082f8d60], .step-2.substep-6[data-v-082f8d60], .step-3.substep-1[data-v-082f8d60], .step-3.substep-2[data-v-082f8d60], .step-4.substep-1[data-v-082f8d60], .step-5.substep-1[data-v-082f8d60], .step-5.substep-2[data-v-082f8d60] { background: #85d0ec; } .tooltip[data-v-082f8d60] { position: absolute; background: #fff; color: #000; padding: 17px 19px; border-radius: 20px; z-index: 6; transform: translate(-9%, -110%); font-size: 13px; font-weight: 400; width: 240px; } [data-v-082f8d60] .tooltip__title { font-size: 18px; width: 100%; font-weight: 600; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #d9d9d9; } .tooltip[data-v-082f8d60]:after { content: ""; position: absolute; bottom: -13px; left: 20px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 15px solid #fff; } [data-v-082f8d60] .tooltip p { margin: 2px 0; } [data-v-082f8d60] .tooltip.device__image--plus--6-4 { transform: translate(-75%, -110%); } [data-v-082f8d60] .tooltip.device__image--plus--6-4:after { left: unset; right: 13px; } [data-v-082f8d60] .tooltip svg { margin-left: 8px; } .circle[data-v-082f8d60] { width: 48px; height: 48px; background-color: rgba(0, 209, 210, 0.3); transition: transform 0.6s ease-out 0.1s; z-index: 6; } .circle[data-v-082f8d60], .inner-circle[data-v-082f8d60] { border-radius: 50%; display: flex; align-items: center; justify-content: center; } .inner-circle[data-v-082f8d60] { width: 24px; height: 24px; background-color: #00d1d2; position: relative; } .horizontal-bar[data-v-082f8d60], .vertical-bar[data-v-082f8d60] { position: absolute; background-color: #fff; transition: transform 0.6s ease-out 0.1s; } .vertical-bar[data-v-082f8d60] { width: 3.5px; height: 12px; } .horizontal-bar[data-v-082f8d60] { width: 12px; height: 3.5px; } .circle.active[data-v-082f8d60] { transform: scale(1.5); } .inner-circle.active[data-v-082f8d60] { transform: scale(0.8); } .transitioned .horizontal-bar[data-v-082f8d60], .transitioned .vertical-bar[data-v-082f8d60] { transform: rotate(45deg); } .device__image[data-v-082f8d60] { transition: opacity 0.5s ease-in-out; } .fade-out[data-v-082f8d60] { opacity: 0; } .fade-in[data-v-082f8d60] { opacity: 1; } .fade-enter-active[data-v-082f8d60], .fade-leave-active[data-v-082f8d60] { transition: opacity 0.3s ease-in-out; } .fade-enter-from[data-v-082f8d60], .fade-leave-to[data-v-082f8d60] { opacity: 0; } .lottie-animation-container[data-v-082f8d60] { position: absolute; bottom: 35px; z-index: 1; }