@font-face { font-family: 'Mulish_regular'; src: url('../fonts/Mulish-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Caveat-VariableFont_wght'; src: url('../fonts/Caveat-VariableFont_wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } :root { --color-1: #4B9AFA; --color-1-hover: #337ed9; --color-2: #5777ba; --color-3: #222222; --color-4: #394c81; } ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 7px; background-color: #d0d2d5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border: 3px transparent solid; background-clip: padding-box; display: none; } :hover::-webkit-scrollbar-thumb { display: block; } .unselect { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; } body { padding: 15px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-size: 15px; } .lbWizardFormInputField, .lbWizardFormInputLabel, .lbWizardSlide, .lbWizardSlidesButton, .lbWizardCarouselButton, .lbWizardCarouselItem, .lbWizardCarouselGridItem, .lbWizardFormCheckbox, .lbWizardFormCheckbox:after, .lbWizardLoading { } .lbWizardIntroTitle { font-family: 'Caveat-VariableFont_wght', sans-serif; } .lbWizard { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: transparent; box-sizing: border-box; width: 100%; height: 100%; min-height: 500px; outline: none; color: #222 !important; } .lbWizard a { text-decoration: none; color: #336699; } .lbWizard a:hover { text-decoration: underline; } .lbWizard button { width: unset; } .lbWizardContent { position: relative; background-color: #ffffff; border: 1px solid rgba(0,0,0,0.08); width: 100%; max-width: 1100px; height: 650px; max-height: 100%; border-radius: 10px; box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); overflow: hidden; box-sizing: border-box; } .lbWizardInner { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; position: relative; overflow-y: hidden; background-color: #f8f8f8; } .lbWizardFit { padding: 35px 35px 35px 35px; } .lbWizardFit .lbWizardContent { max-width: unset; height: 100%; } .lbWizardFull { padding: 0px; } .lbWizardFull .lbWizardContent { max-width: unset; height: 100%; border: unset; box-shadow: unset; border-radius: unset; } .lbWizardForm { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } .lbWizardFormBody { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .lbWizardFormSec { position: relative; width: 100%; height: 100%; } .lbWizardFormSecInner { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 15px; overflow-y: auto; } .lbWizardFormInputs { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; align-items: center; max-width: 500px; } .lbWizardFormInputsRows { display: flex; gap: 15px; flex-direction: row; flex-wrap: nowrap; width: 100%; } .lbWizardFormInputsRow { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; width: 100%; } .lbWizardFormInput { text-align: left; width: 100%; margin-bottom: 20px; } .lbWizardFormInput:last-child { margin-bottom: 0px; } .lbWizardFormInputHeader { margin-bottom: 10px; } .lbWizardFormInputTile { margin-bottom: 5px; font-size: 0.9em; } .lbWizardFormInputTileMini { } .lbWizardFormInputDescription { font-size: 0.8em; color: rgba(0, 0, 0, 0.5); margin-bottom: 10px; line-height: 1.3em; } .lbWizardFormInputSample { font-size: 0.8em; color: rgb(93 101 149); font-weight: normal; line-height: 1.3em; } .lbWizardFormInputField { display: inline-flex; flex-direction: row; flex-wrap: nowrap; border: 1px solid #efefef; position: relative; padding: 10px 5px; width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 5px; } .lbWizardFormInputLabel { font-size: 1em; color: #888; padding: 10px; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box; } .lbWizardFormInputField textarea, .lbWizardFormInputField select, .lbWizardFormInputField input[type="text"], .lbWizardFormInputField input[type="file"] { border: 0px; background-color: transparent; width: 100%; height: 100%; outline: unset; padding: 0px 0 0 5px; box-sizing: border-box; font-size: 1em; position: relative; z-index: 1; border-radius: 3px; color: #000; } .lbWizardFormInputField textarea { font-family: 'Open Sans', sans-serif; height: 100px; resize: none; } .lbWizardFormInputField input[type="file"] { opacity: 0; cursor: pointer; } .lbWizardFormInputField input::placeholder, .lbWizardFormInputField textarea::placeholder { color: gray; font-style: italic; font-size: 14px; opacity: 0.7; } .lbWizardFormInputFocus .lbWizardFormInputField { box-shadow: 0 0 5px rgba(81, 155, 238, 0.5); border: 1px solid rgba(111, 177, 250, 0.5); } .lbWizardFormInputFocusVal .lbWizardFormInputLabel { font-size: 0.7em; width: unset; height: unset; top: -10px; left: 10px; background-color: #fff; color: #999; z-index: 2; border-radius: 0 0 5px 5px; padding: 0px 6px 3px 6px !important; } .lbWizardFormInputFooter .charsRemaining { font-size: 0.9em; margin-top: 5px; } .lbWizardFormCheckbox { width: 35px; height: 20px; min-width: 35px; border-radius: 15px; background-color: #e5e5e5; position: relative; cursor: pointer; } .lbWizardFormCheckbox:after { content: ''; width: 15px; height: 15px; border-radius: 50%; background-color: #bbbbbb; position: absolute; top: 3px; left: 3px; } .lbWizardFormCheckboxOn { background-color: #E7F2FF; } .lbWizardFormCheckboxOn:after { background-color: var(--color-1); left: 17px; } .lbWizardFormButton { display: flex; justify-content: center; align-items: center; padding: 9px 20px; border-radius: 25px; font-size: 1em; color: #fff; cursor: pointer; box-sizing: border-box; text-align: center; outline: unset; border: 0px; width: 100px; margin-top: 20px; } .lbWizardFormButtonApply { background-color: var(--color-1); border-radius: 5px; display: inline-block; width: fit-content; margin-top: 10px; } .lbWizardSlides { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; overflow: hidden; position: relative; background-color: #fff; } .lbWizardSlideShowIntro .lbWizardInner { width: 100%; } .lbWizardSlideShowIntro .lbWizardSlides { max-width: unset; } .lbWizardSlideShowIntro .lbWizardSteps { display: none; } .lbWizardSlidesOver { visibility: hidden; opacity: 0; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(255,255,255,0.8); z-index: 1; } .lbWizardSlidesOverShow { visibility: visible; opacity: 1; } .lbWizardSlidesInner { height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; -moz-transition: all 700ms; -webkit-transition: all 700ms; margin-left: 0%; overflow: hidden; } .lbWizardSlide { visibility: hidden; opacity: 0; transform: scale(0.7); position: relative; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; max-width: 100%; overflow: hidden; padding: 0px; box-sizing: border-box; } .lbWizardSlideInner { position: absolute; top: 5px; right: 5px; bottom: 0px; left: 5px; box-sizing: border-box; -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardSlideContent { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; height: 100%; } .lbWizardSlideHeader { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; padding: 50px 40px 20px 40px; box-sizing: border-box; } .lbWizardSlideTitle { font-size: 1.4em; text-align: center; font-family: 'Mulish_regular', sans-serif; color: var(--color-3) !important; } .lbWizardSlideTitleBig { font-size: 2em; } .lbWizardSlideDescription { font-size: 0.95em; line-height: 1.4em; margin-top: 10px; opacity: 0.6; max-width: 800px; text-align: center; } .lbWizardSlideBody { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; width: 100%; padding: 10px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } .lbWizardSlideBodyInner { } .lbWizardSlideBody::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } .lbWizardSlideBody::-webkit-scrollbar-thumb { border-radius: 7px; background-color: #d0d2d5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border: 3px transparent solid; background-clip: padding-box; display: none; } .lbWizardSlideBody:hover::-webkit-scrollbar-thumb { display: block; } .lbWizardSlideIframe, .lbWizardSlideIframe iframe { width: 100%; height: 100%; margin: unset; } .lbWizardSlideIframe { position: relative; } .lbWizardSlideIframe iframe { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: unset; height: unset; width: 100%; height: 100%; border: 0px; outline: unset; } .lbWizardSlideShow { visibility: visible; opacity: 1; transform: scale(1); } .lbWizardSlideShow .lbWizardSlideInner { display: block; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) { transform: unset; visibility: visible; opacity: 0.8; z-index: 2; -moz-transition: all 300ms; -webkit-transition: all 300ms; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow):hover { opacity: 1; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody { transform: scale(0.4); position: absolute; width: 65%; opacity: 1; z-index: 1; box-sizing: border-box; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody:before { content: ''; position: absolute; top: -20px; right: 20px; bottom: -20px; left: 20px; cursor: pointer; z-index: 3; border: 5px dashed transparent; border-radius: 10px; -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody:hover:before { border-color: rgba(0,0,0,0.1); } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow).lbWizardCarouselItemLeft .lbWizardCarouselItemBody { right: -45%; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow).lbWizardCarouselItemRight .lbWizardCarouselItemBody { left: -45%; } .lbWizardSlidesButtons { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; } .lbWizardSlidesButton { visibility: visible; opacity: 1; background-color: var(--color-1); padding: 9px 20px; border-radius: 25px; font-size: 1em; color: #fff; cursor: pointer; min-width: 100px; box-sizing: border-box; text-align: center; outline: unset !important; border: 0px; } .lbWizardSlidesButtonPrev { background-color: #fff; color: unset; border: 1px solid rgba(0,0,0,0.1); } .lbWizardSlidesButtonFinish { display: none; background-color: var(--color-2); } .lbWizardSlideFooter { width: 100%; text-align: center; box-sizing: border-box; } .lbWizardSlideLopd { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 20px; } .lbWizardSlideLopdText { font-size: 0.9em; margin-left: 10px; color: rgba(0,0,0,0.7); text-align: left; } .lbWizardAlert { visibility: hidden; opacity: 0; top: -50px; margin: 0px 0px 0 0px; position: absolute; right: 0px; left: 0px; z-index: 3; padding: 15px; border-radius: 0; border: 1px solid rgba(0,0,0,0.05); -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardAlertMessage { text-align: center; font-size: 0.9em; } .lbWizardAlertError { background-color: var(--color-2); color: #fff; } .lbWizardAlertShow { visibility: visible; opacity: 1; top: 0; } .lbWizardPopup { visibility: hidden; opacity: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 5; padding: 0px; box-sizing: border-box; -moz-transition: all 300ms; -webkit-transition: all 300ms; background-color: rgba(0,0,0,0.5); } .lbWizardPopupContent { width: 100%; height: 100%; background-color: #ffffff; border-radius: 8px; box-sizing: border-box; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 0 10px 5px rgb(0 0 0 / 4%); } .lbWizardPopupHeader { position: relative; } .lbWizardPopupClose { position: absolute; top: 15px; right: 15px; z-index: 2; cursor: pointer; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .lbWizardPopupClose:before { content: "\ec8d"; font-size: 1.5em; } .lbWizardPopupBody { height: 100%; } .lbWizardPopupIframe { height: 100%; } .lbWizardPopupIframe iframe { width: 100%; height: 100%; } .lbWizardPopupShow.lbWizardPopup { visibility: visible; opacity: 1; } .lbWizardCarousel { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 100%; width: 100%; } .lbWizardCarouselInner { width: 100%; height: 100%; overflow: hidden; } .lbWizardCarouselItems { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardCarouselItems:hover { filter: grayscale(0) !important; opacity: 1 !important; } .lbWizardCarouselItem { visibility: hidden; opacity: 0; transform: scale(0.7); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; -moz-transition: all 100ms; -webkit-transition: all 100ms; } .lbWizardCarouselItemBody { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; height: 100%; justify-content: center; } .lbWizardCarouselItemBody iframe { width: 100%; border: 0px; background-color: transparent; height: 100%; margin: unset; } .lbWizardCarouselItemFooter { } .lbWizardCarouselItemFooterTitle { padding: 0px; font-size: 0.75em; color: rgba(0,0,0,0.5); } .lbWizardCarouselLeft { padding: 0 10px 0 0; } .lbWizardCarouselRight { padding: 0 0 0 10px; } .lbWizardCarouselButton { width: 25px ; height: 25px; opacity: 0.4; cursor: pointer; } .lbWizardCarouselButton:hover { transform: scale(1.1); opacity: 0.7; } .lbWizardCarouselButtonPrev { } .lbWizardCarouselButtonNext { } .lbWizardCarouselButtonDisabled, .lbWizardCarouselButtonDisabled:hover { opacity: 0.1; cursor: default; transform: unset; } .lbWizardCarouselItemShow { visibility: visible; opacity: 1; transform: scale(1); } .lbWizardCarouselItemShow .lbWizardCarouselItemBody { max-width: 380px; } .lbWizardCarouselDisabled .lbWizardCarouselItems { filter: grayscale(1); opacity: 0.5; } .lbWizardElementDisabled { cursor: default; pointer-events: none; filter: grayscale(1); opacity: 0.6; } .lbWizardCarouselGrid { display: inline-grid; grid-column-gap: 0px; grid-row-gap: 0px; width: 100%; height: 100%; max-width: 350px; align-items: center; justify-items: center; } .lbWizardCarouselGridItem { display: flex; justify-content: center; align-items: center; margin: 0px; cursor: pointer; box-sizing: border-box; border: 3px solid transparent; border-radius: 8px; width: 100%; height: 100%; position: relative; } .lbWizardCarouselGridItem:hover { transform: scale(1.1); } .lbWizardCarouselGridItemSelected { border-color: var(--color-1); transform: unset !important; cursor: default; } .lbWizardSteps { display: none; visibility: hidden; opacity: 0; width: 35%; max-width: 300px; padding-top: 50px; z-index: 2; } .lbWizardStep { display: flex; flex-direction: row; flex-wrap: nowrap; height: 110px; border-left: 2px dotted #C8C8C8; } .lbWizardStep:last-child { border-left-color: transparent; } .lbWizardStepProgress { padding-right: 20px; position: relative; } .lbWizardStepProgressNumber { width: 35px; height: 35px; background-color: #C8C8C8; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1em; margin-left: -19px; } .lbWizardStepInfo { padding-right: 15px; } .lbWizardStepTitle { font-size: 1.1em; margin-bottom: 3px; color: rgba(0,0,0,0.6); opacity: 0.5; color: var(--color-3) !important; } .lbWizardStepDescription { font-size: 0.8em; line-height: 1.4em; color: rgba(0,0,0,0.6); opacity: 0.5; } .lbWizardStepReady { border-left: 2px solid var(--color-1); cursor: pointer; } .lbWizardStepReady .lbWizardStepProgressNumber { background-color: var(--color-1); } .lbWizardStepCurrent .lbWizardStepProgressNumber { background-color: #9b9b9b; } .lbWizardStepCurrent .lbWizardStepProgress::after { content: ''; position: absolute; top: 9px; left: -35px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--color-1); } .lbWizardStepReady .lbWizardStepTitle, .lbWizardStepCurrent .lbWizardStepTitle { color: unset; opacity: 1; } .lbWizardStepReady .lbWizardStepDescription, .lbWizardStepCurrent .lbWizardStepDescription { opacity: 1; } .lbWizardStepsShow .lbWizardInner { width: 100%; } .lbWizardStepsShow .lbWizardSteps { display: block; visibility: visible; opacity: 1; } .lbWizardStepsShow .lbWizardSlideInner { right: 35px; } .lbWizardLoading { visibility: hidden; opacity: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(255,255,255,0.7); z-index: 4; } .lbWizardLoadingIcon { background-image: url(../images/loading.gif); background-repeat: no-repeat; background-position: center; width: 50px; height: 50px; } .lbWizardLoadingMessage { color: rgba(0,0,0,0.8); margin-top: 10px; font-size: 0.9em; } .lbWizardLoadingShow { visibility: visible; opacity: 1; } @media (max-width: 650px) { body { padding: 0px; } .lbWizard { padding: 0px; } .lbWizardFit { padding: 0px; } .lbWizardSteps { display: none !important; } .lbWizardInner { } .lbWizardPopupClose { top: 10px; right: 10px; } .lbWizardContent { border-radius: unset; height: 100% !important; border: unset; min-height: 100%; box-shadow: unset; } .lbWizardSlide { display: block; padding: 0px; } .lbWizardSlidesInner { } .lbWizardSlideHeader { padding: 20px; } .lbWizardSlideBody { padding: 0 20px; } .lbWizardSlideTitleBig { font-size: 1.3em; } .lbWizardSlideInner { top: 0px !important; right: 0px !important; bottom: 0px !important; left: 0px !important; } .lbWizardSlidesButtons { padding: 20px 20px 10px 20px; } .lbWizardSlidesButton { margin: 0 0 5px 0 !important; } .lbWizardCarouselButtonPrev { } .lbWizardCarouselButtonNext { } .lbWizardCarouselLeft { padding: 0 5px 0 0; } .lbWizardCarouselRight { padding: 0 0 0 5px; } .lbWizardCarouselGridItem { margin: 0px; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody { display: none !important; } .lbWizardSlideInvitation .lbWizardCarouselItemShow .lbWizardCarouselItemBody { border: unset !important; } .lbWizardPopup { padding: 0px; } .lbWizardFormInputs { flex-wrap: nowrap; align-items: center; } .lbWizardAlert { border-radius: 0px; } }.lbWizardIntro { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } .lbWizardSlideIntro { text-align: center; } .lbWizardSlideIntro .lbWizardIntroLogo { margin-bottom: 60px; } .lbWizardSlideIntro .lbWizardIntroLogo img { max-width: 200px; max-height: 80px; } .lbWizardSlideIntro .lbWizardIntroImage, .lbWizardSlideIntro .lbWizardIntroVideo { margin-bottom: 50px; } .lbWizardSlideIntro .lbWizardIntroImage img { max-width: 100%; max-height: 300px; } .lbWizardSlideIntro .lbWizardIntroVideo { height: 450px; max-width: 100%; max-height: 100%; border-radius: 8px; overflow: hidden; } .lbWizardSlideIntro .lbWizardIntroVideo video { width: 100%; height: 100%; object-fit: cover; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 1.8em; margin-bottom: 15px; color: var(--color-3) !important; } .lbWizardSlideIntro .lbWizardIntroDescription { color: rgba(0,0,0,0.7); } .lbWizardSlideIntro .lbWizardIntroContent { margin-top: 15px; color: rgba(0, 0, 0, 0.7); font-size: 0.9em; } .lbWizardSlideIntro .lbWizardIntroContent ul { text-align: left; list-style-type: none; padding: 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin: 12px 0; position: relative; padding-left: 25px; } .lbWizardSlideIntro .lbWizardIntroContent li::before { content: "✔"; color: #5d6595; position: absolute; left: 0; top: 0; font-size: 1.5em; line-height: 0.8em; } .lbWizardSlideIntro .lbWizardIntroContent li span { font-weight: bold; color: rgba(0, 0, 0, 0.8); } .lbWizardSlideIntro .lbWizardIntroButton { background-color: var(--color-1); padding: 10px 30px; display: inline-block; margin-top: 30px; color: #fff; border-radius: 25px; cursor: pointer; border: 0px; outline: unset; font-size: 1.1em; -moz-transition: all 300ms; -webkit-transition: all 300ms; } @media (max-width: 650px) { .lbWizardSlideIntro .lbWizardIntroImage { margin-bottom: 20px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 1.3em; } }.lbWizardExplain { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 25px 5px 15px 25px; box-sizing: border-box; } .lbWizardExplainBody { width: 100%; max-width: 860px; margin: 0 auto; } .lbWizardExplainTitle { font-size: 2em; font-family: 'Mulish_regular', sans-serif; padding: 10px 0 15px 0; text-align: center; } .lbWizardExplainDescription { font-size: 1.1em; line-height: 1.4em; color: rgba(0,0,0,0.8); } .lbWizardExplainDescription img { max-width: 100%; height: unset !important; } @media (max-width: 650px) { .lbWizardExplain { padding: 0 10px 0 10px; } .lbWizardExplainTitle { font-size: 1.5em; } .lbWizardExplainDescription { font-size: 1em; } } .lbWizardSlideShowIntro .lbWizardSlidesButtons { display: none; } .lbWizardSlideShowListo .lbWizardSlidesButtonNext { display: none; } .lbWizardSlidesButton { background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%) !important; color: #fff !important; border: none !important; padding: 10px 30px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 6px 20px rgba(0, 184, 184, 0.35) !important; min-width: 120px !important; } .lbWizardSlidesButton:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(0, 184, 184, 0.45) !important; } .lbWizardSlidesButtonPrev { background: #ffffff !important; color: #1a2b4a !important; border: 2px solid rgba(0, 184, 184, 0.3) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; } .lbWizardSlidesButtonPrev:hover { background: #f8fafa !important; border-color: #00b8b8 !important; box-shadow: 0 6px 20px rgba(0, 184, 184, 0.2) !important; } .lbWizardSlide .lbWizardSlideInner { position: relative !important; top: unset !important; right: unset !important; bottom: unset !important; left: unset !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 20px !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; } @media (min-height: 700px) and (min-width: 900px) { .lbWizardSlide .lbWizardSlideInner { align-items: center !important; } } .lbWizardExplain.lbWizardExplainWithImage { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 70px; max-width: 1350px; width: 100%; margin: 0 auto; padding: 30px 40px; box-sizing: border-box; } .lbWizardExplainWithImage .lbWizardExplainMedia { flex: 0 0 700px; max-width: 700px; position: relative; } .lbWizardExplainWithImage .lbWizardExplainMedia::before { content: ''; position: absolute; top: -12px; left: -12px; right: 12px; bottom: 12px; background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%); border-radius: 16px; opacity: 0.12; z-index: 0; } .lbWizardExplainWithImage .lbWizardExplainMedia img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1); } .lbWizardExplainWithImage .lbWizardExplainBody { flex: 1; max-width: 480px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 0 0 340px; max-width: 340px; position: relative; height: 240px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple::before { display: none; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img { position: absolute !important; width: 280px !important; height: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(1) { top: 0; left: 0; z-index: 3; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 45px; left: 80px; z-index: 2; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 90px; left: 160px; z-index: 1; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:hover { transform: scale(1.08); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); z-index: 10; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 32px; font-weight: 700; color: #1a2b4a; margin-bottom: 12px; line-height: 1.2; letter-spacing: -0.5px; padding: 0; text-align: left; } .lbWizardExplainSubtitle { display: none; } .lbWizardExplainWithImage .lbWizardExplainDescription { font-size: 1em; line-height: 1.8; color: #4a5568; } .lbWizardExplainDescription p { margin: 16px 0; } .lbWizardExplainList, .lbWizardExplainListNumbered { margin: 20px 0; padding-left: 0; list-style: none; } .lbWizardExplainList li, .lbWizardExplainListNumbered li { position: relative; padding-left: 42px; margin-bottom: 18px; line-height: 1.7; } .lbWizardExplainList li::before { content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 184, 184, 0.4); } .lbWizardExplainListNumbered { counter-reset: step-counter; } .lbWizardExplainListNumbered li { counter-increment: step-counter; padding-left: 46px; } .lbWizardExplainListNumbered li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%); color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 184, 184, 0.35); } .lbWizardExplainList li strong, .lbWizardExplainListNumbered li strong { color: #1a2b4a; font-weight: 600; } .lbWizardExplainHighlight { background: linear-gradient(135deg, #e6f9f9 0%, #f0fafa 100%); border-left: 4px solid #00b8b8; padding: 20px 24px; border-radius: 0 12px 12px 0; margin-top: 28px; font-weight: 600; font-size: 17px; color: #1a2b4a; box-shadow: 0 4px 15px rgba(0, 184, 184, 0.1); } .lbWizardSlideIntro .lbWizardSlideContent { display: flex; align-items: center; justify-content: center; height: 100%; } .lbWizardSlideIntro .lbWizardSlideBody { display: flex; align-items: center; justify-content: center; } .lbWizardSlideIntro .lbWizardIntro { text-align: center; max-width: 600px; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 500px; margin: 0 auto 32px; position: relative; } .lbWizardSlideIntro .lbWizardIntroImage::before { content: ''; position: absolute; top: -15px; left: -15px; right: 15px; bottom: 15px; background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%); border-radius: 20px; opacity: 0.12; z-index: 0; } .lbWizardSlideIntro .lbWizardIntroImage img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1); } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 36px; font-weight: 700; color: #1a2b4a; margin-bottom: 12px; letter-spacing: -0.5px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 18px; color: #00b8b8; font-weight: 600; margin-bottom: 20px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 16px; line-height: 1.8; color: #4a5568; max-width: 520px; margin: 0 auto 32px; } .lbWizardSlideIntro .lbWizardIntroContent p { margin: 10px 0; } .lbWizardSlideIntro .lbWizardIntroButton { background: linear-gradient(135deg, #00b8b8 0%, #0099cc 100%); color: #fff; border: none; padding: 16px 40px; font-size: 17px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 184, 184, 0.35); } .lbWizardSlideIntro .lbWizardIntroButton:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0, 184, 184, 0.45); } @media (max-width: 1400px) { .lbWizardExplainWithImage .lbWizardExplainMedia { flex: 0 0 550px; max-width: 550px; } } @media (max-width: 1200px) { .lbWizardExplain.lbWizardExplainWithImage { gap: 40px; padding: 25px 30px; } .lbWizardExplainWithImage .lbWizardExplainMedia { flex: 0 0 450px; max-width: 450px; } .lbWizardExplainWithImage .lbWizardExplainBody { max-width: 420px; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 28px; } } @media (max-width: 1024px) { .lbWizardExplain.lbWizardExplainWithImage { flex-direction: column; gap: 30px; padding: 20px 20px; } .lbWizardExplainWithImage .lbWizardExplainMedia { flex: none; max-width: 100%; order: -1; } .lbWizardExplainWithImage .lbWizardExplainMedia img { max-width: 450px; margin: 0 auto; display: block; } .lbWizardExplainWithImage .lbWizardExplainBody { max-width: 100%; text-align: center; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple { flex: none; max-width: 380px; height: 260px; margin: 0 auto; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img { width: 180px !important; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(1) { top: 0; left: 0; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 50px; left: 100px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 100px; left: 200px; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 26px; text-align: center; } .lbWizardExplainWithImage .lbWizardExplainDescription { text-align: left; } .lbWizardExplainList li, .lbWizardExplainListNumbered li { text-align: left; } } @media (max-width: 768px) { .lbWizardExplain.lbWizardExplainWithImage { gap: 25px; padding: 20px 15px; } .lbWizardExplainWithImage .lbWizardExplainMedia img { max-width: 350px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple { max-width: 300px; height: 220px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img { width: 140px !important; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 45px; left: 80px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 90px; left: 160px; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 24px; } .lbWizardExplainWithImage .lbWizardExplainDescription { font-size: 14px; } .lbWizardExplainList li, .lbWizardExplainListNumbered li { margin-bottom: 12px; padding-left: 28px; font-size: 14px; } .lbWizardExplainList li::before { width: 8px; height: 8px; top: 8px; } .lbWizardExplainListNumbered li { padding-left: 36px; } .lbWizardExplainListNumbered li::before { width: 22px; height: 22px; font-size: 11px; } .lbWizardExplainHighlight { padding: 14px 16px; font-size: 14px; margin-top: 16px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 26px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 15px; margin-bottom: 12px; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 260px; margin-bottom: 20px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 14px; margin-bottom: 20px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 12px 30px; font-size: 15px; } .lbWizardSlideIntro .lbWizardIntro { padding: 10px; } } @media (max-width: 480px) { .lbWizardSlide .lbWizardSlideInner { padding: 15px 10px !important; } .lbWizardExplain.lbWizardExplainWithImage { gap: 20px; padding: 15px 10px; } .lbWizardExplainWithImage .lbWizardExplainMedia img { max-width: 280px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple { max-width: 240px; height: 170px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img { width: 110px !important; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 35px; left: 65px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 70px; left: 130px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 30px; left: 55px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 60px; left: 110px; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 20px; } .lbWizardExplainWithImage .lbWizardExplainDescription { font-size: 13px; } .lbWizardExplainList li, .lbWizardExplainListNumbered li { font-size: 13px; margin-bottom: 10px; line-height: 1.5; } .lbWizardExplainHighlight { padding: 12px 14px; font-size: 13px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 22px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 14px; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 200px; margin-bottom: 16px; } .lbWizardSlideIntro .lbWizardIntroImage::before { top: -8px; left: -8px; right: 8px; bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 13px; line-height: 1.6; margin-bottom: 16px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 10px 24px; font-size: 14px; } } @media (max-height: 800px) { .lbWizardSlideIntro .lbWizardSlideInner { align-items: flex-start !important; overflow-y: auto !important; padding: 15px !important; } .lbWizardSlideIntro .lbWizardIntro { padding: 8px 0; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 280px; margin-bottom: 18px; } .lbWizardSlideIntro .lbWizardIntroImage::before { top: -10px; left: -10px; right: 10px; bottom: 10px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 28px; margin-bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 15px; margin-bottom: 12px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .lbWizardSlideIntro .lbWizardIntroContent ul { margin: 8px 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin-bottom: 4px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 12px 28px; font-size: 15px; } } @media (max-height: 600px) { .lbWizardSlideIntro .lbWizardSlideInner { align-items: flex-start !important; overflow-y: auto !important; padding: 15px !important; } .lbWizardSlideIntro .lbWizardIntro { padding: 10px 0; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 200px; margin-bottom: 16px; } .lbWizardSlideIntro .lbWizardIntroImage::before { top: -8px; left: -8px; right: 8px; bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 24px; margin-bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 14px; margin-bottom: 12px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .lbWizardSlideIntro .lbWizardIntroContent ul { margin: 8px 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin-bottom: 4px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 12px 28px; font-size: 15px; margin-top: 8px; } } @media (max-height: 500px) { .lbWizardSlideIntro .lbWizardIntroImage { max-width: 160px; margin-bottom: 12px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 20px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 13px; margin-bottom: 10px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 13px; margin-bottom: 12px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 10px 24px; font-size: 14px; } } @media (max-height: 450px) { .lbWizardSlideIntro .lbWizardIntroImage { max-width: 120px; margin-bottom: 10px; } .lbWizardSlideIntro .lbWizardIntroImage::before { top: -5px; left: -5px; right: 5px; bottom: 5px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 18px; margin-bottom: 6px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 12px; margin-bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 12px; line-height: 1.4; margin-bottom: 10px; } .lbWizardSlideIntro .lbWizardIntroContent ul { margin: 5px 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin-bottom: 2px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 8px 20px; font-size: 13px; } } @media (max-height: 400px) { .lbWizardSlideIntro .lbWizardIntroImage { max-width: 90px; margin-bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroImage::before { display: none; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 16px; margin-bottom: 4px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 11px; margin-bottom: 6px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 11px; line-height: 1.3; margin-bottom: 8px; } .lbWizardSlideIntro .lbWizardIntroContent ul { margin: 4px 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin-bottom: 0; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 6px 16px; font-size: 12px; } } @media (max-height: 350px) { .lbWizardSlideIntro .lbWizardIntro { padding: 5px 0; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 70px; margin-bottom: 6px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 14px; margin-bottom: 3px; } .lbWizardSlideIntro .lbWizardIntroDescription { font-size: 10px; margin-bottom: 4px; } .lbWizardSlideIntro .lbWizardIntroContent { font-size: 10px; line-height: 1.2; margin-bottom: 6px; } .lbWizardSlideIntro .lbWizardIntroButton { padding: 5px 14px; font-size: 11px; } } @media (max-width: 360px) { .lbWizardExplainWithImage .lbWizardExplainMedia img { max-width: 180px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple { max-width: 180px; height: 140px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img { width: 85px !important; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(2) { top: 25px; left: 45px; } .lbWizardExplainWithImage .lbWizardExplainMedia.lbWizardExplainMediaMultiple img:nth-child(3) { top: 50px; left: 90px; } .lbWizardExplainWithImage .lbWizardExplainTitle { font-size: 18px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 20px; } .lbWizardSlideIntro .lbWizardIntroImage { max-width: 160px; } }