@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: url("static/font/Roboto-Regular.ttf") format("truetype");
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 500;
src: url("static/font/Roboto-Medium.ttf") format("truetype");
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: url("static/font/Roboto-Bold.ttf") format("truetype");
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 300;
src: url("static/font/Roboto-Light.ttf") format("truetype");
}
body {
font-family: Roboto;
}
.primary-button {
--background: #FF6B00;
--color: white;
--border-radius: 4px;
min-height: 48px;
letter-spacing: 1.5px;
font-weight: 500;
text-transform: none;
}
.primary-button[disabled]:not([disabled="false"]) {
--background: #A2A6AF;
opacity: 0.25;
text-transform: none;
}
.tertiary-button {
--background: #616469;
--color: white;
--border-radius: 4px;
min-height: 48px;
letter-spacing: 1.5px;
font-weight: 500;
text-transform: none;
}
.tertiary-button[disabled]:not([disabled="false"]) {
--background: #A2A6AF;
opacity: 0.25;
text-transform: none;
}
.toolbar-custom-background {
--background: white;
}
.secondary-button {
--background: white;
--color: #616469;
--border-radius: 4px;
--box-shadow: 0px;
--border-color: #616469;
--border-style: solid;
--border-width: 2px;
min-height: 48px;
letter-spacing: 1.5px;
font-weight: 500;
text-transform: none;
}
.action-button {
background-color: #A2A6AF;
}
.action-button[disabled]:not([disabled="false"]) {
background-color: #e8e9eb;
opacity: 1;
}
.mask-border {
background-origin: border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.rotating-spinner {
animation: 1s linear 0s infinite normal none running rotation;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.fade-in {
-webkit-transition: opacity 2s ease-in-out 0s;
-moz-transition: opacity 2s ease-in-out 0s;
}
@keyframes fade_in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider-image-row {
flex-basis: 317px;
}
@media (max-width: 767px) {
.button_spacer {
margin: 40px 0 28px;
}
}
@media (min-width: 576px) {
ion-app {
width: 536px;
margin: auto;
}
.slider-image-row {
flex-basis: 427px;
}
}
@media (min-width: 768px) {
ion-app {
width: 608px;
margin: auto;
}
.slider-image-row {
flex-basis: 485px;
}
.button_spacer {
margin: 96px 0 32px;
}
body * {
scrollbar-width: none;
}
::-webkit-scrollbar {
display: none;
}
}
.vertical-grid {
display: flex;
flex-direction: column;
padding-top: 0;
}
.non-scrollable-grid {
height: 100%;
overflow: hidden;
}
.full-width-row {
margin-left: -5px;
margin-right: -5px;
}
.colour_card_item {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 8px;
display: flex;
}
.product_card_item {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
}
.full-width-col {
padding: 0;
}
.title-font {
font-weight: 500;
font-size: 26px;
}
.body-font {
font-size: 16px;
}
.list_header_font {
font-weight: 400;
font-size: 22px;
margin-top: 18px;
margin-bottom: 12px;
margin-left: 20px;
display: inline-block;
}
.product_card_item_small_font {
font-weight: 700;
font-size: 10px;
letter-spacing: 0.7px;
}
.product_card_item_medium_font {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.7px;
}
.product_card_item_medium_font_weighted {
font-weight: 700;
font-size: 16px;
letter-spacing: 0.7px;
}
.product_card_item_amount_font {
font-weight: 700;
font-size: 22px;
letter-spacing: 0.5px;
}
input::placeholder {
color: #616469;
opacity: 1;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]  {
-moz-appearance: textfield;
}
input:focus {
outline-color: transparent;
}
input {
box-shadow: none;
}
.flexbox_col {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.speechbubble {
background-color: #FF6B00;
position: absolute;
color: white;
padding: 20px;
border-radius: 4px;
z-index: 300;
}
.speechbubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 28px;
top: -17px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 17px solid #FF6B00;
}
.speechbubble-hider {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: transparent;
}
.cursor:hover {
cursor: pointer;
}
.burger_menu_item {
margin-bottom: 12px;
}
.ion-toolbar-no-background {
--background: transparent;
}
.burger_menu_top_item {
font-weight: 700;
font-size: large;
}
.burger_menu_legal_item {
font-weight: 300;
color: #616469;
font-size: medium;
}
.burger_menu_note_title {
font-size: small;
font-weight: 700;
}
.burger_menu_note {
font-size: x-small;
line-height: 1.4;
margin-top: 4px;
}
.divider {
border-top: 2px solid #A2A6AF;
border-radius: 4px;
}
.list_note_style {
border-width: 1px;
border-radius: 4px;
padding: 16px;
margin-left: 20px;
margin-right: 20px;
border-style: solid;
background-color: #00000026;
border-color: #FF6B00;
}
.bottom_buttons {
margin-top: 28px;
margin-bottom: 28px;
margin-left: 20px;
margin-right: 20px;
}
.sc-ion-alert-md {
color: black;
}
.tour_background {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: grid;
justify-items: center;
background-color: white;
}
.tour_top_ellipse {
position: absolute;
height: 102px;
width: 102px;
background-color: white;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
}
.tour_ellipse_circle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.tour_primary_button {
--background: #FF6B00;
}
.tour_secondary_button {
--border-color: #616469;
}
.alert-button-role-destructive .sc-ion-alert-md {
color: #E92120;
}
.viewpage-indicators {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.indicator {
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 5px;
margin-left: 5px;
background-color: #E7D1BF;
transition: width 0.3s ease 0s;
}
.indicator.active {
width: 24px;
height: 6px;
border-radius: 3px;
background-image: linear-gradient(90deg, #FFA800 0, #FF6B00 50%, #E92120 100%);
}
.notch_indicator {
position: absolute;
transform: translateX(-50%) translateY(-50%);
}
.tour_ellipse_icon_currentStage_0_lastStage_-1 {
animation-name: currentStage_0_lastStage_-1_animation;
animation-duration: 0.8s;
}
.tour_ellipse_icon_currentStage_0_lastStage_1 {
animation-name: currentStage_0_lastStage_1_animation;
animation-duration: 0.8s;
}
@keyframes currentStage_0_lastStage_-1_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes currentStage_0_lastStage_1_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_1_indicator_0 {
from {
left: 80.0%;
}
to {
left: 92.5%;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_-1_indicator_0 {
from {
left: 105.0%;
}
to {
left: 92.5%;
}
}
.notch_indicator.currentStageIndex_0_lastStageIndex_1_indicator_0 {
left: 92.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_1_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_-1_indicator_0 {
left: 92.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_-1_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_0_indicator_0 {
left: 92.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_1_lastStageIndex_2_indicator_0 {
from {
left: 67.5%;
}
to {
left: 80.0%;
}
}
@keyframes animation_currentStageIndex_1_lastStageIndex_0_indicator_0 {
from {
left: 92.5%;
}
to {
left: 80.0%;
}
}
.notch_indicator.currentStageIndex_1_lastStageIndex_2_indicator_0 {
left: 80.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_2_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_0_indicator_0 {
left: 80.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_0_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_1_indicator_0 {
left: 80.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_2_lastStageIndex_3_indicator_0 {
from {
left: 50.0%;
}
to {
left: 67.5%;
}
}
@keyframes animation_currentStageIndex_2_lastStageIndex_1_indicator_0 {
from {
left: 80.0%;
}
to {
left: 67.5%;
}
}
.notch_indicator.currentStageIndex_2_lastStageIndex_3_indicator_0 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_3_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_1_indicator_0 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_1_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_2_indicator_0 {
left: 67.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_3_lastStageIndex_4_indicator_0 {
from {
left: 32.5%;
}
to {
left: 50.0%;
}
}
@keyframes animation_currentStageIndex_3_lastStageIndex_2_indicator_0 {
from {
left: 67.5%;
}
to {
left: 50.0%;
}
}
.notch_indicator.currentStageIndex_3_lastStageIndex_4_indicator_0 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_4_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_2_indicator_0 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_2_indicator_0;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_3_indicator_0 {
left: 50.0%;
top: -27.5px;
}
.tour_ellipse_icon_currentStage_1_lastStage_0 {
animation-name: currentStage_1_lastStage_0_animation;
animation-duration: 0.8s;
}
.tour_ellipse_icon_currentStage_1_lastStage_2 {
animation-name: currentStage_1_lastStage_2_animation;
animation-duration: 0.8s;
}
@keyframes currentStage_1_lastStage_0_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes currentStage_1_lastStage_2_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_1_indicator_1 {
from {
left: 67.5%;
}
to {
left: 80.0%;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_-1_indicator_1 {
from {
left: 92.5%;
}
to {
left: 80.0%;
}
}
.notch_indicator.currentStageIndex_0_lastStageIndex_1_indicator_1 {
left: 80.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_1_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_-1_indicator_1 {
left: 80.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_-1_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_0_indicator_1 {
left: 80.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_1_lastStageIndex_2_indicator_1 {
from {
left: 50.0%;
}
to {
left: 67.5%;
}
}
@keyframes animation_currentStageIndex_1_lastStageIndex_0_indicator_1 {
from {
left: 80.0%;
}
to {
left: 67.5%;
}
}
.notch_indicator.currentStageIndex_1_lastStageIndex_2_indicator_1 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_2_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_0_indicator_1 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_0_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_1_indicator_1 {
left: 67.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_2_lastStageIndex_3_indicator_1 {
from {
left: 32.5%;
}
to {
left: 50.0%;
}
}
@keyframes animation_currentStageIndex_2_lastStageIndex_1_indicator_1 {
from {
left: 67.5%;
}
to {
left: 50.0%;
}
}
.notch_indicator.currentStageIndex_2_lastStageIndex_3_indicator_1 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_3_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_1_indicator_1 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_1_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_2_indicator_1 {
left: 50.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_3_lastStageIndex_4_indicator_1 {
from {
left: 20.0%;
}
to {
left: 32.5%;
}
}
@keyframes animation_currentStageIndex_3_lastStageIndex_2_indicator_1 {
from {
left: 50.0%;
}
to {
left: 32.5%;
}
}
.notch_indicator.currentStageIndex_3_lastStageIndex_4_indicator_1 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_4_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_2_indicator_1 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_2_indicator_1;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_3_indicator_1 {
left: 32.5%;
top: -27.5px;
}
.tour_ellipse_icon_currentStage_2_lastStage_1 {
animation-name: currentStage_2_lastStage_1_animation;
animation-duration: 0.8s;
}
.tour_ellipse_icon_currentStage_2_lastStage_3 {
animation-name: currentStage_2_lastStage_3_animation;
animation-duration: 0.8s;
}
@keyframes currentStage_2_lastStage_1_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes currentStage_2_lastStage_3_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_1_indicator_2 {
from {
left: 50.0%;
}
to {
left: 67.5%;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_-1_indicator_2 {
from {
left: 80.0%;
}
to {
left: 67.5%;
}
}
.notch_indicator.currentStageIndex_0_lastStageIndex_1_indicator_2 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_1_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_-1_indicator_2 {
left: 67.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_-1_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_0_indicator_2 {
left: 67.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_1_lastStageIndex_2_indicator_2 {
from {
left: 32.5%;
}
to {
left: 50.0%;
}
}
@keyframes animation_currentStageIndex_1_lastStageIndex_0_indicator_2 {
from {
left: 67.5%;
}
to {
left: 50.0%;
}
}
.notch_indicator.currentStageIndex_1_lastStageIndex_2_indicator_2 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_2_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_0_indicator_2 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_0_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_1_indicator_2 {
left: 50.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_2_lastStageIndex_3_indicator_2 {
from {
left: 20.0%;
}
to {
left: 32.5%;
}
}
@keyframes animation_currentStageIndex_2_lastStageIndex_1_indicator_2 {
from {
left: 50.0%;
}
to {
left: 32.5%;
}
}
.notch_indicator.currentStageIndex_2_lastStageIndex_3_indicator_2 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_3_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_1_indicator_2 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_1_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_2_indicator_2 {
left: 32.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_3_lastStageIndex_4_indicator_2 {
from {
left: 7.5%;
}
to {
left: 20.0%;
}
}
@keyframes animation_currentStageIndex_3_lastStageIndex_2_indicator_2 {
from {
left: 32.5%;
}
to {
left: 20.0%;
}
}
.notch_indicator.currentStageIndex_3_lastStageIndex_4_indicator_2 {
left: 20.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_4_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_2_indicator_2 {
left: 20.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_2_indicator_2;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_3_indicator_2 {
left: 20.0%;
top: -27.5px;
}
.tour_ellipse_icon_currentStage_3_lastStage_2 {
animation-name: currentStage_3_lastStage_2_animation;
animation-duration: 0.8s;
}
.tour_ellipse_icon_currentStage_3_lastStage_4 {
animation-name: currentStage_3_lastStage_4_animation;
animation-duration: 0.8s;
}
@keyframes currentStage_3_lastStage_2_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes currentStage_3_lastStage_4_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_1_indicator_3 {
from {
left: 32.5%;
}
to {
left: 50.0%;
}
}
@keyframes animation_currentStageIndex_0_lastStageIndex_-1_indicator_3 {
from {
left: 67.5%;
}
to {
left: 50.0%;
}
}
.notch_indicator.currentStageIndex_0_lastStageIndex_1_indicator_3 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_1_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_-1_indicator_3 {
left: 50.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_0_lastStageIndex_-1_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_0_lastStageIndex_0_indicator_3 {
left: 50.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_1_lastStageIndex_2_indicator_3 {
from {
left: 20.0%;
}
to {
left: 32.5%;
}
}
@keyframes animation_currentStageIndex_1_lastStageIndex_0_indicator_3 {
from {
left: 50.0%;
}
to {
left: 32.5%;
}
}
.notch_indicator.currentStageIndex_1_lastStageIndex_2_indicator_3 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_2_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_0_indicator_3 {
left: 32.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_1_lastStageIndex_0_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_1_lastStageIndex_1_indicator_3 {
left: 32.5%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_2_lastStageIndex_3_indicator_3 {
from {
left: 7.5%;
}
to {
left: 20.0%;
}
}
@keyframes animation_currentStageIndex_2_lastStageIndex_1_indicator_3 {
from {
left: 32.5%;
}
to {
left: 20.0%;
}
}
.notch_indicator.currentStageIndex_2_lastStageIndex_3_indicator_3 {
left: 20.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_3_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_1_indicator_3 {
left: 20.0%;
top: -27.5px;
animation-name: animation_currentStageIndex_2_lastStageIndex_1_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_2_lastStageIndex_2_indicator_3 {
left: 20.0%;
top: -27.5px;
}
@keyframes animation_currentStageIndex_3_lastStageIndex_4_indicator_3 {
from {
left: -5.0%;
}
to {
left: 7.5%;
}
}
@keyframes animation_currentStageIndex_3_lastStageIndex_2_indicator_3 {
from {
left: 20.0%;
}
to {
left: 7.5%;
}
}
.notch_indicator.currentStageIndex_3_lastStageIndex_4_indicator_3 {
left: 7.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_4_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_2_indicator_3 {
left: 7.5%;
top: -27.5px;
animation-name: animation_currentStageIndex_3_lastStageIndex_2_indicator_3;
animation-duration: 0.8s;
}
.notch_indicator.currentStageIndex_3_lastStageIndex_3_indicator_3 {
left: 7.5%;
top: -27.5px;
}
.animation_container {
background-color: #FBF8F5;
overflow: hidden;
}
.tour_stage_1_background.step_0 {
position: absolute;
left: 0;
width: 100%;
filter: blur(0);
object-fit: cover;
}
@keyframes tour_stage_1_background_animation {
0% {
filter: blur(0);
}
50% {
filter: blur(1px);
}
100% {
filter: blur(2px);
}
}
.tour_stage_1_hand_with_phone_flash_background.step_0 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 150ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_0 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 150ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_0 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.0);
}
.tour_stage_1_cam_indicator.step_0 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.0);
}
.tour_colour_expandable_item.step_0 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_0 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 150ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_0 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
@keyframes tour_stage_4_background_animation {
0% {
filter: blur(0);
}
50% {
filter: blur(3px);
}
100% {
filter: blur(6px);
}
}
.tour_stage_4_buy_option.step_0 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 150ms;
}
@keyframes tour_stage_4_buy_option_animation_up {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.5);
}
}
@keyframes tour_stage_4_buy_option_animation_down {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1.0);
}
}
.tour_stage_4_headline.step_0 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 150ms ease 0s, left 150ms ease 0s, width 150ms ease 0s, height 150ms ease 0s, border 75ms ease 0s;
}
.tour_stage_1_background.step_1 {
position: absolute;
left: 0;
width: 100%;
filter: blur(0);
object-fit: cover;
}
.tour_stage_1_hand_with_phone_flash_background.step_1 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 200ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 200ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_1 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.0);
}
.tour_stage_1_cam_indicator.step_1 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.0);
}
.tour_colour_expandable_item.step_1 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_1 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 200ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_1 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 200ms;
}
.tour_stage_4_headline.step_1 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 200ms ease 0s, left 200ms ease 0s, width 200ms ease 0s, height 200ms ease 0s, border 100ms ease 0s;
}
.tour_stage_1_background.step_2 {
position: absolute;
left: 0;
width: 100%;
filter: blur(0);
object-fit: cover;
}
.tour_stage_1_hand_with_phone_flash_background.step_2 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 100ms ease 0s;
opacity: 1.0;
}
.tour_stage_1_hand_with_phone_flash.step_2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 100ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 1.0;
}
.tour_stage_1_hand_with_phone.step_2 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.0);
}
.tour_stage_1_cam_indicator.step_2 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.0);
}
.tour_colour_expandable_item.step_2 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_2 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 100ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_2 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 100ms;
}
.tour_stage_4_headline.step_2 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 100ms ease 0s, left 100ms ease 0s, width 100ms ease 0s, height 100ms ease 0s, border 50ms ease 0s;
}
.tour_stage_1_background.step_3 {
position: absolute;
left: 0;
width: 100%;
filter: blur(0);
object-fit: cover;
}
.tour_stage_1_hand_with_phone_flash_background.step_3 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 100ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_3 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 100ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_3 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.0);
}
.tour_stage_1_cam_indicator.step_3 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.0);
}
.tour_colour_expandable_item.step_3 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_3 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 100ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_3 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 100ms;
}
.tour_stage_4_headline.step_3 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 100ms ease 0s, left 100ms ease 0s, width 100ms ease 0s, height 100ms ease 0s, border 50ms ease 0s;
}
.tour_stage_1_background.step_4 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 1500ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_4 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 1500ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 1500ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_4 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_4 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_4 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_4 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 1500ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_4 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_4 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 1500ms;
}
.tour_stage_4_headline.step_4 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 1500ms ease 0s, left 1500ms ease 0s, width 1500ms ease 0s, height 1500ms ease 0s, border 750ms ease 0s;
}
.tour_stage_1_background.step_5 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_5 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_5 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_5 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_5 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_5 {
position: absolute;
visibility: hidden;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_5 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_5 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_5 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_5 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_6 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 1000ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_6 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 1000ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_6 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 1000ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_6 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_6 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_6 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 1000ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_6 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 1000ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_6 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_6 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 1000ms;
}
.tour_stage_4_headline.step_6 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 1000ms ease 0s, left 1000ms ease 0s, width 1000ms ease 0s, height 1000ms ease 0s, border 500ms ease 0s;
}
.tour_stage_1_background.step_7 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_7 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_7 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_7 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_7 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_7 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_7 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_7 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_7 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_7 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_8 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 400ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_8 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 400ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_8 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 400ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_8 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_8 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_8 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 400ms ease 0s, left 400ms ease 0s, width 400ms ease 0s, height 400ms ease 0s, border 200ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_8 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 400ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_8 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_8 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 400ms;
}
.tour_stage_4_headline.step_8 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 400ms ease 0s, left 400ms ease 0s, width 400ms ease 0s, height 400ms ease 0s, border 200ms ease 0s;
}
.tour_stage_1_background.step_9 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_9 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_9 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_9 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_9 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_9 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_9 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_9 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_9 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_9 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_10 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_10 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_10 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_10 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_10 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_10 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_10 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_10 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_10 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_10 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_11 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_11 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_11 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_11 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_11 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_11 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_11 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_11 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0);
}
.tour_stage_4_buy_option.step_11 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_11 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_12 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_12 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_12 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_12 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_12 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_12 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_12 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_12 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(6px);
animation-name: tour_stage_4_background_animation;
animation-duration: 800ms;
}
.tour_stage_4_buy_option.step_12 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_12 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_13 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_13 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_13 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_13 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_13 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_13 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_13 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_13 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(6px);
animation-name: tour_stage_4_background_animation;
animation-duration: 800ms;
}
.tour_stage_4_buy_option.step_13 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_13 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_14 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_14 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_14 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_14 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_14 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_14 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_14 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_14 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(6px);
animation-name: tour_stage_4_background_animation;
animation-duration: 800ms;
}
.tour_stage_4_buy_option.step_14 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_14 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: visible;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_15 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_15 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_15 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_15 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_15 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_15 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_15 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_15 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(6px);
animation-name: tour_stage_4_background_animation;
animation-duration: 800ms;
}
.tour_stage_4_buy_option.step_15 {
transform: scale(1.5);
animation-name: tour_stage_4_buy_option_animation_up;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_15 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: visible;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
.tour_stage_1_background.step_16 {
position: absolute;
left: 0;
width: 100%;
filter: blur(2px);
object-fit: cover;
animation-name: tour_stage_1_background_animation;
animation-duration: 800ms;
}
.tour_stage_1_hand_with_phone_flash_background.step_16 {
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
transition: opacity 800ms ease 0s;
opacity: 0.0;
}
.tour_stage_1_hand_with_phone_flash.step_16 {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: opacity 800ms ease 0s;
background-color: rgba(255, 255, 255, 0.95);
opacity: 0.0;
}
.tour_stage_1_hand_with_phone.step_16 {
position: absolute;
width: 60%;
height: auto;
transform: translateX(-50%) scale(1.3);
}
.tour_stage_1_cam_indicator.step_16 {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.tour_colour_expandable_item.step_16 {
position: absolute;
visibility: visible;
opacity: 1.0;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
will-change: transform;
}
.tour_stage_2_colour_expandable_item_background.step_16 {
position: absolute;
left: 50%;
width: 85%;
height: 96px;
background-color: white;
border-radius: 4px;
opacity: 0.0;
transform: translateX(-50%) translateY(-50%);
transition: opacity 800ms ease 0s;
display: flex;
justify-content: center;
align-items: flex-start;
}
.tour_stage_4_background.step_16 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(6px);
animation-name: tour_stage_4_background_animation;
animation-duration: 800ms;
}
.tour_stage_4_buy_option.step_16 {
transform: scale(1.0);
animation-name: tour_stage_4_buy_option_animation_down;
animation-duration: 800ms;
}
.tour_stage_4_headline.step_16 {
position: absolute;
left: 50%;
top: 5%;
width: 80%;
border-radius: 4px;
background-color: white;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
visibility: visible;
transform: translateX(-50%) translateY(-50%);
transition: bottom 800ms ease 0s, left 800ms ease 0s, width 800ms ease 0s, height 800ms ease 0s, border 400ms ease 0s;
}
#loading-spinner-gradient {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loading-spinner-hole {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.75);
}
.loading_spinner_container.step_0 {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
}
.loading_spinner_roller.step_0 {
position: absolute;
left: 8%;
top: -45%;
transform: scale(1.5);
transition: left 0ms ease 0s, top 0ms ease 0s;
}
.loading_spinner_color_field_container.step_0 {
position: absolute;
left: 27%;
top: -27%;
height: 106px;
width: 60px;
transform: rotate(-30deg);
}
.loading_spinner_color_field.step_0 {
position: absolute;
left: 0;
top: 0;
background-color: #FF6B00;
height: 10px;
width: 60px;
transform: none;
transition: height 0ms ease 0s;
}
.loading_spinner_container.step_1 {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
}
.loading_spinner_roller.step_1 {
position: absolute;
left: 75%;
top: 72%;
transform: scale(1.5);
transition: left 1000ms ease 0s, top 1000ms ease 0s;
}
.loading_spinner_color_field_container.step_1 {
position: absolute;
left: 27%;
top: -27%;
height: 106px;
width: 60px;
transform: rotate(-30deg);
}
.loading_spinner_color_field.step_1 {
position: absolute;
left: 0;
top: 0;
background-color: #FF6B00;
height: 106px;
width: 60px;
transform: none;
transition: height 1000ms ease 0s;
}
.loading_spinner_container.step_2 {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
}
.loading_spinner_roller.step_2 {
position: absolute;
left: 8%;
top: -45%;
transform: scale(1.5);
transition: left 1000ms ease 0s, top 1000ms ease 0s;
}
.loading_spinner_color_field_container.step_2 {
position: absolute;
left: 27%;
top: -27%;
height: 106px;
width: 60px;
transform: rotate(-30deg);
}
.loading_spinner_color_field.step_2 {
position: absolute;
left: 0;
top: 0;
background-color: #FF6B00;
height: 10px;
width: 60px;
transform: none;
transition: height 1000ms ease 0s;
}
ion-button {
div {
span {
font-size: clamp(4px, 4.5vw, 16px);
}
}
}
@media screen and (max-width: 324px) {
ion-button {
div {
span {
font-size: clamp(4px, 4vw, 13px);
}
}
}
}
@media screen and (max-width: 266px) {
ion-button {
div {
span {
font-size: clamp(4px, 3.5vw, 10px);
}
}
}
}